@qwickapps/react-framework 1.3.0

package/src/schemas/ThemeSwitcherSchema.ts

@@ -0,0 +1,97 @@
+/**
+ * Schema for ThemeSwitcher component - Theme selection control
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsBoolean, IsOptional, IsString, IsIn } from 'class-validator';
+import 'reflect-metadata';
+import { Editor, Field, Schema, Model, FieldType } from '@qwickapps/schema';
+
+@Schema('ThemeSwitcher', '1.0.0')
+export class ThemeSwitcherModel extends Model {
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Disabled',
+    description: 'Disable the theme switcher button'
+  })
+  @IsOptional()
+  @IsBoolean()
+  disabled?: boolean;
+
+  @Field({ defaultValue: 'medium' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Button Size',
+    description: 'Size of the theme switcher button'
+  })
+  @IsOptional()
+  @IsString()
+  @IsIn(['small', 'medium', 'large'])
+  size?: 'small' | 'medium' | 'large';
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Custom Tooltip',
+    description: 'Custom tooltip text override',
+    placeholder: 'Current theme: Light'
+  })
+  @IsOptional()
+  @IsString()
+  tooltipText?: string;
+
+  @Field({ defaultValue: true })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Show Tooltip',
+    description: 'Show tooltip on hover'
+  })
+  @IsOptional()
+  @IsBoolean()
+  showTooltip?: boolean;
+
+  @Field({ defaultValue: 'bottom' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Menu Position',
+    description: 'Position of the theme selection menu'
+  })
+  @IsOptional()
+  @IsString()
+  @IsIn(['bottom', 'top', 'left', 'right'])
+  menuPosition?: 'bottom' | 'top' | 'left' | 'right';
+
+  @Field({ defaultValue: true })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Show Light Theme',
+    description: 'Show light theme option in menu'
+  })
+  @IsOptional()
+  @IsBoolean()
+  showLightTheme?: boolean;
+
+  @Field({ defaultValue: true })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Show Dark Theme',
+    description: 'Show dark theme option in menu'
+  })
+  @IsOptional()
+  @IsBoolean()
+  showDarkTheme?: boolean;
+
+  @Field({ defaultValue: true })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Show System Theme',
+    description: 'Show system theme option in menu'
+  })
+  @IsOptional()
+  @IsBoolean()
+  showSystemTheme?: boolean;
+}
+
+export default ThemeSwitcherModel;

package/src/schemas/__tests__/builders.test.ts

@@ -0,0 +1,313 @@
+/**
+ * Unit tests for Schema Builders
+ * 
+ * Tests the fluent API schema builder system to ensure correct
+ * schema generation and validation.
+ */
+
+// import { createSchema, FieldBuilder, ModelBuilder, SchemaBuilder } from '../builders';
+// import { DataType, FieldType } from '../types';
+
+describe.skip('FieldBuilder', () => {
+  test('creates basic string field', () => {
+    const field = new FieldBuilder('testField')
+      .string()
+      .required()
+      .textEditor('Test Field', 'A test field')
+      .build();
+
+    expect(field).toEqual({
+      name: 'testField',
+      data_type: DataType.STRING,
+      required: true,
+      editor: {
+        field_type: FieldType.TEXT,
+        label: 'Test Field',
+        description: 'A test field'
+      }
+    });
+  });
+
+  test('creates number field with validation', () => {
+    const field = new FieldBuilder('age')
+      .numberEditor('integer', 'Age', 'Your age', 0, 150)
+      .required()
+      .build();
+
+    expect(field).toEqual({
+      name: 'age',
+      data_type: DataType.INTEGER,
+      required: true,
+      editor: {
+        field_type: FieldType.INTEGER,
+        label: 'Age',
+        description: 'Your age',
+        validation: { min: 0, max: 150 }
+      }
+    });
+  });
+
+  test('creates select field with options', () => {
+    const options = [
+      { label: 'Red', value: 'red' },
+      { label: 'Blue', value: 'blue' }
+    ];
+    
+    const field = new FieldBuilder('color')
+      .selectSingleEditor(options, 'Color', 'Choose a color')
+      .optional()
+      .build();
+
+    expect(field).toEqual({
+      name: 'color',
+      data_type: DataType.STRING,
+      required: false,
+      editor: {
+        field_type: FieldType.SELECT,
+        label: 'Color',
+        description: 'Choose a color',
+        validation: { options }
+      }
+    });
+  });
+
+  test('creates object field with auto-inference', () => {
+    const field = new FieldBuilder('address')
+      .object('Address', 'Address Details', 'Your address information')
+      .required()
+      .build();
+
+    expect(field).toEqual({
+      name: 'address',
+      data_type: DataType.OBJECT,
+      required: true,
+      type: 'Address',
+      editor: {
+        field_type: FieldType.OBJECT_FORM,
+        label: 'Address Details',
+        description: 'Your address information'
+      }
+    });
+  });
+
+  test('creates array field with auto-inference', () => {
+    const field = new FieldBuilder('tags')
+      .array(DataType.STRING, 'Tags', 'List of tags')
+      .optional()
+      .build();
+
+    expect(field).toEqual({
+      name: 'tags',
+      data_type: DataType.ARRAY,
+      required: false,
+      type: DataType.STRING,
+      editor: {
+        field_type: FieldType.REPEATER,
+        label: 'Tags',
+        description: 'List of tags'
+      }
+    });
+  });
+
+  test('creates model array with model repeater', () => {
+    const field = new FieldBuilder('items')
+      .array('Item', 'Items', 'List of items')
+      .required()
+      .build();
+
+    expect(field).toEqual({
+      name: 'items',
+      data_type: DataType.ARRAY,
+      required: true,
+      type: 'Item',
+      editor: {
+        field_type: FieldType.MODEL_REPEATER,
+        label: 'Items',
+        description: 'List of items'
+      }
+    });
+  });
+
+  test('throws error when building without data type', () => {
+    const builder = new FieldBuilder('invalid');
+    expect(() => builder.build()).toThrow("Field 'invalid' must have a data type");
+  });
+});
+
+describe.skip('ModelBuilder', () => {
+  test('creates model with fields', () => {
+    const builder = new ModelBuilder('Address');
+    
+    builder.field('street').textEditor('Street', 'Street address').required().build();
+    builder.field('city').textEditor('City', 'City name').required().build();
+    builder.field('zipCode').textEditor('Zip Code', 'Postal code').optional().build();
+    
+    const model = builder.build();
+
+    expect(model.name).toBe('Address');
+    expect(model.fields).toHaveLength(3);
+    expect(model.fields[0].name).toBe('street');
+    expect(model.fields[1].name).toBe('city');
+    expect(model.fields[2].name).toBe('zipCode');
+  });
+
+  test('throws error when building without name', () => {
+    const builder = new (ModelBuilder as any)(undefined);
+    expect(() => builder.build()).toThrow('Component must have a name');
+  });
+});
+
+describe.skip('SchemaBuilder', () => {
+  test('creates complete schema with models and fields', () => {
+    const schema = createSchema('UserForm', '1.0.0')
+      .uses(['AddressSchema.ts'])
+      .model('Address', builder => {
+        builder.field('street').textEditor('Street').required();
+        builder.field('city').textEditor('City').required();
+      })
+      .field('name').textEditor('Full Name', 'Your full name').required()
+      .field('email').emailEditor('Email', 'Your email address').required()
+      .field('address').object('Address', 'Address', 'Your address').optional()
+      .build();
+
+    expect(schema).toEqual({
+      name: 'UserForm',
+      version: '1.0.0',
+      uses: ['AddressSchema.ts'],
+      models: {
+        Address: {
+          name: 'Address',
+          fields: [
+            {
+              name: 'street',
+              data_type: DataType.STRING,
+              required: true,
+              editor: {
+                field_type: FieldType.TEXT,
+                label: 'Street',
+                description: ''
+              }
+            },
+            {
+              name: 'city',
+              data_type: DataType.STRING,
+              required: true,
+              editor: {
+                field_type: FieldType.TEXT,
+                label: 'City',
+                description: ''
+              }
+            }
+          ]
+        }
+      },
+      fields: [
+        {
+          name: 'name',
+          data_type: DataType.STRING,
+          required: true,
+          editor: {
+            field_type: FieldType.TEXT,
+            label: 'Full Name',
+            description: 'Your full name'
+          }
+        },
+        {
+          name: 'email',
+          data_type: DataType.STRING,
+          required: true,
+          editor: {
+            field_type: FieldType.EMAIL,
+            label: 'Email',
+            description: 'Your email address'
+          }
+        },
+        {
+          name: 'address',
+          data_type: DataType.OBJECT,
+          required: false,
+          type: 'Address',
+          editor: {
+            field_type: FieldType.OBJECT_FORM,
+            label: 'Address',
+            description: 'Your address'
+          }
+        }
+      ]
+    });
+  });
+
+  test('creates minimal schema', () => {
+    const schema = createSchema('Simple')
+      .field('title').textEditor('Title').required()
+      .build();
+
+    expect(schema.name).toBe('Simple');
+    expect(schema.version).toBe('1.0.0'); // default
+    expect(schema.fields).toHaveLength(1);
+    expect(schema.models).toEqual({});
+  });
+
+  test('throws error when building without name', () => {
+    const builder = new (SchemaBuilder as any)(undefined);
+    expect(() => builder.build()).toThrow('Schema must have a name');
+  });
+});
+
+describe.skip('Integration Tests', () => {
+  test('creates complex FeatureCard-like schema', () => {
+    const schema = createSchema('FeatureCard', '2.0.0')
+      .model('Feature', builder => {
+        builder.field('id').textEditor('Feature ID').required();
+        builder.field('title').textEditor('Title', 'Feature title').required();
+        builder.field('description').textAreaEditor('Description', 'Feature description').optional();
+        builder.field('icon').textEditor('Icon', 'Icon identifier').optional();
+      })
+      .model('Action', builder => {
+        builder.field('id').textEditor('Action ID').required();
+        builder.field('label').textEditor('Label').required();
+        builder.field('variant').selectSingleEditor([
+          { label: 'Contained', value: 'contained' },
+          { label: 'Outlined', value: 'outlined' }
+        ], 'Style').optional();
+      })
+      .field('feature').object('Feature', 'Feature Data').optional()
+      .field('features').array(DataType.STRING, 'Features List').optional()
+      .field('actions').array('Action', 'Actions').optional()
+      .field('variant').selectSingleEditor([
+        { label: 'Standard', value: 'standard' },
+        { label: 'List', value: 'list' }
+      ], 'Card Type').optional()
+      .field('elevation').numberEditor('integer', 'Elevation', 'Card elevation (0-24)', 0, 24).optional()
+      .build();
+
+    // Verify schema structure
+    expect(schema.name).toBe('FeatureCard');
+    expect(schema.version).toBe('2.0.0');
+    expect(Object.keys(schema.models || {})).toEqual(['Feature', 'Action']);
+    expect(schema.fields).toHaveLength(5);
+    
+    // Verify Feature model
+    const featureComponent = schema.models!.Feature;
+    expect(featureComponent.fields).toHaveLength(4);
+    expect(featureComponent.fields.find(f => f.name === 'title')?.required).toBe(true);
+    
+    // Verify Action model
+    const actionComponent = schema.models!.Action;
+    expect(actionComponent.fields).toHaveLength(3);
+    
+    // Verify main fields
+    const featureField = schema.fields.find(f => f.name === 'feature');
+    expect(featureField?.data_type).toBe(DataType.OBJECT);
+    expect(featureField?.type).toBe('Feature');
+    
+    const actionsField = schema.fields.find(f => f.name === 'actions');
+    expect(actionsField?.data_type).toBe(DataType.ARRAY);
+    expect(actionsField?.type).toBe('Action');
+    
+    const elevationField = schema.fields.find(f => f.name === 'elevation');
+    expect(elevationField?.data_type).toBe(DataType.INTEGER);
+    expect(elevationField?.editor?.validation?.min).toBe(0);
+    expect(elevationField?.editor?.validation?.max).toBe(24);
+  });
+});

