# @segmentify/ui

A collection of reusable React UI components built with Tailwind CSS and Radix UI.

## Features

- 🎨 **Tailwind CSS**: Styled using Tailwind CSS for easy customization.
- 🧩 **Radix UI**: Built on top of Radix UI primitives for accessibility and reliability.
- 🎭 **Storybook**: Integrated Storybook for component development and documentation.
- 📦 **TypeScript**: Fully typed for a great developer experience.
- 🚀 **Vite**: Fast build and development workflow.

## Installation

```bash
pnpm add @segmentify/ui
# or
npm install @segmentify/ui
# or
yarn add @segmentify/ui
```

### Peer Dependencies

Make sure you have `react`, `react-dom`, and `tailwindcss` installed in your project.

## Usage

Import components directly from the package:

```tsx
import { Button } from '@segmentify/ui';

function App() {
  return <Button onClick={() => console.log('Clicked!')}>Click Me</Button>;
}
```

### Styling

Import the CSS in your main entry file and wrap your application (or the part using the library) with the `ui-lib-root` class to ensure styles are correctly applied and do not conflict with your own Tailwind CSS:

```tsx
import '@segmentify/ui/dist/ui.css';

function App() {
  return <div className="ui-lib-root">{/* your app components */}</div>;
}
```

## Development

### Scripts

- `pnpm dev`: Start the Vite development server.
- `pnpm build`: Build the library using Vite and generate TypeScript declarations.
- `pnpm storybook`: Start Storybook for component development.
- `pnpm build-storybook`: Build the Storybook documentation.
- `pnpm lint`: Run ESLint to check for code quality issues.
- `pnpm format`: Format the codebase using Prettier.
- `pnpm release`: Publish the package using Changesets.

## Releasing

This project uses Changesets for versioning and releases.

### Configuration

To publish new releases, you must have an `.npmrc` file in the root of the project with a valid npm authToken:

```text
@segmentify:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=YOUR_NPM_AUTH_TOKEN
```

### Process

1. **Create a Changeset**: Run `pnpm changeset` and follow the prompts to document your changes.
2. **Version Packages**: Run `pnpm version-packages` to update versions and the changelog.
3. **Publish**: Run `pnpm release` to publish the new version to npm.

## License

MIT
