meno-core 1.0.0

package/lib/shared/attributeNodeUtils.test.ts

@@ -0,0 +1,152 @@
+import { describe, test, expect } from 'bun:test';
+import { extractAttributesFromNode, applyAttributesToNode } from './attributeNodeUtils';
+import type { ComponentNode } from './types';
+
+describe('attributeNodeUtils', () => {
+  describe('extractAttributesFromNode', () => {
+    test('returns empty object for null/undefined node', () => {
+      expect(extractAttributesFromNode(null as any)).toEqual({});
+      expect(extractAttributesFromNode(undefined as any)).toEqual({});
+    });
+
+    test('returns empty object for node without attributes', () => {
+      const node: ComponentNode = { type: 'html', tag: 'div' };
+      expect(extractAttributesFromNode(node)).toEqual({});
+    });
+
+    test('extracts attributes from node with attributes', () => {
+      const node: ComponentNode = {
+        type: 'html',
+        tag: 'div',
+        attributes: { id: 'test', disabled: true, tabIndex: 0 }
+      };
+      expect(extractAttributesFromNode(node)).toEqual({
+        id: 'test',
+        disabled: true,
+        tabIndex: 0
+      });
+    });
+
+    test('returns empty object for node with empty attributes object', () => {
+      const node: ComponentNode = {
+        type: 'html',
+        tag: 'div',
+        attributes: {}
+      };
+      expect(extractAttributesFromNode(node)).toEqual({});
+    });
+
+    test('handles various attribute types correctly', () => {
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'input',
+        attributes: {
+          type: 'text',
+          required: true,
+          maxLength: 100,
+          placeholder: 'Enter text'
+        }
+      };
+      expect(extractAttributesFromNode(node)).toEqual({
+        type: 'text',
+        required: true,
+        maxLength: 100,
+        placeholder: 'Enter text'
+      });
+    });
+
+    test('returns empty object for non-object node', () => {
+      expect(extractAttributesFromNode('string' as any)).toEqual({});
+      expect(extractAttributesFromNode(123 as any)).toEqual({});
+    });
+  });
+
+  describe('applyAttributesToNode', () => {
+    test('returns node unchanged when attributes are null', () => {
+      const node: ComponentNode = { type: 'node', tag: 'div' };
+      expect(applyAttributesToNode(node, null)).toEqual(node);
+    });
+
+    test('returns node unchanged when attributes are undefined', () => {
+      const node: ComponentNode = { type: 'node', tag: 'div' };
+      expect(applyAttributesToNode(node, undefined)).toEqual(node);
+    });
+
+    test('returns node unchanged when attributes are empty', () => {
+      const node: ComponentNode = { type: 'node', tag: 'div' };
+      expect(applyAttributesToNode(node, {})).toEqual(node);
+    });
+
+    test('applies attributes to html node', () => {
+      const node: ComponentNode = { type: 'node', tag: 'div' };
+      const result = applyAttributesToNode(node, { id: 'test', className: 'btn' });
+      expect(result).toEqual({
+        type: 'node',
+        tag: 'div',
+        attributes: { id: 'test', className: 'btn' }
+      });
+    });
+
+    test('merges with existing attributes', () => {
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        attributes: { id: 'original', disabled: true }
+      };
+      const result = applyAttributesToNode(node, { className: 'new', tabIndex: 0 });
+      expect(result).toEqual({
+        type: 'node',
+        tag: 'div',
+        attributes: {
+          id: 'original',
+          disabled: true,
+          className: 'new',
+          tabIndex: 0
+        }
+      });
+    });
+
+    test('overwrites existing attributes with same key', () => {
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        attributes: { id: 'original', className: 'old' }
+      };
+      const result = applyAttributesToNode(node, { className: 'new' });
+      expect(result.attributes).toEqual({
+        id: 'original',
+        className: 'new'
+      });
+    });
+
+    test('works with component nodes', () => {
+      const node: ComponentNode = {
+        type: 'component',
+        name: 'Button'
+      };
+      const result = applyAttributesToNode(node, { disabled: true });
+      expect(result).toEqual({
+        type: 'component',
+        name: 'Button',
+        attributes: { disabled: true }
+      });
+    });
+
+    test('returns node unchanged for text nodes', () => {
+      const node: ComponentNode = { type: 'text', value: 'Hello' };
+      const result = applyAttributesToNode(node, { className: 'test' });
+      expect(result).toEqual(node);
+    });
+
+    test('does not mutate original node', () => {
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        attributes: { id: 'original' }
+      };
+      const original = JSON.stringify(node);
+      applyAttributesToNode(node, { className: 'new' });
+      expect(JSON.stringify(node)).toEqual(original);
+    });
+  });
+});

