meno-core 1.0.53 → 1.1.0

package/lib/shared/interactiveStyles.test.ts

@@ -4,31 +4,28 @@
  * Covers both page and component contexts
  */
 
-import { test, expect, describe } from "bun:test";
-import {
-  generateInteractiveCSS,
-  generateAllInteractiveCSS,
-} from "./cssGeneration";
-import { generateElementClassName, type ElementClassContext } from "./elementClassName";
-import type { InteractiveStyles, ResponsiveStyleObject } from "./types/styles";
-import { DEFAULT_BREAKPOINTS } from "./breakpoints";
-
-describe("generateInteractiveCSS", () => {
-  describe("Page element styles", () => {
-    test("should generate hover styles for page element", () => {
+import { test, expect, describe } from 'bun:test';
+import { generateInteractiveCSS, generateAllInteractiveCSS } from './cssGeneration';
+import { generateElementClassName, type ElementClassContext } from './elementClassName';
+import type { InteractiveStyles, ResponsiveStyleObject } from './types/styles';
+import { DEFAULT_BREAKPOINTS } from './breakpoints';
+
+describe('generateInteractiveCSS', () => {
+  describe('Page element styles', () => {
+    test('should generate hover styles for page element', () => {
       const ctx: ElementClassContext = {
-        fileType: "page",
-        fileName: "about",
-        label: "button",
+        fileType: 'page',
+        fileName: 'about',
+        label: 'button',
         path: [0],
       };
       const elementClass = generateElementClassName(ctx);
       const interactiveStyles: InteractiveStyles = [
         {
-          postfix: ":hover",
+          postfix: ':hover',
           style: {
-            backgroundColor: "primary",
-            color: "white",
+            backgroundColor: 'primary',
+            color: 'white',
           },
         },
       ];
@@ -36,22 +33,22 @@ describe("generateInteractiveCSS", () => {
       const css = generateInteractiveCSS(elementClass, interactiveStyles);
 
       expect(css).toContain(`.${elementClass}:hover`);
-      expect(css).toContain("background-color: var(--primary)");
-      expect(css).toContain("color: var(--white)");
+      expect(css).toContain('background-color: var(--primary)');
+      expect(css).toContain('color: var(--white)');
     });
 
-    test("should generate active styles for page element", () => {
+    test('should generate active styles for page element', () => {
       const ctx: ElementClassContext = {
-        fileType: "page",
-        fileName: "index",
+        fileType: 'page',
+        fileName: 'index',
         path: [0, 1],
       };
       const elementClass = generateElementClassName(ctx);
       const interactiveStyles: InteractiveStyles = [
         {
-          postfix: ":active",
+          postfix: ':active',
           style: {
-            transform: "scale(0.98)",
+            transform: 'scale(0.98)',
           },
         },
       ];
@@ -59,23 +56,23 @@ describe("generateInteractiveCSS", () => {
       const css = generateInteractiveCSS(elementClass, interactiveStyles);
 
       expect(css).toContain(`.${elementClass}:active`);
-      expect(css).toContain("transform: scale(0.98)");
+      expect(css).toContain('transform: scale(0.98)');
     });
 
-    test("should generate focus styles for page element", () => {
+    test('should generate focus styles for page element', () => {
       const ctx: ElementClassContext = {
-        fileType: "page",
-        fileName: "contact",
-        label: "input",
+        fileType: 'page',
+        fileName: 'contact',
+        label: 'input',
         path: [0, 2],
       };
       const elementClass = generateElementClassName(ctx);
       const interactiveStyles: InteractiveStyles = [
         {
-          postfix: ":focus",
+          postfix: ':focus',
           style: {
-            outline: "2px solid var(--primary)",
-            outlineOffset: "2px",
+            outline: '2px solid var(--primary)',
+            outlineOffset: '2px',
           },
         },
       ];
@@ -83,23 +80,23 @@ describe("generateInteractiveCSS", () => {
       const css = generateInteractiveCSS(elementClass, interactiveStyles);
 
       expect(css).toContain(`.${elementClass}:focus`);
-      expect(css).toContain("outline: 2px solid var(--primary)");
+      expect(css).toContain('outline: 2px solid var(--primary)');
     });
   });
 
-  describe("Component element styles", () => {
-    test("should generate hover styles for component element", () => {
+  describe('Component element styles', () => {
+    test('should generate hover styles for component element', () => {
       const ctx: ElementClassContext = {
-        fileType: "component",
-        fileName: "Button",
+        fileType: 'component',
+        fileName: 'Button',
         path: [0],
       };
       const elementClass = generateElementClassName(ctx);
       const interactiveStyles: InteractiveStyles = [
         {
-          postfix: ":hover",
+          postfix: ':hover',
           style: {
-            backgroundColor: "primary-dark",
+            backgroundColor: 'primary-dark',
           },
         },
       ];
@@ -109,22 +106,22 @@ describe("generateInteractiveCSS", () => {
       // Component class should have c_ prefix
       expect(elementClass).toMatch(/^c_button_/);
       expect(css).toContain(`.${elementClass}:hover`);
-      expect(css).toContain("background-color: var(--primary-dark)");
+      expect(css).toContain('background-color: var(--primary-dark)');
     });
 
-    test("should generate interactive styles for named component element", () => {
+    test('should generate interactive styles for named component element', () => {
       const ctx: ElementClassContext = {
-        fileType: "component",
-        fileName: "Navigation",
-        label: "hamburger",
+        fileType: 'component',
+        fileName: 'Navigation',
+        label: 'hamburger',
         path: [0, 0],
       };
       const elementClass = generateElementClassName(ctx);
       const interactiveStyles: InteractiveStyles = [
         {
-          postfix: ":hover",
+          postfix: ':hover',
           style: {
-            opacity: "0.8",
+            opacity: '0.8',
           },
         },
       ];
@@ -132,57 +129,57 @@ describe("generateInteractiveCSS", () => {
       const css = generateInteractiveCSS(elementClass, interactiveStyles);
 
       // Named element should have predictable class
-      expect(elementClass).toBe("c_navigation_hamburger");
-      expect(css).toContain(".c_navigation_hamburger:hover");
-      expect(css).toContain("opacity: 0.8");
+      expect(elementClass).toBe('c_navigation_hamburger');
+      expect(css).toContain('.c_navigation_hamburger:hover');
+      expect(css).toContain('opacity: 0.8');
     });
 
-    test("should generate multiple interactive states for component", () => {
+    test('should generate multiple interactive states for component', () => {
       const ctx: ElementClassContext = {
-        fileType: "component",
-        fileName: "Card",
-        label: "link",
+        fileType: 'component',
+        fileName: 'Card',
+        label: 'link',
         path: [0, 1],
       };
       const elementClass = generateElementClassName(ctx);
       const interactiveStyles: InteractiveStyles = [
         {
-          postfix: ":hover",
-          style: { color: "primary" },
+          postfix: ':hover',
+          style: { color: 'primary' },
         },
         {
-          postfix: ":active",
-          style: { color: "primary-dark" },
+          postfix: ':active',
+          style: { color: 'primary-dark' },
         },
         {
-          postfix: ":focus",
-          style: { outline: "none", boxShadow: "0 0 0 2px var(--primary)" },
+          postfix: ':focus',
+          style: { outline: 'none', boxShadow: '0 0 0 2px var(--primary)' },
         },
       ];
 
       const css = generateInteractiveCSS(elementClass, interactiveStyles);
 
-      expect(css).toContain(".c_card_link:hover");
-      expect(css).toContain(".c_card_link:active");
-      expect(css).toContain(".c_card_link:focus");
+      expect(css).toContain('.c_card_link:hover');
+      expect(css).toContain('.c_card_link:active');
+      expect(css).toContain('.c_card_link:focus');
     });
   });
 
-  describe("Prefix selectors (checkbox/sibling patterns)", () => {
-    test("should handle prefix selector for toggle pattern", () => {
+  describe('Prefix selectors (checkbox/sibling patterns)', () => {
+    test('should handle prefix selector for toggle pattern', () => {
       const ctx: ElementClassContext = {
-        fileType: "component",
-        fileName: "Navigation",
-        label: "menu",
+        fileType: 'component',
+        fileName: 'Navigation',
+        label: 'menu',
         path: [0, 1],
       };
       const elementClass = generateElementClassName(ctx);
       const interactiveStyles: InteractiveStyles = [
         {
-          prefix: "#menu-toggle:checked ~ ",
-          postfix: "",
+          prefix: '#menu-toggle:checked ~ ',
+          postfix: '',
           style: {
-            display: "block",
+            display: 'block',
           },
         },
       ];
@@ -190,239 +187,219 @@ describe("generateInteractiveCSS", () => {
       const css = generateInteractiveCSS(elementClass, interactiveStyles);
 
       // Prefix selectors should come before the class
-      expect(css).toContain("#menu-toggle:checked ~ .c_navigation_menu");
-      expect(css).toContain("display: block");
+      expect(css).toContain('#menu-toggle:checked ~ .c_navigation_menu');
+      expect(css).toContain('display: block');
     });
 
-    test("should handle prefix selector with complex sibling", () => {
+    test('should handle prefix selector with complex sibling', () => {
       const ctx: ElementClassContext = {
-        fileType: "component",
-        fileName: "Accordion",
-        label: "content",
+        fileType: 'component',
+        fileName: 'Accordion',
+        label: 'content',
         path: [0, 0, 1],
       };
       const elementClass = generateElementClassName(ctx);
       const interactiveStyles: InteractiveStyles = [
         {
-          prefix: "input:checked + label + ",
-          postfix: "",
+          prefix: 'input:checked + label + ',
+          postfix: '',
           style: {
-            maxHeight: "500px",
-            opacity: "1",
+            maxHeight: '500px',
+            opacity: '1',
           },
         },
       ];
 
       const css = generateInteractiveCSS(elementClass, interactiveStyles);
 
-      expect(css).toContain("input:checked + label + .c_accordion_content");
+      expect(css).toContain('input:checked + label + .c_accordion_content');
     });
   });
 
-  describe("Responsive interactive styles", () => {
-    test("should generate responsive hover styles with breakpoints", () => {
+  describe('Responsive interactive styles', () => {
+    test('should generate responsive hover styles with breakpoints', () => {
       const ctx: ElementClassContext = {
-        fileType: "page",
-        fileName: "index",
-        label: "hero-button",
+        fileType: 'page',
+        fileName: 'index',
+        label: 'hero-button',
         path: [0, 0],
       };
       const elementClass = generateElementClassName(ctx);
       const interactiveStyles: InteractiveStyles = [
         {
-          postfix: ":hover",
+          postfix: ':hover',
           style: {
             base: {
-              padding: "20px 40px",
+              padding: '20px 40px',
             },
             tablet: {
-              padding: "16px 32px",
+              padding: '16px 32px',
             },
             mobile: {
-              padding: "12px 24px",
+              padding: '12px 24px',
             },
           } as ResponsiveStyleObject,
         },
       ];
 
-      const css = generateInteractiveCSS(
-        elementClass,
-        interactiveStyles,
-        DEFAULT_BREAKPOINTS
-      );
+      const css = generateInteractiveCSS(elementClass, interactiveStyles, DEFAULT_BREAKPOINTS);
 
       // Base styles
-      expect(css).toContain(".p_index_hero-button:hover");
-      expect(css).toContain("padding: 20px 40px");
+      expect(css).toContain('.p_index_hero-button:hover');
+      expect(css).toContain('padding: 20px 40px');
 
       // Tablet breakpoint
-      expect(css).toContain("@media (max-width: 1024px)");
-      expect(css).toContain("padding: 16px 32px");
+      expect(css).toContain('@media (max-width: 1024px)');
+      expect(css).toContain('padding: 16px 32px');
 
       // Mobile breakpoint
-      expect(css).toContain("@media (max-width: 540px)");
-      expect(css).toContain("padding: 12px 24px");
+      expect(css).toContain('@media (max-width: 540px)');
+      expect(css).toContain('padding: 12px 24px');
     });
 
-    test("should generate responsive styles for component element", () => {
+    test('should generate responsive styles for component element', () => {
       const ctx: ElementClassContext = {
-        fileType: "component",
-        fileName: "Card",
-        label: "container",
+        fileType: 'component',
+        fileName: 'Card',
+        label: 'container',
         path: [0],
       };
       const elementClass = generateElementClassName(ctx);
       const interactiveStyles: InteractiveStyles = [
         {
-          postfix: ":hover",
+          postfix: ':hover',
           style: {
             base: {
-              boxShadow: "0 8px 24px rgba(0,0,0,0.15)",
+              boxShadow: '0 8px 24px rgba(0,0,0,0.15)',
             },
             tablet: {
-              boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
+              boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
             },
           } as ResponsiveStyleObject,
         },
       ];
 
-      const css = generateInteractiveCSS(
-        elementClass,
-        interactiveStyles,
-        DEFAULT_BREAKPOINTS
-      );
+      const css = generateInteractiveCSS(elementClass, interactiveStyles, DEFAULT_BREAKPOINTS);
 
-      expect(css).toContain(".c_card_container:hover");
-      expect(css).toContain("box-shadow: 0 8px 24px rgba(0,0,0,0.15)");
-      expect(css).toContain("@media (max-width: 1024px)");
+      expect(css).toContain('.c_card_container:hover');
+      expect(css).toContain('box-shadow: 0 8px 24px rgba(0,0,0,0.15)');
+      expect(css).toContain('@media (max-width: 1024px)');
     });
   });
 });
 
-describe("generateAllInteractiveCSS", () => {
-  test("should generate CSS for multiple page elements", () => {
+describe('generateAllInteractiveCSS', () => {
+  test('should generate CSS for multiple page elements', () => {
     const stylesMap = new Map<string, InteractiveStyles>();
 
     // First element
     const ctx1: ElementClassContext = {
-      fileType: "page",
-      fileName: "index",
-      label: "button1",
+      fileType: 'page',
+      fileName: 'index',
+      label: 'button1',
       path: [0],
     };
-    stylesMap.set(generateElementClassName(ctx1), [
-      { postfix: ":hover", style: { backgroundColor: "primary" } },
-    ]);
+    stylesMap.set(generateElementClassName(ctx1), [{ postfix: ':hover', style: { backgroundColor: 'primary' } }]);
 
     // Second element
     const ctx2: ElementClassContext = {
-      fileType: "page",
-      fileName: "index",
-      label: "button2",
+      fileType: 'page',
+      fileName: 'index',
+      label: 'button2',
       path: [1],
     };
-    stylesMap.set(generateElementClassName(ctx2), [
-      { postfix: ":hover", style: { backgroundColor: "secondary" } },
-    ]);
+    stylesMap.set(generateElementClassName(ctx2), [{ postfix: ':hover', style: { backgroundColor: 'secondary' } }]);
 
     const css = generateAllInteractiveCSS(stylesMap, DEFAULT_BREAKPOINTS);
 
-    expect(css).toContain(".p_index_button1:hover");
-    expect(css).toContain(".p_index_button2:hover");
-    expect(css).toContain("background-color: var(--primary)");
-    expect(css).toContain("background-color: var(--secondary)");
+    expect(css).toContain('.p_index_button1:hover');
+    expect(css).toContain('.p_index_button2:hover');
+    expect(css).toContain('background-color: var(--primary)');
+    expect(css).toContain('background-color: var(--secondary)');
   });
 
-  test("should generate CSS for multiple component elements", () => {
+  test('should generate CSS for multiple component elements', () => {
     const stylesMap = new Map<string, InteractiveStyles>();
 
     // Component element 1
     const ctx1: ElementClassContext = {
-      fileType: "component",
-      fileName: "Button",
+      fileType: 'component',
+      fileName: 'Button',
       path: [0],
     };
-    stylesMap.set(generateElementClassName(ctx1), [
-      { postfix: ":hover", style: { opacity: "0.9" } },
-    ]);
+    stylesMap.set(generateElementClassName(ctx1), [{ postfix: ':hover', style: { opacity: '0.9' } }]);
 
     // Component element 2
     const ctx2: ElementClassContext = {
-      fileType: "component",
-      fileName: "Card",
-      label: "header",
+      fileType: 'component',
+      fileName: 'Card',
+      label: 'header',
       path: [0, 0],
     };
-    stylesMap.set(generateElementClassName(ctx2), [
-      { postfix: ":hover", style: { color: "primary" } },
-    ]);
+    stylesMap.set(generateElementClassName(ctx2), [{ postfix: ':hover', style: { color: 'primary' } }]);
 
     const css = generateAllInteractiveCSS(stylesMap, DEFAULT_BREAKPOINTS);
 
     expect(css).toMatch(/\.c_button_\w+:hover/);
-    expect(css).toContain(".c_card_header:hover");
+    expect(css).toContain('.c_card_header:hover');
   });
 
-  test("should generate CSS for mixed page and component elements", () => {
+  test('should generate CSS for mixed page and component elements', () => {
     const stylesMap = new Map<string, InteractiveStyles>();
 
     // Page element
     const pageCtx: ElementClassContext = {
-      fileType: "page",
-      fileName: "about",
-      label: "cta",
+      fileType: 'page',
+      fileName: 'about',
+      label: 'cta',
       path: [0, 2],
     };
-    stylesMap.set(generateElementClassName(pageCtx), [
-      { postfix: ":hover", style: { transform: "scale(1.05)" } },
-    ]);
+    stylesMap.set(generateElementClassName(pageCtx), [{ postfix: ':hover', style: { transform: 'scale(1.05)' } }]);
 
     // Component element
     const compCtx: ElementClassContext = {
-      fileType: "component",
-      fileName: "Navigation",
-      label: "link",
+      fileType: 'component',
+      fileName: 'Navigation',
+      label: 'link',
       path: [0, 1],
     };
-    stylesMap.set(generateElementClassName(compCtx), [
-      { postfix: ":hover", style: { color: "primary" } },
-    ]);
+    stylesMap.set(generateElementClassName(compCtx), [{ postfix: ':hover', style: { color: 'primary' } }]);
 
     const css = generateAllInteractiveCSS(stylesMap, DEFAULT_BREAKPOINTS);
 
     // Should contain both page and component styles
-    expect(css).toContain(".p_about_cta:hover");
-    expect(css).toContain(".c_navigation_link:hover");
+    expect(css).toContain('.p_about_cta:hover');
+    expect(css).toContain('.c_navigation_link:hover');
   });
 
-  test("should return empty string for empty map", () => {
+  test('should return empty string for empty map', () => {
     const stylesMap = new Map<string, InteractiveStyles>();
 
     const css = generateAllInteractiveCSS(stylesMap, DEFAULT_BREAKPOINTS);
 
-    expect(css).toBe("");
+    expect(css).toBe('');
   });
 });
 
-describe("Interactive styles class consistency", () => {
+describe('Interactive styles class consistency', () => {
   /**
    * These tests verify that the same element class is generated
    * for the same component element regardless of where the component
    * is placed on a page.
    */
-  describe("Component path independence", () => {
-    test("same relative path produces same class for same component", () => {
+  describe('Component path independence', () => {
+    test('same relative path produces same class for same component', () => {
       // When a Button component is on a page, the root element
       // should always get the same class regardless of page position
       const ctx1: ElementClassContext = {
-        fileType: "component",
-        fileName: "Button",
+        fileType: 'component',
+        fileName: 'Button',
         path: [0], // Relative to component root
       };
 
       const ctx2: ElementClassContext = {
-        fileType: "component",
-        fileName: "Button",
+        fileType: 'component',
+        fileName: 'Button',
         path: [0], // Same relative path
       };
 
@@ -432,45 +409,45 @@ describe("Interactive styles class consistency", () => {
       expect(class1).toBe(class2);
     });
 
-    test("CSS can be generated once and reused for component instances", () => {
+    test('CSS can be generated once and reused for component instances', () => {
       // Generate CSS for a component's interactive styles once
       const ctx: ElementClassContext = {
-        fileType: "component",
-        fileName: "Button",
-        label: "root",
+        fileType: 'component',
+        fileName: 'Button',
+        label: 'root',
         path: [0],
       };
       const elementClass = generateElementClassName(ctx);
 
       const interactiveStyles: InteractiveStyles = [
-        { postfix: ":hover", style: { backgroundColor: "primary" } },
-        { postfix: ":active", style: { backgroundColor: "primary-dark" } },
+        { postfix: ':hover', style: { backgroundColor: 'primary' } },
+        { postfix: ':active', style: { backgroundColor: 'primary-dark' } },
       ];
 
       const css = generateInteractiveCSS(elementClass, interactiveStyles);
 
       // The CSS uses the component class, not page-specific classes
-      expect(css).toContain(".c_button_root:hover");
-      expect(css).toContain(".c_button_root:active");
+      expect(css).toContain('.c_button_root:hover');
+      expect(css).toContain('.c_button_root:active');
 
       // This CSS can be applied to any instance of the Button component
       // because all instances will have the same element class
     });
   });
 
-  describe("Page vs Component class differentiation", () => {
-    test("page and component elements with same name have different classes", () => {
+  describe('Page vs Component class differentiation', () => {
+    test('page and component elements with same name have different classes', () => {
       const pageCtx: ElementClassContext = {
-        fileType: "page",
-        fileName: "button", // Page named "button"
-        label: "root",
+        fileType: 'page',
+        fileName: 'button', // Page named "button"
+        label: 'root',
         path: [0],
       };
 
       const compCtx: ElementClassContext = {
-        fileType: "component",
-        fileName: "button", // Component named "button"
-        label: "root",
+        fileType: 'component',
+        fileName: 'button', // Component named "button"
+        label: 'root',
         path: [0],
       };
 

package/lib/shared/interfaces/contentProvider.ts

@@ -105,7 +105,7 @@ export interface ComponentProvider {
 /** Schema info extracted from a page file */
 export interface CMSSchemaInfo {
   schema: CMSSchema;
-  pagePath: string;  // Path to the page file containing this schema
+  pagePath: string; // Path to the page file containing this schema
 }
 
 /**