@promptui-lib/codegen 0.1.0 → 0.1.3

package/README.md

@@ -0,0 +1,502 @@
+<p align="center">
+  <img src="https://raw.githubusercontent.com/desireemenezes/promptUI/main/logo.png" alt="PromptUI Logo" width="200" />
+</p>
+
+<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>
+  <a href="https://www.npmjs.com/package/@promptui-lib/cli"><img src="https://img.shields.io/npm/dm/@promptui-lib/cli.svg" alt="npm downloads" /></a>
+  <img src="https://img.shields.io/badge/license-proprietary-red.svg" alt="license" />
+</p>
+
+<p align="center">
+  <strong>Transform Figma designs into production-ready code in seconds.</strong>
+</p>
+
+<p align="center">
+  100% deterministic. No AI. Same input = same output, always.
+</p>
+
+---
+
+## What is it?
+
+**PromptUI** is a library that automatically converts your Figma designs into clean, production-ready code.
+
+Supports multiple frameworks:
+- **React + SCSS** (BEM methodology)
+- **Material UI** (MUI)
+- **Tailwind CSS**
+- **Bootstrap**
+- **Flutter** (Dart StatelessWidgets)
+- **SwiftUI** (iOS/macOS Views)
+
+---
+
+## Installation
+
+```bash
+npm install -g @promptui-lib/cli
+```
+
+---
+
+## How It Works
+
+### 1. Mark your components in Figma
+
+In Figma, add `#` at the beginning of frame names you want to export:
+
+```
+#Button          → Will be exported as component
+#CardProduct     → Will be exported as component
+#HeaderNav       → Will be exported as component
+Button           → Ignored (no #)
+```
+
+### 2. Configure the project
+
+```bash
+npx @promptui-lib/cli init
+```
+
+Set your credentials:
+
+```bash
+export FIGMA_TOKEN=your_token_here
+export FIGMA_FILE_ID=file_id_here
+```
+
+### 3. Generate components
+
+```bash
+# React + SCSS
+npx @promptui-lib/cli generate
+
+# Bootstrap
+npx @promptui-lib/cli generate bootstrap
+
+# Material UI
+npx @promptui-lib/cli generate mui
+
+# Tailwind CSS
+npx @promptui-lib/cli generate tailwind
+
+# Flutter
+npx @promptui-lib/cli generate flutter
+
+# SwiftUI
+npx @promptui-lib/cli generate swiftui
+```
+
+---
+
+## Examples
+
+### Example 1: Button with React + SCSS
+
+**In Figma:** Frame named `#Button`
+
+```
+#Button (Frame)
+├── Padding: 12px 24px
+├── Background: #3B82F6
+├── Border Radius: 8px
+└── label (Text: "Click me")
+```
+
+**Command:**
+```bash
+npx @promptui-lib/cli generate
+```
+
+**Result:**
+
+```tsx
+// src/components/atoms/Button/button.tsx
+import type { ReactNode } from 'react';
+import './button.scss';
+
+export interface IButtonProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export const Button = ({ children, className = '' }: IButtonProps) => {
+  return (
+    <button className={`button ${className}`.trim()}>
+      <span className="button__label">{children}</span>
+    </button>
+  );
+};
+```
+
+```scss
+// src/components/atoms/Button/button.scss
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: $spacing-sm $spacing-lg;
+  background-color: $color-primary;
+  border-radius: $radius-medium;
+
+  &__label {
+    color: $color-text-inverse;
+    font-weight: $font-weight-medium;
+  }
+}
+```
+
+---
+
+### Example 2: Card with Bootstrap
+
+**In Figma:** Frame named `#CardProduct`
+
+```
+#CardProduct (Frame)
+├── image (Rectangle)
+├── content (Frame)
+│   ├── title (Text: "Product Name")
+│   ├── description (Text: "Lorem ipsum...")
+│   └── price (Text: "$99.00")
+└── button (Instance of #Button)
+```
+
+**Command:**
+```bash
+npx @promptui-lib/cli generate bootstrap
+```
+
+**Result:**
+
+```tsx
+// src/components/molecules/CardProduct/card-product.tsx
+import type { ReactNode } from 'react';
+
+export interface ICardProductProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export const CardProduct = ({ children, className = '' }: ICardProductProps) => {
+  return (
+    <div className={`card ${className}`.trim()}>
+      <img className="card-img-top" alt="Product" />
+      <div className="card-body">
+        <h5 className="card-title fw-bold">Product Name</h5>
+        <p className="card-text text-muted">Lorem ipsum...</p>
+        <p className="h4 text-primary fw-bold">$99.00</p>
+        <button className="btn btn-primary w-100">Buy Now</button>
+      </div>
+    </div>
+  );
+};
+```
+
+---
+
+### Example 3: Header with Tailwind CSS
+
+**In Figma:** Frame named `#HeaderNav`
+
+**Command:**
+```bash
+npx @promptui-lib/cli generate tailwind
+```
+
+**Result:**
+
+```tsx
+// src/components/organisms/HeaderNav/header-nav.tsx
+export const HeaderNav = ({ className = '' }: IHeaderNavProps) => {
+  return (
+    <header className={`flex items-center justify-between px-6 py-4 bg-white shadow-sm ${className}`.trim()}>
+      <div className="flex items-center gap-2">
+        <img src="/logo.svg" className="h-8 w-8" alt="Logo" />
+        <span className="text-xl font-bold text-gray-900">Brand</span>
+      </div>
+      <nav className="flex items-center gap-8">
+        <a className="text-gray-600 hover:text-gray-900">Home</a>
+        <a className="text-gray-600 hover:text-gray-900">Products</a>
+        <a className="text-gray-600 hover:text-gray-900">About</a>
+      </nav>
+      <button className="px-4 py-2 bg-blue-500 text-white rounded-lg">
+        Sign In
+      </button>
+    </header>
+  );
+};
+```
+
+---
+
+### Example 4: Button with Flutter
+
+**In Figma:** Frame named `#Button`
+
+**Command:**
+```bash
+npx @promptui-lib/cli generate flutter
+```
+
+**Result:**
+
+```dart
+/// Button
+/// Generated by PromptUI (Flutter)
+
+import 'package:flutter/material.dart';
+
+class Button extends StatelessWidget {
+  const Button({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.symmetric(vertical: 8, horizontal: 24),
+      decoration: BoxDecoration(
+        color: Theme.of(context).primaryColor,
+        borderRadius: BorderRadius.circular(8),
+      ),
+      child: Text('Click me'),
+    );
+  }
+}
+```
+
+---
+
+### Example 5: Button with SwiftUI
+
+**In Figma:** Frame named `#Button`
+
+**Command:**
+```bash
+npx @promptui-lib/cli generate swiftui
+```
+
+**Result:**
+
+```swift
+/// Button
+/// Generated by PromptUI (SwiftUI)
+
+import SwiftUI
+
+struct Button: View {
+    var body: some View {
+        Text("Click me")
+            .padding(.horizontal, 24)
+            .padding(.vertical, 8)
+            .background(.blue)
+            .foregroundColor(.white)
+            .cornerRadius(8)
+    }
+}
+
+#Preview {
+    Button()
+}
+```
+
+---
+
+## Commands
+
+| Command | Description |
+|---------|-------------|
+| `npx @promptui-lib/cli init` | Configure the project |
+| `npx @promptui-lib/cli generate` | Generate components (React + SCSS) |
+| `npx @promptui-lib/cli generate bootstrap` | Generate with Bootstrap |
+| `npx @promptui-lib/cli generate mui` | Generate with Material UI |
+| `npx @promptui-lib/cli generate tailwind` | Generate with Tailwind CSS |
+| `npx @promptui-lib/cli generate flutter` | Generate with Flutter/Dart |
+| `npx @promptui-lib/cli generate swiftui` | Generate with SwiftUI |
+| `npx @promptui-lib/cli sync tokens` | Sync design tokens |
+
+## Options
+
+| Option | Description |
+|--------|-------------|
+| `-p, --preview` | Preview without saving |
+| `-o, --output <dir>` | Output directory |
+| `-f, --force` | Overwrite existing files |
+
+---
+
+## Atomic Design
+
+Components are automatically organized:
+
+| Layer | Description | Examples |
+|-------|-------------|----------|
+| **atoms** | Simple components | Button, Input, Label, Icon |
+| **molecules** | Medium compositions | Card, SearchBar, FormField |
+| **organisms** | Complex compositions | Header, Footer, Sidebar |
+
+---
+
+## Configuration
+
+Create `promptui.config.json`:
+
+```json
+{
+  "figma": {
+    "fileId": "your-file-id"
+  },
+  "output": {
+    "basePath": "src/components"
+  }
+}
+```
+
+---
+
+## 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
+
+1. **`#` prefix** - Add to frame name to export
+2. **Auto Layout** - Always use to maintain structure
+3. **Descriptive names** - `title`, `content`, not "Frame 1"
+4. **PascalCase** - `#ButtonPrimary`, not `#button-primary`
+
+### Correct structure example
+
+```
+#CardProduct (Frame, Auto Layout Vertical)
+├── image (Rectangle, Aspect Ratio 16:9)
+├── content (Frame, Auto Layout Vertical, Padding 16px)
+│   ├── title (Text, Heading/H3)
+│   ├── description (Text, Body/Small)
+│   └── price (Text, Heading/H2)
+└── actions (Frame, Auto Layout Horizontal)
+    └── button (Instance of #Button)
+```
+
+---
+
+## Environment Variables
+
+| Variable | Description |
+|----------|-------------|
+| `FIGMA_TOKEN` | Figma access token |
+| `FIGMA_FILE_ID` | Figma file ID |
+
+### How to get Figma Token
+
+1. Go to [Figma Account Settings](https://www.figma.com/settings)
+2. Navigate to "Personal Access Tokens"
+3. Create a new token
+
+### How to get File ID
+
+The File ID is in your Figma file URL:
+
+```
+https://www.figma.com/file/ABC123xyz/MyProject
+                           ^^^^^^^^^^^
+                           This is the File ID
+```
+
+---
+
+## Author
+
+**Desiree Menezes** - [@desireemenezes](https://github.com/desireemenezes)
+
+---
+
+## License
+
+Proprietary - All rights reserved.

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/flutter.template.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Flutter Template
+ * Generates Flutter/Dart widgets from Figma designs
+ */
+import type { IComponentAST } from '@promptui-lib/core';
+/**
+ * Generates Flutter StatelessWidget
+ */
+export declare function generateFlutterComponent(ast: IComponentAST): string;
+//# sourceMappingURL=flutter.template.d.ts.map

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

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