npm - @khester/create-dynamics-app - Versions diffs - 1.1.0 → 2.1.0 - Mend

@khester/create-dynamics-app 1.1.0 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (210) hide show

package/templates/teams-app/README.md ADDED Viewed

@@ -0,0 +1,27 @@
+# {{projectName}}
+A **Microsoft Teams tab** — React + Fluent UI v9 + `@microsoft/teams-js`.
+## Develop
+```bash
+npm install
+npm run dev        # vite on http://localhost:3000 (serve over HTTPS for Teams)
+npm run build      # production bundle → dist/
+npm run typecheck  # tsc --noEmit
+```
+`src/App.tsx` initializes the Teams SDK and shows the signed-in user. Edit `appPackage/manifest.json`
+(and add `color.png` / `outline.png`) before sideloading.
+## Microsoft Graph
+`src/services/graph.ts` is generated based on the Graph option you chose at scaffold time:
+- **enabled** → a `createGraphClient(getToken)` wrapper (`@microsoft/microsoft-graph-client` is added
+  to dependencies).
+- **disabled** → a stub that throws until you re-scaffold with Graph enabled.
+## Package & sideload
+Zip `appPackage/` (manifest + icons) and upload it to Teams (Apps → Manage your apps → Upload a custom app).

package/templates/teams-app/_variants/graph.off.ts ADDED Viewed

@@ -0,0 +1,7 @@
+/**
+ * Microsoft Graph integration is disabled for this app. Re-scaffold with Graph
+ * enabled (answer "yes" to the Graph prompt, or pass --graph) to wire it up.
+ */
+export function createGraphClient(): never {
+  throw new Error('Graph integration is disabled. Re-scaffold with Graph enabled to use it.');
+}

package/templates/teams-app/_variants/graph.on.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import { Client } from '@microsoft/microsoft-graph-client';
+/**
+ * Create a Microsoft Graph client. Supply a token getter (e.g. Teams SSO via
+ * `authentication.getAuthToken()` exchanged for a Graph token server-side).
+ */
+export function createGraphClient(getToken: () => Promise<string>): Client {
+  return Client.init({
+    authProvider: async (done) => {
+      try {
+        done(null, await getToken());
+      } catch (e) {
+        done(e as Error, null);
+      }
+    },
+  });
+}
+/** Convenience: the signed-in user's profile. */
+export async function getMe(client: Client): Promise<unknown> {
+  return client.api('/me').get();
+}

package/templates/teams-app/appPackage/manifest.json ADDED Viewed

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.16/MicrosoftTeams.schema.json",
+  "manifestVersion": "1.16",
+  "id": "00000000-0000-0000-0000-000000000000",
+  "version": "1.0.0",
+  "developer": {
+    "name": "Contoso",
+    "websiteUrl": "https://example.com",
+    "privacyUrl": "https://example.com/privacy",
+    "termsOfUseUrl": "https://example.com/terms"
+  },
+  "name": { "short": "{{projectName}}", "full": "{{projectName}}" },
+  "description": { "short": "{{projectName}} tab", "full": "{{projectName}} Microsoft Teams tab" },
+  "icons": { "color": "color.png", "outline": "outline.png" },
+  "accentColor": "#6264A7",
+  "staticTabs": [
+    {
+      "entityId": "home",
+      "name": "{{projectName}}",
+      "contentUrl": "https://localhost:3000/",
+      "scopes": ["personal"]
+    }
+  ],
+  "permissions": ["identity"],
+  "validDomains": ["localhost"]
+}

package/templates/teams-app/gitignore ADDED Viewed

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

package/templates/teams-app/index.html ADDED Viewed

@@ -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/teams-app/package.json ADDED Viewed

@@ -0,0 +1,26 @@
+{
+  "name": "{{projectName}}",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "description": "{{projectName}} — Microsoft Teams tab (React, Fluent v9)",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@fluentui/react-components": "^9.46.2",
+    "@microsoft/teams-js": "^2.19.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/teams-app/src/App.tsx ADDED Viewed

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { FluentProvider, teamsLightTheme, Text, Spinner } from '@fluentui/react-components';
+import { app } from '@microsoft/teams-js';
+export const App: React.FC = () => {
+  const [status, setStatus] = React.useState<string | null>(null);
+  React.useEffect(() => {
+    app
+      .initialize()
+      .then(() => app.getContext())
+      .then((ctx) => setStatus(ctx.user?.userPrincipalName ?? 'unknown user'))
+      .catch((e) => setStatus(`Not running in Teams: ${String(e)}`));
+  }, []);
+  return (
+    <FluentProvider theme={teamsLightTheme}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, padding: 16 }}>
+        <Text size={600} weight="semibold">{{projectName}}</Text>
+        <Text>Microsoft Teams tab — Fluent UI v9.</Text>
+        {status === null ? <Spinner label="Initializing Teams…" /> : <Text>Signed in as: {status}</Text>}
+      </div>
+    </FluentProvider>
+  );
+};

