@khester/create-dynamics-app 3.1.0 → 3.3.0

package/templates/pcf-field/dev/harness/dataverse.ts

@@ -0,0 +1,71 @@
+import { apiFetch, toHttpError } from '@dataverse-kit/pcf-dev-harness/shell';
+
+/**
+ * TIER 2 of the dev harness — the {{componentName}}-specific live-org read/write.
+ *
+ * The reusable parts (shell, proxy, token refresh, `apiFetch`'s one-shot 401/403 retry) come
+ * from `@dataverse-kit/pcf-dev-harness`. This file is what only THIS control can supply:
+ * reading and writing a SINGLE COLUMN on a single record — which is exactly what a field
+ * control does, so the harness exercises the same round-trip the deployed control performs.
+ *
+ * All calls go through the same-origin `/api/data` proxy in `vite.config.ts`, which injects
+ * the bearer token server-side — no token ever reaches the browser.
+ */
+
+export type { HttpError } from '@dataverse-kit/pcf-dev-harness/shell';
+
+/** The raw value plus the platform's formatted rendering, when the column has one. */
+export interface FieldRead {
+    raw: unknown;
+    formatted?: string;
+}
+
+/**
+ * Read one column off one record.
+ *
+ * @param entitySetName plural set name, e.g. `accounts`
+ * @param recordId      GUID, with or without braces
+ * @param column        logical name, e.g. `accountcategorycode`
+ */
+export async function readField(
+    entitySetName: string,
+    recordId: string,
+    column: string,
+): Promise<FieldRead> {
+    const id = recordId.replace(/[{}]/g, '').trim();
+    const res = await apiFetch(`/api/data/v9.2/${entitySetName}(${id})?$select=${column}`, {
+        // Ask for the formatted-value annotation so option-set labels / currency symbols show
+        // the same text the platform renders on a form.
+        headers: { Prefer: 'odata.include-annotations="OData.Community.Display.V1.FormattedValue"' },
+    });
+    if (!res.ok) throw await toHttpError(res);
+
+    const body = (await res.json()) as Record<string, unknown>;
+    return {
+        raw: body[column] ?? null,
+        formatted: body[`${column}@OData.Community.Display.V1.FormattedValue`] as string | undefined,
+    };
+}
+
+/**
+ * Write one column back to one record — the save half of the round-trip.
+ *
+ * PATCH with a single property, exactly as the deployed control's `getOutputs` → platform save
+ * would. Returns nothing; a non-2xx throws an HttpError the caller can surface.
+ */
+export async function saveField(
+    entitySetName: string,
+    recordId: string,
+    column: string,
+    value: unknown,
+): Promise<void> {
+    const id = recordId.replace(/[{}]/g, '').trim();
+    const res = await apiFetch(`/api/data/v9.2/${entitySetName}(${id})`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        // `null` is meaningful here — it clears the column, which is a real thing a field
+        // control must be able to do, so it is NOT coerced away.
+        body: JSON.stringify({ [column]: value === undefined ? null : value }),
+    });
+    if (!res.ok) throw await toHttpError(res);
+}

package/templates/pcf-field/dev/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{componentName}} – Dev Harness</title>
+    <style>
+      html, body, #root {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/templates/pcf-field/dev/main.tsx