package/lib/shared/attributeNodeUtils.ts

@@ -0,0 +1,50 @@
+/**
+ * Utilities for working with attributes in ComponentNode structures
+ * Provides helper functions for extracting and applying attributes based on node type
+ */
+
+import type { ComponentNode } from './types';
+import { isComponentNode, isHtmlNode } from './nodeUtils';
+
+/**
+ * Extract attributes from a ComponentNode
+ * Attributes are stored at the top level of the node (like styles)
+ * Returns a record of attributes ready for React props
+ */
+export function extractAttributesFromNode(
+  node: ComponentNode
+): Record<string, string | number | boolean> {
+  if (!node || typeof node !== 'object') {
+    return {};
+  }
+
+  // Attributes are stored at top level for both HTML nodes and component instances
+  if ('attributes' in node && node.attributes) {
+    return node.attributes as Record<string, string | number | boolean>;
+  }
+
+  return {};
+}
+
+/**
+ * Apply attributes to a ComponentNode
+ * Attributes go at top level (node.attributes)
+ */
+export function applyAttributesToNode(
+  node: ComponentNode,
+  attributes: Record<string, string | number | boolean> | null | undefined
+): ComponentNode {
+  if (!attributes || Object.keys(attributes).length === 0) {
+    return node;
+  }
+
+  if (isComponentNode(node) || isHtmlNode(node)) {
+    return {
+      ...node,
+      attributes: { ...(node.attributes || {}), ...attributes }
+    };
+  }
+
+  return node;
+}
+

package/lib/shared/breakpoints.test.ts

