@khester/create-dynamics-app 1.1.0 → 2.1.0

package/templates/grid-customizer/gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+*.log
+.env

package/templates/grid-customizer/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "{{projectName}}",
+  "version": "1.0.0",
+  "description": "{{componentName}} — Dynamics 365 editable-grid customizer (Fluent v9)",
+  "private": true,
+  "scripts": {
+    "build": "webpack --mode production",
+    "dev": "webpack --mode development --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@fluentui/react-components": "^9.46.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.3.3",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4"
+  }
+}

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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,24 @@
+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/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2018",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "declaration": false,
+    "lib": ["DOM", "DOM.Iterable", "ES2018"]
+  },
+  "include": ["src"]
+}

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

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

package/templates/pcf-dataset/ControlManifest.Input.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<manifest>
+  <control namespace="{{namespace}}" constructor="{{componentName}}" version="1.0.0" display-name-key="{{namespace}}_{{componentName}}" description-key="{{namespace}}_{{componentName}}_Desc" control-type="standard">
+    <data-set name="dataset" display-name-key="Dataset_Display_Key">
+    </data-set>
+    <resources>
+      <code path="index.ts" order="1"/>
+      <platform-library name="React" version="16.8.6" />
+      <platform-library name="Fluent" version="8.29.0" />
+      <resx path="strings/{{componentName}}.1033.resx" version="1.0.0" />
+    </resources>
+    <feature-usage>
+      <uses-feature name="Utility" required="true" />
+    </feature-usage>
+  </control>
+</manifest>

package/templates/pcf-dataset/README.md

@@ -0,0 +1,21 @@
+# {{componentName}} (PCF dataset control)
+
+A PowerApps Component Framework **dataset** control — binds to a grid/view and renders the records
+with a Fluent UI v8 `DetailsList`.
+
+## Develop
+
+```bash
+npm install
+npm run build         # pcf-scripts build
+npm start             # pcf-scripts start (test harness)
+npm run refreshTypes  # regenerate generated/ManifestTypes after manifest edits
+```
+
+Bind it to a dataset (subgrid/view) on a form. Customize columns/rendering in
+`{{componentName}}Component.tsx`.
+
+## Namespace / constructor
+
+- Namespace: `{{namespace}}`
+- Constructor: `{{componentName}}`

package/templates/pcf-dataset/gitignore

@@ -0,0 +1,5 @@
+node_modules/
+out/
+generated/
+*.log
+.env

package/templates/pcf-dataset/index.ts

@@ -0,0 +1,39 @@
+import { IInputs, IOutputs } from "./generated/ManifestTypes";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { {{componentName}}Component } from "./{{componentName}}Component";
+
+export class {{componentName}} implements ComponentFramework.StandardControl<IInputs, IOutputs> {
+    private _container: HTMLDivElement;
+    private _context: ComponentFramework.Context<IInputs>;
+
+    constructor() {}
+
+    public init(
+        context: ComponentFramework.Context<IInputs>,
+        notifyOutputChanged: () => void,
+        state: ComponentFramework.Dictionary,
+        container: HTMLDivElement
+    ): void {
+        this._context = context;
+        this._container = container;
+    }
+
+    public updateView(context: ComponentFramework.Context<IInputs>): void {
+        this._context = context;
+        ReactDOM.render(
+            React.createElement({{componentName}}Component, {
+                dataset: context.parameters.dataset
+            }),
+            this._container
+        );
+    }
+
+    public getOutputs(): IOutputs {
+        return {};
+    }
+
+    public destroy(): void {
+        ReactDOM.unmountComponentAtNode(this._container);
+    }
+}

package/templates/pcf-dataset/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "{{projectName}}",
+  "version": "1.0.0",
+  "description": "{{componentName}} PCF control built with Dynamics UI Kit",
+  "scripts": {
+    "build": "pcf-scripts build",
+    "clean": "pcf-scripts clean",
+    "rebuild": "pcf-scripts rebuild",
+    "start": "pcf-scripts start",
+    "refreshTypes": "pcf-scripts refreshTypes"
+  },
+  "dependencies": {
+    "@fluentui/react": "^8.110.10",
+    "@types/powerapps-component-framework": "^1.3.4"
+  },
+  "devDependencies": {
+    "@microsoft/eslint-config-spfx": "^1.18.2",
+    "@types/node": "^18.16.9",
+    "@types/react": "^16.14.34",
+    "@types/react-dom": "^16.9.17",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "pcf-scripts": "^1.0.0",
+    "pcf-start": "^1.0.0",
+    "typescript": "^4.9.5"
+  },
+  "browserslist": [
+    "last 2 versions",
+    "ie 11"
+  ]
+}

