@qwickapps/react-framework 1.4.0 → 1.4.2

package/src/schemas/ViewModelSchema.ts

@@ -1,115 +0,0 @@
-/**
- * ViewModel Schema - Base class for all view components that can be serialized
- * 
- * Provides common attributes shared across UI components including
- * styling, accessibility, and layout properties.
- * 
- * Copyright (c) 2025 QwickApps.com. All rights reserved.
- */
-
-import { IsOptional, IsString, IsBoolean } from 'class-validator';
-import 'reflect-metadata';
-import { Editor, Field, FieldType, Model, Schema } from '@qwickapps/schema';
-
-@Schema('ViewModel', '1.0.0')
-export class ViewModelSchema extends Model {
-  @Field()
-  @Editor({
-    field_type: FieldType.TEXT,
-    label: 'CSS Class Name',
-    description: 'Additional CSS class name for custom styling',
-    placeholder: 'custom-class-name'
-  })
-  @IsOptional()
-  @IsString()
-  className?: string;
-
-  @Field()
-  @Editor({
-    field_type: FieldType.TEXT,
-    label: 'Inline Styles',
-    description: 'Inline CSS styles as JSON string (e.g., {"color": "red", "margin": "10px"})',
-    placeholder: '{"property": "value"}'
-  })
-  @IsOptional()
-  @IsString()
-  style?: string;
-
-  @Field()
-  @Editor({
-    field_type: FieldType.TEXT,
-    label: 'Element ID',
-    description: 'Unique HTML element ID',
-    placeholder: 'unique-element-id'
-  })
-  @IsOptional()
-  @IsString()
-  id?: string;
-
-  @Field({ defaultValue: false })
-  @Editor({
-    field_type: FieldType.BOOLEAN,
-    label: 'Hidden',
-    description: 'Whether the component should be hidden from view'
-  })
-  @IsOptional()
-  @IsBoolean()
-  hidden?: boolean;
-
-  @Field()
-  @Editor({
-    field_type: FieldType.TEXT,
-    label: 'ARIA Label',
-    description: 'Accessibility label for screen readers',
-    placeholder: 'Describe this element...'
-  })
-  @IsOptional()
-  @IsString()
-  'aria-label'?: string;
-
-  @Field()
-  @Editor({
-    field_type: FieldType.TEXT,
-    label: 'ARIA Described By',
-    description: 'IDs of elements that describe this component',
-    placeholder: 'element-id-1 element-id-2'
-  })
-  @IsOptional()
-  @IsString()
-  'aria-describedby'?: string;
-
-  @Field()
-  @Editor({
-    field_type: FieldType.TEXT,
-    label: 'ARIA Labelled By',
-    description: 'IDs of elements that label this component',
-    placeholder: 'label-element-id'
-  })
-  @IsOptional()
-  @IsString()
-  'aria-labelledby'?: string;
-
-  @Field()
-  @Editor({
-    field_type: FieldType.TEXT,
-    label: 'Data Test ID',
-    description: 'Test automation identifier',
-    placeholder: 'test-element-name'
-  })
-  @IsOptional()
-  @IsString()
-  'data-testid'?: string;
-
-  @Field()
-  @Editor({
-    field_type: FieldType.TEXT,
-    label: 'Role',
-    description: 'ARIA role for accessibility',
-    placeholder: 'button, navigation, main, etc.'
-  })
-  @IsOptional()
-  @IsString()
-  role?: string;
-}
-
-export default ViewModelSchema;

package/src/tests/ConsoleWarningTest.tsx

@@ -1,30 +0,0 @@
-/**
- * Quick test to verify console warning functionality
- */
-
-import React from 'react';
-import { PaletteProvider, PaletteSwitcher } from '../index';
-import { Typography, Box } from '@mui/material';
-
-export default function ConsoleWarningTest() {
-  return (
-    <Box sx={{ p: 3 }}>
-      <Typography variant="h5" gutterBottom>
-        Console Warning Test
-      </Typography>
-      <Typography variant="body1" sx={{ mb: 2 }}>
-        Open your browser's developer console to see the warning message for auto-generated storage keys.
-      </Typography>
-      
-      {/* This should trigger the console warning */}
-      <PaletteProvider>
-        <Box sx={{ p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 1 }}>
-          <Typography variant="h6" gutterBottom>
-            Auto Key (Default - triggers warning)
-          </Typography>
-          <PaletteSwitcher />
-        </Box>
-      </PaletteProvider>
-    </Box>
-  );
-}

