@contractspec/example.crm-pipeline 3.7.6 → 3.7.10

package/src/ui/overlays/demo-overlays.ts

@@ -10,59 +10,59 @@ import type { OverlayDefinition } from '../../shared/overlay-types';
  * Demo user overlay - sample data mode
  */
 export const crmDemoOverlay: OverlayDefinition = {
-  overlayId: 'crm-pipeline.demo-user',
-  version: '1.0.0',
-  description: 'Demo mode with sample data',
-  appliesTo: {
-    feature: 'crm-pipeline',
-    role: 'demo',
-  },
-  modifications: [
-    {
-      type: 'hideField',
-      field: 'importButton',
-      reason: 'Not available in demo',
-    },
-    {
-      type: 'hideField',
-      field: 'exportButton',
-      reason: 'Not available in demo',
-    },
-    {
-      type: 'addBadge',
-      position: 'header',
-      label: 'Demo Mode',
-      variant: 'warning',
-    },
-  ],
+	overlayId: 'crm-pipeline.demo-user',
+	version: '1.0.0',
+	description: 'Demo mode with sample data',
+	appliesTo: {
+		feature: 'crm-pipeline',
+		role: 'demo',
+	},
+	modifications: [
+		{
+			type: 'hideField',
+			field: 'importButton',
+			reason: 'Not available in demo',
+		},
+		{
+			type: 'hideField',
+			field: 'exportButton',
+			reason: 'Not available in demo',
+		},
+		{
+			type: 'addBadge',
+			position: 'header',
+			label: 'Demo Mode',
+			variant: 'warning',
+		},
+	],
 };
 
 /**
  * Sales rep overlay - focused view for sales
  */
 export const crmSalesRepOverlay: OverlayDefinition = {
-  overlayId: 'crm-pipeline.sales-rep',
-  version: '1.0.0',
-  description: 'Sales rep focused view',
-  appliesTo: {
-    feature: 'crm-pipeline',
-    role: 'sales-rep',
-  },
-  modifications: [
-    {
-      type: 'hideField',
-      field: 'teamMetrics',
-      reason: 'Team metrics for managers only',
-    },
-    { type: 'hideField', field: 'pipelineSettings', reason: 'Admin only' },
-    { type: 'renameLabel', field: 'deals', newLabel: 'My Deals' },
-  ],
+	overlayId: 'crm-pipeline.sales-rep',
+	version: '1.0.0',
+	description: 'Sales rep focused view',
+	appliesTo: {
+		feature: 'crm-pipeline',
+		role: 'sales-rep',
+	},
+	modifications: [
+		{
+			type: 'hideField',
+			field: 'teamMetrics',
+			reason: 'Team metrics for managers only',
+		},
+		{ type: 'hideField', field: 'pipelineSettings', reason: 'Admin only' },
+		{ type: 'renameLabel', field: 'deals', newLabel: 'My Deals' },
+	],
 };
 
 /**
  * All overlays for crm-pipeline
  */
 export const crmOverlays: OverlayDefinition[] = [
-  crmDemoOverlay,
-  crmSalesRepOverlay,
+	crmDemoOverlay,
+	crmSalesRepOverlay,
 ];

package/src/ui/renderers/index.ts

@@ -1,6 +1,7 @@
 // CRM Pipeline renderers
-export { crmPipelineReactRenderer } from './pipeline.renderer';
+
 export {
-  crmPipelineMarkdownRenderer,
-  crmDashboardMarkdownRenderer,
+	crmDashboardMarkdownRenderer,
+	crmPipelineMarkdownRenderer,
 } from './pipeline.markdown';
+export { crmPipelineReactRenderer } from './pipeline.renderer';

package/src/ui/renderers/pipeline.markdown.ts

