@qwickapps/react-framework 1.3.4 → 1.4.0

package/src/schemas/PageTemplateSchema.ts

@@ -0,0 +1,186 @@
+/**
+ * PageTemplate Schema - Complete page template configuration
+ * 
+ * Extends ViewModel to provide comprehensive page-level configuration
+ * including metadata, print settings, and content structure.
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsOptional, IsString, ValidateNested } from 'class-validator';
+import { Type } from 'class-transformer';
+import 'reflect-metadata';
+import { Editor, Field, FieldType, Model, Schema, DataType } from '@qwickapps/schema';
+import { ViewModelSchema } from './ViewModelSchema';
+import { PrintConfigSchema } from './PrintConfigSchema';
+
+@Schema('PageTemplate', '1.0.0')
+export class PageTemplateSchema extends ViewModelSchema {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Page Slug',
+    description: 'URL-friendly page identifier (e.g., "about-us")',
+    placeholder: 'page-slug'
+  })
+  @IsOptional()
+  @IsString()
+  slug?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Page Name',
+    description: 'Human-readable page name',
+    placeholder: 'About Us'
+  })
+  @IsOptional()
+  @IsString()
+  name?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Page Description',
+    description: 'Description of the page content (used for SEO)',
+    placeholder: 'Brief description of this page...'
+  })
+  @IsOptional()
+  @IsString()
+  description?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Page Title',
+    description: 'HTML title tag content (defaults to name if not provided)',
+    placeholder: 'Page Title | Site Name'
+  })
+  @IsOptional()
+  @IsString()
+  title?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Meta Keywords',
+    description: 'SEO keywords (comma-separated)',
+    placeholder: 'keyword1, keyword2, keyword3'
+  })
+  @IsOptional()
+  @IsString()
+  metaKeywords?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Meta Author',
+    description: 'Page author information',
+    placeholder: 'Author Name'
+  })
+  @IsOptional()
+  @IsString()
+  metaAuthor?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.URL,
+    label: 'Canonical URL',
+    description: 'Canonical URL for SEO (optional)',
+    placeholder: 'https://example.com/page'
+  })
+  @IsOptional()
+  @IsString()
+  canonicalUrl?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'Page Content',
+    description: 'Main page content - can include React components and HTML'
+  })
+  @IsOptional()
+  children?: React.ReactNode | string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.FORM,
+    label: 'Print Configuration',
+    description: 'Configuration for print mode behavior'
+  })
+  @IsOptional()
+  @ValidateNested()
+  @Type(() => PrintConfigSchema)
+  printConfig?: PrintConfigSchema;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Layout Template',
+    description: 'Layout template identifier to use for this page',
+    placeholder: 'default, fullwidth, sidebar, etc.'
+  })
+  @IsOptional()
+  @IsString()
+  layout?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Page Icon',
+    description: 'Icon identifier for page (used in navigation)',
+    placeholder: 'home, about, contact'
+  })
+  @IsOptional()
+  @IsString()
+  icon?: string;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Requires Authentication',
+    description: 'Whether this page requires user authentication'
+  })
+  @IsOptional()
+  requiresAuth?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Required Roles',
+    description: 'Comma-separated list of roles required to access this page',
+    placeholder: 'admin, user, moderator'
+  })
+  @IsOptional()
+  @IsString()
+  requiredRoles?: string;
+
+  @Field({ defaultValue: true })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Show in Navigation',
+    description: 'Whether to include this page in navigation menus'
+  })
+  @IsOptional()
+  showInNavigation?: boolean;
+
+  @Field({ defaultValue: 0 })
+  @Editor({
+    field_type: FieldType.NUMBER,
+    label: 'Navigation Priority',
+    description: 'Priority in navigation (lower numbers appear first)'
+  })
+  @IsOptional()
+  navigationPriority?: number;
+
+  @Field({ defaultValue: true })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Indexable',
+    description: 'Whether search engines should index this page'
+  })
+  @IsOptional()
+  indexable?: boolean;
+}
+
+export default PageTemplateSchema;

package/src/schemas/PrintConfigSchema.ts

@@ -0,0 +1,207 @@
+/**
+ * PrintConfig Schema - Configuration for print mode rendering
+ * 
+ * Defines how components should behave and appear when printed,
+ * including theme settings and layout modifications for print media.
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsOptional, IsString, IsBoolean, IsIn } from 'class-validator';
+import 'reflect-metadata';
+import { Editor, Field, FieldType, Model, Schema } from '@qwickapps/schema';
+import { ReactNode } from 'react';
+
+@Schema('PrintConfig', '1.0.0')
+export class PrintConfigSchema extends Model {
+  @Field({ defaultValue: 'light' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Print Theme',
+    description: 'Theme mode to use when printing',
+    validation: {
+      options: [
+        { label: 'Light', value: 'light' },
+        { label: 'Dark', value: 'dark' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['light', 'dark'])
+  theme?: 'light' | 'dark';
+
+  @Field({ defaultValue: 'default' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Print Palette',
+    description: 'Color palette to use for print output',
+    validation: {
+      options: [
+        { label: 'Default', value: 'default' },
+        { label: 'Autumn', value: 'autumn' },
+        { label: 'Cosmic', value: 'cosmic' },
+        { label: 'Ocean', value: 'ocean' },
+        { label: 'Spring', value: 'spring' },
+        { label: 'Winter', value: 'winter' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsString()
+  palette?: string;
+
+  @Field({ defaultValue: true })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Hide Scaffolding',
+    description: 'Hide app scaffolding (navigation, headers) when printing'
+  })
+  @IsOptional()
+  @IsBoolean()
+  hideScaffolding?: boolean;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Hide Interactive Elements',
+    description: 'Hide buttons and interactive elements when printing'
+  })
+  @IsOptional()
+  @IsBoolean()
+  hideInteractiveElements?: boolean;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Optimize For Monochrome',
+    description: 'Optimize design for black and white printing'
+  })
+  @IsOptional()
+  @IsBoolean()
+  optimizeForMonochrome?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Print Title',
+    description: 'Custom title to show when printing (optional)',
+    placeholder: 'Document Title'
+  })
+  @IsOptional()
+  @IsString()
+  printTitle?: string;
+
+  @Field({ defaultValue: true })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Show Print Date',
+    description: 'Include print date and time in printed output'
+  })
+  @IsOptional()
+  @IsBoolean()
+  showPrintDate?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Print Header',
+    description: 'Custom header content for printed pages (HTML string or React component)',
+    placeholder: '<div>Custom header content...</div>'
+  })
+  @IsOptional()
+  printHeader?: string | ReactNode;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Print Header (First Page)',
+    description: 'Different header for the first page only (overrides main header on page 1)',
+    placeholder: '<div>First page header...</div>'
+  })
+  @IsOptional()
+  printHeaderFirstPage?: string | ReactNode;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Print Footer',
+    description: 'Custom footer content for printed pages (HTML string or React component)',
+    placeholder: '<div>Custom footer content...</div>'
+  })
+  @IsOptional()
+  printFooter?: string | ReactNode;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Print Footer (First Page)',
+    description: 'Different footer for the first page only (overrides main footer on page 1)',
+    placeholder: '<div>First page footer...</div>'
+  })
+  @IsOptional()
+  printFooterFirstPage?: string | ReactNode;
+
+  @Field({ defaultValue: '12mm' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Page Margins',
+    description: 'Print page margins',
+    validation: {
+      options: [
+        { label: 'Compact (6mm)', value: '6mm' },
+        { label: 'Standard (12mm)', value: '12mm' },
+        { label: 'Large (20mm)', value: '20mm' },
+        { label: 'Formal (25mm)', value: '25mm' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsString()
+  pageMargins?: string;
+
+  @Field({ defaultValue: '60px' })
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Print Header Height',
+    description: 'Height allocated for print header (CSS units: px, mm, etc.)',
+    placeholder: '60px'
+  })
+  @IsOptional()
+  @IsString()
+  printHeaderHeight?: string;
+
+  @Field({ defaultValue: '40px' })
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Print Footer Height',
+    description: 'Height allocated for print footer (CSS units: px, mm, etc.)',
+    placeholder: '40px'
+  })
+  @IsOptional()
+  @IsString()
+  printFooterHeight?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Print Background',
+    description: 'CSS background for all printed pages (color, gradient, or image)',
+    placeholder: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)'
+  })
+  @IsOptional()
+  @IsString()
+  printBackground?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Print Background (First Page)',
+    description: 'Different background for the first page only',
+    placeholder: 'url(/logo-watermark.png) no-repeat center, #ffffff'
+  })
+  @IsOptional()
+  @IsString()
+  printBackgroundFirstPage?: string;
+}
+
+export default PrintConfigSchema;