@promptui-lib/codegen 0.1.18 → 0.1.20

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

@@ -1 +1 @@
-{"version":3,"file":"antd.template.d.ts","sourceRoot":"","sources":["../../src/frameworks/antd.template.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAkE,MAAM,oBAAoB,CAAC;AAuMxH;;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"}
+{"version":3,"file":"antd.template.d.ts","sourceRoot":"","sources":["../../src/frameworks/antd.template.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,aAAa,EAA6E,MAAM,oBAAoB,CAAC;AAqNnI;;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"}

package/dist/frameworks/antd.template.js

@@ -96,6 +96,12 @@ function isComponentNode(child) {
 function isJSXNode(child) {
     return 'tag' in child;
 }
+/**
+ * Check if a child is an asset node
+ */
+function isAssetNode(child) {
+    return 'type' in child && child.type === 'asset';
+}
 /**
  * Collect all imports needed for the component
  */
@@ -162,6 +168,13 @@ function generateJSX(node, indent = 2) {
                 // Render child component as <ComponentName />
                 return `${spaces}  <${child.componentName} />`;
             }
+            if (isAssetNode(child)) {
+                // Render asset as <img /> with placeholder src
+                const classAttrAsset = child.className ? ` className="${child.className}"` : '';
+                const widthAttr = child.width ? ` width={${Math.round(child.width)}}` : '';
+                const heightAttr = child.height ? ` height={${Math.round(child.height)}}` : '';
+                return `${spaces}  <img src="${child.fileName}.${child.format}" alt="${child.alt ?? ''}"${widthAttr}${heightAttr}${classAttrAsset} />`;
+            }
             if (isJSXNode(child)) {
                 return generateJSX(child, indent + 2);
             }

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

@@ -1 +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;AA2RlF;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAkDrE"}
+{"version":3,"file":"bootstrap.template.d.ts","sourceRoot":"","sources":["../../src/frameworks/bootstrap.template.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAgE,MAAM,oBAAoB,CAAC;AA6TtH;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAkDrE"}

package/dist/frameworks/bootstrap.template.js

@@ -213,6 +213,30 @@ function generateBootstrapClasses(styles) {
     }
     return classes;
 }
+/**
+ * Check if a child is a text node
+ */
+function isTextNode(child) {
+    return typeof child === 'object' && child !== null && 'type' in child && child.type === 'text';
+}
+/**
+ * Check if a child is a component node
+ */
+function isComponentNode(child) {
+    return typeof child === 'object' && child !== null && 'type' in child && child.type === 'component';
+}
+/**
+ * Check if a child is an asset node
+ */
+function isAssetNode(child) {
+    return typeof child === 'object' && child !== null && 'type' in child && child.type === 'asset';
+}
+/**
+ * Check if a child is a JSX node
+ */
+function isJSXNode(child) {
+    return typeof child === 'object' && child !== null && 'tag' in child;
+}
 /**
  * Gera JSX com classes Bootstrap
  */
@@ -238,11 +262,19 @@ function generateBootstrapJSX(node, styles, indent = 2) {
     }
     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}'}`);
+        if (isTextNode(child)) {
+            childrenContent.push(`${spaces}  {children ?? '${child.value}'}`);
+        }
+        else if (isComponentNode(child)) {
+            childrenContent.push(`${spaces}  <${child.componentName} />`);
+        }
+        else if (isAssetNode(child)) {
+            const classAttrAsset = child.className ? ` className="${child.className}"` : '';
+            const widthAttr = child.width ? ` width={${Math.round(child.width)}}` : '';
+            const heightAttr = child.height ? ` height={${Math.round(child.height)}}` : '';
+            childrenContent.push(`${spaces}  <img src="${child.fileName}.${child.format}" alt="${child.alt ?? ''}"${widthAttr}${heightAttr}${classAttrAsset} />`);
         }
-        else {
+        else if (isJSXNode(child)) {
             childrenContent.push(generateBootstrapJSX(child, styles, indent + 2));
         }
     }

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

@@ -1 +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;AA2RlF;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAgE/D;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAwB5D"}
+{"version":3,"file":"mui.template.d.ts","sourceRoot":"","sources":["../../src/frameworks/mui.template.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAgE,MAAM,oBAAoB,CAAC;AA6TtH;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAgE/D;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAwB5D"}

package/dist/frameworks/mui.template.js

@@ -189,6 +189,30 @@ function getMuiProps(node, componentType) {
     }
     return props;
 }
+/**
+ * Check if a child is a text node
+ */
+function isTextNode(child) {
+    return typeof child === 'object' && child !== null && 'type' in child && child.type === 'text';
+}
+/**
+ * Check if a child is a component node
+ */
+function isComponentNode(child) {
+    return typeof child === 'object' && child !== null && 'type' in child && child.type === 'component';
+}
+/**
+ * Check if a child is an asset node
+ */
+function isAssetNode(child) {
+    return typeof child === 'object' && child !== null && 'type' in child && child.type === 'asset';
+}
+/**
+ * Check if a child is a JSX node
+ */
+function isJSXNode(child) {
+    return typeof child === 'object' && child !== null && 'tag' in child;
+}
 /**
  * Gera JSX com componentes MUI
  */
@@ -215,11 +239,19 @@ function generateMuiJSX(node, styles, indent = 2) {
     }
     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}'}`);
+        if (isTextNode(child)) {
+            childrenContent.push(`${spaces}  {children ?? '${child.value}'}`);
         }
-        else {
+        else if (isComponentNode(child)) {
+            childrenContent.push(`${spaces}  <${child.componentName} />`);
+        }
+        else if (isAssetNode(child)) {
+            const classAttrAsset = child.className ? ` className="${child.className}"` : '';
+            const widthAttr = child.width ? ` width={${Math.round(child.width)}}` : '';
+            const heightAttr = child.height ? ` height={${Math.round(child.height)}}` : '';
+            childrenContent.push(`${spaces}  <img src="${child.fileName}.${child.format}" alt="${child.alt ?? ''}"${widthAttr}${heightAttr}${classAttrAsset} />`);
+        }
+        else if (isJSXNode(child)) {
             childrenContent.push(generateMuiJSX(child, styles, indent + 2));
         }
     }

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

@@ -1 +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"}
+{"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,EAAsC,MAAM,oBAAoB,CAAC;AAuMtH;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,cAAc,EAAE,GAAG,MAAM,EAAE,CAY1E;AAyFD;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAsCpE"}

package/dist/frameworks/tailwind.template.js

@@ -204,6 +204,30 @@ export function generateTailwindClasses(styles) {
     }
     return classes;
 }
