tee3apps-cms-sdk-react 0.0.5 → 0.0.7

package/src/PageFormComponents/NumberField.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import type { ComponentProps } from '../types';
+import './Styles/NumberField.css'; // Import the external CSS
+
+interface NumberFieldProps {
+  props: ComponentProps;
+  value?: any;
+  onChange?: (code: string, value: any) => void;
+}
+
+const NumberField: React.FC<NumberFieldProps> = ({ props, value = '', onChange }) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChange) {
+      const code = props.code || `numberfield_${props.name?.all || 'field'}`;
+      onChange(code, e.target.value);
+    }
+  };
+
+  return (
+    <div className="number-field">
+      <label className="number-field__label">
+        {props.name?.all || 'Number Field'}
+        {props.required && <span className="number-field__required">*</span>}
+      </label>
+
+      <div className="number-field__input-wrapper">
+        <input
+          type="number"
+          value={value || ''}
+          onChange={handleChange}
+          min={props.min}
+          max={props.max}
+          step={props.step}
+          required={props.required}
+          className="number-field__input"
+        />
+
+        {props.suffix && (
+          <span className="number-field__suffix">
+            {props.suffix}
+          </span>
+        )}
+      </div>
+
+      {props.helperText && (
+        <p className="number-field__helper-text">{props.helperText}</p>
+      )}
+
+      <div className="number-field__status">
+        Range: {props.min}-{props.max} • Step: {props.step}
+      </div>
+    </div>
+  );
+};
+
+export default NumberField;

package/src/PageFormComponents/PageForm.css

