@khester/create-dynamics-app 3.0.0 → 3.2.0

package/templates/power-pages-island/src/useHostWidth.ts

@@ -0,0 +1,53 @@
+import * as React from "react";
+
+/**
+ * Width available to the component, in px, kept live as the host resizes.
+ *
+ * Two modes, because the browser hosts are not all shaped the same:
+ *
+ *  - **Pass a ref** when the component is mounted into an element on a larger page
+ *    (a Power Pages island). The viewport is then the whole portal page, which may be
+ *    far wider than the slot the island occupies, so it must measure its own box.
+ *  - **Pass nothing** when the component owns a full-page iframe (web resource /
+ *    Vite host). There the viewport *is* the control's width.
+ *
+ * The PCF host uses neither — it gets a properly scoped measurement from
+ * `context.mode.allocatedWidth` after opting in with `trackContainerResize(true)`.
+ *
+ * ★ Why measure at all rather than ask the platform what device this is: verified
+ * live 2026-07-25 on a physical iPhone in the native Power Apps app, a model-driven
+ * custom page reports `client: "Web"` and `formFactor: 1` (Desktop). Form-factor
+ * branching therefore hands every phone the desktop layout — and passes every test
+ * that is not run on a real device.
+ */
+export function useHostWidth(ref?: React.RefObject<HTMLElement | null>): number {
+  const [width, setWidth] = React.useState<number>(() =>
+    typeof window === "undefined" ? 0 : window.innerWidth,
+  );
+
+  React.useEffect(() => {
+    const el = ref?.current;
+
+    if (el && typeof ResizeObserver !== "undefined") {
+      const ro = new ResizeObserver((entries) => {
+        for (const entry of entries) setWidth(entry.contentRect.width);
+      });
+      ro.observe(el);
+      setWidth(el.getBoundingClientRect().width);
+      return () => ro.disconnect();
+    }
+
+    // Viewport fallback: no ref, or an environment without ResizeObserver.
+    const onResize = () => setWidth(window.innerWidth);
+    window.addEventListener("resize", onResize);
+    // iOS Safari does not reliably fire `resize` on rotation, so listen for both.
+    window.addEventListener("orientationchange", onResize);
+    onResize();
+    return () => {
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("orientationchange", onResize);
+    };
+  }, [ref]);
+
+  return width;
+}

package/templates/react-custom-page/tools/deploy/deploy-webresource.cjs

@@ -107,8 +107,14 @@ async function main() {
   await req("POST", "PublishXml", { ParameterXml: paramXml });
   console.log("✓ Published.");
 
-  console.log(`\nOpen it:  ${url}/WebResources/${name}`);
-  console.log("Or host it on a model-driven custom page / open via Xrm.Navigation.navigateTo.");
+  // Surfacing guidance. NOTE: this app reads window.parent.Xrm / Xrm.Page — a model-driven FORM
+  // context. It therefore needs a host that provides one. It CANNOT run in a Power Apps custom page
+  // (that is a canvasapp; Xrm.Page does not exist there), and opening the raw /WebResources/ URL
+  // standalone gives it no parent Xrm either, so ServiceFactory throws.
+  console.log(`\nSurface it via a sitemap SubArea:  $webresource:${name}`);
+  console.log("Or embed it on a model-driven form, or open it with Xrm.Navigation.navigateTo.");
+  console.log(`\nDirect URL (dev only — no parent Xrm, so production mode will fail):`);
+  console.log(`  ${url}/WebResources/${name}`);
 }
 
 main().catch((e) => {

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' },
-};

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

@@ -1,16 +0,0 @@
-<?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="virtual">
-    <data-set name="dataset" display-name-key="Dataset_Display_Key">
-    </data-set>
-    <resources>
-      <code path="index.ts" order="1"/>
-      <platform-library name="React" version="18.2.0" />
-      <platform-library name="Fluent" version="8.115.6" />
-      <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/ControlManifest.Input.xml

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