@@ -0,0 +1,212 @@
+import * as React from 'react';
+// ReactDOM.render, NOT createRoot — this control is pinned to React 16.14.0 (the floor the
+// canvas runtime serves), and `react-dom/client` does not exist there.
+import * as ReactDOM from 'react-dom';
+import {
+  HarnessShell,
+  usePersistedState,
+  type ThemeChoice,
+  type DataSource,
+  type HarnessField,
+} from '@dataverse-kit/pcf-dev-harness/shell';
+import { {{componentName}}Component } from '../{{componentName}}/{{componentName}}Component';
+import { readField, saveField, type HttpError } from './harness/dataverse';
+
+/**
+ * Dev harness — renders the control against either a local value or a REAL Dataverse column.
+ *
+ *   - Mock — the local value below. Default; works with no org.
+ *   - Live — read a column off a record via the /api/data proxy, edit it in the control, and
+ *            Save it back. Enabled only when VITE_DYNAMICS_URL is set in `.env.local`.
+ *
+ * The read/edit/save round-trip is the point: `npm start` (pcf-scripts, :8181) can only feed
+ * this control hand-typed values, so it never proves the control round-trips real org data.
+ */
+
+interface FieldBinding {
+  entitySetName: string;
+  recordId: string;
+  column: string;
+}
+
+// VITE_-prefixed vars reach client code; this one only GATES Live mode. The token is
+// deliberately not read here — it would be inlined into the bundle. The proxy injects it.
+const LIVE_ENABLED = !!import.meta.env.VITE_DYNAMICS_URL;
+
+/**
+ * Minimal stand-in for the PCF context. Only the OptionSet variant reads it, for the bound
+ * column's choice metadata — note the UPPERCASE `Options`/`Value`/`Label`, which is the live
+ * PCF API shape, not the form-builder's design-time config. Harmless for the other variants,
+ * which ignore `context` entirely.
+ */
+const MOCK_CONTEXT = {
+  parameters: {
+    value: {
+      attributes: {
+        Options: [
+          { Value: 1, Label: 'Option A' },
+          { Value: 2, Label: 'Option B' },
+          { Value: 3, Label: 'Option C' },
+        ],
+      },
+    },
+  },
+} as unknown as ComponentFramework.Context<any>;
+
+/** Turn a failed live call into a red status line, calling out auth failures specifically. */
+function describeError(e: unknown, verb: string): React.ReactNode {
+  const err = e as HttpError;
+  // The dev server refreshes the token in the background, so a 401/403 that survives the
+  // client retry means the `az login` session itself lapsed — not just the short-lived token.
+  const msg =
+    err.status === 401 || err.status === 403
+      ? 'Not authorized — your `az login` session has expired. Run `az login`, then try again.'
+      : `Failed to ${verb}: ${err.message}`;
+  return <span style={{ color: '#a4262c' }}>{msg}</span>;
+}
+
+const Harness: React.FC = () => {
+  // Panel CONFIG persists across reloads (localStorage); the fetched VALUE does not.
+  const [width, setWidth] = usePersistedState('width', 320);
+  const [height, setHeight] = usePersistedState('height', 0);
+  const [theme, setTheme] = usePersistedState<ThemeChoice>('theme', 'light');
+  const [dataSource, setDataSource] = usePersistedState<DataSource>('dataSource', 'mock');
+  const [placeholder, setPlaceholder] = usePersistedState('placeholder', 'Enter a value');
+  const [disabled, setDisabled] = usePersistedState('disabled', false);
+  const [binding, setBinding] = usePersistedState<FieldBinding>('binding', {
+    entitySetName: 'accounts',
+    recordId: '',
+    column: 'accountcategorycode',
+  });
+
+  const [value, setValue] = React.useState<{{tsType}}>({{valueDefault}});
+  const [liveStatus, setLiveStatus] = React.useState<React.ReactNode>(null);
+
+  // On reload with a restored Live selection: clear and prompt for Load — or fall back to Mock
+  // when this session has no org configured. Runs once on mount.
+  React.useEffect(() => {
+    if (dataSource !== 'live') return;
+    if (!LIVE_ENABLED) {
+      setDataSource('mock');
+      return;
+    }
+    setLiveStatus(<span style={{ color: '#605e5c' }}>Binding restored — click Load.</span>);
+    // Mount-only by design: `[]` deliberately omits dataSource/LIVE_ENABLED, because this
+    // reconciles the RESTORED selection once and must not re-run when it later changes.
+    // (No eslint-disable here: this template's .eslintrc loads no plugins — a devDependency
+    // is not enough — so a `react-hooks/exhaustive-deps` disable names an unresolvable rule,
+    // which `pcf-scripts build` treats as an ESLint ERROR. Gated by gridCustomizer.test.ts.)
+  }, []);
+
+  const onDataSourceChange = (next: DataSource): void => {
+    setDataSource(next);
+    setValue({{valueDefault}});
+    setLiveStatus(
+      next === 'mock' ? null : <span style={{ color: '#605e5c' }}>Enter a binding and click Load.</span>,
+    );
+  };
+
+  const onLoadLive = (): void => {
+    void (async () => {
+      if (!binding.entitySetName || !binding.recordId || !binding.column) {
+        setLiveStatus(<span style={{ color: '#a4262c' }}>Enter entity set, record id and column.</span>);
+        return;
+      }
+      setLiveStatus(<span style={{ color: '#605e5c' }}>Loading…</span>);
+      try {
+        const { raw, formatted } = await readField(binding.entitySetName, binding.recordId, binding.column);
+        // The control owns its own typing; the harness hands the raw platform value straight
+        // through, exactly as the PCF host does via `context.parameters.value.raw`.
+        setValue(raw as {{tsType}});
+        setLiveStatus(
+          <span style={{ color: '#107c10' }}>
+            Loaded{formatted ? ` — "${formatted}"` : ''}.
+          </span>,
+        );
+      } catch (e) {
+        setLiveStatus(describeError(e, 'load'));
+      }
+    })();
+  };
+
+  const onSave = (): void => {
+    void (async () => {
+      setLiveStatus(<span style={{ color: '#605e5c' }}>Saving…</span>);
+      try {
+        await saveField(binding.entitySetName, binding.recordId, binding.column, value);
+        setLiveStatus(<span style={{ color: '#107c10' }}>Saved to the org.</span>);
+      } catch (e) {
+        setLiveStatus(describeError(e, 'save'));
+      }
+    })();
+  };
+
+  const bindingFields: HarnessField[] = [
+    {
+      kind: 'text',
+      label: 'Entity set (plural)',
+      placeholder: 'accounts',
+      value: binding.entitySetName,
+      onChange: (v) => setBinding((b) => ({ ...b, entitySetName: v })),
+    },
+    {
+      kind: 'text',
+      label: 'Record id (GUID)',
+      placeholder: '00000000-0000-0000-0000-000000000000',
+      value: binding.recordId,
+      onChange: (v) => setBinding((b) => ({ ...b, recordId: v })),
+    },
+    {
+      kind: 'text',
+      label: 'Column (logical name)',
+      placeholder: 'accountcategorycode',
+      value: binding.column,
+      onChange: (v) => setBinding((b) => ({ ...b, column: v })),
+    },
+  ];
+
+  return (
+    <HarnessShell
+      title="{{componentName}} — dev harness"
+      subtitle="Field control ({{propertyType}})"
+      width={width}
+      onWidthChange={setWidth}
+      height={height}
+      onHeightChange={setHeight}
+      theme={theme}
+      onThemeChange={setTheme}
+      dataSource={dataSource}
+      onDataSourceChange={onDataSourceChange}
+      liveEnabled={LIVE_ENABLED}
+      bindingFields={bindingFields}
+      onLoadLive={onLoadLive}
+      liveStatus={liveStatus}
+      fields={[
+        { kind: 'text', label: 'placeholder', value: placeholder, onChange: setPlaceholder },
+        { kind: 'boolean', label: 'disabled', value: disabled, onChange: setDisabled },
+      ]}
+    >
+      <div style={{ width: width || 320 }}>
+        <{{componentName}}Component
+          value={value}
+          placeholder={placeholder}
+          disabled={disabled}
+          onChange={setValue}
+          onBlur={() => undefined}
+          context={MOCK_CONTEXT}
+        />
+        {dataSource === 'live' && (
+          <button
+            type="button"
+            onClick={onSave}
+            style={{ marginTop: 12, padding: '6px 14px', cursor: 'pointer' }}
+          >
+            Save to org
+          </button>
+        )}
+      </div>
+    </HarnessShell>
+  );
+};
+
+ReactDOM.render(<Harness />, document.getElementById('root'));

