62 lines
1.4 KiB
Markdown
62 lines
1.4 KiB
Markdown
# Global Components Library
|
|
|
|
Reusable components for all modes and projects.
|
|
|
|
## Purpose
|
|
|
|
This folder contains battle-tested, production-ready components that are shared across Mode1Test, Mode2Test, and future modes. When a component proves solid, it gets promoted here for wider use.
|
|
|
|
## Structure
|
|
|
|
Each component lives in its own folder with:
|
|
- Component code (TypeScript)
|
|
- Styling (TailwindCSS utilities)
|
|
- Documentation (how to use, props, dependencies, adjustments)
|
|
- Examples (if complex)
|
|
|
|
Example structure:
|
|
```
|
|
components/
|
|
JobCard/
|
|
JobCard.ts # Component implementation
|
|
README.md # Usage documentation
|
|
```
|
|
|
|
## Using Components in a Mode
|
|
|
|
Import from the parent directory:
|
|
|
|
```typescript
|
|
import JobCard from '../../../components/JobCard/JobCard';
|
|
```
|
|
|
|
Or configure path aliases in your mode's `tsconfig.json`:
|
|
|
|
```json
|
|
{
|
|
"compilerOptions": {
|
|
"paths": {
|
|
"@components/*": ["../components/*"]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
Then import as:
|
|
```typescript
|
|
import JobCard from '@components/JobCard/JobCard';
|
|
```
|
|
|
|
## Adding New Components
|
|
|
|
1. Create a folder with the component name
|
|
2. Write TypeScript with full type safety
|
|
3. Use only TailwindCSS for styling
|
|
4. Document: what it does, how to use, what props/env vars needed
|
|
5. Test in a mode thoroughly
|
|
6. When proven, commit with clear description
|
|
|
|
## Components
|
|
|
|
(None yet—first proven component will be added here)
|