@khester/create-dynamics-app 1.1.0 → 2.1.0

package/templates/pcf-field/index.ts

@@ -0,0 +1,61 @@
+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 _value: {{tsType}};
+    private _container: HTMLDivElement;
+    private _context: ComponentFramework.Context<IInputs>;
+    private _notifyOutputChanged: () => void;
+
+    constructor() {}
+
+    public init(
+        context: ComponentFramework.Context<IInputs>,
+        notifyOutputChanged: () => void,
+        state: ComponentFramework.Dictionary,
+        container: HTMLDivElement
+    ): void {
+        this._context = context;
+        this._container = container;
+        this._notifyOutputChanged = notifyOutputChanged;
+        this._value = context.parameters.value.raw ?? {{valueDefault}};
+    }
+
+    public updateView(context: ComponentFramework.Context<IInputs>): void {
+        this._value = context.parameters.value.raw ?? {{valueDefault}};
+        this._context = context;
+
+        ReactDOM.render(
+            React.createElement({{componentName}}Component, {
+                value: this._value,
+                placeholder: context.parameters.placeholder.raw || "",
+                disabled: context.parameters.disabled.raw || false,
+                onChange: this.onValueChange.bind(this),
+                onBlur: this.onBlur.bind(this),
+                context: context
+            }),
+            this._container
+        );
+    }
+
+    private onValueChange = (newValue: {{tsType}}): void => {
+        this._value = newValue;
+        this._notifyOutputChanged();
+    };
+
+    private onBlur = (): void => {
+        this._notifyOutputChanged();
+    };
+
+    public getOutputs(): IOutputs {
+        return {
+            value: this._value
+        };
+    }
+
+    public destroy(): void {
+        ReactDOM.unmountComponentAtNode(this._container);
+    }
+}

package/templates/pcf-field/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-field/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-field/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-field/{{componentName}}Component.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { initializeIcons } from '@fluentui/react/lib/Icons';
+import { ValueInput } from './ValueInput';
+
+// Initialize Fluent UI icons
+initializeIcons();
+
+export interface I{{componentName}}ComponentProps {
+    value: {{tsType}};
+    placeholder?: string;
+    disabled?: boolean;
+    onChange: (value: {{tsType}}) => void;
+    onBlur: () => void;
+    context: ComponentFramework.Context<any>;
+}
+
+export const {{componentName}}Component: React.FC<I{{componentName}}ComponentProps> = ({
+    value,
+    placeholder,
+    disabled,
+    onChange,
+    onBlur,
+}) => {
+    return (
+        <div style={{ width: '100%', height: '100%' }}>
+            <ValueInput
+                value={value}
+                placeholder={placeholder}
+                disabled={disabled}
+                onChange={onChange}
+                onBlur={onBlur}
+            />
+        </div>
+    );
+};

package/templates/power-pages-starter/gitignore

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

package/templates/react-custom-page/gitignore

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

package/templates/{dynamics-365-starter → react-custom-page}/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "dynamics-365-app",
+  "name": "react-custom-page-app",
   "version": "1.0.0",
