meno-core 1.0.0

package/lib/client/ErrorBoundary.tsx

@@ -0,0 +1,230 @@
+/**
+ * Error Boundary Component
+ * Catches and handles React rendering errors gracefully
+ */
+
+import { Component, createElement as h, ReactNode } from 'react';
+
+interface ErrorBoundaryProps {
+  children?: ReactNode;
+  fallback?: (error: Error, errorInfo: any) => ReactNode;
+  onError?: (error: Error, errorInfo: any) => void;
+  componentName?: string;
+  level?: 'component' | 'page';
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: any;
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
+    return {
+      hasError: true,
+      error,
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: any) {
+    const { onError, componentName, level = 'component' } = this.props;
+
+    // Log error to console
+    console.error(
+      `❌ [${level.toUpperCase()} ERROR]${componentName ? ` in ${componentName}` : ''}:`,
+      error,
+      errorInfo
+    );
+
+    // Call custom error handler if provided
+    if (onError) {
+      onError(error, errorInfo);
+    }
+
+    // Update state with error info
+    this.setState({
+      errorInfo,
+    });
+  }
+
+  render() {
+    const { hasError, error, errorInfo } = this.state;
+    const { children, fallback, componentName, level = 'component' } = this.props;
+
+    if (hasError && error) {
+      // Use custom fallback if provided
+      if (fallback) {
+        return fallback(error, errorInfo);
+      }
+
+      // Default fallback UI
+      if (level === 'page') {
+        return h('div', {
+          style: {
+            padding: '40px',
+            maxWidth: '800px',
+            margin: '0 auto',
+            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+          }
+        },
+          h('div', {
+            style: {
+              background: '#fee',
+              border: '2px solid #fcc',
+              borderRadius: '8px',
+              padding: '24px',
+            }
+          },
+            h('h2', {
+              style: {
+                margin: '0 0 16px 0',
+                color: '#c00',
+                fontSize: '24px',
+                fontWeight: '600',
+              }
+            }, '⚠️ Page Rendering Error'),
+            h('p', {
+              style: {
+                margin: '0 0 16px 0',
+                color: '#666',
+                fontSize: '16px',
+                lineHeight: '1.5',
+              }
+            }, 'An error occurred while rendering this page. Please check your JSON configuration.'),
+            h('div', {
+              style: {
+                background: '#fff',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                padding: '16px',
+                marginBottom: '16px',
+                fontFamily: 'monospace',
+                fontSize: '14px',
+                color: '#c00',
+                overflowX: 'auto',
+              }
+            }, error.message),
+            process.env.NODE_ENV === 'development' && errorInfo?.componentStack && h('details', {
+              style: {
+                marginTop: '16px',
+                fontSize: '14px',
+              }
+            },
+              h('summary', {
+                style: {
+                  cursor: 'pointer',
+                  color: '#666',
+                  fontWeight: '600',
+                  marginBottom: '8px',
+                }
+              }, 'Stack Trace'),
+              h('pre', {
+                style: {
+                  background: '#f5f5f5',
+                  border: '1px solid #ddd',
+                  borderRadius: '4px',
+                  padding: '12px',
+                  fontSize: '12px',
+                  overflowX: 'auto',
+                  color: '#333',
+                }
+              }, errorInfo.componentStack)
+            ),
+            h('button', {
+              onClick: () => window.location.reload(),
+              style: {
+                marginTop: '16px',
+                padding: '10px 20px',
+                background: '#007acc',
+                color: '#fff',
+                border: 'none',
+                borderRadius: '4px',
+                fontSize: '14px',
+                fontWeight: '600',
+                cursor: 'pointer',
+              }
+            }, '🔄 Reload Page')
+          )
+        );
+      }
+
+      // Component-level error
+      return h('div', {
+        style: {
+          border: '2px dashed #fcc',
+          borderRadius: '4px',
+          padding: '12px',
+          margin: '8px 0',
+          background: '#fef5f5',
+          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        }
+      },
+        h('div', {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            marginBottom: '8px',
+          }
+        },
+          h('span', {
+            style: {
+              fontSize: '18px',
+            }
+          }, '⚠️'),
+          h('strong', {
+            style: {
+              color: '#c00',
+              fontSize: '14px',
+            }
+          }, `Component Error${componentName ? `: ${componentName}` : ''}`)
+        ),
+        h('div', {
+          style: {
+            fontSize: '12px',
+            color: '#666',
+            fontFamily: 'monospace',
+            background: '#fff',
+            padding: '8px',
+            borderRadius: '4px',
+            border: '1px solid #fcc',
+          }
+        }, error.message)
+      );
+    }
+
+    return children;
+  }
+}
+
+/**
+ * Higher-order function to wrap component building with error boundary
+ */
+export function withErrorBoundary<T>(
+  renderFn: () => T,
+  options: {
+    componentName?: string;
+    level?: 'component' | 'page';
+    onError?: (error: Error, errorInfo: any) => void;
+  } = {}
+): T | ReturnType<typeof h> {
+  try {
+    return renderFn();
+  } catch (error) {
+    return h(ErrorBoundary, {
+      ...options,
+      children: null,
+    });
+  }
+}
+

