workday/canvas-kit/sana-canvas-kit-builder

// useDisclosureModel.ts
import * as React from 'react';
import {createModelHook, useUniqueId} from '@workday/canvas-kit-react/common';
export const useDisclosureModel = createModelHook({
  defaultConfig: {
    id: undefined as string | undefined,
    initialVisible: false,
  },
})(config => {
  const id = useUniqueId(config.id);
  const [visible, setVisible] = React.useState(config.initialVisible);
  return {
    state: {id, visible},
    events: {
      show() {
        setVisible(true);
      },
      hide() {
        setVisible(false);
      },
    },
  };
});

// Disclosure.tsx
import {createContainer} from '@workday/canvas-kit-react/common';
import {useDisclosureModel} from './useDisclosureModel';
import {DisclosureTarget} from './DisclosureTarget';
import {DisclosureContent} from './DisclosureContent';
export interface DisclosureProps {}
export const Disclosure = createContainer()({
  displayName: 'Disclosure',
  modelHook: useDisclosureModel,
  subComponents: {
    Target: DisclosureTarget,
    Content: DisclosureContent,
  },
})<DisclosureProps>(({children}) => <>{children}</>);

// useDisclosureTarget.ts
import {composeHooks, createElemPropsHook} from '@workday/canvas-kit-react/common';
import {useDisclosureModel} from './useDisclosureModel';
export const useDisclosureTarget = composeHooks(
  createElemPropsHook(useDisclosureModel)(model => ({
    type: 'button',
    'aria-expanded': model.state.visible,
    'aria-controls': model.state.id,
    onClick() {
      if (model.state.visible) {
        model.events.hide();
      } else {
        model.events.show();
      }
    },
  }))
);
// DisclosureTarget.tsx
import {createSubcomponent} from '@workday/canvas-kit-react/common';
import {useDisclosureModel} from './useDisclosureModel';
import {useDisclosureTarget} from './useDisclosureTarget';
export interface DisclosureTargetProps {}
export const DisclosureTarget = createSubcomponent('button')({
  modelHook: useDisclosureModel,
  elemPropsHook: useDisclosureTarget,
})<DisclosureTargetProps>((elemProps, Element) => <Element {...elemProps} />);

import {createComponent} from '@workday/canvas-kit-react/common';
import {createStyles, handleCsProp} from '@workday/canvas-kit-styling';
import {system} from '@workday/canvas-tokens-web';
const headingStyles = createStyles({
  ...system.type.heading.sm,
  color: system.color.fg.strong,
});
export const CardHeading = createComponent('h3')({
  displayName: 'Card.Heading',
  Component: ({children, ...elemProps}, ref, Element) => (
    <Element ref={ref} {...handleCsProp(elemProps, headingStyles)}>
      {children}
    </Element>
  ),
});

export const useDisclosureModel = createModelHook({
  defaultConfig: {
    ...useIDModel.defaultConfig,
    initialVisible: false,
  },
})(config => {
  const idModel = useIDModel(config);
  const [visible, setVisible] = React.useState(config.initialVisible);
  return {
    state: {...idModel.state, visible},
    events: {
      ...idModel.events,
      show() { setVisible(true); },
      hide() { setVisible(false); },
    },
  };
});

- [ ] Pick factory (createComponent vs createContainer + model)
- [ ] List/grid/selection/roving focus? → extend collection models; else createModelHook
- [ ] Extract elemProps into createElemPropsHook (module scope)
- [ ] Style with createStyles/createStencil + cs (/sana-canvas-kit-styling)
- [ ] Use system tokens (/sana-canvas-kit-tokens)
- [ ] Verify composed Canvas Kit imports are not @deprecated (/sana-canvas-kit-component-selection)
- [ ] JSDoc every prop; run a11y checklist (/sana-canvas-kit-accessibility)

export const Expandable = ({targetText, children}: ExpandableProps) => (
  <Disclosure>
    <Disclosure.Target>{targetText}</Disclosure.Target>
    <Disclosure.Content>{children}</Disclosure.Content>
  </Disclosure>
);

No shared state, just markup/styles?     → createComponent
Root provides state to children?         → createContainer + createModelHook
List/grid with selection or roving focus?→ extend useListModel / collection item hooks
Child reads model from context?          → createSubcomponent
Reusable ARIA/event props for an element?→ createElemPropsHook
Combining multiple elemProps hooks?      → composeHooks (module scope)
Need id refs for a11y?                   → compose useIDModel into your model
How to style?                            → /sana-canvas-kit-styling
Which token?                             → /sana-canvas-kit-tokens
Composing existing Canvas components?    → /sana-canvas-kit-component-selection
Accessibility (labels, keyboard, ARIA)? → /sana-canvas-kit-accessibility
Does a Canvas component already do this?→ /sana-canvas-kit-design-principles (check before building)