@khester/create-dynamics-app 3.1.0 → 3.2.0

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/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;
-}

package/templates/grid-customizer/src/utils/color-utils.ts

@@ -1,24 +0,0 @@
-export function stringToColor(str: string): string {
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    hash = str.charCodeAt(i) + ((hash << 5) - hash);
-  }
-  const hue = hash % 360;
-  return `hsl(${hue}, 65%, 45%)`;
-}
-
-export const STATUS_COLORS: Record<string, string> = {
-  active: '#107c10',
-  inactive: '#a19f9d',
-  draft: '#0078d4',
-  pending: '#ffaa44',
-  approved: '#107c10',
-  rejected: '#d13438',
-  completed: '#107c10',
-  cancelled: '#a19f9d',
-};
-
-export function getStatusColor(status: string): string {
-  const normalized = status.toLowerCase().replace(/\s+/g, '');
-  return STATUS_COLORS[normalized] || stringToColor(status);
-}

package/templates/grid-customizer/webpack.config.js

@@ -1,17 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  entry: './src/index.ts',
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: '{{projectName}}.js',
-    library: { type: 'umd', name: '{{componentName}}' },
-    clean: true,
-  },
-  resolve: { extensions: ['.ts', '.tsx', '.js'] },
-  module: {
-    rules: [{ test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ }],
-  },
-  // Provided by the grid host at runtime.
-  externals: { react: 'React', 'react-dom': 'ReactDOM' },
-};