meno-core 1.0.0

package/lib/shared/utilityClassMapper.test.ts

@@ -0,0 +1,140 @@
+import { describe, test, expect } from 'bun:test';
+import { stylesToClasses, responsiveStylesToClasses, classToStyle, classesToStyles } from './utilityClassMapper';
+
+describe('utilityClassMapper', () => {
+  describe('stylesToClasses', () => {
+    test('converts padding to utility class', () => {
+      const classes = stylesToClasses({ padding: '10px' });
+      expect(classes).toContain('p-10px');
+    });
+
+    test('converts display flex to short form', () => {
+      const classes = stylesToClasses({ display: 'flex' });
+      expect(classes).toContain('f');
+    });
+
+    test('converts multiple properties', () => {
+      const classes = stylesToClasses({ padding: '10px', margin: '20px' });
+      expect(classes).toContain('p-10px');
+      expect(classes).toContain('m-20px');
+    });
+
+    test('handles percentage values', () => {
+      const classes = stylesToClasses({ width: '50%' });
+      expect(classes).toContain('w-50p');
+    });
+
+    test('handles auto values', () => {
+      const classes = stylesToClasses({ margin: 'auto' });
+      expect(classes).toContain('m-auto');
+    });
+
+    test('handles values with spaces', () => {
+      const classes = stylesToClasses({ padding: '92px 0' });
+      expect(classes).toContain('p-92px-0');
+    });
+
+    test('returns empty array for null', () => {
+      expect(stylesToClasses(null)).toEqual([]);
+      expect(stylesToClasses(undefined)).toEqual([]);
+    });
+
+    test('handles color variables', () => {
+      const classes = stylesToClasses({ color: 'text' });
+      expect(classes).toContain('c-text');
+    });
+  });
+
+  describe('responsiveStylesToClasses', () => {
+    test('handles flat style object', () => {
+      const classes = responsiveStylesToClasses({ padding: '10px' });
+      expect(classes).toContain('p-10px');
+    });
+
+    test('handles responsive styles with base', () => {
+      const classes = responsiveStylesToClasses({
+        base: { padding: '10px' },
+        tablet: { padding: '20px' },
+      });
+      expect(classes).toContain('p-10px');
+      expect(classes).toContain('t-p-20px');
+    });
+
+    test('handles mobile styles with mob prefix', () => {
+      const classes = responsiveStylesToClasses({
+        base: { padding: '10px' },
+        mobile: { padding: '5px' },
+      });
+      expect(classes).toContain('p-10px');
+      expect(classes).toContain('mob-p-5px');
+    });
+
+    test('returns empty array for null', () => {
+      expect(responsiveStylesToClasses(null)).toEqual([]);
+      expect(responsiveStylesToClasses(undefined)).toEqual([]);
+    });
+  });
+
+  describe('classToStyle', () => {
+    test('parses padding class', () => {
+      const style = classToStyle('p-10px');
+      expect(style).toEqual({ prop: 'padding', value: '10px' });
+    });
+
+    test('parses special case flex', () => {
+      const style = classToStyle('f');
+      expect(style).toEqual({ prop: 'display', value: 'flex' });
+    });
+
+    test('handles tablet prefix', () => {
+      const style = classToStyle('t-p-20px');
+      expect(style).toEqual({ prop: 'padding', value: '20px' });
+    });
+
+    test('handles mobile prefix', () => {
+      const style = classToStyle('mob-p-5px');
+      expect(style).toEqual({ prop: 'padding', value: '5px' });
+    });
+
+    test('returns null for invalid class', () => {
+      expect(classToStyle('invalid')).toBeNull();
+      expect(classToStyle('unknown-class')).toBeNull();
+    });
+  });
+
+  describe('classesToStyles', () => {
+    test('converts base classes to style object', () => {
+      const styles = classesToStyles(['p-10px', 'm-20px']);
+      expect(styles).toEqual({
+        base: { padding: '10px', margin: '20px' },
+      });
+    });
+
+    test('handles responsive classes', () => {
+      const styles = classesToStyles(['p-10px', 't-p-20px']);
+      expect(styles).toEqual({
+        base: { padding: '10px' },
+        tablet: { padding: '20px' },
+      });
+    });
+
+    test('handles mobile classes', () => {
+      const styles = classesToStyles(['p-10px', 'mob-p-5px']);
+      expect(styles).toEqual({
+        base: { padding: '10px' },
+        mobile: { padding: '5px' },
+      });
+    });
+
+    test('returns null for empty classes', () => {
+      expect(classesToStyles([])).toBeNull();
+    });
+
+    test('removes empty breakpoints', () => {
+      const styles = classesToStyles(['p-10px']);
+      expect(styles).toEqual({ base: { padding: '10px' } });
+      expect(styles?.tablet).toBeUndefined();
+      expect(styles?.mobile).toBeUndefined();
+    });
+  });
+});

