feat: JuneConext & track deploy

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

@@ -0,0 +1,98 @@
+import React from "react";
+
+interface JuneContextType {
+  identify: (props: IdentifyProps) => Promise<void>;
+  track: (props: TrackProps) => Promise<void>;
+}
+
+interface JuneProviderProps {
+  writeKey: string;
+  children: React.ReactNode;
+
+  disabled?: boolean;
+}
+
+interface TrackProps {
+  event: string;
+  timestamp?: Date;
+  userId?: string;
+  anonymousId?: string;
+  properties?: Record<string, unknown>;
+  context?: Record<string, unknown>;
+}
+
+interface IdentifyProps {
+  userId?: string;
+  anonymousId?: string;
+  traits?: Record<string, unknown>;
+  timestamp?: Date;
+  context?: Record<string, unknown>;
+}
+
+const BASE_URL = "https://api.june.so/sdk";
+
+const JuneContext = React.createContext<JuneContextType>({
+  identify: async () => {},
+  track: async () => {},
+});
+
+export const JuneProvider: React.FC<JuneProviderProps> = ({
+  children,
+  writeKey,
+  disabled = false,
+}) => {
+  if (!writeKey) {
+    throw new Error("[useJune] writeKey is required");
+  }
+
+  const headers = {
+    Authorization: `Basic ${writeKey}`,
+    "Content-Type": "application/json",
+  };
+
+  const track = async (props: TrackProps) => {
+    if (disabled) return;
+
+    try {
+      await fetch(`${BASE_URL}/track`, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          ...props,
+        }),
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const identify = async (props: IdentifyProps) => {
+    if (!props.userId || disabled) return;
+
+    try {
+      await fetch(`${BASE_URL}/identify`, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          ...props,
+        }),
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <JuneContext.Provider value={{ identify, track }}>
+      {children}
+    </JuneContext.Provider>
+  );
+};
+
+export const useJune = () => {
+  const context = React.useContext(JuneContext);
+  if (!context) {
+    throw new Error("[useJune] must be used within a JuneProvider");
+  }
+  return context;
+};

figma-plugin/ui-src/main.tsx

@@ -6,15 +6,21 @@ import * as React from "react";
 import { createRoot } from "react-dom/client";
 
 import { AppProvider } from "./contexts/AppContext";
+import { JuneProvider } from "./contexts/JuneContext";
 import App from "./pages/App";
 
 const root = createRoot(document.getElementById("root")!);
 root.render(
   <React.StrictMode>
-    <ChakraProvider>
-      <AppProvider>
-        <App />
-      </AppProvider>
-    </ChakraProvider>
+    <JuneProvider
+      writeKey={import.meta.env.VITE_JUNE_SO_WRITE_KEY}
+      disabled={import.meta.env.MODE === "dev"}
+    >
+      <ChakraProvider>
+        <AppProvider>
+          <App />
+        </AppProvider>
+      </ChakraProvider>
+    </JuneProvider>
   </React.StrictMode>,
 );

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

@@ -2,19 +2,20 @@ 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 { useJune } from "../contexts/JuneContext";
 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,
-  });
+  const { track } = useJune();
 
-  identify({ userName });
-  track("icona:plugin_open");
+  track({
+    event: "icona:plugin_open",
+    properties: { userName },
+    timestamp: new Date(),
+  });
 
   return (
     <Box className={styles.container}>

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

@@ -3,12 +3,14 @@ import * as React from "react";
 
 import { ACTION, DATA, STATUS } from "../../common/constants";
 import { useAppDispatch, useAppState } from "../contexts/AppContext";
+import { useJune } from "../contexts/JuneContext";
 import * as styles from "./Deploy.css";
 
 const Deploy = () => {
   const dispatch = useAppDispatch();
   const { deployIconStatus, githubData, iconPreview } = useAppState();
   const icons = Object.entries(iconPreview);
+  const { track } = useJune();
 
   const buttonInfo = {
     [STATUS.IDLE]: {
@@ -29,6 +31,23 @@ const Deploy = () => {
     },
   };
 
+  const deploy = () => {
+    dispatch({
+      type: ACTION.DEPLOY_ICON,
+      payload: {
+        githubData,
+      },
+    });
+    track({
+      event: "icona:deploy_icon",
+      properties: {
+        githubRepositoryName: githubData.name,
+        githubRepositoryOwner: githubData.owner,
+      },
+      timestamp: new Date(),
+    });
+  };
+
   return (
     <Box className={styles.container}>
       <Text>
@@ -66,14 +85,7 @@ const Deploy = () => {
           deployIconStatus === STATUS.SUCCESS ||
           deployIconStatus === STATUS.ERROR
         }
-        onClick={() =>
-          dispatch({
-            type: ACTION.DEPLOY_ICON,
-            payload: {
-              githubData,
-            },
-          })
-        }
+        onClick={deploy}
         colorScheme={buttonInfo[deployIconStatus].colorScheme}
       >
         {buttonInfo[deployIconStatus].children}