chore: first commit
This commit is contained in:
@@ -74,27 +74,28 @@ src/
|
||||
|
||||
## Component Structure
|
||||
|
||||
Each component follows FSD slice structure:
|
||||
Each component follows **flat FSD structure** (simplified for MVP):
|
||||
|
||||
```
|
||||
ComponentName/
|
||||
├── index.ts # Public API (re-export)
|
||||
├── ui/
|
||||
│ ├── ComponentName.tsx
|
||||
│ └── ComponentName.module.scss
|
||||
├── model/
|
||||
│ └── ComponentName.d.ts # Props interface
|
||||
└── api/ # Optional: component-specific API
|
||||
├── index.ts # Public API (re-export)
|
||||
├── ComponentName.tsx # Component + imports
|
||||
├── ComponentName.module.scss # Styles
|
||||
├── ComponentName.d.ts # Props interface
|
||||
└── useComponentApi.ts # Optional: hooks/API if needed
|
||||
```
|
||||
|
||||
> **Note:** Old nested structure (`ui/`, `model/`, `api/` folders) has been deprecated.
|
||||
> The backup of the old generator is at `.scripts/create-fsd-component.ts.bak`
|
||||
|
||||
### Component Template
|
||||
|
||||
```tsx
|
||||
import type { IComponentNameProps } from "./ComponentName.d"
|
||||
import type { JSX } from "react"
|
||||
|
||||
import { FunctionComponent } from "react"
|
||||
|
||||
import { IComponentNameProps } from "../model/ComponentName.d"
|
||||
import styles from "./ComponentName.module.scss"
|
||||
|
||||
export const ComponentName: FunctionComponent<
|
||||
@@ -108,6 +109,14 @@ export const ComponentName: FunctionComponent<
|
||||
}
|
||||
```
|
||||
|
||||
### Props Interface Template (ComponentName.d.ts)
|
||||
|
||||
```typescript
|
||||
export interface IComponentNameProps {
|
||||
className?: string
|
||||
}
|
||||
```
|
||||
|
||||
### Generate Component
|
||||
|
||||
Use one of these commands to generate new project-wide standardized component, don't create new component file by file by yourself
|
||||
@@ -166,6 +175,13 @@ export const Button: FC<IButtonProps> = ({ variant, onClick }): JSX.Element => {
|
||||
3. **No Cross-Slice Imports** — features cannot import from other features
|
||||
4. **Shared is Agnostic** — no business logic in shared layer
|
||||
|
||||
### When to Split Files
|
||||
|
||||
Split into separate files **only when**:
|
||||
- Hook/API is reused by multiple components
|
||||
- File exceeds ~200 lines
|
||||
- Props interface is shared across 3+ components
|
||||
|
||||
### File Naming
|
||||
|
||||
| Type | Convention | Example |
|
||||
|
||||
Reference in New Issue
Block a user