v33 (#15)

- Huge refactor, lots of bug fixes.
- Rewrote Figma parser module to decouple from React Native StyleSheets
- Added configurable style engine parsers:
  - Figma: converts Figma's generated CSS to RN compatible styles, much simpler and more accurate.
  - Experimental: the old parser, will be more flexible in the future
- Added support for assets (image & svg) in export and preview
- Added multi-variant support for components
- Improved identifier sanitation and formatting (fixes #14)

.gitignore

@@ -1,6 +1,8 @@
 # Project
 build/
 .ref/
+.old/
+_schema.json
 TODO.md
 
 # OSX

README.md

@@ -17,26 +17,26 @@
 
 ### Getting started
 
-1. [Add the plugin](https://www.figma.com/community/plugin/821138713091291738) to Figma and run it.
+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. In the plugin you can view the React Native code, a preview, a storybook file, and a theme file in each respective tab.
-4. Go to the "Export" tab and choose which components to export.
-4. To change the settings, click the cog icon and edit the JSON. Settings will save and update in real time. You can change the configuration of the editor, plugin, compiler, code output, and more.
-
+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.
 
 ### Plugin Features
 
 |   | Feature |   | 
-| - | --------------- | - | 
+| - | ------- | - | 
 | ✨ | Realtime code and preview rendering | ✅ |
 | 🔧 | Flexible and realtime config | ✅ |
 | 🎨 | Theme generation from styles | ✅ |
+| 🎮 | Prototype interactions to components | ⏱ |
 | 📦 | Batch exporting of components and assets | ✅ |
 | 🏞 | Asset exporting of rasters and vectors | ✅ |
 | ⭐️ | AutoLayout to Flexbox translation | ✅ |
 | 🎲 | Variants and properties support | ✅ |
-| 🧩 | Figma variables support | ⏱ |
 | 🧱 | Nested components support | ✅ |
+| 🧩 | Figma variables support | ⏱ |
 | 🎭 | Conditional rendering | ✅ |
 | 🪟 | Borders and rounding | ✅ |
 | 🔄 | Rotations and effects | ⏱ |
@@ -54,4 +54,4 @@
 - [Discussions](https://github.com/kat-tax/figma/discussions)
 - [Issues](https://github.com/kat-tax/figma/issues)
 
-> _Disclaimer: This plugin __does not require__ an account, remote service, or any other bullsh*t. There will be an optional paid service planned for syncing and collaboration features to support development. Donations are also welcome._
+> _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._

ROADMAP.md

@@ -1,30 +1,21 @@
 # ROADMAP
 
 ### Next
-- Fix handling multiple variants
-- Fix various parse errors
-- Fix styling differences
-- Fix sanitizing names
-- Fix rectangle + ellipses
-- Support assets (png + svg)
-- Support variant child nodes
+- Add useMemo to classes
+- Fix shorthands: borderBottom: '1px solid var(--neutral-12, #EFF0F0)'
+- Improve perf (cache data, track revisions)
+- Improve styling differences
+- Sort props
 
 ### Interface
-- Render preview, story, and code separate based on visible tab
 - Diff text instead of fully replacing (highlight changes?)
 - Highlight selected sub node within code
   - sourcemap from node ids -> line + column numbers needed when parsing
 
 ### Generation
-- Images (including export & previewing)
-  - Expo Image support: https://docs.expo.dev/versions/unversioned/sdk/image/
-  - Generate placeholder: https://github.com/evanw/thumbhash
-  - Optimize: https://github.com/GoogleChromeLabs/squoosh
 - Theme values (fonts & effects left)
-- Shadows, rotations, etc.
-- Gradient backgrounds
-- Absolute positioning
 - Interactions (via Pressable & Link)
+- Gradient backgrounds
 - Screens (navigation based on prototype settings)
 - Use Pressable and TextInput using user mappings
 ```json
@@ -48,18 +39,19 @@
 </Pressable>
 ```
 
-### Exporting
-- Git repository (https://isomorphic-git.org)
-- Each document / page export is a branch
-- Display diff
-
-### Maintaining
-- Refactor types
-- Use `--jsx=automatic` option (https://github.com/evanw/esbuild/issues/334)
-
-### Servicing
-- Payment system
+### SaaS
+- Storybook preview
 - Storybook syncing
+- Export to GitHub PR
+- Auto translations
+- AI documentation
+- UI package generation
+- Sync Redux store to Figma variable collection
+- Thumbhash, RNSVG, Image & SVGO compression
+
+### Extensions
+- Port UI to VSCode
+- Same messaging to Figma & VSCode extension
 
 ### Testing
 - Ensure https://www.untitledui.com/ converts

package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "dev": "build-figma-plugin --typecheck --watch",
     "build": "build-figma-plugin --typecheck --minify",
-    "gen-schema": "typescript-json-schema tsconfig.json Settings --out ./src/templates/settings/schema.json"
+    "gen-schema": "typescript-json-schema tsconfig.json Settings --out ./src/_schema.json"
   },
   "figma-plugin": {
     "id": "821138713091291738",
@@ -27,27 +27,27 @@
   "dependencies": {
     "@create-figma-plugin/ui": "^2.5.0",
     "@create-figma-plugin/utilities": "^2.5.0",
+    "@hocuspocus/provider": "^2.1.0",
     "@monaco-editor/react": "^4.5.1",
     "@radix-ui/react-tabs": "^1.0.4",
-    "ajv": "^8.12.0",
+    "@types/lodash.camelcase": "^4.3.7",
     "client-zip": "^2.4.4",
     "code-block-writer": "^12.0.0",
     "deep-object-diff": "^1.1.9",
+    "diff": "^5.1.0",
     "esbuild-wasm": "^0.17.18",
-    "esm-seedrandom": "^3.0.5",
+    "lint": "link:@types/@codemirror/lint",
+    "lodash.camelcase": "^4.3.0",
     "monaco-editor": "^0.39.0",
     "preact": "^10.13.2",
-    "uniforms-bridge-json-schema": "4.0.0-alpha.4",
-    "uniforms-unstyled": "4.0.0-alpha.4",
-    "xkcd-936": "^1.0.4",
-    "y-webrtc": "^10.2.5",
-    "y-websocket": "^1.5.0",
+    "reserved": "^0.1.2",
     "yjs": "^13.6.2"
   },
   "devDependencies": {
     "@create-figma-plugin/build": "^2.5.0",
     "@create-figma-plugin/tsconfig": "^2.5.0",
     "@figma/plugin-typings": "1.68.0",
+    "@types/diff": "^5.0.3",
     "@types/react": "^18.2.13",
     "esbuild": "^0.16.10",
     "react-zoom-pan-pinch": "^3.0.8",