sanity-plugin-dashboard-widget-vercel 3.1.1 → 3.1.3

package/lib/index.mjs

@@ -1,18 +1,17 @@
 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 { useMachine, useActor } from "@xstate/react";
 import { useQuery, QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { Machine, assign } from "xstate";
-import { useRef, useMemo, useEffect, forwardRef } from "react";
+import { setup, fromPromise, assign, assertEvent, toPromise } from "xstate";
+import { useRef, 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 { uuid } from "@sanity/uuid";
 import { styled } from "styled-components";
 import { useClient } from "sanity";
 import TimeAgo from "javascript-time-ago";
@@ -23,77 +22,99 @@ const API_ENDPOINT_DEPLOYMENTS = "https://api.vercel.com/v5/now/deployments", AP
   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: []
+}, 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 = setup({
+  types: {},
+  actions: {
+    targetCreate: assign({
+      results: ({ context, event }) => (assertEvent(event, "CREATE"), sortByTargetName([...context.results, event.deploymentTarget]))
+    }),
+    targetDelete: assign({
+      results: ({ context, event }) => (assertEvent(event, "DELETE"), context.results.filter((target) => target._id !== event.id))
+    }),
+    targetUpdate: assign({
+      results: ({ context, event }) => {
+        assertEvent(event, "UPDATE");
+        const { deploymentTarget } = event, index = context.results.findIndex((target) => target._id === deploymentTarget._id), updatedResults = Object.assign([], context.results, {
+          [index]: deploymentTarget
+        });
+        return sortByTargetName(updatedResults);
+      }
+    })
+  },
+  guards: {
+    hasData: ({ context }) => context?.results?.length > 0,
+    hasNoData: ({ context }) => context?.results?.length === 0
+  },
+  actors: {
+    "fetch data": fromPromise(
+      ({ input, signal }) => input.client.fetch(
+        "*[_type == $type] | order(name asc)",
+        {
+          type: DEPLOYMENT_TARGET_DOCUMENT_TYPE
+        },
+        { signal }
+      ).catch((error) => {
+        if (error instanceof Error && error.name === "AbortError")
+          return [];
+        throw console.error("Failed to fetch deployment targets", error), error;
+      })
+    )
+  }
+}).createMachine({
+  /** @xstate-layout N4IgpgJg5mDOIC5QAoC2BDAxgCwJYDswBKAOgAcx8ICoBiCAe0JIIDcGBrMEgMzABccAEXT90AbQAMAXUSgyDWLn64mckAA9EAZkkBOEgHYAjAA5DAFgBsFgEwnJAVkMAaEAE9Ep4yUeT-klbGesbaoYaGAL6RbmhYeISkFFQ0tGAATukM6eQANqI82ai8AsKiEjLqCkoqakiaOvpGZpY29sZOrh6IxpYkFo5h2oaOpnqOxraSFtGxGDgExCTpYOgQ7rQAwgBKAKIAggAqu1Ky9dXKqvjqWggWHSS9eoaS9ibao6aObp4IVh8kL56OzGII2PT-WYgOILRLLVbrWhCXYAGV2x1OVUUlzqoFu90kRm8tlM2gsL1eJJ+iEGBj0gVsFm0YWmVkctihMISSxWaw2AFUAApCI4nSrnbG1a71fGSUz9WzBezTFWvb7dO5MkjjMITZykwxjTnzbmkXnrEgAV3wHHwDAA7vhaJiJTUrjces9fFZGc9TLYrGqA9SEM9CcT7sznH5HHpjfFFmaEe4rTa7Y7ncYzvJJe6ZZ7DN7fYaA0GrCHvD4xs4S+yPnGYtCTYn4XySPblNgRGJneKc27cQ0EI4BiQ2T77noAzXyxrTIESGFGd4rP9DONTPHYTzk+3OwxLfxu+he9mQBcpR7h6Px4ylWyIrPfl9bIvJhZJIYA-7zFZoo27QgOB1C5RMsQHaU8UQABaYIQ2gv9G1AuFkmofAoHAnFIKHOwQz0bRtUMcd-j8WwpnuLdTVbdZMMvfMEFsPQQxMeViQmZkLC+f0oiQ5s4XNFNrVtB1sIvPMoIQCIK1BIsmXXWxtFJcZKJbAS934Ltylo8ShysfDHl9PRxjlekrC6Z9BhIBk5MkXpzFBFT+N3DsNIPI8tNdLCr20L0Wmscw5V0e5pMJYwBiI8kwrDRC5gTOEeHQXBckgbTB1uZwQw6RwrEBd9bEcQZYzsRDoiAA */
+  context: ({ input }) => ({
+    client: input.client,
+    results: []
+  }),
+  initial: "pending",
+  states: {
+    pending: {
+      invoke: {
+        src: "fetch data",
+        id: "fetchData",
+        input: ({ context }) => ({ client: context.client }),
+        onDone: {
+          actions: assign({ results: ({ event }) => event.output }),
+          target: "ready"
+        },
+        onError: {
+          target: "failed"
+        }
+      }
     },
-    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"
         }
       },
-      ready: {
-        initial: "unknown",
-        on: {
-          CREATE: { actions: ["targetCreate"] },
-          DELETE: { actions: ["targetDelete"] },
-          UPDATE: { actions: ["targetUpdate"] }
+      states: {
+        unknown: {
+          always: [
+            { target: "withData", guard: "hasData" },
+            { target: "withoutData", guard: "hasNoData" }
+          ]
         },
-        states: {
-          unknown: {
-            always: [
-              { cond: "hasData", target: "withData" },
-              { cond: "hasNoData", target: "withoutData" }
-            ]
-          },
-          withData: {
-            always: [{ cond: "hasNoData", target: "withoutData" }]
-          },
-          withoutData: {
-            always: [{ cond: "hasData", target: "withData" }]
-          }
+        withData: {
+          always: [{ target: "withoutData", guard: "hasNoData" }]
+        },
+        withoutData: {
+          always: [{ target: "withData", guard: "hasData" }]
         }
-      },
-      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
+    failed: {
+      type: "final"
     }
   }
-), fetcher = (deploymentTarget) => async (url, extraParams) => {
+}), 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())
@@ -160,28 +181,43 @@ const API_ENDPOINT_DEPLOYMENTS = "https://api.vercel.com/v5/now/deployments", AP
     isSuccess: aliasesIsSuccess && deploymentsIsSuccess,
     refetch
   };
