my first plugin is born

.gitignore

+node_modules

.vscode/settings.json

+{
+    "git.ignoreLimitWarning": true
+}
\ No newline at end of file

README.md

+# Figma Icon Automation Plugin
+Figma Icon Automation is a plugin that helps you synchronize your icons' SVG code to a Github Repository, Then the Github Action will convert them to React code and update to NPM automatically.
\ No newline at end of file

api/github.js

+export const base = 'https://api.github.com'
+
+export const getContent = (filePath, githubData) => {
+  return fetch(`${base}/repos/${githubData.owner}/${githubData.name}/contents/${filePath}`, {
+    headers: {
+      'content-type': 'application/json'
+    }
+  })
+  .then(response => response.json())
+  .then(res => (
+    res.sha ?
+    {sha: res.sha, contents: JSON.parse(window.atob(res.content))} :
+    {}
+  ))
+}
+
+export const getCommit = (githubData) => {
+  return fetch(`${base}/repos/${githubData.owner}/${githubData.name}/commits/refs/heads/master`, {
+    headers: {
+      'content-type': 'application/json'
+    }
+  })
+  .then(response => response.json())
+}
+
+export const createBranch = (sha, githubData) => {
+  const branchName = `figma-update-${(new Date()).getTime()}`
+  const body = { ref: `refs/heads/${branchName}`, sha }
+  return fetch(`${base}/repos/${githubData.owner}/${githubData.name}/git/refs`, {
+    headers: {
+      'content-type': 'application/json',
+      'Authorization': `token ${githubData.githubToken}`
+    },
+    body: JSON.stringify(body),
+    method: 'POST'
+  })
+    .then(response => response.json())
+}
+
+export const updatePackage = (message, sha, contents, branch, githubData) => {
+  const content = window.btoa(JSON.stringify(contents, null, 2))
+  const body = JSON.stringify({ branch, sha, content, message })
+  return fetch(`${base}/repos/${githubData.owner}/${githubData.name}/contents/package.json`, {
+    headers: {
+      'content-type': 'application/json',
+      'Authorization': `token ${githubData.githubToken}`
+    },
+    body,
+    method: 'PUT'
+  })
+  .then(response => response.json())
+}
+
+export const createPullRequest = (title, content, branchName, githubData) => {
+  const body = {
+    title,
+    body: content,
+    head: `${githubData.owner}:${branchName}`,
+    base: "master"
+  }
+  return fetch(`${base}/repos/${githubData.owner}/${githubData.name}/pulls`, {
+    headers: {
+      'content-type': 'application/json',
+      'Authorization': `token ${githubData.githubToken}`
+    },
+    body: JSON.stringify(body),
+    method: 'POST'
+  })
+    .then(response => response.json())
+}

dist/code.js

