feat: june so

figma-plugin/common/constants.ts

@@ -1,4 +1,6 @@
 export const ACTION = {
+  GET_USER_INFO: "get-user-info",
+
   GET_GITHUB_REPO_URL: "get-github-repo-url",
   GET_GITHUB_API_KEY: "get-github-api-key",
   GET_ICON_PREVIEW: "get-icon-preview",

figma-plugin/common/types.ts

@@ -24,4 +24,11 @@ export type Messages =
   | { type: `${typeof ACTION.SET_GITHUB_API_KEY}`; payload: string }
   | { type: `${typeof ACTION.SET_GITHUB_REPO_URL}`; payload: string }
   | { type: `${typeof ACTION.DEPLOY_ICON}`; payload: IconaMetaData }
-  | { type: `${typeof ACTION.DEPLOY_ICON_STATUS}`; payload: Status };
+  | { type: `${typeof ACTION.DEPLOY_ICON_STATUS}`; payload: Status }
+  | {
+      type: `${typeof ACTION.GET_USER_INFO}`;
+      payload: {
+        id: string;
+        name: string;
+      };
+    };

figma-plugin/manifest.json

@@ -6,7 +6,12 @@
   "ui": "dist/index.html",
   "editorType": ["figma", "dev"],
   "capabilities": ["inspect"],
+  "permissions": ["currentuser"],
   "networkAccess": {
-    "allowedDomains": ["https://www.figma.com", "https://api.github.com"]
+    "allowedDomains": [
+      "https://www.figma.com",
+      "https://api.github.com",
+      "https://api.june.so"
+    ]
   }
 }

figma-plugin/package.json

@@ -4,10 +4,10 @@
   "scripts": {
     "build": "yarn build:ui && yarn build:plugin -- --minify",
     "build:plugin": "node ./esbuild.plugin.js",
-    "build:plugin:watch": "WATCH=true node ./esbuild.plugin.js",
-    "build:ui": "yarn vite build --minify esbuild --emptyOutDir=false",
-    "build:ui:watch": "yarn vite build --watch --emptyOutDir=false",
-    "dev": "yarn build:watch",
+    "build:ui": "yarn vite build --mode prod --minify esbuild --emptyOutDir=false",
+    "dev": "yarn build:ui:watch && yarn build:plugin:watch",
+    "dev:plugin": "WATCH=true node ./esbuild.plugin.js",
+    "dev:ui": "yarn vite build --mode dev --watch --emptyOutDir=false",
     "tsc": "yarn tsc:plugin && yarn tsc:ui",
     "tsc:plugin": "tsc --noEmit -p plugin",
     "tsc:ui": "tsc --noEmit -p ui-src"
@@ -20,6 +20,7 @@
     "@vanilla-extract/recipes": "^0.4.0",
     "@vanilla-extract/vite-plugin": "^3.8.1",
     "@vitejs/plugin-react-refresh": "^1.3.6",
+    "axios": "^1.6.0",
     "framer-motion": "^10.12.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

figma-plugin/plugin-src/code.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-use-before-define */
-/* eslint-disable @typescript-eslint/no-shadow */
 import { ACTION, DATA, STATUS } from "../common/constants";
 import type { Messages } from "../common/types";
 import { createGithubClient } from "./github";
@@ -18,6 +16,18 @@ async function setLocalData(key: string, data: any) {
   await figma.clientStorage.setAsync(key, data);
 }
 
+function sendUserInfo() {
+  if (!figma.currentUser) return;
+
+  figma.ui.postMessage({
+    type: ACTION.GET_USER_INFO,
+    payload: {
+      id: figma.currentUser.id,
+      name: figma.currentUser.name,
+    },
+  });
+}
+
 // send github data to UI
 async function init() {
   const events = [
@@ -37,6 +47,8 @@ async function init() {
     });
   });
 
+  sendUserInfo();
+
   const iconaFrame = figma.currentPage.findOne((node) => {
     return node.name === DATA.ICON_FRAME_ID;
   });

figma-plugin/ui-src/.env.example

@@ -0,0 +1 @@
+VITE_JUNE_SO_WRITE_KEY=

figma-plugin/ui-src/contexts/AppContext.tsx

