@qwickapps/react-framework 1.3.0

package/src/palettes/PaletteSpring.css

@@ -0,0 +1,160 @@
+/**
+ * Spring Color Palette
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ * 
+ * Fresh greens, soft pinks, and bright yellows - inspired by spring blooms
+ */
+
+/* ===== SPRING PALETTE - LIGHT THEME ===== */
+html[data-palette="spring"]:not([data-theme="dark"]), 
+html[data-palette="spring"][data-theme="light"] {
+  /* Primary palette - Fresh green */
+  --palette-primary-main: #16a34a;
+  --palette-primary-light: #4ade80;
+  --palette-primary-dark: #15803d;
+  --palette-on-primary: #ffffff;
+
+  /* Secondary palette - Blossom pink */
+  --palette-secondary-main: #ec4899;
+  --palette-secondary-light: #f472b6;
+  --palette-secondary-dark: #be185d;
+  --palette-on-secondary: #ffffff;
+
+  /* Surface palette - Soft white */
+  --palette-surface-main: #f7fee7;
+  --palette-surface-variant: #d9f7be; /* Improved contrast with subtle green tint */
+  --palette-surface-elevated: #ffffff;
+  --palette-on-surface: #14532d;
+
+  /* Background palette - Morning dew */
+  --palette-background-main: #f0fdf4;
+  --palette-background-dark: #dcfce7;
+  --palette-background-overlay: rgba(240, 253, 244, 0.95);
+  --palette-on-background: #166534;
+
+  /* Text palette - Deep forest */
+  --palette-text-primary: #14532d;
+  --palette-text-secondary: #166534;
+  --palette-text-disabled: rgba(20, 83, 45, 0.38);
+  --palette-text-inverted: #ffffff;
+  
+  /* Border palette - Sage */
+  --palette-border-main: #bbf7d0;
+  --palette-border-light: rgba(20, 83, 45, 0.12);
+  --palette-border-lighter: rgba(20, 83, 45, 0.05);
+  --palette-border-medium: #86efac;
+  
+  /* Success palette - Vibrant green */
+  --palette-success-main: #22c55e;
+  --palette-success-light: #dcfce7;
+  --palette-success-dark: #15803d;
+  --palette-success-border: #bbf7d0;
+  
+  /* Error palette - Cherry blossom */
+  --palette-error-main: #f43f5e;
+  --palette-error-light: #ffe4e6;
+  --palette-error-dark: #881337;
+  --palette-error-border: #fecdd3;
+  
+  /* Warning palette - Daffodil */
+  --palette-warning-main: #eab308;
+  --palette-warning-light: #fefce8;
+  --palette-warning-dark: #713f12;
+  --palette-warning-border: #fef08a;
+  
+  /* Info palette - Sky blue */
+  --palette-info-main: #0ea5e9;
+  --palette-info-light: #e0f2fe;
+  --palette-info-dark: #0c4a6e;
+  --palette-on-info: #14532d;
+  --palette-info-border: #7dd3fc;
+  
+  /* Accent palette - Cherry blossom */
+  --palette-accent-main: #ec4899;
+  --palette-accent-light: #fce7f3;
+  --palette-accent-dark: #be185d;
+  --palette-on-accent: #ffffff;
+  
+  /* Control palette - Rich earth */
+  --palette-control-main: #365314;
+  --palette-control-light: #4d7c0f;
+  --palette-control-text: #ecfdf5;
+  --palette-control-border: #65a30d;
+}
+
+/* ===== SPRING PALETTE - DARK THEME ===== */
+html[data-palette="spring"][data-theme="dark"] {
+  /* Primary palette - Neon leaf */
+  --palette-primary-main: #4ade80;
+  --palette-primary-light: #86efac;
+  --palette-primary-dark: #16a34a;
+  --palette-on-primary: #0f1f0f;
+
+  /* Secondary palette - Neon bloom */
+  --palette-secondary-main: #f472b6;
+  --palette-secondary-light: #f9a8d4;
+  --palette-secondary-dark: #ec4899;
+  --palette-on-secondary: #0f1f0f;
+
+  /* Surface palette - Dark moss */
+  --palette-surface-main: #0f1f0f;
+  --palette-surface-variant: #1a2e1a;
+  --palette-surface-elevated: #2d4a2d;
+  --palette-on-surface: #dcfce7;
+
+  /* Background palette - Deep forest */
+  --palette-background-main: #0a120a;
+  --palette-background-dark: #0f1f0f;
+  --palette-background-overlay: rgba(15, 31, 15, 0.95);
+  --palette-on-background: #bbf7d0;
+
+  /* Text palette - Moonlit green */
+  --palette-text-primary: #dcfce7;
+  --palette-text-secondary: #bbf7d0;
+  --palette-text-disabled: rgba(220, 252, 231, 0.38);
+  --palette-text-inverted: #0a120a;
+  
+  /* Border palette - Night vine */
+  --palette-border-main: #166534;
+  --palette-border-light: rgba(220, 252, 231, 0.12);
+  --palette-border-lighter: rgba(220, 252, 231, 0.05);
+  --palette-border-medium: #14532d;
+  
+  /* Success palette - Electric green */
+  --palette-success-main: #22c55e;
+  --palette-success-light: #14532d;
+  --palette-success-dark: #4ade80;
+  --palette-success-border: #166534;
+  
+  /* Error palette - Neon pink */
+  --palette-error-main: #f472b6;
+  --palette-error-light: #881337;
+  --palette-error-dark: #ec4899;
+  --palette-error-border: #be185d;
+  
+  /* Warning palette - Electric yellow */
+  --palette-warning-main: #facc15;
+  --palette-warning-light: #713f12;
+  --palette-warning-dark: #eab308;
+  --palette-warning-border: #a16207;
+  
+  /* Info palette - Electric cyan */
+  --palette-info-main: #06b6d4;
+  --palette-info-light: #164e63;
+  --palette-info-dark: #22d3ee;
+  --palette-on-info: #0a120a;
+  --palette-info-border: #0891b2;
+  
+  /* Accent palette - Electric bloom */
+  --palette-accent-main: #f472b6;
+  --palette-accent-light: #fce7f3;
+  --palette-accent-dark: #db2777;
+  --palette-on-accent: #dcfce7;
+  
+  /* Control palette - Deep forest */
+  --palette-control-main: #1a2e1a;
+  --palette-control-light: #2d4a2d;
+  --palette-control-text: #dcfce7;
+  --palette-control-border: #166534;
+}

