@qwickapps/react-framework 1.3.0

package/src/schemas/CardListGridSchema.ts

@@ -0,0 +1,102 @@
+/**
+ * Schema for CardListGrid component - Generic grid layout for cards
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsArray, IsOptional, IsNumber, IsIn, IsBoolean, IsObject, IsString } from 'class-validator';
+import 'reflect-metadata';
+import { Editor, Field, Schema, Model, FieldType } from '@qwickapps/schema';
+
+@Schema('CardListGrid', '1.0.0')
+export class CardListGridModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.REPEATER,
+    label: 'Grid Items',
+    description: 'Array of items to display in the grid'
+  })
+  @IsArray()
+  items?: any[];
+
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Columns',
+    description: 'Number of columns in the grid layout',
+    validation: {
+      options: [
+        { value: 1, label: '1 Column' },
+        { value: 2, label: '2 Columns (Default)' },
+        { value: 3, label: '3 Columns' },
+        { value: 4, label: '4 Columns' },
+        { value: 5, label: '5 Columns' },
+        { value: 6, label: '6 Columns' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsNumber()
+  @IsIn([1, 2, 3, 4, 5, 6])
+  columns?: 1 | 2 | 3 | 4 | 5 | 6;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Grid Spacing',
+    description: 'Spacing between grid items',
+    validation: {
+      options: [
+        { value: 'none', label: 'No Spacing' },
+        { value: 'tiny', label: 'Tiny' },
+        { value: 'small', label: 'Small' },
+        { value: 'medium', label: 'Medium' },
+        { value: 'large', label: 'Large (Default)' },
+        { value: 'huge', label: 'Huge' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['none', 'tiny', 'small', 'medium', 'large', 'huge'])
+  spacing?: 'none' | 'tiny' | 'small' | 'medium' | 'large' | 'huge';
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Equal Height',
+    description: 'Whether all cards should have equal height'
+  })
+  @IsOptional()
+  @IsBoolean()
+  equalHeight?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Card Component Type',
+    description: 'Type of card component to render for each item',
+    validation: {
+      options: [
+        { value: 'ProductCard', label: 'Product Card' },
+        { value: 'FeatureCard', label: 'Feature Card' },
+        { value: 'Custom', label: 'Custom Component' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['ProductCard', 'FeatureCard', 'Custom'])
+  renderComponent?: 'ProductCard' | 'FeatureCard' | 'Custom';
+
+  @Field()
+  @Editor({
+    field_type: FieldType.FORM,
+    label: 'Item Properties',
+    description: 'Additional properties to pass to each rendered item'
+  })
+  @IsOptional()
+  @IsObject()
+  itemProps?: Record<string, any>;
+}
+
+
+export default CardListGridModel;

package/src/schemas/ChoiceInputFieldSchema.ts

@@ -0,0 +1,89 @@
+/**
+ * Schema for ChoiceInputField component - Dynamic option inputs management
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsArray, IsBoolean, IsNumber, IsOptional, IsString } from 'class-validator';
+import 'reflect-metadata';
+import { Editor, Field, Schema, Model, FieldType } from '@qwickapps/schema';
+
+@Schema('ChoiceInputField', '1.0.0')
+export class ChoiceInputFieldModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Field Label',
+    description: 'Label/title for the choice input field',
+    placeholder: 'Options'
+  })
+  @IsOptional()
+  @IsString()
+  label?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Options',
+    description: 'Array of option values (HTML content supported) - JSON array format'
+  })
+  @IsOptional()
+  @IsArray()
+  @IsString({ each: true })
+  options?: string[];
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Disabled',
+    description: 'Whether the input fields are disabled'
+  })
+  @IsOptional()
+  @IsBoolean()
+  disabled?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Placeholder Text',
+    description: 'Placeholder text for option inputs',
+    placeholder: 'Enter option text. HTML formatting supported.'
+  })
+  @IsOptional()
+  @IsString()
+  placeholder?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Option Label Prefix',
+    description: 'Prefix for each option label (e.g., "Option", "Choice")',
+    placeholder: 'Option'
+  })
+  @IsOptional()
+  @IsString()
+  optionLabelPrefix?: string;
+
+  @Field({ defaultValue: 2 })
+  @Editor({
+    field_type: FieldType.NUMBER,
+    label: 'Input Rows',
+    description: 'Number of rows for each option input field'
+  })
+  @IsOptional()
+  @IsNumber()
+  rows?: number;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Add Button Text',
+    description: 'Text for the add option button',
+    placeholder: 'Add Option'
+  })
+  @IsOptional()
+  @IsString()
+  addButtonText?: string;
+}
+
+export default ChoiceInputFieldModel;

package/src/schemas/CodeSchema.ts

@@ -0,0 +1,88 @@
+/**
+ * Schema for Code component - Syntax-highlighted code display
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsBoolean, IsOptional, IsString } from 'class-validator';
+import 'reflect-metadata';
+import { Editor, Field, Schema, Model, FieldType } from '@qwickapps/schema';
+
+@Schema('Code', '1.0.0')
+export class CodeModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Code Content',
+    description: 'The code content to display with syntax highlighting',
+    placeholder: 'Enter code content...'
+  })
+  @IsString()
+  children?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Language',
+    description: 'Programming language for syntax highlighting (e.g., typescript, javascript, python)',
+    placeholder: 'javascript'
+  })
+  @IsOptional()
+  @IsString()
+  language?: string;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Show Copy Button',
+    description: 'Display a copy-to-clipboard button'
+  })
+  @IsOptional()
+  @IsBoolean()
+  showCopy?: boolean;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Show Line Numbers',
+    description: 'Display line numbers alongside the code'
+  })
+  @IsOptional()
+  @IsBoolean()
+  showLineNumbers?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Title',
+    description: 'Optional title or filename to display above the code',
+    placeholder: 'File name or title'
+  })
+  @IsOptional()
+  @IsString()
+  title?: string;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Wrap Long Lines',
+    description: 'Allow long lines to wrap instead of scrolling horizontally'
+  })
+  @IsOptional()
+  @IsBoolean()
+  wrapLines?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Background Color',
+    description: 'Custom background color override',
+    placeholder: '#f5f5f5'
+  })
+  @IsOptional()
+  @IsString()
+  codeBackground?: string;
+}
+
+
+export default CodeModel;

package/src/schemas/ContentSchema.ts

@@ -0,0 +1,128 @@
+/**
+ * Content Schema - Defines data structure and validation for Content component
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsOptional, IsString, IsIn, IsBoolean, IsArray, ValidateNested } from 'class-validator';
+import { Type } from 'class-transformer';
+import 'reflect-metadata';
+import { Editor, Field, Schema, Model, FieldType } from '@qwickapps/schema';
+import { ActionModel } from './ActionSchema';
+
+@Schema('Content', '1.0.0')
+export class ContentModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Title',
+    description: 'Main heading for the content block',
+    placeholder: 'Enter content title...'
+  })
+  @IsOptional()
+  @IsString()
+  title?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Subtitle',
+    description: 'Secondary heading or description',
+    placeholder: 'Enter subtitle...'
+  })
+  @IsOptional()
+  @IsString()
+  subtitle?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Content',
+    description: 'Main content body (HTML supported)',
+    placeholder: 'Enter content body...'
+  })
+  @IsOptional()
+  @IsString()
+  children?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.REPEATER,
+    label: 'Actions',
+    description: 'Array of action buttons'
+  })
+  @IsOptional()
+  @IsArray()
+  @ValidateNested({ each: true })
+  @Type(() => ActionModel)
+  actions?: ActionModel[];
+
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Variant',
+    description: 'Background/elevation style',
+    validation: {
+      options: [
+        { label: 'Default', value: 'default' },
+        { label: 'Elevated', value: 'elevated' },
+        { label: 'Outlined', value: 'outlined' },
+        { label: 'Filled', value: 'filled' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['default', 'elevated', 'outlined', 'filled'])
+  variant?: 'default' | 'elevated' | 'outlined' | 'filled';
+
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Block Spacing',
+    description: 'Content padding size',
+    validation: {
+      options: [
+        { label: 'None', value: 'none' },
+        { label: 'Compact', value: 'compact' },
+        { label: 'Comfortable', value: 'comfortable' },
+        { label: 'Spacious', value: 'spacious' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['none', 'compact', 'comfortable', 'spacious'])
+  blockSpacing?: 'none' | 'compact' | 'comfortable' | 'spacious';
+
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Content Max Width',
+    description: 'Maximum content width constraint',
+    validation: {
+      options: [
+        { label: 'XS', value: 'xs' },
+        { label: 'SM', value: 'sm' },
+        { label: 'MD', value: 'md' },
+        { label: 'LG', value: 'lg' },
+        { label: 'XL', value: 'xl' },
+        { label: 'Full Width', value: 'false' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['xs', 'sm', 'md', 'lg', 'xl', 'false'])
+  contentMaxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'false';
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Centered',
+    description: 'Center align content'
+  })
+  @IsOptional()
+  @IsBoolean()
+  centered?: boolean;
+}
+
+
+export default ContentModel;

package/src/schemas/CoverImageHeaderSchema.ts

@@ -0,0 +1,208 @@
+/**
+ * CoverImageHeader Schema - Defines data structure and validation for CoverImageHeader component
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsString, IsOptional, IsArray, IsIn, IsNumber, Min, Max, ValidateNested } from 'class-validator';
+import { Type } from 'class-transformer';
+import 'reflect-metadata';
+import { Editor, Field, Schema, Model, FieldType } from '@qwickapps/schema';
+import { HeaderActionModel } from './HeaderActionSchema';
+
+@Schema('CoverImageHeader', '1.0.0')
+export class CoverImageHeaderModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.IMAGE,
+    label: 'Image',
+    description: 'Image URL or component',
+    placeholder: 'Upload image'
+  })
+  @IsOptional()
+  @IsString()
+  image?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Image Alt Text',
+    description: 'Alternative text for image',
+    placeholder: 'Descriptive alt text...'
+  })
+  @IsOptional()
+  @IsString()
+  imageAlt?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Image Size',
+    description: 'Size of the image',
+    validation: {
+      options: [
+        { label: 'Small', value: 'small' },
+        { label: 'Medium', value: 'medium' },
+        { label: 'Large', value: 'large' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['small', 'medium', 'large'])
+  imageSize?: 'small' | 'medium' | 'large';
+
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Image Shape',
+    description: 'Shape of the image',
+    validation: {
+      options: [
+        { label: 'Square', value: 'square' },
+        { label: 'Circle', value: 'circle' },
+        { label: 'Rounded', value: 'rounded' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['square', 'circle', 'rounded'])
+  imageShape?: 'square' | 'circle' | 'rounded';
+
+
+  imageBackground?: string;
+
+  @Field({defaultValue: 'transparent'})
+  @Editor({
+    field_type: FieldType.COLOR,
+    label: 'Image Background',
+    description: 'Image background color',
+    placeholder: 'Pick a color for the image background'
+  })
+  @IsOptional()
+  @IsString()
+  imageBackgroundColor?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Overline',
+    description: 'Small text above the main title',
+    placeholder: 'Overline text'
+  })
+  @IsOptional()
+  @IsString()
+  overline?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Title',
+    description: 'Main heading/title text',
+    placeholder: 'Enter title...'
+  })
+  @IsString()
+  title?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Subtitle',
+    description: 'Secondary text below the title',
+    placeholder: 'Enter subtitle...'
+  })
+  @IsOptional()
+  @IsString()
+  subtitle?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.REPEATER,
+    label: 'Tags',
+    description: 'Array of tag strings'
+  })
+  @IsOptional()
+  @IsArray()
+  @IsString({ each: true })
+  tags?: string[];
+
+  @Field()
+  @Editor({
+    field_type: FieldType.REPEATER,
+    label: 'Actions',
+    description: 'Array of header action buttons'
+  })
+  @IsOptional()
+  @IsArray()
+  @ValidateNested({ each: true })
+  @Type(() => HeaderActionModel)
+  actions?: HeaderActionModel[];
+
+  @Field()
+  @Editor({
+    field_type: FieldType.NUMBER,
+    label: 'Max Visible Actions',
+    description: 'Maximum visible actions before overflow',
+    validation: {
+      min: 1,
+      max: 10
+    }
+  })
+  @IsOptional()
+  @IsNumber()
+  @Min(1)
+  @Max(10)
+  maxVisibleActions?: number;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'CSS Class',
+    description: 'Additional CSS class name',
+    placeholder: 'custom-class'
+  })
+  @IsOptional()
+  @IsString()
+  className?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Header Variant',
+    description: 'Style variant for the header',
+    validation: {
+      options: [
+        { label: 'Default', value: 'default' },
+        { label: 'Compact', value: 'compact' },
+        { label: 'Prominent', value: 'prominent' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['default', 'compact', 'prominent'])
+  variant?: 'default' | 'compact' | 'prominent';
+
+  @Field({defaultValue: '--var(--theme-primary)'})
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Background',
+    description: 'Background color or image URL',
+    placeholder: 'Pick a color for the background or enter a image URL'
+  })
+  @IsOptional()
+  @IsString()
+  background?: string;
+
+  @Field({defaultValue: '--var(--theme-on-primary)'})
+  @Editor({
+    field_type: FieldType.COLOR,
+    label: 'Color',
+    description: 'Foreground color',
+    placeholder: '#000000'
+  })
+  @IsOptional()
+  @IsString()
+  color?: string;
+}
+
+
+export default CoverImageHeaderModel;