meno-core 1.0.0

package/lib/shared/cssProperties.test.ts

@@ -0,0 +1,252 @@
+import { describe, test, expect } from 'bun:test';
+import {
+  CSS_PROPERTIES,
+  CSS_PROPERTIES_DEFINITION,
+  filterCSSProperties,
+  getPropertyValues,
+  filterPropertyValues,
+  getPropertyType
+} from './cssProperties';
+
+describe('cssProperties', () => {
+  describe('CSS_PROPERTIES', () => {
+    test('is an array of property names', () => {
+      expect(Array.isArray(CSS_PROPERTIES)).toBe(true);
+      expect(CSS_PROPERTIES.length).toBeGreaterThan(0);
+    });
+
+    test('contains common CSS properties', () => {
+      expect(CSS_PROPERTIES).toContain('display');
+      expect(CSS_PROPERTIES).toContain('flexDirection');
+      expect(CSS_PROPERTIES).toContain('padding');
+      expect(CSS_PROPERTIES).toContain('backgroundColor');
+    });
+  });
+
+  describe('CSS_PROPERTIES_DEFINITION', () => {
+    test('contains display property with values', () => {
+      expect(CSS_PROPERTIES_DEFINITION.display).toBeDefined();
+      expect(CSS_PROPERTIES_DEFINITION.display.values).toContain('flex');
+      expect(CSS_PROPERTIES_DEFINITION.display.type).toBe('select');
+    });
+
+    test('contains position property', () => {
+      expect(CSS_PROPERTIES_DEFINITION.position).toBeDefined();
+      expect(CSS_PROPERTIES_DEFINITION.position.values).toContain('relative');
+    });
+
+    test('contains flexbox properties', () => {
+      expect(CSS_PROPERTIES_DEFINITION.flexDirection).toBeDefined();
+      expect(CSS_PROPERTIES_DEFINITION.justifyContent).toBeDefined();
+      expect(CSS_PROPERTIES_DEFINITION.alignItems).toBeDefined();
+    });
+
+    test('contains dimension properties', () => {
+      expect(CSS_PROPERTIES_DEFINITION.width).toBeDefined();
+      expect(CSS_PROPERTIES_DEFINITION.height).toBeDefined();
+      expect(CSS_PROPERTIES_DEFINITION.width.type).toBe('string');
+    });
+
+    test('contains cursor property with values', () => {
+      expect(CSS_PROPERTIES_DEFINITION.cursor.values).toContain('pointer');
+      expect(CSS_PROPERTIES_DEFINITION.cursor.values).toContain('default');
+    });
+  });
+
+  describe('filterCSSProperties', () => {
+    test('returns first 15 properties for empty input', () => {
+      const result = filterCSSProperties('');
+      expect(result.length).toBe(15);
+    });
+
+    test('filters properties by exact prefix match', () => {
+      const result = filterCSSProperties('flex');
+      expect(result.every(prop => prop.toLowerCase().startsWith('flex'))).toBe(true);
+    });
+
+    test('filters properties case-insensitively', () => {
+      const result = filterCSSProperties('FLEX');
+      expect(result.length).toBeGreaterThan(0);
+      expect(result.every(prop => prop.toLowerCase().startsWith('flex'))).toBe(true);
+    });
+
+    test('supports camelCase abbreviation matching', () => {
+      const result = filterCSSProperties('bC');
+      expect(result).toContain('backgroundColor');
+      expect(result).toContain('borderColor');
+    });
+
+    test('prioritizes startsWith matches over abbreviation matches', () => {
+      const result = filterCSSProperties('b');
+      const startsWithB = result.filter(p => p.toLowerCase().startsWith('b'));
+      expect(startsWithB.length).toBeGreaterThan(0);
+      // startsWith matches should come first
+      expect(result.indexOf('border')).toBeLessThan(result.indexOf('backgroundColor') || Infinity);
+    });
+
+    test('returns empty array for non-matching input', () => {
+      const result = filterCSSProperties('zzzzz');
+      expect(result.length).toBe(0);
+    });
+
+    test('handles single character input', () => {
+      const result = filterCSSProperties('p');
+      expect(result.some(prop => prop.toLowerCase().startsWith('p'))).toBe(true);
+    });
+
+    test('trims whitespace from input', () => {
+      const result = filterCSSProperties('  flex  ');
+      expect(result.length).toBeGreaterThan(0);
+    });
+
+    test('matches abbreviation with multiple capitals', () => {
+      const result = filterCSSProperties('fD');
+      expect(result).toContain('flexDirection');
+    });
+
+    test('matches abbreviation case-insensitively', () => {
+      const result = filterCSSProperties('fd');
+      expect(result).toContain('flexDirection');
+    });
+  });
+
+  describe('getPropertyValues', () => {
+    test('returns values for display property', () => {
+      const values = getPropertyValues('display');
+      expect(values).toContain('flex');
+      expect(values).toContain('grid');
+      expect(values).toContain('block');
+    });
+
+    test('returns values for position property', () => {
+      const values = getPropertyValues('position');
+      expect(values).toContain('relative');
+      expect(values).toContain('absolute');
+      expect(values).toContain('fixed');
+    });
+
+    test('returns empty array for property without predefined values', () => {
+      const values = getPropertyValues('width');
+      expect(values).toEqual([]);
+    });
+
+    test('returns empty array for non-existent property', () => {
+      const values = getPropertyValues('nonExistentProperty');
+      expect(values).toEqual([]);
+    });
+
+    test('returns values for flexDirection', () => {
+      const values = getPropertyValues('flexDirection');
+      expect(values).toContain('row');
+      expect(values).toContain('column');
+    });
+
+    test('returns values for cursor', () => {
+      const values = getPropertyValues('cursor');
+      expect(values).toContain('pointer');
+      expect(values).toContain('default');
+    });
+
+    test('returns array copy (not reference)', () => {
+      const values1 = getPropertyValues('display');
+      const values2 = getPropertyValues('display');
+      expect(values1).toEqual(values2);
+      expect(values1).not.toBe(values2);
+    });
+  });
+
+  describe('filterPropertyValues', () => {
+    test('returns all values when input is empty', () => {
+      const values = filterPropertyValues('display', '');
+      expect(values).toContain('flex');
+      expect(values).toContain('grid');
+    });
+
+    test('filters values by substring match', () => {
+      const values = filterPropertyValues('display', 'flex');
+      expect(values).toContain('flex');
+      expect(values).toContain('inline-flex');
+      expect(values).not.toContain('grid');
+    });
+
+    test('filters case-insensitively', () => {
+      const values = filterPropertyValues('display', 'FLEX');
+      expect(values).toContain('flex');
+      expect(values).toContain('inline-flex');
+    });
+
+    test('returns empty array for property without values', () => {
+      const values = filterPropertyValues('width', 'auto');
+      expect(values).toEqual([]);
+    });
+
+    test('returns empty array for non-matching input', () => {
+      const values = filterPropertyValues('display', 'zzzzz');
+      expect(values).toEqual([]);
+    });
+
+    test('handles whitespace in input', () => {
+      const values = filterPropertyValues('display', '  flex  ');
+      expect(values.length).toBeGreaterThan(0);
+    });
+
+    test('filters position values', () => {
+      const values = filterPropertyValues('position', 'relative');
+      expect(values).toContain('relative');
+      expect(values).not.toContain('absolute');
+    });
+
+    test('filters flexDirection values', () => {
+      const values = filterPropertyValues('flexDirection', 'row');
+      expect(values).toContain('row');
+      expect(values).toContain('row-reverse');
+      expect(values).not.toContain('column');
+    });
+
+    test('handles partial matches', () => {
+      const values = filterPropertyValues('justifyContent', 'space');
+      expect(values).toContain('space-between');
+      expect(values).toContain('space-around');
+      expect(values).toContain('space-evenly');
+    });
+
+    test('returns empty for non-existent property', () => {
+      const values = filterPropertyValues('nonExistent', 'test');
+      expect(values).toEqual([]);
+    });
+  });
+
+  describe('getPropertyType', () => {
+    test('returns select type for display', () => {
+      expect(getPropertyType('display')).toBe('select');
+    });
+
+    test('returns string type for width', () => {
+      expect(getPropertyType('width')).toBe('string');
+    });
+
+    test('returns number type for zIndex', () => {
+      expect(getPropertyType('zIndex')).toBe('number');
+    });
+
+    test('returns number type for opacity', () => {
+      expect(getPropertyType('opacity')).toBe('number');
+    });
+
+    test('returns select type for cursor', () => {
+      expect(getPropertyType('cursor')).toBe('select');
+    });
+
+    test('returns undefined for non-existent property', () => {
+      expect(getPropertyType('nonExistent')).toBeUndefined();
+    });
+
+    test('returns select type for flexDirection', () => {
+      expect(getPropertyType('flexDirection')).toBe('select');
+    });
+
+    test('returns string type for padding', () => {
+      expect(getPropertyType('padding')).toBe('string');
+    });
+  });
+});