package/templates/pcf-field/dev/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/pcf-field/env.local.example

@@ -0,0 +1,24 @@
+# Live-org dev harness config. Copy to `.env.local` (gitignored) and fill in your org.
+#
+#   cp env.local.example .env.local
+#   az login
+#   npm run dev          # http://localhost:8182
+#
+# `az login` alone is enough: the Vite dev server acquires the bearer token in-process and
+# refreshes it before expiry. DYNAMICS_TOKEN below is only an optional static fallback.
+
+# The ONLY var exposed to the browser bundle. Setting it enables the harness "Live" toggle;
+# leave it blank to run against mock data only.
+VITE_DYNAMICS_URL=
+
+# Optional. Set for a CDX / cross-tenant org — passed to `az --tenant`.
+DYNAMICS_TENANT=
+
+# Optional static token fallback, used only if the in-process `az` acquisition fails.
+# ★ NO `VITE_` PREFIX, deliberately: a VITE_-prefixed var is inlined into the client bundle,
+# which would ship your bearer token to the browser. Server-side only.
+#
+# ★ Do NOT populate this with the workspace's `msft/04-dynamics/scripts/get-token.sh` — its
+# detect_env_prefix writes REACT_APP_/VITE_-prefixed names, and this harness looks up a bare
+# `DYNAMICS_TOKEN`. Use `npm run auth:token` (the pcf-dev-token bin) instead.
+DYNAMICS_TOKEN=

