Compositions

A composition is a catalog item made of other catalog items. The registry stores it as a pattern. A composition needs no renderer, so it uses defineCatalogItem from handoff-app/pattern.

import { defineCatalogItem } from 'handoff-app/pattern'

export default defineCatalogItem({
  id: 'signup',
  name: 'Sign-up form',
  description: 'Collects an email address for the newsletter.',
  group: 'Forms',
  composition: [
    { ref: 'text-input', preview: 'Default', args: { label: 'Email' } },
    { ref: 'button', preview: 'Primary', args: { children: 'Subscribe' } },
  ],
})

Composition members

Each member is a CompositionRef:

• With neither preview nor args, the member renders the item's first preview.
• With args but no preview, the member renders with those args only.
• A member whose item or preview does not exist is skipped, and the build names it in a warning.
• A composition owns no previews. It renders its members in order.
• A React preview's render carries into the composition.
• If you rename a preview, update every composition that references it.
• Pattern ids share one namespace with component ids. See Ids.

Publishing

publish catalog covers components and patterns together. The declaration decides how the registry stores each item, so the command names items, not kinds:

npm run publish -- catalog signup

See Publish and checkout.