code-first-design-promote

Promoting components

Before you start: Read code-first-design.mdc to understand how the framework works, especially the "Draft vs production" and "Components vs prototypes" sections.

⚠️ IMPORTANT:

• You promote components, not prototypes. Prototypes stay in /proto for ongoing experimentation.
• If you have components within a prototype that you want to use in production, promote those individual components.
• Confirm which component to promote before starting. Ask: "Which component should I promote to production?" Only proceed once you have a clear answer.
• Decide if the component should appear in the design system: If it's a reusable component that others should discover, register it. If it's only used within a specific prototype/feature, you can skip registration (but still move it to production).

Steps

1. Move components/draft/<Name>.tsx → components/<Name>.tsx (or feature folder like components/<feature-name>/<Name>.tsx).

2. Update imports everywhere:

   • Update imports in any files that use this component (prototypes, other components, etc.)
   • Update imports in app/proto/_ds/component-registry.ts (if component is registered there)
   • Update imports in app/proto/components/[slug]/page.tsx (if component has a demo)

3. If the component should appear in the design system (recommended for reusable components):

   • In app/proto/_ds/registry.ts, add entry to customComponents:

     customComponents: [
       { 
         name: "<Name>", 
         path: "/proto/components/<kebab-name>", 
         file: "components/<Name>.tsx"  // or "components/<feature-name>/<Name>.tsx"
       }
     ]
     

   • If it was previously in draftComponents, remove it from there.
   • In app/proto/_ds/component-registry.ts, update the import and config:

     import { <Name> } from '@/components/<Name>';  // Updated path
     import { defaultProps } from '@/components/<Name>';
     // If in feature folder:
     // import { <Name> } from '@/components/<feature-name>/<Name>';
     // import { defaultProps } from '@/components/<feature-name>/<Name>';
     
     export const COMPONENT_CONFIGS: Record<string, ComponentDemoConfig> = {
       '<kebab-name>': {
         componentName: '<Name>',
         component: <Name>,
         defaultProps: defaultProps,
         fallbackMessage: '<Name> failed to render.',
       },
     };
     

   • In app/proto/components/[slug]/page.tsx, update the import and demo:

     import { <Name> } from '@/components/<Name>';  // Updated path
     import { defaultProps } from '@/components/<Name>';
     // If in feature folder:
     // import { <Name> } from '@/components/<feature-name>/<Name>';
     // import { defaultProps } from '@/components/<feature-name>/<Name>';
     
     const COMPONENT_DEMOS: Record<string, () => React.ReactElement> = {
       '<kebab-name>': () => <Name {...defaultProps} />,
     };