@qwickapps/react-framework 1.5.7 → 1.5.8

package/src/components/forms/__tests__/SchemaFormRenderer.test.tsx

@@ -0,0 +1,212 @@
+/**
+ * SchemaFormRenderer Tests
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { render, screen, fireEvent } from '@testing-library/react';
+import { SchemaFormRenderer } from '../SchemaFormRenderer';
+import { Model, Field, Editor, FieldType, Schema } from '@qwickapps/schema';
+
+// Test Model with various field types
+@Schema()
+class TestModel extends Model {
+  @Field()
+  @Editor({ field_type: FieldType.TEXT, label: 'Text Field', description: 'Enter text' })
+  textField?: string;
+
+  @Field()
+  @Editor({ field_type: FieldType.EMAIL, label: 'Email Field' })
+  emailField?: string;
+
+  @Field()
+  @Editor({ field_type: FieldType.TEXTAREA, label: 'Textarea Field' })
+  textareaField?: string;
+
+  @Field()
+  @Editor({ field_type: FieldType.NUMBER, label: 'Number Field' })
+  numberField?: number;
+
+  @Field()
+  @Editor({ field_type: FieldType.BOOLEAN, label: 'Boolean Field', description: 'Toggle me' })
+  booleanField?: boolean;
+
+  @Field()
+  @Editor({ field_type: FieldType.DATE_TIME, label: 'DateTime Field' })
+  dateTimeField?: string;
+
+  @Field()
+  @Editor({ field_type: FieldType.COLOR, label: 'Color Field' })
+  colorField?: string;
+}
+
+describe('SchemaFormRenderer', () => {
+  const mockOnChange = jest.fn();
+
+  beforeEach(() => {
+    mockOnChange.mockClear();
+  });
+
+  it('renders all field types from schema', () => {
+    render(
+      <SchemaFormRenderer
+        modelClass={TestModel}
+        value={{}}
+        onChange={mockOnChange}
+      />
+    );
+
+    expect(screen.getByLabelText(/Text Field/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Email Field/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Textarea Field/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Number Field/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Boolean Field/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/DateTime Field/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Color Field/i)).toBeInTheDocument();
+  });
+
+  it('displays field values correctly', () => {
+    const value = {
+      textField: 'test value',
+      emailField: 'test@example.com',
+      numberField: 42,
+      booleanField: true,
+    };
+
+    render(
+      <SchemaFormRenderer
+        modelClass={TestModel}
+        value={value}
+        onChange={mockOnChange}
+      />
+    );
+
+    expect(screen.getByDisplayValue('test value')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('test@example.com')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('42')).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: /Boolean Field/i })).toBeChecked();
+  });
+
+  it('calls onChange when text field changes', () => {
+    render(
+      <SchemaFormRenderer
+        modelClass={TestModel}
+        value={{}}
+        onChange={mockOnChange}
+      />
+    );
+
+    const textField = screen.getByLabelText(/Text Field/i);
+    fireEvent.change(textField, { target: { value: 'new value' } });
+
+    expect(mockOnChange).toHaveBeenCalledWith({ textField: 'new value' });
+  });
+
+  it('calls onChange when number field changes', () => {
+    render(
+      <SchemaFormRenderer
+        modelClass={TestModel}
+        value={{}}
+        onChange={mockOnChange}
+      />
+    );
+
+    const numberField = screen.getByLabelText(/Number Field/i);
+    fireEvent.change(numberField, { target: { value: '123' } });
+
+    expect(mockOnChange).toHaveBeenCalledWith({ numberField: 123 });
+  });
+
+  it('handles empty number field correctly (returns undefined, not NaN)', () => {
+    render(
+      <SchemaFormRenderer
+        modelClass={TestModel}
+        value={{ numberField: 42 }}
+        onChange={mockOnChange}
+      />
+    );
+
+    const numberField = screen.getByLabelText(/Number Field/i);
+    fireEvent.change(numberField, { target: { value: '' } });
+
+    expect(mockOnChange).toHaveBeenCalledWith({ numberField: undefined });
+  });
+
+  it('calls onChange when boolean field changes', () => {
+    render(
+      <SchemaFormRenderer
+        modelClass={TestModel}
+        value={{}}
+        onChange={mockOnChange}
+      />
+    );
+
+    const booleanField = screen.getByRole('checkbox', { name: /Boolean Field/i });
+    fireEvent.click(booleanField);
+
+    expect(mockOnChange).toHaveBeenCalledWith({ booleanField: true });
+  });
+
+  it('displays validation errors when showValidation is true', () => {
+    const errors = ['Field A is required', 'Field B must be positive'];
+
+    render(
+      <SchemaFormRenderer
+        modelClass={TestModel}
+        value={{}}
+        onChange={mockOnChange}
+        showValidation={true}
+        validationErrors={errors}
+      />
+    );
+
+    expect(screen.getByText(/Please fix the following errors/i)).toBeInTheDocument();
+    expect(screen.getByText('Field A is required')).toBeInTheDocument();
+    expect(screen.getByText('Field B must be positive')).toBeInTheDocument();
+  });
+
+  it('does not display validation errors when showValidation is false', () => {
+    const errors = ['Field A is required'];
+
+    render(
+      <SchemaFormRenderer
+        modelClass={TestModel}
+        value={{}}
+        onChange={mockOnChange}
+        showValidation={false}
+        validationErrors={errors}
+      />
+    );
+
+    expect(screen.queryByText(/Please fix the following errors/i)).not.toBeInTheDocument();
+  });
+
+  it('disables all fields when readOnly is true', () => {
+    render(
+      <SchemaFormRenderer
+        modelClass={TestModel}
+        value={{}}
+        onChange={mockOnChange}
+        readOnly={true}
+      />
+    );
+
+    expect(screen.getByLabelText(/Text Field/i)).toBeDisabled();
+    expect(screen.getByLabelText(/Email Field/i)).toBeDisabled();
+    expect(screen.getByLabelText(/Number Field/i)).toBeDisabled();
+    expect(screen.getByRole('checkbox', { name: /Boolean Field/i })).toBeDisabled();
+  });
+
+  it('displays field descriptions as helper text', () => {
+    render(
+      <SchemaFormRenderer
+        modelClass={TestModel}
+        value={{}}
+        onChange={mockOnChange}
+      />
+    );
+
+    expect(screen.getByText('Enter text')).toBeInTheDocument();
+    expect(screen.getByText('Toggle me')).toBeInTheDocument();
+  });
+});

package/src/components/forms/index.ts

@@ -17,3 +17,6 @@ export type { FormCheckboxProps } from './FormCheckbox';
 
 export { default as Captcha } from './Captcha';
 export type { CaptchaProps, CaptchaProvider } from './Captcha';
+
+export { SchemaFormRenderer } from './SchemaFormRenderer';
+export type { SchemaFormRendererProps } from './SchemaFormRenderer';

package/src/components/index.ts

@@ -23,6 +23,7 @@ export * from './forms';
 export * from './input';
 export * from './layout';
 export * from './pages';
+export * from './plugins';
 export { default as Scaffold } from './Scaffold';
 export type { ScaffoldProps, AppBarProps } from './Scaffold';
 export type { MenuItem } from './menu/MenuItem';

package/src/components/input/ChoiceInputField.tsx

@@ -18,7 +18,8 @@ import {
   Button,
   Typography
 } from '@mui/material';
-import { Add as AddIcon } from '@mui/icons-material';
+import Add from "@mui/icons-material/Add";
+const AddIcon = Add;
 import HtmlInputField from './HtmlInputField';
 // import ChoiceInputFieldModel from '../../schemas/ChoiceInputFieldSchema';
 import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';

package/src/components/input/HtmlInputField.tsx

@@ -23,15 +23,20 @@ import {
   Alert,
   ButtonGroup,
   } from '@mui/material';
-import {
-  FormatBold as BoldIcon,
-  FormatItalic as ItalicIcon,
-  FormatUnderlined as UnderlineIcon,
-  Code as CodeIcon,
-  Visibility as PreviewIcon,
-  VisibilityOff as EditIcon,
-  Help as HelpIcon
-} from '@mui/icons-material';
+import FormatBold from '@mui/icons-material/FormatBold';
+import FormatItalic from '@mui/icons-material/FormatItalic';
+import FormatUnderlined from '@mui/icons-material/FormatUnderlined';
+import Code from '@mui/icons-material/Code';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import Help from '@mui/icons-material/Help';
+const BoldIcon = FormatBold;
+const ItalicIcon = FormatItalic;
+const UnderlineIcon = FormatUnderlined;
+const CodeIcon = Code;
+const PreviewIcon = Visibility;
+const EditIcon = VisibilityOff;
+const HelpIcon = Help;
 import SafeSpan from '../SafeSpan';
 import sanitizeHtml from 'sanitize-html';
 // import HtmlInputFieldModel from '../../schemas/HtmlInputFieldSchema';

package/src/components/input/TextField.tsx

@@ -55,7 +55,7 @@ export const TextField = React.forwardRef<HTMLDivElement, TextFieldProps>((props
   }
 
   // Mark as QwickApp component
-  (TextField as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+  Object.assign(TextField, { [QWICKAPP_COMPONENT]: true });
 
   return (
     <MuiTextField

package/src/components/layout/CollapsibleLayout/CollapsibleLayout.tsx

@@ -26,10 +26,10 @@ import {
   SxProps,
   Theme,
 } from '@mui/material';
-import {
-  ExpandMore as ExpandMoreIcon,
-  ExpandLess as ExpandLessIcon,
-} from '@mui/icons-material';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+const ExpandMoreIcon = ExpandMore;
+const ExpandLessIcon = ExpandLess;
 import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../../hooks';
 import CollapsibleLayoutModel from '../../../schemas/CollapsibleLayoutSchema';
 import {
@@ -167,7 +167,7 @@ function CollapsibleLayoutView({
   const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
   
   // Mark as QwickApp component
-  (CollapsibleLayoutView as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+  Object.assign(CollapsibleLayoutView, { [QWICKAPP_COMPONENT]: true });
 
   // Determine controlled vs uncontrolled usage
   const controlled = collapsedProp !== undefined;
@@ -500,9 +500,7 @@ function CollapsibleLayout(props: CollapsibleLayoutProps) {
   // Always call hooks unconditionally
   const bindingResult = useDataBinding<CollapsibleLayoutModel>(
     dataSource || '',
-    restProps as Partial<CollapsibleLayoutModel>,
-    CollapsibleLayoutModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<CollapsibleLayoutModel>
   );
 
   // If no dataSource, use traditional props

package/src/components/layout/GridLayout.tsx

@@ -44,6 +44,10 @@ export interface GridLayoutProps extends ViewProps {
   maxHeight?: string;
   /** Maximum grid container width */
   maxWidth?: string;
