@drawbridge/components 0.1.4 → 0.1.6

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/card-task.js

@@ -61,27 +61,25 @@ const CardTask = ({
     classes.push(className);
   }
   const button = () => {
-    const { element = import_link.default, text, ...props } = rest == null ? void 0 : rest.button;
+    const { element = import_link.default, onClick, text, ...props } = rest == null ? void 0 : rest.button;
+    const close = () => {
+      modal.close();
+      queryClient.setQueryData(
+        ["drawer"],
+        (data) => ({
+          ...data,
+          active: false
+        })
+      );
+    };
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_button.default,
       {
         ...{
           element,
-          onClick: () => {
-            modal.close();
-            queryClient.setQueryData(
-              ["drawer"],
-              (data) => ({
-                ...data,
-                active: false
-              })
-            );
-            if (props.onClick) {
-              props.onClick();
-            }
-          },
           size: "small",
-          ...props
+          ...props,
+          onClick: onClick || close
         },
         children: text
       }

package/dist/dashboard/card-task.mjs

@@ -29,27 +29,25 @@ const CardTask = ({
     classes.push(className);
   }
   const button = () => {
-    const { element = Link, text, ...props } = rest == null ? void 0 : rest.button;
+    const { element = Link, onClick, text, ...props } = rest == null ? void 0 : rest.button;
+    const close = () => {
+      modal.close();
+      queryClient.setQueryData(
+        ["drawer"],
+        (data) => ({
+          ...data,
+          active: false
+        })
+      );
+    };
     return /* @__PURE__ */ jsx(
       Button,
       {
         ...{
           element,
-          onClick: () => {
-            modal.close();
-            queryClient.setQueryData(
-              ["drawer"],
-              (data) => ({
-                ...data,
-                active: false
-              })
-            );
-            if (props.onClick) {
-              props.onClick();
-            }
-          },
           size: "small",
-          ...props
+          ...props,
+          onClick: onClick || close
         },
         children: text
       }

package/dist/dashboard/drawer-subscription.js

@@ -294,9 +294,9 @@ const DrawerSubscriptionSummary = ({
                 "Subtotal",
                 "$" + (0, import_drawbridge_utils.formatNumber)((first.subtotal || 0) / 100, 2)
               ),
-              renderLine(
+              first.discount > 0 && renderLine(
                 "Discount",
-                "-$" + (0, import_drawbridge_utils.formatNumber)((first.discount || 0) / 100, 2)
+                "-$" + (0, import_drawbridge_utils.formatNumber)(first.discount / 100, 2)
               ),
               renderLine(
                 "Tax",

package/dist/dashboard/drawer-subscription.mjs

@@ -262,9 +262,9 @@ const DrawerSubscriptionSummary = ({
                 "Subtotal",
                 "$" + formatNumber((first.subtotal || 0) / 100, 2)
               ),
-              renderLine(
+              first.discount > 0 && renderLine(
                 "Discount",
-                "-$" + formatNumber((first.discount || 0) / 100, 2)
+                "-$" + formatNumber(first.discount / 100, 2)
               ),
               renderLine(
                 "Tax",

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-organization-campaign-link.js

@@ -78,7 +78,9 @@ const FormOrganizationCampaignLink = ({
       import_yup.default.object({
         asset: import_yup.default.object().label("Asset").nullable(),
         title: import_yup.default.string().label("Title").required().max(150),
-        url: import_yup.default.string().label("Url").max(150).matches(import_drawbridge_utils.regex.url, "Url must start with https").required().url()
+        // @story links/create
+        // The server stores any length; a UTM-tagged URL passes 150 easily.
+        url: import_yup.default.string().label("Url").max(2048).matches(import_drawbridge_utils.regex.url, "Url must start with https").required().url()
       })
     ),
     values

package/dist/dashboard/form-organization-campaign-link.mjs

@@ -46,7 +46,9 @@ const FormOrganizationCampaignLink = ({
       yup.object({
         asset: yup.object().label("Asset").nullable(),
         title: yup.string().label("Title").required().max(150),
-        url: yup.string().label("Url").max(150).matches(regex.url, "Url must start with https").required().url()
+        // @story links/create
+        // The server stores any length; a UTM-tagged URL passes 150 easily.
+        url: yup.string().label("Url").max(2048).matches(regex.url, "Url must start with https").required().url()
       })
     ),
     values

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/recharts.js

@@ -256,6 +256,7 @@ const ChartLine = ({
     "shortcodes"
   ],
   empty,
+  format = (value) => value,
   legend = true
 }) => {
   const [active, setActive] = (0, import_react.useState)(datasets);
@@ -432,8 +433,11 @@ const ChartLine = ({
               import_recharts.Tooltip,
               {
                 ...{
+                  // @story redemptions/overview
+                  // A money chart passes `format` so a day's summed gross reads
+                  // "$12.50", not 12.500000000000002; counts pass nothing.
                   formatter: (value, name) => [
-                    value,
+                    format(value),
                     label(name)
                   ]
                 }

package/dist/dashboard/recharts.mjs

@@ -223,6 +223,7 @@ const ChartLine = ({
     "shortcodes"
   ],
   empty,
+  format = (value) => value,
   legend = true
 }) => {
   const [active, setActive] = useState(datasets);
@@ -399,8 +400,11 @@ const ChartLine = ({
               Tooltip,
               {
                 ...{
+                  // @story redemptions/overview
+                  // A money chart passes `format` so a day's summed gross reads
+                  // "$12.50", not 12.500000000000002; counts pass nothing.
                   formatter: (value, name) => [
-                    value,
+                    format(value),
                     label(name)
                   ]
                 }