@promptui-lib/codegen 0.1.0

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

@@ -0,0 +1,10 @@
+/**
+ * Bootstrap Template
+ * Gera componentes React com classes Bootstrap
+ */
+import type { IComponentAST } from '@promptui-lib/core';
+/**
+ * Gera componente React com Bootstrap
+ */
+export declare function generateBootstrapComponent(ast: IComponentAST): string;
+//# sourceMappingURL=bootstrap.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.template.d.ts","sourceRoot":"","sources":["../../src/frameworks/bootstrap.template.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,aAAa,EAA4B,MAAM,oBAAoB,CAAC;AA6QlF;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAsCrE"}

package/dist/frameworks/bootstrap.template.js

@@ -0,0 +1,294 @@
+/**
+ * Bootstrap Template
+ * Gera componentes React com classes Bootstrap
+ */
+/**
+ * Mapeamento de tokens SCSS → Bootstrap classes
+ */
+const TOKEN_TO_BOOTSTRAP = {
+    // Colors - Background
+    '$color-primary': 'bg-primary',
+    '$color-secondary': 'bg-secondary',
+    '$color-success': 'bg-success',
+    '$color-error': 'bg-danger',
+    '$color-warning': 'bg-warning',
+    '$color-bg-primary': 'bg-white',
+    '$color-bg-secondary': 'bg-light',
+    '$color-bg-tertiary': 'bg-body-secondary',
+    // Colors - Text
+    '$color-text-primary': 'text-dark',
+    '$color-text-secondary': 'text-secondary',
+    '$color-text-tertiary': 'text-muted',
+    '$color-text-inverse': 'text-white',
+    // Border colors
+    '$color-border': 'border-light',
+    '$color-border-primary': 'border-secondary',
+    // Spacing (Bootstrap usa 0-5 scale)
+    '$spacing-xs': '1',
+    '$spacing-sm': '2',
+    '$spacing-md': '3',
+    '$spacing-lg': '4',
+    '$spacing-xl': '5',
+    '$spacing-2xl': '5',
+    // Border radius
+    '$radius-none': 'rounded-0',
+    '$radius-small': 'rounded-1',
+    '$radius-medium': 'rounded-2',
+    '$radius-large': 'rounded-3',
+    '$radius-xl': 'rounded-4',
+    '$radius-full': 'rounded-circle',
+    // Font sizes
+    '$font-size-xs': 'fs-6',
+    '$font-size-sm': 'fs-6',
+    '$font-size-md': 'fs-5',
+    '$font-size-lg': 'fs-4',
+    '$font-size-xl': 'fs-3',
+    '$font-size-2xl': 'fs-2',
+    '$font-size-h1': 'fs-1',
+    '$font-size-h2': 'fs-2',
+    // Font weights
+    '$font-weight-regular': 'fw-normal',
+    '$font-weight-medium': 'fw-medium',
+    '$font-weight-semibold': 'fw-semibold',
+    '$font-weight-bold': 'fw-bold',
+    // Shadows
+    '$shadow-sm': 'shadow-sm',
+    '$shadow-md': 'shadow',
+    '$shadow-lg': 'shadow-lg',
+    '$shadow-modal': 'shadow-lg',
+};
+/**
+ * Mapeamentos de valores CSS → Bootstrap
+ */
+const CSS_TO_BOOTSTRAP = {
+    'display': {
+        'flex': 'd-flex',
+        'block': 'd-block',
+        'inline': 'd-inline',
+        'inline-flex': 'd-inline-flex',
+        'grid': 'd-grid',
+        'none': 'd-none',
+    },
+    'flex-direction': {
+        'row': 'flex-row',
+        'column': 'flex-column',
+        'row-reverse': 'flex-row-reverse',
+        'column-reverse': 'flex-column-reverse',
+    },
+    'align-items': {
+        'flex-start': 'align-items-start',
+        'flex-end': 'align-items-end',
+        'center': 'align-items-center',
+        'baseline': 'align-items-baseline',
+        'stretch': 'align-items-stretch',
+    },
+    'justify-content': {
+        'flex-start': 'justify-content-start',
+        'flex-end': 'justify-content-end',
+        'center': 'justify-content-center',
+        'space-between': 'justify-content-between',
+        'space-around': 'justify-content-around',
+        'space-evenly': 'justify-content-evenly',
+    },
+    'text-align': {
+        'left': 'text-start',
+        'center': 'text-center',
+        'right': 'text-end',
+    },
+    'width': {
+        '100%': 'w-100',
+        '75%': 'w-75',
+        '50%': 'w-50',
+        '25%': 'w-25',
+        'auto': 'w-auto',
+    },
+    'height': {
+        '100%': 'h-100',
+        '75%': 'h-75',
+        '50%': 'h-50',
+        '25%': 'h-25',
+        'auto': 'h-auto',
+    },
+};
+/**
+ * Converte propriedade CSS para classe Bootstrap
+ */
+function cssToBootstrap(property, value) {
+    // Se o valor é um token, usa mapeamento direto
+    if (value.startsWith('$')) {
+        const bootstrapClass = TOKEN_TO_BOOTSTRAP[value];
+        if (bootstrapClass) {
+            // Verifica se precisa ajustar para a propriedade
+            if (property === 'color' && bootstrapClass.startsWith('bg-')) {
+                return bootstrapClass.replace('bg-', 'text-');
+            }
+            return bootstrapClass;
+        }
+    }
+    // Mapeamento de valores específicos
+    const valueMap = CSS_TO_BOOTSTRAP[property];
+    if (valueMap && valueMap[value]) {
+        return valueMap[value];
+    }
+    // Para spacing, converte para classes Bootstrap
+    if (['padding', 'margin'].includes(property)) {
+        const numValue = parseInt(value);
+        if (!isNaN(numValue)) {
+            const prefix = property === 'padding' ? 'p' : 'm';
+            // Mapeia px para escala Bootstrap (0-5)
+            let scale = 0;
+            if (numValue <= 4)
+                scale = 1;
+            else if (numValue <= 8)
+                scale = 2;
+            else if (numValue <= 16)
+                scale = 3;
+            else if (numValue <= 24)
+                scale = 4;
+            else
+                scale = 5;
+            return `${prefix}-${scale}`;
+        }
+    }
+    // Padding/Margin específicos
+    const spacingMap = {
+        'padding-top': 'pt',
+        'padding-bottom': 'pb',
+        'padding-left': 'ps',
+        'padding-right': 'pe',
+        'margin-top': 'mt',
+        'margin-bottom': 'mb',
+        'margin-left': 'ms',
+        'margin-right': 'me',
+    };
+    if (spacingMap[property]) {
+        const numValue = parseInt(value);
+        if (!isNaN(numValue)) {
+            let scale = 0;
+            if (numValue <= 4)
+                scale = 1;
+            else if (numValue <= 8)
+                scale = 2;
+            else if (numValue <= 16)
+                scale = 3;
+            else if (numValue <= 24)
+                scale = 4;
+            else
+                scale = 5;
+            return `${spacingMap[property]}-${scale}`;
+        }
+    }
+    // Gap
+    if (property === 'gap') {
+        const numValue = parseInt(value);
+        if (!isNaN(numValue)) {
+            let scale = 0;
+            if (numValue <= 4)
+                scale = 1;
+            else if (numValue <= 8)
+                scale = 2;
+            else if (numValue <= 16)
+                scale = 3;
+            else if (numValue <= 24)
+                scale = 4;
+            else
+                scale = 5;
+            return `gap-${scale}`;
+        }
+    }
+    return null;
+}
+/**
+ * Converte estilos para classes Bootstrap
+ */
+function generateBootstrapClasses(styles) {
+    const classes = [];
+    for (const style of styles) {
+        const value = style.token ?? style.value;
+        const bootstrapClass = cssToBootstrap(style.property, value);
+        if (bootstrapClass) {
+            classes.push(bootstrapClass);
+        }
+    }
+    return classes;
+}
+/**
+ * Gera JSX com classes Bootstrap
+ */
+function generateBootstrapJSX(node, styles, indent = 2) {
+    const spaces = ' '.repeat(indent);
+    const isRoot = indent === 2;
+    const nodeStyles = styles.get(`.${node.className}`) ?? [];
+    const bootstrapClasses = generateBootstrapClasses(nodeStyles);
+    const classStr = bootstrapClasses.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(generateBootstrapJSX(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 Bootstrap
+ */
+export function generateBootstrapComponent(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 = generateBootstrapJSX(ast.jsx, stylesMap);
+    // Component
+    const component = `export const ${ast.name} = ({
+  children,
+  className = '',
+}: I${ast.name}Props) => {
+  return (
+${jsx}
+  );
+};`;
+    return [
+        '/**',
+        ` * ${ast.name}`,
+        ' * Generated by PromptUI (Bootstrap)',
+        ' */',
+        '',
+        "import type { ReactNode } from 'react';",
+        '',
+        propsInterface,
+        '',
+        component,
+    ].join('\n');
+}

package/dist/frameworks/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Framework Templates
+ * Templates de geração para diferentes frameworks UI
+ */
+export type FrameworkType = 'react' | 'mui' | 'tailwind' | 'bootstrap';
+export interface IFrameworkConfig {
+    name: FrameworkType;
+    displayName: string;
+    description: string;
+    fileExtension: string;
+    styleExtension: string | null;
+    imports: string[];
+    componentWrapper?: string;
+}
+export declare const FRAMEWORKS: Record<FrameworkType, IFrameworkConfig>;
+export { generateMuiComponent, generateMuiStyles } from './mui.template.js';
+export { generateTailwindComponent, generateTailwindClasses } from './tailwind.template.js';
+export { generateBootstrapComponent } from './bootstrap.template.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/frameworks/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,UAAU,GAAG,WAAW,CAAC;AAEvE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAqC9D,CAAC;AAEF,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAE,yBAAyB,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAC5F,OAAO,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/frameworks/index.js

@@ -0,0 +1,45 @@
+/**
+ * Framework Templates
+ * Templates de geração para diferentes frameworks UI
+ */
+export const FRAMEWORKS = {
+    react: {
+        name: 'react',
+        displayName: 'React + SCSS',
+        description: 'React components with BEM SCSS styles',
+        fileExtension: 'tsx',
+        styleExtension: 'scss',
+        imports: ["import type { ReactNode } from 'react';"],
+    },
+    mui: {
+        name: 'mui',
+        displayName: 'Material UI',
+        description: 'React components with MUI sx props and components',
+        fileExtension: 'tsx',
+        styleExtension: null, // Inline sx props
+        imports: [
+            "import type { ReactNode } from 'react';",
+            "import { Box, Stack, Typography, Button, Card, CardContent } from '@mui/material';",
+            "import type { SxProps, Theme } from '@mui/material/styles';",
+        ],
+    },
+    tailwind: {
+        name: 'tailwind',
+        displayName: 'Tailwind CSS',
+        description: 'React components with Tailwind utility classes',
+        fileExtension: 'tsx',
+        styleExtension: null, // Inline classes
+        imports: ["import type { ReactNode } from 'react';"],
+    },
+    bootstrap: {
+        name: 'bootstrap',
+        displayName: 'Bootstrap',
+        description: 'React components with Bootstrap classes',
+        fileExtension: 'tsx',
+        styleExtension: null, // Bootstrap classes
+        imports: ["import type { ReactNode } from 'react';"],
+    },
+};
+export { generateMuiComponent, generateMuiStyles } from './mui.template.js';
+export { generateTailwindComponent, generateTailwindClasses } from './tailwind.template.js';
+export { generateBootstrapComponent } from './bootstrap.template.js';

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

@@ -0,0 +1,14 @@
+/**
+ * Material UI Template
+ * Gera componentes React com MUI sx props
+ */
+import type { IComponentAST } from '@promptui-lib/core';
+/**
+ * Gera componente React com MUI
+ */
+export declare function generateMuiComponent(ast: IComponentAST): string;
+/**
+ * Gera arquivo de estilos (para MUI, retorna objeto de sx reusáveis)
+ */
+export declare function generateMuiStyles(ast: IComponentAST): string;
+//# sourceMappingURL=mui.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mui.template.d.ts","sourceRoot":"","sources":["../../src/frameworks/mui.template.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,aAAa,EAA4B,MAAM,oBAAoB,CAAC;AA6QlF;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CA+C/D;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAwB5D"}