@skmtc/gen-shadcn-select
Produce a React searchable-select component sourced from a GET list-response operation.
An operation generator. Useful when a form field references
another resource (e.g., "office" on a contact form, sourced from
GET /offices). Pairs with gen-shadcn-form's
fields[].references enrichment.
Source
skmtc-generators/gen-shadcn-select/src/
What it generates
Per supported operation, a React select component:
export const OfficeSelect = ({ value, onChange }) => {
const { data } = useGetOffices()
return (
<Combobox value={value} onChange={onChange}>
{data.map(office => <ComboboxItem value={office.id}>{office.name}</ComboboxItem>)}
</Combobox>
)
}Key decisions
-
Strict
isSupportedfilter. Only GET operations that return a list response. The check importsisListResponsefrom@skmtc/gen-tanstack-query-supabase-zod:import { isListResponse } from '@skmtc/gen-tanstack-query-supabase-zod' isSupported: ({ operation }) => operation.method === 'get' && isListResponse(operation)Cross-package utility import — a deliberate clone seam, not a refactoring target.
-
toPreviewModuleandtoMappingModulehooks. The entry declares two extra hooks beyondtransform—toPreviewModulefor IDE preview integration,toMappingModulefor the form generator'sreferencesdispatch to know which select to reach for. -
Combobox-based. The stock produces a searchable combobox, not a plain
<select>. The shadcn/ui Combobox component is the target.
What to learn from it
- Cross-generator helper sharing. The
isListResponseutility is exported bygen-tanstack-query-supabase-zodand imported by this generator. Generator packages can ship reusable helpers, not justEntrys. toMappingModulefor cross-generator addressing. A second generator (gen-shadcn-form) reads the mapping module to discover "for this operationId, which select component should I embed?" The hook makes the lookup deterministic.- GET-list-response as a generator-specific shape. When your
generator produces something meaningful only for a narrow operation
shape, encode that in
isSupportedand let everything else fall through.
Common customizations when cloned
- Swap Combobox for plain
<select>or a different UI lib's equivalent. - Customize how items are labeled (the stock uses a
namefield if present; you may want to construct labels from multiple fields). - Add server-side filtering for very large lists (the stock loads everything client-side).
- Change which transport hook is called (the stock pairs with Supabase; the fetch variant requires a swap).
See also
- gen-shadcn-form — references this generator
via
fields[].referencesenrichment - gen-shadcn-table — same
isSupportedshape, different output - gen-tanstack-query-supabase-zod —
exports the
isListResponseutility this generator uses - Enrichments concept