@@ -0,0 +1,166 @@
+import { describe, test, expect } from 'bun:test';
+import { getAllBreakpointNames, getBreakpointName, DEFAULT_BREAKPOINTS } from './breakpoints';
+import type { BreakpointConfig } from './breakpoints';
+
+/**
+ * breakpoints Tests
+ * Tests responsive breakpoint utilities
+ */
+
+describe('breakpoints', () => {
+  describe('DEFAULT_BREAKPOINTS', () => {
+    test('should have tablet and mobile breakpoints', () => {
+      expect(DEFAULT_BREAKPOINTS.tablet).toBe(1024);
+      expect(DEFAULT_BREAKPOINTS.mobile).toBe(540);
+    });
+  });
+
+  describe('getAllBreakpointNames', () => {
+    test('should return base plus default breakpoints', () => {
+      const names = getAllBreakpointNames();
+      expect(names).toContain('base');
+      expect(names).toContain('tablet');
+      expect(names).toContain('mobile');
+      expect(names.length).toBe(3);
+    });
+
+    test('should have base as first element', () => {
+      const names = getAllBreakpointNames();
+      expect(names[0]).toBe('base');
+    });
+
+    test('should sort breakpoints by value descending', () => {
+      // tablet (1024) should come before mobile (540)
+      const names = getAllBreakpointNames();
+      const tabletIndex = names.indexOf('tablet');
+      const mobileIndex = names.indexOf('mobile');
+      expect(tabletIndex).toBeLessThan(mobileIndex);
+    });
+
+    test('should handle custom breakpoints', () => {
+      const customBreakpoints: BreakpointConfig = {
+        large: 1440,
+        medium: 960,
+        small: 480,
+      };
+      const names = getAllBreakpointNames(customBreakpoints);
+      expect(names).toEqual(['base', 'large', 'medium', 'small']);
+    });
+
+    test('should sort custom breakpoints correctly', () => {
+      const customBreakpoints: BreakpointConfig = {
+        xs: 320,
+        xl: 1920,
+        md: 768,
+        sm: 480,
+        lg: 1280,
+      };
+      const names = getAllBreakpointNames(customBreakpoints);
+      expect(names).toEqual(['base', 'xl', 'lg', 'md', 'sm', 'xs']);
+    });
+
+    test('should handle empty breakpoints config', () => {
+      const names = getAllBreakpointNames({});
+      expect(names).toEqual(['base']);
+    });
+
+    test('should handle single breakpoint', () => {
+      const names = getAllBreakpointNames({ mobile: 640 });
+      expect(names).toEqual(['base', 'mobile']);
+    });
+
+    test('should handle breakpoints with same values', () => {
+      const customBreakpoints: BreakpointConfig = {
+        a: 1024,
+        b: 1024,
+        c: 540,
+      };
+      const names = getAllBreakpointNames(customBreakpoints);
+      expect(names).toContain('base');
+      expect(names).toContain('a');
+      expect(names).toContain('b');
+      expect(names).toContain('c');
+      expect(names.length).toBe(4);
+    });
+  });
+
+  describe('getBreakpointName', () => {
+    test('should return base for large viewport', () => {
+      expect(getBreakpointName(1920)).toBe('base');
+      expect(getBreakpointName(1440)).toBe('base');
+      expect(getBreakpointName(1200)).toBe('base');
+    });
+
+    test('should return tablet for tablet viewport', () => {
+      expect(getBreakpointName(1024)).toBe('tablet');
+      expect(getBreakpointName(1000)).toBe('tablet');
+      expect(getBreakpointName(768)).toBe('tablet');
+    });
+
+    test('should return mobile for mobile viewport', () => {
+      expect(getBreakpointName(540)).toBe('mobile');
+      expect(getBreakpointName(480)).toBe('mobile');
+      expect(getBreakpointName(320)).toBe('mobile');
+    });
+
+    test('should handle edge cases at breakpoint boundaries', () => {
+      // At exactly the breakpoint value
+      expect(getBreakpointName(1024)).toBe('tablet');
+      expect(getBreakpointName(540)).toBe('mobile');
+
+      // Just above breakpoint
+      expect(getBreakpointName(1025)).toBe('base');
+      expect(getBreakpointName(541)).toBe('tablet');
+    });
+
+    test('should work with custom breakpoints', () => {
+      const customBreakpoints: BreakpointConfig = {
+        large: 1440,
+        medium: 960,
+        small: 480,
+      };
+
+      expect(getBreakpointName(1920, customBreakpoints)).toBe('base');
+      expect(getBreakpointName(1440, customBreakpoints)).toBe('large');
+      expect(getBreakpointName(1200, customBreakpoints)).toBe('large');
+      expect(getBreakpointName(960, customBreakpoints)).toBe('medium');
+      expect(getBreakpointName(800, customBreakpoints)).toBe('medium');
+      expect(getBreakpointName(480, customBreakpoints)).toBe('small');
+      expect(getBreakpointName(320, customBreakpoints)).toBe('small');
+    });
+
+    test('should handle empty breakpoints config', () => {
+      expect(getBreakpointName(1024, {})).toBe('base');
+      expect(getBreakpointName(320, {})).toBe('base');
+    });
+
+    test('should handle very small viewport', () => {
+      expect(getBreakpointName(1)).toBe('mobile');
+      expect(getBreakpointName(100)).toBe('mobile');
+    });
+
+    test('should handle very large viewport', () => {
+      expect(getBreakpointName(3840)).toBe('base');
+      expect(getBreakpointName(10000)).toBe('base');
+    });
+
+    test('should handle zero viewport', () => {
+      expect(getBreakpointName(0)).toBe('mobile');
+    });
+
+    test('should find correct breakpoint when multiple are similar', () => {
+      const customBreakpoints: BreakpointConfig = {
+        a: 1000,
+        b: 999,
+        c: 500,
+      };
+
+      expect(getBreakpointName(1001, customBreakpoints)).toBe('base');
+      expect(getBreakpointName(1000, customBreakpoints)).toBe('a');
+      expect(getBreakpointName(999, customBreakpoints)).toBe('b');
+      expect(getBreakpointName(998, customBreakpoints)).toBe('b');
+      expect(getBreakpointName(500, customBreakpoints)).toBe('c');
+      expect(getBreakpointName(499, customBreakpoints)).toBe('c');
+    });
+  });
+});

