sanity-plugin-dashboard-widget-vercel 2.0.0 → 3.0.0

package/lib/index.mjs

@@ -0,0 +1,980 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { LinkIcon, UploadIcon, EditIcon, ErrorOutlineIcon, AddIcon } from "@sanity/icons";
+import { useTheme, Box, Label, Flex, Text, Stack, useToast, Button, Tooltip, Inline, TextInput, Dialog, ToastProvider, Card } from "@sanity/ui";
+import { useMachine } from "@xstate/react";
+import { useQuery, QueryClient, QueryClientProvider } from "react-query";
+import { Machine, assign } from "xstate";
+import { useRef, useMemo, useEffect, forwardRef } from "react";
+import useDeepCompareEffect from "use-deep-compare-effect";
+import hash from "object-hash";
+import fetch from "unfetch";
+import ReactTimeAgo from "react-time-ago";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { uuid } from "@sanity/uuid";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { styled } from "styled-components";
+import { useClient } from "sanity";
+import TimeAgo from "javascript-time-ago";
+import en from "javascript-time-ago/locale/en";
+const API_ENDPOINT_DEPLOYMENTS = "https://api.vercel.com/v5/now/deployments", API_ENDPOINT_ALIASES = "https://api.vercel.com/v3/now/aliases", API_VERSION = "1", DEPLOYMENT_TARGET_DOCUMENT_TYPE = "vercel.deploymentTarget", VERCEL_STATUS_COLORS = {
+  BUILDING: "#f5a623",
+  CANCELED: "#ff0000",
+  ERROR: "#ff0000",
+  READY: "#50e3c2",
+  QUEUED: "#333"
+}, WIDGET_NAME = "Vercel (dashboard)", Z_INDEX_DIALOG = 600001, Z_INDEX_TOAST_PROVIDER = 600002, StateDebug = (props) => null, sortByTargetName = (items) => items.sort((a, b) => a.name > b.name ? 1 : a.name < b.name ? -1 : 0), deploymentTargetListMachine = () => Machine(
+  {
+    context: {
+      message: "",
+      results: []
+    },
+    initial: "pending",
+    states: {
+      pending: {
+        invoke: {
+          src: "fetchDataService",
+          onDone: { actions: ["setResults"], target: "ready" },
+          onError: { actions: ["setMessage"], target: "failed" }
+        }
+      },
+      ready: {
+        initial: "unknown",
+        on: {
+          CREATE: { actions: ["targetCreate"] },
+          DELETE: { actions: ["targetDelete"] },
+          UPDATE: { actions: ["targetUpdate"] }
+        },
+        states: {
+          unknown: {
+            always: [
+              { cond: "hasData", target: "withData" },
+              { cond: "hasNoData", target: "withoutData" }
+            ]
+          },
+          withData: {
+            always: [{ cond: "hasNoData", target: "withoutData" }]
+          },
+          withoutData: {
+            always: [{ cond: "hasData", target: "withData" }]
+          }
+        }
+      },
+      failed: {
+        type: "final"
+      }
+    }
+  },
+  {
+    actions: {
+      setMessage: assign((_context, event) => ({
+        message: event.data.details.description
+      })),
+      setResults: assign((_context, event) => ({
+        results: event.data
+      })),
+      targetCreate: assign((context, event) => ({
+        results: sortByTargetName([...context.results, event.deploymentTarget])
+      })),
+      targetDelete: assign((context, event) => ({
+        results: context.results.filter((target) => target._id !== event.id)
+      })),
+      targetUpdate: assign((context, event) => {
+        const { deploymentTarget } = event, index = context.results.findIndex((target) => target._id === deploymentTarget._id), updatedResults = Object.assign([], context.results, {
+          [index]: event.deploymentTarget
+        });
+        return {
+          results: sortByTargetName(updatedResults)
+        };
+      })
+    },
+    guards: {
+      hasData: (context) => context?.results?.length > 0,
+      hasNoData: (context) => context?.results?.length === 0
+    }
+  }
+), fetcher = (deploymentTarget) => async (url, extraParams) => {
+  const params = new URLSearchParams();
+  if (params.set("projectId", deploymentTarget.projectId), deploymentTarget.teamId && params.set("teamId", deploymentTarget.teamId), extraParams)
+    for (const [k, v] of extraParams.entries())
+      params.append(k, v);
+  const response = await fetch(`${url}?${params.toString()}`, {
+    headers: {
+      Authorization: `Bearer ${deploymentTarget.token}`
+    }
+  });
+  if (!response.ok)
+    throw new Error("Response not OK");
+  try {
+    return response.json();
+  } catch (err) {
+    throw new Error(err);
+  }
+}, useDeployments = (deploymentTarget, options) => {
+  const fetchUrl = fetcher(deploymentTarget), deployParams = new URLSearchParams();
+  deployParams.set("limit", String(deploymentTarget?.deployLimit));
+  const {
+    data: deploymentsData,
+    isFetching: deploymentsIsFetching,
+    isSuccess: deploymentsIsSuccess,
+    error: deploymentsError,
+    refetch
+  } = useQuery(
+    hash(deploymentTarget),
+    // key
+    () => fetchUrl(API_ENDPOINT_DEPLOYMENTS, deployParams),
+    {
+      enabled: options?.enabled ?? !0,
+      refetchInterval: 2e4,
+      // ms
+      refetchIntervalInBackground: !1,
+      refetchOnMount: !0,
+      refetchOnReconnect: "always",
+      refetchOnWindowFocus: !1,
+      retry: !1
+    }
+  ), aliasParams = new URLSearchParams();
+  aliasParams.set("limit", "20");
+  const {
+    data: aliasesData,
+    isFetching: aliasesIsFetching,
+    isSuccess: aliasesIsSuccess,
+    error: aliasesError
+  } = useQuery(
+    `${hash(deploymentTarget)}-aliases`,
+    // key
+    () => fetchUrl(API_ENDPOINT_ALIASES, aliasParams),
+    {
+      enabled: !!deploymentsData,
+      refetchOnMount: !1,
+      refetchOnReconnect: !1,
+      refetchOnWindowFocus: !1,
+      retry: !1
+    }
+  ), aliases = aliasesData?.aliases;
+  let deploymentsWithAlias;
+  return aliases && (deploymentsWithAlias = deploymentsData?.deployments?.map((val) => {
+    const alias = aliases.find((a) => a.deploymentId === val.uid);
+    return {
+      ...val,
+      alias: alias?.alias
+    };
+  })), {
+    deployments: deploymentsWithAlias,
+    error: aliasesError || deploymentsError,
+    isFetching: aliasesIsFetching || deploymentsIsFetching,
+    isSuccess: aliasesIsSuccess && deploymentsIsSuccess,
+    refetch
+  };
+}, refreshMachine = Machine({
+  initial: "idle",
+  states: {
+    idle: {
+      on: {
+        REFRESH: "refreshing"
+      }
+    },
+    refreshing: {
+      on: {
+        ERROR: "error",
+        REFRESHED: "refreshed"
+      }
+    },
+    refreshed: {
+      on: {
+        REFRESH: "refreshing"
+      }
+    },
+    error: {
+      on: {
+        REFRESH: "refreshing"
+      }
+    }
+  }
+});
+function useCardColor() {
+  return useTheme().sanity.color.card.enabled;
+}
+const TableCell = (props) => {
+  const { children, colSpan, header, variant } = props;
+  let display = "table-cell", cellWidth = "auto";
+  switch (variant) {
+    case "age":
+      cellWidth = "50px";
+      break;
+    case "branch":
+      cellWidth = "300px", display = ["none", "none", "none", "table-cell"];
+      break;
+    case "creator":
+      cellWidth = "80px";
+      break;
+    case "state":
+      cellWidth = "110px", display = ["none", "none", "none", "none", "table-cell"];
+      break;
+  }
+  const { border } = useCardColor();
+  return header ? /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "th",
+      colSpan,
+      display,
+      paddingX: 3,
+      paddingY: 2,
+      style: {
+        maxWidth: cellWidth,
+        position: "relative",
+        textAlign: "left",
+        width: cellWidth
+      },
+      children: /* @__PURE__ */ jsx(Label, { size: 0, children })
+    }
+  ) : /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "td",
+      colSpan,
+      display,
+      paddingX: 3,
+      paddingY: [2, 2, 3],
+      style: {
+        borderTop: `1px solid ${border}`,
+        maxWidth: cellWidth,
+        position: "relative",
+        textAlign: "left",
+        width: cellWidth
+      },
+      children
+    }
+  );
+}, StatusDot = ({ state }) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    style: {
+      backgroundColor: `${VERCEL_STATUS_COLORS[state]}`,
+      borderRadius: "20px",
+      height: "9px",
+      width: "9px"
+    }
+  }
+), Deployment = (props) => {
+  const { deployment } = props, date = useRef(new Date(deployment.created)), commitMessage = deployment?.meta?.githubCommitMessage, commitRef = deployment?.meta?.githubCommitRef, targetUrl = deployment.alias ?? deployment.url;
+  return /* @__PURE__ */ jsxs("tr", { children: [
+    /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          display: ["block", "block", "block", "block", "none"],
+          marginRight: 3,
+          style: { flexShrink: 0 },
+          children: /* @__PURE__ */ jsx(StatusDot, { state: deployment.state })
+        }
+      ),
+      targetUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        deployment.alias && /* @__PURE__ */ jsx(LinkIcon, {}),
+        /* @__PURE__ */ jsx(Box, { marginLeft: deployment.alias ? 1 : 0, children: /* @__PURE__ */ jsx(
+          Text,
+          {
+            muted: deployment.state !== "READY",
+            size: 1,
+            style: {
+              textDecoration: deployment.state === "CANCELED" || deployment.state === "ERROR" ? "line-through" : "normal"
+            },
+            textOverflow: "ellipsis",
+            children: deployment.state === "READY" ? /* @__PURE__ */ jsx("a", { href: `https://${targetUrl}`, rel: "noopener noreferrer", target: "_blank", children: targetUrl }) : targetUrl
+          }
+        ) })
+      ] }) : /* @__PURE__ */ jsx(Text, { size: 1, children: "Uploading..." })
+    ] }) }),
+    /* @__PURE__ */ jsx(TableCell, { variant: "state", children: /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
+      /* @__PURE__ */ jsx(StatusDot, { state: deployment.state }),
+      /* @__PURE__ */ jsx(Box, { marginLeft: 2, children: /* @__PURE__ */ jsx(Text, { size: 1, children: deployment.state.trim().toLowerCase().replace(/^[a-z]/i, (t) => t.toUpperCase()) }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(TableCell, { variant: "branch", children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+      /* @__PURE__ */ jsx(Text, { size: 1, textOverflow: "ellipsis", children: commitRef }),
+      commitMessage && /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, textOverflow: "ellipsis", children: commitMessage })
+    ] }) }),
+    /* @__PURE__ */ jsx(TableCell, { variant: "age", children: /* @__PURE__ */ jsx(Flex, { align: "center", children: /* @__PURE__ */ jsx(Text, { size: 1, children: /* @__PURE__ */ jsx(ReactTimeAgo, { date: date.current, locale: "en-US", timeStyle: "mini" }) }) }) }),
+    /* @__PURE__ */ jsx(TableCell, { variant: "creator", children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        draggable: !1,
+        src: `https://vercel.com/api/www/avatar/${deployment?.creator?.uid}?&s=48`,
+        style: {
+          borderRadius: "20px",
+          height: "20px",
+          width: "20px"
+        }
+      }
+    ) }) })
+  ] });
+}, deployMachine = (deployHook) => Machine(
+  // Machine
+  {
+    id: "deploy",
+    initial: "idle",
+    context: {
+      disabled: !1,
+      feedback: void 0,
+      label: void 0,
+      error: void 0
+    },
+    states: {
+      idle: {
+        entry: assign({
+          feedback: () => {
+          },
+          label: () => "Deploy"
+        }),
+        on: {
+          DEPLOY: "deploying"
+        }
+      },
+      deploying: {
+        entry: assign({
+          disabled: () => !0,
+          label: () => "Deploying"
+        }),
+        exit: assign({
+          disabled: () => !1,
+          label: () => "Deploy"
+        }),
+        invoke: {
+          onDone: {
+            target: "success"
+          },
+          onError: {
+            target: "error",
+            actions: assign({
+              error: (_context, event) => event.data
+            })
+          },
+          src: "deploy"
+        }
+      },
+      success: {
+        entry: [assign({ feedback: () => "Succesfully started!" })],
+        exit: assign({
+          feedback: () => {
+          }
+        }),
+        on: {
+          DEPLOY: "deploying"
+        }
+      },
+      error: {
+        on: {
+          DEPLOY: "deploying"
+        }
+      }
+    }
+  },
+  // Config
+  {
+    services: {
+      deploy: () => new Promise(async (resolve, reject) => {
+        try {
+          if (!deployHook)
+            return reject(new Error("No deployHook URL defined"));
+          const res = await fetch(deployHook, { method: "POST" }), data = await res.json();
+          if (!res.ok) {
+            const errorMessage = (data?.error).message || res.statusText;
+            return reject(errorMessage);
+          }
+          return resolve();
+        } catch (err) {
+          return console.error("Unable to deploy with error:", err), reject(new Error("Please check the developer console for more information"));
+        }
+      })
+    }
+  }
+), DeployButton = (props) => {
+  const { deployHook, onDeploySuccess, targetName } = props, machine = useMemo(() => deployMachine(deployHook), [deployHook]), [deployState, deployStateTransition, deployStateInterpreter] = useMachine(machine), toast = useToast(), isError = deployState.matches("error"), isSuccess = deployState.matches("success"), handleDeploy = () => {
+    deployStateTransition({ type: "DEPLOY" });
+  };
+  return useEffect(() => {
+    isError && toast.push({
+      closable: !0,
+      description: `Unable to queue deploy for ${targetName}: ${deployState.context.error}`,
+      duration: 8e3,
+      status: "error",
+      title: WIDGET_NAME
+    }), isSuccess && toast.push({
+      closable: !0,
+      description: `Deploy queued for ${targetName}`,
+      duration: 8e3,
+      status: "success",
+      title: WIDGET_NAME
+    });
+  }, [isError, isSuccess, toast, targetName, deployState.context.error]), useEffect(() => {
+    deployStateInterpreter.onTransition((state) => {
+      state.value === "success" && onDeploySuccess && onDeploySuccess();
+    });
+  }, [deployStateInterpreter, onDeploySuccess]), /* @__PURE__ */ jsxs(Box, { padding: 3, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx(StateDebug, { name: "Deploy", state: deployState }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        disabled: deployState.context.disabled,
+        fontSize: 1,
+        icon: UploadIcon,
+        mode: "ghost",
+        onClick: handleDeploy,
+        padding: 3,
+        text: `${deployState.context.label} ${targetName}`,
+        tone: "default"
+      }
+    )
+  ] });
+}, PlaceholderAvatar = () => {
+  const { border } = useCardColor();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        backgroundColor: border,
+        borderRadius: "20px",
+        height: "20px",
+        userSelect: "none",
+        width: "20px"
+      }
+    }
+  );
+}, PlaceholderText = (props) => {
+  const { rows } = props, { border } = useCardColor();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        backgroundColor: border,
+        borderRadius: "3px",
+        userSelect: "none",
+        width: "100%"
+      },
+      children: /* @__PURE__ */ jsx(Stack, { space: 2, children: new Array(rows).fill(void 0).map((_, index) => /* @__PURE__ */ jsx(Text, { size: 1, children: "\xA0" }, index)) })
+    }
+  );
+}, DeploymentPlaceholder = () => /* @__PURE__ */ jsxs("tr", { children: [
+  /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(PlaceholderText, { rows: 1 }) }),
+  /* @__PURE__ */ jsx(TableCell, { variant: "state", children: /* @__PURE__ */ jsx(PlaceholderText, { rows: 1 }) }),
+  /* @__PURE__ */ jsx(TableCell, { variant: "branch", children: /* @__PURE__ */ jsx(PlaceholderText, { rows: 2 }) }),
+  /* @__PURE__ */ jsx(TableCell, { variant: "age", children: /* @__PURE__ */ jsx(PlaceholderText, { rows: 1 }) }),
+  /* @__PURE__ */ jsx(TableCell, { variant: "creator", children: /* @__PURE__ */ jsx(Flex, { justify: "center", children: /* @__PURE__ */ jsx(PlaceholderAvatar, {}) }) })
+] }), Deployments = (props) => {
+  const { deploymentTarget } = props, refTimeout = useRef(null), [refreshState, refreshStateTransition] = useMachine(refreshMachine), { deployments, error, isFetching, isSuccess, refetch } = useDeployments(deploymentTarget, {
+    enabled: !refreshState.matches("error")
+  }), toast = useToast(), isError = refreshState.matches("error"), handleDeploySuccess = () => {
+    refTimeout.current && clearTimeout(refTimeout.current), refTimeout.current = setTimeout(() => {
+      refetch({
+        cancelRefetch: !0,
+        throwOnError: !0
+      });
+    }, 4e3);
+  };
+  useEffect(() => () => {
+    refTimeout.current && clearTimeout(refTimeout.current);
+  }, []), useEffect(() => {
+    error && refreshStateTransition({ type: "ERROR" }), isFetching && refreshStateTransition({ type: "REFRESH" }), !isFetching && isSuccess && refreshStateTransition({ type: "REFRESHED" });
+  }, [error, isFetching, isSuccess, refreshStateTransition]), useDeepCompareEffect(() => {
+    refreshState.matches("refreshing") || refreshStateTransition({ type: "REFRESH" });
+  }, [deploymentTarget]), useDeepCompareEffect(() => {
+    isError && toast.push({
+      closable: !0,
+      description: `Unable to fetch deployments for ${deploymentTarget.name}`,
+      duration: 8e3,
+      status: "error",
+      title: WIDGET_NAME
+    });
+  }, [deploymentTarget, isError]);
+  const hasFetched = typeof deployments < "u", hasDeployments = deployments && deployments.length > 0, { border } = useCardColor();
+  return /* @__PURE__ */ jsxs(Box, { marginTop: 3, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx(StateDebug, { name: "Refresh", state: refreshState }),
+    !refreshState.matches("error") && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          as: "table",
+          style: {
+            borderBottom: `1px solid ${border}`,
+            borderCollapse: "collapse",
+            display: "table",
+            tableLayout: "fixed",
+            width: "100%"
+          },
+          children: [
+            /* @__PURE__ */ jsx(Box, { as: "thead", style: { display: "table-header-group" }, children: /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx(TableCell, { header: !0, children: "Deployment" }),
+              /* @__PURE__ */ jsx(TableCell, { header: !0, variant: "state", children: "State" }),
+              /* @__PURE__ */ jsx(TableCell, { header: !0, variant: "branch", children: "Branch" }),
+              /* @__PURE__ */ jsx(TableCell, { header: !0, variant: "age", children: "Age" }),
+              /* @__PURE__ */ jsx(TableCell, { header: !0, variant: "age", children: "Creator" })
+            ] }) }),
+            /* @__PURE__ */ jsxs(Box, { as: "tbody", style: { display: "table-header-group" }, children: [
+              !deployments && new Array(deploymentTarget?.deployLimit).fill(void 0).map((_, index) => /* @__PURE__ */ jsx(DeploymentPlaceholder, {}, index)),
+              hasDeployments && deployments?.map((deployment) => /* @__PURE__ */ jsx(Deployment, { deployment }, deployment.uid))
+            ] })
+          ]
+        }
+      ),
+      hasFetched && !hasDeployments && /* @__PURE__ */ jsx(Box, { padding: 3, style: { width: "100%" }, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: "No deployments found. Don't forget to specify a valid team ID if your project belongs to a team." }) })
+    ] }),
+    refreshState.matches("error") && /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: "Unable to fetch recent deployments. Please check your network and deployment settings." }) }),
+    !refreshState.matches("error") && deploymentTarget.deployHook && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+      DeployButton,
+      {
+        deployHook: deploymentTarget.deployHook,
+        onDeploySuccess: handleDeploySuccess,
+        targetName: deploymentTarget.name
+      }
+    ) })
+  ] });
+}, DeploymentTarget = (props) => {
+  const { item, onDialogEdit } = props, deploymentTarget = {
+    deployHook: item.deployHook,
+    deployLimit: item.deployLimit,
+    name: item.name,
+    projectId: item.projectId,
+    teamId: item.teamId,
+    token: item.token
+  };
+  return /* @__PURE__ */ jsxs(Box, { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "space-between", marginTop: 2, paddingX: 3, children: [
+      /* @__PURE__ */ jsx(Text, { size: 2, children: item.name }),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          content: /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: "Edit deployment target" }) }),
+          placement: "left",
+          children: /* @__PURE__ */ jsx(Button, { fontSize: 1, icon: EditIcon, mode: "bleed", onClick: () => onDialogEdit(item) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Deployments, { deploymentTarget })
+  ] });
+}, DeploymentTargets = (props) => {
+  const { items, onDialogEdit } = props;
+  return /* @__PURE__ */ jsx(Stack, { space: 5, children: items?.map((item) => /* @__PURE__ */ jsx(DeploymentTarget, { item, onDialogEdit }, item._id)) });
+}, formMachine = Machine(
+  {
+    context: {
+      formData: {},
+      message: ""
+    },
+    initial: "idle",
+    states: {
+      idle: {
+        on: {
+          CREATE: {
+            actions: ["createDocument"],
+            target: "creating"
+          },
+          DELETE: {
+            actions: ["deleteDocument"],
+            target: "deleting"
+          },
+          UPDATE: {
+            actions: ["updateDocument"],
+            target: "updating"
+          }
+        }
+      },
+      creating: {
+        invoke: {
+          src: "createDocumentService",
+          onDone: { target: "success" },
+          onError: { actions: ["setMessage"], target: "error" }
+        },
+        on: {
+          RESOLVE: "success",
+          REJECT: "error"
+        }
+      },
+      updating: {
+        invoke: {
+          src: "updateDocumentService",
+          onDone: { target: "success" },
+          onError: { actions: ["setMessage"], target: "error" }
+        },
+        on: {
+          RESOLVE: "success",
+          REJECT: "error"
+        }
+      },
+      deleting: {
+        invoke: {
+          src: "deleteDocumentService",
+          onDone: { target: "success" },
+          onError: { actions: ["setMessage"], target: "error" }
+        },
+        on: {
+          RESOLVE: "success",
+          REJECT: "error"
+        }
+      },
+      success: {
+        invoke: {
+          src: "formSubmittedService"
+        }
+      },
+      error: {}
+    }
+  },
+  {
+    actions: {
+      setMessage: assign((_context, event) => ({
+        message: event.data.details.description
+      })),
+      createDocument: assign((_context, event) => ({
+        formData: event.formData
+      })),
+      deleteDocument: assign(() => ({
+        // id: event.id,
+      })),
+      updateDocument: assign((_context, event) => ({
+        formData: event.formData
+      }))
+    }
+  }
+), sanitizeFormData = (formData) => Object.keys(formData).reduce((acc, key) => {
+  const val = formData[key];
+  return typeof val == "object" && val !== null && val.constructor !== Array ? acc[key] = sanitizeFormData(val) : val === "" || typeof val > "u" || val?.length === 0 ? acc[key] = null : typeof val == "string" && val ? acc[key] = formData[key].trim() : acc[key] = formData[key], acc;
+}, {}), StyledErrorOutlineIcon = styled(ErrorOutlineIcon)(({ theme }) => ({
+  color: theme.sanity.color.spot.red
+})), FormFieldInputLabel = (props) => {
+  const { description, error, label, name } = props;
+  return /* @__PURE__ */ jsxs(Box, { marginBottom: 3, children: [
+    /* @__PURE__ */ jsxs(Inline, { space: 2, children: [
+      /* @__PURE__ */ jsx(Text, { as: "label", htmlFor: name, size: 1, weight: "semibold", children: label }),
+      error && /* @__PURE__ */ jsx(Text, { size: 1, children: /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          content: /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsxs(Text, { muted: !0, size: 1, children: [
+            /* @__PURE__ */ jsx(StyledErrorOutlineIcon, { style: { marginRight: "0.1em" } }),
+            error.message
+          ] }) }),
+          fallbackPlacements: ["top", "left"],
+          placement: "right",
+          portal: !0,
+          children: /* @__PURE__ */ jsx(StyledErrorOutlineIcon, {})
+        }
+      ) })
+    ] }),
+    description && /* @__PURE__ */ jsx(Box, { marginY: 3, children: /* @__PURE__ */ jsx(Text, { htmlFor: name, muted: !0, size: 1, children: description }) })
+  ] });
+}, FormFieldInputText = forwardRef((props, ref) => {
+  const { description, disabled, error, label, name, placeholder, value } = props;
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(FormFieldInputLabel, { description, error, label, name }),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        autoComplete: "off",
+        autoFocus: !0,
+        defaultValue: value,
+        disabled,
+        id: name,
+        name,
+        placeholder,
+        ref
+      }
+    )
+  ] });
+});
+function useSanityClient() {
+  return useClient({ apiVersion: API_VERSION });
+}
+const formSchema = yup.object().shape({
+  deployHook: yup.string().url("Deploy hook must be a valid URL"),
+  deployLimit: yup.number().positive().integer().min(1, "Deploy limit must no less than 1").max(15, "Deploy limit must no higher than 15").typeError("Deploy limit must be a number").required("Deploy limit must be a positive integer between 1 and 15"),
+  name: yup.string().required("Name cannot be empty"),
+  projectId: yup.string().required("Vercel Project ID cannot be empty"),
+  teamId: yup.string(),
+  token: yup.string().required("Vercel Account Token cannot be empty")
+}), DialogForm = (props) => {
+  const { deploymentTarget, onClose, onCreate, onDelete, onUpdate } = props, client = useSanityClient(), [formState, formStateTransition] = useMachine(formMachine, {
+    services: {
+      formSubmittedService: async () => {
+        onClose();
+      },
+      // TODO: refactor
+      createDocumentService: async (_context, event) => {
+        let document;
+        try {
+          return document = await client.create({
+            _id: `vercel.${uuid()}`,
+            _type: DEPLOYMENT_TARGET_DOCUMENT_TYPE,
+            ...event.formData
+          }), onCreate && onCreate(document), Promise.resolve();
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      },
+      // TODO: refactor
+      deleteDocumentService: async () => {
+        if (deploymentTarget)
+          try {
+            return await client.delete(deploymentTarget._id), onDelete && onDelete(deploymentTarget._id), Promise.resolve();
+          } catch (e) {
+            return Promise.reject(e);
+          }
+        return Promise.resolve();
+      },
+      // TODO: refactor
+      updateDocumentService: async (_context, event) => {
+        let document;
+        if (deploymentTarget)
+          try {
+            return document = await client.patch(deploymentTarget._id).set(event.formData).commit(), onUpdate && onUpdate(document), Promise.resolve();
+          } catch (e) {
+            return Promise.reject(e);
+          }
+        return Promise.resolve();
+      }
+    }
+  }), formUpdating = formState.matches("creating") || formState.matches("deleting") || formState.matches("updating"), {
+    // Read the formState before render to subscribe the form state through Proxy
+    formState: { errors, isDirty, isValid },
+    handleSubmit,
+    register
+  } = useForm({
+    defaultValues: {
+      deployHook: deploymentTarget?.deployHook || "",
+      deployLimit: deploymentTarget?.deployLimit || 5,
+      name: deploymentTarget?.name,
+      projectId: deploymentTarget?.projectId,
+      teamId: deploymentTarget?.teamId || "",
+      token: deploymentTarget?.token
+    },
+    mode: "onChange",
+    resolver: yupResolver(formSchema)
+  }), onSubmit = async (formData) => {
+    const sanitizedFormData = sanitizeFormData(formData);
+    await formStateTransition(deploymentTarget ? "UPDATE" : "CREATE", {
+      formData: sanitizedFormData
+    });
+  }, handleDelete = () => {
+    formStateTransition("DELETE", { id: deploymentTarget?._id });
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      footer: /* @__PURE__ */ jsx(() => /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: deploymentTarget ? "space-between" : "flex-end", children: [
+        deploymentTarget && /* @__PURE__ */ jsx(
+          Button,
+          {
+            disabled: formUpdating,
+            fontSize: 1,
+            mode: "bleed",
+            onClick: handleDelete,
+            text: "Delete",
+            tone: "critical"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            disabled: formUpdating || !isDirty || !isValid,
+            fontSize: 1,
+            onClick: handleSubmit(onSubmit),
+            text: deploymentTarget ? "Update and close" : "Create",
+            tone: "primary"
+          }
+        )
+      ] }) }), {}),
+      header: `${deploymentTarget ? "Edit" : "Create"} deployment target`,
+      id: "create",
+      onClose,
+      width: 1,
+      zOffset: Z_INDEX_DIALOG,
+      children: /* @__PURE__ */ jsxs(Box, { as: "form", padding: 4, onSubmit: handleSubmit(onSubmit), children: [
+        /* @__PURE__ */ jsx("button", { style: { display: "none" }, tabIndex: -1, type: "submit" }),
+        /* @__PURE__ */ jsxs(Stack, { space: 5, children: [
+          /* @__PURE__ */ jsx(
+            FormFieldInputText,
+            {
+              disabled: formUpdating,
+              description: "Name displayed in this plugin (e.g. production, staging)",
+              error: errors?.name,
+              label: "Name",
+              name: "name",
+              ref: register
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormFieldInputText,
+            {
+              disabled: formUpdating,
+              error: errors?.token,
+              label: "Vercel Account Token",
+              name: "token",
+              ref: register
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormFieldInputText,
+            {
+              disabled: formUpdating,
+              error: errors?.projectId,
+              label: "Vercel Project ID",
+              name: "projectId",
+              ref: register
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormFieldInputText,
+            {
+              description: "Required only if your project is owned by a team account",
+              disabled: formUpdating,
+              error: errors?.teamId,
+              label: "Vercel Team ID (optional)",
+              name: "teamId",
+              ref: register
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormFieldInputText,
+            {
+              description: "Enter a valid deploy hook URL to enable manual deploys",
+              disabled: formUpdating,
+              error: errors?.deployHook,
+              label: "Vercel Deploy Hook (optional)",
+              name: "deployHook",
+              ref: register
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormFieldInputText,
+            {
+              disabled: formUpdating,
+              error: errors?.deployLimit,
+              label: "Number of deploys to display",
+              name: "deployLimit",
+              ref: register({ valueAsNumber: !0 })
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}, dialogMachine = () => Machine(
+  {
+    context: {
+      editDeploymentTarget: void 0
+    },
+    initial: "idle",
+    states: {
+      idle: {
+        entry: assign({
+          editDeploymentTarget: () => {
+          }
+        }),
+        on: {
+          CREATE: "create",
+          EDIT: {
+            actions: ["setEditDeploymentTarget"],
+            target: "edit"
+          }
+        }
+      },
+      edit: {
+        on: {
+          CLOSE: "idle"
+        }
+      },
+      create: {
+        on: {
+          CLOSE: "idle"
+        }
+      }
+    }
+  },
+  {
+    actions: {
+      setEditDeploymentTarget: assign((_context, event) => ({
+        editDeploymentTarget: event.deploymentTarget
+      }))
+    }
+  }
+), Widget = () => {
+  const client = useSanityClient(), [deploymentTargetListState, deploymentTargetListStateTransition] = useMachine(
+    deploymentTargetListMachine,
+    {
+      services: {
+        fetchDataService: () => client.fetch(`*[_type == "${DEPLOYMENT_TARGET_DOCUMENT_TYPE}"] | order(name asc)`).then((result) => result)
+      }
+    }
+  ), [dialogState, dialogStateTransition] = useMachine(dialogMachine), queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        cacheTime: 0,
+        staleTime: 0
+      }
+    }
+  }), handleDialogClose = () => {
+    dialogStateTransition("CLOSE");
+  }, handleDialogShowCreate = () => {
+    dialogStateTransition("CREATE");
+  }, handleDialogShowEdit = (deploymentTarget) => {
+    dialogStateTransition("EDIT", { deploymentTarget });
+  }, handleTargetCreate = (deploymentTarget) => {
+    deploymentTargetListStateTransition("CREATE", { deploymentTarget });
+  }, handleTargetDelete = (id) => {
+    deploymentTargetListStateTransition("DELETE", { id });
+  }, handleTargetUpdate = (deploymentTarget) => {
+    deploymentTargetListStateTransition("UPDATE", { deploymentTarget });
+  };
+  return /* @__PURE__ */ jsx(ToastProvider, { zOffset: Z_INDEX_TOAST_PROVIDER, children: /* @__PURE__ */ jsxs(QueryClientProvider, { client: queryClient, children: [
+    /* @__PURE__ */ jsxs(Card, { radius: 2, style: { overflow: "hidden " }, children: [
+      /* @__PURE__ */ jsx(StateDebug, { name: "List", state: deploymentTargetListState }),
+      /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "space-between", paddingX: 3, paddingY: 2, children: [
+        /* @__PURE__ */ jsx(Text, { size: 5, weight: "semibold", children: "Vercel deployments" }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            content: /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: "Create new deployment target" }) }),
+            placement: "left",
+            children: /* @__PURE__ */ jsx(Button, { fontSize: 1, icon: AddIcon, onClick: handleDialogShowCreate, mode: "bleed" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { children: [
+        deploymentTargetListState.matches("pending") && /* @__PURE__ */ jsx(Box, { paddingX: 3, paddingY: 4, children: /* @__PURE__ */ jsx(Text, { children: "Loading..." }) }),
+        deploymentTargetListState.matches("ready.withoutData") && /* @__PURE__ */ jsx(Box, { paddingX: 3, paddingY: 4, children: /* @__PURE__ */ jsxs(Text, { children: [
+          "No deployment targets found.",
+          " ",
+          /* @__PURE__ */ jsx("a", { onClick: handleDialogShowCreate, style: { cursor: "pointer" }, children: "Create a new target?" })
+        ] }) }),
+        deploymentTargetListState.matches("ready.withData") && /* @__PURE__ */ jsx(
+          DeploymentTargets,
+          {
+            items: deploymentTargetListState.context.results,
+            onDialogEdit: handleDialogShowEdit
+          }
+        ),
+        deploymentTargetListState.matches("failed") && /* @__PURE__ */ jsx(Box, { paddingX: 3, paddingY: 4, children: /* @__PURE__ */ jsx(Text, { children: "Failed to retrieve deployment targets. Please check the developer console log for more information." }) })
+      ] })
+    ] }),
+    dialogState.matches("create") && /* @__PURE__ */ jsx(DialogForm, { onClose: handleDialogClose, onCreate: handleTargetCreate }),
+    dialogState.matches("edit") && /* @__PURE__ */ jsx(
+      DialogForm,
+      {
+        deploymentTarget: dialogState.context.editDeploymentTarget,
+        onClose: handleDialogClose,
+        onDelete: handleTargetDelete,
+        onUpdate: handleTargetUpdate
+      }
+    )
+  ] }) });
+};
+TimeAgo.addDefaultLocale(en);
+function vercelWidget(config = {}) {
+  return {
+    name: "vercel",
+    component: Widget,
+    layout: config.layout ?? { width: "full" }
+  };
+}
+export {
+  vercelWidget
+};
+//# sourceMappingURL=index.mjs.map