@melcanz85/chaincss 1.7.3 → 1.9.0

package/react-hooks.js

@@ -0,0 +1,175 @@
+import { useMemo, useEffect, useRef, useState } from 'react';
+import { $, compile } from './transpiler';
+
+// Cache for generated styles to avoid duplication
+const styleCache = new Map();
+let styleSheet = null;
+
+// Initialize style sheet (add to document head)
+const initStyleSheet = () => {
+  if (typeof document === 'undefined') return null; // SSR safety
+  
+  if (!styleSheet) {
+    // Check if already exists
+    const existing = document.getElementById('chaincss-styles');
+    if (existing) {
+      styleSheet = existing;
+      return styleSheet;
+    }
+    
+    // Create new style element
+    const style = document.createElement('style');
+    style.id = 'chaincss-styles';
+    style.setAttribute('data-chaincss', 'true');
+    document.head.appendChild(style);
+    styleSheet = style;
+  }
+  
+  return styleSheet;
+};
+
+// Update styles in the style sheet
+const updateStyles = (css) => {
+  const sheet = initStyleSheet();
+  if (sheet) {
+    sheet.textContent = css;
+  }
+};
+
+// Main hook for using ChainCSS styles in React
+export function useChainStyles(styles, options = {}) {
+  const {
+    cache = true,
+    namespace = 'chain',
+    watch = false
+  } = options;
+
+  // Generate a unique ID for this component instance
+  const id = useRef(`chain-${Math.random().toString(36).substr(2, 9)}`);
+  
+  // Store the generated class names
+  const [classNames, setClassNames] = useState({});
+  
+  // Process styles and generate CSS
+  const processed = useMemo(() => {
+    if (!styles || Object.keys(styles).length === 0) return { classNames: {}, css: '' };
+    
+    // Check cache first
+    const cacheKey = JSON.stringify(styles);
+    if (cache && styleCache.has(cacheKey)) {
+      return styleCache.get(cacheKey);
+    }
+    
+    // Generate unique class names for each style
+    const newClassNames = {};
+    const compiledStyles = {};
+    
+    Object.entries(styles).forEach(([key, styleDef]) => {
+      // Generate a unique class name
+      const className = `${namespace}-${key}-${id.current}`;
+      
+      // Create a style definition with the unique class
+      const styleObj = typeof styleDef === 'function' 
+        ? styleDef() 
+        : styleDef;
+      
+      // Store the class name mapping
+      newClassNames[key] = className;
+      
+      // Create the style rule
+      compiledStyles[`${key}_${id.current}`] = {
+        selectors: [`.${className}`],
+        ...styleObj
+      };
+    });
+    
+    // Compile to CSS
+    compile(compiledStyles);
+    const css = chain.cssOutput;
+    
+    const result = { classNames: newClassNames, css };
+    
+    if (cache) {
+      styleCache.set(cacheKey, result);
+    }
+    
+    return result;
+  }, [styles, namespace]);
+  
+  // Update the style sheet when styles change
+  useEffect(() => {
+    if (processed.css) {
+      // For simple apps, just append
+      if (!watch) {
+        const sheet = initStyleSheet();
+        if (sheet) {
+          // Remove old styles for this component
+          const existingStyles = sheet.textContent || '';
+          const styleRegex = new RegExp(`\\.[\\w-]*${id.current}[\\s\\S]*?}`, 'g');
+          const cleanedStyles = existingStyles.replace(styleRegex, '');
+          
+          // Add new styles
+          sheet.textContent = cleanedStyles + processed.css;
+        }
+      } else {
+        // For watch mode, update everything
+        updateStyles(processed.css);
+      }
+    }
+    
+    // Cleanup on unmount
+    return () => {
+      if (!watch && styleSheet) {
+        const existingStyles = styleSheet.textContent || '';
+        const styleRegex = new RegExp(`\\.[\\w-]*${id.current}[\\s\\S]*?}`, 'g');
+        styleSheet.textContent = existingStyles.replace(styleRegex, '');
+      }
+    };
+  }, [processed.css, watch]);
+  
+  return processed.classNames;
+}
+
+// Hook for dynamic styles that depend on props/state
+export function useDynamicChainStyles(styleFactory, deps = [], options = {}) {
+  const styles = useMemo(() => {
+    return styleFactory();
+  }, deps);
+  
+  return useChainStyles(styles, options);
+}
+
+// Hook for theme-aware styles
+export function useThemeChainStyles(styles, theme, options = {}) {
+  const themedStyles = useMemo(() => {
+    if (typeof styles === 'function') {
+      return styles(theme);
+    }
+    return styles;
+  }, [styles, theme]);
+  
+  return useChainStyles(themedStyles, options);
+}
+
+// Component for injecting global ChainCSS styles
+export function ChainCSSGlobal({ styles }) {
+  useChainStyles(styles, { watch: true });
+  return null;
+}
+
+// HOC for adding ChainCSS styles to components
+export function withChainStyles(styles, options = {}) {
+  return function WrappedComponent(props) {
+    const classNames = useChainStyles(
+      typeof styles === 'function' ? styles(props) : styles,
+      options
+    );
+    
+    return <WrappedComponent {...props} chainStyles={classNames} />;
+  };
+}
+
+// Utility to combine multiple class names
+export function cx(...classes) {
+  return classes.filter(Boolean).join(' ');
+}