package/templates/pcf-dataset/strings/{{componentName}}.1033.resx

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<root>
+  <resheader name="resmimetype">
+    <value>text/microsoft-resx</value>
+  </resheader>
+  <resheader name="version">
+    <value>2.0</value>
+  </resheader>
+  <resheader name="reader">
+    <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <resheader name="writer">
+    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <data name="{{namespace}}_{{componentName}}" xml:space="preserve">
+    <value>{{componentName}}</value>
+    <comment>Name of the control</comment>
+  </data>
+  <data name="{{namespace}}_{{componentName}}_Desc" xml:space="preserve">
+    <value>{{componentName}} control built with Dynamics UI Kit</value>
+    <comment>Description of the control</comment>
+  </data>
+  <data name="Value" xml:space="preserve">
+    <value>Value</value>
+    <comment>Value property</comment>
+  </data>
+  <data name="Value_Desc" xml:space="preserve">
+    <value>The value of the control</value>
+    <comment>Description of the Value property</comment>
+  </data>
+  <data name="Placeholder" xml:space="preserve">
+    <value>Placeholder</value>
+    <comment>Placeholder property</comment>
+  </data>
+  <data name="Placeholder_Desc" xml:space="preserve">
+    <value>Placeholder text for the control</value>
+    <comment>Description of the Placeholder property</comment>
+  </data>
+  <data name="Disabled" xml:space="preserve">
+    <value>Disabled</value>
+    <comment>Disabled property</comment>
+  </data>
+  <data name="Disabled_Desc" xml:space="preserve">
+    <value>Whether the control is disabled</value>
+    <comment>Description of the Disabled property</comment>
+  </data>
+</root>

package/templates/pcf-dataset/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./node_modules/pcf-scripts/tsconfig_base.json",
+  "compilerOptions": {
+    "typeRoots": ["node_modules/@types"],
+    "jsx": "react",
+    "experimentalDecorators": true
+  }
+}

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { DetailsList, IColumn, SelectionMode } from '@fluentui/react/lib/DetailsList';
+import { initializeIcons } from '@fluentui/react/lib/Icons';
+
+// Initialize Fluent UI icons
+initializeIcons();
+
+export interface I{{componentName}}ComponentProps {
+    dataset: ComponentFramework.PropertyTypes.DataSet;
+}
+
+type Row = Record<string, string>;
+
+export const {{componentName}}Component: React.FC<I{{componentName}}ComponentProps> = ({ dataset }) => {
+    const columns: IColumn[] = dataset.columns
+        .filter((c) => !c.isHidden)
+        .sort((a, b) => a.order - b.order)
+        .map((c) => ({
+            key: c.name,
+            name: c.displayName,
+            fieldName: c.name,
+            minWidth: 100,
+            maxWidth: 240,
+            isResizable: true,
+        }));
+
+    const items: Row[] = dataset.sortedRecordIds.map((id) => {
+        const record = dataset.records[id];
+        const row: Row = { key: id };
+        for (const col of dataset.columns) {
+            row[col.name] = record.getFormattedValue(col.name);
+        }
+        return row;
+    });
+
+    return (
+        <DetailsList items={items} columns={columns} selectionMode={SelectionMode.none} />
+    );
+};

package/templates/pcf-field/ControlManifest.Input.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<manifest>
+  <control namespace="{{namespace}}" constructor="{{componentName}}" version="1.0.0" display-name-key="{{namespace}}_{{componentName}}" description-key="{{namespace}}_{{componentName}}_Desc" control-type="standard">
+    <property name="value" display-name-key="Value" description-key="Value_Desc" of-type="{{propertyType}}" usage="bound" required="true" />
+    <property name="placeholder" display-name-key="Placeholder" description-key="Placeholder_Desc" of-type="SingleLine.Text" usage="input" required="false" />
+    <property name="disabled" display-name-key="Disabled" description-key="Disabled_Desc" of-type="TwoOptions" usage="input" required="false" default-value="false" />
+    <resources>
+      <code path="index.ts" order="1"/>
+      <platform-library name="React" version="16.8.6" />
+      <platform-library name="Fluent" version="8.29.0" />
+      <resx path="strings/{{componentName}}.1033.resx" version="1.0.0" />
+    </resources>
+    <feature-usage>
+      <uses-feature name="Utility" required="true" />
+    </feature-usage>
+  </control>
+</manifest>

package/templates/pcf-field/README.md

