blob: 9721cffa679986149f4fcda374c1143524dd6b65 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
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
```
|