package/lib/shared/breakpoints.ts

@@ -0,0 +1,65 @@
+/**
+ * Shared Breakpoint Configuration
+ * Defines breakpoints for responsive design
+ * Supports dynamic breakpoints from project.config.json
+ */
+
+export const DEFAULT_BREAKPOINTS = {
+  tablet: 1024,
+  mobile: 540,
+} as const;
+
+// BreakpointConfig now supports any breakpoint names from config
+export type BreakpointConfig = Record<string, number>;
+
+// BreakpointName is now a string to support dynamic breakpoints
+export type BreakpointName = string;
+
+/**
+ * Get all breakpoint names from the breakpoint configuration
+ * Always includes 'base' plus all keys from the config
+ * Order: base (desktop) -> breakpoints sorted by value descending (largest to smallest viewport)
+ */
+export function getAllBreakpointNames(
+  breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS
+): BreakpointName[] {
+  // Base is always included first
+  const names: BreakpointName[] = ['base'];
+  
+  // Get all breakpoint names from config and sort by value (descending)
+  // This ensures proper order: largest viewport first
+  const breakpointEntries = Object.entries(breakpoints);
+  breakpointEntries.sort((a, b) => b[1] - a[1]); // Sort descending by value
+  
+  // Add breakpoint names in sorted order
+  for (const [name] of breakpointEntries) {
+    names.push(name);
+  }
+  
+  return names;
+}
+
+/**
+ * Get active breakpoint name based on viewport width
+ * Returns the smallest breakpoint that the viewport width is less than or equal to
+ * If viewport is larger than all breakpoints, returns 'base'
+ */
+export function getBreakpointName(
+  viewportWidth: number,
+  breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS
+): BreakpointName {
+  // Sort breakpoints by value (ascending) to find the smallest one that matches
+  const breakpointEntries = Object.entries(breakpoints);
+  breakpointEntries.sort((a, b) => a[1] - b[1]); // Sort ascending by value
+  
+  // Find the smallest breakpoint that viewport width is <= to
+  for (const [name, value] of breakpointEntries) {
+    if (viewportWidth <= value) {
+      return name;
+    }
+  }
+  
+  // If viewport is larger than all breakpoints, return 'base'
+  return 'base';
+}
+

package/lib/shared/colorProperties.test.ts