@@ -0,0 +1,95 @@
+# {{componentName}} PCF Control
+
+A PowerApps Component Framework (PCF) control built with the Dynamics UI Kit and Fluent UI v8.
+
+## Overview
+
+This control provides a {{componentName}} interface using enterprise-grade patterns from the Dynamics UI Kit.
+
+## Features
+
+- Built with Fluent UI v8 for consistency with Dynamics 365
+- TypeScript support with full type safety
+- Responsive design
+- Accessibility compliant (ARIA)
+- Enterprise-grade error handling and validation
+
+## Development
+
+### Prerequisites
+
+- Node.js (v18 or higher)
+- Power Platform CLI (`pac`)
+
+### Getting Started
+
+1. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+2. Build the control:
+   ```bash
+   npm run build
+   ```
+
+3. Start development server:
+   ```bash
+   npm start
+   ```
+
+### Building for Production
+
+```bash
+npm run build
+```
+
+### Testing
+
+The control can be tested using the Power Platform CLI test harness:
+
+```bash
+npm start
+```
+
+## Deployment
+
+### To Dynamics 365
+
+1. Build the solution:
+   ```bash
+   # publisher-prefix must be 2-8 lowercase alphanumeric chars (e.g. "ctso")
+   pac solution init --publisher-name {{namespace}} --publisher-prefix <2-8 chars>
+   pac solution add-reference --path .
+   ```
+
+2. Build solution package:
+   ```bash
+   msbuild /p:configuration=Release
+   ```
+
+3. Import the solution package into your Dynamics 365 environment.
+
+### Configuration
+
+The control accepts the following properties:
+
+- **value**: The current value of the control
+- **placeholder**: Placeholder text to display
+- **disabled**: Whether the control is disabled
+
+## Architecture
+
+This control follows enterprise patterns:
+
+- **Component Separation**: Logic separated from presentation
+- **Type Safety**: Full TypeScript implementation
+- **Error Handling**: Comprehensive error boundaries
+- **Performance**: Optimized rendering with React best practices
+
+## Support
+
+For issues and questions:
+1. Check the troubleshooting guide
+2. Review the Dynamics UI Kit documentation
+3. Contact your development team

package/templates/pcf-field/_variants/ValueInput.boolean.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Toggle } from '@fluentui/react/lib/Toggle';
+
+export interface ValueInputProps {
+    value: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    onChange: (value: boolean) => void;
+    onBlur: () => void;
+}
+
+export const ValueInput: React.FC<ValueInputProps> = ({
+    value,
+    disabled,
+    onChange,
+    onBlur,
+}) => (
+    <Toggle
+        checked={value}
+        disabled={disabled}
+        onChange={(_, checked) => onChange(!!checked)}
+        onBlur={onBlur}
+    />
+);

package/templates/pcf-field/_variants/ValueInput.date.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { DatePicker } from '@fluentui/react/lib/DatePicker';
+
+export interface ValueInputProps {
+    value: Date | null;
+    placeholder?: string;
+    disabled?: boolean;
+    onChange: (value: Date | null) => void;
+    onBlur: () => void;
+}
+
+export const ValueInput: React.FC<ValueInputProps> = ({
+    value,
+    placeholder,
+    disabled,
+    onChange,
+    onBlur,
+}) => (
+    <DatePicker
+        value={value ?? undefined}
+        placeholder={placeholder}
+        disabled={disabled}
+        onSelectDate={(d) => onChange(d ?? null)}
+        onBlur={onBlur}
+        styles={{ root: { width: '100%' } }}
+    />
+);

package/templates/pcf-field/_variants/ValueInput.number.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { TextField } from '@fluentui/react/lib/TextField';
+
+export interface ValueInputProps {
+    value: number | null;
+    placeholder?: string;
+    disabled?: boolean;
+    onChange: (value: number | null) => void;
+    onBlur: () => void;
+}
+
+export const ValueInput: React.FC<ValueInputProps> = ({
+    value,
+    placeholder,
+    disabled,
+    onChange,
+    onBlur,
+}) => (
+    <TextField
+        type="number"
+        value={value === null ? '' : String(value)}
+        placeholder={placeholder}
+        disabled={disabled}
+        onChange={(_, v) => {
+            if (!v) {
+                onChange(null);
+                return;
+            }
+            const n = Number(v);
+            onChange(Number.isNaN(n) ? null : n);
+        }}
+        onBlur={onBlur}
+        styles={{ root: { width: '100%' } }}
+    />
+);

package/templates/pcf-field/_variants/ValueInput.text.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { TextField } from '@fluentui/react/lib/TextField';
+
+export interface ValueInputProps {
+    value: string;
+    placeholder?: string;
+    disabled?: boolean;
+    onChange: (value: string) => void;
+    onBlur: () => void;
+}
+
+export const ValueInput: React.FC<ValueInputProps> = ({
+    value,
+    placeholder,
+    disabled,
+    onChange,
+    onBlur,
+}) => (
+    <TextField
+        value={value}
+        placeholder={placeholder}
+        disabled={disabled}
+        onChange={(_, v) => onChange(v ?? '')}
+        onBlur={onBlur}
+        styles={{ root: { width: '100%' } }}
+    />
+);

package/templates/pcf-field/gitignore

@@ -0,0 +1,5 @@
+node_modules/
+out/
+generated/
+*.log
+.env