package/templates/pcf-field/gitignore

@@ -3,3 +3,7 @@ out/
 generated/
 *.log
 .env
+.env.local
+.env.local.backup
+dev/dist/
+obj/

package/templates/pcf-field/package.json

@@ -7,7 +7,12 @@
     "clean": "pcf-scripts clean",
     "rebuild": "pcf-scripts rebuild",
     "start": "pcf-scripts start",
-    "refreshTypes": "pcf-scripts refreshTypes"
+    "refreshTypes": "pcf-scripts refreshTypes",
+    "dev": "vite --config vite.config.ts",
+    "dev:token": "npm run auth:token && npm run dev",
+    "auth:token": "pcf-dev-token",
+    "typecheck:dev": "tsc -p tsconfig.dev.json --noEmit",
+    "harness:check": "npm run typecheck:dev && vite build --config vite.config.ts"
   },
   "dependencies": {
     "@fluentui/react": "^8.120.0",
@@ -16,15 +21,18 @@
     "react-dom": "^16.14.0"
   },
   "devDependencies": {
+    "@dataverse-kit/pcf-dev-harness": "^0.2.0",
     "@microsoft/eslint-config-spfx": "^1.18.2",
     "@types/node": "^18.16.9",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.17",
     "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-react": "^4.3.4",
     "eslint-plugin-react-hooks": "^4.6.0",
     "pcf-scripts": "^1",
     "pcf-start": "^1",
-    "typescript": "^5.3.0"
+    "typescript": "^5.3.0",
+    "vite": "^5.4.0"
   },
   "browserslist": [
     "last 2 versions"

package/templates/pcf-field/tsconfig.dev.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "skipLibCheck": true
+  },
+  "//": [
+    "★ `exclude` is INHERITED through `extends`, so it MUST be overridden here — otherwise",
+    "dev/ stays excluded from its own project, `include` resolves to nothing, and",
+    "`npm run typecheck:dev` passes while checking zero files: a green gate gating nothing.",
+    "dev/main.tsx imports the control's App, which pulls the shared component in too."
+  ],
+  "exclude": ["node_modules", "out"],
+  "include": ["dev", "vite.config.ts"]
+}

