@khester/create-dynamics-app 2.9.0 → 3.0.0

package/templates/teams-app/_variants/tab.meeting/src/components/SidePanel.tsx

@@ -0,0 +1,124 @@
+import { useState } from 'react';
+import {
+  Card,
+  CardHeader,
+  Text,
+  Button,
+  makeStyles,
+  tokens,
+  Input,
+  Badge,
+  MessageBar,
+  MessageBarBody,
+} from '@fluentui/react-components';
+import { People24Regular, Share24Regular, Send24Regular } from '@fluentui/react-icons';
+import { meeting } from '@microsoft/teams-js';
+
+const useStyles = makeStyles({
+  container: { padding: tokens.spacingHorizontalL, minHeight: '100vh' },
+  header: { marginBottom: tokens.spacingVerticalL },
+  card: { marginBottom: tokens.spacingVerticalM },
+  input: { display: 'flex', gap: tokens.spacingHorizontalS, marginTop: tokens.spacingVerticalM },
+  messages: { maxHeight: '200px', overflowY: 'auto', marginBottom: tokens.spacingVerticalM },
+  message: {
+    padding: tokens.spacingHorizontalS,
+    background: tokens.colorNeutralBackground3,
+    borderRadius: '4px',
+    marginBottom: tokens.spacingVerticalXS,
+  },
+});
+
+/**
+ * The in-meeting side panel. "Share to Stage" shares the app's ROOT url onto the
+ * meeting stage — Teams re-opens it with frameContext `meetingStage`, so App.tsx
+ * renders <StageView/>. (The 07 teaching sample shared `/stage`, which 404s on a
+ * static SWA host and is never routed.) The shareAppContentToStage callback is
+ * `(error, result)` — surface the error instead of discarding it, or a failed
+ * share (e.g. a missing MeetingStage.Write.Chat RSC grant) is silent.
+ */
+export function SidePanel() {
+  const styles = useStyles();
+  const [messages, setMessages] = useState<string[]>(['Meeting started', 'Welcome everyone!']);
+  const [newMessage, setNewMessage] = useState('');
+  const [shareError, setShareError] = useState<string | null>(null);
+
+  const handleShare = () => {
+    setShareError(null);
+    try {
+      meeting.shareAppContentToStage((error) => {
+        if (error) {
+          console.error('shareAppContentToStage failed:', error);
+          setShareError(error.message ?? 'Could not share to the meeting stage.');
+        }
+      }, `${window.location.origin}/#/`);
+    } catch (e) {
+      console.error('Share to stage:', e);
+      setShareError('Sharing to the stage is only available inside a Teams meeting (desktop).');
+    }
+  };
+
+  const sendMessage = () => {
+    if (newMessage.trim()) {
+      setMessages([...messages, newMessage]);
+      setNewMessage('');
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <Text size={500} weight="semibold">
+          Meeting Side Panel
+        </Text>
+        <Badge appearance="filled" color="success" style={{ marginLeft: 8 }}>
+          Live
+        </Badge>
+      </div>
+
+      <Card className={styles.card}>
+        <CardHeader
+          header={
+            <Text weight="semibold">
+              <People24Regular /> Participants
+            </Text>
+          }
+        />
+        <div style={{ padding: tokens.spacingHorizontalM }}>
+          <Text>3 participants in meeting</Text>
+        </div>
+      </Card>
+
+      <Card className={styles.card}>
+        <CardHeader header={<Text weight="semibold">Meeting Chat</Text>} />
+        <div style={{ padding: tokens.spacingHorizontalM }}>
+          <div className={styles.messages}>
+            {messages.map((m, i) => (
+              <div key={i} className={styles.message}>
+                <Text size={200}>{m}</Text>
+              </div>
+            ))}
+          </div>
+          <div className={styles.input}>
+            <Input
+              value={newMessage}
+              onChange={(_, d) => setNewMessage(d.value)}
+              placeholder="Type a message..."
+              style={{ flex: 1 }}
+            />
+            <Button icon={<Send24Regular />} onClick={sendMessage} />
+          </div>
+        </div>
+      </Card>
+
+      <Button appearance="primary" icon={<Share24Regular />} onClick={handleShare}>
+        Share to Stage
+      </Button>
+
+      {shareError && (
+        <MessageBar intent="error" style={{ marginTop: tokens.spacingVerticalM }}>
+          <MessageBarBody>{shareError}</MessageBarBody>
+        </MessageBar>
+      )}
+    </div>
+  );
+}

package/templates/teams-app/_variants/tab.meeting/src/components/StageView.tsx

@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import { Card, Text, Button, makeStyles, tokens, Badge } from '@fluentui/react-components';
+import { Play24Regular, Pause24Regular, Next24Regular, Previous24Regular } from '@fluentui/react-icons';
+
+const useStyles = makeStyles({
+  container: {
+    padding: tokens.spacingHorizontalXXL,
+    textAlign: 'center',
+    minHeight: '100vh',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: { marginBottom: tokens.spacingVerticalL },
+  card: { maxWidth: '600px', width: '100%', padding: tokens.spacingHorizontalL },
+  slide: {
+    background: tokens.colorNeutralBackground3,
+    borderRadius: '8px',
+    padding: tokens.spacingHorizontalXXL,
+    marginBottom: tokens.spacingVerticalL,
+    minHeight: '200px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  controls: { display: 'flex', gap: tokens.spacingHorizontalM, justifyContent: 'center' },
+  status: { marginTop: tokens.spacingVerticalM },
+});
+
+const slides = [
+  { title: 'Welcome', content: 'Welcome to the meeting presentation' },
+  { title: 'Agenda', content: 'Today we will cover: Q4 results, roadmap, Q&A' },
+  { title: 'Results', content: 'Q4 exceeded expectations by 15%' },
+  { title: 'Thank You', content: 'Questions?' },
+];
+
+/**
+ * The shared meeting stage. Reached when Teams opens the app on the stage
+ * (frameContext === 'meetingStage'); pure presentational, no teams-js calls.
+ */
+export function StageView() {
+  const styles = useStyles();
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  const next = () => setCurrentSlide((c) => Math.min(c + 1, slides.length - 1));
+  const prev = () => setCurrentSlide((c) => Math.max(c - 1, 0));
+
+  return (
+    <div className={styles.container}>
+      <Text size={600} weight="semibold" className={styles.title}>
+        Meeting Stage
+      </Text>
+      <Badge appearance="filled" color="brand">
+        Shared with everyone
+      </Badge>
+
+      <Card className={styles.card}>
+        <div className={styles.slide}>
+          <div>
+            <Text size={500} weight="semibold" block>
+              {slides[currentSlide].title}
+            </Text>
+            <Text size={300} style={{ marginTop: 16 }}>
+              {slides[currentSlide].content}
+            </Text>
+          </div>
+        </div>
+
+        <div className={styles.controls}>
+          <Button icon={<Previous24Regular />} onClick={prev} disabled={currentSlide === 0} />
+          <Button
+            icon={isPlaying ? <Pause24Regular /> : <Play24Regular />}
+            appearance="primary"
+            onClick={() => setIsPlaying(!isPlaying)}
+          />
+          <Button
+            icon={<Next24Regular />}
+            onClick={next}
+            disabled={currentSlide === slides.length - 1}
+          />
+        </div>
+
+        <div className={styles.status}>
+          <Text size={200}>
+            Slide {currentSlide + 1} of {slides.length}
+          </Text>
+        </div>
+      </Card>
+    </div>
+  );
+}

package/templates/teams-app/_variants/tab.meeting/src/hooks/useHashRoute.ts

@@ -0,0 +1,16 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Tiny hash router — `#/config` → `/config`. Hash routing keeps the tab a single
+ * static bundle (no server rewrites needed on Static Web Apps), which is why the
+ * manifest's configurationUrl points at `/#/config`.
+ */
+export function useHashRoute(): string {
+  const [hash, setHash] = useState(window.location.hash);
+  useEffect(() => {
+    const onChange = () => setHash(window.location.hash);
+    window.addEventListener('hashchange', onChange);
+    return () => window.removeEventListener('hashchange', onChange);
+  }, []);
+  return hash.replace(/^#/, '') || '/';
+}

package/templates/teams-app/_variants/tab.meeting/src/hooks/useTeamsAuth.ts

@@ -0,0 +1,121 @@
+import { useState, useEffect, useCallback } from 'react';
+import { app, authentication } from '@microsoft/teams-js';
+import { PublicClientApplication, type AccountInfo } from '@azure/msal-browser';
+
+/**
+ * Teams-first auth: try Teams SSO (`authentication.getAuthToken()`), fall back to
+ * MSAL. Inside the Teams iframe, interactive sign-in must go through the auth
+ * bridge (`auth.html`) — `loginPopup` is blocked there; outside Teams (plain
+ * browser tab) MSAL redirect works directly.
+ *
+ * VITE_CLIENT_ID / VITE_TENANT_ID come from `.env.local` (see env.local.template);
+ * `teams-app-manager.sh identity` writes them after registering the Entra app.
+ */
+const clientId = import.meta.env.VITE_CLIENT_ID ?? '';
+const tenantId = import.meta.env.VITE_TENANT_ID ?? 'common';
+
+const msalInstance = new PublicClientApplication({
+  auth: {
+    clientId,
+    authority: `https://login.microsoftonline.com/${tenantId}`,
+    redirectUri: window.location.origin,
+  },
+  cache: { cacheLocation: 'localStorage' },
+});
+
+export interface AuthState {
+  token: string | null;
+  account: AccountInfo | null;
+  inTeams: boolean;
+  loading: boolean;
+  error: Error | null;
+}
+
+export function useTeamsAuth(): AuthState & { login: () => Promise<void> } {
+  const [state, setState] = useState<AuthState>({
+    token: null,
+    account: null,
+    inTeams: false,
+    loading: true,
+    error: null,
+  });
+
+  const getToken = useCallback(async () => {
+    // 1. Teams SSO — works once the app registration exposes api://{host}/{clientId}
+    //    with the Teams client ids pre-authorized.
+    try {
+      await app.initialize();
+      const ssoToken = await authentication.getAuthToken();
+      setState({ token: ssoToken, account: null, inTeams: true, loading: false, error: null });
+      return;
+    } catch {
+      // Not in Teams, or SSO not consented yet — fall through to MSAL.
+    }
+
+    // 2. MSAL silent — a previous interactive sign-in left an account in the cache.
+    try {
+      await msalInstance.initialize();
+      const redirect = await msalInstance.handleRedirectPromise().catch(() => null);
+      const account = redirect?.account ?? msalInstance.getAllAccounts()[0];
+      if (account) {
+        const result = await msalInstance.acquireTokenSilent({
+          scopes: ['User.Read'],
+          account,
+        });
+        setState({
+          token: result.accessToken,
+          account: result.account,
+          inTeams: false,
+          loading: false,
+          error: null,
+        });
+        return;
+      }
+      setState((prev) => ({ ...prev, loading: false }));
+    } catch (error) {
+      setState((prev) => ({ ...prev, loading: false, error: error as Error }));
+    }
+  }, []);
+
+  /** Interactive sign-in. In Teams → auth bridge popup; in a browser → MSAL redirect. */
+  const login = useCallback(async () => {
+    if (!clientId) {
+      setState((prev) => ({
+        ...prev,
+        error: new Error('VITE_CLIENT_ID is not set — copy env.local.template to .env.local'),
+      }));
+      return;
+    }
+    let inTeams = false;
+    try {
+      await app.initialize();
+      inTeams = true;
+    } catch {
+      // Plain browser tab.
+    }
+
+    try {
+      if (inTeams) {
+        // Teams opens auth.html in a real window where MSAL's redirect flow is
+        // allowed; the bridge calls notifySuccess/notifyFailure when done.
+        await authentication.authenticate({
+          url: `${window.location.origin}/auth.html`,
+          width: 600,
+          height: 535,
+        });
+        await getToken();
+        return;
+      }
+      await msalInstance.initialize();
+      await msalInstance.loginRedirect({ scopes: ['User.Read'] });
+    } catch (error) {
+      setState((prev) => ({ ...prev, error: error as Error }));
+    }
+  }, [getToken]);
+
+  useEffect(() => {
+    void getToken();
+  }, [getToken]);
+
+  return { ...state, login };
+}

package/templates/teams-app/_variants/tab.meeting/src/pages/Config.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Text, MessageBar, MessageBarBody } from '@fluentui/react-components';
+import { app, pages } from '@microsoft/teams-js';
+
+/**
+ * The tab-configuration page (manifest configurableTabs.configurationUrl → /#/config),
+ * shown when someone adds the app as an in-meeting tab. A meeting tab has no per-channel
+ * settings to collect, so this just registers a save handler that pins the content URL —
+ * the app itself picks the side-panel vs stage view from the Teams frameContext at runtime.
+ */
+export const Config: React.FC = () => {
+  const [inTeams, setInTeams] = React.useState(false);
+
+  React.useEffect(() => {
+    const init = async () => {
+      try {
+        await app.initialize();
+        setInTeams(true);
+        pages.config.registerOnSaveHandler((saveEvent) => {
+          // First-time configuration has no page id yet, so mint a unique entityId;
+          // it returns as context.page.id when the pinned tab loads.
+          const entityId = `meeting-${Date.now()}`;
+          void pages.config
+            .setConfig({
+              suggestedDisplayName: 'Meeting App',
+              entityId,
+              contentUrl: `${window.location.origin}/`,
+              websiteUrl: `${window.location.origin}/`,
+              removeUrl: `${window.location.origin}/#/remove`,
+            })
+            .then(() => saveEvent.notifySuccess())
+            .catch(() => saveEvent.notifyFailure('Failed to save the meeting tab configuration'));
+        });
+        void pages.config.setValidityState(true);
+      } catch {
+        setInTeams(false);
+      }
+    };
+    void init();
+  }, []);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, padding: 16, maxWidth: 480 }}>
+      <Text size={500} weight="semibold">
+        Add to meeting
+      </Text>
+      <Text>
+        This app runs in the meeting side panel and can share content to the meeting stage. Select
+        Save to add it.
+      </Text>
+      {!inTeams && (
+        <MessageBar intent="info">
+          <MessageBarBody>
+            Running outside Teams — add this app from within a Teams meeting to configure it.
+          </MessageBarBody>
+        </MessageBar>
+      )}
+    </div>
+  );
+};

