@khester/create-dynamics-app 1.0.4

package/templates/dynamics-365-starter/src/pcf/ContactControlWrapper.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { ContactManagement } from '../components/ContactManagement';
+import { DynamicsProvider } from '../providers/DynamicsProvider';
+
+interface PCFContextType {
+  // Define PCF context properties based on your needs
+  webAPI: any;
+  utils: any;
+  parameters: any;
+}
+
+interface ContactControlWrapperProps {
+  context: PCFContextType;
+}
+
+/**
+ * Wrapper component for integrating ContactManagement with PCF (PowerApps Component Framework)
+ * This allows the component to be used as a custom control in Dynamics 365 forms and views
+ */
+export const ContactControlWrapper: React.FC<ContactControlWrapperProps> = ({ context }) => {
+  // Extract configuration from PCF context
+  const baseUrl = context.parameters?.baseUrl?.raw || '';
+  
+  // Create a custom API service that uses PCF's webAPI
+  const createPCFApiService = () => ({
+    createRecord: async (entityName: string, data: any) => {
+      return await context.webAPI.createRecord(entityName, data);
+    },
+    retrieveRecord: async (entityName: string, id: string, select?: string) => {
+      return await context.webAPI.retrieveRecord(entityName, id, select);
+    },
+    updateRecord: async (entityName: string, id: string, data: any) => {
+      return await context.webAPI.updateRecord(entityName, id, data);
+    },
+    deleteRecord: async (entityName: string, id: string) => {
+      return await context.webAPI.deleteRecord(entityName, id);
+    },
+    retrieveMultiple: async (entityName: string, query?: string) => {
+      const fetchXml = query || `<fetch><entity name="${entityName}"/></fetch>`;
+      return await context.webAPI.retrieveMultipleRecords(entityName, `?fetchXml=${encodeURIComponent(fetchXml)}`);
+    }
+  });
+
+  return (
+    <DynamicsProvider baseUrl={baseUrl}>
+      <div style={{ width: '100%', height: '100%' }}>
+        <ContactManagement />
+      </div>
+    </DynamicsProvider>
+  );
+};
+
+// Export for PCF integration
+export default ContactControlWrapper;

package/templates/dynamics-365-starter/src/providers/DynamicsProvider.tsx

@@ -0,0 +1,136 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { DynamicsApiService } from '@khester1/dynamics-ui-api-client';
+
+interface DynamicsContextType {
+  apiService: DynamicsApiService | null;
+  createRecord: (entityName: string, data: any) => Promise<any>;
+  retrieveRecord: (entityName: string, id: string, select?: string) => Promise<any>;
+  updateRecord: (entityName: string, id: string, data: any) => Promise<any>;
+  deleteRecord: (entityName: string, id: string) => Promise<void>;
+  retrieveMultiple: (entityName: string, query?: string) => Promise<any>;
+}
+
+const DynamicsContext = createContext<DynamicsContextType | undefined>(undefined);
+
+interface DynamicsProviderProps {
+  children: React.ReactNode;
+  baseUrl?: string;
+  accessToken?: string;
+}
+
+export const DynamicsProvider: React.FC<DynamicsProviderProps> = ({ 
+  children, 
+  baseUrl,
+  accessToken 
+}) => {
+  const [apiService, setApiService] = useState<DynamicsApiService | null>(null);
+
+  useEffect(() => {
+    // Initialize the API service
+    // In a real D365 environment, you would get these from your authentication flow
+    const getAccessToken = async () => {
+      return accessToken || process.env.DYNAMICS_ACCESS_TOKEN || '';
+    };
+    
+    const service = new DynamicsApiService(
+      baseUrl || process.env.DYNAMICS_BASE_URL || 'https://org.crm.dynamics.com',
+      getAccessToken
+    );
+    
+    setApiService(service);
+  }, [baseUrl, accessToken]);
+
+  const createRecord = async (entityName: string, data: any) => {
+    if (!apiService) throw new Error('API service not initialized');
+    return await apiService.createRecord(entityName, data);
+  };
+
+  const retrieveRecord = async (entityName: string, id: string, select?: string) => {
+    if (!apiService) throw new Error('API service not initialized');
+    // Use retrieveMultipleRecords with FetchXML to get a single record
+    const selectAttributes = select ? select.split(',').map(attr => attr.trim()) : ['*'];
+    const attributes = selectAttributes.map(attr => attr === '*' ? '' : `<attribute name="${attr}" />`).join('');
+    const fetchXml = `
+      <fetch top="1">
+        <entity name="${entityName}">
+          ${attributes}
+          <filter>
+            <condition attribute="${entityName}id" operator="eq" value="${id}" />
+          </filter>
+        </entity>
+      </fetch>
+    `;
+    const result = await apiService.retrieveMultipleRecords(entityName, fetchXml);
+    return result.entities.length > 0 ? result.entities[0] : null;
+  };
+
+  const updateRecord = async (entityName: string, id: string, data: any) => {
+    if (!apiService) throw new Error('API service not initialized');
+    return await apiService.updateRecord(entityName, id, data);
+  };
+
+  const deleteRecord = async (entityName: string, id: string) => {
+    if (!apiService) throw new Error('API service not initialized');
+    return await apiService.deleteRecord(entityName, id);
+  };
+
+  const retrieveMultiple = async (entityName: string, query?: string) => {
+    if (!apiService) throw new Error('API service not initialized');
+    // Convert OData-style query to FetchXML
+    let fetchXml = `<fetch>`;
+    
+    if (query) {
+      // Parse basic OData query parameters
+      const selectMatch = query.match(/\$select=([^&]*)/i);
+      const orderByMatch = query.match(/\$orderby=([^&]*)/i);
+      const topMatch = query.match(/\$top=(\d+)/i);
+      
+      if (topMatch) {
+        fetchXml = `<fetch top="${topMatch[1]}">`;
+      }
+      
+      fetchXml += `<entity name="${entityName}">`;
+      
+      if (selectMatch) {
+        const attributes = selectMatch[1].split(',').map(attr => attr.trim());
+        attributes.forEach(attr => {
+          fetchXml += `<attribute name="${attr}" />`;
+        });
+      }
+      
+      if (orderByMatch) {
+        const [field, direction] = orderByMatch[1].split(' ');
+        fetchXml += `<order attribute="${field.trim()}" descending="${direction?.toLowerCase() === 'desc'}" />`;
+      }
+      
+      fetchXml += `</entity></fetch>`;
+    } else {
+      fetchXml = `<fetch><entity name="${entityName}"></entity></fetch>`;
+    }
+    
+    return await apiService.retrieveMultipleRecords(entityName, fetchXml);
+  };
+
+  const value: DynamicsContextType = {
+    apiService,
+    createRecord,
+    retrieveRecord,
+    updateRecord,
+    deleteRecord,
+    retrieveMultiple,
+  };
+
+  return (
+    <DynamicsContext.Provider value={value}>
+      {children}
+    </DynamicsContext.Provider>
+  );
+};
+
+export const useDynamicsApi = (): DynamicsContextType => {
+  const context = useContext(DynamicsContext);
+  if (context === undefined) {
+    throw new Error('useDynamicsApi must be used within a DynamicsProvider');
+  }
+  return context;
+};

