@qwickapps/react-framework 1.3.0

package/src/schemas/FeatureCardSchema.ts

@@ -0,0 +1,161 @@
+/**
+ * FeatureCard Schema - Schema definition for FeatureCard component
+ * 
+ * Defines the data structure and form editors for the FeatureCard component
+ * using the declarative Model pattern with decorators.
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsOptional, IsString, IsArray, IsIn, IsNumber, Min, Max, ValidateNested, IsNotEmpty } from 'class-validator';
+import { Type } from 'class-transformer';
+import 'reflect-metadata';
+import { Editor, Field, Schema, Model, FieldType, DataType } from '@qwickapps/schema';
+import { FeatureItemModel } from './FeatureItemSchema';
+
+@Schema('FeatureCardAction', '1.0.0')
+export class FeatureCardActionModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Action ID',
+    description: 'Unique identifier for the action',
+    placeholder: 'action-1'
+  })
+  @IsString()
+  @IsNotEmpty()
+  id?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Label',
+    description: 'Action button label',
+    placeholder: 'Button text...'
+  })
+  @IsString()
+  label?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Style',
+    description: 'Button style variant',
+    validation: {
+      options: [
+        { label: 'Contained', value: 'contained' },
+        { label: 'Outlined', value: 'outlined' },
+        { label: 'Text', value: 'text' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['contained', 'outlined', 'text'])
+  variant?: 'contained' | 'outlined' | 'text';
+
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Color',
+    description: 'Button color theme',
+    validation: {
+      options: [
+        { label: 'Primary', value: 'primary' },
+        { label: 'Secondary', value: 'secondary' },
+        { label: 'Error', value: 'error' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['primary', 'secondary', 'error'])
+  color?: 'primary' | 'secondary' | 'error';
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Disabled',
+    description: 'Disabled state'
+  })
+  @IsOptional()
+  disabled?: boolean;
+}
+
+@Schema('FeatureCard', '2.0.0')
+export class FeatureCardModel extends Model {
+  @Field({ type: DataType.OBJECT })
+  @Editor({
+    field_type: FieldType.FORM,
+    label: 'Feature Data',
+    description: 'Single feature item to display'
+  })
+  @IsOptional()
+  @ValidateNested()
+  @Type(() => FeatureItemModel)
+  feature?: FeatureItemModel;
+
+  @Field({ type: DataType.ARRAY })
+  @Editor({
+    field_type: FieldType.REPEATER,
+    label: 'Features List',
+    description: 'List of feature strings for list variant'
+  })
+  @IsOptional()
+  @IsArray()
+  @IsString({ each: true })
+  features?: string[];
+
+  @Field({ defaultValue: 'standard' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Card Type',
+    description: 'Display variant for the feature card',
+    validation: {
+      options: [
+        { label: 'Standard', value: 'standard' },
+        { label: 'List', value: 'list' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['standard', 'list'])
+  variant?: 'standard' | 'list';
+
+  @Field({ type: DataType.ARRAY })
+  @Editor({
+    field_type: FieldType.REPEATER,
+    label: 'Actions',
+    description: 'Custom action buttons'
+  })
+  @IsOptional()
+  @IsArray()
+  @ValidateNested({ each: true })
+  @Type(() => FeatureCardActionModel)
+  actions?: FeatureCardActionModel[];
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Title',
+    description: 'Title for list variant',
+    placeholder: 'Enter card title...'
+  })
+  @IsOptional()
+  @IsString()
+  title?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.NUMBER,
+    label: 'Elevation',
+    description: 'Card elevation (0-24)',
+    validation: { min: 0, max: 24 }
+  })
+  @IsOptional()
+  @IsNumber()
+  @Min(0)
+  @Max(24)
+  elevation?: number;
+}
+
+
+export default FeatureCardModel;

package/src/schemas/FeatureGridSchema.ts

@@ -0,0 +1,87 @@
+/**
+ * FeatureGrid Schema - Defines data structure and validation for FeatureGrid component
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsArray, IsOptional, IsNumber, IsIn, IsBoolean, IsString, ValidateNested, Min, Max } from 'class-validator';
+import { Type } from 'class-transformer';
+import 'reflect-metadata';
+import { Editor, Field, Schema, Model, FieldType } from '@qwickapps/schema';
+import { FeatureItemModel } from './FeatureItemSchema';
+
+@Schema('FeatureGrid', '1.0.0')
+export class FeatureGridModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.REPEATER,
+    label: 'Features',
+    description: 'Array of feature items'
+  })
+  @IsArray()
+  @ValidateNested({ each: true })
+  @Type(() => FeatureItemModel)
+  features?: FeatureItemModel[];
+
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Columns',
+    description: 'Number of columns in the grid',
+    validation: {
+      options: [
+        { label: '1 Column', value: 1 },
+        { label: '2 Columns', value: 2 },
+        { label: '3 Columns', value: 3 },
+        { label: '4 Columns', value: 4 },
+        { label: '5 Columns', value: 5 },
+        { label: '6 Columns', value: 6 }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsNumber()
+  @IsIn([1, 2, 3, 4, 5, 6])
+  columns?: number;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Gap',
+    description: 'Grid gap size',
+    validation: {
+      options: [
+        { label: 'Small', value: 'small' },
+        { label: 'Medium', value: 'medium' },
+        { label: 'Large', value: 'large' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['small', 'medium', 'large'])
+  gap?: 'small' | 'medium' | 'large';
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Equal Height',
+    description: 'Whether all grid items should have equal height'
+  })
+  @IsOptional()
+  @IsBoolean()
+  equalHeight?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'CSS Class',
+    description: 'Additional CSS class name',
+    placeholder: 'custom-class'
+  })
+  @IsOptional()
+  @IsString()
+  className?: string;
+}
+
+
+export default FeatureGridModel;

package/src/schemas/FeatureItemSchema.ts

@@ -0,0 +1,68 @@
+/**
+ * FeatureItem Schema - Defines data structure for individual feature items
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsString, IsOptional, IsNotEmpty } from 'class-validator';
+import 'reflect-metadata';
+import { Editor, Field, Schema, Model, FieldType } from '@qwickapps/schema';
+
+@Schema('FeatureItem', '1.0.0')
+export class FeatureItemModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'ID',
+    description: 'Unique identifier for the feature item',
+    placeholder: 'feature-id'
+  })
+  @IsString()
+  @IsNotEmpty()
+  id?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Icon',
+    description: 'Feature icon (emoji or icon name)',
+    placeholder: '🚀 or icon-name'
+  })
+  @IsOptional()
+  @IsString()
+  icon?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Title',
+    description: 'Feature title',
+    placeholder: 'Feature title...'
+  })
+  @IsString()
+  title?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Description',
+    description: 'Feature description',
+    placeholder: 'Feature description...'
+  })
+  @IsString()
+  description?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Action',
+    description: 'Optional action/link text or content',
+    placeholder: 'Learn more'
+  })
+  @IsOptional()
+  @IsString()
+  action?: string;
+}
+
+
+export default FeatureItemModel;

package/src/schemas/FooterItemSchema.ts

@@ -0,0 +1,57 @@
+/**
+ * FooterItem Schema - Defines data structure for footer navigation items
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsString, IsOptional, IsBoolean, IsNotEmpty } from 'class-validator';
+import 'reflect-metadata';
+import { Editor, Field, Schema, Model, FieldType } from '@qwickapps/schema';
+
+@Schema('FooterItem', '1.0.0')
+export class FooterItemModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'ID',
+    description: 'Unique identifier for the footer item',
+    placeholder: 'footer-item-id'
+  })
+  @IsString()
+  @IsNotEmpty()
+  id?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Label',
+    description: 'Display text for the footer item',
+    placeholder: 'Navigation label'
+  })
+  @IsString()
+  label?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.URL,
+    label: 'URL',
+    description: 'Optional URL for links',
+    placeholder: 'https://example.com'
+  })
+  @IsOptional()
+  @IsString()
+  href?: string;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'External Link',
+    description: 'Whether to open links in new tab'
+  })
+  @IsOptional()
+  @IsBoolean()
+  external?: boolean;
+}
+
+
+export default FooterItemModel;

package/src/schemas/FooterSchema.ts

@@ -0,0 +1,116 @@
+/**
+ * Footer Schema - Defines data structure and validation for Footer component
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsString, IsOptional, IsArray, IsIn, IsBoolean, ValidateNested } from 'class-validator';
+import { Type } from 'class-transformer';
+import 'reflect-metadata';
+import { Editor, Field, Schema, Model, FieldType } from '@qwickapps/schema';
+import { FooterSectionModel } from './FooterSectionSchema';
+
+@Schema('Footer', '1.0.0')
+export class FooterModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.REPEATER,
+    label: 'Sections',
+    description: 'Footer sections with navigation items'
+  })
+  @IsOptional()
+  @IsArray()
+  @ValidateNested({ each: true })
+  @Type(() => FooterSectionModel)
+  sections?: FooterSectionModel[];
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Logo',
+    description: 'Optional logo or branding element (HTML or text)',
+    placeholder: 'Company Logo or HTML'
+  })
+  @IsOptional()
+  @IsString()
+  logo?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Copyright',
+    description: 'Copyright text',
+    placeholder: '© 2025 Company Name'
+  })
+  @IsOptional()
+  @IsString()
+  copyright?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Legal Text',
+    description: 'Additional legal or info text',
+    placeholder: 'All rights reserved.'
+  })
+  @IsOptional()
+  @IsString()
+  legalText?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Orientation',
+    description: 'Layout orientation',
+    validation: {
+      options: [
+        { label: 'Vertical', value: 'vertical' },
+        { label: 'Horizontal', value: 'horizontal' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['vertical', 'horizontal'])
+  orientation?: 'vertical' | 'horizontal';
+
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Variant',
+    description: 'Background variant',
+    validation: {
+      options: [
+        { label: 'Default', value: 'default' },
+        { label: 'Contained', value: 'contained' },
+        { label: 'Outlined', value: 'outlined' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['default', 'contained', 'outlined'])
+  variant?: 'default' | 'contained' | 'outlined';
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Show Divider',
+    description: 'Whether to show divider above footer'
+  })
+  @IsOptional()
+  @IsBoolean()
+  showDivider?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'CSS Class',
+    description: 'Additional CSS class name',
+    placeholder: 'custom-footer-class'
+  })
+  @IsOptional()
+  @IsString()
+  className?: string;
+}
+
+
+export default FooterModel;

package/src/schemas/FooterSectionSchema.ts

@@ -0,0 +1,50 @@
+/**
+ * FooterSection Schema - Defines data structure for footer sections
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsString, IsOptional, IsArray, ValidateNested, IsNotEmpty } from 'class-validator';
+import { Type } from 'class-transformer';
+import 'reflect-metadata';
+import { Editor, Field, Schema, Model, FieldType } from '@qwickapps/schema';
+import { FooterItemModel } from './FooterItemSchema';
+
+@Schema('FooterSection', '1.0.0')
+export class FooterSectionModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'ID',
+    description: 'Unique identifier for the footer section',
+    placeholder: 'footer-section-id'
+  })
+  @IsString()
+  @IsNotEmpty()
+  id?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Title',
+    description: 'Section title/heading',
+    placeholder: 'Section title'
+  })
+  @IsOptional()
+  @IsString()
+  title?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.REPEATER,
+    label: 'Items',
+    description: 'Array of items in this section'
+  })
+  @IsArray()
+  @ValidateNested({ each: true })
+  @Type(() => FooterItemModel)
+  items?: FooterItemModel[];
+}
+
+
+export default FooterSectionModel;

package/src/schemas/FormBlockSchema.ts

@@ -0,0 +1,102 @@
+/**
+ * Schema for FormBlock component - Reusable form layout container
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsBoolean, IsIn, IsOptional, IsString } from 'class-validator';
+import 'reflect-metadata';
+import { Editor, Field, Schema, Model, FieldType } from '@qwickapps/schema';
+
+@Schema('FormBlock', '1.0.0')
+export class FormBlockModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Title',
+    description: 'Title for the default header (ignored if custom header is provided)',
+    placeholder: 'Enter form title...'
+  })
+  @IsOptional()
+  @IsString()
+  title?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Description',
+    description: 'Description/subtitle for the default header (ignored if custom header is provided)',
+    placeholder: 'Enter form description...'
+  })
+  @IsOptional()
+  @IsString()
+  description?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Cover Image URL',
+    description: 'Cover image URL for the default header (ignored if custom header is provided)',
+    placeholder: 'https://example.com/image.jpg'
+  })
+  @IsOptional()
+  @IsString()
+  coverImage?: string | React.ReactNode;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Status Type',
+    description: 'Status type for message display (info, success, warning, error)',
+    placeholder: 'info'
+  })
+  @IsOptional()
+  @IsIn(['info', 'success', 'warning', 'error'])
+  status?: 'info' | 'success' | 'warning' | 'error';
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Status Message',
+    description: 'Status message to display',
+    placeholder: 'Enter status message...'
+  })
+  @IsOptional()
+  @IsString()
+  message?: string;
+
+  @Field({ defaultValue: 'sm' })
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Maximum Width',
+    description: 'Maximum width of the form container (xs, sm, md)',
+    placeholder: 'sm'
+  })
+  @IsOptional()
+  @IsIn(['xs', 'sm', 'md'])
+  maxWidth?: 'xs' | 'sm' | 'md';
+
+  @Field({ defaultValue: 'default' })
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Background Style',
+    description: 'Background style variant (default, gradient, image)',
+    placeholder: 'default'
+  })
+  @IsOptional()
+  @IsIn(['default', 'gradient', 'image'])
+  background?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Background Image URL',
+    description: 'Background image URL (when background="image")',
+    placeholder: 'https://example.com/background.jpg'
+  })
+  @IsOptional()
+  @IsString()
+  backgroundImage?: string;
+}
+
+export default FormBlockModel;