package/templates/teams-app/_variants/tab.meeting/src/pages/Remove.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Text } from '@fluentui/react-components';
+
+/** Shown by Teams when the tab is removed (configurableTabs removeUrl). */
+export const Remove: React.FC = () => (
+  <div style={{ padding: 16 }}>
+    <Text>Removing this tab removes the app from this meeting. The app itself stays installed.</Text>
+  </div>
+);

package/templates/teams-app/_variants/tab.meeting/src/vite-env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_CLIENT_ID?: string;
+  readonly VITE_TENANT_ID?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/templates/teams-app/_variants/tab.meeting/vite.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { fileURLToPath, URL } from 'node:url';
+
+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',
+    rollupOptions: {
+      // MPA: the tab plus the auth bridge Teams opens for interactive sign-in.
+      input: {
+        main: fileURLToPath(new URL('./index.html', import.meta.url)),
+        auth: fileURLToPath(new URL('./auth.html', import.meta.url)),
+      },
+    },
+  },
+});

package/templates/power-pages-starter/.env.example

@@ -1,6 +0,0 @@
-# Power Pages Configuration
-PORTAL_URL=https://your-portal.powerappsportals.com
-
-# Optional: API Configuration
-API_VERSION=v9.0
-ENABLE_LOGGING=false