@@ -0,0 +1,213 @@
+.page-form {
+  min-height: 100vh;
+  background: linear-gradient(to bottom right, #f9fafb, #f3f4f6); /* from-gray-50 to-gray-100 */
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.page-form__container {
+  max-width: 112rem; /* max-w-7xl (1120px) */
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+@media (min-width: 640px) {
+  .page-form__container {
+    padding-left: 1.5rem; /* sm:px-6 */
+    padding-right: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .page-form__container {
+    padding-left: 2rem; /* lg:px-8 */
+    padding-right: 2rem;
+  }
+}
+
+.page-form__footer {
+  margin-top: 3rem; /* mt-12 */
+  text-align: center;
+}
+
+.page-form__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem; /* gap-2 */
+  padding: 0.5rem 1rem; /* px-4 py-2 */
+  background-color: #fff; /* bg-white */
+  border-radius: 9999px; /* rounded-full */
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); /* shadow-sm */
+  border: 1px solid #e5e7eb; /* border-gray-200 */
+}
+
+.page-form__status-indicator {
+  width: 0.5rem; /* w-2 */
+  height: 0.5rem; /* h-2 */
+  background-color: #10b981; /* green-500 */
+  border-radius: 9999px; /* rounded-full */
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.page-form__status-text {
+  font-size: 0.875rem; /* text-sm */
+  color: #4b5563; /* gray-600 */
+}
+
+/* pulse animation */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+/* Toast Notification Styles */
+.toast-container {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-width: 400px;
+  width: calc(100% - 40px);
+  pointer-events: none;
+}
+
+@media (max-width: 480px) {
+  .toast-container {
+    top: 10px;
+    right: 10px;
+    left: 10px;
+    width: calc(100% - 20px);
+    max-width: none;
+  }
+}
+
+.toast {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px;
+  background-color: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  border-left: 4px solid;
+  cursor: pointer;
+  pointer-events: all;
+  animation: slideInRight 0.3s ease-out, fadeOut 0.3s ease-out 4.7s forwards;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.toast:hover {
+  transform: translateX(-4px);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.toast--error {
+  border-left-color: #ef4444;
+  background-color: #fef2f2;
+}
+
+.toast--error .toast__icon {
+  color: #ef4444;
+}
+
+.toast--success {
+  border-left-color: #10b981;
+  background-color: #f0fdf4;
+}
+
+.toast--success .toast__icon {
+  color: #10b981;
+}
+
+.toast--info {
+  border-left-color: #3b82f6;
+  background-color: #eff6ff;
+}
+
+.toast--info .toast__icon {
+  color: #3b82f6;
+}
+
+.toast--warning {
+  border-left-color: #f59e0b;
+  background-color: #fffbeb;
+}
+
+.toast--warning .toast__icon {
+  color: #f59e0b;
+}
+
+.toast__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+
+.toast__message {
+  flex: 1;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #1f2937;
+  font-weight: 500;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.toast__close {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  color: #6b7280;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  margin-left: 4px;
+}
+
+.toast__close:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+  color: #1f2937;
+}
+
+.toast__close:active {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+/* Animations */
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}

package/src/PageFormComponents/PageForm.tsx

@@ -0,0 +1,267 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import type { Row } from '../types';
+import RowComponent from './RowComponent';
+import './PageForm.css'; // Import the new CSS file
+
+interface PageFormProps {
+  jsonData: Row[];
+  onSubmit?: (data: Record<string, any>) => void;
+}
+
+interface Toast {
+  id: string;
+  message: string;
+  type: 'error' | 'success' | 'info' | 'warning';
+}
+
+const PageForm: React.FC<PageFormProps> = ({ jsonData, onSubmit }) => {
+  // Form state to store all field values
+  const [formValues, setFormValues] = useState<Record<string, any>>({});
+  const [deviceMode, setDeviceMode] = useState<string>('web');
+  const [validationErrors, setValidationErrors] = useState<Record<string, boolean>>({});
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  // Function to determine device mode based on screen width
+  const getDeviceMode = (width: number) => {
+    if (width <= 480) return 'mobileapp';
+    if (width <= 768) return 'mobileweb';
+    if (width <= 1024) return 'tablet';
+    return 'web';
+  };
+
+  // Function to get field code from component
+  const getFieldCode = (component: any) => {
+    return component.props.code || `${component.name.toLowerCase()}_${component.props.name?.all || 'field'}`;
+  };
+
+  // Function to get field name from component
+  const getFieldName = (component: any) => {
+    return component.props.name?.all || component.name;
+  };
+
+  // Function to create a mapping of field codes to field names
+  const getFieldCodeToNameMap = useCallback(() => {
+    const codeToNameMap: Record<string, string> = {};
+    
+    jsonData.forEach((row) => {
+      row.columns?.forEach((box) => {
+        box.components?.forEach((component) => {
+          // Check if component is a form field
+          const fieldTypes = ['DateField', 'NumberField', 'SelectField', 'RadioField', 'InputField', 'BooleanField'];
+          if (fieldTypes.includes(component.name)) {
+            const code = getFieldCode(component);
+            const name = getFieldName(component);
+            codeToNameMap[code] = name;
+          }
+        });
+      });
+    });
+    
+    return codeToNameMap;
+  }, [jsonData]);
+
+  // Function to collect all required fields from jsonData
+  const getRequiredFields = useCallback(() => {
+    const requiredFields: Record<string, { code: string; name: string }> = {};
+    
+    jsonData.forEach((row) => {
+      row.columns?.forEach((box) => {
+        box.components?.forEach((component) => {
+          // Check if component is a form field and is required
+          const fieldTypes = ['DateField', 'NumberField', 'SelectField', 'RadioField', 'InputField', 'BooleanField'];
+          if (fieldTypes.includes(component.name) && component.props.required) {
+            const code = getFieldCode(component);
+            const name = getFieldName(component);
+            requiredFields[code] = { code, name };
+          }
+        });
+      });
+    });
+    
+    return requiredFields;
+  }, [jsonData]);
+
+  // Function to transform form values from code-based to name-based
+  const transformFormValuesToNames = useCallback(() => {
+    const codeToNameMap = getFieldCodeToNameMap();
+    const transformedData: Record<string, any> = {};
+    
+    Object.keys(formValues).forEach((code) => {
+      const fieldName = codeToNameMap[code];
+      if (fieldName) {
+        transformedData[fieldName] = formValues[code];
+      } else {
+        // If no mapping found, keep the code as key
+        transformedData[code] = formValues[code];
+      }
+    });
+    
+    return transformedData;
+  }, [formValues, getFieldCodeToNameMap]);
+
+  // Effect to handle window resize
+  useEffect(() => {
+    const handleResize = () => {
+      const width = window.innerWidth;
+      setDeviceMode(getDeviceMode(width));
+    };
+
+    // Call once on mount
+    handleResize();
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  // Handler to update form values
+  const handleFieldChange = useCallback((code: string, value: any) => {
+    setFormValues(prev => ({
+      ...prev,
+      [code]: value
+    }));
+    // Clear validation error for this field when user types
+    if (validationErrors[code]) {
+      setValidationErrors(prev => {
+        const newErrors = { ...prev };
+        delete newErrors[code];
+        return newErrors;
+      });
+    }
+  }, [validationErrors]);
+
+  // Function to validate required fields
+  const validateForm = useCallback(() => {
+    const requiredFields = getRequiredFields();
+    const errors: Record<string, boolean> = {};
+    
+    Object.keys(requiredFields).forEach((code) => {
+      const value = formValues[code];
+      // Check if value is empty, null, undefined, empty array, or empty string
+      if (
+        value === undefined ||
+        value === null ||
+        value === '' ||
+        (Array.isArray(value) && value.length === 0)
+      ) {
+        errors[code] = true;
+      }
+    });
+    
+    setValidationErrors(errors);
+    return { isValid: Object.keys(errors).length === 0, errors };
+  }, [formValues, getRequiredFields]);
+
+  // Function to show toast notification
+  const showToast = useCallback((message: string, type: Toast['type'] = 'error') => {
+    const id = Date.now().toString();
+    const newToast: Toast = { id, message, type };
+    
+    setToasts(prev => [...prev, newToast]);
+    
+    // Auto remove toast after 5 seconds
+    setTimeout(() => {
+      setToasts(prev => prev.filter(toast => toast.id !== id));
+    }, 5000);
+  }, []);
+
+  // Function to remove toast
+  const removeToast = useCallback((id: string) => {
+    setToasts(prev => prev.filter(toast => toast.id !== id));
+  }, []);
+
+  // Single method to handle form submission - validates, transforms, and sends data to parent
+  const handleFormSubmit = useCallback(() => {
+    // Validate form and get validation result
+    const { isValid, errors } = validateForm();
+    
+    if (isValid) {
+      // Transform form values to use field names instead of codes
+      const transformedData = transformFormValuesToNames();
+      
+      // Send transformed data back to parent component
+      if (onSubmit) {
+        onSubmit(transformedData);
+      }
+    } else {
+      // If validation fails, show error message with field names
+      const requiredFields = getRequiredFields();
+      const errorFields = Object.keys(errors)
+        .map(code => requiredFields[code]?.name || code)
+        .join(', ');
+      showToast(`Please fill in all required fields: ${errorFields}`, 'error');
+    }
+  }, [formValues, validateForm, getRequiredFields, transformFormValuesToNames, onSubmit, showToast]);
+
+  return (
+    <div className="page-form">
+      <div className="page-form__container">
+        {/* Render each row */}
+        {jsonData.map((row, rowIndex) => (
+          <RowComponent 
+            key={rowIndex} 
+            row={row}
+            deviceMode={deviceMode}
+            formValues={formValues}
+            validationErrors={validationErrors}
+            onFieldChange={handleFieldChange}
+            onFormSubmit={handleFormSubmit}
+          />
+        ))}
+
+        {/* Footer */}
+        
+      </div>
+
+      {/* Toast Container */}
+      <div className="toast-container">
+        {toasts.map((toast) => (
+          <div
+            key={toast.id}
+            className={`toast toast--${toast.type}`}
+            onClick={() => removeToast(toast.id)}
+          >
+            <div className="toast__icon">
+              {toast.type === 'error' && (
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                </svg>
+              )}
+              {toast.type === 'success' && (
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                </svg>
+              )}
+              {toast.type === 'info' && (
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+                  <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
+                </svg>
+              )}
+              {toast.type === 'warning' && (
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+                  <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                </svg>
+              )}
+            </div>
+            <div className="toast__message">{toast.message}</div>
+            <button
+              className="toast__close"
+              onClick={(e) => {
+                e.stopPropagation();
+                removeToast(toast.id);
+              }}
+              aria-label="Close"
+            >
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
+              </svg>
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default PageForm;

package/src/PageFormComponents/RadioField.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import type { ComponentProps } from '../types';
+import './Styles/RadioField.css'; // Import external stylesheet
+
+interface RadioFieldProps {
+  props: ComponentProps;
+  value?: any;
+  onChange?: (code: string, value: any) => void;
+}
+
+const RadioField: React.FC<RadioFieldProps> = ({ props, value = '', onChange }) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChange) {
+      const code = props.code || `radiofield_${props.name?.all || 'field'}`;
+      onChange(code, e.target.value);
+    }
+  };
+
+  return (
+    <div className="radio-field">
+      <label className="radio-field__label">
+        {props.name?.all || 'Radio Field'}
+        {props.required && <span className="radio-field__required">*</span>}
+      </label>
+
+      <div className="radio-field__options">
+        {props.lov?.length === 0 ? (
+          <div className="radio-field__empty">No options available</div>
+        ) : (
+          props.lov?.map((item) => (
+            <label
+              key={item.id}
+              className="radio-field__option"
+            >
+              <input
+                type="radio"
+                name={props.code}
+                value={item.code}
+                checked={value === item.code}
+                onChange={handleChange}
+                className="radio-field__input"
+                required={props.required}
+              />
+              <span className="radio-field__option-label">{item.name}</span>
+            </label>
+          ))
+        )}
+      </div>
+
+      {props.helperText && (
+        <p className="radio-field__helper-text">{props.helperText}</p>
+      )}
+
+      
+    </div>
+  );
+};
+
+export default RadioField;

package/src/PageFormComponents/RowComponent.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import BoxRenderer from './BoxRenderer';
+import type { Row } from '../types';
+
+interface RowComponentProps {
+  row: Row;
+  deviceMode?: string;
+  formValues?: Record<string, any>;
+  validationErrors?: Record<string, boolean>;
+  onFieldChange?: (code: string, value: any) => void;
+  onFormSubmit?: () => void;
+}
+
+const RowComponent: React.FC<RowComponentProps> = ({ 
+  row, 
+  deviceMode = 'web',
+  formValues = {},
+  validationErrors = {},
+  onFieldChange,
+  onFormSubmit
+}) => {
+  const getCurrentMode = () => {
+    switch(deviceMode) {
+      case 'mobileweb':
+        return row.props.mode.mobileweb || {};
+      case 'mobileapp':
+        return row.props.mode.mobileapp || {};
+      case 'tablet':
+        return row.props.mode.tablet || {};
+      case 'web':
+      default:
+        return row.props.mode.web;
+    }
+  };
+
+  const currentMode = getCurrentMode();
+
+  return (
+    <div 
+      style={{
+        minHeight: row.props.minHeight,
+        backgroundColor: row.props.bgColor,
+        backgroundImage: row.props.bgImage ? `url(${row.props.bgImage})` : 'none',
+        backgroundSize: row.props.bgsize,
+        backgroundPosition: 'center',
+        width: '100%',
+        marginBottom: '2px',
+        border: '1px solid #e0e0e0',
+        borderRadius: '4px',
+        boxSizing: 'border-box',
+        overflow: 'hidden',
+        position: 'relative',
+        display: currentMode.isVisible !== false ? 'block' : 'none',
+      }}
+    >
+      {/* Row Content */}
+      <div style={{
+        width: '100%',
+        display: 'block',
+        position: 'relative',
+        padding: '5px',
+        boxSizing: 'border-box'
+      }}>
+        {row.columns.map((box, boxIndex) => (
+          <BoxRenderer 
+            key={boxIndex} 
+            box={box} 
+            deviceMode={deviceMode}
+            formValues={formValues}
+            validationErrors={validationErrors}
+            onFieldChange={onFieldChange}
+            onFormSubmit={onFormSubmit}
+          />
+        ))}
+        {/* Clear float after all children */}
+        <div style={{ clear: 'both' }} />
+      </div>
+    </div>
+  );
+};
+
+export default RowComponent;