## Best Practice
npm install @boostxyz/boost-ui1. Don't compose primitive component packages (ie. Don't include a in a
- pnpm run ui:add -- table (or whatever component)
- this will install to packages/ui/src/components/*.tsx
- pnpm run ui:integrate table.tsx (or whatever the output file is)
- answer the steps to generate packages/ui/src/components/MyComponent/*
- Integrate your component for testing in apps/nextjs/src/apps/page.tsx
- Add an accompanying *.stories.tsx for the component in apps/storybook/stories
- pnpm run ui:add -- table (or whatever component)
- this will install to packages/ui/src/components/*.tsx
- It's probably best to stop your dev server so it can rebuild when you add the new component.
- Restart it after you've stubbed out your component
- Create the component directory structure to introduce the new component:
- Duplicate a simple component (like Badge) and rename the component to your new one (including the copied files)
- BaseBadge -> BaseNewThing
- Copy everything except the imports from the downloaded component file, and replace everything below the imports with it
- Rename all of the new components to be prefixed with Base
- Replace all tailwind utility classes with a single styles.BaseComponent declaration, and apply them in the accompanying BaseComponent.module.css
- To ensure legibility, split each class name at the space, and turn it into a new @apply line
- Remove all dark: directives, as these will be controlled using :global(.dark) .some-class {}