+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = "./src/code.ts");
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ "./src/code.ts":
+/*!*********************!*\
+  !*** ./src/code.ts ***!
+  \*********************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+figma.showUI(__html__, { width: 320, height: 320 });
+// get github settings
+function getGithubSettings() {
+    return figma.clientStorage.getAsync('githubData');
+}
+// set github settings
+function setGithubSettings(data) {
+    figma.clientStorage.setAsync('githubData', data);
+}
+// send github data to UI
+function init() {
+    getGithubSettings()
+        .then(githubData => {
+        figma.ui.postMessage({ type: 'githubDataGot', githubData });
+    });
+}
+figma.ui.onmessage = msg => {
+    switch (msg.type) {
+        case 'setGithubData':
+            setGithubSettings(msg.githubData);
+            break;
+        case 'cancel':
+            figma.closePlugin();
+            break;
+    }
+};
+init();
+
+
+/***/ })
+
+/******/ });
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vd2VicGFjay9ib290c3RyYXAiLCJ3ZWJwYWNrOi8vLy4vc3JjL2NvZGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtRQUFBO1FBQ0E7O1FBRUE7UUFDQTs7UUFFQTtRQUNBO1FBQ0E7UUFDQTtRQUNBO1FBQ0E7UUFDQTtRQUNBO1FBQ0E7UUFDQTs7UUFFQTtRQUNBOztRQUVBO1FBQ0E7O1FBRUE7UUFDQTtRQUNBOzs7UUFHQTtRQUNBOztRQUVBO1FBQ0E7O1FBRUE7UUFDQTtRQUNBO1FBQ0EsMENBQTBDLGdDQUFnQztRQUMxRTtRQUNBOztRQUVBO1FBQ0E7UUFDQTtRQUNBLHdEQUF3RCxrQkFBa0I7UUFDMUU7UUFDQSxpREFBaUQsY0FBYztRQUMvRDs7UUFFQTtRQUNBO1FBQ0E7UUFDQTtRQUNBO1FBQ0E7UUFDQTtRQUNBO1FBQ0E7UUFDQTtRQUNBO1FBQ0EseUNBQXlDLGlDQUFpQztRQUMxRSxnSEFBZ0gsbUJBQW1CLEVBQUU7UUFDckk7UUFDQTs7UUFFQTtRQUNBO1FBQ0E7UUFDQSwyQkFBMkIsMEJBQTBCLEVBQUU7UUFDdkQsaUNBQWlDLGVBQWU7UUFDaEQ7UUFDQTtRQUNBOztRQUVBO1FBQ0Esc0RBQXNELCtEQUErRDs7UUFFckg7UUFDQTs7O1FBR0E7UUFDQTs7Ozs7Ozs7Ozs7O0FDbEZBLHdCQUF3QiwwQkFBMEI7QUFDbEQ7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsOEJBQThCLG9DQUFvQztBQUNsRSxLQUFLO0FBQ0w7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBIiwiZmlsZSI6ImNvZGUuanMiLCJzb3VyY2VzQ29udGVudCI6WyIgXHQvLyBUaGUgbW9kdWxlIGNhY2hlXG4gXHR2YXIgaW5zdGFsbGVkTW9kdWxlcyA9IHt9O1xuXG4gXHQvLyBUaGUgcmVxdWlyZSBmdW5jdGlvblxuIFx0ZnVuY3Rpb24gX193ZWJwYWNrX3JlcXVpcmVfXyhtb2R1bGVJZCkge1xuXG4gXHRcdC8vIENoZWNrIGlmIG1vZHVsZSBpcyBpbiBjYWNoZVxuIFx0XHRpZihpbnN0YWxsZWRNb2R1bGVzW21vZHVsZUlkXSkge1xuIFx0XHRcdHJldHVybiBpbnN0YWxsZWRNb2R1bGVzW21vZHVsZUlkXS5leHBvcnRzO1xuIFx0XHR9XG4gXHRcdC8vIENyZWF0ZSBhIG5ldyBtb2R1bGUgKGFuZCBwdXQgaXQgaW50byB0aGUgY2FjaGUpXG4gXHRcdHZhciBtb2R1bGUgPSBpbnN0YWxsZWRNb2R1bGVzW21vZHVsZUlkXSA9IHtcbiBcdFx0XHRpOiBtb2R1bGVJZCxcbiBcdFx0XHRsOiBmYWxzZSxcbiBcdFx0XHRleHBvcnRzOiB7fVxuIFx0XHR9O1xuXG4gXHRcdC8vIEV4ZWN1dGUgdGhlIG1vZHVsZSBmdW5jdGlvblxuIFx0XHRtb2R1bGVzW21vZHVsZUlkXS5jYWxsKG1vZHVsZS5leHBvcnRzLCBtb2R1bGUsIG1vZHVsZS5leHBvcnRzLCBfX3dlYnBhY2tfcmVxdWlyZV9fKTtcblxuIFx0XHQvLyBGbGFnIHRoZSBtb2R1bGUgYXMgbG9hZGVkXG4gXHRcdG1vZHVsZS5sID0gdHJ1ZTtcblxuIFx0XHQvLyBSZXR1cm4gdGhlIGV4cG9ydHMgb2YgdGhlIG1vZHVsZVxuIFx0XHRyZXR1cm4gbW9kdWxlLmV4cG9ydHM7XG4gXHR9XG5cblxuIFx0Ly8gZXhwb3NlIHRoZSBtb2R1bGVzIG9iamVjdCAoX193ZWJwYWNrX21vZHVsZXNfXylcbiBcdF9fd2VicGFja19yZXF1aXJlX18ubSA9IG1vZHVsZXM7XG5cbiBcdC8vIGV4cG9zZSB0aGUgbW9kdWxlIGNhY2hlXG4gXHRfX3dlYnBhY2tfcmVxdWlyZV9fLmMgPSBpbnN0YWxsZWRNb2R1bGVzO1xuXG4gXHQvLyBkZWZpbmUgZ2V0dGVyIGZ1bmN0aW9uIGZvciBoYXJtb255IGV4cG9ydHNcbiBcdF9fd2VicGFja19yZXF1aXJlX18uZCA9IGZ1bmN0aW9uKGV4cG9ydHMsIG5hbWUsIGdldHRlcikge1xuIFx0XHRpZighX193ZWJwYWNrX3JlcXVpcmVfXy5vKGV4cG9ydHMsIG5hbWUpKSB7XG4gXHRcdFx0T2JqZWN0LmRlZmluZVByb3BlcnR5KGV4cG9ydHMsIG5hbWUsIHsgZW51bWVyYWJsZTogdHJ1ZSwgZ2V0OiBnZXR0ZXIgfSk7XG4gXHRcdH1cbiBcdH07XG5cbiBcdC8vIGRlZmluZSBfX2VzTW9kdWxlIG9uIGV4cG9ydHNcbiBcdF9fd2VicGFja19yZXF1aXJlX18uciA9IGZ1bmN0aW9uKGV4cG9ydHMpIHtcbiBcdFx0aWYodHlwZW9mIFN5bWJvbCAhPT0gJ3VuZGVmaW5lZCcgJiYgU3ltYm9sLnRvU3RyaW5nVGFnKSB7XG4gXHRcdFx0T2JqZWN0LmRlZmluZVByb3BlcnR5KGV4cG9ydHMsIFN5bWJvbC50b1N0cmluZ1RhZywgeyB2YWx1ZTogJ01vZHVsZScgfSk7XG4gXHRcdH1cbiBcdFx0T2JqZWN0LmRlZmluZVByb3BlcnR5KGV4cG9ydHMsICdfX2VzTW9kdWxlJywgeyB2YWx1ZTogdHJ1ZSB9KTtcbiBcdH07XG5cbiBcdC8vIGNyZWF0ZSBhIGZha2UgbmFtZXNwYWNlIG9iamVjdFxuIFx0Ly8gbW9kZSAmIDE6IHZhbHVlIGlzIGEgbW9kdWxlIGlkLCByZXF1aXJlIGl0XG4gXHQvLyBtb2RlICYgMjogbWVyZ2UgYWxsIHByb3BlcnRpZXMgb2YgdmFsdWUgaW50byB0aGUgbnNcbiBcdC8vIG1vZGUgJiA0OiByZXR1cm4gdmFsdWUgd2hlbiBhbHJlYWR5IG5zIG9iamVjdFxuIFx0Ly8gbW9kZSAmIDh8MTogYmVoYXZlIGxpa2UgcmVxdWlyZVxuIFx0X193ZWJwYWNrX3JlcXVpcmVfXy50ID0gZnVuY3Rpb24odmFsdWUsIG1vZGUpIHtcbiBcdFx0aWYobW9kZSAmIDEpIHZhbHVlID0gX193ZWJwYWNrX3JlcXVpcmVfXyh2YWx1ZSk7XG4gXHRcdGlmKG1vZGUgJiA4KSByZXR1cm4gdmFsdWU7XG4gXHRcdGlmKChtb2RlICYgNCkgJiYgdHlwZW9mIHZhbHVlID09PSAnb2JqZWN0JyAmJiB2YWx1ZSAmJiB2YWx1ZS5fX2VzTW9kdWxlKSByZXR1cm4gdmFsdWU7XG4gXHRcdHZhciBucyA9IE9iamVjdC5jcmVhdGUobnVsbCk7XG4gXHRcdF9fd2VicGFja19yZXF1aXJlX18ucihucyk7XG4gXHRcdE9iamVjdC5kZWZpbmVQcm9wZXJ0eShucywgJ2RlZmF1bHQnLCB7IGVudW1lcmFibGU6IHRydWUsIHZhbHVlOiB2YWx1ZSB9KTtcbiBcdFx0aWYobW9kZSAmIDIgJiYgdHlwZW9mIHZhbHVlICE9ICdzdHJpbmcnKSBmb3IodmFyIGtleSBpbiB2YWx1ZSkgX193ZWJwYWNrX3JlcXVpcmVfXy5kKG5zLCBrZXksIGZ1bmN0aW9uKGtleSkgeyByZXR1cm4gdmFsdWVba2V5XTsgfS5iaW5kKG51bGwsIGtleSkpO1xuIFx0XHRyZXR1cm4gbnM7XG4gXHR9O1xuXG4gXHQvLyBnZXREZWZhdWx0RXhwb3J0IGZ1bmN0aW9uIGZvciBjb21wYXRpYmlsaXR5IHdpdGggbm9uLWhhcm1vbnkgbW9kdWxlc1xuIFx0X193ZWJwYWNrX3JlcXVpcmVfXy5uID0gZnVuY3Rpb24obW9kdWxlKSB7XG4gXHRcdHZhciBnZXR0ZXIgPSBtb2R1bGUgJiYgbW9kdWxlLl9fZXNNb2R1bGUgP1xuIFx0XHRcdGZ1bmN0aW9uIGdldERlZmF1bHQoKSB7IHJldHVybiBtb2R1bGVbJ2RlZmF1bHQnXTsgfSA6XG4gXHRcdFx0ZnVuY3Rpb24gZ2V0TW9kdWxlRXhwb3J0cygpIHsgcmV0dXJuIG1vZHVsZTsgfTtcbiBcdFx0X193ZWJwYWNrX3JlcXVpcmVfXy5kKGdldHRlciwgJ2EnLCBnZXR0ZXIpO1xuIFx0XHRyZXR1cm4gZ2V0dGVyO1xuIFx0fTtcblxuIFx0Ly8gT2JqZWN0LnByb3RvdHlwZS5oYXNPd25Qcm9wZXJ0eS5jYWxsXG4gXHRfX3dlYnBhY2tfcmVxdWlyZV9fLm8gPSBmdW5jdGlvbihvYmplY3QsIHByb3BlcnR5KSB7IHJldHVybiBPYmplY3QucHJvdG90eXBlLmhhc093blByb3BlcnR5LmNhbGwob2JqZWN0LCBwcm9wZXJ0eSk7IH07XG5cbiBcdC8vIF9fd2VicGFja19wdWJsaWNfcGF0aF9fXG4gXHRfX3dlYnBhY2tfcmVxdWlyZV9fLnAgPSBcIlwiO1xuXG5cbiBcdC8vIExvYWQgZW50cnkgbW9kdWxlIGFuZCByZXR1cm4gZXhwb3J0c1xuIFx0cmV0dXJuIF9fd2VicGFja19yZXF1aXJlX18oX193ZWJwYWNrX3JlcXVpcmVfXy5zID0gXCIuL3NyYy9jb2RlLnRzXCIpO1xuIiwiZmlnbWEuc2hvd1VJKF9faHRtbF9fLCB7IHdpZHRoOiAzMjAsIGhlaWdodDogMzIwIH0pO1xuLy8gZ2V0IGdpdGh1YiBzZXR0aW5nc1xuZnVuY3Rpb24gZ2V0R2l0aHViU2V0dGluZ3MoKSB7XG4gICAgcmV0dXJuIGZpZ21hLmNsaWVudFN0b3JhZ2UuZ2V0QXN5bmMoJ2dpdGh1YkRhdGEnKTtcbn1cbi8vIHNldCBnaXRodWIgc2V0dGluZ3NcbmZ1bmN0aW9uIHNldEdpdGh1YlNldHRpbmdzKGRhdGEpIHtcbiAgICBmaWdtYS5jbGllbnRTdG9yYWdlLnNldEFzeW5jKCdnaXRodWJEYXRhJywgZGF0YSk7XG59XG4vLyBzZW5kIGdpdGh1YiBkYXRhIHRvIFVJXG5mdW5jdGlvbiBpbml0KCkge1xuICAgIGdldEdpdGh1YlNldHRpbmdzKClcbiAgICAgICAgLnRoZW4oZ2l0aHViRGF0YSA9PiB7XG4gICAgICAgIGZpZ21hLnVpLnBvc3RNZXNzYWdlKHsgdHlwZTogJ2dpdGh1YkRhdGFHb3QnLCBnaXRodWJEYXRhIH0pO1xuICAgIH0pO1xufVxuZmlnbWEudWkub25tZXNzYWdlID0gbXNnID0+IHtcbiAgICBzd2l0Y2ggKG1zZy50eXBlKSB7XG4gICAgICAgIGNhc2UgJ3NldEdpdGh1YkRhdGEnOlxuICAgICAgICAgICAgc2V0R2l0aHViU2V0dGluZ3MobXNnLmdpdGh1YkRhdGEpO1xuICAgICAgICAgICAgYnJlYWs7XG4gICAgICAgIGNhc2UgJ2NhbmNlbCc6XG4gICAgICAgICAgICBmaWdtYS5jbG9zZVBsdWdpbigpO1xuICAgICAgICAgICAgYnJlYWs7XG4gICAgfVxufTtcbmluaXQoKTtcbiJdLCJzb3VyY2VSb290IjoiIn0=
\ No newline at end of file

