@qwickapps/react-framework 1.3.5 → 1.4.0

package/src/schemas/GridLayoutSchema.ts

@@ -0,0 +1,133 @@
+/**
+ * Schema for GridLayout component - Flexible grid layout
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import type { ReactNode } from 'react';
+import { IsBoolean, IsOptional, IsString, IsNumber, IsIn } from 'class-validator';
+import 'reflect-metadata';
+import { Editor, Field, Schema, Model, FieldType } from '@qwickapps/schema';
+
+@Schema('GridLayout', '1.0.0')
+export class GridLayoutModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Children',
+    description: 'Child components to arrange in grid layout',
+    placeholder: 'Nested components will be serialized automatically'
+  })
+  children?: ReactNode; // Runtime type: supports natural React usage
+
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Columns',
+    description: 'Number of equal-width columns for auto-distribution'
+  })
+  @IsOptional()
+  @IsNumber()
+  @IsIn([1, 2, 3, 4, 5, 6])
+  columns?: 1 | 2 | 3 | 4 | 5 | 6;
+
+  @Field({ defaultValue: 'small' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Spacing',
+    description: 'Spacing between grid items'
+  })
+  @IsOptional()
+  @IsString()
+  @IsIn(['tiny', 'small', 'medium', 'large', 'huge'])
+  spacing?: string;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Equal Height',
+    description: 'Make all grid items the same height'
+  })
+  @IsOptional()
+  @IsBoolean()
+  equalHeight?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Height',
+    description: 'Grid container height (e.g., "400px", "50vh", "medium")',
+    placeholder: 'auto'
+  })
+  @IsOptional()
+  @IsString()
+  height?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Width',
+    description: 'Grid container width (e.g., "100%", "800px", "large")',
+    placeholder: '100%'
+  })
+  @IsOptional()
+  @IsString()
+  width?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Min Height',
+    description: 'Minimum grid container height',
+    placeholder: 'auto'
+  })
+  @IsOptional()
+  @IsString()
+  minHeight?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Min Width',
+    description: 'Minimum grid container width',
+    placeholder: 'auto'
+  })
+  @IsOptional()
+  @IsString()
+  minWidth?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Max Height',
+    description: 'Maximum grid container height',
+    placeholder: 'none'
+  })
+  @IsOptional()
+  @IsString()
+  maxHeight?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Max Width',
+    description: 'Maximum grid container width',
+    placeholder: 'none'
+  })
+  @IsOptional()
+  @IsString()
+  maxWidth?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'CSS Class',
+    description: 'Additional CSS class names',
+    placeholder: 'custom-grid-class'
+  })
+  @IsOptional()
+  @IsString()
+  className?: string;
+}
+
+export default GridLayoutModel;

package/src/schemas/HtmlSchema.ts

@@ -0,0 +1,47 @@
+/**
+ * Schema for Html component - Transforms HTML strings into Framework components
+ * 
+ * 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('Html', '1.0.0')
+export class HtmlModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'HTML Content',
+    description: 'HTML content to be transformed into React components',
+    placeholder: '<p>Enter HTML content...</p>'
+  })
+  @IsOptional()
+  @IsString()
+  children?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.CHECKBOX,
+    label: 'Strip Headers',
+    description: 'Whether to remove header elements (h1-h6) from the HTML'
+  })
+  @IsOptional()
+  @IsBoolean()
+  stripHeaders?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Placeholder',
+    description: 'Fallback content to display when HTML is empty',
+    placeholder: 'No content available'
+  })
+  @IsOptional()
+  @IsString()
+  placeholder?: string;
+
+}
+
+export default HtmlModel;

package/src/schemas/ImageSchema.ts

@@ -0,0 +1,235 @@
+/**
+ * Schema for Image component - Comprehensive image display component
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import type { ReactNode } from 'react';
+import { IsBoolean, IsOptional, IsString, IsNumber, IsIn } from 'class-validator';
+import 'reflect-metadata';
+import { Editor, Field, Schema, Model, FieldType, DataType } from '@qwickapps/schema';
+
+// Image fit modes - how the image should be resized to fit the container
+export type ImageFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+
+// Image loading states
+export type ImageLoading = 'lazy' | 'eager';
+
+// Image position for background-position style
+export type ImagePosition = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+@Schema('Image', '1.0.0')
+export class ImageModel extends Model {
+  @Field({ dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.IMAGE,
+    label: 'Image Source',
+    description: 'Image source URL or path',
+    placeholder: 'https://example.com/image.jpg'
+  })
+  @IsOptional()
+  @IsString()
+  src?: string;
+
+  @Field({ dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Alt Text',
+    description: 'Alternative text for accessibility (required for images with src)',
+    placeholder: 'Describe the image for screen readers'
+  })
+  @IsOptional()
+  @IsString()
+  alt?: string;
+
+  @Field({ dataType: DataType.NUMBER })
+  @Editor({
+    field_type: FieldType.NUMBER,
+    label: 'Width',
+    description: 'Image width in pixels (optional)',
+    placeholder: '300'
+  })
+  @IsOptional()
+  @IsNumber()
+  width?: number;
+
+  @Field({ dataType: DataType.NUMBER })
+  @Editor({
+    field_type: FieldType.NUMBER,
+    label: 'Height',
+    description: 'Image height in pixels (optional)',
+    placeholder: '200'
+  })
+  @IsOptional()
+  @IsNumber()
+  height?: number;
+
+  @Field({ defaultValue: 'cover', dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Object Fit',
+    description: 'How the image should be resized to fit its container',
+    validation: {
+      options: [
+        { label: 'Fill', value: 'fill' },
+        { label: 'Contain', value: 'contain' },
+        { label: 'Cover', value: 'cover' },
+        { label: 'None', value: 'none' },
+        { label: 'Scale Down', value: 'scale-down' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsString()
+  @IsIn(['fill', 'contain', 'cover', 'none', 'scale-down'])
+  objectFit?: ImageFit;
+
+  @Field({ defaultValue: 'center', dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Object Position',
+    description: 'Position of the image within its container',
+    validation: {
+      options: [
+        { label: 'Center', value: 'center' },
+        { label: 'Top', value: 'top' },
+        { label: 'Bottom', value: 'bottom' },
+        { label: 'Left', value: 'left' },
+        { label: 'Right', value: 'right' },
+        { label: 'Top Left', value: 'top-left' },
+        { label: 'Top Right', value: 'top-right' },
+        { label: 'Bottom Left', value: 'bottom-left' },
+        { label: 'Bottom Right', value: 'bottom-right' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsString()
+  @IsIn(['center', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'])
+  objectPosition?: ImagePosition;
+
+  @Field({ defaultValue: 'lazy', dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Loading',
+    description: 'Image loading behavior',
+    validation: {
+      options: [
+        { label: 'Lazy (load when visible)', value: 'lazy' },
+        { label: 'Eager (load immediately)', value: 'eager' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsString()
+  @IsIn(['lazy', 'eager'])
+  loading?: ImageLoading;
+
+  @Field({ dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Title',
+    description: 'Image title (tooltip text)',
+    placeholder: 'Tooltip text on hover'
+  })
+  @IsOptional()
+  @IsString()
+  title?: string;
+
+  @Field({ defaultValue: false, dataType: DataType.BOOLEAN })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Draggable',
+    description: 'Allow the image to be dragged'
+  })
+  @IsOptional()
+  @IsBoolean()
+  draggable?: boolean;
+
+  @Field({ dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Border Radius',
+    description: 'CSS border radius (e.g., "8px", "50%", "1rem")',
+    placeholder: '8px'
+  })
+  @IsOptional()
+  @IsString()
+  borderRadius?: string;
+
+  @Field({ defaultValue: false, dataType: DataType.BOOLEAN })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Show Loading State',
+    description: 'Display a loading placeholder while the image loads'
+  })
+  @IsOptional()
+  @IsBoolean()
+  showLoading?: boolean;
+
+  @Field({ defaultValue: false, dataType: DataType.BOOLEAN })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Show Error State',
+    description: 'Display an error message if the image fails to load'
+  })
+  @IsOptional()
+  @IsBoolean()
+  showError?: boolean;
+
+  @Field({ dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Fallback Image',
+    description: 'Fallback image URL to use if the main image fails to load',
+    placeholder: 'https://example.com/fallback.jpg'
+  })
+  @IsOptional()
+  @IsString()
+  fallbackSrc?: string;
+
+  @Field({ dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Responsive Sizes',
+    description: 'Responsive image sizes attribute for optimized loading',
+    placeholder: '(max-width: 768px) 100vw, 50vw'
+  })
+  @IsOptional()
+  @IsString()
+  sizes?: string;
+
+  @Field({ dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Source Set',
+    description: 'Source set for responsive images (comma-separated)',
+    placeholder: 'image-320w.jpg 320w, image-640w.jpg 640w, image-1280w.jpg 1280w'
+  })
+  @IsOptional()
+  @IsString()
+  srcSet?: string;
+
+  // Support for placeholder content (React node)
+  @Field({ dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Loading Placeholder',
+    description: 'Custom loading placeholder content (for advanced use)',
+    placeholder: 'Custom loading content...'
+  })
+  @IsOptional()
+  loadingPlaceholder?: ReactNode;
+
+  @Field({ dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Error Placeholder',
+    description: 'Custom error placeholder content (for advanced use)',
+    placeholder: 'Custom error content...'
+  })
+  @IsOptional()
+  errorPlaceholder?: ReactNode;
+}
+
+export default ImageModel;

package/src/schemas/LogoSchema.ts

@@ -0,0 +1,241 @@
+/**
+ * Schema for Logo component - Dynamic theme-aware logo
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { DataType, Editor, Field, FieldType, Model, Schema } from '@qwickapps/schema';
+import { IsIn, IsNumber, IsOptional, IsString } from 'class-validator';
+import { ReactNode } from 'react';
+import 'reflect-metadata';
+
+// Logo visual variants
+export type LogoVariant = 'default' | 'high-contrast' | 'monochrome' | 'on-primary';
+
+// Logo size options
+export type LogoSize = 'tiny' | 'small' | 'medium' | 'large' | 'extra-large';
+
+// Badge shape options
+export type LogoBadgeShape = 'circle' | 'star' | 'square' | 'heart';
+
+// Position type for badges and images (updated naming)
+export type PositionType = 
+  | 'none'
+  | 'top-left' 
+  | 'top-center' 
+  | 'top-right' 
+  | 'start'  // was 'center-left'
+  | 'center' 
+  | 'end'    // was 'center-right'
+  | 'bottom-left' 
+  | 'bottom-center' 
+  | 'bottom-right';
+
+// Badge offset interface
+export interface BadgeOffset {
+  /** Horizontal offset from the calculated position (positive = right, negative = left) */
+  x?: number;
+  /** Vertical offset from the calculated position (positive = down, negative = up) */
+  y?: number;
+}
+
+@Schema('Logo', '1.0.0')
+export class LogoModel extends Model {
+  @Field({ defaultValue: 'Qwick Apps', dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Logo Name/Text',
+    description: 'Logo name/text to display. Supports up to TWO parts with \\n for line breaks and \\s for explicit spaces.',
+    placeholder: 'Enter logo text (e.g., "Qwick Apps", "Qwick\\nApps")'
+  })
+  @IsOptional()
+  @IsString()
+  name?: string;
+
+  @Field({ defaultValue: 'default', dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Visual Variant',
+    description: 'Visual style variant of the logo',
+    validation: {
+      options: [
+        { label: 'Default', value: 'default' },
+        { label: 'High Contrast', value: 'high-contrast' },
+        { label: 'Monochrome', value: 'monochrome' },
+        { label: 'On Primary Background', value: 'on-primary' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsString()
+  @IsIn(['default', 'high-contrast', 'monochrome', 'on-primary'])
+  variant?: LogoVariant;
+
+  @Field({ defaultValue: 'medium', dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Size',
+    description: 'Size variant of the logo (controls both text size and visual height)',
+    validation: {
+      options: [
+        { label: 'Tiny (16px)', value: 'tiny' },
+        { label: 'Small (20px)', value: 'small' },
+        { label: 'Medium (28px)', value: 'medium' },
+        { label: 'Large (36px)', value: 'large' },
+        { label: 'Extra Large (48px)', value: 'extra-large' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsString()
+  @IsIn(['tiny', 'small', 'medium', 'large', 'extra-large'])
+  size?: LogoSize;
+
+  @Field({ defaultValue: 'top-right', dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Badge Position',
+    description: 'Badge position and visibility. "none" hides the badge, others show it at the specified position.',
+    validation: {
+      options: [
+        { label: 'None (Hidden)', value: 'none' },
+        { label: 'Top Left', value: 'top-left' },
+        { label: 'Top Center', value: 'top-center' },
+        { label: 'Top Right', value: 'top-right' },
+        { label: 'Start (Left Center)', value: 'start' },
+        { label: 'Center', value: 'center' },
+        { label: 'End (Right Center)', value: 'end' },
+        { label: 'Bottom Left', value: 'bottom-left' },
+        { label: 'Bottom Center', value: 'bottom-center' },
+        { label: 'Bottom Right', value: 'bottom-right' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsString()
+  @IsIn(['none', 'top-left', 'top-center', 'top-right', 'start', 'center', 'end', 'bottom-left', 'bottom-center', 'bottom-right'])
+  badge?: PositionType;
+
+  @Field({ defaultValue: 'circle', dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Badge Shape',
+    description: 'Shape of the badge when visible',
+    validation: {
+      options: [
+        { label: 'Circle', value: 'circle' },
+        { label: 'Star', value: 'star' },
+        { label: 'Square', value: 'square' },
+        { label: 'Heart', value: 'heart' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsString()
+  @IsIn(['circle', 'star', 'square', 'heart'])
+  badgeShape?: LogoBadgeShape;
+
+  @Field({ dataType: DataType.NUMBER })
+  @Editor({
+    field_type: FieldType.NUMBER,
+    label: 'Badge Offset X',
+    description: 'Horizontal offset from calculated badge position (positive = right, negative = left)',
+    placeholder: '0'
+  })
+  @IsOptional()
+  @IsNumber()
+  badgeOffsetX?: number;
+
+  @Field({ dataType: DataType.NUMBER })
+  @Editor({
+    field_type: FieldType.NUMBER,
+    label: 'Badge Offset Y',
+    description: 'Vertical offset from calculated badge position (positive = down, negative = up)',
+    placeholder: '0'
+  })
+  @IsOptional()
+  @IsNumber()
+  badgeOffsetY?: number;
+
+  @Field({ defaultValue: 'Segoe UI, sans-serif', dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Font Family',
+    description: 'Font family for the logo text',
+    placeholder: 'Segoe UI, sans-serif'
+  })
+  @IsOptional()
+  @IsString()
+  fontFamily?: string;
+
+  @Field({ defaultValue: 'bold', dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Font Weight',
+    description: 'Font weight for the logo text',
+    placeholder: 'bold'
+  })
+  @IsOptional()
+  @IsString()
+  fontWeight?: string;
+
+  @Field({ defaultValue: 'logo-first-part', dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'First Part CSS Class',
+    description: 'CSS class name for the first part of the logo text',
+    placeholder: 'logo-first-part'
+  })
+  @IsOptional()
+  @IsString()
+  firstPartClass?: string;
+
+  @Field({ defaultValue: 'logo-second-part', dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Second Part CSS Class',
+    description: 'CSS class name for the second part of the logo text',
+    placeholder: 'logo-second-part'
+  })
+  @IsOptional()
+  @IsString()
+  secondPartClass?: string;
+
+  // New image support properties
+  @Field({ dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.IMAGE,
+    label: 'Logo Image',
+    description: 'Optional image to display alongside the logo text (ReactNode or image path)',
+    placeholder: 'Image path or React component'
+  })
+  @IsOptional()
+  image?: ReactNode | string;
+
+  @Field({ defaultValue: 'start', dataType: DataType.STRING })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Image Position',
+    description: 'Position of the image relative to the logo text',
+    validation: {
+      options: [
+        { label: 'None (Hidden)', value: 'none' },
+        { label: 'Top Left', value: 'top-left' },
+        { label: 'Top Center', value: 'top-center' },
+        { label: 'Top Right', value: 'top-right' },
+        { label: 'Start (Left)', value: 'start' },
+        { label: 'Center', value: 'center' },
+        { label: 'End (Right)', value: 'end' },
+        { label: 'Bottom Left', value: 'bottom-left' },
+        { label: 'Bottom Center', value: 'bottom-center' },
+        { label: 'Bottom Right', value: 'bottom-right' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsString()
+  @IsIn(['none', 'top-left', 'top-center', 'top-right', 'start', 'center', 'end', 'bottom-left', 'bottom-center', 'bottom-right'])
+  imagePosition?: PositionType;
+}
+
+export default LogoModel;

package/src/schemas/MarkdownSchema.ts

@@ -0,0 +1,47 @@
+/**
+ * Schema for Markdown component - Transforms Markdown strings into Framework components
+ * 
+ * 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('Markdown', '1.0.0')
+export class MarkdownModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Markdown Content',
+    description: 'Markdown content to be transformed into React components',
+    placeholder: '# Enter Markdown content...\n\n**Bold text** and *italic text*.'
+  })
+  @IsOptional()
+  @IsString()
+  children?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.CHECKBOX,
+    label: 'Sanitize HTML',
+    description: 'Whether to sanitize HTML output for security'
+  })
+  @IsOptional()
+  @IsBoolean()
+  sanitize?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Placeholder',
+    description: 'Fallback content to display when Markdown is empty',
+    placeholder: 'No content available'
+  })
+  @IsOptional()
+  @IsString()
+  placeholder?: string;
+
+}
+
+export default MarkdownModel;