Merge branch 'master' into eleanor-gptdraw

1 files changed, 79 insertions, 0 deletions

diff --git a/packages/components/README.md b/packages/components/README.md
new file mode 100644
index 000000000..9721cffa6
--- /dev/null
+++ b/packages/components/README.md
@@ -0,0 +1,79 @@
+# 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
+```