aboutsummaryrefslogtreecommitdiff
path: root/packages/components/README.md
diff options
context:
space:
mode:
authorbobzel <zzzman@gmail.com>2025-03-16 19:02:56 -0400
committerbobzel <zzzman@gmail.com>2025-03-16 19:02:56 -0400
commitdf708c90d8356934d2e3d9123129c761d328c1fe (patch)
tree98b0588710ac8ca00c303960da0851614aacf597 /packages/components/README.md
parent7d9fae09e8906e5636f6ea695ad560797b08d023 (diff)
parentf4042257be7359734a0dd35cedbf03fe4aa14cf1 (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.md79
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
+```