diff options
| author | bobzel <zzzman@gmail.com> | 2025-03-16 19:02:56 -0400 |
|---|---|---|
| committer | bobzel <zzzman@gmail.com> | 2025-03-16 19:02:56 -0400 |
| commit | df708c90d8356934d2e3d9123129c761d328c1fe (patch) | |
| tree | 98b0588710ac8ca00c303960da0851614aacf597 /packages/components/README.md | |
| parent | 7d9fae09e8906e5636f6ea695ad560797b08d023 (diff) | |
| parent | f4042257be7359734a0dd35cedbf03fe4aa14cf1 (diff) | |
Merge branch 'DocCreatorMenu-work' of https://github.com/brown-dash/Dash-Web into DocCreatorMenu-work
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 +``` |
