mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-18 16:43:32 +01:00
parent 13567d51af
commit b263de3a35
418 changed files with 1986 additions and 2161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docs/architecture/website/REACT_COMPONENT_ARCHITECTURE.md
View File

@@ -109,7 +109,8 @@ export function TeamsTemplate({ teams, searchQuery, onSearchChange, onTeamClick
- Can contain app-specific business logic
- Can use Next.js hooks (but not Next.js components like `Link`)
- Should be reusable within the app context
- Should NOT be generic UI primitives
- **Strictly Forbidden**: Generic UI primitives (`Box`, `Surface`) and generic wrappers (`Layout`, `Container`)
- **Strictly Forbidden**: The `className` prop (styling must be handled by UI components)
**Example**:
```typescript
@@ -177,14 +178,16 @@ export function Card({ children, className }: CardProps) {
To prevent "div wrapper" abuse and maintain architectural integrity, we enforce a strict boundary between **Primitives** and **Semantic UI**.
### 1. Primitives (`ui/primitives/`)
- **Generic building blocks**: `Box`, `Surface`, `Stack`, `Grid`, `GridItem`.
- **Internal only**: These should NEVER be imported outside of the `ui/` layer.
### 1. Primitives & Generic Wrappers (Forbidden in Components)
- **Primitives**: `Box`, `Surface` (in `ui/primitives/`)
- **Generic Wrappers**: `Layout`, `Container` (in `ui/`)
- **Internal only**: These should NEVER be imported by `components/`. They are for building semantic UI elements.
- **Full flexibility**: They allow arbitrary styling (bg, border, shadow, etc.) to build semantic components.
### 2. Semantic UI (`ui/`)
- **Building blocks for components**: `Card`, `Panel`, `Button`, `Table`, `Stack`, `Grid`.
- **Restricted flexibility**: Semantic layout components (like `Stack`, `Grid`) are restricted to layout-only props. They do NOT allow styling props (bg, border, etc.).
### 2. Semantic UI (Allowed in Components)
- **Building blocks**: `Card`, `Panel`, `Button`, `Table`.
- **Layout Components**: `Stack`, `Grid` (Restricted to layout-only props).
- **Restricted flexibility**: Semantic layout components are restricted to layout-only props. They do NOT allow styling props (bg, border, etc.).
- **Public API**: These are the only UI elements that should be imported by `components/` or `pages/`.
**Rule of thumb**: If you need a styled container in a component, use `Panel` or `Card`. If you need a new type of styled container, create it in `ui/` using primitives. Direct use of primitives or raw HTML tags in `components/` is forbidden.