diff options
author | Geireann Lindfield Roberts <geireann_lindfield_roberts@brown.edu> | 2025-01-01 22:55:24 -0800 |
---|---|---|
committer | Geireann Lindfield Roberts <geireann_lindfield_roberts@brown.edu> | 2025-01-01 22:55:24 -0800 |
commit | 119b22ba59e886c2d59bc7ed5fa2551edf922df8 (patch) | |
tree | ef2d2dd72189e24d7cdcdea86f603614a183bd49 /packages/components/README.md | |
parent | cffb72e762d989eb1219a5736f082f5b656bee37 (diff) |
update READMEs
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 +``` |