package/templates/power-pages-starter/README.md

@@ -1,95 +0,0 @@
-# Power Pages Application
-
-This is a Power Pages application built with Dynamics UI Kit components.
-
-## Getting Started
-
-1. **Environment Setup**
-
-   ```bash
-   cp .env.example .env
-   ```
-
-   Edit `.env` and set your `PORTAL_URL` to your Power Pages portal URL.
-
-2. **Install Dependencies**
-
-   ```bash
-   npm install
-   ```
-
-3. **Development**
-
-   ```bash
-   npm run dev
-   ```
-
-   This starts the development server at http://localhost:3000
-
-4. **Build for Production**
-   ```bash
-   npm run build
-   ```
-
-## Project Structure
-
-```
-src/
-├── components/          # React components
-│   ├── ContactForm.tsx  # Main contact form component
-│   └── ContactForm.css  # Component styles
-├── providers/           # Context providers
-│   └── PowerPagesProvider.tsx  # Power Pages API provider
-├── styles/             # Global styles
-│   └── index.css       # Global CSS
-└── index.tsx           # Application entry point
-```
-
-## Features
-
-- **Contact Management**: Create and manage contacts using Dynamics UI Kit components
-- **Power Pages Integration**: Seamless integration with Power Pages API
-- **Responsive Design**: Mobile-friendly responsive layout
-- **Type Safety**: Full TypeScript support
-
-## Deployment
-
-To deploy your application to Power Pages:
-
-1. Build the application:
-
-   ```bash
-   npm run build
-   ```
-
-2. Upload the `dist` folder contents to your Power Pages portal's web files
-
-3. Create a new web page in Power Pages and reference your built JavaScript and CSS files
-
-## Customization
-
-### Adding New Components
-
-1. Create your component in `src/components/`
-2. Use Dynamics UI Kit components for consistent styling
-3. Import and use the `usePowerPagesApi` hook for data operations
-
-### Styling
-
-- Global styles are in `src/styles/index.css`
-- Component-specific styles should be co-located with components
-- Follow the existing CSS naming conventions
-
-## Available Scripts
-
-- `npm run dev` - Start development server
-- `npm run build` - Build for production
-- `npm run typecheck` - Type check without building
-- `npm run clean` - Clean build directory
-- `npm run lint` - Lint code
-
-## Learn More
-
-- [Dynamics UI Kit Documentation](https://github.com/your-org/dynamics-ui-kit)
-- [Power Pages Documentation](https://docs.microsoft.com/power-pages/)
-- [React Documentation](https://reactjs.org/)

package/templates/power-pages-starter/package.json

@@ -1,43 +0,0 @@
-{
-  "name": "power-pages-app",
-  "version": "1.0.0",
-  "description": "Power Pages application built with Dynamics UI Kit",
-  "main": "dist/index.js",
-  "scripts": {
-    "build": "webpack --mode=production",
-    "dev": "webpack serve --mode=development",
-    "typecheck": "tsc --noEmit",
-    "clean": "rimraf dist",
-    "lint": "eslint src --ext .ts,.tsx"
-  },
-  "dependencies": {
-    "@khester/dynamics-ui-api-client": "^1.0.0",
-    "@khester/dynamics-ui-components": "^1.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "css-loader": "^6.8.1",
-    "html-webpack-plugin": "^5.5.3",
-    "style-loader": "^3.3.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"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}

package/templates/power-pages-starter/public/index.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="data:," />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Power Pages Application built with Dynamics UI Kit" />
-    <title>Power Pages App - Dynamics UI Kit</title>
-</head>
-<body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-</body>
-</html>