-  "description": "Dynamics 365 application built with Dynamics UI Kit",
+  "description": "Dynamics 365 React Custom Page app built with Dynamics UI Kit",
   "main": "dist/index.js",
   "scripts": {
     "build": "webpack --mode=production",
@@ -22,7 +22,6 @@
     "test:serve": "npm run build:prod && npm run serve",
     "precommit": "npm run quality",
     "prepublishOnly": "npm run validate",
-    "generate:entity": "node tools/entity-generator/index.js generate",
     "metadata:pull": "node tools/metadata-sync/index.js pull",
     "metadata:generate": "node tools/metadata-sync/index.js generate",
     "metadata:validate": "node tools/metadata-sync/index.js validate",
@@ -35,6 +34,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@dataverse-kit/dataverse-codegen": "^0.1.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "commander": "^11.1.0",

package/templates/react-custom-page/tools/metadata-sync/index.js

@@ -0,0 +1,152 @@
+#!/usr/bin/env node
+
+/**
+ * Metadata Sync — thin wrapper around @dataverse-kit/dataverse-codegen (dvgen).
+ *
+ * Pulls REAL entity metadata from a live Dataverse org and generates field
+ * constants + typed models (and, optionally, the IApiService CRUD layer) into
+ * `src/`. All org connection + auth is delegated to dvgen, which resolves, in
+ * order: --url/--token/--env-file flags, the DYNAMICS_* / VITE_DYNAMICS_* /
+ * REACT_APP_DYNAMICS_* env vars, then the Azure CLI (`az account get-access-token`).
+ *
+ * This replaces the previous mock pipeline (which returned hard-coded metadata).
+ * dvgen is the same tool the rest of the toolkit uses, so output stays consistent
+ * with `dvgen design`/`constants`/`models` everywhere.
+ */
+
+const { program } = require('commander');
+const { spawnSync } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+
+const DVGEN_CLI = path.join(
+  process.cwd(),
+  'node_modules',
+  '@dataverse-kit',
+  'dataverse-codegen',
+  'dist',
+  'cli.cjs'
+);
+
+function ensureDvgen() {
+  if (!fs.existsSync(DVGEN_CLI)) {
+    console.error(
+      '✗ dvgen not found. Install it first:\n' +
+        '  npm install -D @dataverse-kit/dataverse-codegen'
+    );
+    process.exit(1);
+  }
+}
+
+function dvgen(args) {
+  const result = spawnSync(process.execPath, [DVGEN_CLI, ...args], {
+    stdio: 'inherit',
+  });
+  return result.status === 0;
+}
+
+function resolveEntities(opts) {
+  if (opts.entities) {
+    return opts.entities
+      .split(',')
+      .map((e) => e.trim())
+      .filter(Boolean);
+  }
+  return ['account', 'contact'];
+}
+
+function connectionArgs(opts) {
+  const args = [];
+  if (opts.url) args.push('--url', opts.url);
+  if (opts.token) args.push('--token', opts.token);
+  if (opts.envFile) args.push('--env-file', opts.envFile);
+  return args;
+}
+
+function run(opts, { diff = false } = {}) {
+  ensureDvgen();
+  const entities = resolveEntities(opts);
+  const out = opts.out || 'src';
+  const conn = connectionArgs(opts);
+  const extra = diff ? ['--diff'] : [];
+  if (opts.force && !diff) extra.push('--force');
+  // The starter's shipped models import IApiService from
+  // @khester/dynamics-ui-api-client, so point generated models at the same
+  // module. When the dvgen-local CRUD layer is generated (--api), use that.
+  const apiServiceImport = opts.api ? '../services/IApiService' : opts.apiService;
+
+  console.log(
+    `${diff ? '🔍 Diffing' : '🔄 Generating'} ${entities.join(
+      ', '
+    )} via dvgen → ${out}/\n`
+  );
+
+  // Shared CRUD layer once (offline; only when explicitly requested).
+  if (opts.api && !diff) {
+    if (!dvgen(['api', '--out', out])) process.exit(1);
+  }
+
+  let ok = true;
+  for (const entity of entities) {
+    console.log(`\n→ ${entity}`);
+    if (
+      !dvgen(['constants', '--entity', entity, '--out', out, ...conn, ...extra])
+    ) {
+      ok = false;
+    }
+    const modelArgs = ['models', '--entity', entity, '--out', out, ...conn, ...extra];
+    if (apiServiceImport) modelArgs.push('--api-service', apiServiceImport);
+    if (opts.withRetrieve) modelArgs.push('--with-retrieve');
+    if (!dvgen(modelArgs)) ok = false;
+  }
+
+  if (!ok) {
+    console.error('\n✗ One or more entities failed.');
+    process.exit(1);
+  }
+  console.log('\n✓ Done.');
+}
+
+function withCommon(cmd) {
+  return cmd
+    .option(
+      '-e, --entities <list>',
+      'comma-separated entities (default: account,contact)'
+    )
+    .option('--url <url>', 'Dataverse org URL (else dvgen resolves env / Azure CLI)')
+    .option('--token <token>', 'bearer token (else dvgen resolves env / Azure CLI)')
+    .option('--env-file <path>', '.env file with DYNAMICS_URL / DYNAMICS_TOKEN')
+    .option('-o, --out <dir>', 'output base dir', 'src')
+    .option('--force', 'overwrite existing generated files (default: skip)')
+    .option('--with-retrieve', 'include retrieveWithRelated() FetchXML scaffolds')
+    .option(
+      '--api-service <import>',
+      'IApiService module specifier for generated models',
+      '@khester/dynamics-ui-api-client'
+    )
+    .option('--api', 'also (re)generate the IApiService CRUD layer');
+}
+
+program
+  .name('metadata-sync')
+  .description(
+    'Live Dataverse metadata → TypeScript (constants + models) via dvgen'
+  );
+
+withCommon(program.command('sync'))
+  .description('Pull live metadata and generate constants + models')
+  .action((o) => run(o));
+
+withCommon(program.command('pull'))
+  .description('Alias of sync (pull live metadata + generate)')
+  .action((o) => run(o));
+
+withCommon(program.command('generate'))
+  .description('Alias of sync (generate constants + models from the live org)')
+  .action((o) => run(o));
+
+withCommon(program.command('validate'))
+  .description('Diff generated code against the live org (no writes)')
+  .action((o) => run(o, { diff: true }));
+
+program.parse();

package/templates/static-web-app/README.md

@@ -0,0 +1,36 @@
+# {{projectName}}
+
+An **Azure Static Web App** — React + Fluent UI ({{componentLibrary}}) frontend with a managed Azure
+Functions `api/`.
+
+```
+{{projectName}}/
+├── frontend/   # React + Vite + Fluent UI
+├── api/        # Azure Functions (Node 20, v4 model)
+├── staticwebapp.config.json
+└── package.json   # orchestrates + dev-tools
+```
+
+## Develop
+
+```bash
+npm run install:all   # install root + frontend + api
+npm run dev           # SWA CLI: frontend + Functions, proxied at /api
+npm run build         # build frontend + api
+npm run typecheck     # typecheck both
+```
+
+`frontend/src/App.tsx` calls `/api/hello`. Add functions under `api/src/functions/`.
+
+## Dev-tools (Dataverse)
+
+```bash
+npm run auth:token -- --url https://YOUR_ORG.crm.dynamics.com
+npm run metadata:pull -- --entities account,contact
+npm run smoke:live -- --entity account
+```
+
+## Deploy
+
+Deploy with the SWA CLI or GitHub Actions (`Azure/static-web-apps-deploy`). App location `frontend`,
+API location `api`, output `dist`.

package/templates/static-web-app/_variants/App.v8.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { ThemeProvider } from '@fluentui/react/lib/Theme';
+import { Stack } from '@fluentui/react/lib/Stack';
+import { Text } from '@fluentui/react/lib/Text';
+import { PrimaryButton } from '@fluentui/react/lib/Button';
+
+export const App: React.FC = () => {
+  const [message, setMessage] = React.useState('');
+
+  const callApi = async () => {
+    try {
+      const res = await fetch('/api/hello');
+      const data = (await res.json()) as { message?: string };
+      setMessage(data.message ?? '');
+    } catch (e) {
+      setMessage(`API call failed: ${String(e)}`);
+    }
+  };
+
+  return (
+    <ThemeProvider>
+      <Stack tokens={{ childrenGap: 12, padding: 16 }}>
+        <Text variant="xLarge">{{projectName}}</Text>
+        <Text>Azure Static Web App — Fluent UI v8 + Functions API.</Text>
+        <Stack.Item>
+          <PrimaryButton text="Call /api/hello" onClick={callApi} />
+        </Stack.Item>
+        {message && <Text>{message}</Text>}
+      </Stack>
+    </ThemeProvider>
+  );
+};

package/templates/static-web-app/_variants/App.v9.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { FluentProvider, webLightTheme, Text, Button } from '@fluentui/react-components';
+
+export const App: React.FC = () => {
+  const [message, setMessage] = React.useState('');
+
+  const callApi = async () => {
+    try {
+      const res = await fetch('/api/hello');
+      const data = (await res.json()) as { message?: string };
+      setMessage(data.message ?? '');
+    } catch (e) {
+      setMessage(`API call failed: ${String(e)}`);
+    }
+  };
+
+  return (
+    <FluentProvider theme={webLightTheme}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, padding: 16 }}>
+        <Text size={600} weight="semibold">{{projectName}}</Text>
+        <Text>Azure Static Web App — Fluent UI v9 + Functions API.</Text>
+        <div>
+          <Button appearance="primary" onClick={callApi}>
+            Call /api/hello
+          </Button>
+        </div>
+        {message && <Text>{message}</Text>}
+      </div>
+    </FluentProvider>
+  );
+};

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

