meno-core 1.0.53 → 1.1.0

package/lib/client/componentRegistry.test.ts

@@ -1,136 +1,135 @@
-import { test, expect, describe, beforeEach } from "bun:test";
-import { ComponentRegistry } from "./componentRegistry";
-import type { ComponentDefinition, ComponentNode, PropDefinition } from "../shared/types";
+import { test, expect, describe, beforeEach } from 'bun:test';
+import { ComponentRegistry } from './componentRegistry';
+import type { ComponentDefinition, ComponentNode, PropDefinition } from '../shared/types';
 
 /**
  * Helper function to create a valid ComponentDefinition for tests
  */
 function createTestComponentDef(
   structure?: ComponentNode,
-  componentInterface?: Record<string, PropDefinition>
+  componentInterface?: Record<string, PropDefinition>,
 ): ComponentDefinition {
   return {
     component: {
       interface: componentInterface || {},
-      structure: structure || { type: "node" as const, tag: "div", children: [] }
-    }
+      structure: structure || { type: 'node' as const, tag: 'div', children: [] },
+    },
   };
 }
 
-describe("ComponentRegistry", () => {
+describe('ComponentRegistry', () => {
   let registry: ComponentRegistry;
 
   beforeEach(() => {
     registry = new ComponentRegistry();
   });
 
-  describe("register and get", () => {
-    test("should register and retrieve a component", () => {
-      const buttonDef = createTestComponentDef(
-        { type: "node" as const, tag: "button", children: [], attributes: { className: "btn" } }
-      );
+  describe('register and get', () => {
+    test('should register and retrieve a component', () => {
+      const buttonDef = createTestComponentDef({
+        type: 'node' as const,
+        tag: 'button',
+        children: [],
+        attributes: { className: 'btn' },
+      });
 
-      registry.register("Button", buttonDef);
-      const retrieved = registry.get("Button");
+      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");
+    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", createTestComponentDef(
-        { type: "node" as const, tag: "button", children: [], attributes: { color: "red" } }
-      ));
-      registry.register("Button", createTestComponentDef(
-        { type: "node" as const, tag: "button", children: [], attributes: { color: "blue" } }
-      ));
+    test('should overwrite existing component with same name', () => {
+      registry.register(
+        'Button',
+        createTestComponentDef({ type: 'node' as const, tag: 'button', children: [], attributes: { color: 'red' } }),
+      );
+      registry.register(
+        'Button',
+        createTestComponentDef({ type: 'node' as const, tag: 'button', children: [], attributes: { color: 'blue' } }),
+      );
 
-      const result = registry.get("Button");
+      const result = registry.get('Button');
       const structure = result?.component?.structure;
-      const attributes = structure && 'attributes' in structure ? structure.attributes as Record<string, unknown> : undefined;
-      expect(attributes?.color).toBe("blue");
+      const attributes =
+        structure && 'attributes' in structure ? (structure.attributes as Record<string, unknown>) : undefined;
+      expect(attributes?.color).toBe('blue');
     });
   });
 
-  describe("has", () => {
-    test("should return true for registered component", () => {
-      registry.register("Card", createTestComponentDef(
-        { type: "node" as const, tag: "div", children: [] }
-      ));
-      expect(registry.has("Card")).toBe(true);
+  describe('has', () => {
+    test('should return true for registered component', () => {
+      registry.register('Card', createTestComponentDef({ type: 'node' as const, tag: 'div', children: [] }));
+      expect(registry.has('Card')).toBe(true);
     });
 
-    test("should return false for non-existent component", () => {
-      expect(registry.has("NonExistent")).toBe(false);
+    test('should return false for non-existent component', () => {
+      expect(registry.has('NonExistent')).toBe(false);
     });
   });
 
-  describe("clear", () => {
-    test("should clear all components", () => {
-      registry.register("Button", createTestComponentDef(
-        { type: "node" as const, tag: "button", children: [] }
-      ));
-      registry.register("Card", createTestComponentDef(
-        { type: "node" as const, tag: "div", children: [] }
-      ));
+  describe('clear', () => {
+    test('should clear all components', () => {
+      registry.register('Button', createTestComponentDef({ type: 'node' as const, tag: 'button', children: [] }));
+      registry.register('Card', createTestComponentDef({ type: 'node' as const, tag: 'div', children: [] }));
 
       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);
+      expect(registry.has('Button')).toBe(false);
+      expect(registry.has('Card')).toBe(false);
     });
   });
 
-  describe("merge", () => {
-    test("should merge multiple components", () => {
-      registry.register("Button", createTestComponentDef(
-        { type: "node" as const, tag: "button", children: [] }
-      ));
+  describe('merge', () => {
+    test('should merge multiple components', () => {
+      registry.register('Button', createTestComponentDef({ type: 'node' as const, tag: 'button', children: [] }));
 
       registry.merge({
-        Card: createTestComponentDef({ type: "node" as const, tag: "div", children: [] }),
-        Link: createTestComponentDef({ type: "node" as const, tag: "a", children: [] })
+        Card: createTestComponentDef({ type: 'node' as const, tag: 'div', children: [] }),
+        Link: createTestComponentDef({ type: 'node' as const, tag: 'a', children: [] }),
       });
 
       expect(registry.getNames().length).toBe(3);
-      expect(registry.has("Button")).toBe(true);
-      expect(registry.has("Card")).toBe(true);
-      expect(registry.has("Link")).toBe(true);
+      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", createTestComponentDef(
-        { type: "node" as const, tag: "button", children: [], attributes: { color: "red" } }
-      ));
+    test('should overwrite existing components when merging', () => {
+      registry.register(
+        'Button',
+        createTestComponentDef({ type: 'node' as const, tag: 'button', children: [], attributes: { color: 'red' } }),
+      );
 
       registry.merge({
-        Button: createTestComponentDef(
-          { type: "node" as const, tag: "button", children: [], attributes: { color: "blue" } }
-        )
+        Button: createTestComponentDef({
+          type: 'node' as const,
+          tag: 'button',
+          children: [],
+          attributes: { color: 'blue' },
+        }),
       });
 
-      const button = registry.get("Button");
+      const button = registry.get('Button');
       const structure = button?.component?.structure;
-      const attributes = structure && 'attributes' in structure ? structure.attributes as Record<string, unknown> : undefined;
-      expect(attributes?.color).toBe("blue");
+      const attributes =
+        structure && 'attributes' in structure ? (structure.attributes as Record<string, unknown>) : undefined;
+      expect(attributes?.color).toBe('blue');
     });
   });
 
-  describe("getAll", () => {
-    test("should return all registered components", () => {
-      registry.register("Button", createTestComponentDef(
-        { type: "node" as const, tag: "button", children: [] }
-      ));
-      registry.register("Card", createTestComponentDef(
-        { type: "node" as const, tag: "div", children: [] }
-      ));
+  describe('getAll', () => {
+    test('should return all registered components', () => {
+      registry.register('Button', createTestComponentDef({ type: 'node' as const, tag: 'button', children: [] }));
+      registry.register('Card', createTestComponentDef({ type: 'node' as const, tag: 'div', children: [] }));
 
       const all = registry.getAll();
 
@@ -139,73 +138,62 @@ describe("ComponentRegistry", () => {
       expect(all.Card).toBeDefined();
     });
 
-    test("should return a copy, not the original registry", () => {
-      registry.register("Button", createTestComponentDef(
-        { type: "node" as const, tag: "button", children: [] }
-      ));
+    test('should return a copy, not the original registry', () => {
+      registry.register('Button', createTestComponentDef({ type: 'node' as const, tag: 'button', children: [] }));
 
       const all = registry.getAll();
-      all.NewComponent = createTestComponentDef(
-        { type: "node" as const, tag: "span", children: [] }
-      );
+      all.NewComponent = createTestComponentDef({ type: 'node' as const, tag: 'span', children: [] });
 
-      expect(registry.has("NewComponent")).toBe(false);
+      expect(registry.has('NewComponent')).toBe(false);
     });
   });
 
-  describe("getNames", () => {
-    test("should return list of component names", () => {
-      registry.register("Button", createTestComponentDef(
-        { type: "node" as const, tag: "button", children: [] }
-      ));
-      registry.register("Card", createTestComponentDef(
-        { type: "node" as const, tag: "div", children: [] }
-      ));
+  describe('getNames', () => {
+    test('should return list of component names', () => {
+      registry.register('Button', createTestComponentDef({ type: 'node' as const, tag: 'button', children: [] }));
+      registry.register('Card', createTestComponentDef({ type: 'node' as const, tag: 'div', children: [] }));
 
       const names = registry.getNames();
 
-      expect(names).toEqual(["Button", "Card"]);
+      expect(names).toEqual(['Button', 'Card']);
     });
 
-    test("should return empty array when no components", () => {
+    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", createTestComponentDef(
-        { type: "node" as const, tag: "button", children: [] }
-      ));
+  describe('remove', () => {
+    test('should remove a component and return true', () => {
+      registry.register('Button', createTestComponentDef({ type: 'node' as const, tag: 'button', children: [] }));
 
-      const result = registry.remove("Button");
+      const result = registry.remove('Button');
 
       expect(result).toBe(true);
-      expect(registry.has("Button")).toBe(false);
+      expect(registry.has('Button')).toBe(false);
     });
 
-    test("should return false when removing non-existent component", () => {
-      const result = registry.remove("NonExistent");
+    test('should return false when removing non-existent component', () => {
+      const result = registry.remove('NonExistent');
       expect(result).toBe(false);
     });
   });
 
-  describe("component with category", () => {
-    test("should handle components with category definitions", () => {
+  describe('component with category', () => {
+    test('should handle components with category definitions', () => {
       const buttonDef: ComponentDefinition = {
         component: {
           interface: {},
-          structure: { type: "node" as const, tag: "button", children: [] },
-          category: "buttons"
-        }
+          structure: { type: 'node' as const, tag: 'button', children: [] },
+          category: 'buttons',
+        },
       };
 
-      registry.register("Button", buttonDef);
-      const retrieved = registry.get("Button");
+      registry.register('Button', buttonDef);
+      const retrieved = registry.get('Button');
 
-      expect(retrieved?.component?.category).toBe("buttons");
+      expect(retrieved?.component?.category).toBe('buttons');
     });
   });
 });
-

package/lib/client/componentRegistry.ts

@@ -1,12 +1,11 @@
 /**
  * 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
@@ -15,4 +14,3 @@ export class ComponentRegistry extends BaseComponentRegistry {
 
 // Export a singleton instance for convenience
 export const globalComponentRegistry = new ComponentRegistry();
-

package/lib/client/contexts/ThemeContext.tsx

@@ -3,7 +3,8 @@
  * Provides theme switching functionality to components
  */
 
-import React, { createContext, useContext, useState, useEffect } from 'react';
+import type React from 'react';
+import { createContext, useContext, useState, useEffect } from 'react';
 import { useThemes } from '../hooks/useColorVariables';
 
 interface ThemeContextType {
@@ -45,7 +46,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
     root.setAttribute('theme', themeName);
   };
 
-  const themeNames = themes?.map(theme => theme.name) || [];
+  const themeNames = themes?.map((theme) => theme.name) || [];
 
   return (
     <ThemeContext.Provider