@boostxyz/boost-ui
0.2.4 • Public • Published
- Don't compose primitive component packages (ie. Don't include a
<Button> in a <Card>). Allow the implementor to use them together.
-
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 {}
Readme
Keywords
nonePackage Sidebar
Install
Weekly Downloads