+/**
+ * Check if a child is a text node
+ */
+function isTextNode(child) {
+    return typeof child === 'object' && child !== null && 'type' in child && child.type === 'text';
+}
+/**
+ * Check if a child is a component node
+ */
+function isComponentNode(child) {
+    return typeof child === 'object' && child !== null && 'type' in child && child.type === 'component';
+}
+/**
+ * Check if a child is an asset node
+ */
+function isAssetNode(child) {
+    return typeof child === 'object' && child !== null && 'type' in child && child.type === 'asset';
+}
+/**
+ * Check if a child is a JSX node
+ */
+function isJSXNode(child) {
+    return typeof child === 'object' && child !== null && 'tag' in child;
+}
 /**
  * Gera JSX com classes Tailwind
  */
@@ -229,11 +253,19 @@ function generateTailwindJSX(node, styles, indent = 2) {
     }
     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}'}`);
+        if (isTextNode(child)) {
+            childrenContent.push(`${spaces}  {children ?? '${child.value}'}`);
+        }
+        else if (isComponentNode(child)) {
+            childrenContent.push(`${spaces}  <${child.componentName} />`);
+        }
+        else if (isAssetNode(child)) {
+            const classAttrAsset = child.className ? ` className="${child.className}"` : '';
+            const widthAttr = child.width ? ` width={${Math.round(child.width)}}` : '';
+            const heightAttr = child.height ? ` height={${Math.round(child.height)}}` : '';
+            childrenContent.push(`${spaces}  <img src="${child.fileName}.${child.format}" alt="${child.alt ?? ''}"${widthAttr}${heightAttr}${classAttrAsset} />`);
         }
-        else {
+        else if (isJSXNode(child)) {
             childrenContent.push(generateTailwindJSX(child, styles, indent + 2));
         }
     }

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

