@promptui-lib/codegen 0.1.2 → 0.1.4

package/README.md

@@ -1,8 +1,4 @@
-<p align="center">
-  <img src="./logo.png" alt="PromptUI Logo" width="200" />
-</p>
-
-<h1 align="center">PromptUI</h1>
+<h1 align="center">🎨 PromptUI</h1>
 
 <p align="center">
   <a href="https://www.npmjs.com/package/@promptui-lib/cli"><img src="https://img.shields.io/npm/v/@promptui-lib/cli.svg" alt="npm version" /></a>
@@ -356,6 +352,92 @@ Create `promptui.config.json`:
 
 ---
 
+## Figma Support
+
+### What We Extract from Figma
+
+| Element | Supported | Notes |
+|---------|-----------|-------|
+| **Colors** | ✅ Yes | RGB, Hex, tokens |
+| **Spacing** | ✅ Yes | Padding, margin, gap |
+| **Typography** | ✅ Yes | Font size, weight, family |
+| **Border Radius** | ✅ Yes | All corners |
+| **Shadows** | ✅ Yes | Drop shadow, inner shadow |
+| **Layout** | ✅ Yes | Auto Layout → Flexbox |
+| **SVG/Icons** | ✅ Yes | Exported as inline SVG |
+| **Images** | ⚠️ Partial | Placeholder generated |
+| **Gradients** | ⚠️ Partial | Linear gradients |
+| **Animations** | ❌ No | Not available via Figma API |
+| **Prototype Links** | ❌ No | Prototype data only |
+
+### Bootstrap Components Mapping
+
+Name your Figma frames to auto-map to Bootstrap components:
+
+| Figma Frame Name | Bootstrap Output |
+|------------------|------------------|
+| `#Alert` | `<div class="alert">` |
+| `#Badge` | `<span class="badge">` |
+| `#Breadcrumb` | `<nav class="breadcrumb">` |
+| `#Button` | `<button class="btn">` |
+| `#ButtonGroup` | `<div class="btn-group">` |
+| `#Card` | `<div class="card">` |
+| `#Carousel` | `<div class="carousel">` |
+| `#Collapse` | `<div class="collapse">` |
+| `#Dropdown` | `<div class="dropdown">` |
+| `#ListGroup` | `<ul class="list-group">` |
+| `#Modal` | `<div class="modal">` |
+| `#Navbar` | `<nav class="navbar">` |
+| `#Nav` or `#Tabs` | `<ul class="nav">` |
+| `#Offcanvas` | `<div class="offcanvas">` |
+| `#Pagination` | `<nav class="pagination">` |
+| `#Progress` | `<div class="progress">` |
+| `#Spinner` | `<div class="spinner">` |
+| `#Toast` | `<div class="toast">` |
+| `#Tooltip` | `data-bs-toggle="tooltip"` |
+
+### Material UI Components Mapping
+
+| Figma Frame Name | MUI Output |
+|------------------|------------|
+| `#Alert` | `<Alert>` |
+| `#Avatar` | `<Avatar>` |
+| `#Badge` | `<Badge>` |
+| `#Breadcrumb` | `<Breadcrumbs>` |
+| `#Button` | `<Button>` |
+| `#Card` | `<Card>` |
+| `#Checkbox` | `<Checkbox>` |
+| `#Chip` | `<Chip>` |
+| `#Dialog` or `#Modal` | `<Dialog>` |
+| `#Drawer` | `<Drawer>` |
+| `#Input` or `#TextField` | `<TextField>` |
+| `#List` | `<List>` |
+| `#Menu` | `<Menu>` |
+| `#Pagination` | `<Pagination>` |
+| `#Progress` | `<LinearProgress>` |
+| `#Radio` | `<Radio>` |
+| `#Select` | `<Select>` |
+| `#Slider` | `<Slider>` |
+| `#Snackbar` | `<Snackbar>` |
+| `#Switch` | `<Switch>` |
+| `#Table` | `<Table>` |
+| `#Tabs` | `<Tabs>` |
+| `#Tooltip` | `<Tooltip>` |
+
+### Form Components
+
+| Figma Frame Name | React + SCSS | Bootstrap | MUI |
+|------------------|--------------|-----------|-----|
+| `#Input` | `<input>` | `<input class="form-control">` | `<TextField>` |
+| `#Select` | `<select>` | `<select class="form-select">` | `<Select>` |
+| `#Checkbox` | `<input type="checkbox">` | `<input class="form-check-input">` | `<Checkbox>` |
+| `#Radio` | `<input type="radio">` | `<input class="form-check-input">` | `<Radio>` |
+| `#Switch` | `<input type="checkbox">` | `<div class="form-switch">` | `<Switch>` |
+| `#Textarea` | `<textarea>` | `<textarea class="form-control">` | `<TextField multiline>` |
+| `#FormGroup` | `<div class="form-group">` | `<div class="mb-3">` | `<FormControl>` |
+
+---
+
 ## For Designers
 
 ### Figma Rules

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

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

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;AA6QlF;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAsCrE"}
+{"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"}

