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())
+}

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(),
+ ],
+})