@boostxyz/boost-ui

@boostxyz/boost-ui

Best Practice

1. 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
• 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

Former Steps

• 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 {}