package/templates/pcf-field/tsconfig.json

@@ -1,8 +1,24 @@
 {
   "extends": "./node_modules/pcf-scripts/tsconfig_base.json",
   "compilerOptions": {
-    "typeRoots": ["node_modules/@types"],
+    "typeRoots": [
+      "node_modules/@types"
+    ],
     "jsx": "react",
-    "experimentalDecorators": true
-  }
-}
+    "experimentalDecorators": true,
+    "skipLibCheck": true
+  },
+  "//": [
+    "\u2605 `exclude` REPLACES the base's [\"./node_modules\"] \u2014 node_modules MUST be re-listed here.",
+    "pcf-scripts runs ts-loader in full (non-transpileOnly) mode, and ts-loader seeds its file",
+    "list from EVERY file the tsconfig resolves \u2014 not just what webpack reaches from the entry.",
+    "So without this exclude the Vite harness under dev/ would be typechecked as part of the",
+    "control build and could fail it. dev/ has its own project: tsconfig.dev.json."
+  ],
+  "exclude": [
+    "node_modules",
+    "out",
+    "dev",
+    "vite.config.ts"
+  ]
+}

package/templates/pcf-field/vite.config.ts

@@ -0,0 +1,60 @@
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+import * as path from 'path';
+import { dataverseProxy } from '@dataverse-kit/pcf-dev-harness/node';
+
+/**
+ * Live-org dev harness for {{componentName}} — `npm run dev` → http://localhost:8182
+ *
+ * Complements `npm start` (the pcf-scripts harness on :8181) rather than replacing it: this
+ * control is control-type="standard" on React 16 and bundles its own React, so it loads fine
+ * in the stock harness. What the stock harness cannot do is show you REAL org data — it only
+ * takes hand-typed values. This one reads and writes an actual Dataverse column.
+ *
+ * Two data sources (see `dev/main.tsx`):
+ *   - Mock — a local value. Default; needs no org.
+ *   - Live — read a column off a real record through the same-origin `/api/data` proxy, edit
+ *            it, and save it back. Enabled only when VITE_DYNAMICS_URL is set in `.env.local`.
+ *
+ * The proxy and its in-process Azure-CLI token refresh come from
+ * `@dataverse-kit/pcf-dev-harness/node`: the bearer token is injected SERVER-SIDE and never
+ * reaches the browser. `az login` + `npm run dev` is enough — `npm run auth:token` only writes
+ * an optional static fallback.
+ */
+export default defineConfig(({ mode }) => {
+  // Read .env* from the PROJECT root (__dirname), not `root: 'dev'`. The empty prefix loads
+  // every var server-side; `envPrefix` below still limits what reaches the client bundle.
+  const env = loadEnv(mode, __dirname, '');
+  const live = dataverseProxy({
+    dynamicsUrl: env.VITE_DYNAMICS_URL || '',
+    tenant: env.DYNAMICS_TENANT,
+    // Array: `.env.local` is the documented file, `.env` is tolerated as a fallback so a token
+    // written by another tool still works. First file defining DYNAMICS_TOKEN wins.
+    envFile: [path.resolve(__dirname, '.env.local'), path.resolve(__dirname, '.env')],
+    pluginName: '{{componentName}}-live-token',
+  });
+
+  return {
+    root: 'dev',
+    // .env* live at the project root, not the `dev` root, so client code still sees
+    // import.meta.env.VITE_DYNAMICS_URL (which gates Live mode).
+    envDir: __dirname,
+    // SECURITY: the bearer token is acquired server-side by dataverseProxy and is never put in
+    // a VITE_-prefixed var, so Vite cannot inline it into the client bundle. envPrefix narrows
+    // client exposure to VITE_DYNAMICS_URL alone; the static fallback DYNAMICS_TOKEN is
+    // deliberately unprefixed for the same reason.
+    envPrefix: 'VITE_DYNAMICS_URL',
+    // jsxRuntime: 'classic' — the automatic runtime emits `react/jsx-runtime`, which does not
+    // exist in React 16. This control pins 16.14.0 (the floor the canvas runtime serves), and
+    // tsconfig sets `"jsx": "react"` (classic) for the same reason.
+    plugins: [react({ jsxRuntime: 'classic' }), live.plugin],
+    server: {
+      // 8182, because `pcf-scripts start` owns 8181 — both harnesses can run side by side.
+      // strictPort so a clash fails loudly instead of silently moving to another port.
+      port: 8182,
+      strictPort: true,
+      open: true,
+      proxy: live.proxy,
+    },
+  };
+});

