Add ui template

Author: yuanqing

packages/create-figma-plugin/plugin-templates/ui/.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+*.log
+*.css.d.ts
+build/
+node_modules/
+manifest.json

packages/create-figma-plugin/plugin-templates/ui/.vscode/settings.json

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

packages/create-figma-plugin/plugin-templates/ui/README.md

@@ -0,0 +1,52 @@
+# {{name}}
+
+{{#description}}
+> {{description}}
+
+{{/description}}
+## Development guide
+
+*This plugin is built with [Create Figma Plugin](https://yuanqing.github.io/create-figma-plugin/).*
+
+### Pre-requisites
+
+- [Node.js](https://nodejs.org) – v14
+- [Figma desktop app](https://figma.com/downloads/)
+
+### Build the plugin
+
+To build the plugin:
+
+```
+$ npm run build
+```
+
+This will generate a [`manifest.json`](https://figma.com/plugin-docs/manifest/) file and a `build/` directory containing a JavaScript bundle for the plugin.
+
+To watch for code changes and rebuild the plugin automatically:
+
+```
+$ npm run watch
+```
+
+### Install the plugin
+
+In the Figma desktop app:
+
+1. Open a Figma document.
+2. Go to `Plugins` → `Development` → `New Plugin…`.
+3. Click the `Click to choose a manifest.json file` box, and select the `manifest.json` file that was generated.
+
+### Debugging
+
+Use `console.log` statements to inspect values in your code.
+
+To open the developer console in the Figma desktop app, go to `Plugins` → `Development` → `Open Console`.
+
+## See also
+
+- [Create Figma Plugin docs](https://yuanqing.github.io/create-figma-plugin/)
+- [Storybook](https://yuanqing.github.io/create-figma-plugin/ui/)
+- [Figma plugin API docs](https://figma.com/plugin-docs/api/)
+- [`figma/plugin-samples`](https://github.com/figma/plugin-samples)
+- [`yuanqing/figma-plugins`](https://github.com/yuanqing/figma-plugins)

packages/create-figma-plugin/plugin-templates/ui/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "{{{name}}}",
+{{#version}}
+  "version": "{{{version}}}",
+{{/version}}
+{{#description}}
+  "description": "{{{description}}}",
+{{/description}}
+  "keywords": [
+    "create-figma-plugin",
+    "figma",
+    "figma-plugin"
+  ],
+{{#license}}
+  "license": "{{{license}}}",
+{{/license}}
+{{#author}}
+  "author": "{{{author}}}",
+{{/author}}
+{{#repositoryUrl}}
+  "repository": "{{{repositoryUrl}}}",
+{{/repositoryUrl}}
+  "dependencies": {
+    "@create-figma-plugin/ui": "^{{{versions.ui}}}",
+    "@create-figma-plugin/utilities": "^{{{versions.utilities}}}",
+    "preact": "^10"
+  },
+  "devDependencies": {
+    "@create-figma-plugin/build": "^{{{versions.build}}}",
+    "@create-figma-plugin/tsconfig": "^{{{versions.tsconfig}}}",
+    "@figma/plugin-typings": "^1",
+    "typescript": "^4"
+  },
+  "scripts": {
+    "build": "build-figma-plugin --typecheck --minify",
+    "watch": "build-figma-plugin --typecheck --watch"
+  },
+  "figma-plugin": {
+    "id": "{{{name}}}",
+{{#displayName}}
+    "name": "{{{displayName}}}",
+{{/displayName}}
+    "main": "src/main.ts",
+    "ui": "src/ui.tsx"
+  }
+}

packages/create-figma-plugin/plugin-templates/ui/src/main.ts

@@ -0,0 +1,31 @@
+import { once, showUI } from '@create-figma-plugin/utilities'
+
+import { CloseHandler, CreateRectanglesHandler } from './types'
+
+export default function () {
+  once<CreateRectanglesHandler>('CREATE_RECTANGLES', function (count: number) {
+    const nodes: Array<SceneNode> = []
+    for (let i = 0; i < count; i++) {
+      const rect = figma.createRectangle()
+      rect.x = i * 150
+      rect.fills = [
+        {
+          color: { b: 0, g: 0.5, r: 1 },
+          type: 'SOLID'
+        }
+      ]
+      figma.currentPage.appendChild(rect)
+      nodes.push(rect)
+    }
+    figma.currentPage.selection = nodes
+    figma.viewport.scrollAndZoomIntoView(nodes)
+    figma.closePlugin()
+  })
+  once<CloseHandler>('CLOSE', function () {
+    figma.closePlugin()
+  })
+  showUI({
+    height: 137,
+    width: 240
+  })
+}

packages/create-figma-plugin/plugin-templates/ui/src/types.ts

@@ -0,0 +1,11 @@
+import { EventHandler } from '@create-figma-plugin/utilities'
+
+export interface CreateRectanglesHandler extends EventHandler {
+  name: 'CREATE_RECTANGLES'
+  handler: (count: number) => void
+}
+
+export interface CloseHandler extends EventHandler {
+  name: 'CLOSE'
+  handler: () => void
+}

packages/create-figma-plugin/plugin-templates/ui/src/ui.tsx

@@ -0,0 +1,54 @@
+import {
+  Button,
+  Columns,
+  Container,
+  render,
+  Text,
+  TextboxNumeric,
+  VerticalSpace
+} from '@create-figma-plugin/ui'
+import { emit } from '@create-figma-plugin/utilities'
+import { h } from 'preact'
+import { useCallback, useState } from 'preact/hooks'
+
+import { CloseHandler, CreateRectanglesHandler } from './types'
+
+function Plugin() {
+  const [count, setCount] = useState<number | null>(5)
+  const [countString, setCountString] = useState('5')
+  const handleCreateRectanglesClick = useCallback(
+    function () {
+      if (count !== null) {
+        emit<CreateRectanglesHandler>('CREATE_RECTANGLES', count)
+      }
+    },
+    [count]
+  )
+  const handleCloseClick = useCallback(function () {
+    emit<CloseHandler>('CLOSE')
+  }, [])
+  return (
+    <Container>
+      <VerticalSpace space="large" />
+      <Text muted>Count</Text>
+      <VerticalSpace space="small" />
+      <TextboxNumeric
+        onNumericValueInput={setCount}
+        onValueInput={setCountString}
+        value={countString}
+      />
+      <VerticalSpace space="extraLarge" />
+      <Columns space="extraSmall">
+        <Button fullWidth onClick={handleCreateRectanglesClick}>
+          Create
+        </Button>
+        <Button fullWidth onClick={handleCloseClick} secondary>
+          Close
+        </Button>
+      </Columns>
+      <VerticalSpace space="small" />
+    </Container>
+  )
+}
+
+export default render(Plugin)

packages/create-figma-plugin/plugin-templates/ui/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@create-figma-plugin/tsconfig",
+  "compilerOptions": {
+    "typeRoots": ["node_modules/@figma", "node_modules/@types"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}