package/lib/client/componentRegistry.test.ts

@@ -0,0 +1,165 @@
+import { test, expect, describe, beforeEach } from "bun:test";
+import { ComponentRegistry } from "./componentRegistry";
+
+describe("ComponentRegistry", () => {
+  let registry: ComponentRegistry;
+
+  beforeEach(() => {
+    registry = new ComponentRegistry();
+  });
+
+  describe("register and get", () => {
+    test("should register and retrieve a component", () => {
+      const buttonDef = {
+        type: "button",
+        props: { className: "btn" }
+      };
+
+      registry.register("Button", buttonDef);
+      const retrieved = registry.get("Button");
+
+      expect(retrieved).toEqual(buttonDef);
+    });
+
+    test("should return undefined for non-existent component", () => {
+      const result = registry.get("NonExistent");
+      expect(result).toBeUndefined();
+    });
+
+    test("should overwrite existing component with same name", () => {
+      registry.register("Button", { type: "button", props: { color: "red" } });
+      registry.register("Button", { type: "button", props: { color: "blue" } });
+
+      const result = registry.get("Button");
+      expect(result?.props.color).toBe("blue");
+    });
+  });
+
+  describe("has", () => {
+    test("should return true for registered component", () => {
+      registry.register("Card", { type: "div" });
+      expect(registry.has("Card")).toBe(true);
+    });
+
+    test("should return false for non-existent component", () => {
+      expect(registry.has("NonExistent")).toBe(false);
+    });
+  });
+
+  describe("clear", () => {
+    test("should clear all components", () => {
+      registry.register("Button", { type: "button" });
+      registry.register("Card", { type: "div" });
+
+      expect(registry.getNames().length).toBe(2);
+
+      registry.clear();
+
+      expect(registry.getNames().length).toBe(0);
+      expect(registry.has("Button")).toBe(false);
+      expect(registry.has("Card")).toBe(false);
+    });
+  });
+
+  describe("merge", () => {
+    test("should merge multiple components", () => {
+      registry.register("Button", { type: "button" });
+
+      registry.merge({
+        Card: { type: "div" },
+        Link: { type: "a" }
+      });
+
+      expect(registry.getNames().length).toBe(3);
+      expect(registry.has("Button")).toBe(true);
+      expect(registry.has("Card")).toBe(true);
+      expect(registry.has("Link")).toBe(true);
+    });
+
+    test("should overwrite existing components when merging", () => {
+      registry.register("Button", { type: "button", props: { color: "red" } });
+
+      registry.merge({
+        Button: { type: "button", props: { color: "blue" } }
+      });
+
+      const button = registry.get("Button");
+      expect(button?.props.color).toBe("blue");
+    });
+  });
+
+  describe("getAll", () => {
+    test("should return all registered components", () => {
+      registry.register("Button", { type: "button" });
+      registry.register("Card", { type: "div" });
+
+      const all = registry.getAll();
+
+      expect(Object.keys(all).length).toBe(2);
+      expect(all.Button).toBeDefined();
+      expect(all.Card).toBeDefined();
+    });
+
+    test("should return a copy, not the original registry", () => {
+      registry.register("Button", { type: "button" });
+
+      const all = registry.getAll();
+      all.NewComponent = { type: "span" };
+
+      expect(registry.has("NewComponent")).toBe(false);
+    });
+  });
+
+  describe("getNames", () => {
+    test("should return list of component names", () => {
+      registry.register("Button", { type: "button" });
+      registry.register("Card", { type: "div" });
+
+      const names = registry.getNames();
+
+      expect(names).toEqual(["Button", "Card"]);
+    });
+
+    test("should return empty array when no components", () => {
+      const names = registry.getNames();
+      expect(names).toEqual([]);
+    });
+  });
+
+  describe("remove", () => {
+    test("should remove a component and return true", () => {
+      registry.register("Button", { type: "button" });
+
+      const result = registry.remove("Button");
+
+      expect(result).toBe(true);
+      expect(registry.has("Button")).toBe(false);
+    });
+
+    test("should return false when removing non-existent component", () => {
+      const result = registry.remove("NonExistent");
+      expect(result).toBe(false);
+    });
+  });
+
+  describe("component with variants", () => {
+    test("should handle components with variant definitions", () => {
+      const buttonDef = {
+        type: "button",
+        variants: {
+          primary: { backgroundColor: "blue", color: "white" },
+          secondary: { backgroundColor: "gray", color: "black" }
+        },
+        defaultVariant: "primary"
+      };
+
+      registry.register("Button", buttonDef);
+      const retrieved = registry.get("Button");
+
+      expect(retrieved?.variants?.primary).toBeDefined();
+      expect(retrieved?.variants?.primary?.backgroundColor).toBe("blue");
+      expect(retrieved?.defaultVariant).toBe("primary");
+    });
+  });
+});
+