package/tokens.js

@@ -0,0 +1,256 @@
+class DesignTokens {
+  constructor(tokens = {}) {
+    this.tokens = this.deepFreeze({
+      colors: {},
+      spacing: {},
+      typography: {},
+      breakpoints: {},
+      zIndex: {},
+      shadows: {},
+      borderRadius: {},
+      ...tokens
+    });
+    
+    this.flattened = this.flattenTokens(this.tokens);
+  }
+
+  // Deep freeze to prevent accidental modifications
+  deepFreeze(obj) {
+    Object.keys(obj).forEach(key => {
+      if (typeof obj[key] === 'object' && obj[key] !== null) {
+        this.deepFreeze(obj[key]);
+      }
+    });
+    return Object.freeze(obj);
+  }
+
+  // Flatten nested tokens for easy access
+  flattenTokens(obj, prefix = '') {
+    return Object.keys(obj).reduce((acc, key) => {
+      const prefixed = prefix ? `${prefix}.${key}` : key;
+      
+      if (typeof obj[key] === 'object' && obj[key] !== null) {
+        Object.assign(acc, this.flattenTokens(obj[key], prefixed));
+      } else {
+        acc[prefixed] = obj[key];
+      }
+      
+      return acc;
+    }, {});
+  }
+
+  // Get token value by path (e.g., 'colors.primary')
+  get(path, defaultValue = '') {
+    return this.flattened[path] || defaultValue;
+  }
+
+  // Generate CSS variables from tokens
+  toCSSVariables(prefix = 'chain') {
+    let css = ':root {\n';
+    
+    Object.entries(this.flattened).forEach(([key, value]) => {
+      const varName = `--${prefix}-${key.replace(/\./g, '-')}`;
+      css += `  ${varName}: ${value};\n`;
+    });
+    
+    css += '}\n';
+    return css;
+  }
+
+  // Create a theme variant
+  createTheme(name, overrides) {
+    const themeTokens = { ...this.flattened };
+    
+    Object.entries(overrides).forEach(([key, value]) => {
+      if (themeTokens[key]) {
+        themeTokens[key] = value;
+      }
+    });
+    
+    return new DesignTokens(this.expandTokens(themeTokens));
+  }
+
+  // Expand flattened tokens back to nested structure
+  expandTokens(flattened) {
+    const result = {};
+    
+    Object.entries(flattened).forEach(([key, value]) => {
+      const parts = key.split('.');
+      let current = result;
+      
+      for (let i = 0; i < parts.length - 1; i++) {
+        current[parts[i]] = current[parts[i]] || {};
+        current = current[parts[i]];
+      }
+      
+      current[parts[parts.length - 1]] = value;
+    });
+    
+    return result;
+  }
+}
+
+// Default tokens
+const defaultTokens = {
+  colors: {
+    primary: '#667eea',
+    secondary: '#764ba2',
+    success: '#48bb78',
+    danger: '#f56565',
+    warning: '#ed8936',
+    info: '#4299e1',
+    light: '#f7fafc',
+    dark: '#1a202c',
+    white: '#ffffff',
+    black: '#000000',
+    gray: {
+      100: '#f7fafc',
+      200: '#edf2f7',
+      300: '#e2e8f0',
+      400: '#cbd5e0',
+      500: '#a0aec0',
+      600: '#718096',
+      700: '#4a5568',
+      800: '#2d3748',
+      900: '#1a202c'
+    }
+  },
+  
+  spacing: {
+    0: '0',
+    1: '0.25rem',
+    2: '0.5rem',
+    3: '0.75rem',
+    4: '1rem',
+    5: '1.25rem',
+    6: '1.5rem',
+    8: '2rem',
+    10: '2.5rem',
+    12: '3rem',
+    16: '4rem',
+    20: '5rem',
+    24: '6rem',
+    32: '8rem',
+    40: '10rem',
+    48: '12rem',
+    56: '14rem',
+    64: '16rem',
+    xs: '0.5rem',
+    sm: '1rem',
+    md: '1.5rem',
+    lg: '2rem',
+    xl: '3rem',
+    '2xl': '4rem',
+    '3xl': '6rem'
+  },
+  
+  typography: {
+    fontFamily: {
+      sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+      serif: 'Georgia, Cambria, "Times New Roman", Times, serif',
+      mono: 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+    },
+    fontSize: {
+      xs: '0.75rem',
+      sm: '0.875rem',
+      base: '1rem',
+      lg: '1.125rem',
+      xl: '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+      '4xl': '2.25rem',
+      '5xl': '3rem'
+    },
+    fontWeight: {
+      hairline: '100',
+      thin: '200',
+      light: '300',
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+      extrabold: '800',
+      black: '900'
+    },
+    lineHeight: {
+      none: '1',
+      tight: '1.25',
+      snug: '1.375',
+      normal: '1.5',
+      relaxed: '1.625',
+      loose: '2'
+    }
+  },
+  
+  breakpoints: {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px'
+  },
+  
+  zIndex: {
+    0: '0',
+    10: '10',
+    20: '20',
+    30: '30',
+    40: '40',
+    50: '50',
+    auto: 'auto',
+    dropdown: '1000',
+    sticky: '1020',
+    fixed: '1030',
+    modal: '1040',
+    popover: '1050',
+    tooltip: '1060'
+  },
+  
+  shadows: {
+    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    base: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+    '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+    inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+    none: 'none'
+  },
+  
+  borderRadius: {
+    none: '0',
+    sm: '0.125rem',
+    base: '0.25rem',
+    md: '0.375rem',
+    lg: '0.5rem',
+    xl: '0.75rem',
+    '2xl': '1rem',
+    '3xl': '1.5rem',
+    full: '9999px'
+  }
+};
+
+// Create and export tokens instance
+const tokens = new DesignTokens(defaultTokens);
+
+// Token utility functions
+const createTokens = (customTokens) => {
+  return new DesignTokens(customTokens);
+};
+
+// Generate responsive values
+const responsive = (values) => {
+  if (typeof values === 'string') return values;
+  
+  return Object.entries(values).map(([breakpoint, value]) => {
+    if (breakpoint === 'base') return value;
+    return `@media (min-width: ${tokens.get(`breakpoints.${breakpoint}`)}) { ${value} }`;
+  }).join(' ');
+};
+
+module.exports = {
+  tokens,
+  createTokens,
+  responsive,
+  DesignTokens
+};