npm package: @revathi_kanakapathy/storybook
Description: A React component library built with Tailwind CSS
Author: Revathi Kanakapathy
Latest version: 0.3.4

# @raise/components

A comprehensive React component library built with **React**, **Tailwind CSS**, and **shadcn/ui**.

## NPM Package Installation

```bash
npm install @raise/components
```

### Quick Start

**IMPORTANT:** You **must** import the CSS file to ensure colors and styles work correctly. The CSS file contains all the CSS custom properties (variables) that define the color palette.

```jsx
import { Button, Card, CardHeader, CardTitle, CardContent } from '@raise/components';
// ⚠️ REQUIRED: Import the styles to get correct colors
import '@raise/components/styles.css';

function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent>
        <Button variant="default">Click Me</Button>
      </CardContent>
    </Card>
  );
}
```

#### CSS Import Options

You can import the CSS in different ways depending on your setup:

**Option 1 - In your main entry file (recommended):**
```jsx
// main.jsx or index.jsx or App.jsx
import '@raise/components/styles.css';
```

**Option 2 - In your CSS file:**
```css
/* styles/global.css or index.css */
@import 'raise-components/styles.css';
```

**Option 3 - In Vite config:**
```js
// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    preprocessorOptions: {
      css: {
        additionalData: `@import 'raise-components/styles.css';`
      }
    }
  }
});
```

## About

A comprehensive, living style guide built with **React**, **Tailwind CSS**, and **shadcn/ui** for the Data Matrix Platform.

## Features

- **Modern Tech Stack**: React 19, Tailwind CSS 4, Vite 7, Storybook 9
- **Scalable Architecture**: Well-organized component structure
- **Developer-Friendly**: Comprehensive documentation and examples
- **Accessible**: WCAG 2.1 compliant components
- **Dark Mode**: Full theme support with toggle
- **Interactive**: Live component playground with Storybook

## Tech Stack

- **React 19+**: Modern React with hooks
- **Tailwind CSS 4**: Utility-first CSS framework
- **shadcn/ui**: High-quality component primitives
- **Vite**: Lightning-fast build tool
- **Storybook 9**: Component documentation and testing
- **class-variance-authority**: Type-safe component variants
- **lucide-react**: Beautiful icon library

## Getting Started

### Prerequisites

- Node.js 18 or higher
- npm or yarn

### Installation

1. Install dependencies:
```bash
npm install
```

2. Run Storybook (development):
```bash
npm run storybook
```

3. Build Storybook (production):
```bash
npm run build-storybook
```

4. Run the React app:
```bash
npm run dev
```

## Project Structure

```
storybook/
├── .storybook/           # Storybook configuration
│   ├── main.js          # Main config
│   └── preview.js       # Preview config with theme
├── src/
│   ├── components/
│   │   └── ui/          # UI component library
│   │       ├── Button.jsx
│   │       ├── Button.stories.jsx
│   │       ├── Input.jsx
│   │       ├── Input.stories.jsx
│   │       ├── Card.jsx
│   │       ├── Card.stories.jsx
│   │       ├── Badge.jsx
│   │       ├── Badge.stories.jsx
│   │       ├── Label.jsx
│   │       ├── Label.stories.jsx
│   │       ├── Textarea.jsx
│   │       ├── Textarea.stories.jsx
│   │       └── index.js
│   ├── lib/
│   │   └── utils.js     # Utility functions (cn helper)
│   ├── stories/
│   │   └── docs/        # Documentation MDX files
│   │       ├── Introduction.mdx
│   │       ├── GettingStarted.mdx
│   │       ├── DesignTokens.mdx
│   │       └── ComponentGuidelines.mdx
│   └── index.css        # Global styles and theme tokens
├── tailwind.config.js   # Tailwind configuration
├── postcss.config.js    # PostCSS configuration
└── package.json
```

## Component Library

### Core Components

#### Button
Multiple variants and sizes for different use cases:
- Variants: default, destructive, outline, secondary, ghost, link
- Sizes: sm, default, lg, icon

```jsx
import { Button } from '@/components/ui';

<Button variant="default">Click me</Button>
<Button variant="destructive">Delete</Button>
<Button size="lg">Large Button</Button>
```

#### Input
Text input with label support:

```jsx
import { Input, Label } from '@/components/ui';

<div>
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="Enter email" />
</div>
```

#### Card
Content container with header, body, and footer:

```jsx
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui';

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>Content goes here</CardContent>
  <CardFooter>Footer content</CardFooter>
</Card>
```

#### Badge
Status indicators and labels:

```jsx
import { Badge } from '@/components/ui';

<Badge variant="default">New</Badge>
<Badge variant="destructive">Error</Badge>
```

#### Textarea
Multi-line text input:

```jsx
import { Textarea, Label } from '@/components/ui';

<div>
  <Label htmlFor="message">Message</Label>
  <Textarea id="message" placeholder="Enter message" />
</div>
```

#### Label
Form field labels:

```jsx
import { Label } from '@/components/ui';

<Label htmlFor="username">Username</Label>
```

## Theming

The design system uses CSS custom properties for theming, making it easy to customize colors and other design tokens.

### Theme Variables

Edit `src/index.css` to customize theme colors:

```css
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  /* ... more variables */
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  /* ... dark mode overrides */
}
```

### Tailwind Configuration

Customize Tailwind in `tailwind.config.js`:

```js
export default {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
      },
    },
  },
}
```

## Storybook Features

### Addons Included

- **@storybook/addon-docs**: Auto-generated documentation
- **@storybook/addon-a11y**: Accessibility testing
- **@storybook/addon-vitest**: Component testing
- **storybook-dark-mode**: Dark/light theme toggle
- **@storybook/addon-onboarding**: Interactive tutorial

### Documentation

Comprehensive documentation is available in Storybook:

1. **Introduction**: Overview of the design system
2. **Getting Started**: Setup and usage guide
3. **Design Tokens**: Color palette, typography, spacing
4. **Component Guidelines**: Best practices and examples

## Usage in Your Project

### Import Components

```jsx
import { Button, Card, Input, Label, Badge, Textarea } from '@/components/ui';
```

### Using the cn Utility

The `cn` utility combines class names efficiently:

```jsx
import { cn } from '@/lib/utils';

<Button className={cn("w-full", isActive && "ring-2")}>
  Button
</Button>
```

## Accessibility

All components are built with accessibility in mind:

- Semantic HTML elements
- ARIA attributes where needed
- Keyboard navigation support
- Focus management
- Screen reader compatibility
- Color contrast compliance

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Scripts

```bash
# Start Storybook
npm run storybook

# Build Storybook for deployment
npm run build-storybook

# Run React app
npm run dev

# Build React app
npm run build

# Preview production build
npm run preview

# Lint code
npm run lint
```

## Contributing

1. Create a new component in `src/components/ui/`
2. Add corresponding `.stories.jsx` file
3. Export component from `src/components/ui/index.js`
4. Update documentation if needed
5. Test in Storybook

## Best Practices

1. **Use Semantic HTML**: Choose appropriate HTML elements
2. **Accessibility First**: Include ARIA labels and keyboard support
3. **Consistent Styling**: Use design tokens and Tailwind utilities
4. **Document Everything**: Add stories and documentation for new components
5. **Test Thoroughly**: Test components in different states and themes

## License

[Your License Here]

## Support

For questions or issues, please [open an issue](https://github.com/your-repo/issues).

---

Built with ❤️ for the Data Matrix Platform