package/src/palettes/PaletteSpring.ts

@@ -0,0 +1,16 @@
+/**
+ * Spring Palette Configuration
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+import "./PaletteSpring.css";
+import type { PaletteConfig } from '../contexts/PaletteContext';
+
+export const PaletteSpring: PaletteConfig = {
+  id: 'spring',
+  name: 'Spring',
+  description: 'Fresh greens and soft pinks',
+  primaryColor: '#16a34a',
+};
+
+export default PaletteSpring;

package/src/palettes/PaletteWinter.css

@@ -0,0 +1,172 @@
+/**
+ * Winter Color Palette
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ * 
+ * Cool blues, icy whites, and frosty grays - inspired by winter landscapes
+ */
+
+/* ===== WINTER PALETTE - LIGHT THEME ===== */
+html[data-palette="winter"]:not([data-theme="dark"]), 
+html[data-palette="winter"][data-theme="light"] {
+  /* Primary palette - Ice blue */
+  --palette-primary-main: #0077be;
+  --palette-primary-light: #5ba3d0;
+  --palette-primary-dark: #005082;
+  --palette-on-primary: #ffffff;
+
+  /* Secondary palette - Steel blue */
+  --palette-secondary-main: #4682b4;
+  --palette-secondary-light: #7ba7cc;
+  --palette-secondary-dark: #2e5984;
+  --palette-on-secondary: #ffffff;
+
+  /* Surface palette - Snow white */
+  --palette-surface-main: #fafbfc;
+  --palette-surface-variant: #e2e8f0; /* Improved contrast with cooler tone */
+  --palette-surface-elevated: #ffffff;
+  --palette-on-surface: #0f172a;
+
+  /* Background palette - Frosty */
+  --palette-background-main: #f8fafc;
+  --palette-background-dark: #f1f5f9;
+  --palette-background-overlay: rgba(248, 250, 252, 0.95);
+  --palette-on-background: #475569;
+
+  /* Header background with transparency */
+  --palette-header-bg-start: rgba(248, 250, 252, 0.98);
+  --palette-header-bg-end: rgba(248, 250, 252, 0.95);
+  --palette-header-collapsed-bg-start: rgba(248, 250, 252, 0.99);
+  --palette-header-collapsed-bg-end: rgba(248, 250, 252, 0.96);
+  
+  /* Text palette - Winter tones */
+  --palette-text-primary: #0f172a;
+  --palette-text-secondary: #475569;
+  --palette-text-disabled: rgba(15, 23, 42, 0.38);
+  --palette-text-inverted: #ffffff;
+  
+  /* Border palette - Icy */
+  --palette-border-main: #cbd5e1;
+  --palette-border-light: rgba(15, 23, 42, 0.12);
+  --palette-border-lighter: rgba(15, 23, 42, 0.05);
+  --palette-border-medium: #94a3b8;
+  
+  /* Success palette - Pine green */
+  --palette-success-main: #059669;
+  --palette-success-light: #d1fae5;
+  --palette-success-dark: #064e3b;
+  --palette-success-border: #a7f3d0;
+  
+  /* Error palette - Winter berry */
+  --palette-error-main: #dc2626;
+  --palette-error-light: #fee2e2;
+  --palette-error-dark: #7f1d1d;
+  --palette-error-border: #fecaca;
+  
+  /* Warning palette - Amber frost */
+  --palette-warning-main: #d97706;
+  --palette-warning-light: #fef3c7;
+  --palette-warning-dark: #92400e;
+  --palette-warning-border: #fde68a;
+  
+  /* Info palette - Arctic blue */
+  --palette-info-main: #0284c7;
+  --palette-info-light: #e0f2fe;
+  --palette-info-dark: #0c4a6e;
+  --palette-on-info: #ffffff;
+  --palette-info-border: #7dd3fc;
+  
+  /* Accent palette - Aurora colors */
+  --palette-accent-main: #ec4899;
+  --palette-accent-light: #fce7f3;
+  --palette-accent-dark: #be185d;
+  --palette-on-accent: #ffffff;
+  
+  /* Control palette - Charcoal */
+  --palette-control-main: #1e293b;
+  --palette-control-light: #334155;
+  --palette-control-text: #e2e8f0;
+  --palette-control-border: #475569;
+}
+
+/* ===== WINTER PALETTE - DARK THEME ===== */
+html[data-palette="winter"][data-theme="dark"] {
+  /* Primary palette - Arctic glow */
+  --palette-primary-main: #7dd3fc;
+  --palette-primary-light: #bae6fd;
+  --palette-primary-dark: #0369a1;
+  --palette-on-primary: #020617;
+
+  /* Secondary palette - Moonlight */
+  --palette-secondary-main: #94a3b8;
+  --palette-secondary-light: #cbd5e1;
+  --palette-secondary-dark: #64748b;
+  --palette-on-secondary: #020617;
+
+  /* Surface palette - Dark frost */
+  --palette-surface-main: #0f172a;
+  --palette-surface-variant: #1e293b;
+  --palette-surface-elevated: #334155;
+  --palette-on-surface: #f8fafc;
+
+  /* Background palette - Winter night */
+  --palette-background-main: #020617;
+  --palette-background-dark: #0f172a;
+  --palette-background-overlay: rgba(15, 23, 42, 0.95);
+  --palette-on-background: #cbd5e1;
+
+  /* Header background with transparency */
+  --palette-header-bg-start: rgba(2, 6, 23, 0.98);
+  --palette-header-bg-end: rgba(2, 6, 23, 0.95);
+  --palette-header-collapsed-bg-start: rgba(2, 6, 23, 0.99);
+  --palette-header-collapsed-bg-end: rgba(2, 6, 23, 0.96);
+  
+  /* Text palette - Snow and ice */
+  --palette-text-primary: #f8fafc;
+  --palette-text-secondary: #cbd5e1;
+  --palette-text-disabled: rgba(248, 250, 252, 0.38);
+  --palette-text-inverted: #020617;
+  
+  /* Border palette - Dark ice */
+  --palette-border-main: #475569;
+  --palette-border-light: rgba(248, 250, 252, 0.12);
+  --palette-border-lighter: rgba(248, 250, 252, 0.05);
+  --palette-border-medium: #334155;
+  
+  /* Success palette - Aurora green */
+  --palette-success-main: #34d399;
+  --palette-success-light: #064e3b;
+  --palette-success-dark: #10b981;
+  --palette-success-border: #065f46;
+  
+  /* Error palette - Northern lights red */
+  --palette-error-main: #f87171;
+  --palette-error-light: #7f1d1d;
+  --palette-error-dark: #ef4444;
+  --palette-error-border: #991b1b;
+  
+  /* Warning palette - Aurora orange */
+  --palette-warning-main: #fb923c;
+  --palette-warning-light: #9a3412;
+  --palette-warning-dark: #f97316;
+  --palette-warning-border: #c2410c;
+  
+  /* Info palette - Polar blue */
+  --palette-info-main: #38bdf8;
+  --palette-info-light: #0c4a6e;
+  --palette-info-dark: #0ea5e9;
+  --palette-on-info: #020617;
+  --palette-info-border: #0284c7;
+  
+  /* Accent palette - Northern lights */
+  --palette-accent-main: #f472b6;
+  --palette-accent-light: #fce7f3;
+  --palette-accent-dark: #db2777;
+  --palette-on-accent: #f8fafc;
+  
+  /* Control palette - Midnight */
+  --palette-control-main: #1e293b;
+  --palette-control-light: #334155;
+  --palette-control-text: #e2e8f0;
+  --palette-control-border: #475569;
+}

