feat: p3

package.json

@@ -13,7 +13,7 @@
   "devDependencies": {
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
-    "@figma/plugin-typings": "^1.23.0",
+    "@figma/plugin-typings": "1.58.0",
     "@typescript-eslint/eslint-plugin": "^4.24.0",
     "@typescript-eslint/parser": "^4.24.0",
     "babel-eslint": "^10.1.0",

packages/p3/README.md

@@ -0,0 +1,40 @@
+Below are the steps to get your plugin running. You can also find instructions at:
+
+  https://www.figma.com/plugin-docs/setup/
+
+This plugin template uses Typescript and NPM, two standard tools in creating JavaScript applications.
+
+First, download Node.js which comes with NPM. This will allow you to install TypeScript and other
+libraries. You can find the download link here:
+
+  https://nodejs.org/en/download/
+
+Next, install TypeScript using the command:
+
+  npm install -g typescript
+
+Finally, in the directory of your plugin, get the latest type definitions for the plugin API by running:
+
+  npm install --save-dev @figma/plugin-typings
+
+If you are familiar with JavaScript, TypeScript will look very familiar. In fact, valid JavaScript code
+is already valid Typescript code.
+
+TypeScript adds type annotations to variables. This allows code editors such as Visual Studio Code
+to provide information about the Figma API while you are writing code, as well as help catch bugs
+you previously didn't notice.
+
+For more information, visit https://www.typescriptlang.org/
+
+Using TypeScript requires a compiler to convert TypeScript (code.ts) into JavaScript (code.js)
+for the browser to run.
+
+We recommend writing TypeScript code using Visual Studio code:
+
+1. Download Visual Studio Code if you haven't already: https://code.visualstudio.com/.
+2. Open this directory in Visual Studio Code.
+3. Compile TypeScript to JavaScript: Run the "Terminal > Run Build Task..." menu item,
+    then select "tsc: watch - tsconfig.json". You will have to do this again every time
+    you reopen Visual Studio Code.
+
+That's it! Visual Studio Code will regenerate the JavaScript file every time you save.

packages/p3/code.js

@@ -0,0 +1,119 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+const init = () => __awaiter(this, void 0, void 0, function* () {
+    figma.showUI(__uiFiles__.main, { width: 400, height: 400 });
+});
+figma.ui.onmessage = ({ type, payload }) => {
+    switch (type) {
+        case 'change-status':
+            changeStatus(payload);
+            break;
+        case 'archive':
+            archive();
+            break;
+        default:
+            break;
+    }
+};
+const statusInfo = {
+    'in-progress': {
+        colorSchemes: {
+            light: {
+                color: {
+                    b: 0.9529411792755127,
+                    g: 0.9529411792755127,
+                    r: 0.9529411792755127,
+                },
+            },
+            dark: {
+                color: {
+                    b: 0.24313725531101227,
+                    g: 0.24313725531101227,
+                    r: 0.24313725531101227,
+                },
+            },
+        },
+        icon: '🚧',
+    },
+    'awaiting-feedback': {
+        colorSchemes: {
+            light: {
+                color: {
+                    b: 0.8196078538894653,
+                    g: 0.9843137264251709,
+                    r: 1,
+                },
+            },
+            dark: {
+                color: {
+                    b: 0,
+                    g: 0.23529411852359772,
+                    r: 0.2862745225429535,
+                },
+            },
+        },
+        icon: '⏰',
+    },
+    done: {
+        colorSchemes: {
+            light: {
+                color: {
+                    r: 0.8745098114013672,
+                    g: 0.9529411792755127,
+                    b: 0.8745098114013672,
+                },
+            },
+            dark: {
+                color: {
+                    b: 0.15294118225574493,
+                    g: 0.2666666805744171,
+                    r: 0.11372549086809158,
+                },
+            },
+        },
+        icon: '✅',
+    },
+};
+const isSection = (node) => {
+    return node.type === 'SECTION';
+};
+const isFrame = (node) => {
+    return node.type === 'FRAME';
+};
+const changeStatus = ({ status, appearance }) => {
+    figma.currentPage.selection.forEach((el) => {
+        el.name = `${statusInfo[status].icon} ${el.name.replace(/^(🚧|⏰|✅) /, '')}`;
+        if (isSection(el) || isFrame(el)) {
+            el.fills = [{ type: 'SOLID', color: statusInfo[status].colorSchemes[appearance].color, opacity: 0.64 }];
+        }
+        else {
+            figma.notify('Please select a section or frame.');
+        }
+    });
+};
+const archive = () => {
+    var _a;
+    console.log('archive');
+    const archivePage = (_a = figma.root.findChild((node) => node.name === 'Archive')) !== null && _a !== void 0 ? _a : figma.createPage();
+    archivePage.name = 'Archive';
+    figma.currentPage.selection.forEach((el) => {
+        const yPositions = archivePage.children.map((child) => ({
+            y: child.y,
+            x: child.x,
+        }));
+        const minY = Math.min(...yPositions.map((pos) => pos.y));
+        const x = Math.min(...yPositions.filter((pos) => pos.y === minY).map((pos) => pos.x));
+        archivePage.appendChild(el);
+        el.name = `${el.name.replace(/^(🚧|⏰|✅) /, '')} | Archived on ${new Date().toLocaleDateString()}`;
+        el.y = minY - el.height - 400;
+        el.x = x;
+    });
+};
+init();

packages/p3/code.ts

@@ -0,0 +1,148 @@
+type Status = 'in-progress' | 'awaiting-feedback' | 'done'
+type Appearance = 'dark' | 'light'
+type StatusInfo = {
+  icon: string
+  colorSchemes: {
+    [key in Appearance]: {
+      color: RGB
+    }
+  }
+}
+type ChangeStatusPayload = {
+  status: Status
+  appearance: Appearance
+}
+
+const init = async () => {
+  figma.showUI(__uiFiles__.main, { width: 400, height: 400 })
+
+  // figma.currentPage.selection.forEach((el) => {
+  //   console.log(el.y)
+  // })
+}
+
+type MessageProps =
+  | {
+      type: 'change-status'
+      payload?: ChangeStatusPayload
+    }
+  | {
+      type: 'archive'
+      payload: never
+    }
+figma.ui.onmessage = ({ type, payload }: MessageProps) => {
+  switch (type) {
+    case 'change-status':
+      changeStatus(payload)
+      break
+    case 'archive':
+      archive()
+      break
+    default:
+      break
+  }
+}
+
+const statusInfo: {
+  [key in Status]: StatusInfo
+} = {
+  'in-progress': {
+    colorSchemes: {
+      light: {
+        color: {
+          b: 0.9529411792755127,
+          g: 0.9529411792755127,
+          r: 0.9529411792755127,
+        },
+      },
+      dark: {
+        color: {
+          b: 0.24313725531101227,
+          g: 0.24313725531101227,
+          r: 0.24313725531101227,
+        },
+      },
+    },
+    icon: '🚧',
+  },
+  'awaiting-feedback': {
+    colorSchemes: {
+      light: {
+        color: {
+          b: 0.8196078538894653,
+          g: 0.9843137264251709,
+          r: 1,
+        },
+      },
+      dark: {
+        color: {
+          b: 0,
+          g: 0.23529411852359772,
+          r: 0.2862745225429535,
+        },
+      },
+    },
+    icon: '⏰',
+  },
+  done: {
+    colorSchemes: {
+      light: {
+        color: {
+          r: 0.8745098114013672,
+          g: 0.9529411792755127,
+          b: 0.8745098114013672,
+        },
+      },
+      dark: {
+        color: {
+          b: 0.15294118225574493,
+          g: 0.2666666805744171,
+          r: 0.11372549086809158,
+        },
+      },
+    },
+    icon: '✅',
+  },
+}
+
+const isSection = (node: SceneNode): node is SectionNode => {
+  return node.type === 'SECTION'
+}
+
+const isFrame = (node: SceneNode): node is FrameNode => {
+  return node.type === 'FRAME'
+}
+
+const changeStatus = ({ status, appearance }: ChangeStatusPayload) => {
+  figma.currentPage.selection.forEach((el) => {
+    el.name = `${statusInfo[status].icon} ${el.name.replace(/^(🚧|⏰|✅) /, '')}`
+
+    if (isSection(el) || isFrame(el)) {
+      el.fills = [{ type: 'SOLID', color: statusInfo[status].colorSchemes[appearance].color, opacity: 0.64 }]
+    } else {
+      figma.notify('Please select a section or frame.')
+    }
+  })
+}
+
+const archive = () => {
+  console.log('archive')
+  const archivePage = figma.root.findChild((node) => node.name === 'Archive') ?? figma.createPage()
+  archivePage.name = 'Archive'
+
+  figma.currentPage.selection.forEach((el) => {
+    const yPositions = archivePage.children.map((child) => ({
+      y: child.y,
+      x: child.x,
+    }))
+    const minY = Math.min(...yPositions.map((pos) => pos.y))
+    const x = Math.min(...yPositions.filter((pos) => pos.y === minY).map((pos) => pos.x))
+
+    archivePage.appendChild(el)
+    el.name = `${el.name.replace(/^(🚧|⏰|✅) /, '')} | Archived on ${new Date().toLocaleDateString()}`
+    el.y = minY - el.height - 400
+    el.x = x
+  })
+}
+
+init()

packages/p3/manifest.json

@@ -0,0 +1,9 @@
+{
+  "name": "p3",
+  "api": "1.0.0",
+  "main": "code.js",
+  "editorType": ["figma", "figjam"],
+  "ui": {
+    "main": "ui.html"
+  }
+}

packages/p3/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@tonik-figma-plugins/p3",
+  "version": "0.0.1",
+  "main": "./code.ts",
+  "license": "MIT",
+  "scripts": {
+    "start": "tsc -p tsconfig.json -w",
+    "build": "tsc -p tsconfig.json"
+  }
+}

packages/p3/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": [
+    "."
+  ],
+  "exclude": ["../../node_modules"],
+  "compilerOptions": {
+    "target": "es6",
+    "lib": ["ESNext"],
+    "typeRoots": [
+      "./node_modules/@types",
+      "./node_modules/@figma",
+      "../../node_modules/@types",
+      "../../node_modules/@figma",
+    ]
+  }
+}