package/src/tests/StorageKeyTest.tsx

@@ -1,110 +0,0 @@
-/**
- * Storage Key Strategy Test Component
- * Demonstrates the three different storage strategies
- */
-
-import React from 'react';
-import { PaletteProvider, PaletteSwitcher, usePalette } from '../index';
-import { Box, Typography, Paper } from '@mui/material';
-
-function PaletteInfo({ 
-  title, 
-  appId, 
-  description 
-}: { 
-  title: string; 
-  appId: string | true | false;
-  description: string;
-}) {
-  const { currentPalette } = usePalette();
-  
-  // Helper to show what the actual storage key would be
-  const getActualKey = () => {
-    if (appId === false) return null;
-    if (appId === true || appId === undefined) {
-      return 'qwickapps-react-framework-palette';
-    }
-    return `${appId}.palette`;
-  };
-  
-  const actualKey = getActualKey();
-  
-  return (
-    <Paper sx={{ p: 2, mb: 2 }}>
-      <Typography variant="h6" gutterBottom>
-        {title}
-      </Typography>
-      <Typography variant="body2" sx={{ mb: 1, color: 'text.secondary' }}>
-        {description}
-      </Typography>
-      <Typography variant="body2" sx={{ mb: 1 }}>
-        Config: <code>{String(appId)}</code>
-      </Typography>
-      <Typography variant="body2" sx={{ mb: 1 }}>
-        Actual Key: <code>{actualKey || 'none (no persistence)'}</code>
-      </Typography>
-      <Typography variant="body2" sx={{ mb: 2 }}>
-        Current Palette: <strong>{currentPalette}</strong>
-      </Typography>
-      <Typography variant="body2" sx={{ mb: 2 }}>
-        localStorage: <code>{actualKey ? (localStorage.getItem(actualKey) || 'null') : 'disabled'}</code>
-      </Typography>
-      <PaletteSwitcher />
-    </Paper>
-  );
-}
-
-export default function StorageKeyTest() {
-  return (
-    <Box sx={{ p: 3, maxWidth: 900, margin: '0 auto' }}>
-      <Typography variant="h4" gutterBottom>
-        Storage Key Strategy Test
-      </Typography>
-      
-      <Typography variant="body1" sx={{ mb: 3 }}>
-        This test demonstrates the three storage strategies. Change palettes in each section 
-        and notice the different behaviors. Reload the page to see persistence differences.
-      </Typography>
-
-      <PaletteProvider appId="com.test.explicit-key">
-        <PaletteInfo 
-          title="1. Explicit App ID Strategy" 
-          appId="com.test.explicit-key"
-          description="Uses appId to generate storage key 'com.test.explicit-key.palette'. Recommended for production apps." 
-        />
-      </PaletteProvider>
-
-      <PaletteProvider appId={true}>
-        <PaletteInfo 
-          title="2. Default Key Strategy" 
-          appId={true}
-          description="Uses default key 'qwickapps-react-framework-palette'. Good for development/demos. Shows console warning." 
-        />
-      </PaletteProvider>
-
-      <PaletteProvider appId={false}>
-        <PaletteInfo 
-          title="3. No Persistence Strategy" 
-          appId={false}
-          description="Session-only storage, no localStorage persistence. Settings reset on page reload." 
-        />
-      </PaletteProvider>
-
-      <Paper sx={{ p: 2, mt: 3, backgroundColor: 'var(--palette-surface-variant)' }}>
-        <Typography variant="h6" gutterBottom>
-          Test Instructions:
-        </Typography>
-        <Typography variant="body2" component="div">
-          <ol style={{ paddingLeft: '20px' }}>
-            <li>Select different palettes in each section above</li>
-            <li>Notice the three different behaviors: explicit app ID, default key with warning, and no persistence</li>
-            <li>Section 1 uses custom appId, Section 2 uses default key with warning, Section 3 has no persistence</li>
-            <li>Reload the page - Sections 1 & 2 remember their selections, Section 3 resets</li>
-            <li>Open browser DevTools → Application → Local Storage to see the different keys</li>
-            <li>Check the console to see the warning for the default key usage</li>
-          </ol>
-        </Typography>
-      </Paper>
-    </Box>
-  );
-}

package/src/tests/ThemeStorageKeyTest.tsx

