@contractspec/example.crm-pipeline 0.0.0-canary-20260113170453

package/src/ui/renderers/pipeline.renderer.tsx

@@ -0,0 +1,35 @@
+/**
+ * React renderer for CRM Pipeline presentation
+ *
+ * Renders the CRM pipeline board component.
+ * Data is fetched via the CrmPipelineBoard component's internal hooks.
+ */
+import * as React from 'react';
+import type { PresentationRenderer } from '@contractspec/lib.contracts';
+import { CrmPipelineBoard } from '../CrmPipelineBoard';
+import { useDealList } from '../hooks/useDealList';
+
+/**
+ * Wrapper component that provides data to CrmPipelineBoard
+ */
+function CrmPipelineBoardWrapper() {
+  const { dealsByStage, stages } = useDealList();
+  return <CrmPipelineBoard dealsByStage={dealsByStage} stages={stages} />;
+}
+
+export const crmPipelineReactRenderer: PresentationRenderer<React.ReactElement> =
+  {
+    target: 'react',
+    render: async (desc, _ctx) => {
+      if (desc.source.type !== 'component') {
+        throw new Error('Invalid source type');
+      }
+
+      if (desc.source.componentKey !== 'CrmPipelineView') {
+        throw new Error(`Unknown component: ${desc.source.componentKey}`);
+      }
+
+      // Note: The wrapper component will fetch data internally
+      return <CrmPipelineBoardWrapper />;
+    },
+  };

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@contractspec/tool.typescript/react-library.json",
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"],
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist"
+  }
+}
+