@qwickapps/react-framework 1.3.4 → 1.4.0

package/src/stories/ThemeSwitcher.stories.tsx

@@ -14,13 +14,13 @@ import { usePalette } from '../contexts/PaletteContext';
 import { Box, Typography, Button, Card, CardContent } from '@mui/material';
 
 const meta = {
-  title: 'Components/ThemeSwitcher',
-  component: ThemeSwitcher,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: `ThemeSwitcher provides users with light, dark, and system theme mode options for optimal viewing experience.
+ title: 'Components/ThemeSwitcher',
+ component: ThemeSwitcher,
+ parameters: {
+ layout: 'centered',
+ docs: {
+ description: {
+ component: `ThemeSwitcher provides users with light, dark, and system theme mode options for optimal viewing experience.
 
 **Key Features:**
 - **Three Theme Modes**: Light, dark, and automatic system preference detection
@@ -38,10 +38,10 @@ const meta = {
 - Multi-theme applications requiring user choice
 - Dashboard and admin panel customization
 - Design system demonstrations and showcases`,
-      },
-    },
-  },
-  tags: ['autodocs'],
+ },
+ },
+ },
+ tags: ['autodocs'],
 } satisfies Meta<typeof ThemeSwitcher>;
 
 export default meta;
@@ -49,122 +49,122 @@ type Story = StoryObj<typeof meta>;
 
 // Component that uses the theme context
 function ThemeDemo() {
-  const { currentTheme, actualThemeMode } = useTheme();
-  const { currentPalette } = usePalette();
-  
-  return (
-    <Box sx={{ p: 3, maxWidth: 600, margin: '0 auto' }}>
-      <div style={{ marginBottom: '20px', textAlign: 'center' }}>
-        <Typography variant="h5" gutterBottom>
-          Try switching themes and palettes!
-        </Typography>
-        <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
-          Use the theme and palette switchers to see how different combinations affect the appearance.
-        </Typography>
-        <Box sx={{ display: 'flex', gap: 2, justifyContent: 'center', alignItems: 'center' }}>
-          <ThemeSwitcher />
-          <PaletteSwitcher />
-        </Box>
-      </div>
+ const { currentTheme, actualThemeMode } = useTheme();
+ const { currentPalette } = usePalette();
+ 
+ return (
+ <Box sx={{ p: 3, maxWidth: 600, margin: '0 auto' }}>
+ <div style={{ marginBottom: '20px', textAlign: 'center' }}>
+ <Typography variant="h5" gutterBottom>
+ Try switching themes and palettes!
+ </Typography>
+ <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
+ Use the theme and palette switchers to see how different combinations affect the appearance.
+ </Typography>
+ <Box sx={{ display: 'flex', gap: 2, justifyContent: 'center', alignItems: 'center' }}>
+ <ThemeSwitcher />
+ <PaletteSwitcher />
+ </Box>
+ </div>
 
-      <Card sx={{ mt: 3 }}>
-        <CardContent>
-          <Typography variant="h6" gutterBottom>
-            Theme & Palette Demo Content
-          </Typography>
-          <Typography variant="body2" color="text.secondary" paragraph>
-            Current Theme: <strong>{currentTheme}</strong> → Actual: <strong>{actualThemeMode}</strong>
-          </Typography>
-          <Typography variant="body2" color="text.secondary" paragraph>
-            Current Palette: <strong>{currentPalette}</strong>
-          </Typography>
-          <Typography variant="body2" color="text.secondary" paragraph>
-            This content changes appearance based on both the selected theme mode and color palette, 
-            demonstrating the full theming system integration with Material-UI.
-          </Typography>
-          
-          {/* AccessibilityChecker Integration */}
-          <Box sx={{ 
-            p: 2, 
-            backgroundColor: 'background.paper', 
-            border: '1px solid', 
-            borderColor: 'divider',
-            borderRadius: 1, 
-            mb: 2 
-          }}>
-            <Typography variant="subtitle2" gutterBottom>
-              🔍 Accessibility Monitoring
-            </Typography>
-            <Typography variant="caption" color="text.secondary" paragraph>
-              The AccessibilityChecker automatically monitors color contrast and accessibility compliance as you switch themes and palettes.
-            </Typography>
-            <AccessibilityChecker />
-          </Box>
-          
-          <Box sx={{ 
-            display: 'flex', 
-            gap: 2,
-            flexWrap: 'wrap',
-            justifyContent: 'center',
-            mb: 3
-          }}>
-            <Button variant="contained" color="primary">
-              Primary Button
-            </Button>
-            <Button variant="outlined" color="secondary">
-              Secondary Button
-            </Button>
-            <Button variant="text">
-              Text Button
-            </Button>
-          </Box>
+ <Card sx={{ mt: 3 }}>
+ <CardContent>
+ <Typography variant="h6" gutterBottom>
+ Theme & Palette Demo Content
+ </Typography>
+ <Typography variant="body2" color="text.secondary" paragraph>
+ Current Theme: <strong>{currentTheme}</strong> → Actual: <strong>{actualThemeMode}</strong>
+ </Typography>
+ <Typography variant="body2" color="text.secondary" paragraph>
+ Current Palette: <strong>{currentPalette}</strong>
+ </Typography>
+ <Typography variant="body2" color="text.secondary" paragraph>
+ This content changes appearance based on both the selected theme mode and color palette, 
+ demonstrating the full theming system integration with Material-UI.
+ </Typography>
+ 
+ {/* AccessibilityChecker Integration */}
+ <Box sx={{ 
+ p: 2, 
+ backgroundColor: 'background.paper', 
+ border: '1px solid', 
+ borderColor: 'divider',
+ borderRadius: 1, 
+ mb: 2 
+ }}>
+ <Typography variant="subtitle2" gutterBottom>
+ Accessibility Monitoring
+ </Typography>
+ <Typography variant="caption" color="text.secondary" paragraph>
+ The AccessibilityChecker automatically monitors color contrast and accessibility compliance as you switch themes and palettes.
+ </Typography>
+ <AccessibilityChecker />
+ </Box>
+ 
+ <Box sx={{ 
+ display: 'flex', 
+ gap: 2,
+ flexWrap: 'wrap',
+ justifyContent: 'center',
+ mb: 3
+ }}>
+ <Button variant="contained" color="primary">
+ Primary Button
+ </Button>
+ <Button variant="outlined" color="secondary">
+ Secondary Button
+ </Button>
+ <Button variant="text">
+ Text Button
+ </Button>
+ </Box>
 
-          <Box sx={{ 
-            display: 'grid', 
-            gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))', 
-            gap: 2,
-            mt: 2 
-          }}>
-            {[
-              { name: 'Primary', color: 'primary.main' },
-              { name: 'Secondary', color: 'secondary.main' },
-              { name: 'Background', color: 'background.default' },
-              { name: 'Surface', color: 'background.paper' },
-            ].map(({ name, color }) => (
-              <Box key={name} sx={{ textAlign: 'center' }}>
-                <Box sx={{ 
-                  width: '100%', 
-                  height: 40, 
-                  backgroundColor: color,
-                  border: color.includes('background') ? '1px solid' : 'none',
-                  borderColor: 'divider',
-                  borderRadius: 1,
-                  mb: 1
-                }} />
-                <Typography variant="caption" color="text.secondary">
-                  {name}
-                </Typography>
-              </Box>
-            ))}
-          </Box>
-        </CardContent>
-      </Card>
-    </Box>
-  );
+ <Box sx={{ 
+ display: 'grid', 
+ gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))', 
+ gap: 2,
+ mt: 2 
+ }}>
+ {[
+ { name: 'Primary', color: 'primary.main' },
+ { name: 'Secondary', color: 'secondary.main' },
+ { name: 'Background', color: 'background.default' },
+ { name: 'Surface', color: 'background.paper' },
+ ].map(({ name, color }) => (
+ <Box key={name} sx={{ textAlign: 'center' }}>
+ <Box sx={{ 
+ width: '100%', 
+ height: 40, 
+ backgroundColor: color,
+ border: color.includes('background') ? '1px solid' : 'none',
+ borderColor: 'divider',
+ borderRadius: 1,
+ mb: 1
+ }} />
+ <Typography variant="caption" color="text.secondary">
+ {name}
+ </Typography>
+ </Box>
+ ))}
+ </Box>
+ </CardContent>
+ </Card>
+ </Box>
+ );
 }
 
 // Default story - Interactive Theme Demo
 export const Default: Story = {
-  render: () => (
-    <QwickApp appId="com.qwickapps.storybook" appName="QwickApps Storybook">
-      <ThemeDemo />
-    </QwickApp>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Interactive theme and palette switcher demo showing how different theme modes and color palettes work together. Switch between light/dark/system modes and try different color palettes to see the full theming system in action.',
-      },
-    },
-  },
+ render: () => (
+ <QwickApp appId="com.qwickapps.storybook" appName="QwickApps Storybook">
+ <ThemeDemo />
+ </QwickApp>
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story: 'Interactive theme and palette switcher demo showing how different theme modes and color palettes work together. Switch between light/dark/system modes and try different color palettes to see the full theming system in action.',
+ },
+ },
+ },
 };

package/src/utils/htmlTransform.tsx

@@ -9,10 +9,7 @@
 
 import { Box, Typography } from '@mui/material';
 import React from 'react';
-import Code from '../components/blocks/Code';
-import Section from '../components/blocks/Section';
-import { Button } from '../components/buttons/Button';
-import SafeSpan from '../components/SafeSpan';
+import { ComponentTransformer } from '../schemas/transformers/ComponentTransformer';
 
 export interface TransformRule {
   selector: string;
@@ -30,7 +27,7 @@ export interface TransformConfig {
  * Default transformation rules for article/blog content
  */
 export const defaultArticleRules: TransformRule[] = [
-  // Pre + Code blocks → Code component with syntax highlighting
+  // Pre + Code blocks → Code component via ComponentTransformer
   {
     selector: 'pre',
     transform: (element: Element, key: string) => {
@@ -41,15 +38,20 @@ export const defaultArticleRules: TransformRule[] = [
         .find(cls => cls.startsWith('language-'))
         ?.replace('language-', '') || 'text';
 
+      // Use ComponentTransformer to create Code component
+      const codeData = {
+        tagName: 'Code',
+        props: {
+          language,
+          showCopy: true,
+          showLineNumbers: false,
+          children: codeChild.textContent || ''
+        }
+      };
+
       return (
         <Box key={key} sx={{ my: 1.5 }}>
-          <Code
-            language={language}
-            showCopy={true}
-            showLineNumbers={false}
-          >
-            {codeChild.textContent || ''}
-          </Code>
+          {ComponentTransformer.deserialize(codeData)}
         </Box>
       );
     }
@@ -71,15 +73,20 @@ export const defaultArticleRules: TransformRule[] = [
       const isInInlineContext = inlineParents.some(tag => element.closest(tag));
 
       if ((hasMultipleLines || hasComplexContent) && !isInInlineContext) {
+        // Use ComponentTransformer to create Code component
+        const codeData = {
+          tagName: 'Code',
+          props: {
+            language: 'text',
+            showCopy: true,
+            showLineNumbers: false,
+            children: text
+          }
+        };
+
         return (
           <Box key={key} sx={{ my: 1.5 }}>
-            <Code
-              language="text"
-              showCopy={true}
-              showLineNumbers={false}
-            >
-              {text}
-            </Code>
+            {ComponentTransformer.deserialize(codeData)}
           </Box>
         );
       }
@@ -97,22 +104,29 @@ export const defaultArticleRules: TransformRule[] = [
       const content = children.filter(child => child.tagName !== 'H2');
       const spacing = element.getAttribute('data-padding') || 'none';
 
-      return (
-        <Section key={key} padding={spacing as any}>
-          <Box sx={{ maxWidth: 'lg', mx: 'auto' }}>
-            {title && (
-              <Typography variant="h4" component="h2" sx={{ mb: 2 }}>
-                {title}
-              </Typography>
-            )}
-            <Box>
-              {content.map((child, index) =>
-                transformElement(child, `${key}-${index}`, { rules: defaultArticleRules })
-              )}
-            </Box>
-          </Box>
-        </Section>
-      );
+      // Use ComponentTransformer to create Section component
+      const sectionData = {
+        tagName: 'Section',
+        props: {
+          padding: spacing || 'medium',
+          children: [
+            title && {
+              tagName: 'Typography',
+              props: {
+                variant: 'h4',
+                component: 'h2',
+                sx: { mb: 2 },
+                children: title
+              }
+            },
+            ...content.map((child, index) =>
+              transformElement(child, `${key}-${index}`, { rules: defaultArticleRules })
+            )
+          ].filter(Boolean)
+        }
+      };
+
+      return ComponentTransformer.deserialize(sectionData);
     }
   },
 
@@ -124,15 +138,17 @@ export const defaultArticleRules: TransformRule[] = [
       const variant = element.getAttribute('data-variant') || 'contained';
       const disabled = element.hasAttribute('disabled');
 
-      return (
-        <Button
-          key={key}
-          variant={variant as any}
-          disabled={disabled}
-        >
-          {text}
-        </Button>
-      );
+      // Use ComponentTransformer to create Button component
+      const buttonData = {
+        tagName: 'Button',
+        props: {
+          variant,
+          disabled,
+          label: text
+        }
+      };
+
+      return ComponentTransformer.deserialize(buttonData);
     }
   }
 ];
@@ -152,15 +168,20 @@ export const defaultMarkdownRules: TransformRule[] = [
         .find(cls => cls.startsWith('language-'))
         ?.replace('language-', '') || 'text';
 
+      // Use ComponentTransformer to create Code component
+      const codeData = {
+        tagName: 'Code',
+        props: {
+          language,
+          showCopy: true,
+          showLineNumbers: false,
+          children: codeChild.textContent || ''
+        }
+      };
+
       return (
         <Box key={key} sx={{ my: 1.5 }}>
-          <Code
-            language={language}
-            showCopy={true}
-            showLineNumbers={false}
-          >
-            {codeChild.textContent || ''}
-          </Code>
+          {ComponentTransformer.deserialize(codeData)}
         </Box>
       );
     }
@@ -192,7 +213,7 @@ function parseStyleString(styleStr: string): React.CSSProperties {
     if (property && value) {
       // Convert kebab-case to camelCase
       const camelProperty = property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
-      styles[camelProperty as keyof React.CSSProperties] = value;
+      styles[camelProperty as keyof React.CSSProperties] = value as any;
     }
   });
   
@@ -236,7 +257,7 @@ export const defaultFallback = (element: Element, key: string): React.ReactNode
   return React.createElement(
     tagName,
     props,
-    React.createElement(SafeSpan, { html: element.innerHTML })
+    element.innerHTML
   );
 };
 

package/src/utils/reactUtils.tsx

@@ -5,6 +5,7 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
+import { ReactNode } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 /** Location type for React Router */
@@ -24,14 +25,64 @@ export const useSafeLocation = (): LocationType | undefined => {
 };
 
 /**
- * Custom hook to get the navigate function
- * @returns {Function | undefined} - The navigate function if React Router is available, otherwise undefined
+ * Custom hook to get the navigate function with fallback
+ * @returns {Function} - The navigate function (React Router or window.location fallback)
  */
-export const useSafeNavigate = (): Function | undefined => {
+export const useSafeNavigate = (): Function => {
   try {
-    return useNavigate();
+    const navigate = useNavigate();
+    return navigate;
   } catch (error) {
-    console.warn('React Router context not available:', error);
-    return undefined;
+    // Return fallback function that uses window.location.href
+    return (to: string | number, options?: any) => {
+      console.warn('React Router context not available, using window.location as fallback to navigate to:', to);
+      if (typeof to === 'string') {
+        // Handle relative and absolute paths
+        if (typeof window !== 'undefined') {
+          window.location.href = to;
+        }
+      } else if (typeof to === 'number') {
+        // Handle history.go() equivalent
+        if (typeof window !== 'undefined' && window.history) {
+          window.history.go(to);
+        }
+      }
+    };
   }
 };
+
+/**
+ * Extract text content from ReactNode for code processing
+ * Handles natural React usage like <Code>const x = 1;</Code>
+ * 
+ * @param node - The ReactNode to extract text from
+ * @returns String representation of the node's text content
+ */
+export function extractTextFromReactNode(node: ReactNode): string {
+  if (node === null || node === undefined) {
+    return '';
+  }
+
+  if (typeof node === 'string' || typeof node === 'number') {
+    return String(node);
+  }
+
+  if (typeof node === 'boolean') {
+    return node ? 'true' : 'false';
+  }
+
+  if (Array.isArray(node)) {
+    return node.map(child => extractTextFromReactNode(child)).join('');
+  }
+
+  // For React elements, try to extract text content
+  if (typeof node === 'object' && node !== null && 'props' in node) {
+    const element = node as any;
+    if (element.props && element.props.children) {
+      return extractTextFromReactNode(element.props.children);
+    }
+  }
+
+  // Fallback: convert to string
+  return String(node);
+}