package/templates/dynamics-365-starter/src/styles/index.css

@@ -0,0 +1,104 @@
+/* Global Styles for Dynamics 365 App */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: #f5f5f5;
+  color: #323130;
+}
+
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: #faf9f8;
+}
+
+.app-header {
+  background: linear-gradient(135deg, #0078d4 0%, #106ebe 100%);
+  color: white;
+  padding: 16px 24px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.app-header h1 {
+  margin: 0 0 4px 0;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.app-header p {
+  margin: 0;
+  font-size: 14px;
+  opacity: 0.9;
+}
+
+.app-main {
+  flex: 1;
+  padding: 0;
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+  background-color: white;
+  margin-top: 16px;
+  margin-bottom: 16px;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.app-footer {
+  background-color: #f3f2f1;
+  border-top: 1px solid #edebe9;
+  padding: 12px 16px;
+  text-align: center;
+  color: #605e5c;
+  font-size: 12px;
+}
+
+.app-footer p {
+  margin: 0;
+}
+
+/* Dynamics 365 specific styles */
+.ms-Panel {
+  box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+}
+
+.ms-DetailsList {
+  border-radius: 0;
+}
+
+.ms-DetailsHeader {
+  background-color: #f8f8f8;
+  border-bottom: 1px solid #edebe9;
+}
+
+.ms-DetailsRow:hover {
+  background-color: #f3f2f1;
+}
+
+.ms-DetailsRow.is-selected {
+  background-color: #deecf9;
+}
+
+@media (max-width: 768px) {
+  .app-header {
+    padding: 12px 16px;
+  }
+  
+  .app-header h1 {
+    font-size: 20px;
+  }
+  
+  .app-main {
+    margin: 8px;
+    border-radius: 4px;
+  }
+}

package/templates/dynamics-365-starter/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "es6"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}

package/templates/dynamics-365-starter/webpack.config.js

@@ -0,0 +1,58 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = (env, argv) => {
+  const isProduction = argv.mode === 'production';
+  
+  return {
+    entry: './src/index.tsx',
+    output: {
+      path: path.resolve(__dirname, 'dist'),
+      filename: isProduction ? '[name].[contenthash].js' : '[name].js',
+      clean: true,
+      publicPath: '/',
+      library: 'DynamicsApp',
+      libraryTarget: 'umd',
+    },
+    resolve: {
+      extensions: ['.tsx', '.ts', '.js', '.jsx'],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: 'ts-loader',
+          exclude: /node_modules/,
+        },
+        {
+          test: /\.css$/i,
+          use: ['style-loader', 'css-loader'],
+        },
+      ],
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: './public/index.html',
+        filename: 'index.html',
+      }),
+    ],
+    devServer: {
+      static: {
+        directory: path.join(__dirname, 'public'),
+      },
+      port: 3000,
+      open: true,
+      hot: true,
+      historyApiFallback: true,
+    },
+    externals: isProduction ? {
+      'react': 'React',
+      'react-dom': 'ReactDOM'
+    } : {},
+    optimization: {
+      splitChunks: {
+        chunks: 'all',
+      },
+    },
+  };
+};

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

@@ -0,0 +1,6 @@
+# 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

@@ -0,0 +1,89 @@
+# 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

@@ -0,0 +1,42 @@
+{
+  "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": {
+    "@khester1/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

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#0078d4" />
+    <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

@@ -0,0 +1,84 @@
+.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;
+  }
+}