package/templates/pcf-field/{{componentName}}/{{componentName}}Component.tsx

@@ -11,7 +11,12 @@ export interface I{{componentName}}ComponentProps {
     disabled?: boolean;
     onChange: (value: {{tsType}}) => void;
     onBlur: () => void;
-    context: ComponentFramework.Context<any>;
+    /**
+     * The bound PCF context. OPTIONAL so the dev harness can render this component
+     * without a platform context (only the optionset variant reads it, for the
+     * bound column's choice metadata). The PCF host always supplies it.
+     */
+    context?: ComponentFramework.Context<any>;
 }
 
 export const {{componentName}}Component: React.FC<I{{componentName}}ComponentProps> = ({

package/templates/static-web-app/api/local.settings.json

@@ -0,0 +1,7 @@
+{
+  "IsEncrypted": false,
+  "Values": {
+    "FUNCTIONS_WORKER_RUNTIME": "node",
+    "AzureWebJobsStorage": ""
+  }
+}

package/templates/static-web-app/frontend/vite.config.ts

@@ -5,8 +5,16 @@ export default defineConfig({
   plugins: [react()],
   build: { outDir: 'dist' },
   server: {
+    // ★ PINNED, and `strictPort` is load-bearing. The root `dev` script runs
+    // `swa start http://localhost:5173`, so the emulator proxies to a hard-coded URL. Vite's
+    // default on a busy port is to move silently to 5174/5175/…, which would leave `swa`
+    // proxying to a dead port — the shell would serve and every module would fail. `strictPort`
+    // turns that into a loud failure instead.
+    port: 5173,
+    strictPort: true,
     proxy: {
-      // Local: proxy /api to the Functions host (swa start wires this in production).
+      // Only used when Vite is hit DIRECTLY on :5173 (`npm --prefix frontend run dev` without
+      // the emulator). Under `npm run dev` the SWA emulator owns /api routing.
       '/api': 'http://localhost:7071',
     },
   },

package/templates/static-web-app/package.json

@@ -5,8 +5,10 @@
   "description": "{{projectName}} — Azure Static Web App (React Fluent {{componentLibrary}} + Functions API)",
   "scripts": {
     "install:all": "npm install && npm --prefix frontend install && npm --prefix api install",
-    "dev": "swa start frontend --api-location api --run \"npm --prefix frontend run dev\"",
+    "dev": "npm --prefix api run build && swa start http://localhost:5173 --api-location api --run \"npm --prefix frontend run dev\"",
+    "dev:api": "npm --prefix api run watch",
     "build": "npm --prefix frontend run build && npm --prefix api run build",
+    "deploy": "swa deploy ./frontend/dist --api-location ./api --api-language node --api-version 20 --env production",
     "typecheck": "npm --prefix frontend run typecheck && npm --prefix api run typecheck"
   },
   "devDependencies": {

package/templates/static-web-app/staticwebapp.config.json

@@ -3,5 +3,8 @@
     "rewrite": "/index.html",
     "exclude": ["/api/*", "/assets/*"]
   },
-  "routes": [{ "route": "/api/*", "allowedRoles": ["anonymous"] }]
+  "routes": [{ "route": "/api/*", "allowedRoles": ["anonymous"] }],
+  "platform": {
+    "apiRuntime": "node:20"
+  }
 }

package/templates/grid-customizer/src/GridCustomizer.ts

@@ -1,28 +0,0 @@
-import type { IGridCustomizer, CellRendererOverrides } from './types/grid-types';
-import {
-  StatusBadgeRenderer,
-  CurrencyRenderer,
-  DateRenderer,
-} from './cell-renderers';
-
-/**
- * {{componentName}} — editable-grid customizer. Map a column data type (or a
- * specific column logical name) to a cell renderer. Register this customizer on
- * the grid control's customizer property.
- */
-export class {{componentName}} implements IGridCustomizer {
-  public cellRendererOverrides: CellRendererOverrides = {
-    // By data type
-    OptionSet: StatusBadgeRenderer,
-    Currency: CurrencyRenderer,
-    // By column logical name
-    statuscode: StatusBadgeRenderer,
-    statecode: StatusBadgeRenderer,
-    createdon: DateRenderer,
-    modifiedon: DateRenderer,
-  };
-
-  public cellEditorOverrides?: CellRendererOverrides = {
-    // Add custom inline editors here, keyed the same way as renderers.
-  };
-}

package/templates/grid-customizer/src/cell-renderers.tsx

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import { Badge, Text } from '@fluentui/react-components';
-import type { CellRenderer } from './types/grid-types';
-import { getStatusColor } from './utils/color-utils';
-
-/** Render an option-set / status value as a colored badge. */
-export const StatusBadgeRenderer: CellRenderer = ({ value, formattedValue }) => {
-  const text = formattedValue ?? String(value ?? '');
-  return (
-    <Badge appearance="filled" style={{ backgroundColor: getStatusColor(text) }}>
-      {text}
-    </Badge>
-  );
-};
-
-/** Render a number as currency. */
-export const CurrencyRenderer: CellRenderer = ({ value }) => {
-  const n = typeof value === 'number' ? value : Number(value);
-  const text = Number.isNaN(n)
-    ? ''
-    : new Intl.NumberFormat(undefined, { style: 'currency', currency: 'USD' }).format(n);
-  return <Text>{text}</Text>;
-};
-
-/** Render a 0–100 number as a percentage. */
-export const ProgressRenderer: CellRenderer = ({ value }) => {
-  const n = Math.max(0, Math.min(100, Number(value) || 0));
-  return <Text>{n}%</Text>;
-};
-
-/** Render a date value as a localized date string. */
-export const DateRenderer: CellRenderer = ({ value }) => {
-  const d = value instanceof Date ? value : new Date(String(value));
-  return <Text>{Number.isNaN(d.getTime()) ? '' : d.toLocaleDateString()}</Text>;
-};

package/templates/grid-customizer/src/index.ts

@@ -1,4 +0,0 @@
-export { {{componentName}} } from './GridCustomizer';
-export * from './cell-renderers';
-export * from './types/grid-types';
-export * from './utils/color-utils';

package/templates/grid-customizer/src/types/grid-types.ts

@@ -1,30 +0,0 @@
-import type * as React from 'react';
-
-export interface GridColumn {
-  name: string;
-  displayName: string;
-  dataType: string;
-}
-
-export interface CellRendererProps {
-  value: unknown;
-  formattedValue?: string;
-  column: GridColumn;
-  rowData: Record<string, unknown>;
-  entityId: string;
-  entityName: string;
-  isEditing: boolean;
-  isDisabled: boolean;
-  onChange?: (value: unknown) => void;
-}
-
-export type CellRenderer = React.FC<CellRendererProps>;
-
-export type CellRendererOverrides = {
-  [key: string]: CellRenderer;
-};
-
-export interface IGridCustomizer {
-  cellRendererOverrides: CellRendererOverrides;
-  cellEditorOverrides?: CellRendererOverrides;
-}