package/src/palettes/PaletteWinter.ts

@@ -0,0 +1,16 @@
+/**
+ * Winter Palette Configuration
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+import "./PaletteWinter.css";
+import type { PaletteConfig } from '../contexts/PaletteContext';
+
+export const PaletteWinter: PaletteConfig = {
+  id: 'winter',
+  name: 'Winter',
+  description: 'Cool blues and icy whites',
+  primaryColor: '#0077be',
+};
+
+export default PaletteWinter;

package/src/palettes/index.css

@@ -0,0 +1,12 @@
+/**
+ * All Available Color Palettes
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+@import './PaletteDefault.css';
+@import './PaletteAutumn.css';
+@import './PaletteOcean.css';
+@import './PaletteSpring.css';
+@import './PaletteWinter.css';
+@import './PaletteCosmic.css';

package/src/palettes/index.ts

@@ -0,0 +1,29 @@
+/**
+ * Palette Configurations Export
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+export { default as PaletteDefault } from './PaletteDefault';
+export { default as PaletteAutumn } from './PaletteAutumn';
+export { default as PaletteOcean } from './PaletteOcean';
+export { default as PaletteSpring } from './PaletteSpring';
+export { default as PaletteWinter } from './PaletteWinter';
+export { default as PaletteCosmic } from './PaletteCosmic';
+
+// Export all palette configs as an array
+import PaletteDefault from './PaletteDefault';
+import PaletteAutumn from './PaletteAutumn';
+import PaletteOcean from './PaletteOcean';
+import PaletteSpring from './PaletteSpring';
+import PaletteWinter from './PaletteWinter';
+import PaletteCosmic from './PaletteCosmic';
+
+export const AllPalettes = [
+  PaletteDefault,
+  PaletteOcean,
+  PaletteCosmic,
+  PaletteWinter,
+  PaletteAutumn,
+  PaletteSpring,
+];

package/src/schemas/ActionSchema.ts

@@ -0,0 +1,140 @@
+/**
+ * Action Schema - Defines data structure for action buttons (Button component)
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsIn, IsOptional, IsString, IsUrl } from 'class-validator';
+import 'reflect-metadata';
+import { Editor, Field, FieldType, Model, Schema } from '@qwickapps/schema';
+
+@Schema('Action', '1.0.0')
+export class ActionModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Label',
+    description: 'Button label text',
+    placeholder: 'Enter button text...'
+  })
+  @IsOptional()
+  @IsString()
+  label?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Variant',
+    description: 'Visual style variant',
+    validation: {
+      options: [
+        { label: 'Primary', value: 'primary' },
+        { label: 'Secondary', value: 'secondary' },
+        { label: 'Outlined', value: 'outlined' },
+        { label: 'Text', value: 'text' },
+        { label: 'Contained', value: 'contained' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['primary', 'secondary', 'outlined', 'text', 'contained'])
+  variant?: 'primary' | 'secondary' | 'outlined' | 'text' | 'contained';
+
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Size',
+    description: 'Button size',
+    validation: {
+      options: [
+        { label: 'Small', value: 'small' },
+        { label: 'Medium', value: 'medium' },
+        { label: 'Large', value: 'large' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['small', 'medium', 'large'])
+  buttonSize?: 'small' | 'medium' | 'large';
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Icon',
+    description: 'Icon to display (before text)',
+    placeholder: 'Icon identifier...'
+  })
+  @IsOptional()
+  @IsString()
+  icon?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'End Icon',
+    description: 'Icon to display after text',
+    placeholder: 'End icon identifier...'
+  })
+  @IsOptional()
+  @IsString()
+  endIcon?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.URL,
+    label: 'URL',
+    description: 'Link URL - button becomes a link',
+    placeholder: 'https://...'
+  })
+  @IsOptional()
+  @IsUrl()
+  href?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Target',
+    description: 'Link target (when href is provided)',
+    validation: {
+      options: [
+        { label: 'Blank', value: '_blank' },
+        { label: 'Self', value: '_self' },
+        { label: 'Parent', value: '_parent' },
+        { label: 'Top', value: '_top' }
+      ]
+    }
+  })
+  @IsOptional()
+  @IsIn(['_blank', '_self', '_parent', '_top'])
+  target?: '_blank' | '_self' | '_parent' | '_top';
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Disabled',
+    description: 'Disabled state'
+  })
+  @IsOptional()
+  disabled?: boolean;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Loading',
+    description: 'Loading state - shows spinner and disables interaction'
+  })
+  @IsOptional()
+  loading?: boolean;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Full Width',
+    description: 'Full width button'
+  })
+  @IsOptional()
+  fullWidth?: boolean;
+}
+
+
+export default ActionModel;

package/src/schemas/ArticleSchema.ts

@@ -0,0 +1,35 @@
+/**
+ * Schema for Article component - HTML content transformer
+ * 
+ * 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('Article', '1.0.0')
+export class ArticleModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXTAREA,
+    label: 'HTML Content',
+    description: 'Raw HTML content to transform and render',
+    placeholder: 'Enter HTML content...'
+  })
+  @IsString()
+  @IsOptional()
+  html?: string;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Skip Header',
+    description: 'Skip/remove header elements before rendering'
+  })
+  @IsOptional()
+  skipHeader?: boolean;
+}
+
+
+export default ArticleModel;

package/src/schemas/ButtonSchema.ts

@@ -0,0 +1,99 @@
+/**
+ * Schema for Button component - Enhanced button with comprehensive features
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { IsBoolean, IsOptional, IsString, IsIn } from 'class-validator';
+import 'reflect-metadata';
+import { Editor, Field, Schema, Model, FieldType } from '@qwickapps/schema';
+
+@Schema('Button', '1.0.0')
+export class ButtonModel extends Model {
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Button Label',
+    description: 'The text displayed on the button',
+    placeholder: 'Click me'
+  })
+  @IsOptional()
+  @IsString()
+  label?: string;
+
+  @Field({ defaultValue: 'primary' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Button Variant',
+    description: 'Visual style variant for the button'
+  })
+  @IsOptional()
+  @IsString()
+  @IsIn(['primary', 'secondary', 'outlined', 'text', 'contained'])
+  variant?: 'primary' | 'secondary' | 'outlined' | 'text' | 'contained';
+
+  @Field({ defaultValue: 'medium' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Button Size',
+    description: 'Size of the button'
+  })
+  @IsOptional()
+  @IsString()
+  @IsIn(['small', 'medium', 'large'])
+  buttonSize?: 'small' | 'medium' | 'large';
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Link URL',
+    description: 'If provided, button becomes a link to this URL',
+    placeholder: 'https://example.com'
+  })
+  @IsOptional()
+  @IsString()
+  href?: string;
+
+  @Field({ defaultValue: '_self' })
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Link Target',
+    description: 'Target for link when href is provided'
+  })
+  @IsOptional()
+  @IsString()
+  @IsIn(['_blank', '_self', '_parent', '_top'])
+  target?: '_blank' | '_self' | '_parent' | '_top';
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Disabled',
+    description: 'Whether the button is disabled'
+  })
+  @IsOptional()
+  @IsBoolean()
+  disabled?: boolean;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Loading',
+    description: 'Show loading spinner and disable interaction'
+  })
+  @IsOptional()
+  @IsBoolean()
+  loading?: boolean;
+
+  @Field({ defaultValue: false })
+  @Editor({
+    field_type: FieldType.BOOLEAN,
+    label: 'Full Width',
+    description: 'Whether the button should take full width of container'
+  })
+  @IsOptional()
+  @IsBoolean()
+  fullWidth?: boolean;
+}
+
+export default ButtonModel;