[App] Rewrite plugin

apps/uicompanion-plugin/.gitignore

@@ -1,8 +1,6 @@
-node_modules
-dist
-
-settings.json
-yarn-error.log
-
-.vscode
 .DS_Store
+*.log
+*.css.d.ts
+/build/
+/manifest.json
+node_modules/

apps/uicompanion-plugin/.vscode/settings.json

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

apps/uicompanion-plugin/README.md

@@ -1,23 +1,47 @@
-# Figma Plugin React Template
+# UICompanion - Figma Plugin
 
-![62862431-71537f00-bd0e-11e9-85db-d97c0fb729a4](https://user-images.githubusercontent.com/16322616/62862692-46b5f600-bd0f-11e9-93b0-75955d1de8f3.png)
+## Development guide
 
-This template contains the react example as shown on [Figma Docs](https://www.figma.com/plugin-docs/intro/), with some structural changes and extra tooling.
+*This plugin is built with [Create Figma Plugin](https://yuanqing.github.io/create-figma-plugin/).*
 
-## Quickstart
+### Pre-requisites
 
-- Run `yarn` to install dependencies.
-- Run `yarn build:watch` to start webpack in watch mode.
-- Open `Figma` -> `Plugins` -> `Development` -> `Import plugin from manifest...` and choose `manifest.json` file from this repo.
+- [Node.js](https://nodejs.org) – v20
+- [Figma desktop app](https://figma.com/downloads/)
 
-⭐ To change the UI of your plugin (the react code), start editing [App.tsx](./src/app/components/App.tsx).  
-⭐ To interact with the Figma API edit [controller.ts](./src/plugin/controller.ts).  
-⭐ Read more on the [Figma API Overview](https://www.figma.com/plugin-docs/api/api-overview/).
+### Build the plugin
 
-## Toolings
+To build the plugin:
 
-This repo is using:
+```
+$ pnpm run build
+```
 
-- React + Webpack
-- TypeScript
-- Prettier precommit hook
+This will generate a [`manifest.json`](https://figma.com/plugin-docs/manifest/) file and a `build/` directory containing the JavaScript bundle(s) for the plugin.
+
+To watch for code changes and rebuild the plugin automatically:
+
+```
+$ pnpm run watch
+```
+
+### Install the plugin
+
+1. In the Figma desktop app, open a Figma document.
+2. Search for and run `Import plugin from manifest…` via the Quick Actions search bar.
+3. Select the `manifest.json` file that was generated by the `build` script.
+
+### Debugging
+
+Use `console.log` statements to inspect values in your code.
+
+To open the developer console, search for and run `Show/Hide Console` via the Quick Actions search bar.
+
+## See also
+
+- [Create Figma Plugin docs](https://yuanqing.github.io/create-figma-plugin/)
+
+Official docs and code samples from Figma:
+
+- [Plugin API docs](https://figma.com/plugin-docs/)
+- [`figma/plugin-samples`](https://github.com/figma/plugin-samples#readme)

apps/uicompanion-plugin/manifest.json

@@ -1,8 +1,10 @@
 {
-  "name": "UICompanion",
-  "id": "00000000",
   "api": "1.0.0",
-  "main": "dist/code.js",
-  "ui": "dist/ui.html",
-  "editorType": ["figma"]
+  "editorType": [
+    "figma"
+  ],
+  "id": "uicompanion-plugin",
+  "name": "UICompanion",
+  "main": "build/main.js",
+  "ui": "build/ui.js"
 }