package/lib/shared/cssProperties.ts

@@ -0,0 +1,338 @@
+/**
+ * CSS Property Definition structure
+ */
+interface CSSPropertyDefinition {
+  values?: readonly string[];
+  type?: 'string' | 'select' | 'boolean' | 'number';
+}
+
+/**
+ * CSS Properties with their valid values and metadata
+ * Used for autocomplete suggestions for both property names and values
+ */
+export const CSS_PROPERTIES_DEFINITION: Record<string, CSSPropertyDefinition> = {
+  // Display & Layout
+  display: {
+    values: ['block', 'flex', 'grid', 'inline', 'inline-block', 'inline-flex', 'inline-grid', 'none'],
+    type: 'select',
+  },
+  position: {
+    values: ['static', 'relative', 'absolute', 'fixed', 'sticky'],
+    type: 'select',
+  },
+  top: { type: 'string' },
+  right: { type: 'string' },
+  bottom: { type: 'string' },
+  left: { type: 'string' },
+  zIndex: { type: 'number' },
+
+  // Dimensions
+  width: { type: 'string' },
+  height: { type: 'string' },
+  minWidth: { type: 'string' },
+  maxWidth: { type: 'string' },
+  minHeight: { type: 'string' },
+  maxHeight: { type: 'string' },
+
+  // Spacing
+  margin: { type: 'string' },
+  marginTop: { type: 'string' },
+  marginRight: { type: 'string' },
+  marginBottom: { type: 'string' },
+  marginLeft: { type: 'string' },
+  padding: { type: 'string' },
+  paddingTop: { type: 'string' },
+  paddingRight: { type: 'string' },
+  paddingBottom: { type: 'string' },
+  paddingLeft: { type: 'string' },
+  gap: { type: 'string' },
+  rowGap: { type: 'string' },
+  columnGap: { type: 'string' },
+
+  // Borders
+  border: { type: 'string' },
+  borderWidth: { type: 'string' },
+  borderStyle: {
+    values: ['solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'inset', 'outset', 'none'],
+    type: 'select',
+  },
+  borderColor: { type: 'string' },
+  borderTop: { type: 'string' },
+  borderRight: { type: 'string' },
+  borderBottom: { type: 'string' },
+  borderLeft: { type: 'string' },
+  borderRadius: { type: 'string' },
+  borderTopLeftRadius: { type: 'string' },
+  borderTopRightRadius: { type: 'string' },
+  borderBottomLeftRadius: { type: 'string' },
+  borderBottomRightRadius: { type: 'string' },
+
+  // Background & Colors
+  background: { type: 'string' },
+  backgroundColor: { type: 'string' },
+  backgroundImage: { type: 'string' },
+  backgroundSize: {
+    values: ['auto', 'cover', 'contain'],
+    type: 'select',
+  },
+  backgroundPosition: {
+    values: ['top', 'bottom', 'left', 'right', 'center'],
+    type: 'select',
+  },
+  backgroundRepeat: {
+    values: ['repeat', 'repeat-x', 'repeat-y', 'no-repeat'],
+    type: 'select',
+  },
+  color: { type: 'string' },
+  opacity: { type: 'number' },
+
+  // Flexbox
+  flex: { type: 'string' },
+  flexDirection: {
+    values: ['row', 'column', 'row-reverse', 'column-reverse'],
+    type: 'select',
+  },
+  flexWrap: {
+    values: ['nowrap', 'wrap', 'wrap-reverse'],
+    type: 'select',
+  },
+  flexFlow: { type: 'string' },
+  justifyContent: {
+    values: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'],
+    type: 'select',
+  },
+  alignItems: {
+    values: ['flex-start', 'flex-end', 'center', 'stretch', 'baseline'],
+    type: 'select',
+  },
+  alignContent: {
+    values: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch'],
+    type: 'select',
+  },
+  flexGrow: { type: 'number' },
+  flexShrink: { type: 'number' },
+  flexBasis: { type: 'string' },
+  order: { type: 'number' },
+
+  // Grid
+  grid: { type: 'string' },
+  gridTemplateColumns: { type: 'string' },
+  gridTemplateRows: { type: 'string' },
+  gridGap: { type: 'string' },
+  gridColumn: { type: 'string' },
+  gridRow: { type: 'string' },
+  gridAutoFlow: {
+    values: ['row', 'column', 'row dense', 'column dense'],
+    type: 'select',
+  },
+
+  // Text & Font
+  fontSize: { type: 'string' },
+  fontWeight: {
+    values: ['100', '200', '300', '400', '500', '600', '700', '800', '900', 'normal', 'bold'],
+    type: 'select',
+  },
+  fontFamily: { type: 'string' },
+  fontStyle: {
+    values: ['normal', 'italic', 'oblique'],
+    type: 'select',
+  },
+  lineHeight: { type: 'string' },
+  textAlign: {
+    values: ['left', 'right', 'center', 'justify', 'start', 'end'],
+    type: 'select',
+  },
+  textDecoration: {
+    values: ['none', 'underline', 'overline', 'line-through'],
+    type: 'select',
+  },
+  textTransform: {
+    values: ['none', 'capitalize', 'uppercase', 'lowercase'],
+    type: 'select',
+  },
+  letterSpacing: { type: 'string' },
+  wordSpacing: { type: 'string' },
+
+  // Box Shadow & Effects
+  boxShadow: { type: 'string' },
+  textShadow: { type: 'string' },
+  filter: { type: 'string' },
+  transform: { type: 'string' },
+  transition: { type: 'string' },
+  animation: { type: 'string' },
+
+  // Overflow & Content
+  overflow: {
+    values: ['visible', 'hidden', 'scroll', 'auto'],
+    type: 'select',
+  },
+  overflowX: {
+    values: ['visible', 'hidden', 'scroll', 'auto'],
+    type: 'select',
+  },
+  overflowY: {
+    values: ['visible', 'hidden', 'scroll', 'auto'],
+    type: 'select',
+  },
+  whiteSpace: {
+    values: ['normal', 'nowrap', 'pre', 'pre-wrap', 'pre-line'],
+    type: 'select',
+  },
+  textOverflow: {
+    values: ['clip', 'ellipsis'],
+    type: 'select',
+  },
+  visibility: {
+    values: ['visible', 'hidden', 'collapse'],
+    type: 'select',
+  },
+  content: { type: 'string' },
+
+  // Cursor & Interaction
+  cursor: {
+    values: ['auto', 'default', 'pointer', 'wait', 'text', 'move', 'not-allowed', 'help'],
+    type: 'select',
+  },
+  pointerEvents: {
+    values: ['auto', 'none'],
+    type: 'select',
+  },
+  userSelect: {
+    values: ['auto', 'none', 'text', 'all'],
+    type: 'select',
+  },
+
+  // Miscellaneous
+  float: {
+    values: ['left', 'right', 'none'],
+    type: 'select',
+  },
+  clear: {
+    values: ['left', 'right', 'both', 'none'],
+    type: 'select',
+  },
+  boxSizing: {
+    values: ['content-box', 'border-box'],
+    type: 'select',
+  },
+  objectFit: {
+    values: ['fill', 'contain', 'cover', 'scale-down'],
+    type: 'select',
+  },
+  objectPosition: {
+    values: ['top', 'bottom', 'left', 'right', 'center'],
+    type: 'select',
+  },
+};
+
+/**
+ * Common CSS properties for autocomplete suggestions (camelCase for React/JS)
+ * Derived from CSS_PROPERTIES_DEFINITION keys
+ */
+export const CSS_PROPERTIES = Object.keys(CSS_PROPERTIES_DEFINITION);
+
+/**
+ * Check if property matches the abbreviation pattern
+ * For example, "bC" matches "backgroundColor" (b→b, C→C capital letter)
+ */
+function matchesAbbreviation(property: string, input: string): boolean {
+  if (!input) return false;
+
+  let propertyIndex = 0;
+
+  for (let inputIndex = 0; inputIndex < input.length; inputIndex++) {
+    const inputChar = input[inputIndex];
+    let found = false;
+
+    // Search from current position to end of property for a match at a word boundary
+    while (propertyIndex < property.length) {
+      const propChar = property[propertyIndex];
+      // Word boundary = first character OR capital letter
+      const isWordBoundary = propertyIndex === 0 ||
+        (propChar === propChar.toUpperCase() && propChar !== propChar.toLowerCase());
+
+      if (isWordBoundary && inputChar.toLowerCase() === propChar.toLowerCase()) {
+        // Match found at word boundary
+        found = true;
+        propertyIndex++; // Move past this character for next search
+        break;
+      }
+
+      propertyIndex++;
+    }
+
+    if (!found) {
+      return false; // Couldn't find this input character at a word boundary
+    }
+  }
+
+  return true;
+}
+
+/**
+ * Filter CSS properties based on input value
+ * Supports both startsWith matching and camelCase abbreviation matching
+ */
+export function filterCSSProperties(input: string): string[] {
+  const normalizedInput = input.trim();
+  if (!normalizedInput) {
+    return CSS_PROPERTIES.slice(0, 15); // Show first 15 by default
+  }
+
+  // First, try startsWith matching (exact prefix match)
+  const startsWithMatches = CSS_PROPERTIES.filter(prop =>
+    prop.toLowerCase().startsWith(normalizedInput.toLowerCase())
+  );
+
+  // Then, try abbreviation/fuzzy matching
+  const abbreviationMatches = CSS_PROPERTIES.filter(prop =>
+    matchesAbbreviation(prop, normalizedInput) &&
+    !startsWithMatches.includes(prop) // Don't duplicate startsWith matches
+  );
+
+  // Combine results: exact matches first, then fuzzy matches
+  return [...startsWithMatches, ...abbreviationMatches];
+}
+
+/**
+ * Get available values for a specific CSS property
+ * @param propertyName - The CSS property name (e.g., 'flexDirection')
+ * @returns Array of valid values for the property, or empty array if property has no predefined values
+ */
+export function getPropertyValues(propertyName: string): string[] {
+  const values = CSS_PROPERTIES_DEFINITION[propertyName]?.values;
+  return values ? Array.from(values) : [];
+}
+
+/**
+ * Filter values for a specific CSS property based on input
+ * Supports substring matching and returns values that contain the input
+ * @param propertyName - The CSS property name (e.g., 'flexDirection')
+ * @param input - The user input to filter values by
+ * @returns Filtered array of valid values for the property
+ */
+export function filterPropertyValues(propertyName: string, input: string): string[] {
+  const values = getPropertyValues(propertyName);
+  if (!values.length) {
+    return []; // No predefined values for this property
+  }
+
+  const normalizedInput = input.trim().toLowerCase();
+  if (!normalizedInput) {
+    return values; // Return all values if no input
+  }
+
+  // Filter values that contain the input (substring match)
+  return values.filter(value =>
+    value.toLowerCase().includes(normalizedInput)
+  );
+}
+
+/**
+ * Get the property type for a CSS property
+ * @param propertyName - The CSS property name
+ * @returns The property type ('string' | 'select' | 'boolean' | 'number') or undefined
+ */
+export function getPropertyType(propertyName: string): 'string' | 'select' | 'boolean' | 'number' | undefined {
+  return CSS_PROPERTIES_DEFINITION[propertyName]?.type;
+}