@drawbridge/components 0.1.4 → 0.1.6

package/dist/dashboard/template-dashboard.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { isValidElement, useEffect, useState } from "react";
+import { isValidElement, useEffect, useRef, useState } from "react";
 import { keepPreviousData, useIsFetching, useQueryClient } from "@tanstack/react-query";
 import { notFound } from "next/navigation";
 import { isTransientError } from "@drawbridge/drawbridge-utils/fetch";
@@ -347,55 +347,74 @@ const TemplateDashboardTasks = ({
   });
   const array = [...items];
   const first = array.shift();
-  const openAll = () => {
-    open({
-      title: /* @__PURE__ */ jsxs(
-        "span",
-        {
-          ...{
-            className: "flex items-center space-x-3"
-          },
-          children: [
-            /* @__PURE__ */ jsx("span", { children: "Next steps" }),
-            /* @__PURE__ */ jsx(
-              Badge,
-              {
-                ...{
-                  type: "warning"
-                },
-                children: array.length + 1
-              }
-            )
-          ]
-        }
-      ),
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          ...{
-            className: "p-6"
-          },
-          children: /* @__PURE__ */ jsx(
-            List,
+  const nextSteps = () => ({
+    title: /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ...{
+          className: "flex items-center space-x-3"
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { children: "Next steps" }),
+          /* @__PURE__ */ jsx(
+            Badge,
             {
               ...{
-                items: [
-                  {
-                    ...first,
-                    onClick: () => close()
-                  },
-                  ...array.map((props) => ({
-                    ...props,
-                    onClick: () => close()
-                  }))
-                ]
-              }
+                type: "warning"
+              },
+              children: array.length + 1
             }
           )
-        }
-      )
-    });
+        ]
+      }
+    ),
+    children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...{
+          className: "p-6"
+        },
+        children: /* @__PURE__ */ jsx(
+          List,
+          {
+            ...{
+              items: [
+                {
+                  ...first,
+                  onClick: () => close()
+                },
+                ...array.map((props) => ({
+                  ...props,
+                  onClick: () => close()
+                }))
+              ]
+            }
+          }
+        )
+      }
+    )
+  });
+  const shown = useRef(null);
+  const openAll = () => {
+    const props = nextSteps();
+    shown.current = props.children;
+    open(props);
   };