package/src/schemas/index.ts

@@ -0,0 +1,34 @@
+/**
+ * Schemas Module - Declarative Model schema definitions
+ * 
+ * Exports all Model classes and their type-safe props using the new
+ * declarative pattern with @Schema, @Field, and @Editor decorators.
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+// Component schema models (declarative pattern)
+export * from './ActionSchema';
+export * from './ArticleSchema';
+export * from './CardListGridSchema';
+export * from './ChoiceInputFieldSchema';
+export * from './CodeSchema';
+export * from './ContentSchema';
+export * from './CoverImageHeaderSchema';
+export * from './FeatureCardSchema';
+export * from './FeatureGridSchema';
+export * from './FeatureItemSchema';
+export * from './FooterItemSchema';
+export * from './FormBlockSchema';
+export * from './FooterSchema';
+export * from './FooterSectionSchema';
+export * from './HeaderActionSchema';
+export * from './HeroBlockSchema';
+export * from './MetadataItemSchema';
+export * from './PageBannerHeaderSchema';
+export * from './PaletteSwitcherSchema';
+export * from './ProductCardSchema';
+export * from './SafeSpanSchema';
+export * from './SectionSchema';
+export * from './TextInputFieldSchema';
+export * from './ThemeSwitcherSchema';

package/src/setupTests.js

@@ -0,0 +1,60 @@
+// Jest setup for QwickApps Theme System tests
+import '@testing-library/jest-dom';
+
+// Mock CSS imports for components
+jest.mock('./components/QwickApp.css', () => ({}));
+jest.mock('./components/Logo.css', () => ({}));
+jest.mock('../theme/palettes/index.css', () => ({}));
+
+// Mock window.matchMedia for system theme detection
+const matchMediaMock = jest.fn().mockImplementation(query => ({
+  matches: false,
+  media: query,
+  onchange: null,
+  addListener: jest.fn(), // deprecated
+  removeListener: jest.fn(), // deprecated
+  addEventListener: jest.fn(),
+  removeEventListener: jest.fn(),
+  dispatchEvent: jest.fn(),
+}));
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: matchMediaMock,
+});
+
+// Mock localStorage with proper Jest spies
+Object.defineProperty(window, 'localStorage', {
+  value: {
+    getItem: jest.fn(),
+    setItem: jest.fn(),
+    removeItem: jest.fn(),
+    clear: jest.fn(),
+  },
+  writable: true,
+});
+
+// Mock document.documentElement for CSS variable testing
+Object.defineProperty(document, 'documentElement', {
+  writable: true,
+  value: {
+    setAttribute: jest.fn(),
+    getAttribute: jest.fn(),
+    style: {
+      setProperty: jest.fn(),
+    },
+  },
+});
+
+// Mock getComputedStyle
+global.getComputedStyle = jest.fn(() => ({
+  getPropertyValue: jest.fn(() => '#000000'),
+}));
+
+// Mock SVG getBBox method for Logo component tests
+Element.prototype.getBBox = jest.fn(() => ({
+  x: 0,
+  y: 0,
+  width: 100,
+  height: 20
+}));