@qwickapps/react-framework 1.3.0

package/src/schemas/ProductCardSchema.ts

@@ -0,0 +1,264 @@
+/**
+ * ProductCard Schema - Schema definition for ProductCard component
+ * 
+ * Defines the data structure and form editors for the ProductCard component
+ * using the declarative Model pattern with decorators.
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsOptional, IsString, IsArray, IsUrl, 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';
+
+@Schema('Product', '1.0.0')
+export class ProductModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Product ID',
+    description: 'Unique product identifier',
+    placeholder: 'product-1'
+  })
+  @IsString()
+  @IsNotEmpty()
+  id?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Product Name',
+    description: 'The display name of the product',
+    placeholder: 'Enter product name...'
+  })
+  @IsString()
+  @IsNotEmpty()
+  name?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Category',
+    description: 'Product category or type',
+    placeholder: 'e.g., Software, Hardware, Service'
+  })
+  @IsString()
+  category?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Description',
+    description: 'Full product description',
+    placeholder: 'Detailed product description...'
+  })
+  @IsString()
+  description?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Short Description',
+    description: 'Brief product description for compact view',
+    placeholder: 'Brief description...'
+  })
+  @IsOptional()
+  @IsString()
+  shortDescription?: string;
+
+  @Field({ type: DataType.ARRAY })
+  @Editor({
+    field_type: FieldType.REPEATER,
+    label: 'Features',
+    description: 'List of key product features'
+  })
+  @IsArray()
+  @IsString({ each: true })
+  features?: string[];
+
+  @Field({ type: DataType.ARRAY })
+  @Editor({
+    field_type: FieldType.REPEATER,
+    label: 'Technologies',
+    description: 'Technologies used in the product'
+  })
+  @IsArray()
+  @IsString({ each: true })
+  technologies?: string[];
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Status',
+    description: 'Current product status',
+    placeholder: 'e.g., Active, Development, Beta'
+  })
+  @IsString()
+  status?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.IMAGE,
+    label: 'Image URL',
+    description: 'Product image or screenshot',
+    placeholder: 'https://...'
+  })
+  @IsOptional()
+  @IsUrl()
+  image?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.URL,
+    label: 'Product URL',
+    description: 'Live product URL (for launched products)',
+    placeholder: 'https://...'
+  })
+  @IsOptional()
+  @IsUrl()
+  url?: string;
+}
+
+@Schema('ProductCardAction', '1.0.0')
+export class ProductCardActionModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Action ID',
+    description: 'Unique action identifier',
+    placeholder: 'action-1'
+  })
+  @IsString()
+  @IsNotEmpty()
+  id?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Button Label',
+    description: 'Action button text',
+    placeholder: 'Button text...'
+  })
+  @IsString()
+  label?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Button 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: 'Button 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('ProductCard', '1.0.0')
+export class ProductCardModel extends Model {
+  @Field({ type: DataType.OBJECT })
+  @Editor({
+    field_type: FieldType.FORM,
+    label: 'Product Data',
+    description: 'Product information to display'
+  })
+  @IsOptional()
+  @ValidateNested()
+  @Type(() => ProductModel)
+  product?: ProductModel;
+
+  @Field({ defaultValue: 'detailed' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Card Variant',
+    description: 'Display variant for the product card',
+    validation: {
+      options: [
+        { label: 'Compact', value: 'compact' },
+        { label: 'Detailed', value: 'detailed' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['compact', 'detailed'])
+  variant?: 'compact' | 'detailed';
+
+  @Field({ type: DataType.ARRAY })
+  @Editor({
+    field_type: FieldType.REPEATER,
+    label: 'Custom Actions',
+    description: 'Custom action buttons'
+  })
+  @IsOptional()
+  @IsArray()
+  @ValidateNested({ each: true })
+  @Type(() => ProductCardActionModel)
+  actions?: ProductCardActionModel[];
+
+  @Field({ defaultValue: true })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Show Image',
+    description: 'Whether to display the product image'
+  })
+  @IsOptional()
+  showImage?: boolean;
+
+  @Field({ defaultValue: true })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Show Technologies',
+    description: 'Whether to display technology chips'
+  })
+  @IsOptional()
+  showTechnologies?: boolean;
+
+  @Field({ defaultValue: 3 })
+  @Editor({
+    field_type: FieldType.NUMBER,
+    label: 'Max Features (Compact)',
+    description: 'Maximum features to show in compact mode',
+    validation: { min: 1, max: 10 }
+  })
+  @IsOptional()
+  @IsNumber()
+  @Min(1)
+  @Max(10)
+  maxFeaturesCompact?: number;
+}
+
+
+export default ProductCardModel;

package/src/schemas/SafeSpanSchema.ts

@@ -0,0 +1,36 @@
+/**
+ * Schema for SafeSpan component - Safely renders HTML content with sanitization
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsOptional, IsString } from 'class-validator';
+import 'reflect-metadata';
+import { Editor, Field, Schema, Model, FieldType } from '@qwickapps/schema';
+
+@Schema('SafeSpan', '1.0.0')
+export class SafeSpanModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'HTML Content',
+    description: 'HTML content to be safely rendered after sanitization',
+    placeholder: '<p>Enter HTML content...</p>'
+  })
+  @IsOptional()
+  @IsString()
+  html?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Placeholder Text',
+    description: 'Text to display when no HTML content is available',
+    placeholder: 'Loading...'
+  })
+  @IsOptional()
+  @IsString()
+  placeholder?: string;
+}
+
+export default SafeSpanModel;

package/src/schemas/SectionSchema.ts

@@ -0,0 +1,106 @@
+/**
+ * Schema for Section component - Themed, responsive section container
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsOptional, IsString, IsIn } from 'class-validator';
+import 'reflect-metadata';
+import { Editor, Field, Schema, Model, FieldType } from '@qwickapps/schema';
+
+@Schema('Section', '1.0.0')
+export class SectionModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Content',
+    description: 'Section content (can be HTML or plain text)',
+    placeholder: 'Enter section content...'
+  })
+  @IsOptional()
+  @IsString()
+  children?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Background Color',
+    description: 'Background color (CSS color, theme path, or palette color)',
+    placeholder: '#ffffff or primary.main'
+  })
+  @IsOptional()
+  @IsString()
+  background?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Text Color',
+    description: 'Text color (CSS color, theme path, or palette color)',
+    placeholder: '#000000 or text.primary'
+  })
+  @IsOptional()
+  @IsString()
+  color?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Section Padding',
+    description: 'Vertical padding/spacing for the section',
+    validation: {
+      options: [
+        { value: 'none', label: 'None' },
+        { value: 'tiny', label: 'Tiny (8px)' },
+        { value: 'small', label: 'Small (16px)' },
+        { value: 'medium', label: 'Medium (32px)' },
+        { value: 'large', label: 'Large (64px)' },
+        { value: 'extra-large', label: 'Extra Large (96px)' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['none', 'tiny', 'small', 'medium', 'large', 'extra-large'])
+  padding?: 'none' | 'tiny' | 'small' | 'medium' | 'large' | 'extra-large';
+
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Content Max Width',
+    description: 'Maximum width for the content container',
+    validation: {
+      options: [
+        { value: 'xs', label: 'Extra Small (444px)' },
+        { value: 'sm', label: 'Small (600px)' },
+        { value: 'md', label: 'Medium (900px)' },
+        { value: 'lg', label: 'Large (1200px)' },
+        { value: 'xl', label: 'Extra Large (1536px)' },
+        { value: 'false', label: 'Full Width' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['xs', 'sm', 'md', 'lg', 'xl', 'false'])
+  contentMaxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'false';
+
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'HTML Element',
+    description: 'HTML element type to use for the section',
+    validation: {
+      options: [
+        { value: 'section', label: 'Section' },
+        { value: 'div', label: 'Div' },
+        { value: 'article', label: 'Article' },
+        { value: 'main', label: 'Main' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['section', 'div', 'article', 'main'])
+  component?: 'section' | 'div' | 'article' | 'main';
+}
+
+
+export default SectionModel;

package/src/schemas/SelectInputFieldSchema.ts

@@ -0,0 +1,137 @@
+/**
+ * Schema for SelectInputField component - Select dropdown with options
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsArray, IsBoolean, IsOptional, IsString, ValidateNested } from 'class-validator';
+import { Type } from 'class-transformer';
+import 'reflect-metadata';
+import { Editor, Field, Schema, Model, FieldType } from '@qwickapps/schema';
+
+/**
+ * Select option definition for dropdown items
+ */
+export class SelectOption {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Option Value',
+    description: 'The value for this option'
+  })
+  @IsString()
+  // Note: Can also be number, but class-validator will handle type coercion
+  value?: string | number;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Option Label',
+    description: 'The display text for this option'
+  })
+  @IsOptional()
+  @IsString()
+  label?: string;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Disabled',
+    description: 'Whether this option is disabled'
+  })
+  @IsOptional()
+  @IsBoolean()
+  disabled?: boolean;
+}
+
+@Schema('SelectInputField', '1.0.0')
+export class SelectInputFieldModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Field Label',
+    description: 'The label text displayed for this select field',
+    placeholder: 'Enter field label...'
+  })
+  @IsOptional()
+  @IsString()
+  label?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Selected Value',
+    description: 'The currently selected value'
+  })
+  @IsOptional()
+  @IsString()
+  // Note: Can also be number, but class-validator will handle type coercion
+  value?: string | number;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Select Options',
+    description: 'Array of options available in the dropdown (JSON format)'
+  })
+  @IsOptional()
+  @IsArray()
+  @ValidateNested({ each: true })
+  @Type(() => SelectOption)
+  options?: SelectOption[];
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Required',
+    description: 'Whether this field is required'
+  })
+  @IsOptional()
+  @IsBoolean()
+  required?: boolean;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Disabled',
+    description: 'Whether this field is disabled'
+  })
+  @IsOptional()
+  @IsBoolean()
+  disabled?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Error Message',
+    description: 'Error message to display when field validation fails',
+    placeholder: 'Error message...'
+  })
+  @IsOptional()
+  @IsString()
+  error?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Helper Text',
+    description: 'Additional helpful text displayed below the field',
+    placeholder: 'Helper text...'
+  })
+  @IsOptional()
+  @IsString()
+  helperText?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Placeholder Text',
+    description: 'Placeholder text shown when no value is selected',
+    placeholder: 'Select an option...'
+  })
+  @IsOptional()
+  @IsString()
+  placeholder?: string;
+}
+
+export default SelectInputFieldModel;

