v26 (#8)

* Refactors, switched to create-figma-plugin
* Improved previewing
* Update esbuild-wasm
* Finished variant styling
* Fix text width
* Update marketing

.gitignore

@@ -1,5 +1,5 @@
 # Project
-dist/
+build/
 .ref/
 TODO.md
 

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "json.schemas": [
+    {
+      "fileMatch": [
+        "package.json"
+      ],
+      "url": "https://yuanqing.github.io/create-figma-plugin/figma-plugin.json"
+    }
+  ]
+}

README.md

@@ -1,12 +1,22 @@
-# [Figma To React Native](https://www.figma.com/community/plugin/821138713091291738)
-
-> 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. The focus is on one way, continuous, conversion from Figma to React.
+<p align="center">
+  <img src="./art/logo.png" width="90px"/>
+</p>
+<h1 align="center">
+  Figma → React Native
+</h1>
+<h3 align="center">
+  <a href="https://www.figma.com/community/plugin/821138713091291738">
+    View plugin on Figma Community
+  </a>
+</h3>
+
+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.
 
 [![Preview of plugin](./art/banner.png)](https://www.figma.com/community/plugin/821138713091291738)
 
 ## Getting started
 
-[Install the plugin](https://www.figma.com/community/plugin/821138713091291738). Open it in Figma and select a [Figma component](https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-Components-in-Figma). The plugin will generate React component code and render a preview. 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.
+[Run the plugin](https://www.figma.com/community/plugin/821138713091291738). Open it in Figma and select a [Figma component](https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-Components-in-Figma). The plugin will generate React component code and render a preview. 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.
 
 ## Features
 
@@ -18,8 +28,9 @@
 - Background gradients
 - Borders and rounding
 - Shadows and rotations
+- Storybook generation
+- Component JSDoc generation
 - Theme generation from styles
-- Generates stories for Storybook
 - Realtime code and preview rendering
 - Flexible and realtime configuration
 - Batch exporting components
@@ -31,3 +42,5 @@
 - [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)
+
+This plugin is open source. It does not require an account, remote service, or any other bullsh*t.

ROADMAP.md

@@ -1,24 +1,20 @@
 # ROADMAP
 
-### Polishing
-- Add fill prop to SVGs and provide them
-- Fix wrong variants being used (imports seem right)
+### 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
 
-### Interfacing
-
+### Interface
+- Diff text instead of fully replacing (highlight changes?)
 - Highlight selected sub node within code
   - sourcemap from node ids -> line + column numbers needed when parsing
 
-### Generating
-
-- Variants
-  - Loop through variants
-  - Build and diff stylesheet from the root for each
-  - Add suffix (named from the variant) for each diff stylesheet
-  - Build the dynamic class with the props and the stylesheet classes
-  - If state is "Hover" or "Focused" or "Pressed" then auto generate a <Pressable> and apply the class?
+### Generation
 - Images (including export & previewing)
   - Expo Image support: https://docs.expo.dev/versions/unversioned/sdk/image/
   - Generate placeholder: https://github.com/evanw/thumbhash
@@ -29,23 +25,41 @@
 - Absolute positioning
 - Interactions (via Pressable & Link)
 - Screens (navigation based on prototype settings)
+- Use Pressable and TextInput using user mappings
+```json
+{
+  "mappings": {
+    // Hovers get a pressable generated over them
+    "PressableContainer": "/$button|^button/i",
+    // Hovers get a pressable generated over them
+    "PressableHover": "/$button|^button/i",
+    // Inputs get Text replaced with TextInput and contents are the placeholder attr
+    "TextInput": "/$input|^input/i",
+  }
+}
+```
+- Auto generate a <Pressable> and apply "Hover" or "Focused" or "Pressed" state?
+```tsx
+<Pressable onClick={console.log}>
+  {({hovered}) => (
+    <Button state={hovered ? 'Hover' : 'Default'}/>
+  )}
+</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
 - Storybook syncing
 
 ### Testing
-
-- Ensure https://www.untitledui.com/ translates
+- Ensure https://www.untitledui.com/ converts
+- Test other UI packs (IntelliJ, find more...)

build-figma-plugin.ui.js

@@ -0,0 +1,18 @@
+// @ts-check
+/**
+ * @param buildOptions {Partial<import('esbuild').BuildOptions>}
+ * @returns {Partial<import('esbuild').BuildOptions>}
+ */
+module.exports = (buildOptions) => {
+  return {
+    ...buildOptions,
+    target: 'es2020',
+    loader: {
+      '.tpl.tsx': 'base64',
+      '.tpl.html': 'base64',
+    },
+    define: {
+      global: 'window',
+    },
+  };
+}

manifest.json

@@ -1,20 +1,10 @@
 {
   "api": "1.0.0",
-  "name": "Figma -> React Native",
-  "editorType": ["figma"],
+  "editorType": [
+    "figma"
+  ],
   "id": "821138713091291738",
-  "ui": "dist/index.html",
-  "main": "dist/main.js",
-  "parameterOnly": false,
-  "menu": [
-    {"name": "Component Inspector", "command": "show"},
-    {
-      "name": "Export Components",
-      "menu": [
-        {"name": "Document", "command": "export-doc"},
-        {"name": "Current Page", "command": "export-page"},
-        {"name": "Selected Component", "command": "export-selected"}
-     ]
-    }
-  ]
+  "name": "Figma -> React Native",
+  "main": "build/main.js",
+  "ui": "build/ui.js"
 }