figma.d.ts

+// Figma Plugin API version 1, update 1
+
+// Global variable with Figma's plugin API.
+declare const figma: PluginAPI
+declare const __html__: string
+
+interface PluginAPI {
+  readonly apiVersion: "1.0.0"
+  readonly command: string
+  readonly viewport: ViewportAPI
+  closePlugin(message?: string): void
+
+  notify(message: string, options?: NotificationOptions): NotificationHandler
+
+  showUI(html: string, options?: ShowUIOptions): void
+  readonly ui: UIAPI
+
+  readonly clientStorage: ClientStorageAPI
+
+  getNodeById(id: string): BaseNode | null
+  getStyleById(id: string): BaseStyle | null
+
+  readonly root: DocumentNode
+  currentPage: PageNode
+
+  readonly mixed: symbol
+
+  createRectangle(): RectangleNode
+  createLine(): LineNode
+  createEllipse(): EllipseNode
+  createPolygon(): PolygonNode
+  createStar(): StarNode
+  createVector(): VectorNode
+  createText(): TextNode
+  createFrame(): FrameNode
+  createComponent(): ComponentNode
+  createPage(): PageNode
+  createSlice(): SliceNode
+  /**
+   * [DEPRECATED]: This API often fails to create a valid boolean operation. Use figma.union, figma.subtract, figma.intersect and figma.exclude instead.
+   */
+  createBooleanOperation(): BooleanOperationNode
+
+  createPaintStyle(): PaintStyle
+  createTextStyle(): TextStyle
+  createEffectStyle(): EffectStyle
+  createGridStyle(): GridStyle
+
+  // The styles are returned in the same order as displayed in the UI. Only
+  // local styles are returned. Never styles from team library.
+  getLocalPaintStyles(): PaintStyle[]
+  getLocalTextStyles(): TextStyle[]
+  getLocalEffectStyles(): EffectStyle[]
+  getLocalGridStyles(): GridStyle[]
+
+  importComponentByKeyAsync(key: string): Promise<ComponentNode>
+  importStyleByKeyAsync(key: string): Promise<BaseStyle>
+
+  listAvailableFontsAsync(): Promise<Font[]>
+  loadFontAsync(fontName: FontName): Promise<void>
+  readonly hasMissingFont: boolean
+
+  createNodeFromSvg(svg: string): FrameNode
+
+  createImage(data: Uint8Array): Image
+  getImageByHash(hash: string): Image
+
+  group(nodes: ReadonlyArray<BaseNode>, parent: BaseNode & ChildrenMixin, index?: number): FrameNode
+  flatten(nodes: ReadonlyArray<BaseNode>, parent?: BaseNode & ChildrenMixin, index?: number): VectorNode
+
+  union(nodes: ReadonlyArray<BaseNode>, parent: BaseNode & ChildrenMixin, index?: number): BooleanOperationNode
+  subtract(nodes: ReadonlyArray<BaseNode>, parent: BaseNode & ChildrenMixin, index?: number): BooleanOperationNode
+  intersect(nodes: ReadonlyArray<BaseNode>, parent: BaseNode & ChildrenMixin, index?: number): BooleanOperationNode
+  exclude(nodes: ReadonlyArray<BaseNode>, parent: BaseNode & ChildrenMixin, index?: number): BooleanOperationNode
+}
+
+interface ClientStorageAPI {
+  getAsync(key: string): Promise<any | undefined>
+  setAsync(key: string, value: any): Promise<void>
+}
+
+interface NotificationOptions {
+  timeout?: number,
+}
+
+interface NotificationHandler {
+  cancel: () => void,
+}
+
+interface ShowUIOptions {
+  visible?: boolean,
+  width?: number,
+  height?: number,
+}
+
+interface UIPostMessageOptions {
+  origin?: string,
+}
+
+interface OnMessageProperties {
+  origin: string,
+}
+
+interface UIAPI {
+  show(): void
+  hide(): void
+  resize(width: number, height: number): void
+  close(): void
+
+  postMessage(pluginMessage: any, options?: UIPostMessageOptions): void
+  onmessage: ((pluginMessage: any, props: OnMessageProperties) => void) | undefined
+}
+
+interface ViewportAPI {
+  center: { x: number, y: number }
+  zoom: number
+  scrollAndZoomIntoView(nodes: ReadonlyArray<BaseNode>)
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// Datatypes
+
+type Transform = [
+  [number, number, number],
+  [number, number, number]
+]
+
+interface Vector {
+  readonly x: number
+  readonly y: number
+}
+
+interface RGB {
+  readonly r: number
+  readonly g: number
+  readonly b: number
+}
+
+interface RGBA {
+  readonly r: number
+  readonly g: number
+  readonly b: number
+  readonly a: number
+}
+
+interface FontName {
+  readonly family: string
+  readonly style: string
+}
+
+type TextCase = "ORIGINAL" | "UPPER" | "LOWER" | "TITLE"
+
+type TextDecoration = "NONE" | "UNDERLINE" | "STRIKETHROUGH"
+
+interface ArcData {
+  readonly startingAngle: number
+  readonly endingAngle: number
+  readonly innerRadius: number
+}
+
+interface ShadowEffect {
+  readonly type: "DROP_SHADOW" | "INNER_SHADOW"
+  readonly color: RGBA
+  readonly offset: Vector
+  readonly radius: number
+  readonly visible: boolean
+  readonly blendMode: BlendMode
+}
+
+interface BlurEffect {
+  readonly type: "LAYER_BLUR" | "BACKGROUND_BLUR"
+  readonly radius: number
+  readonly visible: boolean
+}
+
+type Effect = ShadowEffect | BlurEffect
+
+type ConstraintType = "MIN" | "CENTER" | "MAX" | "STRETCH" | "SCALE"
+
+interface Constraints {
+  readonly horizontal: ConstraintType
+  readonly vertical: ConstraintType
+}
+
+interface ColorStop {
+  readonly position: number
+  readonly color: RGBA
+}
+
+interface ImageFilters {
+  readonly exposure?: number
+  readonly contrast?: number
+  readonly saturation?: number
+  readonly temperature?: number
+  readonly tint?: number
+  readonly highlights?: number
+  readonly shadows?: number
+}
+
+interface SolidPaint {
+  readonly type: "SOLID"
+  readonly color: RGB
+
+  readonly visible?: boolean
+  readonly opacity?: number
+  readonly blendMode?: BlendMode
+}
+
+interface GradientPaint {
+  readonly type: "GRADIENT_LINEAR" | "GRADIENT_RADIAL" | "GRADIENT_ANGULAR" | "GRADIENT_DIAMOND"
+  readonly gradientTransform: Transform
+  readonly gradientStops: ReadonlyArray<ColorStop>
+
+  readonly visible?: boolean
+  readonly opacity?: number
+  readonly blendMode?: BlendMode
+}
+
+interface ImagePaint {
+  readonly type: "IMAGE"
+  readonly scaleMode: "FILL" | "FIT" | "CROP" | "TILE"
+  readonly imageHash: string | null
+  readonly imageTransform?: Transform // setting for "CROP"
+  readonly scalingFactor?: number // setting for "TILE"
+  readonly filters?: ImageFilters
+
+  readonly visible?: boolean
+  readonly opacity?: number
+  readonly blendMode?: BlendMode
+}
+
+type Paint = SolidPaint | GradientPaint | ImagePaint
+
+interface Guide {
+  readonly axis: "X" | "Y"
+  readonly offset: number
+}
+
+interface RowsColsLayoutGrid {
+  readonly pattern: "ROWS" | "COLUMNS"
+  readonly alignment: "MIN" | "MAX" | "STRETCH" | "CENTER"
+  readonly gutterSize: number
+
+  readonly count: number        // Infinity when "Auto" is set in the UI
+  readonly sectionSize?: number // Not set for alignment: "STRETCH"
+  readonly offset?: number      // Not set for alignment: "CENTER"
+
+  readonly visible?: boolean
+  readonly color?: RGBA
+}
+
+interface GridLayoutGrid {
+  readonly pattern: "GRID"
+  readonly sectionSize: number
+
+  readonly visible?: boolean
+  readonly color?: RGBA
+}
+
+type LayoutGrid = RowsColsLayoutGrid | GridLayoutGrid
+
+interface ExportSettingsConstraints {
+  type: "SCALE" | "WIDTH" | "HEIGHT"
+  value: number
+}
+
+interface ExportSettingsImage {
+  format: "JPG" | "PNG"
+  contentsOnly?: boolean    // defaults to true
+  suffix?: string
+  constraint?: ExportSettingsConstraints
+}
+
+interface ExportSettingsSVG {
+  format: "SVG"
+  contentsOnly?: boolean    // defaults to true
+  suffix?: string
+  svgOutlineText?: boolean  // defaults to true
+  svgIdAttribute?: boolean  // defaults to false
+  svgSimplifyStroke?: boolean // defaults to true
+}
+
+interface ExportSettingsPDF {
+  format: "PDF"
+  contentsOnly?: boolean    // defaults to true
+  suffix?: string
+}
+
+type ExportSettings = ExportSettingsImage | ExportSettingsSVG | ExportSettingsPDF
+
+type WindingRule = "NONZERO" | "EVENODD"
+
+interface VectorVertex {
+  readonly x: number
+  readonly y: number
+  readonly strokeCap?: StrokeCap
+  readonly strokeJoin?: StrokeJoin
+  readonly cornerRadius?: number
+  readonly handleMirroring?: HandleMirroring
+}
+
+interface VectorSegment {
+  readonly start: number
+  readonly end: number
+  readonly tangentStart?: Vector  // Defaults to { x: 0, y: 0 }
+  readonly tangentEnd?: Vector  // Defaults to { x: 0, y: 0 }
+}
+
+interface VectorRegion {
+  readonly windingRule: WindingRule
+  readonly loops: ReadonlyArray<ReadonlyArray<number>>
+}
+
+interface VectorNetwork {
+  readonly vertices: ReadonlyArray<VectorVertex>
+  readonly segments: ReadonlyArray<VectorSegment>
+  readonly regions?: ReadonlyArray<VectorRegion> // Defaults to []
+}
+
+interface VectorPath {
+  readonly windingRule: WindingRule | "NONE"
+  readonly data: string
+}
+
+type VectorPaths = ReadonlyArray<VectorPath>
+
+interface LetterSpacing {
+  readonly value: number
+  readonly unit: "PIXELS" | "PERCENT"
+}
+
+type LineHeight = {
+  readonly value: number
+  readonly unit: "PIXELS" | "PERCENT"
+} | {
+  readonly unit: "AUTO"
+}
+
+type BlendMode =
+  "PASS_THROUGH" |
+  "NORMAL" |
+  "DARKEN" |
+  "MULTIPLY" |
+  "LINEAR_BURN" |
+  "COLOR_BURN" |
+  "LIGHTEN" |
+  "SCREEN" |
+  "LINEAR_DODGE" |
+  "COLOR_DODGE" |
+  "OVERLAY" |
+  "SOFT_LIGHT" |
+  "HARD_LIGHT" |
+  "DIFFERENCE" |
+  "EXCLUSION" |
+  "HUE" |
+  "SATURATION" |
+  "COLOR" |
+  "LUMINOSITY"
+
+interface Font {
+  fontName: FontName
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// Mixins
+
+interface BaseNodeMixin {
+  readonly id: string
+  readonly parent: (BaseNode & ChildrenMixin) | null
+  name: string // Note: setting this also sets \`autoRename\` to false on TextNodes
+  readonly removed: boolean
+  toString(): string
+  remove(): void
+
+  getPluginData(key: string): string
+  setPluginData(key: string, value: string): void
+
+  // Namespace is a string that must be at least 3 alphanumeric characters, and should
+  // be a name related to your plugin. Other plugins will be able to read this data.
+  getSharedPluginData(namespace: string, key: string): string
+  setSharedPluginData(namespace: string, key: string, value: string): void
+}
+
+interface SceneNodeMixin {
+  visible: boolean
+  locked: boolean
+}
+
+interface ChildrenMixin {
+  readonly children: ReadonlyArray<SceneNode>
+
+  appendChild(child: SceneNode): void
+  insertChild(index: number, child: SceneNode): void
+
+  findAll(callback?: (node: SceneNode) => boolean): SceneNode[]
+  findOne(callback: (node: SceneNode) => boolean): SceneNode | null
+}
+
+interface ConstraintMixin {
+  constraints: Constraints
+}
+
+interface LayoutMixin {
+  readonly absoluteTransform: Transform
+  relativeTransform: Transform
+  x: number
+  y: number
+  rotation: number // In degrees
+
+  readonly width: number
+  readonly height: number
+
+  resize(width: number, height: number): void
+  resizeWithoutConstraints(width: number, height: number): void
+}
+
+interface BlendMixin {
+  opacity: number
+  blendMode: BlendMode
+  isMask: boolean
+  effects: ReadonlyArray<Effect>
+  effectStyleId: string
+}
+
+interface FrameMixin {
+  backgrounds: ReadonlyArray<Paint>
+  layoutGrids: ReadonlyArray<LayoutGrid>
+  clipsContent: boolean
+  guides: ReadonlyArray<Guide>
+  gridStyleId: string
+  backgroundStyleId: string
+}
+
+type StrokeCap = "NONE" | "ROUND" | "SQUARE" | "ARROW_LINES" | "ARROW_EQUILATERAL"
+type StrokeJoin = "MITER" | "BEVEL" | "ROUND"
+type HandleMirroring = "NONE" | "ANGLE" | "ANGLE_AND_LENGTH"
+
+interface GeometryMixin {
+  fills: ReadonlyArray<Paint> | symbol
+  strokes: ReadonlyArray<Paint>
+  strokeWeight: number
+  strokeAlign: "CENTER" | "INSIDE" | "OUTSIDE"
+  strokeCap: StrokeCap | symbol
+  strokeJoin: StrokeJoin | symbol
+  dashPattern: ReadonlyArray<number>
+  fillStyleId: string | symbol
+  strokeStyleId: string
+}
+
+interface CornerMixin {
+  cornerRadius: number | symbol
+  cornerSmoothing: number
+}
+
+interface ExportMixin {
+  exportSettings: ReadonlyArray<ExportSettings>
+  exportAsync(settings?: ExportSettings): Promise<Uint8Array> // Defaults to PNG format
+}
+
+interface DefaultShapeMixin extends
+  BaseNodeMixin, SceneNodeMixin,
+  BlendMixin, GeometryMixin, LayoutMixin, ExportMixin {
+}
+
+interface DefaultContainerMixin extends
+  BaseNodeMixin, SceneNodeMixin,
+  ChildrenMixin, FrameMixin,
+  BlendMixin, ConstraintMixin, LayoutMixin, ExportMixin {
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// Nodes
+
+interface DocumentNode extends BaseNodeMixin {
+  readonly type: "DOCUMENT"
+
+  readonly children: ReadonlyArray<PageNode>
+
+  appendChild(child: PageNode): void
+  insertChild(index: number, child: PageNode): void
+
+  findAll(callback?: (node: (PageNode | SceneNode)) => boolean): Array<PageNode | SceneNode>
+  findOne(callback: (node: (PageNode | SceneNode)) => boolean): PageNode | SceneNode | null
+}
+
+interface PageNode extends BaseNodeMixin, ChildrenMixin, ExportMixin {
+  readonly type: "PAGE"
+  clone(): PageNode
+
+  guides: ReadonlyArray<Guide>
+  selection: ReadonlyArray<SceneNode>
+
+  backgrounds: ReadonlyArray<Paint>
+}
+
+interface FrameNode extends DefaultContainerMixin {
+  readonly type: "FRAME" | "GROUP"
+  clone(): FrameNode
+}
+
+interface SliceNode extends BaseNodeMixin, SceneNodeMixin, LayoutMixin, ExportMixin {
+  readonly type: "SLICE"
+  clone(): SliceNode
+}
+
+interface RectangleNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin {
+  readonly type: "RECTANGLE"
+  clone(): RectangleNode
+  topLeftRadius: number
+  topRightRadius: number
+  bottomLeftRadius: number
+  bottomRightRadius: number
+}
+
+interface LineNode extends DefaultShapeMixin, ConstraintMixin {
+  readonly type: "LINE"
+  clone(): LineNode
+}
+
+interface EllipseNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin {
+  readonly type: "ELLIPSE"
+  clone(): EllipseNode
+  arcData: ArcData
+}
+
+interface PolygonNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin {
+  readonly type: "POLYGON"
+  clone(): PolygonNode
+  pointCount: number
+}
+
+interface StarNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin {
+  readonly type: "STAR"
+  clone(): StarNode
+  pointCount: number
+  innerRadius: number
+}
+
+interface VectorNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin {
+  readonly type: "VECTOR"
+  clone(): VectorNode
+  vectorNetwork: VectorNetwork
+  vectorPaths: VectorPaths
+  handleMirroring: HandleMirroring | symbol
+}
+
+interface TextNode extends DefaultShapeMixin, ConstraintMixin {
+  readonly type: "TEXT"
+  clone(): TextNode
+  characters: string
+  readonly hasMissingFont: boolean
+  textAlignHorizontal: "LEFT" | "CENTER" | "RIGHT" | "JUSTIFIED"
+  textAlignVertical: "TOP" | "CENTER" | "BOTTOM"
+  textAutoResize: "NONE" | "WIDTH_AND_HEIGHT" | "HEIGHT"
+  paragraphIndent: number
+  paragraphSpacing: number
+  autoRename: boolean
+
+  textStyleId: string | symbol
+  fontSize: number | symbol
+  fontName: FontName | symbol
+  textCase: TextCase | symbol
+  textDecoration: TextDecoration | symbol
+  letterSpacing: LetterSpacing | symbol
+  lineHeight: LineHeight | symbol
+
+  getRangeFontSize(start: number, end: number): number | symbol
+  setRangeFontSize(start: number, end: number, value: number): void
+  getRangeFontName(start: number, end: number): FontName | symbol
+  setRangeFontName(start: number, end: number, value: FontName): void
+  getRangeTextCase(start: number, end: number): TextCase | symbol
+  setRangeTextCase(start: number, end: number, value: TextCase): void
+  getRangeTextDecoration(start: number, end: number): TextDecoration | symbol
+  setRangeTextDecoration(start: number, end: number, value: TextDecoration): void
+  getRangeLetterSpacing(start: number, end: number): LetterSpacing | symbol
+  setRangeLetterSpacing(start: number, end: number, value: LetterSpacing): void
+  getRangeLineHeight(start: number, end: number): LineHeight | symbol
+  setRangeLineHeight(start: number, end: number, value: LineHeight): void
+  getRangeFills(start: number, end: number): Paint[] | symbol
+  setRangeFills(start: number, end: number, value: Paint[]): void
+  getRangeTextStyleId(start: number, end: number): string | symbol
+  setRangeTextStyleId(start: number, end: number, value: string): void
+  getRangeFillStyleId(start: number, end: number): string | symbol
+  setRangeFillStyleId(start: number, end: number, value: string): void
+}
+
+interface ComponentNode extends DefaultContainerMixin {
+  readonly type: "COMPONENT"
+  clone(): ComponentNode
+
+  createInstance(): InstanceNode
+  description: string
+  readonly remote: boolean
+  readonly key: string // The key to use with "importComponentByKeyAsync"
+}
+
+interface InstanceNode extends DefaultContainerMixin  {
+  readonly type: "INSTANCE"
+  clone(): InstanceNode
+  masterComponent: ComponentNode
+}
+
+interface BooleanOperationNode extends DefaultShapeMixin, ChildrenMixin, CornerMixin {
+  readonly type: "BOOLEAN_OPERATION"
+  clone(): BooleanOperationNode
+  booleanOperation: "UNION" | "INTERSECT" | "SUBTRACT" | "EXCLUDE"
+}
+
+type BaseNode =
+  DocumentNode |
+  PageNode |
+  SceneNode
+
+type SceneNode =
+  SliceNode |
+  FrameNode |
+  ComponentNode |
+  InstanceNode |
+  BooleanOperationNode |
+  VectorNode |
+  StarNode |
+  LineNode |
+  EllipseNode |
+  PolygonNode |
+  RectangleNode |
+  TextNode
+
+type NodeType =
+  "DOCUMENT" |
+  "PAGE" |
+  "SLICE" |
+  "FRAME" |
+  "GROUP" |
+  "COMPONENT" |
+  "INSTANCE" |
+  "BOOLEAN_OPERATION" |
+  "VECTOR" |
+  "STAR" |
+  "LINE" |
+  "ELLIPSE" |
+  "POLYGON" |
+  "RECTANGLE" |
+  "TEXT"
+
+////////////////////////////////////////////////////////////////////////////////
+// Styles
+type StyleType = "PAINT" | "TEXT" | "EFFECT" | "GRID"
+
+interface BaseStyle {
+  readonly id: string
+  readonly type: StyleType
+  name: string
+  description: string
+  remote: boolean
+  readonly key: string // The key to use with "importStyleByKeyAsync"
+  remove(): void
+}
+
+interface PaintStyle extends BaseStyle {
+  type: "PAINT"
+  paints: ReadonlyArray<Paint>
+}
+
+interface TextStyle extends BaseStyle {
+  type: "TEXT"
+  fontSize: number
+  textDecoration: TextDecoration
+  fontName: FontName
+  letterSpacing: LetterSpacing
+  lineHeight: LineHeight
+  paragraphIndent: number
+  paragraphSpacing: number
+  textCase: TextCase
+}
+
+interface EffectStyle extends BaseStyle {
+  type: "EFFECT"
+  effects: ReadonlyArray<Effect>
+}
+
+interface GridStyle extends BaseStyle {
+  type: "GRID"
+  layoutGrids: ReadonlyArray<LayoutGrid>
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// Other
+
+interface Image {
+  readonly hash: string
+  getBytesAsync(): Promise<Uint8Array>
+}
\ No newline at end of file

manifest.json

+{
+  "name": "icon-automation",
+  "id": "739395588962138807",
+  "api": "1.0.0",
+  "main": "dist/code.js",
+  "ui": "dist/ui.html"
+}
\ No newline at end of file

package.json

+{
+  "name": "icon-automation",
+  "version": "1.0.0",
+  "description": "A figma plugin to push icon svg code to Github automatically.",
+  "main": "index.js",
+  "author": "Jun",
+  "license": "MIT",
+  "scripts": {
+    "dev": "npx webpack --mode=development --watch",
+    "build": "npx webpack --mode=production"
+  },
+  "dependencies": {
+    "css-loader": "^3.2.0",
+    "html-webpack-inline-source-plugin": "^0.0.10",
+    "html-webpack-plugin": "^3.2.0",
+    "parse-github-url": "^1.0.2",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "style-loader": "^1.0.0",
+    "ts-loader": "^6.0.4",
+    "typescript": "^3.5.3",
+    "url-loader": "^2.1.0",
+    "webpack": "^4.39.1",
+    "webpack-cli": "^3.3.6"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.8.5"
+  }
+}

src/code.ts

+figma.showUI(__html__, { width: 320, height: 320 })
+
+// get github settings
+function getGithubSettings () {
+  return figma.clientStorage.getAsync('githubData')
+}
+
+// set github settings
+function setGithubSettings (data) {
+  figma.clientStorage.setAsync('githubData', data)
+}
+
+// send github data to UI
+function init () {
+  getGithubSettings()
+    .then(githubData => {
+      figma.ui.postMessage({ type: 'githubDataGot', githubData })
+    })
+}
+
+figma.ui.onmessage = msg => {
+  switch (msg.type) {
+    case 'setGithubData':
+      setGithubSettings(msg.githubData)
+      break
+    case 'cancel':
+      figma.closePlugin()
+      break
+  }
+}
+
+init()

src/components/Settings.tsx

+import * as React from 'react'
+import { validateGithubURL } from '../../utils/helper'
+
+declare function require(path: string): any
+
+export interface Props {
+  onGithubSet?: (data) => void;
+  githubData: {owner?: string, name?: string, githubToken?: string};
+  visible: boolean;
+  settingSwitch: boolean;
+}
+
+export default class Settings extends React.Component<Props> {
+  state = {
+    githubRepo: '',
+    githubToken: '',
+    warning: ''
+  }
+  handleChange = e => {
+    this.setState({[e.target.name]: e.target.value})
+  }
+  handleSubmit = e => {
+    const { onGithubSet } = this.props
+    const { githubRepo, githubToken } = this.state
+    const repo = validateGithubURL(githubRepo)
+    if (!repo) {
+      this.setState({warning: 'Github Repository is required.'})
+    } else if (!repo.owner || !repo.name) {
+      this.setState({warning: 'Github Repository URL is invalid.'})
+    } else if (!githubToken) {
+      this.setState({warning: 'Github Token is required.'})
+    } else {
+      const githubData = {
+        owner:repo.owner,
+        name: repo.name,
+        githubToken: `${githubToken}`
+      }
+      parent.postMessage({ pluginMessage: { type: 'setGithubData', githubData } }, '*')
+      onGithubSet(githubData)
+    }
+  }
+  componentDidUpdate (prevPorps) {
+    const { githubData, settingSwitch } = this.props
+    if ((!prevPorps.githubData && githubData) || (prevPorps.settingSwitch !== settingSwitch)) {
+      this.setState({
+        githubRepo: `https://github.com/${githubData.owner}/${githubData.name}`,
+        githubToken: githubData.githubToken,
+      })
+    }
+  }
+  render () {
+    const { visible } = this.props
+    const { githubRepo, githubToken, warning } = this.state
+    return (
+      <div className={!visible ? 'hide' : ''}>
+        <div className="onboarding-tip">
+          <div className="onboarding-tip__icon">
+            <div className="icon icon--smiley"></div>
+          </div>
+          <div className="onboarding-tip__msg">Hi, Welcome here. This plugin helps you convert icons to react component and publish to NPM. It should be used with Github and NPM. Please read the docs before using.<br/><br/><a href="https://github.com/leadream/figma-icon-automation" target="_blank">Docs here</a></div>
+        </div>
+        {
+          warning &&
+          <div className="form-item">
+            <div className="type type--pos-medium-normal alert alert-warning">{ warning }</div>
+          </div>
+        }
+        <div className="form-item">
+          <input
+            name="githubRepo"
+            className="input"
+            placeholder="Github Repository URL"
+            onChange={this.handleChange}
+            value={githubRepo}
+          />
+        </div>
+        <div className="form-item">
+          <input
+            name="githubToken"
+            className="input"
+            placeholder="Github Token"
+            onChange={this.handleChange}
+            value={githubToken}
+          />
+        </div>
+        <div className="form-item">
+          <button className='button button--primary button-block' onClick={this.handleSubmit}>Go</button>
+        </div>
+        <div className="setting-footer form-item type type--pos-medium-normal">
+          developed by <a href="https://github.com/leadream" target="_blank">Jun</a>
+        </div>
+      </div>
+    )
+  }
+}

src/components/Updator.tsx

+import * as React from 'react'
+import { getContent, getCommit, updatePackage, createPullRequest, createBranch } from '../../api/github'
+import { versionValue } from '../../utils/helper'
+
+
+declare function require(path: string): any
+
+export interface Props {
+  onSucceed: () => void;
+  githubData: {owner?: string, name?: string, githubToken?: string};
+  visible: boolean;
+}
+
+export default class Settings extends React.Component<Props> {
+  state = {
+    isPushing: false,
+    version: '',
+    message: '',
+    versionTip: '',
+    messageTip: '',
+    sha: '',
+    contents: { version: '0.0.0' },
+    currentVersion: '',
+    currentVersionTip: '',
+    resultTip: '',
+    prUrl: ''
+  }
+  getVersion = async (githubData) => {
+    const { contents, sha } = await getContent('package.json', githubData)
+    const currentVersion = contents.version
+    this.setState({
+      sha,
+      contents,
+      currentVersion,
+      currentVersionTip: `The current version is ${currentVersion}`
+    })
+  }
+  createBranch = async () => {
+    const { githubData } = this.props
+    const { sha } = await getCommit(githubData)
+    const { ref } = await createBranch(sha, githubData)
+    return { branchName: ref.replace('refs/heads/', '') }
+  }
+  changeVersion = async (branch) => {
+    const { githubData } = this.props
+    const { version, message, contents, sha } = this.state
+    contents.version = version
+    await updatePackage(message, sha, contents, branch, githubData)
+  }
+  createCommitAndPR = async (branchName) => {
+    const { githubData } = this.props
+    const { version, message } = this.state
+    return await createPullRequest(
+      `[figma]:update to ${version}`,
+      message,
+      branchName,
+      githubData
+    )
+  }
+  handleChange = e => {
+    const { name, value } = e.target
+    this.setState({[name]: value})
+  }
+  validate = (callback) => {
+    const { version, message, currentVersion } = this.state
+    // TODO: should validate async
+    // this.getVersion(this.props.githubData)
+    //   .then(() => {
+    //     const { currentVersion } = this.state
+    //     currentVersion
+    //   })
+    if (!version) {
+      this.setState({versionTip: 'Version is required.'})
+      return
+    } else if (!/^[0-9]\d?(\.(0|[1-9]\d?)){2}$/.test(version)) {
+      this.setState({versionTip: 'Version should be like 1.17.2.'})
+      return
+    } else if (versionValue(version) - versionValue(currentVersion) <= 0) {
+      this.setState({versionTip: 'Should be bigger than current version.'})
+      return
+    }
+    this.setState({
+      versionTip: ''
+    })
+    if (!message) {
+      this.setState({messageTip: 'Commit message is required.'})
+      return
+    }
+    this.setState({
+      messageTip: ''
+    })
+    callback && callback()
+  }
+  handleSubmit = () => {
+    this.validate(() => {
+      this.setState({isPushing: true})
+      this.createBranch()
+        .then(({branchName}) => {
+          this.changeVersion(branchName)
+            .then(() => {
+              this.createCommitAndPR(branchName)
+                .then(({html_url}) => {
+                  this.props.onSucceed()
+                  this.setState({
+                    version: '',
+                    message: '',
+                    isPushing: false,
+                    resultTip: 'Pushing successfully! You can now go to Github and merge this PR. Then your icons will be published to NPM automatically.',
+                    prUrl: html_url
+                  })
+                })
+            })
+        })
+    })
+  }
+  onCancel = () => {
+    parent.postMessage({ pluginMessage: { type: 'cancel' } }, '*')
+  }
+  componentDidUpdate (prevProps) {
+    if (!prevProps.githubData && this.props.githubData) {
+      this.getVersion(this.props.githubData)
+    }
+  }
+  render () {
+    const { visible } = this.props
+    const { isPushing, version, message, versionTip, messageTip, currentVersionTip, resultTip, prUrl } = this.state
+    return (
+      <div className={'updator ' + (!visible ? 'hide' : '')}>
+        <div className="form-item">
+          {
+            !resultTip &&
+            <p className="type type--pos-medium-normal">Please fill the version and commit message below.</p>
+          }
+          {
+            (currentVersionTip && !resultTip) &&
+            <div className="type type--pos-medium-bold">{currentVersionTip}</div>
+          }
+          {
+            resultTip &&
+            <div className="type type--pos-medium-bold alert alert-success">
+              <h3>Congratulations!</h3>
+              {resultTip}
+              Click <a href={prUrl} target="_blank">here</a> to open the PR link.
+            </div>
+          }
+        </div>
+        <div className={'form-item '+(resultTip ? 'hide' : '')}>
+          <input
+            name="version"
+            className="input"
+            placeholder="The new version, such as 1.17.2"
+            onChange={this.handleChange}
+            value={version}
+          />
+          {
+            versionTip &&
+            <div className="type type--pos-medium-normal help-tip">{versionTip}</div>
+          }
+        </div>
+        <div className={'form-item '+(resultTip ? 'hide' : '')}>
+          <textarea
+            rows={2}
+            name="message"
+            className="textarea"
+            placeholder="what has been changed?"
+            onChange={this.handleChange}
+            value={message}
+          />
+          {
+            messageTip &&
+            <div className="type type--pos-medium-normal help-tip">{messageTip}</div>
+          }
+        </div>
+        <div className={'form-item '+(resultTip ? 'hide' : '')}>
+          <button
+            onClick={this.handleSubmit}
+            className='button button--primary'
+            style={{marginRight: '8px'}}
+            disabled={isPushing}
+          >{isPushing ? 'pushing…' : 'push to Github'}</button>
+          {
+            !isPushing &&
+            <button onClick={this.onCancel} className='button button--secondary'>close</button>
+          }
+        </div>
+        {
+          resultTip &&
+          <button onClick={this.onCancel} className='button button--secondary'>close</button>
+        }
+      </div>
+    )
+  }
+}
\ No newline at end of file

src/style.css

+/* these styles are just used for presentation of components */  
+body {
+  margin: 20px;
+  font-size: 20px;
+  font-family: Arial,x-locale-body,sans-serif;
+}
+
+h1, h2, h3 {
+  box-sizing: border-box;
+  margin-top: 12px;
+  margin-bottom: 12px;
+  font-family: sans-serif;
+}
+
+h1 {
+  font-size: 24px;
+}
+
+h2 {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+h3 {
+  font-size: 14px;
+  font-weight: normal;
+}
+
+hr {
+  margin: 48px 0 48px 0;
+  border-top: 1px solid #cccccc;
+  border-bottom: none;
+  outline: none;
+}
+
+ul{
+  margin: 0;
+  padding-left: 16px;
+}
+
+textarea{
+  width: 100%!important;
+  margin: 0!important;
+}
+
+a{
+  color: #18a0fb
+}
+
+.container{
+  padding-top: 20px;
+}
+
+.bar-adjust{
+  display: flex;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 32px;
+  border-bottom: 1px solid #F3F3F3;
+  background: #FFF;
+}
+
+.adjust-item{
+  padding: 2px 10px;
+  line-height: 30px;
+  cursor: pointer;
+  color: #999;
+  border-bottom: 1px solid transparent;
+}
+.adjust-item.active{
+  color: #333;
+  border-color: #333;
+}
+
+.setting-footer{
+  padding: 10px 0;
+  text-align: center;
+  color: #999;
+}
+
+.form-item{
+  margin-bottom: 8px;
+}
+
+.form-item textarea{
+  margin-bottom: 8px!important;
+}
+
+.form-item .help-tip{
+  padding: 5px;
+  color: #e85007;
+}
+
+.form-item button:not(.button-block){
+  margin-right: 8px!important;
+}
+
+.button-block {
+  width: 100%;
+}
+
+.alert{
+  padding: 5px 10px;
+  border-radius: 2px;
+  color: #666;
+  background-color: #F8F8F8;
+  border: 1px solid #CCC;
+}
+
+.alert-warning {
+  color: #F90;
+  background-color: rgba(255, 153, 0, 0.05);
+  border: 1px solid rgba(255, 153, 0, 0.24);
+}
+
+.alert-success {
+  color: #09cf83;
+  background-color: #d8f9ec;
+  border: 1px solid rgb(197, 245, 226);
+}
+
+.hide {
+  display: none;
+}

src/ui.html

+<div id="react-page"></div>

src/ui.tsx

+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+import Settings from './components/Settings'
+import Updator from './components/Updator'
+import '../assets/ds.css'
+import './style.css'
+
+declare function require(path: string): any
+
+class App extends React.Component {
+  state = {
+    updatorVisible: false,
+    githubData: null,
+    settingSwitch: false,
+    isDone: false
+  }
+  onSucceed = () => {
+    this.setState({ isDone: true })
+  }
+  toggleView = (githubData?) => {
+    const { updatorVisible } = this.state
+    this.setState({updatorVisible: !updatorVisible})
+    if (githubData===true) {
+      const { settingSwitch } = this.state
+      this.setState({settingSwitch: !settingSwitch})
+    } else if (githubData) {
+      this.setState({
+        githubData: githubData
+      })
+    }
+  }
+  componentDidMount () {
+    // 所有的消息接收集中在这里
+    window.onmessage = async (event) => {
+      const msg = event.data.pluginMessage
+      switch (msg.type) {
+        case 'githubDataGot':
+          if (msg.githubData) {
+            this.setState({
+              updatorVisible: true,
+              githubData: msg.githubData
+            })
+          }
+          break
+      }
+    }
+  }
+  render() {
+    const { updatorVisible, githubData, settingSwitch, isDone } = this.state
+    return (
+      <div className="container">
+        <div className={'bar-adjust '+ ((githubData&&!isDone) ? '' : 'hide')}>
+          <div
+            className={'adjust-item type type--pos-medium-bold '+(updatorVisible ? '' : 'active')}
+            onClick={e => this.toggleView()}
+          >
+            Setting
+          </div>
+          <div
+            className={'adjust-item type type--pos-medium-bold '+(updatorVisible ? 'active' : '')}
+            onClick={e => this.toggleView(true)}
+          >
+            Publish
+          </div>
+        </div>
+        <Settings
+          visible={!updatorVisible}
+          githubData={githubData}
+          onGithubSet={this.toggleView}
+          settingSwitch={settingSwitch}
+        />
+        <Updator
+          onSucceed={this.onSucceed}
+          visible={updatorVisible}
+          githubData={githubData}/>
+      </div>
+    )
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById('react-page'))

tsconfig.json

+{
+  "compilerOptions": {
+    "target": "es6",
+    "jsx": "react"
+  }
+}

utils/helper.js

+import gh from 'parse-github-url'
+
+export const Uint8ArrayToString = fileData => {
+  var dataString = "";
+  for (var i = 0; i < fileData.length; i++) {
+    dataString += String.fromCharCode(fileData[i]);
+  }
+  return dataString
+}
+
+export const formattedSelections = selections => {
+  const iconsPromise = selections
+    .map(async c => {
+      let svgCode = await c.exportAsync({format: 'SVG'})
+      svgCode = Uint8ArrayToString(svgCode)
+      return {id: c.id, name: c.name, code: svgCode}
+    })
+  return Promise.all(iconsPromise)
+}
+
+export const validateGithubURL = url => {
+  return gh(url)
+}
+
+export const versionValue = (versions) => {
+  return versions
+    .split('.')
+    .map(n => n - 0)
+    .reduce((accumulator, currentValue, index) => {
+      return accumulator + currentValue*Math.pow(100, 2 - index)
+    }, 0)
+}

webpack.config.js

+const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const path = require('path')
+
+module.exports = (env, argv) => ({
+  mode: argv.mode === 'production' ? 'production' : 'development',
+
+  // This is necessary because Figma's 'eval' works differently than normal eval
+  devtool: argv.mode === 'production' ? false : 'inline-source-map',
+
+  entry: {
+    ui: './src/ui.tsx', // The entry point for your UI code
+    code: './src/code.ts', // The entry point for your plugin code
+  },
+
+  module: {
+    rules: [
+      // Converts TypeScript code to JavaScript
+      { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },
+
+      // Enables including CSS by doing "import './file.css'" in your TypeScript code
+      { test: /\.css$/, loader: [{ loader: 'style-loader' }, { loader: 'css-loader' }] },
+
+      // Allows you to use "<%= require('./file.svg') %>" in your HTML code to get a data URI
+      { test: /\.(png|jpg|gif|webp|svg)$/, loader: [{ loader: 'url-loader' }] },
+    ],
+  },
+
+  // Webpack tries these extensions for you if you omit the extension like "import './file'"
+  resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'] },
+
+  output: {
+    filename: '[name].js',
+    path: path.resolve(__dirname, 'dist'), // Compile into a folder called "dist"
+  },
+
+  // Tells Webpack to generate "ui.html" and to inline "ui.ts" into it
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './src/ui.html',
+      filename: 'ui.html',
+      inlineSource: '.(js)$',
+      chunks: ['ui'],
+    }),
+    new HtmlWebpackInlineSourcePlugin(),
+  ],
+})