toge-component-builder

Scaffolding a new Vue 3 component in a design system requires generating a 4-file pattern of .vue, .types.ts, .styles.ts, and .state.ts files alongside index.ts exports. This ensures consistent TypeScript conventions and structural integrity across primitives, molecules, and patterns.

Migrating v1 design system components to a new pattern involves enforced conventions for state, props, and styling. This refactoring process updates older spr- components to the toge pattern while maintaining the project's TypeScript folder structure.

Wiring component exports to a central library file requires updating lib/toge.ts to include the new component exports. This ensures the component is properly registered and accessible across the Vue 3 application after scaffolding.

Yes, the component builder works with TypeScript and Vue 3 by enforcing project-specific TypeScript typings and conventions. It targets the creation of .types.ts and .state.ts files to ensure type safety within the Sprout Design System.

Updating the playground registry is necessary immediately after scaffolding or migrating a component. This guides the wiring of playground registrations to accelerate adoption and validate the new Vue 3 component visually.

Design system component migration requires a 4-file pattern to separate concerns into .vue, .types.ts, .styles.ts, and .state.ts files. This structure enforces consistent folder patterns and TypeScript conventions across primitives, molecules, and patterns.