@boostxyz/boost-ui
v0.12.1
Published
## Best Practice
Downloads
1,077
Keywords
Readme
@boostxyz/boost-ui
Best Practice
- Don't compose primitive component packages (ie. Don't include a
<Button>
in a<Card>
). Allow the implementor to use them together.
Adding a Component
Latest Steps
pnpm run ui:add -- table
(or whatever component)- this will install to
packages/ui/src/components/*.tsx
- this will install to
pnpm run ui:integrate table.tsx
(or whatever the output file is)- answer the steps to generate
packages/ui/src/components/MyComponent/*
- answer the steps to generate
- Integrate your component for testing in
apps/nextjs/src/apps/page.tsx
- Add an accompanying
*.stories.tsx
for the component inapps/storybook/stories
- Add an accompanying
Former Steps
pnpm run ui:add -- table
(or whatever component)- this will install to
packages/ui/src/components/*.tsx
- this will install to
- 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
- Duplicate a simple component (like Badge) and rename the component to your new one (including the copied files)
- 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 accompanyingBaseComponent.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 {}
- To ensure legibility, split each class name at the space, and turn it into a new