diff options
| author | Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> | 2025-03-04 04:32:50 -0500 |
|---|---|---|
| committer | Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> | 2025-03-04 04:32:50 -0500 |
| commit | 95abdada5a275fc258fa72781f7f3c40c0b306ea (patch) | |
| tree | 6d729cebe0937ae81108005de9895b5398d1f475 /packages/components/README.md | |
| parent | 0a8f3739cf5c30852f18751a4c05d81e0dabe928 (diff) | |
| parent | 215ad40efa2e343e290d18bffbc55884829f1a0d (diff) | |
Merge branch 'master' of https://github.com/brown-dash/Dash-Web into Merge
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 +``` |
