Files
gridpilot.gg/apps/website/lib/contracts/components/ComponentContracts.ts
2026-01-19 02:14:53 +01:00

38 lines
1.1 KiB
TypeScript

import { ReactElement } from 'react';
import { ViewData } from '../view-data/ViewData';
/**
* A Template is a stateless component that composes other components.
* It receives ViewData and event handlers.
*
* Rules:
* - Stateless (no useState, useEffect)
* - Receives ViewData and event handlers
* - Composes components and UI elements
* - No business logic
* - No data fetching
* - CANNOT import from ui/, MUST use components/
*/
export type Template<P extends TemplateProps<any>> = (props: P) => ReactElement | null;
export interface TemplateProps<T extends ViewData> {
viewData: T;
}
/**
* A Client Wrapper (PageClient) manages state and event handlers.
* It wires server data (ViewData) to a Template.
*
* Rules:
* - Manages client state and event handlers
* - No UI rendering logic (except loading/error states)
* - MUST return a Template
* - CANNOT import from ui/, MUST use components/
*/
export type ClientWrapper<T extends ViewData, P extends ClientWrapperProps<T> = ClientWrapperProps<T>> =
(props: P) => ReactElement<TemplateProps<T>> | null;
export interface ClientWrapperProps<T extends ViewData> {
viewData: T;
}