@promptui-lib/codegen 0.1.0

package/dist/frameworks/mui.template.js

@@ -0,0 +1,304 @@
+/**
+ * Material UI Template
+ * Gera componentes React com MUI sx props
+ */
+/**
+ * Mapeamento de tokens SCSS → MUI theme
+ */
+const TOKEN_TO_MUI = {
+    // Colors
+    '$color-primary': 'primary.main',
+    '$color-secondary': 'secondary.main',
+    '$color-success': 'success.main',
+    '$color-error': 'error.main',
+    '$color-warning': 'warning.main',
+    '$color-text-primary': 'text.primary',
+    '$color-text-secondary': 'text.secondary',
+    '$color-bg-primary': 'background.paper',
+    '$color-bg-secondary': 'background.default',
+    // Spacing (MUI usa múltiplos de 8px)
+    '$spacing-xs': 0.5, // 4px
+    '$spacing-sm': 1, // 8px
+    '$spacing-md': 2, // 16px
+    '$spacing-lg': 3, // 24px
+    '$spacing-xl': 4, // 32px
+    '$spacing-2xl': 6, // 48px
+    // Border radius
+    '$radius-none': 0,
+    '$radius-small': 0.5,
+    '$radius-medium': 1,
+    '$radius-large': 1.5,
+    '$radius-xl': 2,
+    '$radius-full': '50%',
+    // Typography
+    '$font-size-xs': 'caption.fontSize',
+    '$font-size-sm': 'body2.fontSize',
+    '$font-size-md': 'body1.fontSize',
+    '$font-size-lg': 'h6.fontSize',
+    '$font-size-xl': 'h5.fontSize',
+    '$font-size-2xl': 'h4.fontSize',
+    '$font-size-h1': 'h1.fontSize',
+    '$font-size-h2': 'h2.fontSize',
+    // Shadows
+    '$shadow-sm': 1,
+    '$shadow-md': 2,
+    '$shadow-lg': 4,
+    '$shadow-modal': 8,
+};
+/**
+ * Converte propriedade CSS para sx prop
+ */
+function cssToSx(property, value) {
+    // Mapeamento de propriedades CSS → sx
+    const propMap = {
+        'display': 'display',
+        'flex-direction': 'flexDirection',
+        'align-items': 'alignItems',
+        'justify-content': 'justifyContent',
+        'gap': 'gap',
+        'padding': 'p',
+        'padding-top': 'pt',
+        'padding-bottom': 'pb',
+        'padding-left': 'pl',
+        'padding-right': 'pr',
+        'margin': 'm',
+        'margin-top': 'mt',
+        'margin-bottom': 'mb',
+        'margin-left': 'ml',
+        'margin-right': 'mr',
+        'width': 'width',
+        'height': 'height',
+        'min-width': 'minWidth',
+        'max-width': 'maxWidth',
+        'min-height': 'minHeight',
+        'max-height': 'maxHeight',
+        'background-color': 'bgcolor',
+        'color': 'color',
+        'border-radius': 'borderRadius',
+        'border': 'border',
+        'border-color': 'borderColor',
+        'box-shadow': 'boxShadow',
+        'font-family': 'fontFamily',
+        'font-size': 'fontSize',
+        'font-weight': 'fontWeight',
+        'line-height': 'lineHeight',
+        'text-align': 'textAlign',
+        'overflow': 'overflow',
+        'position': 'position',
+        'top': 'top',
+        'bottom': 'bottom',
+        'left': 'left',
+        'right': 'right',
+        'z-index': 'zIndex',
+        'cursor': 'cursor',
+        'opacity': 'opacity',
+    };
+    const sxKey = propMap[property] ?? property;
+    // Converte valor de token para MUI
+    if (value.startsWith('$')) {
+        const muiValue = TOKEN_TO_MUI[value];
+        if (muiValue !== undefined) {
+            return { key: sxKey, value: muiValue };
+        }
+    }
+    // Remove 'px' de valores numéricos para spacing
+    if (['p', 'pt', 'pb', 'pl', 'pr', 'm', 'mt', 'mb', 'ml', 'mr', 'gap'].includes(sxKey)) {
+        const numValue = parseInt(value);
+        if (!isNaN(numValue)) {
+            // Converte px para unidades MUI (múltiplos de 8)
+            return { key: sxKey, value: numValue / 8 };
+        }
+    }
+    return { key: sxKey, value };
+}
+/**
+ * Converte array de estilos para objeto sx
+ */
+function stylesToSx(styles) {
+    const sx = {};
+    for (const style of styles) {
+        const { key, value } = cssToSx(style.property, style.token ?? style.value);
+        sx[key] = value;
+    }
+    return sx;
+}
+/**
+ * Formata objeto sx como string
+ */
+function formatSx(sx, indent = 2) {
+    const spaces = ' '.repeat(indent);
+    const entries = Object.entries(sx);
+    if (entries.length === 0)
+        return '{}';
+    const lines = entries.map(([key, value]) => {
+        if (typeof value === 'string') {
+            // Verifica se é referência ao theme
+            if (value.includes('.')) {
+                return `${spaces}  ${key}: '${value}',`;
+            }
+            return `${spaces}  ${key}: '${value}',`;
+        }
+        return `${spaces}  ${key}: ${value},`;
+    });
+    return `{\n${lines.join('\n')}\n${spaces}}`;
+}
+/**
+ * Determina o componente MUI apropriado baseado no tipo
+ */
+function getMuiComponent(node, isRoot) {
+    // Button
+    if (node.tag === 'button') {
+        return 'Button';
+    }
+    // Text
+    if (node.tag === 'span' || node.tag === 'p' || node.tag === 'h1' || node.tag === 'h2' || node.tag === 'h3') {
+        return 'Typography';
+    }
+    // Container com flex
+    if (node.props && Object.keys(node.props).length > 0) {
+        return 'Stack';
+    }
+    // Default
+    return 'Box';
+}
+/**
+ * Gera props adicionais do MUI baseado no contexto
+ */
+function getMuiProps(node, componentType) {
+    const props = [];
+    if (componentType === 'Button') {
+        props.push('variant="contained"');
+    }
+    if (componentType === 'Typography') {
+        // Determina variante baseado no contexto
+        const className = node.className ?? '';
+        if (className.includes('title') || className.includes('heading')) {
+            props.push('variant="h6"');
+        }
+        else if (className.includes('label')) {
+            props.push('variant="body2"');
+        }
+        else {
+            props.push('variant="body1"');
+        }
+    }
+    if (componentType === 'Stack') {
+        props.push('direction="row"');
+        props.push('spacing={1}');
+    }
+    return props;
+}
+/**
+ * Gera JSX com componentes MUI
+ */
+function generateMuiJSX(node, styles, indent = 2) {
+    const spaces = ' '.repeat(indent);
+    const isRoot = indent === 2;
+    const muiComponent = getMuiComponent(node, isRoot);
+    const muiProps = getMuiProps(node, muiComponent);
+    const nodeStyles = styles.get(`.${node.className}`) ?? [];
+    const sx = stylesToSx(nodeStyles);
+    // Props string
+    const propsArray = [];
+    if (isRoot) {
+        propsArray.push(`className={\`${node.className} \${className}\`.trim()}`);
+    }
+    propsArray.push(...muiProps);
+    if (Object.keys(sx).length > 0) {
+        propsArray.push(`sx={${formatSx(sx, indent)}}`);
+    }
+    const propsStr = propsArray.length > 0 ? ` ${propsArray.join(' ')}` : '';
+    // Children
+    if (node.selfClosing) {
+        return `${spaces}<${muiComponent}${propsStr} />`;
+    }
+    const childrenContent = [];
+    for (const child of node.children) {
+        if (typeof child === 'string' || (typeof child === 'object' && 'type' in child && child.type === 'text')) {
+            const text = typeof child === 'string' ? child : child.value;
+            childrenContent.push(`${spaces}  {children ?? '${text}'}`);
+        }
+        else {
+            childrenContent.push(generateMuiJSX(child, styles, indent + 2));
+        }
+    }
+    if (childrenContent.length === 0) {
+        return `${spaces}<${muiComponent}${propsStr} />`;
+    }
+    return [
+        `${spaces}<${muiComponent}${propsStr}>`,
+        ...childrenContent,
+        `${spaces}</${muiComponent}>`,
+    ].join('\n');
+}
+/**
+ * Gera componente React com MUI
+ */
+export function generateMuiComponent(ast) {
+    // Cria mapa de estilos por selector
+    const stylesMap = new Map();
+    for (const block of ast.styles) {
+        stylesMap.set(block.selector, block.properties);
+    }
+    // Props interface
+    const propsInterface = `export interface I${ast.name}Props {
+  children?: ReactNode;
+  className?: string;
+  sx?: SxProps<Theme>;
+}`;
+    // JSX
+    const jsx = generateMuiJSX(ast.jsx, stylesMap);
+    // Component
+    const component = `export const ${ast.name} = ({
+  children,
+  className = '',
+  sx: sxOverride,
+}: I${ast.name}Props) => {
+  return (
+${jsx}
+  );
+};`;
+    // Imports
+    const imports = [
+        "import type { ReactNode } from 'react';",
+        "import { Box, Stack, Typography, Button } from '@mui/material';",
+        "import type { SxProps, Theme } from '@mui/material/styles';",
+    ];
+    return [
+        '/**',
+        ` * ${ast.name}`,
+        ' * Generated by PromptUI (MUI)',
+        ' */',
+        '',
+        ...imports,
+        '',
+        propsInterface,
+        '',
+        component,
+    ].join('\n');
+}
+/**
+ * Gera arquivo de estilos (para MUI, retorna objeto de sx reusáveis)
+ */
+export function generateMuiStyles(ast) {
+    const styles = {};
+    for (const block of ast.styles) {
+        const className = block.selector.replace(/^\./, '').replace(/__/g, '_').replace(/--/g, '_');
+        styles[className] = stylesToSx(block.properties);
+    }
+    const stylesStr = Object.entries(styles)
+        .map(([key, value]) => `  ${key}: ${JSON.stringify(value, null, 2).replace(/\n/g, '\n  ')},`)
+        .join('\n');
+    return [
+        '/**',
+        ` * ${ast.name} Styles`,
+        ' * Generated by PromptUI (MUI)',
+        ' */',
+        '',
+        "import type { SxProps, Theme } from '@mui/material/styles';",
+        '',
+        `export const ${ast.fileName.replace(/-/g, '')}Styles: Record<string, SxProps<Theme>> = {`,
+        stylesStr,
+        '};',
+    ].join('\n');
+}

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

