@khester/create-dynamics-app 2.10.0 → 3.1.0

package/templates/power-pages-island/webpack.config.js

@@ -0,0 +1,22 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+// A Power Pages ISLAND: one self-contained bundle, uploaded as a portal WEB FILE and
+// referenced from a Liquid page (see README). The output filename is STABLE (no
+// contenthash) so the Liquid `<script src>` URL stays fixed across rebuilds.
+// HtmlWebpackPlugin exists only for the local `webpack serve` preview — on a real
+// portal the Liquid page is the host, so the emitted index.html is never uploaded.
+module.exports = {
+  entry: './src/islands.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/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/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>

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>

package/templates/power-pages-starter/src/components/ContactForm.css

@@ -1,84 +0,0 @@
-.contact-form {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 24px;
-  background: #ffffff;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.contact-form__header {
-  margin-bottom: 24px;
-}
-
-.contact-form__title {
-  margin: 0;
-  font-size: 24px;
-  font-weight: 600;
-  color: #323130;
-}
-
-.contact-form__content {
-  margin-bottom: 24px;
-}
-
-.contact-form__row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-  margin-bottom: 16px;
-}
-
-.contact-form__field {
-  display: flex;
-  flex-direction: column;
-}
-
-.contact-form__actions {
-  display: flex;
-  gap: 12px;
-  justify-content: flex-start;
-  margin-top: 24px;
-}
-
-.contact-form__success {
-  padding: 12px 16px;
-  margin-bottom: 16px;
-  background-color: #dff6dd;
-  border: 1px solid #107c10;
-  border-radius: 4px;
-  color: #107c10;
-  font-weight: 500;
-}
-
-.contact-form__error {
-  padding: 12px 16px;
-  margin-bottom: 16px;
-  background-color: #fef7f1;
-  border: 1px solid #d13438;
-  border-radius: 4px;
-  color: #d13438;
-  font-weight: 500;
-}
-
-.contact-form__auth-notice {
-  margin-top: 16px;
-  padding: 12px 16px;
-  background-color: #fff4ce;
-  border: 1px solid #ffb900;
-  border-radius: 4px;
-  color: #8a6d00;
-  text-align: center;
-}
-
-@media (max-width: 768px) {
-  .contact-form {
-    padding: 16px;
-    margin: 16px;
-  }
-  
-  .contact-form__row {
-    grid-template-columns: 1fr;
-    gap: 12px;
-  }
-}

package/templates/power-pages-starter/src/components/ContactForm.tsx

