# @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 {}`