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

@khester/create-dynamics-app 1.0.8 → 1.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 (107) hide show

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

@@ -3,7 +3,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 module.exports = (env, argv) => {
   const isProduction = argv.mode === 'production';
   return {
     entry: './src/index.tsx',
     output: {
@@ -11,8 +11,6 @@ module.exports = (env, argv) => {
       filename: isProduction ? '[name].[contenthash].js' : '[name].js',
       clean: true,
       publicPath: '/',
-      library: 'DynamicsApp',
-      libraryTarget: 'umd',
     },
     resolve: {
       extensions: ['.tsx', '.ts', '.js', '.jsx'],
@@ -21,7 +19,12 @@ module.exports = (env, argv) => {
       rules: [
         {
           test: /\.tsx?$/,
-          use: 'ts-loader',
+          use: {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+            },
+          },
           exclude: /node_modules/,
         },
         {
@@ -45,14 +48,10 @@ module.exports = (env, argv) => {
       hot: true,
       historyApiFallback: true,
     },
-    externals: isProduction ? {
-      'react': 'React',
-      'react-dom': 'ReactDOM'
-    } : {},
     optimization: {
       splitChunks: {
         chunks: 'all',
       },
     },
   };
-};
+};

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

@@ -5,20 +5,25 @@ 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**
@@ -52,6 +57,7 @@ src/
 To deploy your application to Power Pages:
 1. Build the application:
    ```bash
    npm run build
    ```
@@ -86,4 +92,4 @@ To deploy your application to Power Pages:
 - [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/)
+- [React Documentation](https://reactjs.org/)

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

@@ -1,18 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="data:," />
     <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"
-    />
+    <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>
+</head>
+<body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-  </body>
-</html>
+</body>
+</html>

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

@@ -1,9 +1,9 @@
 import React, { useState, useCallback } from 'react';
-import {
-  Button,
-  TextField,
-  Dropdown,
-  DatePicker
+import {
+  Button,
+  TextField,
+  Dropdown,
+  DatePicker,
 } from '@khester/dynamics-ui-components';
 import { usePowerPagesApi } from '../providers/PowerPagesProvider';
 import './ContactForm.css';
@@ -20,19 +20,19 @@ interface ContactFormData {
 const preferredContactOptions = [
   { key: 'email', text: 'Email' },
   { key: 'phone', text: 'Phone' },
-  { key: 'mail', text: 'Mail' }
+  { 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
+    birthdate: null,
   });
   const [errors, setErrors] = useState<Partial<ContactFormData>>({});
@@ -57,7 +57,10 @@ export const ContactForm: React.FC = () => {
       newErrors.emailaddress1 = 'Please enter a valid email address';
     }
-    if (formData.telephone1 && !/^\+?[\d\s\-\(\)]+$/.test(formData.telephone1)) {
+    if (
+      formData.telephone1 &&
+      !/^\+?[\d\s\-\(\)]+$/.test(formData.telephone1)
+    ) {
       newErrors.telephone1 = 'Please enter a valid phone number';
     }
@@ -65,16 +68,19 @@ export const ContactForm: React.FC = () => {
     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 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) {
@@ -97,11 +103,11 @@ export const ContactForm: React.FC = () => {
         emailaddress1: formData.emailaddress1.trim(),
         telephone1: formData.telephone1.trim() || null,
         preferredcontactmethodcode: formData.preferredcontactmethodcode,
-        birthdate: formData.birthdate ? formData.birthdate.toISOString() : null
+        birthdate: formData.birthdate ? formData.birthdate.toISOString() : null,
       };
       await createRecord('contacts', contactData);
       setSubmitSuccess(true);
       // Reset form
       setFormData({
@@ -110,24 +116,26 @@ export const ContactForm: React.FC = () => {
         emailaddress1: '',
         telephone1: '',
         preferredcontactmethodcode: 1,
-        birthdate: null
+        birthdate: null,
       });
     } catch (error) {
-      setSubmitError(error instanceof Error ? error.message : 'An error occurred while saving');
+      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]);
+  }, [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">
@@ -154,7 +162,9 @@ export const ContactForm: React.FC = () => {
               label="First Name"
               required
               value={formData.firstname}
-              onChange={(_, value) => handleInputChange('firstname', value || '')}
+              onChange={(_, value) =>
+                handleInputChange('firstname', value || '')
+              }
               errorMessage={errors.firstname}
               disabled={isSubmitting}
             />
@@ -164,7 +174,9 @@ export const ContactForm: React.FC = () => {
               label="Last Name"
               required
               value={formData.lastname}
-              onChange={(_, value) => handleInputChange('lastname', value || '')}
+              onChange={(_, value) =>
+                handleInputChange('lastname', value || '')
+              }
               errorMessage={errors.lastname}
               disabled={isSubmitting}
             />
@@ -178,7 +190,9 @@ export const ContactForm: React.FC = () => {
               type="email"
               required
               value={formData.emailaddress1}
-              onChange={(_, value) => handleInputChange('emailaddress1', value || '')}
+              onChange={(_, value) =>
+                handleInputChange('emailaddress1', value || '')
+              }
               errorMessage={errors.emailaddress1}
               disabled={isSubmitting}
             />
@@ -188,7 +202,9 @@ export const ContactForm: React.FC = () => {
               label="Phone Number"
               type="tel"
               value={formData.telephone1}
-              onChange={(_, value) => handleInputChange('telephone1', value || '')}
+              onChange={(_, value) =>
+                handleInputChange('telephone1', value || '')
+              }
               errorMessage={errors.telephone1}
               disabled={isSubmitting}
             />
@@ -201,8 +217,11 @@ export const ContactForm: React.FC = () => {
               label="Preferred Contact Method"
               options={preferredContactOptions}
               selectedKey={
-                formData.preferredcontactmethodcode === 1 ? 'email' :
-                formData.preferredcontactmethodcode === 2 ? 'phone' : 'mail'
+                formData.preferredcontactmethodcode === 1
+                  ? 'email'
+                  : formData.preferredcontactmethodcode === 2
+                    ? 'phone'
+                    : 'mail'
               }
               onChange={handlePreferredContactChange}
               disabled={isSubmitting}
@@ -236,4 +255,4 @@ export const ContactForm: React.FC = () => {
       )}
     </div>
   );
-};
+};

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

@@ -12,11 +12,11 @@ const App: React.FC = () => {
           <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>
@@ -29,4 +29,4 @@ const container = document.getElementById('root');
 if (!container) throw new Error('Failed to find the root element');
 const root = createRoot(container);
-root.render(<App />);
+root.render(<App />);

package/templates/power-pages-starter/src/providers/PowerPagesProvider.tsx CHANGED Viewed

@@ -5,35 +5,45 @@ interface PowerPagesContextType {
   apiService: PowerPagesApiService | null;
   isAuthenticated: boolean;
   createRecord: (entityName: string, data: any) => Promise<any>;
-  retrieveRecord: (entityName: string, id: string, select?: string) => 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 PowerPagesContext = createContext<PowerPagesContextType | undefined>(undefined);
+const PowerPagesContext = createContext<PowerPagesContextType | undefined>(
+  undefined
+);
 interface PowerPagesProviderProps {
   children: React.ReactNode;
 }
-export const PowerPagesProvider: React.FC<PowerPagesProviderProps> = ({ children }) => {
-  const [apiService, setApiService] = useState<PowerPagesApiService | null>(null);
+export const PowerPagesProvider: React.FC<PowerPagesProviderProps> = ({
+  children,
+}) => {
+  const [apiService, setApiService] = useState<PowerPagesApiService | null>(
+    null
+  );
   const [isAuthenticated, setIsAuthenticated] = useState(false);
   useEffect(() => {
     // Initialize the API service
-    const portalUrl = process.env.PORTAL_URL || window.location.origin;
+    const portalUrl = window.location.origin;
     // CSRF token function for Power Pages authentication
     const getCsrfToken = async (): Promise<string> => {
       // In a real Power Pages implementation, you would fetch the CSRF token
       // For demo purposes, return empty string
       return '';
     };
     const service = new PowerPagesApiService(portalUrl, getCsrfToken);
     setApiService(service);
     // Check authentication status
@@ -47,11 +57,19 @@ export const PowerPagesProvider: React.FC<PowerPagesProviderProps> = ({ children
     return await apiService.createRecord(entityName, data);
   };
-  const retrieveRecord = async (entityName: string, id: string, select?: string) => {
+  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 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}">
@@ -62,7 +80,10 @@ export const PowerPagesProvider: React.FC<PowerPagesProviderProps> = ({ children
         </entity>
       </fetch>
     `;
-    const result = await apiService.retrieveMultipleRecords(entityName, fetchXml);
+    const result = await apiService.retrieveMultipleRecords(
+      entityName,
+      fetchXml
+    );
     return result.entities.length > 0 ? result.entities[0] : null;
   };
@@ -80,36 +101,36 @@ export const PowerPagesProvider: React.FC<PowerPagesProviderProps> = ({ children
     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 => {
+        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);
   };
@@ -133,7 +154,9 @@ export const PowerPagesProvider: React.FC<PowerPagesProviderProps> = ({ children
 export const usePowerPagesApi = (): PowerPagesContextType => {
   const context = useContext(PowerPagesContext);
   if (context === undefined) {
-    throw new Error('usePowerPagesApi must be used within a PowerPagesProvider');
+    throw new Error(
+      'usePowerPagesApi must be used within a PowerPagesProvider'
+    );
   }
   return context;
-};
+};

package/templates/power-pages-starter/tsconfig.json CHANGED Viewed

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "es6"
-    ],
+    "lib": ["dom", "dom.iterable", "es6"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -20,7 +16,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src"
-  ]
-}
+  "include": ["src"]
+}

package/templates/power-pages-starter/webpack.config.js CHANGED Viewed

@@ -3,7 +3,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 module.exports = (env, argv) => {
   const isProduction = argv.mode === 'production';
   return {
     entry: './src/index.tsx',
     output: {
@@ -19,7 +19,12 @@ module.exports = (env, argv) => {
       rules: [
         {
           test: /\.tsx?$/,
-          use: 'ts-loader',
+          use: {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+            },
+          },
           exclude: /node_modules/,
         },
         {
@@ -49,4 +54,4 @@ module.exports = (env, argv) => {
       },
     },
   };
-};
+};