package/templates/teams-app/src/index.tsx ADDED Viewed

@@ -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/teams-app/tsconfig.json ADDED Viewed

@@ -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/teams-app/vite.config.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+export default defineConfig({
+  plugins: [react()],
+  // Teams tabs must be served over HTTPS; `vite --https` or a tunnel in dev.
+  server: { port: 3000 },
+  build: { outDir: 'dist' },
+});

package/templates/web-resource/README.md ADDED Viewed

@@ -0,0 +1,39 @@
+# {{projectName}}
+A Dynamics 365 **web resource** built with React + Fluent UI ({{componentLibrary}}), bundled to a
+single JS file you can upload as a web resource.
+## Develop
+```bash
+npm install
+npm run dev        # webpack dev server on http://localhost:8080
+npm run build      # production bundle → dist/{{projectName}}.js
+npm run typecheck  # tsc --noEmit
+```
+## Local data access
+`src/services/dataverse.ts` wraps `Xrm.WebApi`. Outside a model-driven host (e.g. `npm run dev`),
+stub it with the `serve` dev-tool's mock:
+```ts
+import { installMockXrm } from '../tools/dev/mock-xrm.js';
+if (location.hostname === 'localhost') installMockXrm();
+```
+## Acquire a token (for codegen / live calls)
+```bash
+npm run auth:token -- --url https://YOUR_ORG.crm.dynamics.com
+```
+## Generate typed entities from a live org
+```bash
+npm run metadata:pull -- --entities account,contact
+```
+## Deploy
+Upload `dist/{{projectName}}.js` (and the bundled HTML if needed) as a web resource in your solution.

package/templates/web-resource/_variants/App.v8.tsx ADDED Viewed

@@ -0,0 +1,29 @@
+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';
+import { retrieveMultiple } from './services/dataverse';
+export const App: React.FC = () => {
+  const onClick = async () => {
+    try {
+      const rows = await retrieveMultiple('account', '?$select=name&$top=5');
+      alert(`Retrieved ${rows.length} account(s).`);
+    } catch (e) {
+      alert(`Xrm.WebApi not available here: ${String(e)}`);
+    }
+  };
+  return (
+    <ThemeProvider>
+      <Stack tokens={{ childrenGap: 12, padding: 16 }}>
+        <Text variant="xLarge">{{projectName}}</Text>
+        <Text>Dynamics 365 web resource — Fluent UI v8.</Text>
+        <Stack.Item>
+          <PrimaryButton text="Retrieve accounts" onClick={onClick} />
+        </Stack.Item>
+      </Stack>
+    </ThemeProvider>
+  );
+};

package/templates/web-resource/_variants/App.v9.tsx ADDED Viewed

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { FluentProvider, webLightTheme, Text, Button } from '@fluentui/react-components';
+import { retrieveMultiple } from './services/dataverse';
+export const App: React.FC = () => {
+  const onClick = async () => {
+    try {
+      const rows = await retrieveMultiple('account', '?$select=name&$top=5');
+      alert(`Retrieved ${rows.length} account(s).`);
+    } catch (e) {
+      alert(`Xrm.WebApi not available here: ${String(e)}`);
+    }
+  };
+  return (
+    <FluentProvider theme={webLightTheme}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, padding: 16 }}>
+        <Text size={600} weight="semibold">{{projectName}}</Text>
+        <Text>Dynamics 365 web resource — Fluent UI v9.</Text>
+        <div>
+          <Button appearance="primary" onClick={onClick}>
+            Retrieve accounts
+          </Button>
+        </div>
+      </div>
+    </FluentProvider>
+  );
+};

package/templates/web-resource/gitignore ADDED Viewed

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

package/templates/web-resource/package.json ADDED Viewed