@@ -0,0 +1,14 @@
+/**
+ * Tailwind CSS Template
+ * Gera componentes React com classes Tailwind
+ */
+import type { IComponentAST, IStyleProperty } from '@promptui-lib/core';
+/**
+ * Converte estilos para classes Tailwind
+ */
+export declare function generateTailwindClasses(styles: IStyleProperty[]): string[];
+/**
+ * Gera componente React com Tailwind
+ */
+export declare function generateTailwindComponent(ast: IComponentAST): string;
+//# sourceMappingURL=tailwind.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind.template.d.ts","sourceRoot":"","sources":["../../src/frameworks/tailwind.template.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAY,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAuMlF;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,cAAc,EAAE,GAAG,MAAM,EAAE,CAY1E;AAuDD;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAsCpE"}

package/dist/frameworks/tailwind.template.js

@@ -0,0 +1,286 @@
+/**
+ * Tailwind CSS Template
+ * Gera componentes React com classes Tailwind
+ */
+/**
+ * Mapeamento de tokens SCSS → Tailwind classes
+ */
+const TOKEN_TO_TAILWIND = {
+    // Colors - Background
+    '$color-primary': 'bg-blue-500',
+    '$color-secondary': 'bg-gray-500',
+    '$color-success': 'bg-green-500',
+    '$color-error': 'bg-red-500',
+    '$color-warning': 'bg-yellow-500',
+    '$color-bg-primary': 'bg-white',
+    '$color-bg-secondary': 'bg-gray-50',
+    '$color-bg-tertiary': 'bg-gray-100',
+    // Colors - Text
+    '$color-text-primary': 'text-gray-900',
+    '$color-text-secondary': 'text-gray-600',
+    '$color-text-tertiary': 'text-gray-400',
+    '$color-text-inverse': 'text-white',
+    // Border colors
+    '$color-border': 'border-gray-200',
+    '$color-border-primary': 'border-gray-300',
+    // Spacing
+    '$spacing-xs': '1', // 4px = 0.25rem
+    '$spacing-sm': '2', // 8px = 0.5rem
+    '$spacing-md': '4', // 16px = 1rem
+    '$spacing-lg': '6', // 24px = 1.5rem
+    '$spacing-xl': '8', // 32px = 2rem
+    '$spacing-2xl': '12', // 48px = 3rem
+    // Border radius
+    '$radius-none': 'rounded-none',
+    '$radius-small': 'rounded',
+    '$radius-medium': 'rounded-md',
+    '$radius-large': 'rounded-lg',
+    '$radius-xl': 'rounded-xl',
+    '$radius-full': 'rounded-full',
+    // Font sizes
+    '$font-size-xs': 'text-xs',
+    '$font-size-sm': 'text-sm',
+    '$font-size-md': 'text-base',
+    '$font-size-lg': 'text-lg',
+    '$font-size-xl': 'text-xl',
+    '$font-size-2xl': 'text-2xl',
+    '$font-size-h1': 'text-3xl',
+    '$font-size-h2': 'text-2xl',
+    // Font weights
+    '$font-weight-regular': 'font-normal',
+    '$font-weight-medium': 'font-medium',
+    '$font-weight-semibold': 'font-semibold',
+    '$font-weight-bold': 'font-bold',
+    // Shadows
+    '$shadow-sm': 'shadow-sm',
+    '$shadow-md': 'shadow',
+    '$shadow-lg': 'shadow-lg',
+    '$shadow-modal': 'shadow-xl',
+};
+/**
+ * Mapeamento de propriedades CSS → prefixo Tailwind
+ */
+const CSS_TO_TAILWIND_PREFIX = {
+    'display': '',
+    'flex-direction': 'flex-',
+    'align-items': 'items-',
+    'justify-content': 'justify-',
+    'gap': 'gap-',
+    'padding': 'p-',
+    'padding-top': 'pt-',
+    'padding-bottom': 'pb-',
+    'padding-left': 'pl-',
+    'padding-right': 'pr-',
+    'margin': 'm-',
+    'margin-top': 'mt-',
+    'margin-bottom': 'mb-',
+    'margin-left': 'ml-',
+    'margin-right': 'mr-',
+    'width': 'w-',
+    'height': 'h-',
+    'min-width': 'min-w-',
+    'max-width': 'max-w-',
+    'min-height': 'min-h-',
+    'max-height': 'max-h-',
+    'background-color': 'bg-',
+    'color': 'text-',
+    'border-radius': '',
+    'border': 'border',
+    'border-color': 'border-',
+    'font-size': '',
+    'font-weight': '',
+    'line-height': 'leading-',
+    'text-align': 'text-',
+    'overflow': 'overflow-',
+    'cursor': 'cursor-',
+    'opacity': 'opacity-',
+};
+/**
+ * Mapeamentos de valores CSS → Tailwind
+ */
+const CSS_VALUE_TO_TAILWIND = {
+    'display': {
+        'flex': 'flex',
+        'block': 'block',
+        'inline': 'inline',
+        'inline-flex': 'inline-flex',
+        'grid': 'grid',
+        'none': 'hidden',
+    },
+    'flex-direction': {
+        'row': 'row',
+        'column': 'col',
+        'row-reverse': 'row-reverse',
+        'column-reverse': 'col-reverse',
+    },
+    'align-items': {
+        'flex-start': 'start',
+        'flex-end': 'end',
+        'center': 'center',
+        'baseline': 'baseline',
+        'stretch': 'stretch',
+    },
+    'justify-content': {
+        'flex-start': 'start',
+        'flex-end': 'end',
+        'center': 'center',
+        'space-between': 'between',
+        'space-around': 'around',
+        'space-evenly': 'evenly',
+    },
+    'text-align': {
+        'left': 'left',
+        'center': 'center',
+        'right': 'right',
+        'justify': 'justify',
+    },
+    'cursor': {
+        'pointer': 'pointer',
+        'default': 'default',
+        'not-allowed': 'not-allowed',
+    },
+};
+/**
+ * Converte propriedade CSS para classe Tailwind
+ */
+function cssToTailwind(property, value) {
+    // Se o valor é um token, usa mapeamento direto
+    if (value.startsWith('$')) {
+        const tailwindClass = TOKEN_TO_TAILWIND[value];
+        if (tailwindClass) {
+            // Verifica se precisa ajustar para a propriedade
+            if (property === 'color' && tailwindClass.startsWith('bg-')) {
+                return tailwindClass.replace('bg-', 'text-');
+            }
+            return tailwindClass;
+        }
+    }
+    // Mapeamento de valores específicos
+    const valueMap = CSS_VALUE_TO_TAILWIND[property];
+    if (valueMap && valueMap[value]) {
+        const prefix = CSS_TO_TAILWIND_PREFIX[property] ?? '';
+        return `${prefix}${valueMap[value]}`;
+    }
+    // Para spacing, converte px para unidades Tailwind
+    if (['padding', 'margin', 'gap', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right', 'margin-top', 'margin-bottom', 'margin-left', 'margin-right'].includes(property)) {
+        const numValue = parseInt(value);
+        if (!isNaN(numValue)) {
+            const prefix = CSS_TO_TAILWIND_PREFIX[property] ?? '';
+            // Mapeia px para escala Tailwind (4px = 1, 8px = 2, etc.)
+            const scale = Math.round(numValue / 4);
+            return `${prefix}${scale}`;
+        }
+    }
+    // Width/Height específicos
+    if (property === 'width') {
+        if (value === '100%')
+            return 'w-full';
+        if (value === 'fit-content')
+            return 'w-fit';
+        if (value === 'auto')
+            return 'w-auto';
+    }
+    if (property === 'height') {
+        if (value === '100%')
+            return 'h-full';
+        if (value === 'fit-content')
+            return 'h-fit';
+        if (value === 'auto')
+            return 'h-auto';
+    }
+    return null;
+}
+/**
+ * Converte estilos para classes Tailwind
+ */
+export function generateTailwindClasses(styles) {
+    const classes = [];
+    for (const style of styles) {
+        const value = style.token ?? style.value;
+        const tailwindClass = cssToTailwind(style.property, value);
+        if (tailwindClass) {
+            classes.push(tailwindClass);
+        }
+    }
+    return classes;
+}
+/**
+ * Gera JSX com classes Tailwind
+ */
+function generateTailwindJSX(node, styles, indent = 2) {
+    const spaces = ' '.repeat(indent);
+    const isRoot = indent === 2;
+    const nodeStyles = styles.get(`.${node.className}`) ?? [];
+    const tailwindClasses = generateTailwindClasses(nodeStyles);
+    const classStr = tailwindClasses.join(' ');
+    // Props string
+    let className;
+    if (isRoot) {
+        className = `className={\`${classStr} \${className}\`.trim()}`;
+    }
+    else {
+        className = `className="${classStr}"`;
+    }
+    // Tag
+    const tag = node.tag;
+    // Children
+    if (node.selfClosing) {
+        return `${spaces}<${tag} ${className} />`;
+    }
+    const childrenContent = [];
+    for (const child of node.children) {
+        if (typeof child === 'string' || (typeof child === 'object' && 'type' in child && child.type === 'text')) {
+            const text = typeof child === 'string' ? child : child.value;
+            childrenContent.push(`${spaces}  {children ?? '${text}'}`);
+        }
+        else {
+            childrenContent.push(generateTailwindJSX(child, styles, indent + 2));
+        }
+    }
+    if (childrenContent.length === 0) {
+        return `${spaces}<${tag} ${className} />`;
+    }
+    return [
+        `${spaces}<${tag} ${className}>`,
+        ...childrenContent,
+        `${spaces}</${tag}>`,
+    ].join('\n');
+}
+/**
+ * Gera componente React com Tailwind
+ */
+export function generateTailwindComponent(ast) {
+    // Cria mapa de estilos por selector
+    const stylesMap = new Map();
+    for (const block of ast.styles) {
+        stylesMap.set(block.selector, block.properties);
+    }
+    // Props interface
+    const propsInterface = `export interface I${ast.name}Props {
+  children?: ReactNode;
+  className?: string;
+}`;
+    // JSX
+    const jsx = generateTailwindJSX(ast.jsx, stylesMap);
+    // Component
+    const component = `export const ${ast.name} = ({
+  children,
+  className = '',
+}: I${ast.name}Props) => {
+  return (
+${jsx}
+  );
+};`;
+    return [
+        '/**',
+        ` * ${ast.name}`,
+        ' * Generated by PromptUI (Tailwind)',
+        ' */',
+        '',
+        "import type { ReactNode } from 'react';",
+        '',
+        propsInterface,
+        '',
+        component,
+    ].join('\n');
+}

package/dist/generators/index.d.ts

@@ -0,0 +1,3 @@
+export { generateTSX, generateIndex } from './tsx-generator.js';
+export { generateSCSS, generateFlatSCSS } from './scss-generator.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/generators/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/generators/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/generators/index.js

@@ -0,0 +1,2 @@
+export { generateTSX, generateIndex } from './tsx-generator.js';
+export { generateSCSS, generateFlatSCSS } from './scss-generator.js';

package/dist/generators/scss-generator.d.ts

@@ -0,0 +1,14 @@
+/**
+ * SCSS Generator
+ * Gera código SCSS com metodologia BEM a partir do AST
+ */
+import type { IComponentAST } from '@promptui-lib/core';
+/**
+ * Gera código SCSS completo
+ */
+export declare function generateSCSS(ast: IComponentAST): string;
+/**
+ * Gera SCSS simples (não aninhado)
+ */
+export declare function generateFlatSCSS(ast: IComponentAST): string;
+//# sourceMappingURL=scss-generator.d.ts.map

package/dist/generators/scss-generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scss-generator.d.ts","sourceRoot":"","sources":["../../src/generators/scss-generator.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,aAAa,EAA+B,MAAM,oBAAoB,CAAC;AAoHrF;;GAEG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAavD;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAc3D"}