package/lib/shared/utilityClassMapper.ts

@@ -0,0 +1,229 @@
+/**
+ * Maps CSS property values to utility class names
+ * Example: { padding: "10px", display: "flex" } → ["p-10px", "flex"]
+ * Uses centralized configuration from utilityClassConfig.ts
+ */
+
+import type { ResponsiveStyleObject } from './types';
+import { propertyMap, specialValueMappings, classToStyleSpecialCases } from './utilityClassConfig';
+
+/**
+ * Converts a CSS property value to a utility class name
+ * Example: { prop: "padding", value: "10px" } → "p-10px"
+ */
+function propertyValueToClass(prop: string, value: string | number): string | null {
+  const prefix = propertyMap[prop];
+  if (!prefix) return null;
+
+  const stringValue = String(value);
+
+  // Check for special value mappings first
+  if (specialValueMappings[prop]) {
+    const mapping = specialValueMappings[prop];
+    if (mapping[stringValue]) {
+      return mapping[stringValue];
+    }
+  }
+
+  // CSS variables (e.g., var(--background))
+  if (stringValue.includes('var(')) {
+    const varMatch = stringValue.match(/var\((--[\w-]+)\)/);
+    if (varMatch) {
+      const varName = varMatch[1].replace('--', '');
+      return `${prefix}-${varName}`;
+    }
+  }
+
+  // Detect variable names for color/background properties (e.g., color: "text" → c-text)
+  // These are stored as plain names without var() wrapper and should be treated as variables
+  if ((prop === 'color' || prop === 'backgroundColor' || prop === 'borderColor') &&
+      !stringValue.match(/^\d/) && !stringValue.includes('#') && !stringValue.includes('rgb')) {
+    return `${prefix}-${stringValue}`;
+  }
+
+  // Direct values (with units)
+  if (stringValue.match(/^\d+px$/) || stringValue.match(/^\d+em$/)) {
+    return `${prefix}-${stringValue}`;
+  }
+
+  // Percentage values - convert % to p (e.g., "50%" → "50p")
+  if (stringValue.match(/^\d+%$/)) {
+    const percentValue = stringValue.replace('%', 'p');
+    return `${prefix}-${percentValue}`;
+  }
+
+  // Handle values with spaces by replacing spaces with hyphens (e.g., "92px 0" → "p-92px-0")
+  if (stringValue.includes(' ')) {
+    const spacedValue = stringValue.replace(/\s+/g, '-');
+    return `${prefix}-${spacedValue}`;
+  }
+
+  // Special handling for margin/padding "auto"
+  if (stringValue === 'auto') {
+    return `${prefix}-auto`;
+  }
+
+  // For other cases, append the value
+  return `${prefix}-${stringValue}`;
+}
+
+// Get property order from propertyMap for consistent class ordering
+const propertyOrder = Object.keys(propertyMap);
+
+/**
+ * Convert a style object to an array of utility classes
+ * Example: { padding: "10px", display: "flex" } → ["p-10px", "flex"]
+ *
+ * Properties are sorted according to propertyMap order to ensure
+ * dependent properties (like borderColor) come after their base (border)
+ */
+export function stylesToClasses(
+  styles: Record<string, string | number> | null | undefined
+): string[] {
+  if (!styles) return [];
+
+  // Sort properties by their order in propertyMap
+  // This ensures border comes before borderColor, etc.
+  const sortedProps = Object.keys(styles).sort((a, b) => {
+    const indexA = propertyOrder.indexOf(a);
+    const indexB = propertyOrder.indexOf(b);
+    // Unknown properties go to the end
+    const orderA = indexA === -1 ? Infinity : indexA;
+    const orderB = indexB === -1 ? Infinity : indexB;
+    return orderA - orderB;
+  });
+
+  const classes: string[] = [];
+  for (const prop of sortedProps) {
+    const className = propertyValueToClass(prop, styles[prop]);
+    if (className) {
+      classes.push(className);
+    }
+  }
+  return classes;
+}
+
+/**
+ * Convert a responsive style object to utility classes with responsive prefixes
+ * Example: { base: { padding: "10px" }, tablet: { padding: "24px" } }
+ *   → ["p-10px", "t-p-24px"]
+ *
+ * Also handles flat merged style objects:
+ * Example: { padding: "10px", display: "flex" } → ["p-10px", "flex"]
+ */
+export function responsiveStylesToClasses(
+  styles: ResponsiveStyleObject | Record<string, string | number> | null | undefined
+): string[] {
+  if (!styles) return [];
+
+  const classes: string[] = [];
+
+  // Check if this is a responsive style object (has base/tablet/mobile properties)
+  if ('base' in styles || 'tablet' in styles || 'mobile' in styles) {
+    const responsiveStyles = styles as ResponsiveStyleObject;
+
+    // Base styles (no prefix)
+    if (responsiveStyles.base) {
+      classes.push(...stylesToClasses(responsiveStyles.base));
+    }
+
+    // Tablet styles (t- prefix)
+    if (responsiveStyles.tablet) {
+      const tabletClasses = stylesToClasses(responsiveStyles.tablet);
+      classes.push(...tabletClasses.map((cls) => `t-${cls}`));
+    }
+
+    // Mobile styles (mob- prefix to avoid conflict with margin)
+    if (responsiveStyles.mobile) {
+      const mobileClasses = stylesToClasses(responsiveStyles.mobile);
+      classes.push(...mobileClasses.map((cls) => `mob-${cls}`));
+    }
+  } else {
+    // Flat style object - treat all as base classes
+    classes.push(...stylesToClasses(styles as Record<string, string | number>));
+  }
+
+  return classes;
+}
+
+/**
+ * Parse a utility class back to CSS property and value
+ * Example: "p-10px" → { padding: "10px" }
+ */
+export function classToStyle(className: string): { prop: string; value: string } | null {
+  // Remove responsive prefixes for parsing
+  let cleanClass = className;
+  let responsivePrefix = '';
+
+  if (className.startsWith('t-')) {
+    responsivePrefix = 't';
+    cleanClass = className.slice(2);
+  } else if (className.startsWith('mob-')) {
+    responsivePrefix = 'mob';
+    cleanClass = className.slice(4);
+  }
+
+  // Check special cases from config
+  if (classToStyleSpecialCases[cleanClass]) {
+    return classToStyleSpecialCases[cleanClass];
+  }
+
+  // Parse prefix-value pattern (e.g., "p-10px", "m-20px")
+  const match = cleanClass.match(/^([a-z-]+)-(.*?)$/);
+  if (!match) return null;
+
+  const [, prefix, value] = match;
+
+  // Find the property from the prefix
+  let prop = '';
+  for (const [key, val] of Object.entries(propertyMap)) {
+    if (val === prefix) {
+      prop = key;
+      break;
+    }
+  }
+
+  if (!prop) return null;
+
+  // Handle CSS variables
+  if (value.includes('background') || value.includes('text') || value.includes('border')) {
+    return { prop, value: `var(--${value})` };
+  }
+
+  return { prop, value };
+}
+
+/**
+ * Convert utility classes back to a style object
+ * Example: ["p-10px", "t-p-24px"] → { base: { padding: "10px" }, tablet: { padding: "24px" } }
+ */
+export function classesToStyles(classes: string[]): ResponsiveStyleObject | null {
+  const styles: ResponsiveStyleObject = { base: {}, tablet: {}, mobile: {} };
+
+  for (const className of classes) {
+    let breakpoint: 'base' | 'tablet' | 'mobile' = 'base';
+    let cleanClass = className;
+
+    if (className.startsWith('t-')) {
+      breakpoint = 'tablet';
+      cleanClass = className.slice(2);
+    } else if (className.startsWith('mob-')) {
+      breakpoint = 'mobile';
+      cleanClass = className.slice(4);
+    }
+
+    const styleEntry = classToStyle(cleanClass);
+    if (styleEntry) {
+      if (!styles[breakpoint]) {
+        styles[breakpoint] = {};
+      }
+      styles[breakpoint]![styleEntry.prop] = styleEntry.value;
+    }
+  }
+
+  // Clean up empty breakpoints
+  if (Object.keys(styles.tablet || {}).length === 0) delete styles.tablet;
+  if (Object.keys(styles.mobile || {}).length === 0) delete styles.mobile;
+
+  return Object.keys(styles.base || {}).length > 0 ? styles : null;
+}