-}, refreshMachine = Machine({
+}, refreshMachine = setup({
+  types: {
+    events: {}
+  }
+}).createMachine({
+  /** @xstate-layout N4IgpgJg5mDOIC5QAoC2BDAxgCwJYDswBKAOlwgBswBiAJQFEAxBgZQAkBtABgF1FQADgHtYuAC64h+fiAAeiAIwAmAGwkuGrkoAsAZhVKlAVm0KAHABoQAT0QBOJSRN27XFXaMmz2twF9fVmhYeISkAE5gAGYRsCFQ1PS0tADytNx8SCDCohJSMvIIPnYkxhpKXGZ22kY6xla2CAq6CiQudgDsRnYqKroVfe3+gRg4BMQkEdFwcXRMrGz0ACLpMtniktKZBUUlRmUVVTXadTaISrqObUY97QodvWa6QyBBo6ETUTHYkLPM9OwrTJrXKbUDbJTFLjtMzmWraOx3doqeqKMyOeHdXp3BTHXTVZ6vELjMBhMJCMK-eaAwQidZ5LaIY6Q6Gw47wxHI04IGEkDFma5NbTtY7ufwBED4IQQOAyQljIirWkg-KIAC0nIa6oJIyJpHIVEVOQ2KsKShRCDsunUGLcHi8PhU2uC8o+U1iBCghrpoLkZ2uTk0XCq7SRRl0Zg19itXHhIZ85lMEaUTre40mX0gXuVDIQnmKRhZKk6PmaVXN2PUaLsZhj2hUOJU-JTupIJLJYSzxpzeacheLXFL2nNrkrfW8SKFnhDYt8QA */
   initial: "idle",
   states: {
     idle: {
       on: {
-        REFRESH: "refreshing"
+        REFRESH: {
+          target: "refreshing"
+        }
       }
     },
     refreshing: {
       on: {
-        ERROR: "error",
-        REFRESHED: "refreshed"
+        ERROR: {
+          target: "error"
+        },
+        REFRESHED: {
+          target: "refreshed"
+        }
       }
     },
     refreshed: {
       on: {
-        REFRESH: "refreshing"
+        REFRESH: {
+          target: "refreshing"
+        }
       }
     },
     error: {
       on: {
-        REFRESH: "refreshing"
+        REFRESH: {
+          target: "refreshing"
+        }
       }
     }
   }
@@ -302,88 +338,98 @@ const TableCell = (props) => {
       }
     ) }) })
   ] });