@@ -0,0 +1,27 @@
+{
+  "name": "{{projectName}}",
+  "version": "1.0.0",
+  "description": "{{projectName}} — Dynamics 365 web resource (React, Fluent {{componentLibrary}})",
+  "private": true,
+  "scripts": {
+    "dev": "webpack serve --mode development",
+    "build": "webpack --mode production",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/xrm": "^9.0.74",
+    "html-webpack-plugin": "^5.5.3",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.3.3",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  }
+}

package/templates/web-resource/public/index.html ADDED Viewed

@@ -0,0 +1,11 @@
+<!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>
+  </body>
+</html>

package/templates/web-resource/src/index.tsx ADDED Viewed

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+// On localhost, `tools/dev/mock-xrm.js` (from the `serve` dev-tool) can be loaded
+// to stub the Xrm global so this resource runs outside a model-driven host.
+const container = document.getElementById('root');
+if (container) {
+  createRoot(container).render(<App />);
+}

package/templates/web-resource/src/services/dataverse.ts ADDED Viewed

@@ -0,0 +1,30 @@
+/**
+ * Thin wrapper over Xrm.WebApi for this web resource's data access. The Xrm global
+ * is typed via @types/xrm; on localhost, stub it with tools/dev/mock-xrm.js.
+ */
+export type DataverseRecord = Record<string, unknown>;
+export async function retrieveMultiple(
+  entityLogicalName: string,
+  options = ''
+): Promise<DataverseRecord[]> {
+  const result = await Xrm.WebApi.retrieveMultipleRecords(entityLogicalName, options);
+  return result.entities;
+}
+export async function retrieveRecord(
+  entityLogicalName: string,
+  id: string,
+  options = ''
+): Promise<DataverseRecord> {
+  return Xrm.WebApi.retrieveRecord(entityLogicalName, id, options);
+}
+export async function createRecord(
+  entityLogicalName: string,
+  data: Record<string, unknown>
+): Promise<string> {
+  const res = await Xrm.WebApi.createRecord(entityLogicalName, data);
+  return res.id;
+}

package/templates/web-resource/tsconfig.json ADDED Viewed

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

package/templates/web-resource/webpack.config.js ADDED Viewed

@@ -0,0 +1,17 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+module.exports = {
+  entry: './src/index.tsx',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: '{{projectName}}.js',
+    clean: true,
+  },
+  resolve: { extensions: ['.ts', '.tsx', '.js'] },
+  module: {
+    rules: [{ test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ }],
+  },
+  plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
+  devServer: { static: './dist', port: 8080, hot: true },
+};

package/dist/utils/consultingHelpers.d.ts DELETED Viewed

@@ -1,13 +0,0 @@
-/**
- * Generate entities using the entity generator
- */
-export declare function generateEntities(projectPath: string, entities?: string, generateSample?: boolean): Promise<void>;
-/**
- * Generate page templates based on selection
- */
-export declare function generatePageTemplates(projectPath: string, pageType: string, entities?: string, generateSample?: boolean): Promise<void>;
-/**
- * Customize project for deployment target
- */
-export declare function customizeForDeployment(projectPath: string, deploymentTarget: string): Promise<void>;
-//# sourceMappingURL=consultingHelpers.d.ts.map

package/dist/utils/consultingHelpers.d.ts.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"consultingHelpers.d.ts","sourceRoot":"","sources":["../../src/utils/consultingHelpers.ts"],"names":[],"mappings":"AAQA;;GAEG;AACH,wBAAsB,gBAAgB,CACpC,WAAW,EAAE,MAAM,EACnB,QAAQ,CAAC,EAAE,MAAM,EACjB,cAAc,CAAC,EAAE,OAAO,GACvB,OAAO,CAAC,IAAI,CAAC,CAgDf;AAED;;GAEG;AACH,wBAAsB,qBAAqB,CACzC,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,EAChB,QAAQ,CAAC,EAAE,MAAM,EACjB,cAAc,CAAC,EAAE,OAAO,GACvB,OAAO,CAAC,IAAI,CAAC,CA0Bf;AAED;;GAEG;AACH,wBAAsB,sBAAsB,CAC1C,WAAW,EAAE,MAAM,EACnB,gBAAgB,EAAE,MAAM,GACvB,OAAO,CAAC,IAAI,CAAC,CA4Cf"}