package/lib/shared/utils/fileUtils.test.ts

@@ -0,0 +1,99 @@
+import { describe, test, expect } from 'bun:test';
+import {
+  isJSONFile,
+  isJSFile,
+  isCSSFile,
+  stripExtension,
+  getBaseName,
+  mapPageNameToPath,
+  mapPathToPageName,
+} from './fileUtils';
+
+describe('fileUtils', () => {
+  describe('isJSONFile', () => {
+    test('returns true for .json files', () => {
+      expect(isJSONFile('page.json')).toBe(true);
+      expect(isJSONFile('component.json')).toBe(true);
+    });
+
+    test('returns false for non-json files', () => {
+      expect(isJSONFile('page.js')).toBe(false);
+      expect(isJSONFile('page.ts')).toBe(false);
+      expect(isJSONFile('page')).toBe(false);
+    });
+  });
+
+  describe('isJSFile', () => {
+    test('returns true for .js files', () => {
+      expect(isJSFile('script.js')).toBe(true);
+    });
+
+    test('returns false for non-js files', () => {
+      expect(isJSFile('script.ts')).toBe(false);
+      expect(isJSFile('script.json')).toBe(false);
+    });
+  });
+
+  describe('isCSSFile', () => {
+    test('returns true for .css files', () => {
+      expect(isCSSFile('styles.css')).toBe(true);
+    });
+
+    test('returns false for non-css files', () => {
+      expect(isCSSFile('styles.scss')).toBe(false);
+      expect(isCSSFile('styles.less')).toBe(false);
+    });
+  });
+
+  describe('stripExtension', () => {
+    test('removes extension from filename', () => {
+      expect(stripExtension('page.json')).toBe('page');
+      expect(stripExtension('component.test.ts')).toBe('component.test');
+    });
+
+    test('returns original if no extension', () => {
+      expect(stripExtension('page')).toBe('page');
+    });
+
+    test('handles multiple dots correctly', () => {
+      expect(stripExtension('my.component.json')).toBe('my.component');
+    });
+  });
+
+  describe('getBaseName', () => {
+    test('returns filename from path', () => {
+      expect(getBaseName('/path/to/file.json')).toBe('file.json');
+      expect(getBaseName('/a/b/c/file.ts')).toBe('file.ts');
+    });
+
+    test('returns filename if no path', () => {
+      expect(getBaseName('file.json')).toBe('file.json');
+    });
+
+    test('handles trailing slash', () => {
+      expect(getBaseName('/path/to/dir/')).toBe('');
+    });
+  });
+
+  describe('mapPageNameToPath', () => {
+    test('maps index to root path', () => {
+      expect(mapPageNameToPath('index')).toBe('/');
+    });
+
+    test('adds leading slash', () => {
+      expect(mapPageNameToPath('about')).toBe('/about');
+      expect(mapPageNameToPath('blog/post')).toBe('/blog/post');
+    });
+  });
+
+  describe('mapPathToPageName', () => {
+    test('maps root to index', () => {
+      expect(mapPathToPageName('/')).toBe('index');
+    });
+
+    test('removes leading slash', () => {
+      expect(mapPathToPageName('/about')).toBe('about');
+      expect(mapPathToPageName('/blog/post')).toBe('blog/post');
+    });
+  });
+});

