svger-cli 2.0.1 → 2.0.2

package/dist/core/style-compiler.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Comprehensive styling system for SVG components
+ * Supports all CSS properties, responsive design, theming, and dynamic styling
+ */
+export interface StyleTheme {
+    name: string;
+    colors: Record<string, string>;
+    sizes: Record<string, number | string>;
+    spacing: Record<string, number | string>;
+    breakpoints?: Record<string, string>;
+    animations?: Record<string, string>;
+}
+export interface ResponsiveValue<T> {
+    base: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
+    xl?: T;
+    [key: string]: T | undefined;
+}
+export interface SVGStyleOptions {
+    fill?: string | ResponsiveValue<string>;
+    stroke?: string | ResponsiveValue<string>;
+    strokeWidth?: number | string | ResponsiveValue<number | string>;
+    width?: number | string | ResponsiveValue<number | string>;
+    height?: number | string | ResponsiveValue<number | string>;
+    size?: number | string | ResponsiveValue<number | string>;
+    transform?: string;
+    rotate?: number | string;
+    scale?: number | string;
+    translateX?: number | string;
+    translateY?: number | string;
+    opacity?: number | ResponsiveValue<number>;
+    filter?: string;
+    clipPath?: string;
+    mask?: string;
+    animation?: string;
+    transition?: string;
+    hover?: Partial<SVGStyleOptions>;
+    focus?: Partial<SVGStyleOptions>;
+    active?: Partial<SVGStyleOptions>;
+    disabled?: Partial<SVGStyleOptions>;
+    theme?: string | StyleTheme;
+    responsive?: boolean;
+    css?: Record<string, string | number>;
+    className?: string;
+    'aria-label'?: string;
+    'aria-hidden'?: boolean;
+    title?: string;
+    role?: string;
+}
+export interface CompiledStyles {
+    inline: Record<string, string | number>;
+    classes: string[];
+    cssRules: string[];
+    mediaQueries: string[];
+}
+export declare class SVGStyleCompiler {
+    private static instance;
+    private themes;
+    private globalCSS;
+    private constructor();
+    static getInstance(): SVGStyleCompiler;
+    /**
+     * Compile SVG styling options into CSS
+     */
+    compileStyles(options: SVGStyleOptions, componentName: string): CompiledStyles;
+    /**
+     * Register a custom theme
+     */
+    registerTheme(theme: StyleTheme): void;
+    /**
+     * Generate CSS for a component with all styling options
+     */
+    generateComponentCSS(componentName: string, options: SVGStyleOptions): string;
+    /**
+     * Generate enhanced React component template with full styling support
+     */
+    generateStyledComponent(componentName: string, svgContent: string, options?: SVGStyleOptions): string;
+    private loadDefaultThemes;
+    private resolveTheme;
+    private compileBaseStyles;
+    private compileResponsiveStyles;
+    private compileInteractionStates;
+    private isResponsiveValue;
+    private camelToKebab;
+}
+export declare const styleCompiler: SVGStyleCompiler;

package/dist/core/style-compiler.js

