website refactor

apps/website/lib/contracts/components/ComponentContracts.ts

@@ -0,0 +1,37 @@
+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;
+}