@boostxyz/boost-ui
0.12.1 • 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 {}
Versions
Version | Downloads (Last 7 Days) | Tag |
---|
0.12.1 | 64 | latest |
Version History
Package Sidebar
Install
Weekly Downloads