@@ -0,0 +1,111 @@
+import { describe, test, expect } from 'bun:test';
+import { isColorProperty, getColorProperties } from './colorProperties';
+
+/**
+ * colorProperties Tests
+ * Tests color property identification and utilities
+ */
+
+describe('colorProperties', () => {
+  describe('isColorProperty', () => {
+    test('should identify standard color properties', () => {
+      expect(isColorProperty('color')).toBe(true);
+      expect(isColorProperty('backgroundColor')).toBe(true);
+      expect(isColorProperty('borderColor')).toBe(true);
+    });
+
+    test('should identify border color properties', () => {
+      expect(isColorProperty('borderTopColor')).toBe(true);
+      expect(isColorProperty('borderRightColor')).toBe(true);
+      expect(isColorProperty('borderBottomColor')).toBe(true);
+      expect(isColorProperty('borderLeftColor')).toBe(true);
+    });
+
+    test('should identify SVG color properties', () => {
+      expect(isColorProperty('fill')).toBe(true);
+      expect(isColorProperty('stroke')).toBe(true);
+      expect(isColorProperty('floodColor')).toBe(true);
+      expect(isColorProperty('lightingColor')).toBe(true);
+      expect(isColorProperty('stopColor')).toBe(true);
+    });
+
+    test('should identify misc color properties', () => {
+      expect(isColorProperty('outlineColor')).toBe(true);
+      expect(isColorProperty('textDecorationColor')).toBe(true);
+      expect(isColorProperty('caretColor')).toBe(true);
+      expect(isColorProperty('columnRuleColor')).toBe(true);
+    });
+
+    test('should return false for non-color properties', () => {
+      expect(isColorProperty('width')).toBe(false);
+      expect(isColorProperty('height')).toBe(false);
+      expect(isColorProperty('fontSize')).toBe(false);
+      expect(isColorProperty('padding')).toBe(false);
+      expect(isColorProperty('margin')).toBe(false);
+      expect(isColorProperty('display')).toBe(false);
+    });
+
+    test('should be case-sensitive', () => {
+      expect(isColorProperty('Color')).toBe(false);
+      expect(isColorProperty('COLOR')).toBe(false);
+      expect(isColorProperty('BackgroundColor')).toBe(false);
+    });
+
+    test('should return false for empty string', () => {
+      expect(isColorProperty('')).toBe(false);
+    });
+
+    test('should return false for undefined-like values', () => {
+      expect(isColorProperty('undefined')).toBe(false);
+      expect(isColorProperty('null')).toBe(false);
+    });
+  });
+
+  describe('getColorProperties', () => {
+    test('should return an array of color properties', () => {
+      const properties = getColorProperties();
+      expect(Array.isArray(properties)).toBe(true);
+      expect(properties.length).toBeGreaterThan(0);
+    });
+
+    test('should include standard color properties', () => {
+      const properties = getColorProperties();
+      expect(properties).toContain('color');
+      expect(properties).toContain('backgroundColor');
+      expect(properties).toContain('borderColor');
+    });
+
+    test('should include all border color properties', () => {
+      const properties = getColorProperties();
+      expect(properties).toContain('borderTopColor');
+      expect(properties).toContain('borderRightColor');
+      expect(properties).toContain('borderBottomColor');
+      expect(properties).toContain('borderLeftColor');
+    });
+
+    test('should include SVG color properties', () => {
+      const properties = getColorProperties();
+      expect(properties).toContain('fill');
+      expect(properties).toContain('stroke');
+    });
+
+    test('should return a new array each time', () => {
+      const properties1 = getColorProperties();
+      const properties2 = getColorProperties();
+      expect(properties1).not.toBe(properties2);
+      expect(properties1).toEqual(properties2);
+    });
+
+    test('should have expected number of properties', () => {
+      const properties = getColorProperties();
+      // Based on the implementation, there should be 16 color properties
+      expect(properties.length).toBe(16);
+    });
+
+    test('should return unique properties', () => {
+      const properties = getColorProperties();
+      const uniqueProperties = [...new Set(properties)];
+      expect(properties.length).toBe(uniqueProperties.length);
+    });
+  });
+});

package/lib/shared/colorProperties.ts

@@ -0,0 +1,40 @@
+/**
+ * Color Property Utilities
+ * Helps identify and work with CSS properties that accept color values
+ */
+
+/**
+ * List of CSS properties that accept color values
+ */
+const COLOR_PROPERTIES = new Set([
+  'color',
+  'backgroundColor',
+  'borderColor',
+  'borderTopColor',
+  'borderRightColor',
+  'borderBottomColor',
+  'borderLeftColor',
+  'outlineColor',
+  'fill',
+  'stroke',
+  'textDecorationColor',
+  'caretColor',
+  'columnRuleColor',
+  'floodColor',
+  'lightingColor',
+  'stopColor',
+]);
+
+/**
+ * Check if a CSS property is a color property
+ */
+export function isColorProperty(propertyName: string): boolean {
+  return COLOR_PROPERTIES.has(propertyName);
+}
+
+/**
+ * Get all color properties
+ */
+export function getColorProperties(): string[] {
+  return Array.from(COLOR_PROPERTIES);
+}