v45 (#20)

.gitignore

@@ -1,15 +1,10 @@
 # Project
 manifest.json
-build/
-.ref/
-.old/
-settings-schema.json
 TODO.md
+build/
 
 # OSX
 .DS_Store
 
 # Node
 node_modules/
-npm-debug.log
-yarn-error.log

.vscode/settings.json

@@ -2,7 +2,7 @@
   "json.schemas": [
     {
       "fileMatch": [
-        "package.json"
+        "packages/figma-to-react-native/package.json"
       ],
       "url": "https://yuanqing.github.io/create-figma-plugin/figma-plugin.json"
     }

README.md

@@ -1,57 +1,92 @@
 <p align="center">
-  <img src="./art/logo.png" width="90px"/>
+  <img src="./artwork/logo.png" width="64px"/>
 </p>
-<h1 align="center">
-  Figma → React Native
-</h1>
 <h3 align="center">
+  Figma → React Native
+</h3>
+<h4 align="center">
   <a href="https://www.figma.com/community/plugin/821138713091291738">
     Install Plugin
   </a>
-</h3>
+</h4>
+<br/>
+
+> Transforms Figma components to React Native components in real time. It also exports themes, icons, assets, and much more. The mission goal is to eliminate the designer to developer handoff while embracing existing workflows and tooling. Join the [Discord Channel](https://discord.com/invite/TzhDRyj) or follow [@TheUltDev](https://x.com/theultdev) to track project development.
+
+## Features
 
-> This plugin transforms Figma components to React Native components in real time. The goal is to reduce the handoff time between design and development. Design your UI components in Figma and export them for use in your React Native app.
+|   |   |
+| - | - | 
+| ✨ | Realtime code and preview rendering
+| 📦 | Batch exporting of components and assets
+| 🎨 | Theme generation from local styles and variables
+| 🏞 | Images, vectors, and icons support
+| 🎲 | Variants and properties support
+| 🧱 | Nested components support
+| 🧩 | Figma variables support
+| 🎮 | Pressables generation
+| 🎭 | Conditional rendering
+| 📚 | Storybook syncing
+| 📖 | JSDoc generation
+| 💡 | Dark/light mode
 
-[![Preview of plugin](./art/banner.png)](https://www.figma.com/community/plugin/821138713091291738)
+### Roadmap
 
+#### V46 - Polishing & Bug Fixes
+- `Interface` Keep Figma component order in list
+- `Compiler` Add remaining EXO primitives + Iconify
+- `Compiler` Fix default color missing for dynamic colors (variants)
+- `Compiler` On component/icon/asset delete keep record
+- `Compiler` MVP app ui package (runnable w/ storybook)
+- `Previewer` Profile extraneous builds
+- `Previewer` Goto code and highlight JSX tag when inspect clicked
+- `Previewer` Pass bundler error text to interface
+- `Editor` Improve intellisense startup time
+- `Editor` Type unistyles file (update on theme update)
+- `Editor` Highlight JSX tag when node focused
+- `Editor` Auto-collapse classes, colors, and stylesheet
+- `Editor` Add color provider for theme tokens
+- `Editor` Hover over icon name for preview
+- `Icons` When importing, add browsing icon sets and prefixes
+- `Theme` If no colors found, offer shadcn themes
+  - Try to generate dark/light if variables available
+  - Fallback to local styles with just light theme
 
-### Getting started
+#### V47 — Asset Gallery
+- `Assets` Enable new assets page
+- `Assets` Add bounding box + title + hover
+- `Assets` Add lightbox (yet-another-react-lightbox)
+- `Assets` Add drag and drop to figma / others
 
-1. [Install the plugin](https://www.figma.com/community/plugin/821138713091291738) in Figma and run it.
-2. Select any [Figma component](https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-Components-in-Figma) on the screen.
-3. View the component code, render, storybook file, or theme file in real time.
-4. Go to the "Export" tab and choose which components to bulk export.
-5. To change the settings, click the cog icon and edit the JSON. Settings will save and update in real time.
+#### V48 — Saved User Edits
+- `Compiler` Compare user changes to last build
+- `Interface` Show modified state in list + component views
+- `Editor` Show modified lines in gutter (like git)
+- `Editor` Show selected node in gutter
 
+#### V49 — Collaboration
+- `YJS` Setup websocket provider (y-sweet)
+- `Editor` Awareness cursors selections
+- `Preview` Show cursors and inspects
+- `Interface` Show color dots in component list
+- `Storybook` Update syncing api to match plugin
 
-### Plugin Features
+#### V50 — Services
 
-|   | Feature |   | 
-| - | ------- | - | 
-| ✨ | Realtime code and preview rendering | ✅ |
-| 🎨 | Theme generation from variable modes | ✅ |
-| 📦 | Batch exporting of components and assets | ✅ |
-| 🏞 | Asset exporting of rasters and vectors | ✅ |
-| ⭐️ | AutoLayout to Flexbox translation | ✅ |
-| 🎲 | Variants and properties support | ✅ |
-| 🧱 | Nested components support | ✅ |
-| 🧩 | Figma variables support | ✅ |
-| 🎮 | Pressables generation | ✅ |
-| 🎭 | Conditional rendering | ✅ |
-| 🪟 | Borders and rounding | ✅ |
-| 🔄 | Rotations and effects | ⏱ |
-| 🏔 | Background gradients | ⏱ |
-| 📚 | Storybook syncing | ✅ |
-| 📖 | JSDoc generation | ✅ |
-| 💡 | Dark/light mode | ✅ |
-| 💎 | Tamagui output | ⏱ |
+##### GPT-4 Vision
+- `Service` Verify output and fine-tune prompt
+- `Interface` Send component code + preview image to api
+- `Interface` Update component code Y.JS value if accepted
 
+##### GitHub Release
+- `Service` Process files and create pull request
 
-### Community
+##### Redux Sync
+- `Service` Sync Redux store -> Figma Variables via Figma REST API
+- `Compiler` Generate usage similar to useState implementation
+- `Compiler` Use saved variables plugin data to get redux store code for previews + builds
 
-- [Discord Channel](https://discord.com/invite/TzhDRyj)
-- [Figma Forums](https://forum.figma.com/t/react-component-generator/14236)
-- [Discussions](https://github.com/kat-tax/figma/discussions)
-- [Issues](https://github.com/kat-tax/figma/issues)
+##### Icon Service
+- `Service` Provide hosted Iconify source
+- `Service` Import SVGs from Figma to Iconify set via Figma REST API
 
-> _Disclaimer: This plugin __does not require__ an account, remote service, or any other bullsh*t. There will be an optional paid service for syncing and collaboration features to support development. Donations are also welcome._

package.json

@@ -1,68 +1,5 @@
 {
-  "private": true,
-  "license": "GPL-3.0",
-  "scripts": {
-    "dev": "build-figma-plugin --typecheck --watch",
-    "build": "build-figma-plugin --typecheck --minify",
-    "schema": "typescript-json-schema tsconfig.json Settings --out ./src/settings-schema.json"
-  },
-  "figma-plugin": {
-    "id": "821138713091291738",
-    "name": "Figma -> React Native",
-    "networkAccess": {
-      "allowedDomains": [
-        "*"
-      ],
-      "reasoning": "Needed for Monaco Editor blob workers to load"
-    },
-    "permissions": [
-      "currentuser"
-    ],
-    "editorType": [
-      "figma",
-      "dev"
-    ],
-    "capabilities": [
-      "codegen",
-      "inspect",
-      "panel"
-    ],
-    "main": "src/main.ts",
-    "ui": "src/ui.tsx"
-  },
-  "dependencies": {
-    "@create-figma-plugin/ui": "^2.6.1",
-    "@create-figma-plugin/utilities": "^2.6.1",
-    "@hocuspocus/provider": "^2.6.1",
-    "@logtail/browser": "^0.4.12",
-    "@monaco-editor/react": "^4.6.0",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@uppy/core": "^3.5.1",
-    "@uppy/tus": "^3.3.1",
-    "client-zip": "^2.4.4",
-    "code-block-writer": "^12.0.0",
-    "constrained-editor-plugin": "^1.3.0",
-    "deep-object-diff": "^1.1.9",
-    "esbuild-wasm": "^0.17.19",
-    "lodash.camelcase": "^4.3.0",
-    "monaco-editor": "^0.44.0",
-    "preact": "^10.18.1",
-    "reserved": "^0.1.2",
-    "yjs": "^13.6.8"
-  },
-  "devDependencies": {
-    "@create-figma-plugin/build": "^2.6.1",
-    "@create-figma-plugin/tsconfig": "^2.6.1",
-    "@figma/plugin-typings": "1.79.0",
-    "@types/lodash.camelcase": "^4.3.7",
-    "@types/react": "^18.2.27",
-    "esbuild": "^0.17.19",
-    "react-native-unistyles": "^1.0.0-beta.6",
-    "react-zoom-pan-pinch": "^3.1.0",
-    "typescript": "^4.9.5",
-    "typescript-json-schema": "^0.61.0"
-  },
-  "browser": {
-    "crypto": false
-  }
+  "name": "exo",
+  "version": "0.45.0",
+  "license": "GPL-3.0"
 }

packages/css-to-rn/README.md

@@ -0,0 +1,7 @@
+> Forked from NativeWind's css-to-rn interop:
+
+https://github.com/marklawlor/nativewind/tree/main/packages/react-native-css-interop
+
+Copyright (c) 2023 Mark Lawlor
+
+MIT License