package/dist/frameworks/bootstrap.template.js

@@ -1,7 +1,8 @@
 /**
  * Bootstrap Template
- * Gera componentes React com classes Bootstrap
+ * Generates React components with Bootstrap classes
  */
+import { getComponentMapping, extractComponentType } from '../mappings/index.js';
 /**
  * Mapeamento de tokens SCSS → Bootstrap classes
  */
@@ -255,21 +256,45 @@ function generateBootstrapJSX(node, styles, indent = 2) {
     ].join('\n');
 }
 /**
- * Gera componente React com Bootstrap
+ * Gets Bootstrap-specific tag and classes based on component type
+ */
+function getBootstrapMapping(componentName) {
+    const componentType = extractComponentType(componentName);
+    if (!componentType)
+        return null;
+    const mapping = getComponentMapping(componentType);
+    if (!mapping)
+        return null;
+    return mapping.bootstrap;
+}
+/**
+ * Generates React component with Bootstrap classes
  */
 export function generateBootstrapComponent(ast) {
-    // Cria mapa de estilos por selector
+    // Create styles map by selector
     const stylesMap = new Map();
     for (const block of ast.styles) {
         stylesMap.set(block.selector, block.properties);
     }
+    // Check for component mapping
+    const mapping = getBootstrapMapping(ast.name);
     // Props interface
     const propsInterface = `export interface I${ast.name}Props {
   children?: ReactNode;
   className?: string;
 }`;
-    // JSX
-    const jsx = generateBootstrapJSX(ast.jsx, stylesMap);
+    // JSX - use mapping if available
+    let jsx;
+    if (mapping) {
+        const baseClasses = mapping.classes.join(' ');
+        const extraAttrs = mapping.wrapper ? ` ${mapping.wrapper}` : '';
+        jsx = `    <${mapping.tag} className={\`${baseClasses} \${className}\`.trim()}${extraAttrs}>
+      {children}
+    </${mapping.tag}>`;
+    }
+    else {
+        jsx = generateBootstrapJSX(ast.jsx, stylesMap);
+    }
     // Component
     const component = `export const ${ast.name} = ({
   children,

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

@@ -1,10 +1,10 @@
 /**
  * Material UI Template
- * Gera componentes React com MUI sx props
+ * Generates React components with MUI components and sx props
  */
 import type { IComponentAST } from '@promptui-lib/core';
 /**
- * Gera componente React com MUI
+ * Generates React component with MUI
  */
 export declare function generateMuiComponent(ast: IComponentAST): string;
 /**

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;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"}
+{"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"}

package/dist/frameworks/mui.template.js

@@ -1,7 +1,8 @@
 /**
  * Material UI Template
- * Gera componentes React com MUI sx props
+ * Generates React components with MUI components and sx props
  */
+import { getComponentMapping, extractComponentType } from '../mappings/index.js';
 /**
  * Mapeamento de tokens SCSS → MUI theme
  */
@@ -232,22 +233,47 @@ function generateMuiJSX(node, styles, indent = 2) {
     ].join('\n');
 }
 /**
- * Gera componente React com MUI
+ * Gets MUI component mapping based on component name
+ */
+function getMuiMapping(componentName) {
+    const componentType = extractComponentType(componentName);
+    if (!componentType)
+        return null;
+    const mapping = getComponentMapping(componentType);
+    if (!mapping)
+        return null;
+    return mapping.mui;
+}
+/**
+ * Generates React component with MUI
  */
 export function generateMuiComponent(ast) {
-    // Cria mapa de estilos por selector
+    // Create styles map by selector
     const stylesMap = new Map();
     for (const block of ast.styles) {
         stylesMap.set(block.selector, block.properties);
     }
+    // Check for component mapping
+    const mapping = getMuiMapping(ast.name);
     // Props interface
     const propsInterface = `export interface I${ast.name}Props {
   children?: ReactNode;
   className?: string;
   sx?: SxProps<Theme>;
 }`;
-    // JSX
-    const jsx = generateMuiJSX(ast.jsx, stylesMap);
+    // JSX - use mapping if available
+    let jsx;
+    if (mapping) {
+        const propsStr = mapping.props
+            ? Object.entries(mapping.props).map(([k, v]) => `${k}="${v}"`).join(' ')
+            : '';
+        jsx = `    <${mapping.component} ${propsStr}>
+      {children}
+    </${mapping.component}>`;
+    }
+    else {
+        jsx = generateMuiJSX(ast.jsx, stylesMap);
+    }
     // Component
     const component = `export const ${ast.name} = ({
   children,
@@ -258,12 +284,15 @@ export function generateMuiComponent(ast) {
 ${jsx}
   );
 };`;
-    // Imports
-    const imports = [
+    // Imports - include component-specific imports
+    const baseImports = [
         "import type { ReactNode } from 'react';",
         "import { Box, Stack, Typography, Button } from '@mui/material';",
         "import type { SxProps, Theme } from '@mui/material/styles';",
     ];
+    const imports = mapping?.imports
+        ? [...new Set([...baseImports, ...mapping.imports])]
+        : baseImports;
     return [
         '/**',
         ` * ${ast.name}`,

package/dist/index.d.ts

@@ -5,4 +5,5 @@
 export * from './generators/index.js';
 export * from './writers/index.js';
 export * from './frameworks/index.js';
+export * from './mappings/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC"}

package/dist/index.js

@@ -5,3 +5,4 @@
 export * from './generators/index.js';
 export * from './writers/index.js';
 export * from './frameworks/index.js';
+export * from './mappings/index.js';

package/dist/mappings/component-mappings.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Component Mappings
+ * Maps Figma frame names to framework-specific components
+ */
+export interface IComponentMapping {
+    /** Bootstrap classes/structure */
+    bootstrap: {
+        tag: string;
+        classes: string[];
+        wrapper?: string;
+        children?: string;
+    };
+    /** MUI component */
+    mui: {
+        component: string;
+        props?: Record<string, string>;
+        imports?: string[];
+    };
+    /** Tailwind classes */
+    tailwind: {
+        tag: string;
+        classes: string[];
+    };
+    /** React + SCSS (custom implementation) */
+    scss: {
+        tag: string;
+        baseClass: string;
+        /** If true, generates animation keyframes */
+        hasAnimation?: boolean;
+        animationName?: string;
+    };
+    /** Flutter widget */
+    flutter: {
+        widget: string;
+        props?: Record<string, string>;
+    };
+    /** SwiftUI view */
+    swiftui: {
+        view: string;
+        modifiers?: string[];
+    };
+}
+/**
+ * Component mappings by name
+ * Key is the component name (without #), case-insensitive matching
+ */
+export declare const COMPONENT_MAPPINGS: Record<string, IComponentMapping>;
+/**
+ * Get component mapping by name (case-insensitive)
+ */
+export declare function getComponentMapping(name: string): IComponentMapping | undefined;
+/**
+ * Check if a component name has a mapping
+ */
+export declare function hasComponentMapping(name: string): boolean;
+/**
+ * Extract component type from name
+ * e.g., "#ButtonPrimary" -> "button", "#CardProduct" -> "card"
+ */
+export declare function extractComponentType(name: string): string | null;
+//# sourceMappingURL=component-mappings.d.ts.map

package/dist/mappings/component-mappings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-mappings.d.ts","sourceRoot":"","sources":["../../src/mappings/component-mappings.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,iBAAiB;IAChC,kCAAkC;IAClC,SAAS,EAAE;QACT,GAAG,EAAE,MAAM,CAAC;QACZ,OAAO,EAAE,MAAM,EAAE,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,oBAAoB;IACpB,GAAG,EAAE;QACH,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC/B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;KACpB,CAAC;IACF,uBAAuB;IACvB,QAAQ,EAAE;QACR,GAAG,EAAE,MAAM,CAAC;QACZ,OAAO,EAAE,MAAM,EAAE,CAAC;KACnB,CAAC;IACF,2CAA2C;IAC3C,IAAI,EAAE;QACJ,GAAG,EAAE,MAAM,CAAC;QACZ,SAAS,EAAE,MAAM,CAAC;QAClB,6CAA6C;QAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;IACF,qBAAqB;IACrB,OAAO,EAAE;QACP,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAChC,CAAC;IACF,mBAAmB;IACnB,OAAO,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;KACtB,CAAC;CACH;AAED;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAwkChE,CAAC;AAEF;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,iBAAiB,GAAG,SAAS,CAG/E;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAEzD;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAYhE"}