package/lib/client/componentRegistry.ts

@@ -0,0 +1,18 @@
+/**
+ * Component Registry
+ * Manages registration and retrieval of custom components
+ * 
+ * This now extends the base registry for consistency across client and SSR
+ */
+
+import { BaseComponentRegistry } from '../shared/registry/ComponentRegistry';
+import type { ComponentDefinition } from '../shared/types';
+
+export class ComponentRegistry extends BaseComponentRegistry {
+  // Client-specific methods can be added here
+  // For now, it uses all functionality from BaseComponentRegistry
+}
+
+// Export a singleton instance for convenience
+export const globalComponentRegistry = new ComponentRegistry();
+

package/lib/client/contexts/ThemeContext.tsx

@@ -0,0 +1,73 @@
+/**
+ * Theme Context
+ * Provides theme switching functionality to components
+ */
+
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { useThemes } from '../hooks/useColorVariables';
+
+interface ThemeContextType {
+  currentTheme: string;
+  setTheme: (themeName: string) => void;
+  themes: string[];
+  loading: boolean;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+/**
+ * Theme Provider Component
+ * Wraps the app and provides theme context to all children
+ */
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const { themes, defaultTheme, loading } = useThemes();
+  const [currentTheme, setCurrentTheme] = useState<string>('dark');
+
+  // Initialize theme from defaultTheme or localStorage
+  useEffect(() => {
+    if (defaultTheme) {
+      const savedTheme = localStorage.getItem('theme');
+      const themeToUse = savedTheme || defaultTheme;
+      setCurrentTheme(themeToUse);
+      applyTheme(themeToUse);
+    }
+  }, [defaultTheme]);
+
+  const setTheme = (themeName: string) => {
+    setCurrentTheme(themeName);
+    localStorage.setItem('theme', themeName);
+    applyTheme(themeName);
+  };
+
+  const applyTheme = (themeName: string) => {
+    // Set the theme attribute on the root element
+    const root = document.documentElement;
+    root.setAttribute('theme', themeName);
+  };
+
+  const themeNames = themes?.map(theme => theme.name) || [];
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        currentTheme,
+        setTheme,
+        themes: themeNames,
+        loading,
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+/**
+ * Hook for using the theme context
+ */
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}