@@ -5,31 +5,31 @@
  */
 import type { PresentationRenderer } from '@contractspec/lib.contracts-spec/presentations/transform-engine';
 import {
-  mockListDealsHandler,
-  mockGetPipelineStagesHandler,
+	mockGetPipelineStagesHandler,
+	mockListDealsHandler,
 } from '../../handlers';
 
 interface DealItem {
-  id: string;
-  name: string;
-  value: number;
-  currency: string;
-  stageId: string;
-  status: string;
+	id: string;
+	name: string;
+	value: number;
+	currency: string;
+	stageId: string;
+	status: string;
 }
 
 interface StageItem {
-  id: string;
-  name: string;
-  position: number;
+	id: string;
+	name: string;
+	position: number;
 }
 
 function formatCurrency(value: number, currency = 'USD'): string {
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency,
-    minimumFractionDigits: 0,
-  }).format(value);
+	return new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency,
+		minimumFractionDigits: 0,
+	}).format(value);
 }
 
 /**
@@ -37,73 +37,73 @@ function formatCurrency(value: number, currency = 'USD'): string {
  * Only handles PipelineKanbanView component
  */
 export const crmPipelineMarkdownRenderer: PresentationRenderer<{
-  mimeType: string;
-  body: string;
+	mimeType: string;
+	body: string;
 }> = {
-  target: 'markdown',
-  render: async (desc, _ctx) => {
-    // Only handle PipelineKanbanView
-    if (
-      desc.source.type !== 'component' ||
-      desc.source.componentKey !== 'PipelineKanbanView'
-    ) {
-      throw new Error('crmPipelineMarkdownRenderer: not PipelineKanbanView');
-    }
-
-    const pipelineId = 'pipeline-1';
-    const [dealsResult, stages] = await Promise.all([
-      mockListDealsHandler({ pipelineId, limit: 50 }),
-      mockGetPipelineStagesHandler({ pipelineId }),
-    ]);
-
-    const deals = dealsResult.deals as DealItem[];
-    const stageList = stages as StageItem[];
-
-    // Group deals by stage
-    const dealsByStage: Record<string, DealItem[]> = {};
-    for (const stage of stageList) {
-      dealsByStage[stage.id] = deals.filter(
-        (d) => d.stageId === stage.id && d.status === 'OPEN'
-      );
-    }
-
-    // Build Markdown
-    const lines: string[] = [
-      '# CRM Pipeline',
-      '',
-      `**Total Value**: ${formatCurrency(dealsResult.totalValue)}`,
-      `**Total Deals**: ${dealsResult.total}`,
-      '',
-    ];
-
-    for (const stage of stageList.sort((a, b) => a.position - b.position)) {
-      const stageDeals = dealsByStage[stage.id] ?? [];
-      const stageValue = stageDeals.reduce((sum, d) => sum + d.value, 0);
-
-      lines.push(`## ${stage.name}`);
-      lines.push(
-        `_${stageDeals.length} deals · ${formatCurrency(stageValue)}_`
-      );
-      lines.push('');
-
-      if (stageDeals.length === 0) {
-        lines.push('_No deals_');
-      } else {
-        for (const deal of stageDeals) {
-          lines.push(
-            `- **${deal.name}** - ${formatCurrency(deal.value, deal.currency)}`
-          );
-        }
-      }
-
-      lines.push('');
-    }
-
-    return {
-      mimeType: 'text/markdown',
-      body: lines.join('\n'),
-    };
-  },
+	target: 'markdown',
+	render: async (desc, _ctx) => {
+		// Only handle PipelineKanbanView
+		if (
+			desc.source.type !== 'component' ||
+			desc.source.componentKey !== 'PipelineKanbanView'
+		) {
+			throw new Error('crmPipelineMarkdownRenderer: not PipelineKanbanView');
+		}
+
+		const pipelineId = 'pipeline-1';
+		const [dealsResult, stages] = await Promise.all([
+			mockListDealsHandler({ pipelineId, limit: 50 }),
+			mockGetPipelineStagesHandler({ pipelineId }),
+		]);
+
+		const deals = dealsResult.deals as DealItem[];
+		const stageList = stages as StageItem[];
+
+		// Group deals by stage
+		const dealsByStage: Record<string, DealItem[]> = {};
+		for (const stage of stageList) {
+			dealsByStage[stage.id] = deals.filter(
+				(d) => d.stageId === stage.id && d.status === 'OPEN'
+			);
+		}
+
+		// Build Markdown
+		const lines: string[] = [
+			'# CRM Pipeline',
+			'',
+			`**Total Value**: ${formatCurrency(dealsResult.totalValue)}`,
+			`**Total Deals**: ${dealsResult.total}`,
+			'',
+		];
+
+		for (const stage of stageList.sort((a, b) => a.position - b.position)) {
+			const stageDeals = dealsByStage[stage.id] ?? [];
+			const stageValue = stageDeals.reduce((sum, d) => sum + d.value, 0);
+
+			lines.push(`## ${stage.name}`);
+			lines.push(
+				`_${stageDeals.length} deals · ${formatCurrency(stageValue)}_`
+			);
+			lines.push('');
+
+			if (stageDeals.length === 0) {
+				lines.push('_No deals_');
+			} else {
+				for (const deal of stageDeals) {
+					lines.push(
+						`- **${deal.name}** - ${formatCurrency(deal.value, deal.currency)}`
+					);
+				}
+			}
+
+			lines.push('');
+		}
+
+		return {
+			mimeType: 'text/markdown',
+			body: lines.join('\n'),
+		};
+	},
 };
 
 /**
@@ -111,88 +111,88 @@ export const crmPipelineMarkdownRenderer: PresentationRenderer<{
  * Only handles CrmDashboard component
  */
 export const crmDashboardMarkdownRenderer: PresentationRenderer<{
-  mimeType: string;
-  body: string;
+	mimeType: string;
+	body: string;
 }> = {
-  target: 'markdown',
-  render: async (desc, _ctx) => {
-    // Only handle CrmDashboard
-    if (
-      desc.source.type !== 'component' ||
-      desc.source.componentKey !== 'CrmDashboard'
-    ) {
-      throw new Error('crmDashboardMarkdownRenderer: not CrmDashboard');
-    }
-
-    const pipelineId = 'pipeline-1';
-    const [dealsResult, stages] = await Promise.all([
-      mockListDealsHandler({ pipelineId, limit: 100 }),
-      mockGetPipelineStagesHandler({ pipelineId }),
-    ]);
-
-    const deals = dealsResult.deals as DealItem[];
-    const stageList = stages as StageItem[];
-
-    // Calculate stats
-    const openDeals = deals.filter((d) => d.status === 'OPEN');
-    const wonDeals = deals.filter((d) => d.status === 'WON');
-    const lostDeals = deals.filter((d) => d.status === 'LOST');
-    const openValue = openDeals.reduce((sum, d) => sum + d.value, 0);
-    const wonValue = wonDeals.reduce((sum, d) => sum + d.value, 0);
-
-    // Build dashboard markdown
-    const lines: string[] = [
-      '# CRM Dashboard',
-      '',
-      '> Sales pipeline overview and key metrics',
-      '',
-      '## Summary',
-      '',
-      '| Metric | Value |',
-      '|--------|-------|',
-      `| Total Deals | ${dealsResult.total} |`,
-      `| Pipeline Value | ${formatCurrency(dealsResult.totalValue)} |`,
-      `| Open Deals | ${openDeals.length} (${formatCurrency(openValue)}) |`,
-      `| Won Deals | ${wonDeals.length} (${formatCurrency(wonValue)}) |`,
-      `| Lost Deals | ${lostDeals.length} |`,
-      '',
-      '## Pipeline Stages',
-      '',
-    ];
-
-    // Stage summary table
-    lines.push('| Stage | Deals | Value |');
-    lines.push('|-------|-------|-------|');
-    for (const stage of stageList.sort((a, b) => a.position - b.position)) {
-      const stageDeals = openDeals.filter((d) => d.stageId === stage.id);
-      const stageValue = stageDeals.reduce((sum, d) => sum + d.value, 0);
-      lines.push(
-        `| ${stage.name} | ${stageDeals.length} | ${formatCurrency(stageValue)} |`
-      );
-    }
-
-    lines.push('');
-    lines.push('## Recent Deals');
-    lines.push('');
-
-    // Top 10 recent deals
-    const recentDeals = deals.slice(0, 10);
-    if (recentDeals.length === 0) {
-      lines.push('_No deals yet._');
-    } else {
-      lines.push('| Deal | Value | Stage | Status |');
-      lines.push('|------|-------|-------|--------|');
-      for (const deal of recentDeals) {
-        const stage = stageList.find((s) => s.id === deal.stageId);
-        lines.push(
-          `| ${deal.name} | ${formatCurrency(deal.value, deal.currency)} | ${stage?.name ?? '-'} | ${deal.status} |`
-        );
-      }
-    }
-
-    return {
-      mimeType: 'text/markdown',
-      body: lines.join('\n'),
-    };
-  },
+	target: 'markdown',
+	render: async (desc, _ctx) => {
+		// Only handle CrmDashboard
+		if (
+			desc.source.type !== 'component' ||
+			desc.source.componentKey !== 'CrmDashboard'
+		) {
+			throw new Error('crmDashboardMarkdownRenderer: not CrmDashboard');
+		}
+
+		const pipelineId = 'pipeline-1';
+		const [dealsResult, stages] = await Promise.all([
+			mockListDealsHandler({ pipelineId, limit: 100 }),
+			mockGetPipelineStagesHandler({ pipelineId }),
+		]);
+
+		const deals = dealsResult.deals as DealItem[];
+		const stageList = stages as StageItem[];
+
+		// Calculate stats
+		const openDeals = deals.filter((d) => d.status === 'OPEN');
+		const wonDeals = deals.filter((d) => d.status === 'WON');
+		const lostDeals = deals.filter((d) => d.status === 'LOST');
+		const openValue = openDeals.reduce((sum, d) => sum + d.value, 0);
+		const wonValue = wonDeals.reduce((sum, d) => sum + d.value, 0);
+
+		// Build dashboard markdown
+		const lines: string[] = [
+			'# CRM Dashboard',
+			'',
+			'> Sales pipeline overview and key metrics',
+			'',
+			'## Summary',
+			'',
+			'| Metric | Value |',
+			'|--------|-------|',
+			`| Total Deals | ${dealsResult.total} |`,
+			`| Pipeline Value | ${formatCurrency(dealsResult.totalValue)} |`,
+			`| Open Deals | ${openDeals.length} (${formatCurrency(openValue)}) |`,
+			`| Won Deals | ${wonDeals.length} (${formatCurrency(wonValue)}) |`,
+			`| Lost Deals | ${lostDeals.length} |`,
+			'',
+			'## Pipeline Stages',
+			'',
+		];
+
+		// Stage summary table
+		lines.push('| Stage | Deals | Value |');
+		lines.push('|-------|-------|-------|');
+		for (const stage of stageList.sort((a, b) => a.position - b.position)) {
+			const stageDeals = openDeals.filter((d) => d.stageId === stage.id);
+			const stageValue = stageDeals.reduce((sum, d) => sum + d.value, 0);
+			lines.push(
+				`| ${stage.name} | ${stageDeals.length} | ${formatCurrency(stageValue)} |`
+			);
+		}
+
+		lines.push('');
+		lines.push('## Recent Deals');
+		lines.push('');
+
+		// Top 10 recent deals
+		const recentDeals = deals.slice(0, 10);
+		if (recentDeals.length === 0) {
+			lines.push('_No deals yet._');
+		} else {
+			lines.push('| Deal | Value | Stage | Status |');
+			lines.push('|------|-------|-------|--------|');
+			for (const deal of recentDeals) {
+				const stage = stageList.find((s) => s.id === deal.stageId);
+				lines.push(
+					`| ${deal.name} | ${formatCurrency(deal.value, deal.currency)} | ${stage?.name ?? '-'} | ${deal.status} |`
+				);
+			}
+		}
+
+		return {
+			mimeType: 'text/markdown',
+			body: lines.join('\n'),
+		};
+	},
 };

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

