# Dash Component Library

A shared component library for the Dash web application.

## Quick Start

1. Install dependencies:

    ```bash
    npm install
    ```

2. Run Storybook to view components:
    ```bash
    npm run storybook
    ```
    Visit `http://localhost:6006`

## Development

### Available Scripts

-   `npm run storybook` - Start Storybook development server
-   `npm run build-storybook` - Build Storybook for production

### Creating New Components

1. Create a new component directory in `src/components`
2. Include:
    - Component file (`.tsx`)
    - Stories file (`.stories.tsx`)
    - Styles file (`.scss`)

### Using SCSS

-   Component styles should be placed in `.scss` files
-   Use CSS Modules to avoid style conflicts
-   Import styles in your component:
    ```typescript
    import styles from './YourComponent.scss';
    ```

## Usage in Main Dash Application

### Importing Components

```typescript
// Import specific components
import { Button } from '@dash/components';

// Usage
function MyComponent() {
  return (
      <Button variant="primary">Click me</Button>
  );
}
```

## Component Guidelines

-   Each component should be fully typed with TypeScript
-   Include PropTypes and default props
-   Write stories for all component variants
-   Include unit tests for component logic
-   Follow the established design system
-   Document props and usage in stories

## Project Structure

```
packages/components/
├── .storybook/        # Storybook configuration
├── src/
│   ├── components/    # React components
│   ├── styles/        # Shared styles
│   └── utils/         # Utility functions
├── package.json
└── tsconfig.json
```