@@ -1 +1 @@
-{"version":3,"file":"tsx-generator.d.ts","sourceRoot":"","sources":["../../src/generators/tsx-generator.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EACV,aAAa,EAQd,MAAM,oBAAoB,CAAC;AA0O5B;;GAEG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAmCtD;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAUxD"}
+{"version":3,"file":"tsx-generator.d.ts","sourceRoot":"","sources":["../../src/generators/tsx-generator.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EACV,aAAa,EASd,MAAM,oBAAoB,CAAC;AA4T5B;;GAEG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAuCtD;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAUxD"}

package/dist/generators/tsx-generator.js

@@ -18,6 +18,71 @@ function collectChildComponents(node) {
     }
     return components;
 }
+/**
+ * Coleta todos os assets de uma árvore JSX recursivamente
+ */
+function collectAssets(node) {
+    const assets = [];
+    for (const child of node.children) {
+        if ('type' in child && child.type === 'asset') {
+            assets.push(child);
+        }
+        else if ('tag' in child) {
+            // Recursivamente busca em nós JSX
+            assets.push(...collectAssets(child));
+        }
+    }
+    return assets;
+}
+/**
+ * Gera imports de assets (SVGs)
+ */
+function generateAssetImports(assets) {
+    const imports = [];
+    const seen = new Set();
+    for (const asset of assets) {
+        // Evita duplicatas
+        if (seen.has(asset.fileName)) {
+            continue;
+        }
+        seen.add(asset.fileName);
+        // Gera nome de variável para o import (PascalCase + Icon)
+        const importName = asset.fileName
+            .split('-')
+            .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+            .join('') + 'Svg';
+        imports.push({
+            from: `./assets/${asset.fileName}.svg`,
+            default: importName,
+        });
+    }
+    return imports;
+}
+/**
+ * Gera JSX de um asset (SVG como img)
+ */
+function generateAssetJSX(asset, indent) {
+    const spaces = ' '.repeat(indent);
+    // Gera nome de variável para o import
+    const importName = asset.fileName
+        .split('-')
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join('') + 'Svg';
+    let jsx = `${spaces}<img`;
+    jsx += ` src={${importName}}`;
+    jsx += ` alt="${asset.alt ?? ''}"`;
+    if (asset.className) {
+        jsx += ` className="${asset.className}"`;
+    }
+    if (asset.width) {
+        jsx += ` width={${Math.round(asset.width)}}`;
+    }
+    if (asset.height) {
+        jsx += ` height={${Math.round(asset.height)}}`;
+    }
+    jsx += ' />';
+    return jsx;
+}
 /**
  * Calcula o caminho relativo de import entre duas camadas do Atomic Design
  */
@@ -188,6 +253,10 @@ function generateJSX(node, indent = 2) {
                 // Renderiza componente filho como <ComponentName />
                 childrenJSX.push(generateComponentJSX(child, indent + 2));
             }
+            else if ('type' in child && child.type === 'asset') {
+                // Renderiza asset como <img src={importedSvg} />
+                childrenJSX.push(generateAssetJSX(child, indent + 2));
+            }
             else {
                 childrenJSX.push(generateJSX(child, indent + 2));
             }
@@ -205,8 +274,11 @@ export function generateTSX(ast) {
     // Coleta componentes filhos para gerar imports
     const childComponents = collectChildComponents(ast.jsx);
     const componentImports = generateComponentImports(childComponents, ast.layer);
-    // Combina imports existentes com imports de componentes
-    const allImports = [...(ast.imports ?? []), ...componentImports];
+    // Coleta assets para gerar imports de SVGs
+    const assets = collectAssets(ast.jsx);
+    const assetImports = generateAssetImports(assets);
+    // Combina imports existentes com imports de componentes e assets
+    const allImports = [...(ast.imports ?? []), ...componentImports, ...assetImports];
     // Imports
     const importsCode = generateImports(allImports);
     if (importsCode) {

package/dist/generators/variables-generator.js

@@ -11,7 +11,7 @@ export function generateDefaultVariables() {
 // Run 'promptui sync tokens' to update from Figma
 
 // Import fonts (if _fonts.scss exists)
-@import 'fonts';
+@use 'fonts';
 
 // =============================================================================
 // COLORS

package/dist/writers/file-writer.js

@@ -57,9 +57,9 @@ async function ensureVariablesFile(basePath) {
         // Verifica se tem o import de fonts
         try {
             const content = await readFile(variablesPath, 'utf-8');
-            if (!content.includes("@import 'fonts'") && !content.includes('@import "fonts"')) {
+            if (!content.includes("@use 'fonts'") && !content.includes('@use "fonts"')) {
                 // Adiciona o import de fonts no início
-                const updatedContent = content.replace(/(\/\/ PromptUI - Design Tokens.*?\n)/s, "$1\n// Import fonts\n@import 'fonts';\n");
+                const updatedContent = content.replace(/(\/\/ PromptUI - Design Tokens.*?\n)/s, "$1\n// Import fonts\n@use 'fonts';\n");
                 if (updatedContent !== content) {
                     await writeFile(variablesPath, updatedContent, 'utf-8');
                     return variablesPath; // Foi atualizado

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@promptui-lib/codegen",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "private": false,
   "description": "Code generator for PromptUI - generates React TSX and SCSS",
   "license": "UNLICENSED",
@@ -30,7 +30,7 @@
     "dist"
   ],
   "dependencies": {
-    "@promptui-lib/core": "0.1.18"
+    "@promptui-lib/core": "0.1.20"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",