+  /** MUI sx prop for advanced styling (explicit override for type resolution) */
+  sx?: import('@mui/material/styles').SxProps<import('@mui/material/styles').Theme>;
+  /** Inline CSS styles (explicit override for type resolution) */
+  style?: React.CSSProperties;
 }
 
 /**

package/src/components/plugins/DataTable.tsx

@@ -0,0 +1,259 @@
+/**
+ * DataTable - Sortable, filterable table component for plugin management pages
+ *
+ * Provides consistent table UI with sorting, filtering, pagination, and bulk actions.
+ *
+ * @example
+ * ```tsx
+ * <DataTable
+ *   columns={[
+ *     { key: 'email', label: 'Email', sortable: true },
+ *     { key: 'status', label: 'Status', render: (val) => <Badge>{val}</Badge> }
+ *   ]}
+ *   data={users}
+ *   onRowClick={(user) => navigate(`/users/${user.id}`)}
+ *   bulkActions={[
+ *     { label: 'Delete', onClick: (rows) => handleDelete(rows), variant: 'danger' }
+ *   ]}
+ * />
+ * ```
+ */
+
+import React, { useState, useMemo } from 'react';
+
+export interface Column<T> {
+  /** Column key (must match data property) */
+  key: keyof T;
+
+  /** Display label */
+  label: string;
+
+  /** Enable sorting for this column */
+  sortable?: boolean;
+
+  /** Custom render function */
+  render?: (value: unknown, row: T) => React.ReactNode;
+
+  /** Column width (CSS value) */
+  width?: string;
+}
+
+export interface DataTableProps<T> {
+  /** Column definitions */
+  columns: Column<T>[];
+
+  /** Table data */
+  data: T[];
+
+  /** Row click handler */
+  onRowClick?: (row: T) => void;
+
+  /** Bulk action buttons */
+  bulkActions?: Array<{
+    label: string;
+    onClick: (selectedRows: T[]) => void;
+    variant?: 'primary' | 'secondary' | 'danger';
+  }>;
+
+  /** Enable row selection */
+  selectable?: boolean;
+
+  /** Empty state message */
+  emptyMessage?: string;
+
+  /** Loading state */
+  loading?: boolean;
+
+  /** Row key extractor */
+  getRowKey?: (row: T, index: number) => string | number;
+}
+
+export function DataTable<T = Record<string, unknown>>({
+  columns,
+  data,
+  onRowClick,
+  bulkActions = [],
+  selectable = bulkActions.length > 0,
+  emptyMessage = 'No data available',
+  loading = false,
+  getRowKey = (row: T, index: number) => {
+    // Type-safe check for id property
+    const rowObj = row as Record<string, unknown>;
+    const hasValidId = 'id' in rowObj &&
+      (typeof rowObj.id === 'string' || typeof rowObj.id === 'number');
+    return hasValidId ? (rowObj.id as string | number) : index;
+  },
+}: DataTableProps<T>) {
+  const [selectedRows, setSelectedRows] = useState<Set<string | number>>(new Set());
+  const [sortColumn, setSortColumn] = useState<keyof T | null>(null);
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
+
+  // Sorted data
+  const sortedData = useMemo(() => {
+    if (!sortColumn) return data;
+
+    return [...data].sort((a, b) => {
+      const aVal = a[sortColumn];
+      const bVal = b[sortColumn];
+
+      if (aVal === bVal) return 0;
+
+      const comparison = aVal < bVal ? -1 : 1;
+      return sortDirection === 'asc' ? comparison : -comparison;
+    });
+  }, [data, sortColumn, sortDirection]);
+
+  const handleSort = (column: keyof T) => {
+    if (sortColumn === column) {
+      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortColumn(column);
+      setSortDirection('asc');
+    }
+  };
+
+  const handleSelectAll = () => {
+    if (selectedRows.size === data.length) {
+      setSelectedRows(new Set());
+    } else {
+      setSelectedRows(new Set(data.map((row, index) => getRowKey(row, index))));
+    }
+  };
+
+  const handleSelectRow = (rowKey: string | number) => {
+    const newSelection = new Set(selectedRows);
+    if (newSelection.has(rowKey)) {
+      newSelection.delete(rowKey);
+    } else {
+      newSelection.add(rowKey);
+    }
+    setSelectedRows(newSelection);
+  };
+
+  const getSelectedRowData = () => {
+    return data.filter((row, index) =>
+      selectedRows.has(getRowKey(row, index))
+    );
+  };
+
+  if (loading) {
+    return (
+      <div className="animate-pulse space-y-2">
+        <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
+        <div className="h-16 bg-gray-200 dark:bg-gray-700 rounded"></div>
+        <div className="h-16 bg-gray-200 dark:bg-gray-700 rounded"></div>
+      </div>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <div className="text-center py-12 text-gray-500 dark:text-gray-400">
+        {emptyMessage}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Bulk Actions */}
+      {selectable && selectedRows.size > 0 && bulkActions.length > 0 && (
+        <div className="flex items-center gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+          <span className="text-sm font-medium text-blue-900 dark:text-blue-100">
+            {selectedRows.size} selected
+          </span>
+          {bulkActions.map((action, index) => (
+            <button
+              key={index}
+              onClick={() => action.onClick(getSelectedRowData())}
+              className={`
+                px-3 py-1.5 rounded text-sm font-medium
+                ${action.variant === 'danger'
+                  ? 'bg-red-600 hover:bg-red-700 text-white'
+                  : 'bg-blue-600 hover:bg-blue-700 text-white'}
+              `}
+            >
+              {action.label}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Table */}
+      <div className="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
+        <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+          <thead className="bg-gray-50 dark:bg-gray-800">
+            <tr>
+              {selectable && (
+                <th className="w-12 px-4 py-3">
+                  <input
+                    type="checkbox"
+                    checked={selectedRows.size === data.length && data.length > 0}
+                    onChange={handleSelectAll}
+                    className="rounded"
+                  />
+                </th>
+              )}
+              {columns.map((column) => (
+                <th
+                  key={String(column.key)}
+                  style={{ width: column.width }}
+                  className={`
+                    px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider
+                    ${column.sortable ? 'cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700' : ''}
+                  `}
+                  onClick={() => column.sortable && handleSort(column.key)}
+                >
+                  <div className="flex items-center gap-2">
+                    {column.label}
+                    {column.sortable && sortColumn === column.key && (
+                      <span>{sortDirection === 'asc' ? '↑' : '↓'}</span>
+                    )}
+                  </div>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
+            {sortedData.map((row, rowIndex) => {
+              const rowKey = getRowKey(row, rowIndex);
+              const isSelected = selectedRows.has(rowKey);
+
+              return (
+                <tr
+                  key={rowKey}
+                  className={`
+                    ${onRowClick ? 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800' : ''}
+                    ${isSelected ? 'bg-blue-50 dark:bg-blue-900/20' : ''}
+                  `}
+                  onClick={() => onRowClick?.(row)}
+                >
+                  {selectable && (
+                    <td className="px-4 py-3" onClick={(e) => e.stopPropagation()}>
+                      <input
+                        type="checkbox"
+                        checked={isSelected}
+                        onChange={() => handleSelectRow(rowKey)}
+                        className="rounded"
+                      />
+                    </td>
+                  )}
+                  {columns.map((column) => (
+                    <td
+                      key={String(column.key)}
+                      className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100"
+                    >
+                      {column.render
+                        ? column.render(row[column.key], row)
+                        : String(row[column.key] ?? '')}
+                    </td>
+                  ))}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}