@@ -1,258 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import {
-  Button,
-  TextField,
-  Dropdown,
-  DatePicker,
-} from '@khester/dynamics-ui-components';
-import { usePowerPagesApi } from '../providers/PowerPagesProvider';
-import './ContactForm.css';
-
-interface ContactFormData {
-  firstname: string;
-  lastname: string;
-  emailaddress1: string;
-  telephone1: string;
-  preferredcontactmethodcode: number;
-  birthdate: Date | null;
-}
-
-const preferredContactOptions = [
-  { key: 'email', text: 'Email' },
-  { key: 'phone', text: 'Phone' },
-  { key: 'mail', text: 'Mail' },
-];
-
-export const ContactForm: React.FC = () => {
-  const { createRecord, isAuthenticated } = usePowerPagesApi();
-
-  const [formData, setFormData] = useState<ContactFormData>({
-    firstname: '',
-    lastname: '',
-    emailaddress1: '',
-    telephone1: '',
-    preferredcontactmethodcode: 1,
-    birthdate: null,
-  });
-
-  const [errors, setErrors] = useState<Partial<ContactFormData>>({});
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [submitError, setSubmitError] = useState<string>('');
-  const [submitSuccess, setSubmitSuccess] = useState(false);
-
-  const validateForm = useCallback((): boolean => {
-    const newErrors: Partial<ContactFormData> = {};
-
-    if (!formData.firstname.trim()) {
-      newErrors.firstname = 'First name is required';
-    }
-
-    if (!formData.lastname.trim()) {
-      newErrors.lastname = 'Last name is required';
-    }
-
-    if (!formData.emailaddress1.trim()) {
-      newErrors.emailaddress1 = 'Email address is required';
-    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.emailaddress1)) {
-      newErrors.emailaddress1 = 'Please enter a valid email address';
-    }
-
-    if (
-      formData.telephone1 &&
-      !/^\+?[\d\s\-\(\)]+$/.test(formData.telephone1)
-    ) {
-      newErrors.telephone1 = 'Please enter a valid phone number';
-    }
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  }, [formData]);
-
-  const handleInputChange = useCallback(
-    (field: keyof ContactFormData, value: any) => {
-      setFormData((prev) => ({ ...prev, [field]: value }));
-
-      // Clear error for this field when user starts typing
-      if (errors[field]) {
-        setErrors((prev) => ({ ...prev, [field]: undefined }));
-      }
-      setSubmitError('');
-      setSubmitSuccess(false);
-    },
-    [errors]
-  );
-
-  const handleSubmit = useCallback(async () => {
-    if (!isAuthenticated) {
-      setSubmitError('You must be signed in to save contact information');
-      return;
-    }
-
-    if (!validateForm()) {
-      return;
-    }
-
-    setIsSubmitting(true);
-    setSubmitError('');
-    setSubmitSuccess(false);
-
-    try {
-      const contactData = {
-        firstname: formData.firstname.trim(),
-        lastname: formData.lastname.trim(),
-        emailaddress1: formData.emailaddress1.trim(),
-        telephone1: formData.telephone1.trim() || null,
-        preferredcontactmethodcode: formData.preferredcontactmethodcode,
-        birthdate: formData.birthdate ? formData.birthdate.toISOString() : null,
-      };
-
-      await createRecord('contacts', contactData);
-
-      setSubmitSuccess(true);
-      // Reset form
-      setFormData({
-        firstname: '',
-        lastname: '',
-        emailaddress1: '',
-        telephone1: '',
-        preferredcontactmethodcode: 1,
-        birthdate: null,
-      });
-    } catch (error) {
-      setSubmitError(
-        error instanceof Error
-          ? error.message
-          : 'An error occurred while saving'
-      );
-    } finally {
-      setIsSubmitting(false);
-    }
-  }, [formData, isAuthenticated, validateForm, createRecord]);
-
-  const handlePreferredContactChange = useCallback(
-    (option: any) => {
-      const code = option.key === 'email' ? 1 : option.key === 'phone' ? 2 : 3;
-      handleInputChange('preferredcontactmethodcode', code);
-    },
-    [handleInputChange]
-  );
-
-  return (
-    <div className="contact-form">
-      <div className="contact-form__header">
-        <h2 className="contact-form__title">Create New Contact</h2>
-      </div>
-
-      <div className="contact-form__content">
-        {submitSuccess && (
-          <div className="contact-form__success" role="alert">
-            Contact created successfully!
-          </div>
-        )}
-
-        {submitError && (
-          <div className="contact-form__error" role="alert">
-            {submitError}
-          </div>
-        )}
-
-        <div className="contact-form__row">
-          <div className="contact-form__field">
-            <TextField
-              label="First Name"
-              required
-              value={formData.firstname}
-              onChange={(_, value) =>
-                handleInputChange('firstname', value || '')
-              }
-              errorMessage={errors.firstname}
-              disabled={isSubmitting}
-            />
-          </div>
-          <div className="contact-form__field">
-            <TextField
-              label="Last Name"
-              required
-              value={formData.lastname}
-              onChange={(_, value) =>
-                handleInputChange('lastname', value || '')
-              }
-              errorMessage={errors.lastname}
-              disabled={isSubmitting}
-            />
-          </div>
-        </div>
-
-        <div className="contact-form__row">
-          <div className="contact-form__field">
-            <TextField
-              label="Email Address"
-              type="email"
-              required
-              value={formData.emailaddress1}
-              onChange={(_, value) =>
-                handleInputChange('emailaddress1', value || '')
-              }
-              errorMessage={errors.emailaddress1}
-              disabled={isSubmitting}
-            />
-          </div>
-          <div className="contact-form__field">
-            <TextField
-              label="Phone Number"
-              type="tel"
-              value={formData.telephone1}
-              onChange={(_, value) =>
-                handleInputChange('telephone1', value || '')
-              }
-              errorMessage={errors.telephone1}
-              disabled={isSubmitting}
-            />
-          </div>
-        </div>
-
-        <div className="contact-form__row">
-          <div className="contact-form__field">
-            <Dropdown
-              label="Preferred Contact Method"
-              options={preferredContactOptions}
-              selectedKey={
-                formData.preferredcontactmethodcode === 1
-                  ? 'email'
-                  : formData.preferredcontactmethodcode === 2
-                    ? 'phone'
-                    : 'mail'
-              }
-              onChange={handlePreferredContactChange}
-              disabled={isSubmitting}
-            />
-          </div>
-          <div className="contact-form__field">
-            <DatePicker
-              label="Birth Date"
-              value={formData.birthdate || undefined}
-              onSelectDate={(date) => handleInputChange('birthdate', date)}
-              disabled={isSubmitting}
-              placeholder="Select date..."
-            />
-          </div>
-        </div>
-      </div>
-
-      <div className="contact-form__actions">
-        <Button
-          text="Save Contact"
-          variant="primary"
-          onClick={handleSubmit}
-          disabled={isSubmitting || !isAuthenticated}
-        />
-      </div>
-
-      {!isAuthenticated && (
-        <div className="contact-form__auth-notice">
-          Please sign in to save contact information.
-        </div>
-      )}
-    </div>
-  );
-};

package/templates/power-pages-starter/src/index.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { ContactForm } from './components/ContactForm';
-import { PowerPagesProvider } from './providers/PowerPagesProvider';
-import './styles/index.css';
-
-const App: React.FC = () => {
-  return (
-    <PowerPagesProvider>
-      <div className="app">
-        <header className="app-header">
-          <h1>Power Pages Contact Management</h1>
-          <p>Built with Dynamics UI Kit</p>
-        </header>
-
-        <main className="app-main">
-          <ContactForm />
-        </main>
-
-        <footer className="app-footer">
-          <p>&copy; 2024 Your Organization. Powered by Dynamics UI Kit.</p>
-        </footer>
-      </div>
-    </PowerPagesProvider>
-  );
-};
-
-const container = document.getElementById('root');
-if (!container) throw new Error('Failed to find the root element');
-
-const root = createRoot(container);
-root.render(<App />);