diff options
Diffstat (limited to 'packages/components/README.md')
-rw-r--r-- | packages/components/README.md | 79 |
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 +``` |