@drawbridge/components 0.1.5 → 0.1.7

package/README.md

@@ -4,12 +4,16 @@ The components for Drawbridge. Three folders: `shared/` renders on both the dash
 
 ## Work on a component
 
-    npm run storybook        # every component, every state, at http://localhost:6006
-    npm run test-storybook   # renders every story in Chromium; fails on an error
+    npm run app              # every component, every state, at http://localhost:3003 (the family's ports: dashboard 3000, share 3001, website 3002)
+    npm run test:app         # renders every story in Chromium; fails on an error
     npm test                 # exports resolve, every component has a story, unit tests
 
 A component without a `.stories.js` beside it fails `npm test`. One story per visible state.
 
+## The app on the web
+
+`https://components.trydrawbridge.com` is this app, built from `main` on every push (`.do/app.yaml`, `Dockerfile`): `npm run app:build` makes the static site and `server.js` serves it behind the family's staging gate, the `BASIC_AUTH_USERNAME` and `BASIC_AUTH_PASSWORD` pair set on the DigitalOcean app, the same values that open the dev dashboard and website. Unset both and the site is public; `/health` is always open.
+
 ## See it in an app without publishing
 
     npm run dev                                   # here: rebuilds dist on change

package/dist/bridge/template-subdomain-gallery.js

