@khester/create-dynamics-app 1.0.4

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

@@ -0,0 +1,239 @@
+import React, { useState, useCallback } from 'react';
+import { 
+  Button, 
+  TextField, 
+  Dropdown, 
+  DatePicker 
+} from '@khester1/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

@@ -0,0 +1,32 @@
+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 />);

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

@@ -0,0 +1,139 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { PowerPagesApiService } from '@khester1/dynamics-ui-api-client';
+
+interface PowerPagesContextType {
+  apiService: PowerPagesApiService | null;
+  isAuthenticated: boolean;
+  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 PowerPagesContext = createContext<PowerPagesContextType | undefined>(undefined);
+
+interface PowerPagesProviderProps {
+  children: React.ReactNode;
+}
+
+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;
+    
+    // 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
+    // In a real implementation, you would check if the user is logged in to the portal
+    // For demo purposes, we'll assume they are authenticated
+    setIsAuthenticated(true);
+  }, []);
+
+  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: PowerPagesContextType = {
+    apiService,
+    isAuthenticated,
+    createRecord,
+    retrieveRecord,
+    updateRecord,
+    deleteRecord,
+    retrieveMultiple,
+  };
+
+  return (
+    <PowerPagesContext.Provider value={value}>
+      {children}
+    </PowerPagesContext.Provider>
+  );
+};
+
+export const usePowerPagesApi = (): PowerPagesContextType => {
+  const context = useContext(PowerPagesContext);
+  if (context === undefined) {
+    throw new Error('usePowerPagesApi must be used within a PowerPagesProvider');
+  }
+  return context;
+};

package/templates/power-pages-starter/src/styles/index.css

@@ -0,0 +1,76 @@
+/* Global Styles */
+* {
+  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;
+}
+
+.app-header {
+  background: linear-gradient(135deg, #0078d4 0%, #106ebe 100%);
+  color: white;
+  padding: 24px;
+  text-align: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.app-header h1 {
+  margin: 0 0 8px 0;
+  font-size: 28px;
+  font-weight: 600;
+}
+
+.app-header p {
+  margin: 0;
+  font-size: 16px;
+  opacity: 0.9;
+}
+
+.app-main {
+  flex: 1;
+  padding: 32px 16px;
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.app-footer {
+  background-color: #f3f2f1;
+  border-top: 1px solid #edebe9;
+  padding: 16px;
+  text-align: center;
+  color: #605e5c;
+  font-size: 14px;
+}
+
+.app-footer p {
+  margin: 0;
+}
+
+@media (max-width: 768px) {
+  .app-header {
+    padding: 16px;
+  }
+  
+  .app-header h1 {
+    font-size: 24px;
+  }
+  
+  .app-main {
+    padding: 16px 8px;
+  }
+}

package/templates/power-pages-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/power-pages-starter/webpack.config.js

@@ -0,0 +1,52 @@
+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: '/',
+    },
+    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,
+    },
+    optimization: {
+      splitChunks: {
+        chunks: 'all',
+      },
+    },
+  };
+};