@@ -1,114 +0,0 @@
-/**
- * Theme Storage Key Strategy Test Component
- * Demonstrates the three different storage strategies for ThemeProvider
- */
-
-import React from 'react';
-import { ThemeProvider, ThemeSwitcher, useTheme } from '../index';
-import { Box, Typography, Paper } from '@mui/material';
-
-function ThemeInfo({ 
-  title, 
-  appId, 
-  description 
-}: { 
-  title: string; 
-  appId: string | true | false;
-  description: string;
-}) {
-  const { currentTheme, actualThemeMode } = useTheme();
-  
-  // Helper to show what the actual storage key would be
-  const getActualKey = () => {
-    if (appId === false) return null;
-    if (appId === true) {
-      return 'qwickapps-react-framework-theme';
-    }
-    return `${appId}.theme`;
-  };
-  
-  const actualKey = getActualKey();
-  
-  return (
-    <Paper sx={{ p: 2, mb: 2 }}>
-      <Typography variant="h6" gutterBottom>
-        {title}
-      </Typography>
-      <Typography variant="body2" sx={{ mb: 1, color: 'text.secondary' }}>
-        {description}
-      </Typography>
-      <Typography variant="body2" sx={{ mb: 1 }}>
-        Config: <code>{String(appId)}</code>
-      </Typography>
-      <Typography variant="body2" sx={{ mb: 1 }}>
-        Actual Key: <code>{actualKey || 'none (no persistence)'}</code>
-      </Typography>
-      <Typography variant="body2" sx={{ mb: 1 }}>
-        Theme Mode: <strong>{currentTheme}</strong>
-      </Typography>
-      <Typography variant="body2" sx={{ mb: 2 }}>
-        Actual Theme: <strong>{actualThemeMode}</strong>
-      </Typography>
-      <Typography variant="body2" sx={{ mb: 2 }}>
-        localStorage: <code>{actualKey ? (localStorage.getItem(actualKey) || 'null') : 'disabled'}</code>
-      </Typography>
-      <ThemeSwitcher />
-    </Paper>
-  );
-}
-
-export default function ThemeStorageKeyTest() {
-  return (
-    <Box sx={{ p: 3, maxWidth: 900, margin: '0 auto' }}>
-      <Typography variant="h4" gutterBottom>
-        Theme Storage Key Strategy Test
-      </Typography>
-      
-      <Typography variant="body1" sx={{ mb: 3 }}>
-        This test demonstrates the three storage strategies for ThemeProvider. Change themes in each section 
-        and notice the different behaviors. Reload the page to see persistence differences.
-      </Typography>
-
-      <ThemeProvider appId="com.test.explicit-theme">
-        <ThemeInfo 
-          title="1. Explicit App ID Strategy" 
-          appId="com.test.explicit-theme"
-          description="Uses appId to generate storage key 'com.test.explicit-theme.theme'. Recommended for production apps." 
-        />
-      </ThemeProvider>
-
-      <ThemeProvider>
-        <ThemeInfo 
-          title="2. Default Key Strategy" 
-          appId={true}
-          description="Uses default key 'qwickapps-react-framework-theme'. Good for development/demos. Shows console warning." 
-        />
-      </ThemeProvider>
-
-      <ThemeProvider appId={false}>
-        <ThemeInfo 
-          title="3. No Persistence Strategy" 
-          appId={false}
-          description="Disables localStorage persistence. Theme resets to 'system' on page reload." 
-        />
-      </ThemeProvider>
-
-      <Paper sx={{ p: 2, mt: 3, backgroundColor: 'var(--palette-surface-variant)' }}>
-        <Typography variant="h6" gutterBottom>
-          Test Instructions:
-        </Typography>
-        <Typography variant="body2" component="div">
-          <ol style={{ paddingLeft: '20px' }}>
-            <li>Select different themes in each section above</li>
-            <li>Notice that sections 1 & 2 save to localStorage with different keys, section 3 doesn't persist</li>
-            <li>Section 1 uses custom appId, Section 2 uses default key with warning, Section 3 has no persistence</li>
-            <li>Reload the page - sections 1 & 2 remember their selections, section 3 resets to system</li>
-            <li>Open browser DevTools → Application → Local Storage to see the different keys</li>
-            <li>Check the console to see the warning for the default key usage</li>
-            <li>Try switching your OS theme preference to see "system" mode behavior</li>
-          </ol>
-        </Typography>
-      </Paper>
-    </Box>
-  );
-}