@@ -460,7 +460,9 @@ const TemplateSubdomainGallery = ({
                 "div",
                 {
                   ...{
-                    className: "items-center absolute top-0 left-0 z-50 flex w-full px-3 py-5 lg:p-5 " + (length > 1 ? "flex" : "hidden")
+                    // @story public-entry/view-page
+                    // Above the skip buttons and holds no control: taps pass through to them.
+                    className: "items-center absolute top-0 left-0 z-50 flex w-full px-3 py-5 lg:p-5 pointer-events-none " + (length > 1 ? "flex" : "hidden")
                   },
                   children: gallery.map(({ id }, key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     "div",

package/dist/bridge/template-subdomain-gallery.mjs

@@ -428,7 +428,9 @@ const TemplateSubdomainGallery = ({
                 "div",
                 {
                   ...{
-                    className: "items-center absolute top-0 left-0 z-50 flex w-full px-3 py-5 lg:p-5 " + (length > 1 ? "flex" : "hidden")
+                    // @story public-entry/view-page
+                    // Above the skip buttons and holds no control: taps pass through to them.
+                    className: "items-center absolute top-0 left-0 z-50 flex w-full px-3 py-5 lg:p-5 pointer-events-none " + (length > 1 ? "flex" : "hidden")
                   },
                   children: gallery.map(({ id }, key) => /* @__PURE__ */ jsx(
                     "div",

package/dist/bridge/template-subdomain.js

@@ -122,7 +122,10 @@ const TemplateSubdomain = ({
           "div",
           {
             ...{
-              className: "z-30 fixed top-0 left-0 right-1 lg:left-auto lg:right-1.5 lg:w-auto",
+              // @story public-entry/view-page
+              // Fixed over the top of the gallery: taps on its empty space (and the
+              // logo, a picture) pass through to the gallery; its buttons keep theirs.
+              className: "z-30 fixed top-0 left-0 right-1 lg:left-auto lg:right-1.5 lg:w-auto pointer-events-none [&_a]:pointer-events-auto [&_button]:pointer-events-auto",
               style: {
                 ...gallery.length > 1 && {
                   "--controls-padding-top": controlPaddingTop + "px"
@@ -216,7 +219,10 @@ const TemplateSubdomain = ({
                         "div",
                         {
                           ...{
-                            className: "lg:hidden absolute bottom-2 left-0 w-full px-6 pb-4 pt-12 lg:pt-20 text-center z-20 space-y-4",
+                            // @story public-entry/view-page
+                            // Sits over the lower gallery, above its skip buttons: taps pass through
+                            // to the gallery except on this block's own buttons and links.
+                            className: "lg:hidden absolute bottom-2 left-0 w-full px-6 pb-4 pt-12 lg:pt-20 text-center z-20 space-y-4 pointer-events-none [&_a]:pointer-events-auto [&_button]:pointer-events-auto",
                             style: {
                               ...(style == null ? void 0 : style.text) && {
                                 color: (_a2 = style.text.color) == null ? void 0 : _a2.rgb

package/dist/bridge/template-subdomain.mjs

@@ -90,7 +90,10 @@ const TemplateSubdomain = ({
           "div",
           {
             ...{
-              className: "z-30 fixed top-0 left-0 right-1 lg:left-auto lg:right-1.5 lg:w-auto",
+              // @story public-entry/view-page
+              // Fixed over the top of the gallery: taps on its empty space (and the
+              // logo, a picture) pass through to the gallery; its buttons keep theirs.
+              className: "z-30 fixed top-0 left-0 right-1 lg:left-auto lg:right-1.5 lg:w-auto pointer-events-none [&_a]:pointer-events-auto [&_button]:pointer-events-auto",
               style: {
                 ...gallery.length > 1 && {
                   "--controls-padding-top": controlPaddingTop + "px"
@@ -184,7 +187,10 @@ const TemplateSubdomain = ({
                         "div",
                         {
                           ...{
-                            className: "lg:hidden absolute bottom-2 left-0 w-full px-6 pb-4 pt-12 lg:pt-20 text-center z-20 space-y-4",
+                            // @story public-entry/view-page
+                            // Sits over the lower gallery, above its skip buttons: taps pass through
+                            // to the gallery except on this block's own buttons and links.
+                            className: "lg:hidden absolute bottom-2 left-0 w-full px-6 pb-4 pt-12 lg:pt-20 text-center z-20 space-y-4 pointer-events-none [&_a]:pointer-events-auto [&_button]:pointer-events-auto",
                             style: {
                               ...(style == null ? void 0 : style.text) && {
                                 color: (_a2 = style.text.color) == null ? void 0 : _a2.rgb

package/dist/dashboard/form-action.js

@@ -42,78 +42,88 @@ const FormAction = ({
   children,
   callback,
   className = "space-y-4",
+  defaultValues,
   disabled,
   fineprint,
   onError,
   onSuccess
 }) => {
-  const { handleSubmit } = (0, import_form.useForm)();
+  const methods = (0, import_form.useForm)({
+    defaultValues,
+    guard: false
+  });
   const mutation = (0, import_react_query.useMutation)({
     mutationFn: callback,
     onSuccess,
     onError,
     retry: false
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_form2.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_form.FormProvider,
     {
-      ...{
-        className: "w-full space-y-6",
-        onSubmit: handleSubmit(() => mutation.mutate())
-      },
-      children: [
-        children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            ...{
-              className
-            },
-            children
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          import_fieldset.default,
-          {
-            ...{
-              // Side by side once there is something to cancel, so the pair reads as a
-              // prompt; equal grid columns, as a Button never shrinks in a flex row.
-              className: cancel ? "grid grid-cols-2 gap-4" : "space-y-6",
-              disabled: disabled || mutation.isPending
-            },
-            children: [
-              cancel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_button.default,
-                {
-                  ...{
-                    onClick: cancel.onClick,
-                    variant: "secondary"
-                  },
-                  children: cancel.action || "Cancel"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_button.default,
-                {
-                  ...{
-                    loading: mutation == null ? void 0 : mutation.isPending,
-                    type: "submit"
-                  },
-                  children: action
-                }
-              )
-            ]
-          }
-        ),
-        fineprint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            ...{
-              className: "text-sm text-center"
-            },
-            children: fineprint
-          }
-        )
-      ]
+      ...methods,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_form2.default,
+        {
+          ...{
+            className: "w-full space-y-6",
+            onSubmit: methods.handleSubmit((values) => mutation.mutate(values))
+          },
+          children: [
+            children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                ...{
+                  className
+                },
+                children
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_fieldset.default,
+              {
+                ...{
+                  // Side by side once there is something to cancel, so the pair reads as a
+                  // prompt; equal grid columns, as a Button never shrinks in a flex row.
+                  className: cancel ? "grid grid-cols-2 gap-4" : "space-y-6",
+                  disabled: disabled || mutation.isPending
+                },
+                children: [
+                  cancel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_button.default,
+                    {
+                      ...{
+                        onClick: cancel.onClick,
+                        variant: "secondary"
+                      },
+                      children: cancel.action || "Cancel"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_button.default,
+                    {
+                      ...{
+                        loading: mutation == null ? void 0 : mutation.isPending,
+                        type: "submit"
+                      },
+                      children: action
+                    }
+                  )
+                ]
+              }
+            ),
+            fineprint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                ...{
+                  className: "text-sm text-center"
+                },
+                children: fineprint
+              }
+            )
+          ]
+        }
+      )
     }
   );
 };

package/dist/dashboard/form-action.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useForm } from "../shared/lib/form.mjs";
+import { FormProvider, useForm } from "../shared/lib/form.mjs";
 import { useMutation } from "@tanstack/react-query";
 import Form from "../shared/form.mjs";
 import Fieldset from "../shared/fieldset.mjs";
@@ -10,78 +10,88 @@ const FormAction = ({
   children,
   callback,
   className = "space-y-4",
+  defaultValues,
   disabled,
   fineprint,
   onError,
   onSuccess
 }) => {
-  const { handleSubmit } = useForm();
+  const methods = useForm({
+    defaultValues,
+    guard: false
+  });
   const mutation = useMutation({
     mutationFn: callback,
     onSuccess,
     onError,
     retry: false
   });
-  return /* @__PURE__ */ jsxs(
-    Form,
+  return /* @__PURE__ */ jsx(
+    FormProvider,
     {
-      ...{
-        className: "w-full space-y-6",
-        onSubmit: handleSubmit(() => mutation.mutate())
-      },
-      children: [
-        children && /* @__PURE__ */ jsx(
-          "div",
-          {
-            ...{
-              className
-            },
-            children
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          Fieldset,
-          {
-            ...{
-              // Side by side once there is something to cancel, so the pair reads as a
-              // prompt; equal grid columns, as a Button never shrinks in a flex row.
-              className: cancel ? "grid grid-cols-2 gap-4" : "space-y-6",
-              disabled: disabled || mutation.isPending
-            },
-            children: [
-              cancel && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  ...{
-                    onClick: cancel.onClick,
-                    variant: "secondary"
-                  },
-                  children: cancel.action || "Cancel"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  ...{
-                    loading: mutation == null ? void 0 : mutation.isPending,
-                    type: "submit"
-                  },
-                  children: action
-                }
-              )
-            ]
-          }
-        ),
-        fineprint && /* @__PURE__ */ jsx(
-          "div",
-          {
-            ...{
-              className: "text-sm text-center"
-            },
-            children: fineprint
-          }
-        )
-      ]
+      ...methods,
+      children: /* @__PURE__ */ jsxs(
+        Form,
+        {
+          ...{
+            className: "w-full space-y-6",
+            onSubmit: methods.handleSubmit((values) => mutation.mutate(values))
+          },
+          children: [
+            children && /* @__PURE__ */ jsx(
+              "div",
+              {
+                ...{
+                  className
+                },
+                children
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Fieldset,
+              {
+                ...{
+                  // Side by side once there is something to cancel, so the pair reads as a
+                  // prompt; equal grid columns, as a Button never shrinks in a flex row.
+                  className: cancel ? "grid grid-cols-2 gap-4" : "space-y-6",
+                  disabled: disabled || mutation.isPending
+                },
+                children: [
+                  cancel && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      ...{
+                        onClick: cancel.onClick,
+                        variant: "secondary"
+                      },
+                      children: cancel.action || "Cancel"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      ...{
+                        loading: mutation == null ? void 0 : mutation.isPending,
+                        type: "submit"
+                      },
+                      children: action
+                    }
+                  )
+                ]
+              }
+            ),
+            fineprint && /* @__PURE__ */ jsx(
+              "div",
+              {
+                ...{
+                  className: "text-sm text-center"
+                },
+                children: fineprint
+              }
+            )
+          ]
+        }
+      )
     }
   );
 };

package/dist/dashboard/form-filters-analytics.js

@@ -260,7 +260,8 @@ const FormFiltersAnalytics = ({
               "div",
               {
                 ...{
-                  className: "absolute left-0 bottom-0 h-[110px] w-full flex items-center justify-between space-x-6 px-6 border-t"
+                  // Equal columns, not a flex row: a Button never shrinks, so two full-width ones would overflow.
+                  className: "absolute left-0 bottom-0 h-[100px] w-full grid grid-flow-col auto-cols-fr items-center gap-6 px-6 bg-gray-light border-t border-gray"
                 },
                 children: [
                   onReset && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/dashboard/form-filters-analytics.mjs

@@ -228,7 +228,8 @@ const FormFiltersAnalytics = ({
               "div",
               {
                 ...{
-                  className: "absolute left-0 bottom-0 h-[110px] w-full flex items-center justify-between space-x-6 px-6 border-t"
+                  // Equal columns, not a flex row: a Button never shrinks, so two full-width ones would overflow.
+                  className: "absolute left-0 bottom-0 h-[100px] w-full grid grid-flow-col auto-cols-fr items-center gap-6 px-6 bg-gray-light border-t border-gray"
                 },
                 children: [
                   onReset && /* @__PURE__ */ jsx(

package/dist/dashboard/form-organization-connection.js

@@ -49,6 +49,7 @@ var import_input_checkbox = __toESM(require("../input-checkbox"));
 var import_input_switch = __toESM(require("../shared/input-switch"));
 var import_button = __toESM(require("../shared/button"));
 var import_copy_to_clipboard = __toESM(require("../shared/copy-to-clipboard"));
+var import_connection_controls = require("./lib/connection-controls");
 const Submit = ({
   disabled,
   isSubmitting,
@@ -252,7 +253,7 @@ const FormOrganizationConnection = ({
       onError(error);
     }
   };
-  const connected = Boolean(values == null ? void 0 : values.id) && (values == null ? void 0 : values.status) !== "error";
+  const connected = (0, import_connection_controls.isConnected)(values);
   const inputs = (0, import_react.useMemo)(
     () => fields.filter((field) => field.input && !(connected && field.secret)),
     [connected, fields]

package/dist/dashboard/form-organization-connection.mjs

@@ -17,6 +17,7 @@ import InputCheckbox from "../input-checkbox.mjs";
 import InputSwitch from "../shared/input-switch.mjs";
 import Button from "../shared/button.mjs";
 import CopyToClipboard from "../shared/copy-to-clipboard.mjs";
+import { isConnected } from "./lib/connection-controls.mjs";
 const Submit = ({
   disabled,
   isSubmitting,
@@ -220,7 +221,7 @@ const FormOrganizationConnection = ({
       onError(error);
     }
   };
-  const connected = Boolean(values == null ? void 0 : values.id) && (values == null ? void 0 : values.status) !== "error";
+  const connected = isConnected(values);
   const inputs = useMemo(
     () => fields.filter((field) => field.input && !(connected && field.secret)),
     [connected, fields]

package/dist/dashboard/lib/connection-controls.js

@@ -17,9 +17,12 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var connection_controls_exports = {};
 __export(connection_controls_exports, {
-  connectionControls: () => connectionControls
+  connectionControls: () => connectionControls,
+  isConnected: () => isConnected
 });
 module.exports = __toCommonJS(connection_controls_exports);
+var import_reconnect = require("@drawbridge/drawbridge-utils/connections/reconnect");
+const isConnected = (connection) => Boolean(connection == null ? void 0 : connection.id) && !(0, import_reconnect.requiresReconnect)(connection);
 const connectionControls = (connection) => {
   var _a;
   const paused = Boolean(connection == null ? void 0 : connection.paused);
@@ -30,5 +33,6 @@ const connectionControls = (connection) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  connectionControls
+  connectionControls,
+  isConnected
 });

package/dist/dashboard/lib/connection-controls.mjs

@@ -1,3 +1,5 @@
+import { requiresReconnect } from "@drawbridge/drawbridge-utils/connections/reconnect";
+const isConnected = (connection) => Boolean(connection == null ? void 0 : connection.id) && !requiresReconnect(connection);
 const connectionControls = (connection) => {
   var _a;
   const paused = Boolean(connection == null ? void 0 : connection.paused);
@@ -7,5 +9,6 @@ const connectionControls = (connection) => {
   };
 };
 export {
-  connectionControls
+  connectionControls,
+  isConnected
 };

package/dist/dashboard/steps.js

@@ -29,10 +29,12 @@ var steps_exports = {};
 __export(steps_exports, {
   default: () => steps_default,
   groupTitle: () => groupTitle,
+  replyExcerpt: () => replyExcerpt,
   rowLabel: () => rowLabel
 });
 module.exports = __toCommonJS(steps_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_query = require("@tanstack/react-query");
 var import_drawbridge_utils = require("@drawbridge/drawbridge-utils");
 var import_accordion = __toESM(require("./accordion"));
 var import_paged = __toESM(require("./paged"));
@@ -57,6 +59,14 @@ const indicatorType = (status) => {
   if (status === "partial" || status === "skipped") return "warning";
   return "inactive";
 };
+const replyExcerpt = (response, length = 300) => {
+  const wrapped = response && typeof response === "object" && !Array.isArray(response) && Object.keys(response).length === 1 && "body" in response;
+  const reply = wrapped ? response.body : response;
+  if (reply === void 0 || reply === null) return null;
+  const text = (typeof reply === "string" ? reply : JSON.stringify(reply)).replace(/<(script|style)\b[\s\S]*?<\/\1>/gi, " ").replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
+  if (!text) return null;
+  return text.length > length ? text.slice(0, length) + "\u2026" : text;
+};
 const StepItem = ({
   updatedAt,
   error: chunkError,
@@ -69,6 +79,7 @@ const StepItem = ({
 }) => {
   const error = chunkError || status === "failed" && message || null;
   const notice = error || status === "skipped" && message || null;
+  const reply = error ? replyExcerpt(response) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
@@ -136,13 +147,51 @@ const StepItem = ({
                     }
                   )
                 },
-                children: notice ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_card_task.default,
+                children: notice ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "div",
                   {
                     ...{
-                      message: notice,
-                      type: error ? "error" : "warning"
-                    }
+                      className: "space-y-3"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_card_task.default,
+                        {
+                          ...{
+                            message: notice,
+                            type: error ? "error" : "warning"
+                          }
+                        }
+                      ),
+                      reply && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        "div",
+                        {
+                          ...{
+                            className: "space-y-1"
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "p",
+                              {
+                                ...{
+                                  className: "text-xs text-gray-dark"
+                                },
+                                children: "Response"
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "p",
+                              {
+                                ...{
+                                  className: "text-xs break-words"
+                                },
+                                children: reply
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ]
                   }
                 ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   import_code_formatter.default,
@@ -175,11 +224,15 @@ const groupTitle = ({ count, email, items, kind, pending }) => {
   const entries = count + " new " + (count === 1 ? "entry" : "entries");
   return "Team notification \u2014 " + entries + (pending ? ", sending" : "");
 };
-const rowLabel = ({ item, kind }) => {
-  if (kind !== "notify") return item == null ? void 0 : item.slug;
+const rowLabel = ({ item, kind, labels = [] }) => {
+  var _a;
+  if (kind !== "notify") return ((_a = labels.find((option) => option.value === (item == null ? void 0 : item.slug))) == null ? void 0 : _a.key) || (item == null ? void 0 : item.slug);
   return NOTIFY_LABELS[item == null ? void 0 : item.status] || NOTIFY_LABELS.succeeded;
 };
-const Group = ({ group }) => {
+const Group = ({
+  group,
+  labels
+}) => {
   const { items, kind } = group;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -206,7 +259,7 @@ const Group = ({ group }) => {
           {
             ...{
               ...item,
-              label: rowLabel({ item, kind })
+              label: rowLabel({ item, kind, labels })
             }
           },
           key
@@ -220,6 +273,8 @@ const Steps = ({
   limit = 24,
   organization
 }) => {
+  var _a, _b, _c, _d;
+  const labels = (_d = (_c = (_b = (_a = (0, import_react_query.useQueryClient)().getQueryData(["app"])) == null ? void 0 : _a.enums) == null ? void 0 : _b.step) == null ? void 0 : _c.type) == null ? void 0 : _d.options;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_paged.default,
     {
@@ -245,7 +300,8 @@ const Steps = ({
             Group,
             {
               ...{
-                group
+                group,
+                labels
               }
             },
             key
@@ -259,5 +315,6 @@ var steps_default = Steps;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   groupTitle,
+  replyExcerpt,
   rowLabel
 });