package/lib/shared/utils/fileUtils.ts

@@ -0,0 +1,56 @@
+/**
+ * File Utilities
+ * Common file path and extension handling functions
+ */
+
+/**
+ * Check if a filename has a .json extension
+ */
+export const isJSONFile = (name: string): boolean => name.endsWith('.json');
+
+/**
+ * Check if a filename has a .js extension
+ */
+export const isJSFile = (name: string): boolean => name.endsWith('.js');
+
+/**
+ * Check if a filename has a .css extension
+ */
+export const isCSSFile = (name: string): boolean => name.endsWith('.css');
+
+/**
+ * Remove the file extension from a filename
+ * @example stripExtension('page.json') => 'page'
+ * @example stripExtension('component.test.ts') => 'component.test'
+ */
+export const stripExtension = (name: string): string => {
+  const lastDotIndex = name.lastIndexOf('.');
+  return lastDotIndex > 0 ? name.substring(0, lastDotIndex) : name;
+};
+
+/**
+ * Get the base filename from a path
+ * @example getBaseName('/path/to/file.json') => 'file.json'
+ */
+export const getBaseName = (filePath: string): string => {
+  const parts = filePath.split('/');
+  return parts[parts.length - 1] || '';
+};
+
+/**
+ * Map page filename to route path
+ * @example mapPageNameToPath('index') => '/'
+ * @example mapPageNameToPath('about') => '/about'
+ */
+export const mapPageNameToPath = (pageName: string): string => {
+  return pageName === 'index' ? '/' : `/${pageName}`;
+};
+
+/**
+ * Map route path to page filename
+ * @example mapPathToPageName('/') => 'index'
+ * @example mapPathToPageName('/about') => 'about'
+ */
+export const mapPathToPageName = (path: string): string => {
+  return path === '/' ? 'index' : path.substring(1);
+};