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-19 19:02:32 +01:00
parent 41e21e6595
commit 4ce89c1cc4
3 changed files with 2 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -160,7 +160,6 @@ export function TeamLeaderboardPreview({ teams, onTeamClick }: Props) {
- No Next.js imports
- Only receive props and render
- Maximum reusability
- **Strict Layering**: Generic primitives (`Box`, `Surface`, `Stack`, `Grid`) are internal to this layer.
- **Encapsulation**: Must NOT expose `className`, `style`, or Tailwind-specific props to consumers.
- **Semantic APIs**: Use semantic props (e.g., `variant="primary"`, `size="large"`) instead of implementation details.
@@ -192,12 +191,7 @@ export function Button({ children, variant = 'primary', onClick }: ButtonProps)
To prevent "div wrapper" abuse and maintain architectural integrity, we enforce a strict boundary between **Primitives** and **Semantic UI**.
### 1. Primitives (Forbidden in Components)
- **Primitives**: `Box`, `Surface`, `Stack`, `Grid` (in `ui/primitives/`)
- **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 & Layout (Allowed in Components)
### Semantic UI & Layout (Allowed in Components)
- **Building blocks**: `Card`, `Panel`, `Button`, `Table`.
- **Layout Components**: `Layout`, `Container` (in `ui/`).
- **Restricted flexibility**: Semantic components are restricted to their defined props. They do NOT allow arbitrary styling props (bg, border, etc.).