@khester/create-dynamics-app 2.10.0 → 3.0.0

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 />);

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

@@ -1,162 +0,0 @@
-import React, { createContext, useContext, useState, useEffect } from 'react';
-import { PowerPagesApiService } from '@khester/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 = 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

@@ -1,76 +0,0 @@
-/* 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

@@ -1,20 +0,0 @@
-{
-  "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

@@ -1,57 +0,0 @@
-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: {
-            loader: 'ts-loader',
-            options: {
-              transpileOnly: true,
-            },
-          },
-          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',
-      },
-    },
-  };
-};

package/templates/{power-pages-starter → power-pages-island}/gitignore

@@ -1,5 +1,5 @@
 node_modules/
 dist/
-*.log
 .env
 .env.local
+*.log