-}, 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"
+}, deployMachine = setup({
+  types: {
+    context: {},
+    events: {},
+    input: {}
+  },
+  actors: {
+    deploy: fromPromise(async ({ input, signal }) => {
+      try {
+        if (!input.deployHook)
+          throw new Error("No deployHook URL defined");
+        const res = await fetch(input.deployHook, { method: "POST", signal }), data = await res.json();
+        if (!res.ok)
+          throw (data?.error).message || res.statusText;
+      } catch (err) {
+        throw typeof err == "string" ? err : (console.error("Unable to deploy with error:", err), new Error("Please check the developer console for more information"));
+      }
+    })
+  }
+}).createMachine({
+  /** @xstate-layout N4IgpgJg5mDOIC5QTABwDYHsCeA6AlhOmAMQAiAogAoAyA8gJoDaADALqKiqaz4Au+TADtOIAB6IATCxa4AnADYAHAHYArArUslAZjksNAGhDZEARk3yVmhSxVyHC-QBYAvq+MoMOXF6zZ8ISgSCGEwAiEAN0wAa3C-HwSAoIRA6IBjAEMBYVY2PNFuXhyRJHFENTMzXElFJSUzNTVnWx0FY1MESXVcZzUdM2k1OTUVBoV3TzR-X2mcQOCwACclzCXcDGyAMzWAW1nvPCSF1KjMLJK8grKi-kFS0AkESura5QamlpY2jvMB+QcDkqLH0wxYEw8ICSuFgAFd0uk4LByNR6Mx2IUeHdhKIns1ZN9BtYQVpRnJfl1JM55P1BnY1Ep9CpGpMoXM8MtVksUbRGNcuFiSriKs4CQNurYRgZ7BSGr1ASNupIzEo+kp3JChJgUPAyklMcV7sKEABadomRAmtQAhW2wE6VnQwjEA3Yh7lBDOSQUsxeqyaPoWYbWFSO9kHfwLV1CspPHSSHQ1ZyA1UKJzJlQ+iz+5oKewKWrfNyQ6FwhFI6NG2OINOSXDiypKAxtMyZi1dEE1Qk6L0FpTSUMl8OctaVnHVhC1+uDRvNhStin6XDaHQ9liSXTJiUa1xAA */
+  id: "deploy",
+  initial: "idle",
+  context: ({ input }) => ({
+    disabled: !1,
+    feedback: void 0,
+    label: void 0,
+    error: void 0,
+    deployHook: input.deployHook
+  }),
+  states: {
+    idle: {
+      entry: assign({
+        feedback: () => {
+        },
+        label: () => "Deploy"
+      }),
+      on: {
+        DEPLOY: {
+          target: "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"
+      }
+    },
+    deploying: {
+      entry: assign({
+        disabled: () => !0,
+        label: () => "Deploying"
+      }),
+      exit: assign({
+        disabled: () => !1,
+        label: () => "Deploy"
+      }),
+      invoke: {
+        src: "deploy",
+        input: ({ context }) => ({ deployHook: context.deployHook }),
+        onDone: {
+          target: "success"
+        },
+        onError: {
+          target: "error",
+          actions: assign({
+            error: ({ event }) => "error" in event ? event.error : "Unknown error"
+          })
         }
-      },
-      success: {
-        entry: [assign({ feedback: () => "Succesfully started!" })],
-        exit: assign({
-          feedback: () => {
-          }
-        }),
-        on: {
-          DEPLOY: "deploying"
+      }
+    },
+    success: {
+      entry: assign({
+        feedback: () => "Successfully started!"
+      }),
+      exit: assign({
+        feedback: () => {
         }
-      },
-      error: {
-        on: {
-          DEPLOY: "deploying"
+      }),
+      on: {
+        DEPLOY: {
+          target: "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"));
+    },
+    error: {
+      on: {
+        DEPLOY: {
+          target: "deploying"
         }
-      })
+      }
     }
   }
-), 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 = () => {
+}), DeployButton = (props) => {
+  const { deployHook, onDeploySuccess, targetName } = props, [deployState, deployStateTransition, deployStateInterpreter] = useMachine(deployMachine, {
+    input: { deployHook }
+  }), toast = useToast(), isError = deployState.matches("error"), isSuccess = deployState.matches("success"), handleDeploy = () => {
     deployStateTransition({ type: "DEPLOY" });
   };
   return useEffect(() => {
@@ -401,9 +447,10 @@ const TableCell = (props) => {
       title: WIDGET_NAME
     });
   }, [isError, isSuccess, toast, targetName, deployState.context.error]), useEffect(() => {
-    deployStateInterpreter.onTransition((state) => {
+    const subscription = deployStateInterpreter.subscribe((state) => {
       state.value === "success" && onDeploySuccess && onDeploySuccess();
     });
+    return () => subscription.unsubscribe();
   }, [deployStateInterpreter, onDeploySuccess]), /* @__PURE__ */ jsxs(Box, { padding: 3, style: { position: "relative" }, children: [
     /* @__PURE__ */ jsx(StateDebug, { name: "Deploy", state: deployState }),
     /* @__PURE__ */ jsx(
@@ -548,88 +595,100 @@ const TableCell = (props) => {
 }, 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" }
+}, formMachine = setup({
+  types: {},
+  actions: {
+    setId: assign({
+      id: ({ event }) => (assertEvent(event, ["UPDATE", "DELETE"]), event.id)
+    }),
+    setFormData: assign({
+      formData: ({ event }) => (assertEvent(event, ["CREATE", "UPDATE"]), event.formData)
+    }),
+    setMessage: assign({
+      message: ({ event }) => "data" in event && event.data && typeof event.data == "object" && "details" in event.data && event.data.details && typeof event.data.details == "object" && "description" in event.data.details ? event.data.details.description : "An error occurred"
+    }),
+    setDocument: assign({
+      document: ({ event }) => event.output
+    })
+  },
+  actors: {
+    "create document": fromPromise(
+      ({ input }) => input.client.create({
+        _id: `vercel.${uuid()}`,
+        _type: DEPLOYMENT_TARGET_DOCUMENT_TYPE,
+        ...input.formData
+      })
+    ),
+    "update document": fromPromise(
+      ({ input }) => input.client.patch(input.id).set(input.formData).commit()
+    ),
+    "delete document": fromPromise(({ input }) => input.client.delete(input.id))
+  }
+}).createMachine({
+  /** @xstate-layout N4IgpgJg5mDOIC5QAoC2BDAxgCwJYDswBKAOlwgBswBiAYQCUBRAQQBVGBtABgF1FQADgHtYuAC64h+fiAAeiAIwBmAGwkuGjQFYALAE4AHACYdWgwYA0IAJ6IjKgOwkdXFUYVa9h-Ua5KAvv5WaFh4hKTkVNQAqgAKACJsnLwywqISUjLyCMpqmtr6xqbmVrYIBgokWvlGWkpaCgZeKoHBGDgExGSUNPGMADKM7Nx8SCBp4pLSY9m56vm6hiZmljaIOipqdXpcDk1aWiYqBlqtICEd4SSYAE5g6BL4UNQQUmBk+ABuQgDW77f3MRgeJCTAAV1QYHwYmYmDEQhuI1SIkmmRmiGOShIDiUOh0SiaCgUegcDj0pTsjhI5iMewUpPsTSMZwuYS6AIeBGeYBuNwRJAEFAeADMEahrncHsDQRCoTC4QikWMJhlpqBspjsbj8YTiaTyWsEKouNT6noiX5zUpiQEgud2mzSGCBBBOU8Xm8Pt8-iRna6gSDwZDobD4YiUsqUaqshiDFicXiCea9WSKeVKiSVIclEYlIY-BUWQ7Ok6XW7ubz+YKRWLfWWAzLg-Kw0rBFGpjGEJqEzrkyTU4b6ToSHojHos7VXEc6kXQiWSBAwFRHs9XoQvb93ovl9Kg3LQ4qI230h30V241rE7r+wayro1A4dO4VHotA5fPTTnbWfPt2AV9QPJ8jcApCmIoo3OKf4NnuIYKuGozHqiapyLG8bakmRI3mmpjxk0XAuEoXAHI+DgtGc+BCIu8BjD+4TIieaLqogAC0Khpmxs6XF0kRgAxyGdk+aYKLSVR7Fweg6A4IkGFwChcY6EqAly-HRmeY7DnSY5GHGL4qFwRhpjpJpmriDjVMRLgGAp84ckCECqaezEIHoObUuZuwKH4xGPgoRnmCQpmOAcqhmPJ37Flcfrlo5TGoQgY4mgYHkeAS+iqH5hqSc4dSuCo+I6SoSjvjZUX1pAsUodkrlGO51TSd5b46JlZRebVuG7IcjRmA05FtHOVzQSpkaMVVdivs4CibHGxg6biSg4ZsJD2AccaFEVGwOKVXTQRVI0CWeNV1Z5jW+WmujDj4HjmMRnhEttpBAQilWdkdyX1V5RFNS1iAEpU1pHER9JWjogSBEAA */
+  context: ({ input }) => ({
+    client: input.client,
+    formData: {},
+    message: ""
+  }),
+  initial: "idle",
+  states: {
+    idle: {
+      on: {
+        CREATE: {
+          actions: ["setFormData"],
+          target: "creating"
         },
-        on: {
-          RESOLVE: "success",
-          REJECT: "error"
-        }
-      },
-      deleting: {
-        invoke: {
-          src: "deleteDocumentService",
-          onDone: { target: "success" },
-          onError: { actions: ["setMessage"], target: "error" }
+        UPDATE: {
+          actions: ["setId", "setFormData"],
+          target: "updating"
         },
-        on: {
-          RESOLVE: "success",
-          REJECT: "error"
-        }
-      },
-      success: {
-        invoke: {
-          src: "formSubmittedService"
+        DELETE: {
+          actions: "setId",
+          target: "deleting"
         }
-      },
-      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
-      }))
-    }
+      }
+    },
+    creating: {
+      tags: ["busy"],
+      invoke: {
+        src: "create document",
+        id: "createDocumentActor",
+        input: ({ context }) => ({ client: context.client, formData: context.formData }),
+        onDone: { actions: "setDocument", target: "created" },
+        onError: { actions: "setMessage", target: "error" }
+      }
+    },
+    created: { type: "final" },
+    updating: {
+      tags: ["busy"],
+      invoke: {
+        src: "update document",
+        id: "updateDocumentActor",
+        input: ({ context }) => ({
+          client: context.client,
+          id: context.id,
+          formData: context.formData
+        }),
+        onDone: { actions: "setDocument", target: "updated" },
+        onError: { actions: "setMessage", target: "error" }
+      }
+    },
+    updated: { type: "final" },
+    deleting: {
+      tags: ["busy"],
+      invoke: {
+        src: "delete document",
+        id: "deleteDocumentActor",
+        input: ({ context }) => ({ client: context.client, id: context.id }),
+        onDone: { target: "deleted" },
+        onError: { actions: "setMessage", target: "error" }
+      }
+    },
+    deleted: { type: "final" },
+    error: { type: "final" }
   }
-), sanitizeFormData = (formData) => Object.keys(formData).reduce((acc, key) => {
+}), 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 }) => ({
@@ -656,7 +715,7 @@ const TableCell = (props) => {
     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;
+  const { description, disabled, error, label, name, placeholder, value, onChange, onBlur } = props;
   return /* @__PURE__ */ jsxs(Box, { children: [
     /* @__PURE__ */ jsx(FormFieldInputLabel, { description, error, label, name }),
     /* @__PURE__ */ jsx(
@@ -669,6 +728,8 @@ const TableCell = (props) => {
         id: name,
         name,
         placeholder,
+        onChange,
+        onBlur,
         ref
       }
     )
@@ -685,77 +746,48 @@ const formSchema = yup.object().shape({
   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
+  const { deploymentTarget, onClose, onCreate, onDelete, onUpdate } = props, client = useSanityClient(), toast = useToast(), [formState, formStateTransition, formStateActorRef] = useActor(formMachine, {
+    input: { client }
+  }), formUpdating = formState.hasTag("busy"), {
     formState: { errors, isDirty, isValid },
     handleSubmit,
     register
   } = useForm({
+    // @ts-expect-error - fix typings later
     defaultValues: {
       deployHook: deploymentTarget?.deployHook || "",
       deployLimit: deploymentTarget?.deployLimit || 5,
-      name: deploymentTarget?.name,
-      projectId: deploymentTarget?.projectId,
+      name: deploymentTarget?.name || "",
+      projectId: deploymentTarget?.projectId || "",
       teamId: deploymentTarget?.teamId || "",
-      token: deploymentTarget?.token
+      token: deploymentTarget?.token || ""
     },
     mode: "onChange",
     resolver: yupResolver(formSchema)
-  }), onSubmit = async (formData) => {
+  });
+  useEffect(() => {
+    formState.matches("error") && toast.push({
+      status: "error",
+      title: formState.context.message || "An error occurred"
+    }), formState.status === "done" && onClose();
+  }, [formState, onClose, toast]);
+  const onSubmit = async (formData) => {
     const sanitizedFormData = sanitizeFormData(formData);
-    await formStateTransition(deploymentTarget ? "UPDATE" : "CREATE", {
-      formData: sanitizedFormData
-    });
-  }, handleDelete = () => {
-    formStateTransition("DELETE", { id: deploymentTarget?._id });
+    formStateTransition(deploymentTarget ? { type: "UPDATE", id: deploymentTarget._id, formData: sanitizedFormData } : { type: "CREATE", formData: sanitizedFormData }), await toPromise(formStateActorRef);
+    const snapshot = formStateActorRef.getSnapshot(), { document } = snapshot.context;
+    document && (snapshot.matches("created") ? onCreate?.(document) : snapshot.matches("updated") && onUpdate?.(document));
+  }, handleDelete = async () => {
+    const id = deploymentTarget._id;
+    formStateTransition({ type: "DELETE", id }), await toPromise(formStateActorRef), formStateActorRef.getSnapshot().matches("deleted") && onDelete?.(id);
   };
   return /* @__PURE__ */ jsx(
     Dialog,
     {
-      footer: /* @__PURE__ */ jsx(() => /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: deploymentTarget ? "space-between" : "flex-end", children: [
+      footer: /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: deploymentTarget ? "space-between" : "flex-end", children: [
         deploymentTarget && /* @__PURE__ */ jsx(
           Button,
           {
+            loading: formState.matches("deleting"),
             disabled: formUpdating,
             fontSize: 1,
             mode: "bleed",
@@ -767,14 +799,15 @@ const formSchema = yup.object().shape({
         /* @__PURE__ */ jsx(
           Button,
           {
-            disabled: formUpdating || !isDirty || !isValid,
+            loading: formState.matches("creating") || formState.matches("updating"),
+            disabled: !isDirty || !isValid,
             fontSize: 1,
             onClick: handleSubmit(onSubmit),
             text: deploymentTarget ? "Update and close" : "Create",
             tone: "primary"
           }
         )
-      ] }) }), {}),
+      ] }) }),
       header: `${deploymentTarget ? "Edit" : "Create"} deployment target`,
       id: "create",
       onClose,
@@ -790,8 +823,7 @@ const formSchema = yup.object().shape({
               description: "Name displayed in this plugin (e.g. production, staging)",
               error: errors?.name,
               label: "Name",
-              name: "name",
-              ref: register
+              ...register("name")
             }
           ),
           /* @__PURE__ */ jsx(
@@ -800,8 +832,7 @@ const formSchema = yup.object().shape({
               disabled: formUpdating,
               error: errors?.token,
               label: "Vercel Account Token",
-              name: "token",
-              ref: register
+              ...register("token")
             }
           ),
           /* @__PURE__ */ jsx(
@@ -810,8 +841,7 @@ const formSchema = yup.object().shape({
               disabled: formUpdating,
               error: errors?.projectId,
               label: "Vercel Project ID",
-              name: "projectId",
-              ref: register
+              ...register("projectId")
             }
           ),
           /* @__PURE__ */ jsx(
@@ -821,8 +851,7 @@ const formSchema = yup.object().shape({
               disabled: formUpdating,
               error: errors?.teamId,
               label: "Vercel Team ID (optional)",
-              name: "teamId",
-              ref: register
+              ...register("teamId")
             }
           ),
           /* @__PURE__ */ jsx(
@@ -832,8 +861,7 @@ const formSchema = yup.object().shape({
               disabled: formUpdating,
               error: errors?.deployHook,
               label: "Vercel Deploy Hook (optional)",
-              name: "deployHook",
-              ref: register
+              ...register("deployHook")
             }
           ),
           /* @__PURE__ */ jsx(
@@ -842,80 +870,83 @@ const formSchema = yup.object().shape({
               disabled: formUpdating,
               error: errors?.deployLimit,
               label: "Number of deploys to display",
-              name: "deployLimit",
-              ref: register({ valueAsNumber: !0 })
+              ...register("deployLimit", { valueAsNumber: !0 })
             }
           )
         ] })
       ] })
     }
   );
-}, dialogMachine = () => Machine(
-  {
-    context: {
-      editDeploymentTarget: void 0
-    },
-    initial: "idle",
-    states: {
-      idle: {
-        entry: assign({
-          editDeploymentTarget: () => {
-          }
-        }),
-        on: {
-          CREATE: "create",
-          EDIT: {
-            actions: ["setEditDeploymentTarget"],
-            target: "edit"
-          }
+}, dialogMachine = setup({
+  types: {
+    context: {},
+    events: {}
+  },
+  actions: {
+    setEditDeploymentTarget: assign({
+      editDeploymentTarget: ({ event }) => (assertEvent(event, "EDIT"), event.deploymentTarget)
+    })
+  }
+}).createMachine({
+  /** @xstate-layout N4IgpgJg5mDOIC5QAoC2BDAxgCwJYDswBKAOlwgBswBiAYQCUBRAQQBVGBtABgF1FQADgHtYuAC64h+fiAAeiAEwKArCQCcANgAcAdmUbNOhVx0BGLQBoQAT0SmAzApJcXXexoAsW5fbWaFAL4BVmhYeISk5FTUjAAiAJKs3HxIIMKiElIy8ghKqpq6+obGZpY2ivb2zq4e5moeXKZc3kEhGDgExCSQ4nQAMgDyAMqcvDLp4pLSqTn2DSQefn7uyq5aWvZWtgjmTqsuvnU6XMoK9q0goR0RJJgATmDoYjS0gyPJ4yKTWTOIc1wLJZqFZrDZbRBaUwkfZuew6SFcepuILBED4IQQOAyK7hYifDJTbKIAC0GnBCFJFxxnUilDA+O+01AOQ8CnJGxIGn29lMpjUxhcCh0VPauNIPTEDMyTLkiA8PhIxh5Cg8DS8pgM5L5UOalSMah0cP05hFYRptweT3pqQm0qJCHlVSVphVashmvKCDUAN17j0XNMqrUyhRASAA */
+  context: {
+    editDeploymentTarget: void 0
+  },
+  initial: "idle",
+  states: {
+    idle: {
+      entry: assign({
+        editDeploymentTarget: () => {
         }
-      },
-      edit: {
-        on: {
-          CLOSE: "idle"
+      }),
+      on: {
+        CREATE: {
+          target: "create"
+        },
+        EDIT: {
+          actions: "setEditDeploymentTarget",
+          target: "edit"
         }
-      },
-      create: {
-        on: {
-          CLOSE: "idle"
+      }
+    },
+    edit: {
+      on: {
+        CLOSE: {
+          target: "idle"
+        }
+      }
+    },
+    create: {
+      on: {
+        CLOSE: {
+          target: "idle"
         }
       }
     }
-  },
-  {
-    actions: {
-      setEditDeploymentTarget: assign((_context, event) => ({
-        editDeploymentTarget: event.deploymentTarget
-      }))
+  }
+}), queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 0,
+      staleTime: 0
     }
   }
-), Widget = () => {
+}), 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: {
-        gcTime: 0,
-        staleTime: 0
-      }
-    }
-  }), handleDialogClose = () => {
-    dialogStateTransition("CLOSE");
+    { input: { client } }
+  ), [dialogState, dialogStateTransition] = useMachine(dialogMachine), handleDialogClose = () => {
+    dialogStateTransition({ type: "CLOSE" });
   }, handleDialogShowCreate = () => {
-    dialogStateTransition("CREATE");
+    dialogStateTransition({ type: "CREATE" });
   }, handleDialogShowEdit = (deploymentTarget) => {
-    dialogStateTransition("EDIT", { deploymentTarget });
+    dialogStateTransition({ type: "EDIT", deploymentTarget });
   }, handleTargetCreate = (deploymentTarget) => {
-    deploymentTargetListStateTransition("CREATE", { deploymentTarget });
+    deploymentTargetListStateTransition({ type: "CREATE", deploymentTarget });
   }, handleTargetDelete = (id) => {
-    deploymentTargetListStateTransition("DELETE", { id });
+    deploymentTargetListStateTransition({ type: "DELETE", id });
   }, handleTargetUpdate = (deploymentTarget) => {
-    deploymentTargetListStateTransition("UPDATE", { deploymentTarget });
+    deploymentTargetListStateTransition({ type: "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: [
@@ -933,12 +964,12 @@ const formSchema = yup.object().shape({
       ] }),
       /* @__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: [
+        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(
+        deploymentTargetListState.matches({ ready: "withData" }) && /* @__PURE__ */ jsx(
           DeploymentTargets,
           {
             items: deploymentTargetListState.context.results,