package/src/schemas/TextInputFieldSchema.ts

@@ -0,0 +1,129 @@
+/**
+ * Schema for TextInputField component - Reusable text input with consistent styling
+ * 
+ * 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('TextInputField', '1.0.0')
+export class TextInputFieldModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Field Label',
+    description: 'The label displayed for the text input field',
+    placeholder: 'Enter field label...'
+  })
+  @IsString()
+  label?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Value',
+    description: 'Current field value',
+    placeholder: 'Enter value...'
+  })
+  @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({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Disabled',
+    description: 'Whether the field is disabled'
+  })
+  @IsOptional()
+  @IsBoolean()
+  disabled?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Error Message',
+    description: 'Error message to display if validation fails',
+    placeholder: 'Enter error message...'
+  })
+  @IsOptional()
+  @IsString()
+  error?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Helper Text',
+    description: 'Helper text to guide the user',
+    placeholder: 'Enter helper text...'
+  })
+  @IsOptional()
+  @IsString()
+  helperText?: string;
+
+  @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()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Input Type',
+    description: 'HTML input type (text, email, number, password, etc.)',
+    placeholder: 'text'
+  })
+  @IsOptional()
+  @IsString()
+  type?: string;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Multiline',
+    description: 'Whether the field supports multiple lines (textarea)'
+  })
+  @IsOptional()
+  @IsBoolean()
+  multiline?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.NUMBER,
+    label: 'Rows',
+    description: 'Number of rows for multiline fields'
+  })
+  @IsOptional()
+  @IsNumber()
+  rows?: number;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.NUMBER,
+    label: 'Max Rows',
+    description: 'Maximum number of rows for multiline fields'
+  })
+  @IsOptional()
+  @IsNumber()
+  maxRows?: number;
+}
+
+export default TextInputFieldModel;