@qwickapps/react-framework 1.3.0

package/src/schemas/HeaderActionSchema.ts

@@ -0,0 +1,83 @@
+/**
+ * HeaderAction Schema - Defines data structure for header action buttons
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsString, IsOptional, IsBoolean, IsNumber, Min, Max, IsNotEmpty } from 'class-validator';
+import 'reflect-metadata';
+import { Editor, Field, Schema, Model, FieldType } from '@qwickapps/schema';
+
+@Schema('HeaderAction', '1.0.0')
+export class HeaderActionModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'ID',
+    description: 'Unique identifier for the action',
+    placeholder: 'action-id'
+  })
+  @IsString()
+  @IsNotEmpty()
+  id?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Label',
+    description: 'Display label for the action button',
+    placeholder: 'Action label'
+  })
+  @IsString()
+  label!: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Icon',
+    description: 'Icon component or JSX element',
+    placeholder: 'icon-name'
+  })
+  @IsOptional()
+  @IsString()
+  icon?: string;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Disabled',
+    description: 'Whether this action is disabled'
+  })
+  @IsOptional()
+  @IsBoolean()
+  disabled?: boolean;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Destructive',
+    description: 'Whether this action is destructive (shows with warning styling)'
+  })
+  @IsOptional()
+  @IsBoolean()
+  destructive?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.NUMBER,
+    label: 'Priority',
+    description: 'Priority for ordering (lower numbers = higher priority)',
+    validation: {
+      min: 1,
+      max: 100
+    }
+  })
+  @IsOptional()
+  @IsNumber()
+  @Min(1)
+  @Max(100)
+  priority?: number;
+}
+
+
+export default HeaderActionModel;

package/src/schemas/HeroBlockSchema.ts

@@ -0,0 +1,149 @@
+/**
+ * HeroBlock Schema - Defines data structure and validation for HeroBlock component
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsOptional, IsString, IsUrl, IsIn, IsNumber, Min, Max, IsArray, ValidateNested } from 'class-validator';
+import { Type } from 'class-transformer';
+import 'reflect-metadata';
+import { Editor, Field, Schema, Model, FieldType, DataType } from '@qwickapps/schema';
+import { ActionModel } from './ActionSchema';
+
+@Schema('HeroBlock', '1.0.0')
+export class HeroBlockModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Title',
+    description: 'Main headline text',
+    placeholder: 'Enter hero title...'
+  })
+  @IsString()
+  title?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Subtitle',
+    description: 'Subtitle or description text',
+    placeholder: 'Enter subtitle...'
+  })
+  @IsOptional()
+  @IsString()
+  subtitle?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.IMAGE,
+    label: 'Background Image',
+    description: 'Background image URL',
+    placeholder: 'https://...'
+  })
+  @IsOptional()
+  @IsUrl()
+  backgroundImage?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Background Gradient',
+    description: 'Background gradient CSS value',
+    placeholder: 'linear-gradient(...)'
+  })
+  @IsOptional()
+  @IsString()
+  backgroundGradient?: string;
+
+  @Field({ defaultValue: 'default' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Background Color',
+    description: 'Background color theme variant',
+    validation: {
+      options: [
+        { label: 'Default', value: 'default' },
+        { label: 'Primary', value: 'primary' },
+        { label: 'Secondary', value: 'secondary' },
+        { label: 'Surface', value: 'surface' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['default', 'primary', 'secondary', 'surface'])
+  backgroundColor?: 'default' | 'primary' | 'secondary' | 'surface';
+
+  @Field({ type: DataType.ARRAY })
+  @Editor({
+    field_type: FieldType.REPEATER,
+    label: 'Actions',
+    description: 'Action buttons for the hero section'
+  })
+  @IsOptional()
+  @IsArray()
+  @ValidateNested({ each: true })
+  @Type(() => ActionModel)
+  actions?: ActionModel[];
+
+  @Field({ defaultValue: 'center' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Text Alignment',
+    description: 'Text alignment',
+    validation: {
+      options: [
+        { label: 'Left', value: 'left' },
+        { label: 'Center', value: 'center' },
+        { label: 'Right', value: 'right' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['left', 'center', 'right'])
+  textAlign?: 'left' | 'center' | 'right';
+
+  @Field({ defaultValue: 'medium' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Block Height',
+    description: 'Block height preset',
+    validation: {
+      options: [
+        { label: 'Small', value: 'small' },
+        { label: 'Medium', value: 'medium' },
+        { label: 'Large', value: 'large' },
+        { label: 'Viewport', value: 'viewport' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['small', 'medium', 'large', 'viewport'])
+  blockHeight?: 'small' | 'medium' | 'large' | 'viewport';
+
+  @Field()
+  @Editor({
+    field_type: FieldType.NUMBER,
+    label: 'Overlay Opacity',
+    description: 'Custom overlay opacity (0-1) when using background images',
+    validation: { min: 0, max: 1 }
+  })
+  @IsOptional()
+  @IsNumber()
+  @Min(0)
+  @Max(1)
+  overlayOpacity?: number;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'CSS Class',
+    description: 'Additional CSS class name',
+    placeholder: 'custom-hero-class'
+  })
+  @IsOptional()
+  @IsString()
+  className?: string;
+}
+
+
+export default HeroBlockModel;

package/src/schemas/HtmlInputFieldSchema.ts

@@ -0,0 +1,88 @@
+/**
+ * Schema for HtmlInputField component - Custom HTML text field with formatting controls
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsBoolean, IsNumber, IsOptional, IsString } from 'class-validator';
+import 'reflect-metadata';
+import { Editor, Field, Schema, Model, FieldType } from '@qwickapps/schema';
+
+@Schema('HtmlInputField', '1.0.0')
+export class HtmlInputFieldModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Label',
+    description: 'The label text for the HTML input field',
+    placeholder: 'Enter field label...'
+  })
+  @IsOptional()
+  @IsString()
+  label?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Value',
+    description: 'The HTML content value of the input field',
+    placeholder: 'Enter HTML content...'
+  })
+  @IsOptional()
+  @IsString()
+  value?: string;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Required',
+    description: 'Whether the field is required'
+  })
+  @IsOptional()
+  @IsBoolean()
+  required?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Placeholder',
+    description: 'Placeholder text shown when field is empty',
+    placeholder: 'Enter placeholder text...'
+  })
+  @IsOptional()
+  @IsString()
+  placeholder?: string;
+
+  @Field({ defaultValue: true })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Multiline',
+    description: 'Whether the field allows multiple lines of text'
+  })
+  @IsOptional()
+  @IsBoolean()
+  multiline?: boolean;
+
+  @Field({ defaultValue: 4 })
+  @Editor({
+    field_type: FieldType.NUMBER,
+    label: 'Rows',
+    description: 'Number of rows for multiline text field',
+    placeholder: '4'
+  })
+  @IsOptional()
+  @IsNumber()
+  rows?: number;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Disabled',
+    description: 'Whether the field is disabled'
+  })
+  @IsOptional()
+  @IsBoolean()
+  disabled?: boolean;
+}
+
+export default HtmlInputFieldModel;

package/src/schemas/MetadataItemSchema.ts

@@ -0,0 +1,35 @@
+/**
+ * MetadataItem Schema - Defines data structure for metadata items (followers, posts, etc.)
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsString } from 'class-validator';
+import 'reflect-metadata';
+import { Editor, Field, Schema, Model, FieldType } from '@qwickapps/schema';
+
+@Schema('MetadataItem', '1.0.0')
+export class MetadataItemModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Label',
+    description: 'Metadata label (e.g., "followers", "posts")',
+    placeholder: 'followers'
+  })
+  @IsString()
+  label?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Value',
+    description: 'Metadata value (e.g., "1.2k", "42")',
+    placeholder: '1.2k'
+  })
+  @IsString()
+  value?: string;
+}
+
+
+export default MetadataItemModel;

package/src/schemas/PageBannerHeaderSchema.ts

@@ -0,0 +1,206 @@
+/**
+ * PageBannerHeader Schema - Defines data structure and validation for PageBannerHeader component
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsString, IsOptional, IsArray, IsNumber, IsIn, Min, Max, ValidateNested } from 'class-validator';
+import { Type } from 'class-transformer';
+import 'reflect-metadata';
+import { Editor, Field, Schema, Model, FieldType } from '@qwickapps/schema';
+import { MetadataItemModel } from './MetadataItemSchema';
+import { HeaderActionModel } from './HeaderActionSchema';
+
+@Schema('PageBannerHeader', '1.0.0')
+export class PageBannerHeaderModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.IMAGE,
+    label: 'Cover Image',
+    description: 'Large banner/cover image URL',
+    placeholder: 'Upload cover image'
+  })
+  @IsOptional()
+  @IsString()
+  coverImage?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Cover Image Alt Text',
+    description: 'Alternative text for cover image',
+    placeholder: 'Descriptive alt text...'
+  })
+  @IsOptional()
+  @IsString()
+  coverImageAlt?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.IMAGE,
+    label: 'Profile Image',
+    description: 'Profile/avatar image URL',
+    placeholder: 'Upload profile image'
+  })
+  @IsOptional()
+  @IsString()
+  profileImage?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Profile Image Alt Text',
+    description: 'Alternative text for profile image',
+    placeholder: 'Profile alt text...'
+  })
+  @IsOptional()
+  @IsString()
+  profileImageAlt?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Profile Image Size',
+    description: 'Size of the profile image',
+    validation: {
+      options: [
+        { label: 'Small', value: 'small' },
+        { label: 'Medium', value: 'medium' },
+        { label: 'Large', value: 'large' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['small', 'medium', 'large'])
+  profileImageSize?: 'small' | 'medium' | 'large';
+
+  @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: 'Metadata',
+    description: 'Array of metadata items (followers, posts, etc.)'
+  })
+  @IsOptional()
+  @IsArray()
+  @ValidateNested({ each: true })
+  @Type(() => MetadataItemModel)
+  metadata?: MetadataItemModel[];
+
+  @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 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.NUMBER,
+    label: 'Banner Height',
+    description: 'Height of the banner area in pixels',
+    validation: {
+      min: 100,
+      max: 500
+    }
+  })
+  @IsOptional()
+  @IsNumber()
+  @Min(100)
+  @Max(500)
+  height?: 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: 'Profile Position',
+    description: 'Position of profile image relative to banner',
+    validation: {
+      options: [
+        { label: 'Bottom Left', value: 'bottom-left' },
+        { label: 'Bottom Center', value: 'bottom-center' },
+        { label: 'Overlay Center', value: 'overlay-center' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['bottom-left', 'bottom-center', 'overlay-center'])
+  profilePosition?: 'bottom-left' | 'bottom-center' | 'overlay-center';
+}
+
+
+export default PageBannerHeaderModel;

package/src/schemas/PaletteSwitcherSchema.ts

@@ -0,0 +1,66 @@
+/**
+ * Schema for PaletteSwitcher component - Color palette switching control
+ * 
+ * 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('PaletteSwitcher', '1.0.0')
+export class PaletteSwitcherModel extends Model {
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Disabled',
+    description: 'Disable the palette switcher button'
+  })
+  @IsOptional()
+  @IsBoolean()
+  disabled?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Button Size',
+    description: 'Size of the palette switcher button',
+    placeholder: 'medium'
+  })
+  @IsOptional()
+  @IsString()
+  buttonSize?: 'small' | 'medium' | 'large';
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Tooltip Text',
+    description: 'Custom tooltip text for the palette switcher',
+    placeholder: 'Switch color palette'
+  })
+  @IsOptional()
+  @IsString()
+  tooltipText?: string;
+
+  @Field({ defaultValue: true })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Show Active Badge',
+    description: 'Show "Active" badge on currently selected palette'
+  })
+  @IsOptional()
+  @IsBoolean()
+  showActiveBadge?: boolean;
+
+  @Field({ defaultValue: true })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Show Descriptions',
+    description: 'Show palette descriptions in menu items'
+  })
+  @IsOptional()
+  @IsBoolean()
+  showDescriptions?: boolean;
+}
+
+export default PaletteSwitcherModel;