@@ -8,6 +8,10 @@ import { postMessage } from "../utils/figma";
 import { getGithubDataFromUrl } from "../utils/string";
 
 type State = {
+  // Info
+  userId?: string;
+  userName?: string;
+
   // Computed
   githubData: GithubData;
 
@@ -30,6 +34,13 @@ const AppDispatchContext = createContext<AppDispatch | null>(null);
 function reducer(state: State, action: Messages): State {
   switch (action.type) {
     /* GETTER */
+    case ACTION.GET_USER_INFO: {
+      return {
+        ...state,
+        userId: action.payload.id,
+        userName: action.payload.name,
+      };
+    }
     case ACTION.GET_GITHUB_API_KEY:
       return {
         ...state,
@@ -107,6 +118,10 @@ function reducer(state: State, action: Messages): State {
 
 export function AppProvider({ children }: { children: React.ReactNode }) {
   const [state, dispatch] = useReducer(reducer, {
+    // Info
+    userName: "",
+    userId: "",
+
     // Computed
     githubData: {
       owner: "",
@@ -130,6 +145,10 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
     window.onmessage = (event) => {
       const msg = event.data.pluginMessage as Messages;
       switch (msg.type) {
+        case ACTION.GET_USER_INFO: {
+          if (msg.payload) dispatch({ type: msg.type, payload: msg.payload });
+          return;
+        }
         case ACTION.GET_GITHUB_API_KEY:
           if (msg.payload) dispatch({ type: msg.type, payload: msg.payload });
           break;

figma-plugin/ui-src/hooks/useJune.ts

@@ -0,0 +1,58 @@
+interface UseJuneProps {
+  writeKey: string;
+  devMode?: boolean;
+}
+
+interface IdentifyProps {
+  userId?: string;
+  email?: string;
+  userName?: string;
+}
+
+const BASE_URL = "https://api.june.so/sdk";
+
+export function useJune({ writeKey }: UseJuneProps) {
+  if (!writeKey) {
+    throw new Error("[useJune] writeKey is required");
+  }
+
+  const headers = {
+    Authorization: `Basic ${writeKey}`,
+    "Content-Type": "application/json",
+  };
+
+  const track = async (event: string) => {
+    try {
+      await fetch(`${BASE_URL}/track`, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          event,
+        }),
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  /**
+   * 현재는 figma에서는 이메일을 받아올 수 있는 수단이 없음
+   */
+  const identify = async ({ userName }: IdentifyProps) => {
+    try {
+      await fetch(`${BASE_URL}/identify`, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          traits: {
+            username: userName,
+          },
+        }),
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return { track, identify };
+}

figma-plugin/ui-src/pages/App.tsx

@@ -1,11 +1,21 @@
 import { Box, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
 import * as React from "react";
 
+import { useAppState } from "../contexts/AppContext";
+import { useJune } from "../hooks/useJune";
 import * as styles from "./App.css";
 import Deploy from "./Deploy";
 import Setting from "./Setting";
 
 const App = () => {
+  const { userName } = useAppState();
+  const { track, identify } = useJune({
+    writeKey: import.meta.env.VITE_JUNE_SO_WRITE_KEY,
+  });
+
+  identify({ userName });
+  track("icona:plugin_open");
+
   return (
     <Box className={styles.container}>
       <Tabs>

figma-plugin/ui-src/vite-env.d.ts

@@ -1 +1,8 @@
 /// <reference types="vite/client" />
+interface ImportMetaEnv {
+  readonly VITE_JUNE_SO_WRITE_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

yarn.lock

@@ -3619,6 +3619,7 @@ __metadata:
     "@vanilla-extract/recipes": ^0.4.0
     "@vanilla-extract/vite-plugin": ^3.8.1
     "@vitejs/plugin-react-refresh": ^1.3.6
+    axios: ^1.6.0
     esbuild: ^0.17.19
     framer-motion: ^10.12.11
     react: ^18.2.0
@@ -4811,6 +4812,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"asynckit@npm:^0.4.0":
+  version: 0.4.0
+  resolution: "asynckit@npm:0.4.0"
+  checksum: 7b78c451df768adba04e2d02e63e2d0bf3b07adcd6e42b4cf665cb7ce899bedd344c69a1dcbce355b5f972d597b25aaa1c1742b52cffd9caccb22f348114f6be
+  languageName: node
+  linkType: hard
+
 "available-typed-arrays@npm:^1.0.5":
   version: 1.0.5
   resolution: "available-typed-arrays@npm:1.0.5"
@@ -4825,6 +4833,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"axios@npm:^1.6.0":
+  version: 1.6.0
+  resolution: "axios@npm:1.6.0"
+  dependencies:
+    follow-redirects: ^1.15.0
+    form-data: ^4.0.0
+    proxy-from-env: ^1.1.0
+  checksum: c7c9f2ae9e0b9bad7d6f9a4dff030930b12ee667dedf54c3c776714f91681feb743c509ac0796ae5c01e12c4ab4a2bee74905068dd200fbc1ab86f9814578fb0
+  languageName: node
+  linkType: hard
+
 "axobject-query@npm:^3.1.1":
   version: 3.2.1
   resolution: "axobject-query@npm:3.2.1"
@@ -5266,6 +5285,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"combined-stream@npm:^1.0.8":
+  version: 1.0.8
+  resolution: "combined-stream@npm:1.0.8"
+  dependencies:
+    delayed-stream: ~1.0.0
+  checksum: 49fa4aeb4916567e33ea81d088f6584749fc90c7abec76fd516bf1c5aa5c79f3584b5ba3de6b86d26ddd64bae5329c4c7479343250cfe71c75bb366eae53bb7c
+  languageName: node
+  linkType: hard
+
 "commander@npm:^7.2.0":
   version: 7.2.0
   resolution: "commander@npm:7.2.0"
@@ -5658,6 +5686,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"delayed-stream@npm:~1.0.0":
+  version: 1.0.0
+  resolution: "delayed-stream@npm:1.0.0"
+  checksum: 46fe6e83e2cb1d85ba50bd52803c68be9bd953282fa7096f51fc29edd5d67ff84ff753c51966061e5ba7cb5e47ef6d36a91924eddb7f3f3483b1c560f77a0020
+  languageName: node
+  linkType: hard
+
 "delegates@npm:^1.0.0":
   version: 1.0.0
   resolution: "delegates@npm:1.0.0"
@@ -6777,6 +6812,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"follow-redirects@npm:^1.15.0":
+  version: 1.15.3
+  resolution: "follow-redirects@npm:1.15.3"
+  peerDependenciesMeta:
+    debug:
+      optional: true
+  checksum: 584da22ec5420c837bd096559ebfb8fe69d82512d5585004e36a3b4a6ef6d5905780e0c74508c7b72f907d1fa2b7bd339e613859e9c304d0dc96af2027fd0231
+  languageName: node
+  linkType: hard
+
 "fontkit@npm:^1.8.1":
   version: 1.9.0
   resolution: "fontkit@npm:1.9.0"
@@ -6813,6 +6858,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"form-data@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "form-data@npm:4.0.0"
+  dependencies:
+    asynckit: ^0.4.0
+    combined-stream: ^1.0.8
+    mime-types: ^2.1.12
+  checksum: 01135bf8675f9d5c61ff18e2e2932f719ca4de964e3be90ef4c36aacfc7b9cb2fceb5eca0b7e0190e3383fe51c5b37f4cb80b62ca06a99aaabfcfd6ac7c9328c
+  languageName: node
+  linkType: hard
+
 "framer-motion@npm:^10.12.11":
   version: 10.12.16
   resolution: "framer-motion@npm:10.12.16"
@@ -8236,6 +8292,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mime-db@npm:1.52.0":
+  version: 1.52.0
+  resolution: "mime-db@npm:1.52.0"
+  checksum: 0d99a03585f8b39d68182803b12ac601d9c01abfa28ec56204fa330bc9f3d1c5e14beb049bafadb3dbdf646dfb94b87e24d4ec7b31b7279ef906a8ea9b6a513f
+  languageName: node
+  linkType: hard
+
+"mime-types@npm:^2.1.12":
+  version: 2.1.35
+  resolution: "mime-types@npm:2.1.35"
+  dependencies:
+    mime-db: 1.52.0
+  checksum: 89a5b7f1def9f3af5dad6496c5ed50191ae4331cc5389d7c521c8ad28d5fdad2d06fd81baf38fed813dc4e46bb55c8145bb0ff406330818c9cf712fb2e9b3836
+  languageName: node
+  linkType: hard
+
 "min-indent@npm:^1.0.0, min-indent@npm:^1.0.1":
   version: 1.0.1
   resolution: "min-indent@npm:1.0.1"
@@ -9080,6 +9152,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"proxy-from-env@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "proxy-from-env@npm:1.1.0"
+  checksum: ed7fcc2ba0a33404958e34d95d18638249a68c430e30fcb6c478497d72739ba64ce9810a24f53a7d921d0c065e5b78e3822759800698167256b04659366ca4d4
+  languageName: node
+  linkType: hard
+
 "ps-list@npm:^7.2.0":
   version: 7.2.0
   resolution: "ps-list@npm:7.2.0"