@@ -0,0 +1,12 @@
+{
+  "version": "2.0",
+  "logging": {
+    "applicationInsights": {
+      "samplingSettings": { "isEnabled": true, "excludedTypes": "Request" }
+    }
+  },
+  "extensionBundle": {
+    "id": "Microsoft.Azure.Functions.ExtensionBundle",
+    "version": "[4.*, 5.0.0)"
+  }
+}

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

@@ -0,0 +1,19 @@
+{
+  "name": "{{projectName}}-api",
+  "version": "1.0.0",
+  "private": true,
+  "main": "dist/src/functions/*.js",
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc -w",
+    "start": "func start",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@azure/functions": "^4.5.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "typescript": "^5.3.3"
+  }
+}

package/templates/static-web-app/api/src/functions/hello.ts

@@ -0,0 +1,16 @@
+import { app, HttpRequest, HttpResponseInit, InvocationContext } from '@azure/functions';
+
+export async function hello(
+  request: HttpRequest,
+  context: InvocationContext
+): Promise<HttpResponseInit> {
+  context.log(`hello: ${request.method} ${request.url}`);
+  const name = request.query.get('name') ?? 'world';
+  return { jsonBody: { message: `Hello, ${name}! — from {{projectName}} API` } };
+}
+
+app.http('hello', {
+  methods: ['GET'],
+  authLevel: 'anonymous',
+  handler: hello,
+});

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

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "dist",
+    "rootDir": ".",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "sourceMap": true
+  },
+  "include": ["src"]
+}

