@promptui-lib/figma-parser 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@promptui-lib/figma-parser",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "private": false,
   "description": "Figma API client and parser for PromptUI",
   "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",