@@ -0,0 +1,466 @@
+/**
+ * Comprehensive styling system for SVG components
+ * Supports all CSS properties, responsive design, theming, and dynamic styling
+ */
+export class SVGStyleCompiler {
+    static instance;
+    themes = new Map();
+    globalCSS = [];
+    constructor() {
+        this.loadDefaultThemes();
+    }
+    static getInstance() {
+        if (!SVGStyleCompiler.instance) {
+            SVGStyleCompiler.instance = new SVGStyleCompiler();
+        }
+        return SVGStyleCompiler.instance;
+    }
+    /**
+     * Compile SVG styling options into CSS
+     */
+    compileStyles(options, componentName) {
+        const compiled = {
+            inline: {},
+            classes: [],
+            cssRules: [],
+            mediaQueries: []
+        };
+        // Get theme if specified
+        const theme = this.resolveTheme(options.theme);
+        // Compile base styles
+        this.compileBaseStyles(options, compiled, theme);
+        // Compile responsive styles
+        if (options.responsive) {
+            this.compileResponsiveStyles(options, compiled, theme, componentName);
+        }
+        // Compile interaction states
+        this.compileInteractionStates(options, compiled, componentName);
+        // Add custom CSS
+        if (options.css) {
+            Object.assign(compiled.inline, options.css);
+        }
+        // Add class names
+        if (options.className) {
+            compiled.classes.push(options.className);
+        }
+        return compiled;
+    }
+    /**
+     * Register a custom theme
+     */
+    registerTheme(theme) {
+        this.themes.set(theme.name, theme);
+    }
+    /**
+     * Generate CSS for a component with all styling options
+     */
+    generateComponentCSS(componentName, options) {
+        const compiled = this.compileStyles(options, componentName);
+        let css = '';
+        // Add CSS rules
+        if (compiled.cssRules.length > 0) {
+            css += compiled.cssRules.join('\n') + '\n';
+        }
+        // Add media queries
+        if (compiled.mediaQueries.length > 0) {
+            css += compiled.mediaQueries.join('\n') + '\n';
+        }
+        return css;
+    }
+    /**
+     * Generate enhanced React component template with full styling support
+     */
+    generateStyledComponent(componentName, svgContent, options = {}) {
+        const compiled = this.compileStyles(options, componentName);
+        const hasCustomStyles = compiled.cssRules.length > 0 || compiled.mediaQueries.length > 0;
+        const imports = hasCustomStyles
+            ? `import React from 'react';\nimport type { SVGProps } from "react";`
+            : `import type { SVGProps } from "react";`;
+        const styledCSS = hasCustomStyles ? `
+const ${componentName}Styles = \`
+${compiled.cssRules.join('\n')}
+${compiled.mediaQueries.join('\n')}
+\`;
+
+// Inject styles
+if (typeof document !== 'undefined') {
+  const styleId = '${componentName.toLowerCase()}-styles';
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = ${componentName}Styles;
+    document.head.appendChild(style);
+  }
+}
+` : '';
+        const inlineStyleObject = Object.keys(compiled.inline).length > 0
+            ? `const defaultStyles = ${JSON.stringify(compiled.inline, null, 2)};`
+            : '';
+        const classNames = compiled.classes.length > 0
+            ? `'${compiled.classes.join(' ')} ' + (props.className || '')`
+            : 'props.className';
+        return `${imports}
+
+/**
+ * ${componentName} SVG Component with Enhanced Styling
+ * Generated by svger-cli with comprehensive styling support
+ */
+
+${styledCSS}${inlineStyleObject}
+
+export interface ${componentName}Props extends SVGProps<SVGSVGElement> {
+  // Enhanced styling props
+  size?: number | string;
+  variant?: 'primary' | 'secondary' | 'accent' | 'muted';
+  responsive?: boolean;
+  
+  // Animation props
+  animate?: boolean;
+  animationType?: 'spin' | 'pulse' | 'bounce' | 'fade';
+  
+  // Theme props
+  theme?: 'light' | 'dark' | 'auto';
+}
+
+const ${componentName} = React.forwardRef<SVGSVGElement, ${componentName}Props>(
+  ({ 
+    size, 
+    variant = 'primary',
+    responsive = false,
+    animate = false,
+    animationType = 'spin',
+    theme = 'auto',
+    style,
+    className,
+    ...props 
+  }, ref) => {
+    
+    // Calculate dimensions
+    const dimensions = React.useMemo(() => {
+      if (size) {
+        return { width: size, height: size };
+      }
+      return {
+        width: props.width || ${options.width || 24},
+        height: props.height || ${options.height || 24}
+      };
+    }, [size, props.width, props.height]);
+    
+    // Combine styles
+    const combinedStyles = React.useMemo(() => {
+      const baseStyles = ${inlineStyleObject ? 'defaultStyles' : '{}'};
+      const variantStyles = getVariantStyles(variant);
+      const animationStyles = animate ? getAnimationStyles(animationType) : {};
+      const themeStyles = getThemeStyles(theme);
+      
+      return {
+        ...baseStyles,
+        ...variantStyles,
+        ...animationStyles,
+        ...themeStyles,
+        ...style
+      };
+    }, [variant, animate, animationType, theme, style]);
+    
+    // Combine class names
+    const combinedClassName = React.useMemo(() => {
+      const classes = [];
+      ${compiled.classes.length > 0 ? `classes.push('${compiled.classes.join(' ')}');` : ''}
+      if (responsive) classes.push(\`\${componentName.toLowerCase()}-responsive\`);
+      if (animate) classes.push(\`\${componentName.toLowerCase()}-animate-\${animationType}\`);
+      classes.push(\`\${componentName.toLowerCase()}-variant-\${variant}\`);
+      classes.push(\`\${componentName.toLowerCase()}-theme-\${theme}\`);
+      if (className) classes.push(className);
+      return classes.join(' ');
+    }, [responsive, animate, animationType, variant, theme, className]);
+
+    return (
+      <svg
+        ref={ref}
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        width={dimensions.width}
+        height={dimensions.height}
+        fill={props.fill || "${options.fill || 'currentColor'}"}
+        className={combinedClassName}
+        style={combinedStyles}
+        aria-hidden={props['aria-hidden']}
+        aria-label={props['aria-label']}
+        role={props.role || 'img'}
+        {...props}
+      >
+        ${options.title ? `<title>${options.title}</title>` : ''}
+        ${svgContent}
+      </svg>
+    );
+  }
+);
+
+// Utility functions for styling
+function getVariantStyles(variant: string): React.CSSProperties {
+  const variants = {
+    primary: { color: 'var(--color-primary, #007bff)' },
+    secondary: { color: 'var(--color-secondary, #6c757d)' },
+    accent: { color: 'var(--color-accent, #28a745)' },
+    muted: { color: 'var(--color-muted, #6c757d)', opacity: 0.7 }
+  };
+  return variants[variant as keyof typeof variants] || variants.primary;
+}
+
+function getAnimationStyles(animationType: string): React.CSSProperties {
+  const animations = {
+    spin: { animation: 'svger-spin 1s linear infinite' },
+    pulse: { animation: 'svger-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite' },
+    bounce: { animation: 'svger-bounce 1s infinite' },
+    fade: { animation: 'svger-fade 2s ease-in-out infinite alternate' }
+  };
+  return animations[animationType as keyof typeof animations] || {};
+}
+
+function getThemeStyles(theme: string): React.CSSProperties {
+  if (theme === 'dark') {
+    return { filter: 'invert(1) hue-rotate(180deg)' };
+  }
+  if (theme === 'auto') {
+    return { filter: 'var(--svger-theme-filter, none)' };
+  }
+  return {};
+}
+
+${componentName}.displayName = "${componentName}";
+
+export default ${componentName};
+
+// CSS Animations (injected globally)
+if (typeof document !== 'undefined') {
+  const animationCSS = \`
+    @keyframes svger-spin {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+    
+    @keyframes svger-pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+    
+    @keyframes svger-bounce {
+      0%, 20%, 53%, 80%, 100% { transform: translate3d(0,0,0); }
+      40%, 43% { transform: translate3d(0,-30px,0); }
+      70% { transform: translate3d(0,-15px,0); }
+      90% { transform: translate3d(0,-4px,0); }
+    }
+    
+    @keyframes svger-fade {
+      from { opacity: 0.4; }
+      to { opacity: 1; }
+    }
+    
+    /* CSS Custom Properties for theming */
+    :root {
+      --color-primary: #007bff;
+      --color-secondary: #6c757d;
+      --color-accent: #28a745;
+      --color-muted: #6c757d;
+      --svger-theme-filter: none;
+    }
+    
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --svger-theme-filter: invert(1) hue-rotate(180deg);
+      }
+    }
+  \`;
+  
+  const globalStyleId = 'svger-global-animations';
+  if (!document.getElementById(globalStyleId)) {
+    const style = document.createElement('style');
+    style.id = globalStyleId;
+    style.textContent = animationCSS;
+    document.head.appendChild(style);
+  }
+}
+`;
+    }
+    // Private helper methods
+    loadDefaultThemes() {
+        // Light theme
+        this.registerTheme({
+            name: 'light',
+            colors: {
+                primary: '#007bff',
+                secondary: '#6c757d',
+                success: '#28a745',
+                warning: '#ffc107',
+                danger: '#dc3545',
+                info: '#17a2b8',
+                light: '#f8f9fa',
+                dark: '#343a40'
+            },
+            sizes: {
+                xs: 12,
+                sm: 16,
+                md: 24,
+                lg: 32,
+                xl: 48
+            },
+            spacing: {
+                1: '0.25rem',
+                2: '0.5rem',
+                3: '0.75rem',
+                4: '1rem',
+                5: '1.5rem'
+            },
+            breakpoints: {
+                sm: '576px',
+                md: '768px',
+                lg: '992px',
+                xl: '1200px'
+            }
+        });
+        // Dark theme
+        this.registerTheme({
+            name: 'dark',
+            colors: {
+                primary: '#0d6efd',
+                secondary: '#6c757d',
+                success: '#198754',
+                warning: '#ffc107',
+                danger: '#dc3545',
+                info: '#0dcaf0',
+                light: '#212529',
+                dark: '#f8f9fa'
+            },
+            sizes: {
+                xs: 12,
+                sm: 16,
+                md: 24,
+                lg: 32,
+                xl: 48
+            },
+            spacing: {
+                1: '0.25rem',
+                2: '0.5rem',
+                3: '0.75rem',
+                4: '1rem',
+                5: '1.5rem'
+            },
+            breakpoints: {
+                sm: '576px',
+                md: '768px',
+                lg: '992px',
+                xl: '1200px'
+            }
+        });
+    }
+    resolveTheme(theme) {
+        if (!theme)
+            return null;
+        if (typeof theme === 'string') {
+            return this.themes.get(theme) || null;
+        }
+        return theme;
+    }
+    compileBaseStyles(options, compiled, theme) {
+        // Handle basic properties
+        const styleMap = {
+            fill: 'fill',
+            stroke: 'stroke',
+            strokeWidth: 'strokeWidth',
+            opacity: 'opacity',
+            transform: 'transform',
+            filter: 'filter',
+            clipPath: 'clipPath',
+            mask: 'mask',
+            animation: 'animation',
+            transition: 'transition'
+        };
+        for (const [cssProp, optionKey] of Object.entries(styleMap)) {
+            const value = options[optionKey];
+            if (value !== undefined) {
+                if (this.isResponsiveValue(value)) {
+                    compiled.inline[cssProp] = value.base;
+                }
+                else {
+                    compiled.inline[cssProp] = value;
+                }
+            }
+        }
+        // Handle size shorthand
+        if (options.size !== undefined) {
+            const sizeValue = this.isResponsiveValue(options.size)
+                ? options.size.base
+                : options.size;
+            compiled.inline.width = sizeValue;
+            compiled.inline.height = sizeValue;
+        }
+        // Handle transform shortcuts
+        const transforms = [];
+        if (options.rotate)
+            transforms.push(`rotate(${options.rotate}deg)`);
+        if (options.scale)
+            transforms.push(`scale(${options.scale})`);
+        if (options.translateX)
+            transforms.push(`translateX(${options.translateX})`);
+        if (options.translateY)
+            transforms.push(`translateY(${options.translateY})`);
+        if (transforms.length > 0) {
+            const existingTransform = compiled.inline.transform;
+            compiled.inline.transform = existingTransform
+                ? `${existingTransform} ${transforms.join(' ')}`
+                : transforms.join(' ');
+        }
+    }
+    compileResponsiveStyles(options, compiled, theme, componentName) {
+        const breakpoints = theme?.breakpoints || {
+            sm: '576px',
+            md: '768px',
+            lg: '992px',
+            xl: '1200px'
+        };
+        for (const [prop, value] of Object.entries(options)) {
+            if (this.isResponsiveValue(value)) {
+                const responsiveValue = value;
+                for (const [breakpoint, breakpointValue] of Object.entries(responsiveValue)) {
+                    if (breakpoint === 'base')
+                        continue;
+                    const mediaQuery = breakpoints[breakpoint];
+                    if (mediaQuery && breakpointValue !== undefined) {
+                        const rule = `@media (min-width: ${mediaQuery}) {
+  .${componentName.toLowerCase()}-responsive {
+    ${this.camelToKebab(prop)}: ${breakpointValue};
+  }
+}`;
+                        compiled.mediaQueries.push(rule);
+                    }
+                }
+            }
+        }
+    }
+    compileInteractionStates(options, compiled, componentName) {
+        const states = ['hover', 'focus', 'active', 'disabled'];
+        for (const state of states) {
+            const stateStyles = options[state];
+            if (stateStyles) {
+                const selector = state === 'disabled'
+                    ? `.${componentName.toLowerCase()}[disabled], .${componentName.toLowerCase()}[aria-disabled="true"]`
+                    : `.${componentName.toLowerCase()}:${state}`;
+                const rules = [];
+                for (const [prop, value] of Object.entries(stateStyles)) {
+                    rules.push(`  ${this.camelToKebab(prop)}: ${value};`);
+                }
+                if (rules.length > 0) {
+                    compiled.cssRules.push(`${selector} {\n${rules.join('\n')}\n}`);
+                }
+            }
+        }
+    }
+    isResponsiveValue(value) {
+        return value && typeof value === 'object' && 'base' in value;
+    }
+    camelToKebab(str) {
+        return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+    }
+}
+// Export singleton instance
+export const styleCompiler = SVGStyleCompiler.getInstance();

