@qwickapps/react-framework 1.5.12 → 1.6.0

package/src/schemas/FormFieldSchema.ts

@@ -0,0 +1,140 @@
+/**
+ * Schema for FormField component - Themed text/number input field
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsBoolean, IsIn, IsInt, IsOptional, IsString, Min } from 'class-validator';
+import 'reflect-metadata';
+import { Editor, Field, Schema, FieldType } from '@qwickapps/schema';
+import ViewSchema from './ViewSchema';
+
+@Schema('FormField', '1.0.0')
+export class FormFieldModel extends ViewSchema {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Label',
+    description: 'Label text for the input field',
+    placeholder: 'Enter label...'
+  })
+  @IsString()
+  label!: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Value',
+    description: 'Current input value',
+    placeholder: ''
+  })
+  @IsString()
+  value!: string | number;
+
+  @Field({ defaultValue: 'text' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Input Type',
+    description: 'Type of input field'
+  })
+  @IsOptional()
+  @IsIn(['text', 'number', 'password', 'email', 'tel'])
+  type?: 'text' | 'number' | 'password' | 'email' | 'tel';
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Helper Text',
+    description: 'Helper text displayed below the input',
+    placeholder: 'Enter helper text...'
+  })
+  @IsOptional()
+  @IsString()
+  helperText?: string;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Required',
+    description: 'Mark field as required'
+  })
+  @IsOptional()
+  @IsBoolean()
+  required?: boolean;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Read Only',
+    description: 'Make field read-only'
+  })
+  @IsOptional()
+  @IsBoolean()
+  readOnly?: boolean;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Disabled',
+    description: 'Disable the input field'
+  })
+  @IsOptional()
+  @IsBoolean()
+  disabled?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Disabled Color',
+    description: 'Custom color for disabled state (CSS color value)',
+    placeholder: 'var(--theme-text-disabled)'
+  })
+  @IsOptional()
+  @IsString()
+  disabledColor?: string;
+
+  @Field({ defaultValue: true })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Full Width',
+    description: 'Make input take full width of container'
+  })
+  @IsOptional()
+  @IsBoolean()
+  fullWidth?: boolean;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Multiline',
+    description: 'Enable multiline textarea mode'
+  })
+  @IsOptional()
+  @IsBoolean()
+  multiline?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Rows',
+    description: 'Number of rows for multiline textarea',
+    placeholder: '4'
+  })
+  @IsOptional()
+  @IsInt()
+  @Min(1)
+  rows?: number;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Placeholder',
+    description: 'Placeholder text',
+    placeholder: 'Enter text...'
+  })
+  @IsOptional()
+  @IsString()
+  placeholder?: string;
+}
+
+export default FormFieldModel;

package/src/schemas/FormSelectSchema.ts

@@ -0,0 +1,108 @@
+/**
+ * Schema for FormSelect component - Themed dropdown select input
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsBoolean, IsIn, IsOptional, IsString } from 'class-validator';
+import 'reflect-metadata';
+import { Editor, Field, Schema, FieldType } from '@qwickapps/schema';
+import ViewSchema from './ViewSchema';
+
+@Schema('FormSelect', '1.0.0')
+export class FormSelectModel extends ViewSchema {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Label',
+    description: 'Label text for the select field',
+    placeholder: 'Enter label...'
+  })
+  @IsOptional()
+  @IsString()
+  label?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Value',
+    description: 'Current selected value',
+    placeholder: ''
+  })
+  @IsString()
+  value!: string | number;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Options',
+    description: 'Select options as JSON array: [{"value": "1", "label": "Option 1"}]',
+    placeholder: '[{"value": "1", "label": "Option 1"}]'
+  })
+  @IsString()
+  options!: string; // JSON string of FormSelectOption[]
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Helper Text',
+    description: 'Helper text displayed below the select',
+    placeholder: 'Enter helper text...'
+  })
+  @IsOptional()
+  @IsString()
+  helperText?: string;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Required',
+    description: 'Mark field as required'
+  })
+  @IsOptional()
+  @IsBoolean()
+  required?: boolean;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Disabled',
+    description: 'Disable the select field'
+  })
+  @IsOptional()
+  @IsBoolean()
+  disabled?: boolean;
+
+  @Field({ defaultValue: true })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Full Width',
+    description: 'Make select take full width of container'
+  })
+  @IsOptional()
+  @IsBoolean()
+  fullWidth?: boolean;
+
+  @Field({ defaultValue: 'small' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Size',
+    description: 'Size variant of the select field'
+  })
+  @IsOptional()
+  @IsIn(['small', 'medium'])
+  size?: 'small' | 'medium';
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Placeholder',
+    description: 'Placeholder text when no value is selected',
+    placeholder: 'Select an option...'
+  })
+  @IsOptional()
+  @IsString()
+  placeholder?: string;
+}
+
+export default FormSelectModel;

package/src/schemas/ImageGallerySchema.ts

@@ -0,0 +1,148 @@
+/**
+ * Schema for ImageGallery component - Image gallery with multiple view variants
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsBoolean, IsOptional, IsString, IsNumber, IsIn, IsArray, ValidateNested } from 'class-validator';
+import { Type } from 'class-transformer';
+import 'reflect-metadata';
+import { Editor, Field, Schema, FieldType, DataType } from '@qwickapps/schema';
+import { ViewSchema } from './ViewSchema';
+
+// Product image interface
+export class GalleryImageModel {
+  @Field({ dataType: DataType.STRING })
+  @IsString()
+  url!: string;
+
+  @Field({ dataType: DataType.STRING })
+  @IsString()
+  alt!: string;
+
+  @Field({ dataType: DataType.STRING })
+  @IsOptional()
+  @IsString()
+  thumbnail?: string;
+}
+
+// Gallery variants
+export type GalleryVariant = 'thumbnails' | 'carousel' | 'grid';
+
+// Thumbnail positions
+export type ThumbnailPosition = 'left' | 'bottom' | 'right';
+
+@Schema('ImageGallery', '1.0.0')
+export class ImageGalleryModel extends ViewSchema {
+  @Field({ dataType: DataType.ARRAY })
+  @Editor({
+    field_type: FieldType.ARRAY,
+    label: 'Product Images',
+    description: 'Array of product images to display in the gallery',
+  })
+  @IsArray()
+  @ValidateNested({ each: true })
+  @Type(() => GalleryImageModel)
+  images!: GalleryImageModel[];
+
+  @Field({ dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Product Name',
+    description: 'Product name for accessibility',
+    placeholder: 'Premium Cotton T-Shirt'
+  })
+  @IsString()
+  productName!: string;
+
+  @Field({ defaultValue: 'thumbnails', dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Gallery Variant',
+    description: 'Display variant for the gallery',
+    validation: {
+      options: [
+        { label: 'Thumbnails', value: 'thumbnails' },
+        { label: 'Carousel', value: 'carousel' },
+        { label: 'Grid', value: 'grid' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsString()
+  @IsIn(['thumbnails', 'carousel', 'grid'])
+  variant?: GalleryVariant;
+
+  @Field({ defaultValue: 'left', dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Thumbnail Position',
+    description: 'Position of thumbnails (only for thumbnails variant)',
+    validation: {
+      options: [
+        { label: 'Left', value: 'left' },
+        { label: 'Bottom', value: 'bottom' },
+        { label: 'Right', value: 'right' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsString()
+  @IsIn(['left', 'bottom', 'right'])
+  thumbnailPosition?: ThumbnailPosition;
+
+  @Field({ defaultValue: '1', dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Aspect Ratio',
+    description: 'Aspect ratio for main image (e.g., "1", "4/3", "16/9")',
+    placeholder: '1'
+  })
+  @IsOptional()
+  @IsString()
+  aspectRatio?: string;
+
+  @Field({ defaultValue: true, dataType: DataType.BOOLEAN })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Show Zoom',
+    description: 'Enable zoom functionality for images'
+  })
+  @IsOptional()
+  @IsBoolean()
+  showZoom?: boolean;
+
+  @Field({ dataType: DataType.NUMBER })
+  @Editor({
+    field_type: FieldType.NUMBER,
+    label: 'Max Images',
+    description: 'Maximum number of images to display (leave empty for all)',
+    placeholder: '8'
+  })
+  @IsOptional()
+  @IsNumber()
+  maxImages?: number;
+
+  @Field({ dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Data Source',
+    description: 'Data source for dynamic image loading',
+    placeholder: 'product-images'
+  })
+  @IsOptional()
+  @IsString()
+  dataSource?: string;
+
+  @Field({ dataType: DataType.OBJECT })
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Binding Options',
+    description: 'Data binding configuration (JSON format)',
+    placeholder: '{ "filter": {}, "sort": {} }'
+  })
+  @IsOptional()
+  bindingOptions?: Record<string, unknown>;
+}
+
+export default ImageGalleryModel;

package/src/schemas/OptionSelectorSchema.ts

@@ -0,0 +1,216 @@
+/**
+ * Schema for OptionSelector component - Universal option selection with visual modes
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsBoolean, IsOptional, IsString, IsNumber, IsIn, IsArray, ValidateNested } from 'class-validator';
+import { Type } from 'class-transformer';
+import 'reflect-metadata';
+import { Editor, Field, Schema, FieldType, DataType } from '@qwickapps/schema';
+import { ViewSchema } from './ViewSchema';
+
+// Select option model
+export class SelectOptionModel {
+  @Field({ dataType: DataType.STRING })
+  @IsString()
+  id!: string;
+
+  @Field({ dataType: DataType.STRING })
+  @IsString()
+  label!: string;
+
+  @Field({ dataType: DataType.BOOLEAN })
+  @IsBoolean()
+  available!: boolean;
+
+  @Field({ dataType: DataType.NUMBER })
+  @IsOptional()
+  @IsNumber()
+  price?: number;
+
+  @Field({ dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Hex Color Value',
+    description: 'Hex color code for color swatches (e.g., #FF0000)',
+    placeholder: '#FF0000'
+  })
+  @IsOptional()
+  @IsString()
+  hexValue?: string;
+
+  @Field({ dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Image URL',
+    description: 'Image URL for image/pattern display mode',
+    placeholder: '/patterns/stripes.jpg'
+  })
+  @IsOptional()
+  @IsString()
+  imageUrl?: string;
+}
+
+// Display modes
+export type DisplayMode = 'text' | 'color' | 'image';
+
+// Display variants
+export type OptionVariant = 'buttons' | 'dropdown' | 'grid';
+
+// Layout options
+export type OptionLayout = 'horizontal' | 'vertical' | 'wrap';
+
+// Visual sizes
+export type VisualSize = 'small' | 'medium' | 'large';
+
+@Schema('OptionSelector', '1.0.0')
+export class OptionSelectorModel extends ViewSchema {
+  @Field({ dataType: DataType.ARRAY })
+  @Editor({
+    field_type: FieldType.ARRAY,
+    label: 'Available Options',
+    description: 'Array of options to display',
+  })
+  @IsArray()
+  @ValidateNested({ each: true })
+  @Type(() => SelectOptionModel)
+  options!: SelectOptionModel[];
+
+  @Field({ dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Selected Option',
+    description: 'Currently selected option ID',
+    placeholder: 'm'
+  })
+  @IsOptional()
+  @IsString()
+  selectedOption?: string;
+
+  @Field({ defaultValue: 'text', dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Display Mode',
+    description: 'Visual display mode for options',
+    validation: {
+      options: [
+        { label: 'Text (buttons with labels)', value: 'text' },
+        { label: 'Color (swatches)', value: 'color' },
+        { label: 'Image (patterns/textures)', value: 'image' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsString()
+  @IsIn(['text', 'color', 'image'])
+  displayMode?: DisplayMode;
+
+  @Field({ defaultValue: 'grid', dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Display Variant',
+    description: 'How to display the selector',
+    validation: {
+      options: [
+        { label: 'Buttons', value: 'buttons' },
+        { label: 'Dropdown', value: 'dropdown' },
+        { label: 'Grid', value: 'grid' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsString()
+  @IsIn(['buttons', 'dropdown', 'grid'])
+  variant?: OptionVariant;
+
+  @Field({ defaultValue: 'wrap', dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Layout Direction',
+    description: 'Layout direction for buttons/grid variant',
+    validation: {
+      options: [
+        { label: 'Horizontal', value: 'horizontal' },
+        { label: 'Vertical', value: 'vertical' },
+        { label: 'Wrap', value: 'wrap' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsString()
+  @IsIn(['horizontal', 'vertical', 'wrap'])
+  layout?: OptionLayout;
+
+  @Field({ defaultValue: 'medium', dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Visual Size',
+    description: 'Size for color/image display modes',
+    validation: {
+      options: [
+        { label: 'Small (32px)', value: 'small' },
+        { label: 'Medium (44px)', value: 'medium' },
+        { label: 'Large (56px)', value: 'large' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsString()
+  @IsIn(['small', 'medium', 'large'])
+  visualSize?: VisualSize;
+
+  @Field({ defaultValue: false, dataType: DataType.BOOLEAN })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Show Label',
+    description: 'Show label below visual (for color/image modes)'
+  })
+  @IsOptional()
+  @IsBoolean()
+  showLabel?: boolean;
+
+  @Field({ defaultValue: false, dataType: DataType.BOOLEAN })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Disabled',
+    description: 'Disable all option selections'
+  })
+  @IsOptional()
+  @IsBoolean()
+  disabled?: boolean;
+
+  @Field({ defaultValue: 'Select Option', dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Label',
+    description: 'Label text for the selector',
+    placeholder: 'Select Option'
+  })
+  @IsOptional()
+  @IsString()
+  label?: string;
+
+  @Field({ dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Data Source',
+    description: 'Data source for dynamic option loading',
+    placeholder: 'product-options'
+  })
+  @IsOptional()
+  @IsString()
+  dataSource?: string;
+
+  @Field({ dataType: DataType.OBJECT })
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Binding Options',
+    description: 'Data binding configuration (JSON format)',
+    placeholder: '{ "filter": {}, "sort": {} }'
+  })
+  @IsOptional()
+  bindingOptions?: Record<string, unknown>;
+}
+
+export default OptionSelectorModel;

package/src/schemas/index.ts

@@ -28,6 +28,10 @@ export * from './FeatureGridSchema';
 export * from './FeatureItemSchema';
 export * from './FooterItemSchema';
 export * from './FormBlockSchema';
+export * from './FormSelectSchema';
+export * from './FormFieldSchema';
+export * from './FormCheckboxSchema';
+export * from './CaptchaSchema';
 export * from './FooterSchema';
 export * from './FooterSectionSchema';
 export * from './GridCellSchema';
@@ -41,6 +45,8 @@ export * from './MetadataItemSchema';
 export * from './PageBannerHeaderSchema';
 export * from './PaletteSwitcherSchema';
 export * from './ProductCardSchema';
+export * from './ImageGallerySchema';
+export * from './OptionSelectorSchema';
 export * from './SafeSpanSchema';
 export * from './SectionSchema';
 export * from './TextInputFieldSchema';