+  useEffect(
+    () => {
+      const drawer = queryClient.getQueryData(["drawer"]);
+      if (!shown.current || !(drawer == null ? void 0 : drawer.active) || drawer.children !== shown.current) return;
+      if (!first) {
+        shown.current = null;
+        close();
+        return;
+      }
+      openAll();
+    },
+    // The tasks are the trigger; the rest follows them.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [items]
+  );
   if (first) {
     return /* @__PURE__ */ jsx(
       "div",
@@ -585,19 +604,23 @@ const TemplateDashboardResource = ({
   refetchOnMount,
   ...chrome
 }) => {
+  const dynamic = Object.values(chrome).some((value) => value instanceof Function);
   const errorHandler = error || ((query) => {
     var _a, _b, _c;
-    if (((_a = query == null ? void 0 : query.error) == null ? void 0 : _a.status) === 403 || isTransientError(query == null ? void 0 : query.error)) return /* @__PURE__ */ jsx(TemplateDashboard, { children: /* @__PURE__ */ jsx(
-      TemplateDashboardError,
-      {
-        ...{
-          error: {
-            ...(_b = query == null ? void 0 : query.error) == null ? void 0 : _b.data,
-            message: (_c = query == null ? void 0 : query.error) == null ? void 0 : _c.message
+    if (((_a = query == null ? void 0 : query.error) == null ? void 0 : _a.status) === 403 || isTransientError(query == null ? void 0 : query.error)) {
+      const panel = /* @__PURE__ */ jsx(
+        TemplateDashboardError,
+        {
+          ...{
+            error: {
+              ...(_b = query == null ? void 0 : query.error) == null ? void 0 : _b.data,
+              message: (_c = query == null ? void 0 : query.error) == null ? void 0 : _c.message
+            }
           }
         }
-      }
-    ) });
+      );
+      return dynamic ? /* @__PURE__ */ jsx(TemplateDashboard, { children: panel }) : panel;
+    }
     notFound();
   });
   const provider = {
@@ -619,7 +642,6 @@ const TemplateDashboardResource = ({
     }
   };
   const resolve = (value, data) => value instanceof Function ? value(data) : value;
-  const dynamic = Object.values(chrome).some((value) => value instanceof Function);
   if (!dynamic) return /* @__PURE__ */ jsx(
     TemplateDashboard,
     {
@@ -695,5 +717,6 @@ export {
   Refetch,
   TemplateDashboardError,
   TemplateDashboardResource,
+  TemplateDashboardTasks,
   template_dashboard_default as default
 };

package/dist/dashboard/template-socket.js

@@ -171,6 +171,9 @@ const TemplateSocketCampaign = ({
         queryClient.invalidateQueries({
           queryKey: ["organization-campaign-prize-draws", prize]
         });
+        queryClient.invalidateQueries({
+          queryKey: ["organization-campaign-prizes", params.organization, params.campaign]
+        });
       }
     },
     // The live handler applies leads as a delta, which can't be replayed after
@@ -184,7 +187,8 @@ const TemplateSocketCampaign = ({
     resync: [
       ["campaign", params == null ? void 0 : params.campaign],
       ["campaign-advertisements", params == null ? void 0 : params.organization, params == null ? void 0 : params.campaign],
-      ["organization-campaign-advertisement"]
+      ["organization-campaign-advertisement"],
+      ["organization-campaign-prizes", params == null ? void 0 : params.organization, params == null ? void 0 : params.campaign]
     ]
   });
   return children;
@@ -435,10 +439,12 @@ const TemplateSocketOrganization = ({
           queryKey: ["organization-members", params.organization]
         });
       },
-      // Sync wrote or cleared a workflow's run-time issue. The open workflow
-      // page shows it, the list carries it, and the dashboard's Next steps
-      // and the sidebar Workflows dot are built server-side off the org and
-      // menu queries — so all four refetch.
+      // @story workflows/list
+      // Sync emits this on every workflow status change, on delete, and when
+      // a run-time issue is written or cleared. The open workflow page shows
+      // it, the list carries it, and the dashboard's Next steps and the
+      // sidebar Workflows dot are built server-side off the org and menu
+      // queries — so all four refetch.
       "organization.workflows": () => {
         queryClient.invalidateQueries({
           queryKey: ["organization-workflows", params.organization]
@@ -452,6 +458,12 @@ const TemplateSocketOrganization = ({
         queryClient.invalidateQueries({
           queryKey: ["menu", "organization", params.organization]
         });
+        queryClient.invalidateQueries({
+          queryKey: ["organizations"]
+        });
+        queryClient.invalidateQueries({
+          queryKey: ["shared"]
+        });
       },
       // A running workflow's steps transition ( insert + status change ) in
       // sync, which coalesces the burst into one emit per org room. The
@@ -477,6 +489,7 @@ const TemplateSocketOrganization = ({
       ["organization-connection", params == null ? void 0 : params.organization],
       ["organization-campaign-products", params == null ? void 0 : params.organization],
       ["organization-workflows", params == null ? void 0 : params.organization],
+      ["organization-workflow", params == null ? void 0 : params.organization],
       ["organization-workflow-catalog", params == null ? void 0 : params.organization],
       ["organization-workflow-steps"],
       ["organization-contacts", params == null ? void 0 : params.organization],

package/dist/dashboard/template-socket.mjs

@@ -136,6 +136,9 @@ const TemplateSocketCampaign = ({
         queryClient.invalidateQueries({
           queryKey: ["organization-campaign-prize-draws", prize]
         });
+        queryClient.invalidateQueries({
+          queryKey: ["organization-campaign-prizes", params.organization, params.campaign]
+        });
       }
     },
     // The live handler applies leads as a delta, which can't be replayed after
@@ -149,7 +152,8 @@ const TemplateSocketCampaign = ({
     resync: [
       ["campaign", params == null ? void 0 : params.campaign],
       ["campaign-advertisements", params == null ? void 0 : params.organization, params == null ? void 0 : params.campaign],
-      ["organization-campaign-advertisement"]
+      ["organization-campaign-advertisement"],
+      ["organization-campaign-prizes", params == null ? void 0 : params.organization, params == null ? void 0 : params.campaign]
     ]
   });
   return children;
@@ -400,10 +404,12 @@ const TemplateSocketOrganization = ({
           queryKey: ["organization-members", params.organization]
         });
       },
-      // Sync wrote or cleared a workflow's run-time issue. The open workflow
-      // page shows it, the list carries it, and the dashboard's Next steps
-      // and the sidebar Workflows dot are built server-side off the org and
-      // menu queries — so all four refetch.
+      // @story workflows/list
+      // Sync emits this on every workflow status change, on delete, and when
+      // a run-time issue is written or cleared. The open workflow page shows
+      // it, the list carries it, and the dashboard's Next steps and the
+      // sidebar Workflows dot are built server-side off the org and menu
+      // queries — so all four refetch.
       "organization.workflows": () => {
         queryClient.invalidateQueries({
           queryKey: ["organization-workflows", params.organization]
@@ -417,6 +423,12 @@ const TemplateSocketOrganization = ({
         queryClient.invalidateQueries({
           queryKey: ["menu", "organization", params.organization]
         });
+        queryClient.invalidateQueries({
+          queryKey: ["organizations"]
+        });
+        queryClient.invalidateQueries({
+          queryKey: ["shared"]
+        });
       },
       // A running workflow's steps transition ( insert + status change ) in
       // sync, which coalesces the burst into one emit per org room. The
@@ -442,6 +454,7 @@ const TemplateSocketOrganization = ({
       ["organization-connection", params == null ? void 0 : params.organization],
       ["organization-campaign-products", params == null ? void 0 : params.organization],
       ["organization-workflows", params == null ? void 0 : params.organization],
+      ["organization-workflow", params == null ? void 0 : params.organization],
       ["organization-workflow-catalog", params == null ? void 0 : params.organization],
       ["organization-workflow-steps"],
       ["organization-contacts", params == null ? void 0 : params.organization],

package/dist/shared/lib/video.js

@@ -0,0 +1,63 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var video_exports = {};
+__export(video_exports, {
+  provideHls: () => provideHls,
+  startSeek: () => startSeek,
+  videoErrorAction: () => videoErrorAction,
+  videoOverlay: () => videoOverlay
+});
+module.exports = __toCommonJS(video_exports);
+const provideHls = (Hls, target) => {
+  if (Hls && target && !target.Hls) target.Hls = Hls;
+};
+const videoErrorAction = ({
+  data,
+  error,
+  mp4,
+  url
+}) => {
+  if (data && !data.fatal) return "ignore";
+  if ((error == null ? void 0 : error.name) === "AbortError") return "ignore";
+  if ((error == null ? void 0 : error.name) === "NotAllowedError") return "fail";
+  return mp4 && url !== mp4 ? "retry" : "fail";
+};
+const videoOverlay = ({
+  failed,
+  poster,
+  videoPaintable
+}) => {
+  if (videoPaintable) return null;
+  if (poster) return "poster";
+  return failed ? "warning" : "loader";
+};
+const SHOWN_START = 1e-3;
+const startSeek = ({
+  reset,
+  wasReset
+}) => {
+  if (reset) return 0;
+  return wasReset ? SHOWN_START : null;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  provideHls,
+  startSeek,
+  videoErrorAction,
+  videoOverlay
+});

package/dist/shared/lib/video.mjs

@@ -0,0 +1,37 @@
+const provideHls = (Hls, target) => {
+  if (Hls && target && !target.Hls) target.Hls = Hls;
+};
+const videoErrorAction = ({
+  data,
+  error,
+  mp4,
+  url
+}) => {
+  if (data && !data.fatal) return "ignore";
+  if ((error == null ? void 0 : error.name) === "AbortError") return "ignore";
+  if ((error == null ? void 0 : error.name) === "NotAllowedError") return "fail";
+  return mp4 && url !== mp4 ? "retry" : "fail";
+};
+const videoOverlay = ({
+  failed,
+  poster,
+  videoPaintable
+}) => {
+  if (videoPaintable) return null;
+  if (poster) return "poster";
+  return failed ? "warning" : "loader";
+};
+const SHOWN_START = 1e-3;
+const startSeek = ({
+  reset,
+  wasReset
+}) => {
+  if (reset) return 0;
+  return wasReset ? SHOWN_START : null;
+};
+export {
+  provideHls,
+  startSeek,
+  videoErrorAction,
+  videoOverlay
+};

package/dist/video.js

@@ -36,8 +36,13 @@ var import_dynamic = __toESM(require("next/dynamic"));
 var import_react = require("react");
 var import_loader = __toESM(require("./icons/loader"));
 var import_warning = __toESM(require("./icons/warning"));
+var import_video = require("./shared/lib/video");
 const ReactPlayer = (0, import_dynamic.default)(
-  () => import("react-player/lazy"),
+  () => Promise.all([
+    import("hls.js").then((module2) => (0, import_video.provideHls)(module2.default || module2, window)).catch(() => {
+    }),
+    import("react-player/lazy")
+  ]).then(([, player]) => player),
   {
     ssr: false
   }
@@ -67,17 +72,22 @@ const Video = ({
 }) => {
   var _a, _b, _c, _d;
   const durationFired = (0, import_react.useRef)(false);
+  const errored = (0, import_react.useRef)(false);
   const [player, setPlayer] = (0, import_react.useState)();
   const [videoUrl, setVideoUrl] = (0, import_react.useState)(hls ? hls : mp4);
   const [mountPlayer, setMountPlayer] = (0, import_react.useState)(!defer);
   const [posterPainted, setPosterPainted] = (0, import_react.useState)(false);
   const [videoPaintable, setVideoPaintable] = (0, import_react.useState)(false);
   const [failed, setFailed] = (0, import_react.useState)(false);
+  const wasReset = (0, import_react.useRef)(reset);
   (0, import_react.useEffect)(
     () => {
-      if (player && reset) {
-        player.seekTo(0, "seconds");
+      if (!player) return;
+      const target = (0, import_video.startSeek)({ reset, wasReset: wasReset.current });
+      if (target !== null) {
+        player.seekTo(target, "seconds");
       }
+      wasReset.current = reset;
     },
     [player, reset]
   );
@@ -109,6 +119,11 @@ const Video = ({
     },
     [defer, mountPlayer, poster, posterPainted]
   );
+  const overlay = (0, import_video.videoOverlay)({
+    failed,
+    poster,
+    videoPaintable
+  });
   const inner = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
     mountPlayer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       ReactPlayer,
@@ -154,11 +169,19 @@ const Video = ({
             onTime == null ? void 0 : onTime(seconds);
           },
           progressInterval: 100,
-          onError: () => {
-            if (mp4 && videoUrl !== mp4) {
+          onError: (error, data) => {
+            const action = (0, import_video.videoErrorAction)({
+              data,
+              error,
+              mp4,
+              url: videoUrl
+            });
+            if (action === "ignore" || errored.current) return;
+            if (action === "retry") {
               setVideoUrl(mp4);
               return;
             }
+            errored.current = true;
             setFailed(true);
             onError();
           },
@@ -183,7 +206,7 @@ const Video = ({
         }
       }
     ),
-    !videoPaintable && poster && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    overlay === "poster" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "img",
       {
         ...{
@@ -204,7 +227,7 @@ const Video = ({
         }
       }
     ),
-    !videoPaintable && !poster && !failed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    overlay === "loader" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         ...{
@@ -227,7 +250,7 @@ const Video = ({
         )
       }
     ),
-    failed && !poster && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    overlay === "warning" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         ...{

package/dist/video.mjs

@@ -4,8 +4,13 @@ import dynamic from "next/dynamic";
 import { Fragment, useEffect, useRef, useState } from "react";
 import Loader from "./icons/loader.mjs";
 import Warning from "./icons/warning.mjs";
+import { provideHls, startSeek, videoErrorAction, videoOverlay } from "./shared/lib/video.mjs";
 const ReactPlayer = dynamic(
-  () => import("react-player/lazy"),
+  () => Promise.all([
+    import("hls.js").then((module) => provideHls(module.default || module, window)).catch(() => {
+    }),
+    import("react-player/lazy")
+  ]).then(([, player]) => player),
   {
     ssr: false
   }
@@ -35,17 +40,22 @@ const Video = ({
 }) => {
   var _a, _b, _c, _d;
   const durationFired = useRef(false);
+  const errored = useRef(false);
   const [player, setPlayer] = useState();
   const [videoUrl, setVideoUrl] = useState(hls ? hls : mp4);
   const [mountPlayer, setMountPlayer] = useState(!defer);
   const [posterPainted, setPosterPainted] = useState(false);
   const [videoPaintable, setVideoPaintable] = useState(false);
   const [failed, setFailed] = useState(false);
+  const wasReset = useRef(reset);
   useEffect(
     () => {
-      if (player && reset) {
-        player.seekTo(0, "seconds");
+      if (!player) return;
+      const target = startSeek({ reset, wasReset: wasReset.current });
+      if (target !== null) {
+        player.seekTo(target, "seconds");
       }
+      wasReset.current = reset;
     },
     [player, reset]
   );
@@ -77,6 +87,11 @@ const Video = ({
     },
     [defer, mountPlayer, poster, posterPainted]
   );
+  const overlay = videoOverlay({
+    failed,
+    poster,
+    videoPaintable
+  });
   const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
     mountPlayer && /* @__PURE__ */ jsx(
       ReactPlayer,
@@ -122,11 +137,19 @@ const Video = ({
             onTime == null ? void 0 : onTime(seconds);
           },
           progressInterval: 100,
-          onError: () => {
-            if (mp4 && videoUrl !== mp4) {
+          onError: (error, data) => {
+            const action = videoErrorAction({
+              data,
+              error,
+              mp4,
+              url: videoUrl
+            });
+            if (action === "ignore" || errored.current) return;
+            if (action === "retry") {
               setVideoUrl(mp4);
               return;
             }
+            errored.current = true;
             setFailed(true);
             onError();
           },
@@ -151,7 +174,7 @@ const Video = ({
         }
       }
     ),
-    !videoPaintable && poster && /* @__PURE__ */ jsx(
+    overlay === "poster" && /* @__PURE__ */ jsx(
       "img",
       {
         ...{
@@ -172,7 +195,7 @@ const Video = ({
         }
       }
     ),
-    !videoPaintable && !poster && !failed && /* @__PURE__ */ jsx(
+    overlay === "loader" && /* @__PURE__ */ jsx(
       "div",
       {
         ...{
@@ -195,7 +218,7 @@ const Video = ({
         )
       }
     ),
-    failed && !poster && /* @__PURE__ */ jsx(
+    overlay === "warning" && /* @__PURE__ */ jsx(
       "div",
       {
         ...{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawbridge/components",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "exports": {
     "./advertisement": {
       "types": "./types/advertisement.d.ts",
@@ -1437,6 +1437,11 @@
       "import": "./dist/shared/lib/icon-labels.mjs",
       "default": "./dist/shared/lib/icon-labels.js"
     },
+    "./shared/lib/video": {
+      "types": "./types/shared/lib/video.d.ts",
+      "import": "./dist/shared/lib/video.mjs",
+      "default": "./dist/shared/lib/video.js"
+    },
     "./shared/lib/yup": {
       "types": "./types/shared/lib/yup.d.ts",
       "import": "./dist/shared/lib/yup.mjs",
@@ -1510,15 +1515,15 @@
     "exports": "node scripts/exports.js",
     "test": ". \"$HOME/.nvm/nvm.sh\" && nvm use && node --test",
     "build": ". \"$HOME/.nvm/nvm.sh\" && nvm use && tsup && node scripts/esm-extensions.js && node --test && npm publish",
-    "storybook": "storybook dev -p 6006",
-    "storybook:build": "storybook build",
-    "test-storybook": "vitest --project=storybook",
+    "app": "storybook dev -p 3003",
+    "app:build": "storybook build",
+    "test:app": "vitest --project=storybook",
     "dev": "tsup --watch --onSuccess \"node scripts/esm-extensions.js\""
   },
   "peerDependencies": {
     "@analytics/google-tag-manager": ">=0.5.5",
     "@drawbridge/drawbridge-telemetry": ">=0.0.19",
-    "@drawbridge/drawbridge-utils": ">=0.0.221",
+    "@drawbridge/drawbridge-utils": ">=0.0.222",
     "@headlessui/react": ">=2.1.2",
     "@hookform/resolvers": ">=3.1.1",
     "@sentry/nextjs": ">=10.58.0",
@@ -1636,9 +1641,9 @@
   },
   "devDependencies": {
     "@analytics/google-tag-manager": "0.5.5",
-    "@drawbridge/drawbridge-agents": "0.1.74",
+    "@drawbridge/drawbridge-agents": "0.1.90",
     "@drawbridge/drawbridge-telemetry": "0.0.19",
-    "@drawbridge/drawbridge-utils": "0.0.221",
+    "@drawbridge/drawbridge-utils": "0.0.222",
     "@headlessui/react": "2.2.9",
     "@hookform/resolvers": "3.1.1",
     "@sentry/nextjs": "10.58.0",
@@ -1694,6 +1699,7 @@
     "@dnd-kit/utilities": "3.2.2",
     "embla-carousel-fade": "8.6.0",
     "embla-carousel-react": "8.6.0",
+    "hls.js": "1.6.19",
     "react-floater": "0.7.9",
     "react-phone-number-input": "3.4.12",
     "react-player": "2.16.0"

package/types/dashboard/form-action.d.ts

@@ -3,12 +3,15 @@ import { ComponentType, ReactNode } from 'react';
 export interface FormActionProps {
 	// The submit button's label; defaults to 'Confirm'.
 	action?: ReactNode;
-	// The mutation run on submit.
-	callback: () => Promise<unknown>;
+	// The mutation run on submit. It receives the form's values: any field the
+	// children render through a Controller (form context), seeded by defaultValues.
+	callback: ( values: Record<string, unknown> ) => Promise<unknown>;
 	// Shows a secondary button beside the action.
 	cancel?: { action?: ReactNode; onClick?: () => void };
 	children?: ReactNode;
 	className?: string;
+	// Initial values for fields rendered in the children.
+	defaultValues?: Record<string, unknown>;
 	disabled?: boolean;
 	fineprint?: ReactNode;
 	onError?: ( error: Error ) => void;