package/dist/core/template-manager.d.ts

@@ -0,0 +1,64 @@
+import { Template, ComponentGenerationOptions } from '../types/index.js';
+/**
+ * Template management system for customizable component generation
+ */
+export declare class TemplateManager {
+    private static instance;
+    private templates;
+    private defaultTemplate;
+    private constructor();
+    static getInstance(): TemplateManager;
+    /**
+     * Load built-in templates
+     */
+    private loadBuiltinTemplates;
+    /**
+     * Register a new template
+     */
+    registerTemplate(template: Template): void;
+    /**
+     * Generate component using specified template
+     */
+    generateComponent(templateName: string, options: ComponentGenerationOptions): string;
+    /**
+     * Load custom template from file
+     */
+    loadCustomTemplate(templatePath: string): Promise<void>;
+    /**
+     * Get list of available templates
+     */
+    getAvailableTemplates(): string[];
+    /**
+     * Set default template
+     */
+    setDefaultTemplate(templateName: string): void;
+    /**
+     * Standard React Functional Component
+     */
+    private generateReactFunctional;
+    /**
+     * React Functional Component with forwardRef
+     */
+    private generateReactForwardRef;
+    /**
+     * React Class Component (legacy)
+     */
+    private generateReactClass;
+    /**
+     * Styled Components Template
+     */
+    private generateStyledComponents;
+    /**
+     * TypeScript Native (no React dependencies)
+     */
+    private generateTypeScriptNative;
+    /**
+     * Process string template with variable substitution
+     */
+    private processStringTemplate;
+    /**
+     * Enhanced Styled Template with comprehensive styling support
+     */
+    private generateEnhancedStyled;
+}
+export declare const templateManager: TemplateManager;