package/templates/static-web-app/frontend/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{{projectName}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

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

@@ -0,0 +1,23 @@
+{
+  "name": "{{projectName}}-frontend",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.4"
+  }
+}

package/templates/static-web-app/frontend/src/index.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+
+const container = document.getElementById('root');
+if (container) {
+  createRoot(container).render(<App />);
+}

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

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "isolatedModules": true
+  },
+  "include": ["src"]
+}

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

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  build: { outDir: 'dist' },
+  server: {
+    proxy: {
+      // Local: proxy /api to the Functions host (swa start wires this in production).
+      '/api': 'http://localhost:7071',
+    },
+  },
+});

package/templates/static-web-app/gitignore

@@ -0,0 +1,8 @@
+node_modules/
+dist/
+frontend/dist/
+api/dist/
+.env
+.env.local
+local.settings.json
+*.log

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

@@ -0,0 +1,15 @@
+{
+  "name": "{{projectName}}",
+  "version": "1.0.0",
+  "private": true,
+  "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\"",
+    "build": "npm --prefix frontend run build && npm --prefix api run build",
+    "typecheck": "npm --prefix frontend run typecheck && npm --prefix api run typecheck"
+  },
+  "devDependencies": {
+    "@azure/static-web-apps-cli": "^1.1.10"
+  }
+}

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

@@ -0,0 +1,7 @@
+{
+  "navigationFallback": {
+    "rewrite": "/index.html",
+    "exclude": ["/api/*", "/assets/*"]
+  },
+  "routes": [{ "route": "/api/*", "allowedRoles": ["anonymous"] }]
+}