@@ -4,8 +4,9 @@
  * 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-spec/presentations/transform-engine';
+import * as React from 'react';
 import { CrmPipelineBoard } from '../CrmPipelineBoard';
 import { useDealList } from '../hooks/useDealList';
 
@@ -13,23 +14,23 @@ import { useDealList } from '../hooks/useDealList';
  * Wrapper component that provides data to CrmPipelineBoard
  */
 function CrmPipelineBoardWrapper() {
-  const { dealsByStage, stages } = useDealList();
-  return <CrmPipelineBoard dealsByStage={dealsByStage} stages={stages} />;
+	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');
-      }
+	{
+		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}`);
-      }
+			if (desc.source.componentKey !== 'CrmPipelineView') {
+				throw new Error(`Unknown component: ${desc.source.componentKey}`);
+			}
 
-      // Note: The wrapper component will fetch data internally
-      return <CrmPipelineBoardWrapper />;
-    },
-  };
+			// Note: The wrapper component will fetch data internally
+			return <CrmPipelineBoardWrapper />;
+		},
+	};

package/src/ui/tables/DealListTab.smoke.test.tsx

@@ -0,0 +1,149 @@
+import { afterEach, beforeAll, describe, expect, test } from 'bun:test';
+import Window from 'happy-dom/lib/window/Window.js';
+import * as React from 'react';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { MOCK_DEALS } from '../../handlers/mock-data';
+import type { Deal } from '../hooks/useDealList';
+import { DealListDataTable } from './DealListTab';
+
+const TEST_DEALS: Deal[] = MOCK_DEALS.map((deal) => ({
+	...deal,
+	projectId: 'project-1',
+}));
+
+beforeAll(() => {
+	const windowInstance = new Window({
+		url: 'https://sandbox.contractspec.local/sandbox?template=crm-pipeline',
+	});
+	Object.defineProperty(windowInstance, 'SyntaxError', {
+		value: SyntaxError,
+		configurable: true,
+	});
+	Object.assign(globalThis, {
+		window: windowInstance,
+		document: windowInstance.document,
+		navigator: windowInstance.navigator,
+		HTMLElement: windowInstance.HTMLElement,
+		HTMLButtonElement: windowInstance.HTMLButtonElement,
+		Node: windowInstance.Node,
+		Event: windowInstance.Event,
+		MouseEvent: windowInstance.MouseEvent,
+		MutationObserver: windowInstance.MutationObserver,
+		getComputedStyle: windowInstance.getComputedStyle.bind(windowInstance),
+		requestAnimationFrame: (callback: FrameRequestCallback) =>
+			setTimeout(() => callback(Date.now()), 0),
+		cancelAnimationFrame: (id: number) => clearTimeout(id),
+		IS_REACT_ACT_ENVIRONMENT: true,
+	});
+});
+
+afterEach(() => {
+	document.body.innerHTML = '';
+});
+
+function sortDeals(
+	pageIndex: number,
+	pageSize: number,
+	sorting: { id: string; desc: boolean }[]
+) {
+	const [sort] = sorting;
+	const sorted = [...TEST_DEALS].sort((left, right) => {
+		const leftValue =
+			sort?.id === 'deal'
+				? left.name
+				: sort?.id === 'status'
+					? left.status
+					: sort?.id === 'expectedCloseDate'
+						? (left.expectedCloseDate?.toISOString() ?? '')
+						: sort?.id === 'updatedAt'
+							? left.updatedAt.toISOString()
+							: left.value;
+		const rightValue =
+			sort?.id === 'deal'
+				? right.name
+				: sort?.id === 'status'
+					? right.status
+					: sort?.id === 'expectedCloseDate'
+						? (right.expectedCloseDate?.toISOString() ?? '')
+						: sort?.id === 'updatedAt'
+							? right.updatedAt.toISOString()
+							: right.value;
+		if (leftValue === rightValue) return 0;
+		const comparison = leftValue > rightValue ? 1 : -1;
+		return sort?.desc ? comparison * -1 : comparison;
+	});
+	return sorted.slice(pageIndex * pageSize, pageIndex * pageSize + pageSize);
+}
+
+function Harness() {
+	const [sorting, setSorting] = React.useState([{ id: 'value', desc: true }]);
+	const [pagination, setPagination] = React.useState({
+		pageIndex: 0,
+		pageSize: 3,
+	});
+	return (
+		<DealListDataTable
+			deals={sortDeals(pagination.pageIndex, pagination.pageSize, sorting)}
+			totalItems={TEST_DEALS.length}
+			pageIndex={pagination.pageIndex}
+			pageSize={pagination.pageSize}
+			sorting={sorting}
+			onSortingChange={setSorting}
+			onPaginationChange={setPagination}
+		/>
+	);
+}
+
+async function renderTable() {
+	const container = document.createElement('div');
+	document.body.append(container);
+	const root: Root = createRoot(container);
+
+	await act(async () => {
+		root.render(<Harness />);
+	});
+
+	return { container, root };
+}
+
+async function click(element: Element | null | undefined) {
+	if (!element) {
+		throw new Error('Expected clickable element.');
+	}
+	await act(async () => {
+		if ('click' in element && typeof element.click === 'function') {
+			element.click();
+			return;
+		}
+		element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+	});
+}
+
+describe('DealListDataTable', () => {
+	test('renders the shared table and supports selection plus expansion', async () => {
+		const { container, root } = await renderTable();
+
+		expect(container.textContent).toContain('All Deals');
+		expect(container.textContent).toContain('6 total deals');
+
+		await click(container.querySelector('[aria-label="Select row deal-5"]'));
+		expect(container.textContent).toContain('Selected 1');
+
+		await click(container.querySelector('[aria-label="Expand row deal-5"]'));
+		expect(container.textContent).toContain('user-1');
+
+		await click(
+			[...container.getElementsByTagName('button')].find(
+				(button) => button.textContent?.trim() === '2'
+			)
+		);
+		expect(container.textContent).toContain(
+			'Affichage de 4 à 6 sur 6 résultats'
+		);
+
+		await act(async () => {
+			root.unmount();
+		});
+	});
+});