feat: status plugin

tonik · Mar 4, 2023 · 6dc4eac · 6dc4eac
1 parent 4914380
commit 6dc4eac
Show file tree

Hide file tree

Showing 4 changed files with 312 additions and 61 deletions.
diff --git a/packages/p3/code.js b/packages/p3/code.js
@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 const init = () => __awaiter(this, void 0, void 0, function* () {
-    figma.showUI(__uiFiles__.main, { width: 400, height: 400 });
+    figma.showUI(__uiFiles__.main, { width: 240, height: 332 });
 });
 const months = [
     'January',
@@ -25,6 +25,7 @@ const months = [
     'December',
 ];
 figma.ui.onmessage = ({ type, payload }) => {
+    console.log(type, payload);
     switch (type) {
         case 'change-status':
             changeStatus(payload);
@@ -75,7 +76,7 @@ const statusInfo = {
         },
         icon: '⏰',
     },
-    done: {
+    'development-ready': {
         colorSchemes: {
             light: {
                 color: {
@@ -136,3 +137,26 @@ const archive = () => {
     });
 };
 init();
+figma.on('run', ({ parameters }) => {
+    console.log('test');
+    if (parameters) {
+        startPluginWithParameters(parameters);
+    }
+});
+const slugify = (str) => str
+    .toLowerCase()
+    .replace(/[^\w ]+/g, '')
+    .replace(/ +/g, '-')
+    .replace(/[\u{1F600}-\u{1F64F}]/gu, '')
+    .replace(/^-/, '');
+function startPluginWithParameters(parameters) {
+    const { workStatus } = parameters;
+    changeStatus({
+        status: slugify(workStatus),
+        appearance: 'light',
+    });
+    figma.closePlugin();
+}
+figma.parameters.on('input', ({ query, result }) => {
+    result.setSuggestions(['🚧  In progress', '⏰  Awaiting feedback', '✅  Development ready'].filter((s) => s.includes(query)));
+});
diff --git a/packages/p3/code.ts b/packages/p3/code.ts
@@ -1,4 +1,4 @@
-type Status = 'in-progress' | 'awaiting-feedback' | 'done'
+type Status = 'in-progress' | 'awaiting-feedback' | 'development-ready'
 type Appearance = 'dark' | 'light'
 type StatusInfo = {
   icon: string
@@ -14,7 +14,7 @@ type ChangeStatusPayload = {
 }
 
 const init = async () => {
-  figma.showUI(__uiFiles__.main, { width: 400, height: 400 })
+  figma.showUI(__uiFiles__.main, { width: 240, height: 332 })
 }
 
 type MessageProps =
@@ -27,6 +27,10 @@ type MessageProps =
       payload: never
     }
 
+interface PluginParameters extends ParameterValues {
+  workStatus?: Status
+}
+
 const months = [
   'January',
   'February',
@@ -43,6 +47,7 @@ const months = [
 ]
 
 figma.ui.onmessage = ({ type, payload }: MessageProps) => {
+  console.log(type, payload)
   switch (type) {
     case 'change-status':
       changeStatus(payload)
@@ -96,7 +101,7 @@ const statusInfo: {
     },
     icon: '⏰',
   },
-  done: {
+  'development-ready': {
     colorSchemes: {
       light: {
         color: {
@@ -164,3 +169,34 @@ const archive = () => {
 }
 
 init()
+
+figma.on('run', ({ parameters }: RunEvent) => {
+  console.log('test')
+  if (parameters) {
+    startPluginWithParameters(parameters)
+  }
+})
+
+const slugify = (str: string) =>
+  str
+    .toLowerCase()
+    .replace(/[^\w ]+/g, '')
+    .replace(/ +/g, '-')
+    .replace(/[\u{1F600}-\u{1F64F}]/gu, '')
+    .replace(/^-/, '')
+
+function startPluginWithParameters(parameters: PluginParameters) {
+  const { workStatus } = parameters
+  changeStatus({
+    status: slugify(workStatus) as Status,
+    appearance: 'light',
+  })
+
+  figma.closePlugin()
+}
+
+figma.parameters.on('input', ({ query, result }) => {
+  result.setSuggestions(
+    ['🚧  In progress', '⏰  Awaiting feedback', '✅  Development ready'].filter((s) => s.includes(query))
+  )
+})
diff --git a/packages/p3/manifest.json b/packages/p3/manifest.json
@@ -1,9 +1,17 @@
 {
-  "name": "p3",
+  "name": "Status",
+  "id": "1213881116798748502",
   "api": "1.0.0",
   "main": "code.js",
   "editorType": ["figma", "figjam"],
   "ui": {
     "main": "ui.html"
-  }
-}
+  },
+  "parameters": [
+    {
+      "name": "Work status",
+      "key": "workStatus",
+      "description": "What is the work status?"
+    }
+  ]
+}