@promptui-lib/codegen 0.1.4 → 0.1.5

package/dist/detection/raw-css-generator.js

@@ -0,0 +1,473 @@
+/**
+ * Raw CSS Generator
+ * Generates pixel-perfect CSS from Figma node properties
+ * Used when no specific component type is detected
+ */
+/**
+ * Convert Figma color to CSS
+ */
+function colorToCSS(color, opacity) {
+    const r = Math.round(color.r * 255);
+    const g = Math.round(color.g * 255);
+    const b = Math.round(color.b * 255);
+    const a = opacity !== undefined ? opacity : color.a;
+    if (a === 1) {
+        return `rgb(${r}, ${g}, ${b})`;
+    }
+    return `rgba(${r}, ${g}, ${b}, ${a.toFixed(2)})`;
+}
+/**
+ * Convert Figma gradient to CSS
+ */
+function gradientToCSS(fill) {
+    const stops = fill.gradientStops
+        .map(stop => `${colorToCSS(stop.color)} ${(stop.position * 100).toFixed(1)}%`)
+        .join(', ');
+    switch (fill.type) {
+        case 'GRADIENT_LINEAR':
+            return `linear-gradient(180deg, ${stops})`;
+        case 'GRADIENT_RADIAL':
+            return `radial-gradient(circle, ${stops})`;
+        case 'GRADIENT_ANGULAR':
+            return `conic-gradient(${stops})`;
+        default:
+            return `linear-gradient(180deg, ${stops})`;
+    }
+}
+/**
+ * Convert Figma fill to CSS background
+ */
+function fillToCSS(fill) {
+    switch (fill.type) {
+        case 'SOLID':
+            return colorToCSS(fill.color, fill.opacity);
+        case 'GRADIENT_LINEAR':
+        case 'GRADIENT_RADIAL':
+        case 'GRADIENT_ANGULAR':
+        case 'GRADIENT_DIAMOND':
+            return gradientToCSS(fill);
+        case 'IMAGE':
+            return `url(${fill.imageRef})`;
+        default:
+            return null;
+    }
+}
+/**
+ * Convert Figma effects to CSS
+ */
+function effectsToCSS(effects) {
+    const styles = {};
+    const shadows = [];
+    const filters = [];
+    for (const effect of effects) {
+        if (!effect.visible)
+            continue;
+        switch (effect.type) {
+            case 'DROP_SHADOW': {
+                const { color, offset, radius, spread } = effect;
+                const shadowColor = colorToCSS(color);
+                shadows.push(`${offset.x}px ${offset.y}px ${radius}px ${spread || 0}px ${shadowColor}`);
+                break;
+            }
+            case 'INNER_SHADOW': {
+                const { color, offset, radius, spread } = effect;
+                const shadowColor = colorToCSS(color);
+                shadows.push(`inset ${offset.x}px ${offset.y}px ${radius}px ${spread || 0}px ${shadowColor}`);
+                break;
+            }
+            case 'LAYER_BLUR':
+                filters.push(`blur(${effect.radius}px)`);
+                break;
+            case 'BACKGROUND_BLUR':
+                styles.backdropFilter = `blur(${effect.radius}px)`;
+                break;
+        }
+    }
+    if (shadows.length > 0) {
+        styles.boxShadow = shadows.join(', ');
+    }
+    if (filters.length > 0) {
+        styles.filter = filters.join(' ');
+    }
+    return styles;
+}
+/**
+ * Convert layout mode to flexbox
+ */
+function layoutToCSS(node) {
+    const styles = {};
+    if (node.layoutMode === 'HORIZONTAL' || node.layoutMode === 'VERTICAL') {
+        styles.display = 'flex';
+        styles.flexDirection = node.layoutMode === 'HORIZONTAL' ? 'row' : 'column';
+        // Primary axis alignment
+        if (node.primaryAxisAlignItems) {
+            const alignMap = {
+                MIN: 'flex-start',
+                CENTER: 'center',
+                MAX: 'flex-end',
+                SPACE_BETWEEN: 'space-between',
+            };
+            styles.justifyContent = alignMap[node.primaryAxisAlignItems] || 'flex-start';
+        }
+        // Counter axis alignment
+        if (node.counterAxisAlignItems) {
+            const alignMap = {
+                MIN: 'flex-start',
+                CENTER: 'center',
+                MAX: 'flex-end',
+                BASELINE: 'baseline',
+            };
+            styles.alignItems = alignMap[node.counterAxisAlignItems] || 'stretch';
+        }
+        // Gap
+        if (node.itemSpacing && node.itemSpacing > 0) {
+            styles.gap = `${node.itemSpacing}px`;
+        }
+        // Wrap
+        if (node.layoutWrap === 'WRAP') {
+            styles.flexWrap = 'wrap';
+        }
+    }
+    return styles;
+}
+/**
+ * Convert padding to CSS
+ */
+function paddingToCSS(node) {
+    const styles = {};
+    const top = node.paddingTop || 0;
+    const right = node.paddingRight || 0;
+    const bottom = node.paddingBottom || 0;
+    const left = node.paddingLeft || 0;
+    if (top === right && right === bottom && bottom === left && top > 0) {
+        styles.padding = `${top}px`;
+    }
+    else if (top === bottom && left === right && (top > 0 || left > 0)) {
+        styles.padding = `${top}px ${left}px`;
+    }
+    else if (top > 0 || right > 0 || bottom > 0 || left > 0) {
+        styles.padding = `${top}px ${right}px ${bottom}px ${left}px`;
+    }
+    return styles;
+}
+/**
+ * Convert text style to CSS
+ */
+function textStyleToCSS(node) {
+    const styles = {};
+    if (node.style) {
+        const { fontFamily, fontWeight, fontSize, lineHeightPx, letterSpacing, textAlignHorizontal, textDecoration, textCase } = node.style;
+        if (fontFamily)
+            styles.fontFamily = `"${fontFamily}", sans-serif`;
+        if (fontWeight)
+            styles.fontWeight = String(fontWeight);
+        if (fontSize)
+            styles.fontSize = `${fontSize}px`;
+        if (lineHeightPx)
+            styles.lineHeight = `${lineHeightPx}px`;
+        if (letterSpacing)
+            styles.letterSpacing = `${letterSpacing}px`;
+        if (textAlignHorizontal) {
+            const alignMap = {
+                LEFT: 'left',
+                CENTER: 'center',
+                RIGHT: 'right',
+                JUSTIFIED: 'justify',
+            };
+            styles.textAlign = alignMap[textAlignHorizontal] || 'left';
+        }
+        if (textDecoration === 'UNDERLINE')
+            styles.textDecoration = 'underline';
+        if (textDecoration === 'STRIKETHROUGH')
+            styles.textDecoration = 'line-through';
+        if (textCase === 'UPPER')
+            styles.textTransform = 'uppercase';
+        if (textCase === 'LOWER')
+            styles.textTransform = 'lowercase';
+        if (textCase === 'TITLE')
+            styles.textTransform = 'capitalize';
+    }
+    return styles;
+}
+/**
+ * Generate all CSS properties from Figma node
+ */
+export function generateRawCSS(node) {
+    const styles = {};
+    // Dimensions
+    if (node.absoluteBoundingBox) {
+        const { width, height } = node.absoluteBoundingBox;
+        // Only set fixed dimensions if not using auto-layout sizing
+        if (node.layoutSizingHorizontal === 'FIXED' || !node.layoutSizingHorizontal) {
+            styles.width = `${width}px`;
+        }
+        else if (node.layoutSizingHorizontal === 'FILL') {
+            styles.width = '100%';
+        }
+        if (node.layoutSizingVertical === 'FIXED' || !node.layoutSizingVertical) {
+            styles.height = `${height}px`;
+        }
+        else if (node.layoutSizingVertical === 'FILL') {
+            styles.height = '100%';
+        }
+        // Min/max constraints
+        if (node.minWidth)
+            styles.minWidth = `${node.minWidth}px`;
+        if (node.maxWidth)
+            styles.maxWidth = `${node.maxWidth}px`;
+        if (node.minHeight)
+            styles.minHeight = `${node.minHeight}px`;
+        if (node.maxHeight)
+            styles.maxHeight = `${node.maxHeight}px`;
+    }
+    // Background
+    if (node.fills && node.fills.length > 0) {
+        const backgrounds = node.fills
+            .filter((fill) => fill.opacity === undefined || fill.opacity > 0)
+            .map(fillToCSS)
+            .filter(Boolean)
+            .reverse(); // Figma layers are bottom-up
+        if (backgrounds.length === 1) {
+            const bg = backgrounds[0];
+            if (bg.includes('gradient') || bg.includes('url(')) {
+                styles.background = bg;
+            }
+            else {
+                styles.backgroundColor = bg;
+            }
+        }
+        else if (backgrounds.length > 1) {
+            styles.background = backgrounds.join(', ');
+        }
+    }
+    // Border
+    if (node.strokes && node.strokes.length > 0 && node.strokeWeight) {
+        const stroke = node.strokes[0];
+        if (stroke.type === 'SOLID') {
+            const color = colorToCSS(stroke.color, stroke.opacity);
+            const align = node.strokeAlign || 'CENTER';
+            if (align === 'INSIDE') {
+                styles.boxShadow = `inset 0 0 0 ${node.strokeWeight}px ${color}`;
+            }
+            else {
+                styles.border = `${node.strokeWeight}px solid ${color}`;
+            }
+        }
+    }
+    // Border radius
+    if (node.cornerRadius && node.cornerRadius > 0) {
+        styles.borderRadius = `${node.cornerRadius}px`;
+    }
+    else if (node.rectangleCornerRadii) {
+        const [tl, tr, br, bl] = node.rectangleCornerRadii;
+        styles.borderRadius = `${tl}px ${tr}px ${br}px ${bl}px`;
+    }
+    // Opacity
+    if (node.opacity !== undefined && node.opacity < 1) {
+        styles.opacity = node.opacity.toFixed(2);
+    }
+    // Effects (shadows, blur)
+    if (node.effects && node.effects.length > 0) {
+        Object.assign(styles, effectsToCSS(node.effects));
+    }
+    // Overflow
+    if (node.clipsContent) {
+        styles.overflow = 'hidden';
+    }
+    // Layout (flexbox)
+    Object.assign(styles, layoutToCSS(node));
+    // Padding
+    Object.assign(styles, paddingToCSS(node));
+    // Text styles
+    if (node.type === 'TEXT') {
+        Object.assign(styles, textStyleToCSS(node));
+        // Text color from fills
+        if (node.fills && node.fills.length > 0) {
+            const textFill = node.fills[0];
+            if (textFill.type === 'SOLID') {
+                styles.color = colorToCSS(textFill.color, textFill.opacity);
+                delete styles.backgroundColor;
+            }
+        }
+    }
+    return styles;
+}
+/**
+ * Convert CSS object to inline style string
+ */
+export function cssToInlineStyle(css) {
+    return Object.entries(css)
+        .map(([key, value]) => {
+        // Convert camelCase to kebab-case
+        const kebabKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+        return `${kebabKey}: ${value}`;
+    })
+        .join('; ');
+}
+/**
+ * Convert CSS object to React style object string
+ */
+export function cssToReactStyle(css) {
+    const entries = Object.entries(css).map(([key, value]) => `${key}: '${value}'`);
+    return `{ ${entries.join(', ')} }`;
+}
+/**
+ * Convert CSS object to SCSS/CSS block
+ */
+export function cssToBlock(css, selector, indent = 0) {
+    const spaces = ' '.repeat(indent);
+    const lines = Object.entries(css).map(([key, value]) => {
+        const kebabKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+        return `${spaces}  ${kebabKey}: ${value};`;
+    });
+    return `${spaces}${selector} {\n${lines.join('\n')}\n${spaces}}`;
+}
+/**
+ * Generate Tailwind classes from CSS (approximation)
+ */
+export function cssToTailwind(css) {
+    const classes = [];
+    // Width
+    if (css.width) {
+        if (css.width === '100%')
+            classes.push('w-full');
+        else if (css.width.endsWith('px')) {
+            const val = parseInt(css.width);
+            if (val <= 96)
+                classes.push(`w-${val / 4}`);
+            else
+                classes.push(`w-[${css.width}]`);
+        }
+    }
+    // Height
+    if (css.height) {
+        if (css.height === '100%')
+            classes.push('h-full');
+        else if (css.height.endsWith('px')) {
+            const val = parseInt(css.height);
+            if (val <= 96)
+                classes.push(`h-${val / 4}`);
+            else
+                classes.push(`h-[${css.height}]`);
+        }
+    }
+    // Display flex
+    if (css.display === 'flex') {
+        classes.push('flex');
+        if (css.flexDirection === 'column')
+            classes.push('flex-col');
+        if (css.flexWrap === 'wrap')
+            classes.push('flex-wrap');
+    }
+    // Justify content
+    const justifyMap = {
+        'flex-start': 'justify-start',
+        'center': 'justify-center',
+        'flex-end': 'justify-end',
+        'space-between': 'justify-between',
+        'space-around': 'justify-around',
+    };
+    if (css.justifyContent && justifyMap[css.justifyContent]) {
+        classes.push(justifyMap[css.justifyContent]);
+    }
+    // Align items
+    const alignMap = {
+        'flex-start': 'items-start',
+        'center': 'items-center',
+        'flex-end': 'items-end',
+        'baseline': 'items-baseline',
+        'stretch': 'items-stretch',
+    };
+    if (css.alignItems && alignMap[css.alignItems]) {
+        classes.push(alignMap[css.alignItems]);
+    }
+    // Gap
+    if (css.gap) {
+        const val = parseInt(css.gap);
+        if (val <= 96)
+            classes.push(`gap-${val / 4}`);
+        else
+            classes.push(`gap-[${css.gap}]`);
+    }
+    // Padding
+    if (css.padding) {
+        const parts = css.padding.split(' ');
+        if (parts.length === 1) {
+            const val = parseInt(parts[0]);
+            classes.push(`p-${val / 4}`);
+        }
+        else if (parts.length === 2) {
+            const py = parseInt(parts[0]) / 4;
+            const px = parseInt(parts[1]) / 4;
+            classes.push(`py-${py}`, `px-${px}`);
+        }
+    }
+    // Border radius
+    if (css.borderRadius) {
+        const val = parseInt(css.borderRadius);
+        if (val >= 9999)
+            classes.push('rounded-full');
+        else if (val >= 16)
+            classes.push('rounded-xl');
+        else if (val >= 12)
+            classes.push('rounded-lg');
+        else if (val >= 8)
+            classes.push('rounded-md');
+        else if (val >= 4)
+            classes.push('rounded');
+        else if (val >= 2)
+            classes.push('rounded-sm');
+    }
+    // Background color (simplified - would need color matching)
+    if (css.backgroundColor) {
+        classes.push(`bg-[${css.backgroundColor.replace(/\s/g, '')}]`);
+    }
+    // Text color
+    if (css.color) {
+        classes.push(`text-[${css.color.replace(/\s/g, '')}]`);
+    }
+    // Font size
+    if (css.fontSize) {
+        const val = parseInt(css.fontSize);
+        const sizeMap = {
+            12: 'text-xs',
+            14: 'text-sm',
+            16: 'text-base',
+            18: 'text-lg',
+            20: 'text-xl',
+            24: 'text-2xl',
+            30: 'text-3xl',
+        };
+        if (sizeMap[val])
+            classes.push(sizeMap[val]);
+        else
+            classes.push(`text-[${val}px]`);
+    }
+    // Font weight
+    if (css.fontWeight) {
+        const weightMap = {
+            '400': 'font-normal',
+            '500': 'font-medium',
+            '600': 'font-semibold',
+            '700': 'font-bold',
+        };
+        if (weightMap[css.fontWeight])
+            classes.push(weightMap[css.fontWeight]);
+    }
+    // Box shadow
+    if (css.boxShadow) {
+        if (css.boxShadow.includes('inset'))
+            classes.push('shadow-inner');
+        else
+            classes.push('shadow-lg');
+    }
+    // Opacity
+    if (css.opacity) {
+        const val = Math.round(parseFloat(css.opacity) * 100);
+        classes.push(`opacity-${val}`);
+    }
+    // Overflow
+    if (css.overflow === 'hidden')
+        classes.push('overflow-hidden');
+    return classes;
+}

package/dist/frameworks/antd.template.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Ant Design Template
+ * Generates React components with Ant Design components
+ */
+import type { IComponentAST } from '@promptui-lib/core';
+/**
+ * Generate complete Ant Design component
+ */
+export declare function generateAntdComponent(ast: IComponentAST): string;
+/**
+ * Generate Ant Design ConfigProvider wrapper with theme
+ */
+export declare function generateAntdThemeConfig(colors: Record<string, string>): string;
+/**
+ * Generate complete page with Ant Design Layout
+ */
+export declare function generateAntdLayout(ast: IComponentAST): string;
+//# sourceMappingURL=antd.template.d.ts.map

package/dist/frameworks/antd.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"antd.template.d.ts","sourceRoot":"","sources":["../../src/frameworks/antd.template.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAmD,MAAM,oBAAoB,CAAC;AA4LzG;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAiChE;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAoB9E;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAwC7D"}