feat: add base branch input in deploy tab

figma-plugin/common/constants.ts

@@ -3,5 +3,6 @@ export const FRAME_NAME = "icona-frame";
 export const KEY = {
   GITHUB_API_KEY: "github-api-key",
   GITHUB_REPO_URL: "github-repo-url",
+  GITHUB_BRANCH: "github-branch",
   PNG_OPTIONS: "png-options",
 };

figma-plugin/common/fromPlugin.ts

@@ -16,6 +16,10 @@ interface GetGithubApiKeyPayload {
   apiKey?: string;
 }
 
+interface GetGithubBranchPayload {
+  branch?: string;
+}
+
 interface GetDeployWithPngPayload {
   options: ExportOptions;
 }
@@ -50,6 +54,11 @@ export type Events = {
     payload: GetIconPreviewPayload;
     handler: (props: GetIconPreviewPayload) => void;
   };
+  GET_GITHUB_BRANCH: {
+    name: "GET_GITHUB_BRANCH";
+    payload: GetGithubBranchPayload;
+    handler: (props: GetGithubBranchPayload) => void;
+  };
   DEPLOY_DONE: {
     name: "DEPLOY_DONE";
     payload: null;

figma-plugin/common/fromUi.ts

@@ -7,6 +7,7 @@ interface GithubData {
   owner: string;
   name: string;
   apiKey: string;
+  branch: string;
 }
 
 interface IconaMetaData {
@@ -22,6 +23,10 @@ interface SetPngOptionPayload {
 interface SetGithubUrlPayload {
   url: string;
 }
+
+interface SetGithubBranchPayload {
+  branch: string;
+}
 interface SetGithubApiKeyPayload {
   apiKey: string;
 }
@@ -47,6 +52,11 @@ export type Events = {
     payload: IconaMetaData;
     handler: (props: IconaMetaData) => void;
   };
+  SET_GITHUB_BRANCH: {
+    name: "SET_GITHUB_BRANCH";
+    payload: SetGithubBranchPayload;
+    handler: (props: SetGithubBranchPayload) => void;
+  };
 };
 
 type EventName = keyof Events;

figma-plugin/common/types.ts

@@ -2,6 +2,7 @@ export interface GithubData {
   owner: string;
   name: string;
   apiKey: string;
+  branch: string;
 }
 
 export interface ExportOptions {

figma-plugin/plugin-src/code.ts

@@ -2,6 +2,7 @@ import { FRAME_NAME, KEY } from "../common/constants";
 import { emit } from "../common/fromPlugin";
 import {
   listenDeployIcon,
+  listenGithubBranch,
   listenPngOption,
   listenSetGithubApiKey,
   listenSetGithubUrl,
@@ -22,6 +23,7 @@ async function sendStorageData() {
   const repoUrl = await getLocalData(KEY.GITHUB_REPO_URL);
   const apiKey = await getLocalData(KEY.GITHUB_API_KEY);
   const pngOption = await getLocalData(KEY.PNG_OPTIONS);
+  const branch = await getLocalData(KEY.GITHUB_BRANCH);
 
   emit("GET_GITHUB_REPO_URL", { repoUrl });
   emit("GET_GITHUB_API_KEY", { apiKey });
@@ -30,6 +32,7 @@ async function sendStorageData() {
       png: { "1x": false, "2x": false, "3x": false, "4x": false },
     },
   });
+  emit("GET_GITHUB_BRANCH", { branch });
 }
 
 async function setPreviewIcons() {
@@ -60,4 +63,5 @@ async function setPreviewIcons() {
   listenSetGithubApiKey();
   listenSetGithubUrl();
   listenPngOption();
+  listenGithubBranch();
 })();

figma-plugin/plugin-src/github.ts

@@ -209,8 +209,11 @@ export function createGithubClient(
     await createPullRequest(newBranch, baseBranch, prTitle, prBody);
   }
 
-  async function createDeployPR(svgs: Record<string, IconaIconData>) {
-    const baseBranch = "main";
+  async function createDeployPR(
+    svgs: Record<string, IconaIconData>,
+    branch: string,
+  ) {
+    const baseBranch = branch;
     const newBranch = `icona-update-${new Date().getTime()}`;
     const prTitle = "[Icona]: Update Icons";
     const commitTitle = "feat: update icons.json";

figma-plugin/plugin-src/listeners.ts

@@ -8,7 +8,7 @@ import { setLocalData } from "./utils.js";
 export function listenDeployIcon() {
   on("DEPLOY_ICON", async ({ githubData, icons, options }) => {
     try {
-      const { owner, name, apiKey } = githubData;
+      const { owner, name, apiKey, branch } = githubData;
       const pngOption = options.png;
 
       const { createDeployPR } = createGithubClient(owner, name, apiKey);
@@ -29,7 +29,7 @@ export function listenDeployIcon() {
         png: pngOption,
       });
 
-      await createDeployPR(iconaData);
+      await createDeployPR(iconaData, branch);
 
       emit("DEPLOY_DONE", null);
       figma.notify("Icons deployed", { timeout: 5000 });
@@ -60,3 +60,9 @@ export function listenPngOption() {
     setLocalData(KEY.PNG_OPTIONS, options);
   });
 }
+
+export function listenGithubBranch() {
+  on("SET_GITHUB_BRANCH", ({ branch }) => {
+    setLocalData(KEY.GITHUB_BRANCH, branch);
+  });
+}

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

@@ -18,6 +18,7 @@ type State = {
   // Input
   githubRepositoryUrl: string;
   githubApiKey: string;
+  githubBranch: string;
 
   iconPreview: Record<string, IconaIconData>;
 
@@ -37,13 +38,15 @@ type Actions =
   | Omit<PluginEvents["GET_GITHUB_API_KEY"], "handler">
   | Omit<PluginEvents["GET_GITHUB_REPO_URL"], "handler">
   | Omit<PluginEvents["GET_DEPLOY_WITH_PNG"], "handler">
+  | Omit<PluginEvents["GET_GITHUB_BRANCH"], "handler">
   | Omit<PluginEvents["GET_USER_INFO"], "handler">
   | Omit<PluginEvents["GET_ICON_PREVIEW"], "handler">
   | Omit<PluginEvents["DEPLOY_DONE"], "handler">
   | Omit<UiEvents["DEPLOY_ICON"], "handler">
   | Omit<UiEvents["SET_PNG_OPTIONS"], "handler">
   | Omit<UiEvents["SET_GITHUB_API_KEY"], "handler">
-  | Omit<UiEvents["SET_GITHUB_URL"], "handler">;
+  | Omit<UiEvents["SET_GITHUB_URL"], "handler">
+  | Omit<UiEvents["SET_GITHUB_BRANCH"], "handler">;
 
 type AppDispatch = Dispatch<Actions>;
 
@@ -91,6 +94,17 @@ function reducer(state: State, action: Actions): State {
         },
       };
     }
+    case "GET_GITHUB_BRANCH": {
+      const { branch = "main" } = action.payload;
+      return {
+        ...state,
+        githubBranch: branch,
+        githubData: {
+          ...state.githubData,
+          branch,
+        },
+      };
+    }
 
     case "GET_USER_INFO": {
       return {
@@ -139,6 +153,19 @@ function reducer(state: State, action: Actions): State {
       };
     }
 
+    case "SET_GITHUB_BRANCH": {
+      emit("SET_GITHUB_BRANCH", action.payload);
+
+      return {
+        ...state,
+        githubBranch: action.payload.branch,
+        githubData: {
+          ...state.githubData,
+          branch: action.payload.branch,
+        },
+      };
+    }
+
     case "SET_PNG_OPTIONS": {
       emit("SET_PNG_OPTIONS", action.payload);
 
@@ -175,12 +202,14 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
       owner: "",
       name: "",
       apiKey: "",
+      branch: "main",
     },
     iconPreview: {},
 
     // Input
     githubApiKey: "",
     githubRepositoryUrl: "",
+    githubBranch: "main",
 
     // Options
     pngOption: {

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

@@ -11,6 +11,7 @@ import { useJune } from "june-so-sandbox-react";
 import * as React from "react";
 
 import { FRAME_NAME } from "../../common/constants";
+import { TextInput } from "../components/TextInput";
 import { useAppDispatch, useAppState } from "../contexts/AppContext";
 import * as styles from "./Deploy.css";
 
@@ -22,6 +23,7 @@ const Deploy = () => {
     iconPreview,
     githubApiKey,
     githubRepositoryUrl,
+    githubBranch,
     pngOption,
   } = useAppState();
   const icons = Object.entries(iconPreview);
@@ -215,6 +217,27 @@ const Deploy = () => {
           );
         })}
       </Box>
+
+      <Box marginTop={4} fontSize={14}>
+        <Text fontWeight="bold">Base Branch Name</Text>
+      </Box>
+
+      <TextInput
+        label=""
+        placeholder="Base Branch Name"
+        value={githubBranch}
+        helperText="Branch name that you want to merge."
+        isError={false}
+        errorMessage="It's not a valid Branch name."
+        handleChange={(event) => {
+          dispatch({
+            name: "SET_GITHUB_BRANCH",
+            payload: {
+              branch: event.target.value,
+            },
+          });
+        }}
+      />
     </Box>
   );
 };