@promptui-lib/codegen 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,416 @@
+<p align="center">
+  <img src="./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"
+  }
+}
+```
+
+---
+
+## 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/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"}

package/dist/frameworks/flutter.template.js

@@ -0,0 +1,217 @@
+/**
+ * Flutter Template
+ * Generates Flutter/Dart widgets from Figma designs
+ */
+/**
+ * Mapping of tokens to Flutter values
+ */
+const TOKEN_TO_FLUTTER = {
+    // Colors
+    '$color-primary': 'Theme.of(context).primaryColor',
+    '$color-secondary': 'Theme.of(context).colorScheme.secondary',
+    '$color-success': 'Colors.green',
+    '$color-error': 'Colors.red',
+    '$color-warning': 'Colors.orange',
+    '$color-bg-primary': 'Colors.white',
+    '$color-bg-secondary': 'Colors.grey[100]',
+    '$color-text-primary': 'Colors.black87',
+    '$color-text-secondary': 'Colors.black54',
+    '$color-text-inverse': 'Colors.white',
+    // Spacing
+    '$spacing-xs': '4',
+    '$spacing-sm': '8',
+    '$spacing-md': '16',
+    '$spacing-lg': '24',
+    '$spacing-xl': '32',
+    '$spacing-2xl': '48',
+    // Border radius
+    '$radius-none': '0',
+    '$radius-small': '4',
+    '$radius-medium': '8',
+    '$radius-large': '12',
+    '$radius-xl': '16',
+    '$radius-full': '999',
+    // Font sizes
+    '$font-size-xs': '10',
+    '$font-size-sm': '12',
+    '$font-size-md': '14',
+    '$font-size-lg': '16',
+    '$font-size-xl': '20',
+    '$font-size-2xl': '24',
+    '$font-size-h1': '32',
+    '$font-size-h2': '28',
+    // Font weights
+    '$font-weight-regular': 'FontWeight.w400',
+    '$font-weight-medium': 'FontWeight.w500',
+    '$font-weight-semibold': 'FontWeight.w600',
+    '$font-weight-bold': 'FontWeight.w700',
+};
+/**
+ * Converts CSS value to Flutter
+ */
+function cssToFlutter(property, value) {
+    // Token mapping
+    if (value.startsWith('$')) {
+        return TOKEN_TO_FLUTTER[value] ?? value;
+    }
+    // Parse numeric values
+    const numValue = parseFloat(value);
+    if (!isNaN(numValue)) {
+        return numValue.toString();
+    }
+    return value;
+}
+/**
+ * Generates EdgeInsets from padding/margin
+ */
+function generateEdgeInsets(styles) {
+    const padding = {};
+    for (const style of styles) {
+        const value = cssToFlutter(style.property, style.token ?? style.value);
+        if (style.property === 'padding') {
+            return `EdgeInsets.all(${value})`;
+        }
+        if (style.property === 'padding-top')
+            padding.top = value;
+        if (style.property === 'padding-bottom')
+            padding.bottom = value;
+        if (style.property === 'padding-left')
+            padding.left = value;
+        if (style.property === 'padding-right')
+            padding.right = value;
+    }
+    if (Object.keys(padding).length > 0) {
+        const top = padding.top ?? '0';
+        const right = padding.right ?? '0';
+        const bottom = padding.bottom ?? '0';
+        const left = padding.left ?? '0';
+        if (top === bottom && left === right) {
+            if (top === left) {
+                return `EdgeInsets.all(${top})`;
+            }
+            return `EdgeInsets.symmetric(vertical: ${top}, horizontal: ${left})`;
+        }
+        return `EdgeInsets.only(top: ${top}, right: ${right}, bottom: ${bottom}, left: ${left})`;
+    }
+    return null;
+}
+/**
+ * Gets Flutter widget for element type
+ */
+function getFlutterWidget(node) {
+    switch (node.tag) {
+        case 'button':
+            return 'ElevatedButton';
+        case 'img':
+            return 'Image.network';
+        case 'input':
+            return 'TextField';
+        case 'span':
+        case 'p':
+        case 'h1':
+        case 'h2':
+        case 'h3':
+            return 'Text';
+        default:
+            return 'Container';
+    }
+}
+/**
+ * Generates Flutter widget code
+ */
+function generateFlutterWidget(node, styles, indent = 4) {
+    const spaces = ' '.repeat(indent);
+    const nodeStyles = styles.get(`.${node.className}`) ?? [];
+    // Determine widget type
+    const widget = getFlutterWidget(node);
+    // Build properties
+    const props = [];
+    // Padding
+    const padding = generateEdgeInsets(nodeStyles);
+    if (padding) {
+        props.push(`padding: ${padding}`);
+    }
+    // Background color
+    const bgColor = nodeStyles.find(s => s.property === 'background-color');
+    if (bgColor) {
+        const color = cssToFlutter('background-color', bgColor.token ?? bgColor.value);
+        props.push(`color: ${color}`);
+    }
+    // Border radius
+    const borderRadius = nodeStyles.find(s => s.property === 'border-radius');
+    if (borderRadius) {
+        const radius = cssToFlutter('border-radius', borderRadius.token ?? borderRadius.value);
+        props.push(`borderRadius: BorderRadius.circular(${radius})`);
+    }
+    // Children
+    const children = node.children.map(child => {
+        if (typeof child === 'string' || (typeof child === 'object' && 'type' in child && child.type === 'text')) {
+            const text = typeof child === 'string' ? child : child.value;
+            return `${spaces}  Text('${text}')`;
+        }
+        return generateFlutterWidget(child, styles, indent + 2);
+    });
+    // Build widget
+    if (widget === 'Container') {
+        const decoration = [];
+        if (bgColor) {
+            decoration.push(`color: ${cssToFlutter('background-color', bgColor.token ?? bgColor.value)}`);
+        }
+        if (borderRadius) {
+            decoration.push(`borderRadius: BorderRadius.circular(${cssToFlutter('border-radius', borderRadius.token ?? borderRadius.value)})`);
+        }
+        const hasDecoration = decoration.length > 0;
+        const containerProps = [];
+        if (padding)
+            containerProps.push(`padding: ${padding}`);
+        if (hasDecoration) {
+            containerProps.push(`decoration: BoxDecoration(\n${spaces}    ${decoration.join(',\n' + spaces + '    ')},\n${spaces}  )`);
+        }
+        if (children.length === 1) {
+            containerProps.push(`child: ${children[0].trim()}`);
+        }
+        else if (children.length > 1) {
+            // Use Column or Row based on flex-direction
+            const flexDir = nodeStyles.find(s => s.property === 'flex-direction');
+            const layout = flexDir?.value === 'row' ? 'Row' : 'Column';
+            containerProps.push(`child: ${layout}(\n${spaces}    children: [\n${children.join(',\n')},\n${spaces}    ],\n${spaces}  )`);
+        }
+        return `${spaces}Container(\n${spaces}  ${containerProps.join(',\n' + spaces + '  ')},\n${spaces})`;
+    }
+    if (widget === 'Text') {
+        const text = node.children[0];
+        const textContent = typeof text === 'string' ? text : text?.value ?? '';
+        return `${spaces}Text('${textContent}')`;
+    }
+    if (widget === 'ElevatedButton') {
+        const buttonChild = children.length > 0 ? children[0].trim() : "Text('Button')";
+        return `${spaces}ElevatedButton(\n${spaces}  onPressed: () {},\n${spaces}  child: ${buttonChild},\n${spaces})`;
+    }
+    return `${spaces}Container()`;
+}
+/**
+ * Generates Flutter StatelessWidget
+ */
+export function generateFlutterComponent(ast) {
+    // Create styles map
+    const stylesMap = new Map();
+    for (const block of ast.styles) {
+        stylesMap.set(block.selector, block.properties);
+    }
+    // Widget code
+    const widgetBody = generateFlutterWidget(ast.jsx, stylesMap);
+    return `/// ${ast.name}
+/// Generated by PromptUI (Flutter)
+
+import 'package:flutter/material.dart';
+
+class ${ast.name} extends StatelessWidget {
+  const ${ast.name}({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ${widgetBody.trim()};
+  }
+}
+`;
+}

package/dist/frameworks/index.d.ts

@@ -1,8 +1,8 @@
 /**
  * Framework Templates
- * Templates de geração para diferentes frameworks UI
+ * Templates for generating different UI frameworks
  */
-export type FrameworkType = 'react' | 'mui' | 'tailwind' | 'bootstrap';
+export type FrameworkType = 'react' | 'mui' | 'tailwind' | 'bootstrap' | 'flutter' | 'swiftui';
 export interface IFrameworkConfig {
     name: FrameworkType;
     displayName: string;
@@ -16,4 +16,6 @@ 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';
+export { generateFlutterComponent } from './flutter.template.js';
+export { generateSwiftUIComponent } from './swiftui.template.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"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,GAAG,SAAS,GAAG,SAAS,CAAC;AAE/F,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,CAqD9D,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;AACrE,OAAO,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/frameworks/index.js

@@ -1,6 +1,6 @@
 /**
  * Framework Templates
- * Templates de geração para diferentes frameworks UI
+ * Templates for generating different UI frameworks
  */
 export const FRAMEWORKS = {
     react: {
@@ -39,7 +39,25 @@ export const FRAMEWORKS = {
         styleExtension: null, // Bootstrap classes
         imports: ["import type { ReactNode } from 'react';"],
     },
+    flutter: {
+        name: 'flutter',
+        displayName: 'Flutter',
+        description: 'Flutter/Dart StatelessWidget components',
+        fileExtension: 'dart',
+        styleExtension: null, // Inline styles
+        imports: ["import 'package:flutter/material.dart';"],
+    },
+    swiftui: {
+        name: 'swiftui',
+        displayName: 'SwiftUI',
+        description: 'SwiftUI View structs for iOS/macOS',
+        fileExtension: 'swift',
+        styleExtension: null, // Inline modifiers
+        imports: ['import SwiftUI'],
+    },
 };
 export { generateMuiComponent, generateMuiStyles } from './mui.template.js';
 export { generateTailwindComponent, generateTailwindClasses } from './tailwind.template.js';
 export { generateBootstrapComponent } from './bootstrap.template.js';
+export { generateFlutterComponent } from './flutter.template.js';
+export { generateSwiftUIComponent } from './swiftui.template.js';

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

@@ -0,0 +1,10 @@
+/**
+ * SwiftUI Template
+ * Generates SwiftUI views from Figma designs
+ */
+import type { IComponentAST } from '@promptui-lib/core';
+/**
+ * Generates SwiftUI View struct
+ */
+export declare function generateSwiftUIComponent(ast: IComponentAST): string;
+//# sourceMappingURL=swiftui.template.d.ts.map

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

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

package/dist/frameworks/swiftui.template.js

@@ -0,0 +1,247 @@
+/**
+ * SwiftUI Template
+ * Generates SwiftUI views from Figma designs
+ */
+/**
+ * Mapping of tokens to SwiftUI values
+ */
+const TOKEN_TO_SWIFTUI = {
+    // Colors
+    '$color-primary': '.blue',
+    '$color-secondary': '.gray',
+    '$color-success': '.green',
+    '$color-error': '.red',
+    '$color-warning': '.orange',
+    '$color-bg-primary': '.white',
+    '$color-bg-secondary': 'Color(.systemGray6)',
+    '$color-text-primary': '.primary',
+    '$color-text-secondary': '.secondary',
+    '$color-text-inverse': '.white',
+    // Spacing
+    '$spacing-xs': '4',
+    '$spacing-sm': '8',
+    '$spacing-md': '16',
+    '$spacing-lg': '24',
+    '$spacing-xl': '32',
+    '$spacing-2xl': '48',
+    // Border radius
+    '$radius-none': '0',
+    '$radius-small': '4',
+    '$radius-medium': '8',
+    '$radius-large': '12',
+    '$radius-xl': '16',
+    '$radius-full': '999',
+    // Font sizes
+    '$font-size-xs': '.caption2',
+    '$font-size-sm': '.caption',
+    '$font-size-md': '.body',
+    '$font-size-lg': '.headline',
+    '$font-size-xl': '.title2',
+    '$font-size-2xl': '.title',
+    '$font-size-h1': '.largeTitle',
+    '$font-size-h2': '.title',
+    // Font weights
+    '$font-weight-regular': '.regular',
+    '$font-weight-medium': '.medium',
+    '$font-weight-semibold': '.semibold',
+    '$font-weight-bold': '.bold',
+};
+/**
+ * Converts CSS value to SwiftUI
+ */
+function cssToSwiftUI(property, value) {
+    // Token mapping
+    if (value.startsWith('$')) {
+        return TOKEN_TO_SWIFTUI[value] ?? value;
+    }
+    // Parse numeric values
+    const numValue = parseFloat(value);
+    if (!isNaN(numValue)) {
+        return numValue.toString();
+    }
+    // Color hex to SwiftUI
+    if (value.startsWith('#')) {
+        return `Color(hex: "${value}")`;
+    }
+    return value;
+}
+/**
+ * Gets SwiftUI view for element type
+ */
+function getSwiftUIView(node) {
+    switch (node.tag) {
+        case 'button':
+            return 'Button';
+        case 'img':
+            return 'Image';
+        case 'input':
+            return 'TextField';
+        case 'span':
+        case 'p':
+        case 'h1':
+        case 'h2':
+        case 'h3':
+            return 'Text';
+        default:
+            return 'VStack'; // Default container
+    }
+}
+/**
+ * Generates SwiftUI modifiers from styles
+ */
+function generateModifiers(styles, indent) {
+    const spaces = ' '.repeat(indent);
+    const modifiers = [];
+    for (const style of styles) {
+        const value = cssToSwiftUI(style.property, style.token ?? style.value);
+        switch (style.property) {
+            case 'padding':
+                modifiers.push(`${spaces}.padding(${value})`);
+                break;
+            case 'padding-top':
+                modifiers.push(`${spaces}.padding(.top, ${value})`);
+                break;
+            case 'padding-bottom':
+                modifiers.push(`${spaces}.padding(.bottom, ${value})`);
+                break;
+            case 'padding-left':
+                modifiers.push(`${spaces}.padding(.leading, ${value})`);
+                break;
+            case 'padding-right':
+                modifiers.push(`${spaces}.padding(.trailing, ${value})`);
+                break;
+            case 'background-color':
+                modifiers.push(`${spaces}.background(${value})`);
+                break;
+            case 'border-radius':
+                modifiers.push(`${spaces}.cornerRadius(${value})`);
+                break;
+            case 'color':
+                modifiers.push(`${spaces}.foregroundColor(${value})`);
+                break;
+            case 'font-size':
+                modifiers.push(`${spaces}.font(${value})`);
+                break;
+            case 'font-weight':
+                modifiers.push(`${spaces}.fontWeight(${value})`);
+                break;
+            case 'width':
+                if (value !== 'auto') {
+                    modifiers.push(`${spaces}.frame(width: ${value})`);
+                }
+                break;
+            case 'height':
+                if (value !== 'auto') {
+                    modifiers.push(`${spaces}.frame(height: ${value})`);
+                }
+                break;
+        }
+    }
+    return modifiers;
+}
+/**
+ * Generates SwiftUI view code
+ */
+function generateSwiftUIView(node, styles, indent = 8) {
+    const spaces = ' '.repeat(indent);
+    const nodeStyles = styles.get(`.${node.className}`) ?? [];
+    // Determine view type
+    const view = getSwiftUIView(node);
+    // Get flex direction for layout
+    const flexDir = nodeStyles.find(s => s.property === 'flex-direction');
+    const layout = flexDir?.value === 'row' ? 'HStack' : 'VStack';
+    // Get alignment
+    const alignItems = nodeStyles.find(s => s.property === 'align-items');
+    let alignment = '';
+    if (alignItems) {
+        switch (alignItems.value) {
+            case 'center':
+                alignment = ', alignment: .center';
+                break;
+            case 'flex-start':
+                alignment = flexDir?.value === 'row' ? ', alignment: .top' : ', alignment: .leading';
+                break;
+            case 'flex-end':
+                alignment = flexDir?.value === 'row' ? ', alignment: .bottom' : ', alignment: .trailing';
+                break;
+        }
+    }
+    // Get gap/spacing
+    const gap = nodeStyles.find(s => s.property === 'gap');
+    const spacing = gap ? cssToSwiftUI('gap', gap.token ?? gap.value) : '0';
+    // Generate modifiers
+    const modifiers = generateModifiers(nodeStyles, indent);
+    // Children
+    const children = node.children.map(child => {
+        if (typeof child === 'string' || (typeof child === 'object' && 'type' in child && child.type === 'text')) {
+            const text = typeof child === 'string' ? child : child.value;
+            return `${spaces}    Text("${text}")`;
+        }
+        return generateSwiftUIView(child, styles, indent + 4);
+    });
+    // Build view
+    if (view === 'Text') {
+        const text = node.children[0];
+        const textContent = typeof text === 'string' ? text : text?.value ?? '';
+        const textView = `${spaces}Text("${textContent}")`;
+        if (modifiers.length > 0) {
+            return textView + '\n' + modifiers.join('\n');
+        }
+        return textView;
+    }
+    if (view === 'Button') {
+        const buttonLabel = children.length > 0 ? children[0].trim() : 'Text("Button")';
+        const buttonView = `${spaces}Button(action: {}) {\n${spaces}    ${buttonLabel}\n${spaces}}`;
+        if (modifiers.length > 0) {
+            return buttonView + '\n' + modifiers.join('\n');
+        }
+        return buttonView;
+    }
+    if (view === 'Image') {
+        return `${spaces}Image(systemName: "photo")\n${spaces}    .resizable()\n${spaces}    .aspectRatio(contentMode: .fit)`;
+    }
+    // Container (VStack/HStack)
+    if (children.length === 0) {
+        const emptyView = `${spaces}${layout}(spacing: ${spacing}${alignment}) {}`;
+        if (modifiers.length > 0) {
+            return emptyView + '\n' + modifiers.join('\n');
+        }
+        return emptyView;
+    }
+    const containerView = [
+        `${spaces}${layout}(spacing: ${spacing}${alignment}) {`,
+        ...children,
+        `${spaces}}`,
+    ].join('\n');
+    if (modifiers.length > 0) {
+        return containerView + '\n' + modifiers.join('\n');
+    }
+    return containerView;
+}
+/**
+ * Generates SwiftUI View struct
+ */
+export function generateSwiftUIComponent(ast) {
+    // Create styles map
+    const stylesMap = new Map();
+    for (const block of ast.styles) {
+        stylesMap.set(block.selector, block.properties);
+    }
+    // View body
+    const viewBody = generateSwiftUIView(ast.jsx, stylesMap);
+    return `/// ${ast.name}
+/// Generated by PromptUI (SwiftUI)
+
+import SwiftUI
+
+struct ${ast.name}: View {
+    var body: some View {
+${viewBody}
+    }
+}
+
+#Preview {
+    ${ast.name}()
+}
+`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@promptui-lib/codegen",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "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.0"
+    "@promptui-lib/core": "0.1.2"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",