@drawbridge/components 0.1.2 → 0.1.4

package/dist/dashboard/table-cell-title.js

@@ -45,6 +45,7 @@ const TableCellTitle = (props) => {
     asset,
     avatar,
     error,
+    icon,
     indicator,
     status,
     subtitle,
@@ -88,6 +89,8 @@ const TableCellTitle = (props) => {
                   asset,
                   // As tall as the avatar, so two lines of text sit beside it.
                   className: "w-10 h-10",
+                  // What the row is when it has no image ( a link's social glyph ); the image wins.
+                  icon,
                   sizes: "40px",
                   title
                 }

package/dist/dashboard/table-cell-title.mjs

@@ -12,6 +12,7 @@ const TableCellTitle = (props) => {
     asset,
     avatar,
     error,
+    icon,
     indicator,
     status,
     subtitle,
@@ -55,6 +56,8 @@ const TableCellTitle = (props) => {
                   asset,
                   // As tall as the avatar, so two lines of text sit beside it.
                   className: "w-10 h-10",
+                  // What the row is when it has no image ( a link's social glyph ); the image wins.
+                  icon,
                   sizes: "40px",
                   title
                 }

package/dist/dashboard/template-dashboard.js

@@ -52,6 +52,7 @@ var import_link_back = __toESM(require("./link-back"));
 var import_wrapper_gradient = __toESM(require("../wrapper-gradient"));
 var import_image = __toESM(require("next/image"));
 var import_link = __toESM(require("./link"));
+var import_loader2 = __toESM(require("../shared/loader"));
 const Refetch = ({
   invalidate = []
 }) => {
@@ -494,15 +495,41 @@ const TemplateDashboardTasks = ({
   }
   return null;
 };
+const SETTLE_QUIET = 50;
+const SETTLE_CAP = 3e3;
+const useSettled = (enabled) => {
+  const queryClient = (0, import_react_query.useQueryClient)();
+  const fetching = (0, import_react_query.useIsFetching)();
+  const [settled, setSettled] = (0, import_react.useState)(!enabled);
+  (0, import_react.useEffect)(
+    () => {
+      if (settled) return void 0;
+      const cap = setTimeout(() => setSettled(true), SETTLE_CAP);
+      return () => clearTimeout(cap);
+    },
+    [settled]
+  );
+  (0, import_react.useEffect)(
+    () => {
+      if (settled || fetching) return void 0;
+      const quiet = setTimeout(() => queryClient.isFetching() || setSettled(true), SETTLE_QUIET);
+      return () => clearTimeout(quiet);
+    },
+    [fetching, queryClient, settled]
+  );
+  return settled;
+};
 const TemplateDashboard = ({
   back,
   badges = [],
   children,
   className = "px-6 pb-6 md:px-12 md:pb-12",
+  settle = false,
   tasks,
   title,
   ...rest
 }) => {
+  const settled = useSettled(settle);
   const classes = {
     container: [
       "flex flex-col w-full justify-between flex-1 min-h-0"
@@ -512,7 +539,9 @@ const TemplateDashboard = ({
       className
     ],
     wrapper: [
-      "relative flex flex-col justify-between h-full w-full space-y-6 pt-6 md:pt-12"
+      "relative flex flex-col justify-between h-full w-full space-y-6 pt-6 md:pt-12",
+      // Hidden, not unmounted: the sections stay laid out and their requests run.
+      ...settled ? [] : ["invisible"]
     ]
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -562,6 +591,14 @@ const TemplateDashboard = ({
               }
             )
           }
+        ),
+        !settled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_loader2.default,
+          {
+            ...{
+              className: "visible"
+            }
+          }
         )
       ]
     }

package/dist/dashboard/template-dashboard.mjs

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { isValidElement, useState } from "react";
-import { keepPreviousData, useQueryClient } from "@tanstack/react-query";
+import { isValidElement, useEffect, useState } from "react";
+import { keepPreviousData, useIsFetching, useQueryClient } from "@tanstack/react-query";
 import { notFound } from "next/navigation";
 import { isTransientError } from "@drawbridge/drawbridge-utils/fetch";
 import { useDrawer } from "./lib/hooks.mjs";
@@ -17,6 +17,7 @@ import LinkBack from "./link-back.mjs";
 import WrapperGradient from "../wrapper-gradient.mjs";
 import Image from "next/image";
 import Link from "./link.mjs";
+import Loader from "../shared/loader.mjs";
 const Refetch = ({
   invalidate = []
 }) => {
@@ -459,15 +460,41 @@ const TemplateDashboardTasks = ({
   }
   return null;
 };
+const SETTLE_QUIET = 50;
+const SETTLE_CAP = 3e3;
+const useSettled = (enabled) => {
+  const queryClient = useQueryClient();
+  const fetching = useIsFetching();
+  const [settled, setSettled] = useState(!enabled);
+  useEffect(
+    () => {
+      if (settled) return void 0;
+      const cap = setTimeout(() => setSettled(true), SETTLE_CAP);
+      return () => clearTimeout(cap);
+    },
+    [settled]
+  );
+  useEffect(
+    () => {
+      if (settled || fetching) return void 0;
+      const quiet = setTimeout(() => queryClient.isFetching() || setSettled(true), SETTLE_QUIET);
+      return () => clearTimeout(quiet);
+    },
+    [fetching, queryClient, settled]
+  );
+  return settled;
+};
 const TemplateDashboard = ({
   back,
   badges = [],
   children,
   className = "px-6 pb-6 md:px-12 md:pb-12",
+  settle = false,
   tasks,
   title,
   ...rest
 }) => {
+  const settled = useSettled(settle);
   const classes = {
     container: [
       "flex flex-col w-full justify-between flex-1 min-h-0"
@@ -477,7 +504,9 @@ const TemplateDashboard = ({
       className
     ],
     wrapper: [
-      "relative flex flex-col justify-between h-full w-full space-y-6 pt-6 md:pt-12"
+      "relative flex flex-col justify-between h-full w-full space-y-6 pt-6 md:pt-12",
+      // Hidden, not unmounted: the sections stay laid out and their requests run.
+      ...settled ? [] : ["invisible"]
     ]
   };
   return /* @__PURE__ */ jsxs(
@@ -527,6 +556,14 @@ const TemplateDashboard = ({
               }
             )
           }
+        ),
+        !settled && /* @__PURE__ */ jsx(
+          Loader,
+          {
+            ...{
+              className: "visible"
+            }
+          }
         )
       ]
     }

package/dist/icons/filter-small.js

@@ -0,0 +1,46 @@
+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 filter_small_exports = {};
+__export(filter_small_exports, {
+  default: () => filter_small_default
+});
+module.exports = __toCommonJS(filter_small_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+const FilterSmall = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "svg",
+  {
+    ...{
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      viewBox: "-3 -3 30 30",
+      ...props
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        ...{
+          d: "M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      }
+    )
+  }
+);
+var filter_small_default = FilterSmall;

package/dist/icons/filter-small.mjs

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+const FilterSmall = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    ...{
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      viewBox: "-3 -3 30 30",
+      ...props
+    },
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        ...{
+          d: "M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      }
+    )
+  }
+);
+var filter_small_default = FilterSmall;
+export {
+  filter_small_default as default
+};

package/dist/icons/plus-small.js

@@ -0,0 +1,46 @@
+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 plus_small_exports = {};
+__export(plus_small_exports, {
+  default: () => plus_small_default
+});
+module.exports = __toCommonJS(plus_small_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+const PlusSmall = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "svg",
+  {
+    ...{
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      viewBox: "-3 -3 30 30",
+      ...props
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        ...{
+          d: "M12 4.5v15m7.5-7.5h-15",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      }
+    )
+  }
+);
+var plus_small_default = PlusSmall;

package/dist/icons/plus-small.mjs

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+const PlusSmall = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    ...{
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      viewBox: "-3 -3 30 30",
+      ...props
+    },
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        ...{
+          d: "M12 4.5v15m7.5-7.5h-15",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      }
+    )
+  }
+);
+var plus_small_default = PlusSmall;
+export {
+  plus_small_default as default
+};

package/dist/shared/lib/helpers.js

@@ -288,7 +288,9 @@ const published = {
 };
 const running = {
   active: { text: "Active", type: "success" },
-  error: { text: "Error", type: "error" }
+  error: { text: "Error", type: "error" },
+  paused: { text: "Paused", type: "warning" },
+  pending: { text: "Pending", type: "warning" }
 };
 const organizationStatuses = ["active", "canceled", "incomplete", "incomplete_expired", "locked", "past_due", "paused", "suspended", "trialing", "unpaid", "unsubscribed"];
 const statuses = {
@@ -299,9 +301,14 @@ const statuses = {
     disqualified: { text: "Disqualified", type: "error" },
     verified: { text: "Verified", type: "success" }
   },
+  // Every Stripe invoice status, in one set of colours across the dashboard: money
+  // owed is red, paid green, a draft or a voided invoice gray.
   invoice: {
+    draft: { text: "Draft", type: "secondary" },
+    open: { text: "Open", type: "error" },
     paid: { text: "Paid", type: "success" },
-    void: { text: "Void", type: "error" }
+    uncollectible: { text: "Uncollectible", type: "error" },
+    void: { text: "Void", type: "secondary" }
   },
   // A lead's status is derived per campaign from the denial records: approved or
   // denied. Approved is every lead's normal state, so only Denied shows, as on
@@ -309,11 +316,11 @@ const statuses = {
   lead: {
     denied: { text: "Denied", type: "error" }
   },
-  // pending is a member who has been invited and not yet accepted.
+  // pending is a member who has been invited and not yet accepted: yellow, like every pending.
   member: {
-    pending: { text: "Invited", type: "primary" }
+    pending: { text: "Invited", type: "warning" }
   },
-  organization: Object.fromEntries(organizationStatuses.map((status) => [status, { text: (0, import_drawbridge_utils.capitalize)(status.replace("_", " ")), type: ["active", "unsubscribed"].includes(status) ? "success" : "error" }])),
+  organization: Object.fromEntries(organizationStatuses.map((status) => [status, { text: (0, import_drawbridge_utils.capitalize)(status.replace("_", " ")), type: ["active", "unsubscribed"].includes(status) ? "success" : status === "paused" ? "warning" : "error" }])),
   page: published,
   prize: published,
   range: {

package/dist/shared/lib/helpers.mjs

@@ -229,7 +229,9 @@ const published = {
 };
 const running = {
   active: { text: "Active", type: "success" },
-  error: { text: "Error", type: "error" }
+  error: { text: "Error", type: "error" },
+  paused: { text: "Paused", type: "warning" },
+  pending: { text: "Pending", type: "warning" }
 };
 const organizationStatuses = ["active", "canceled", "incomplete", "incomplete_expired", "locked", "past_due", "paused", "suspended", "trialing", "unpaid", "unsubscribed"];
 const statuses = {
@@ -240,9 +242,14 @@ const statuses = {
     disqualified: { text: "Disqualified", type: "error" },
     verified: { text: "Verified", type: "success" }
   },
+  // Every Stripe invoice status, in one set of colours across the dashboard: money
+  // owed is red, paid green, a draft or a voided invoice gray.
   invoice: {
+    draft: { text: "Draft", type: "secondary" },
+    open: { text: "Open", type: "error" },
     paid: { text: "Paid", type: "success" },
-    void: { text: "Void", type: "error" }
+    uncollectible: { text: "Uncollectible", type: "error" },
+    void: { text: "Void", type: "secondary" }
   },
   // A lead's status is derived per campaign from the denial records: approved or
   // denied. Approved is every lead's normal state, so only Denied shows, as on
@@ -250,11 +257,11 @@ const statuses = {
   lead: {
     denied: { text: "Denied", type: "error" }
   },
-  // pending is a member who has been invited and not yet accepted.
+  // pending is a member who has been invited and not yet accepted: yellow, like every pending.
   member: {
-    pending: { text: "Invited", type: "primary" }
+    pending: { text: "Invited", type: "warning" }
   },
-  organization: Object.fromEntries(organizationStatuses.map((status) => [status, { text: capitalize(status.replace("_", " ")), type: ["active", "unsubscribed"].includes(status) ? "success" : "error" }])),
+  organization: Object.fromEntries(organizationStatuses.map((status) => [status, { text: capitalize(status.replace("_", " ")), type: ["active", "unsubscribed"].includes(status) ? "success" : status === "paused" ? "warning" : "error" }])),
   page: published,
   prize: published,
   range: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawbridge/components",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "exports": {
     "./advertisement": {
       "types": "./types/advertisement.d.ts",
@@ -1027,6 +1027,11 @@
       "import": "./dist/icons/facebook.mjs",
       "default": "./dist/icons/facebook.js"
     },
+    "./icons/filter-small": {
+      "types": "./types/icons/filter-small.d.ts",
+      "import": "./dist/icons/filter-small.mjs",
+      "default": "./dist/icons/filter-small.js"
+    },
     "./icons/filter": {
       "types": "./types/icons/filter.d.ts",
       "import": "./dist/icons/filter.mjs",
@@ -1137,6 +1142,11 @@
       "import": "./dist/icons/play.mjs",
       "default": "./dist/icons/play.js"
     },
+    "./icons/plus-small": {
+      "types": "./types/icons/plus-small.d.ts",
+      "import": "./dist/icons/plus-small.mjs",
+      "default": "./dist/icons/plus-small.js"
+    },
     "./icons/plus": {
       "types": "./types/icons/plus.d.ts",
       "import": "./dist/icons/plus.mjs",

package/types/dashboard/table-cell-title.d.ts

@@ -10,6 +10,8 @@ export interface TableCellTitleProps {
 	// Why the record needs attention, as alertFor returns it, or just the words.
 	// Shown with the small Error: the warning, or the lock a locked record passes.
 	error?: { icon?: ComponentType<SVGProps<SVGSVGElement>>; message?: string | null } | string | null;
+	// Drawn in the thumbnail's place when asset has no image ( a link's social glyph ); an image wins.
+	icon?: ComponentType<SVGProps<SVGSVGElement>> | null;
 	// A campaign's dot when there is no picture, with the words it shows on hover: active
 	// ('Accepting submissions'), error (published, 'Not accepting submissions'), inactive (draft).
 	indicator?: { label: string; type: 'active' | 'error' | 'inactive' | 'warning' } | null;

package/types/dashboard/template-dashboard.d.ts

@@ -44,6 +44,9 @@ export interface TemplateDashboardProps {
 	controls?: TemplateDashboardButton[];
 	// A <Refetch /> beside the title.
 	refetch?: ReactNode;
+	// The page appears once: hidden behind the loader until no request is in flight
+	// (at most 3 s), so sections don't land one by one. The first load only.
+	settle?: boolean;
 	// Next steps: the first item in a bar, the rest in the drawer.
 	tasks?: { items?: TemplateDashboardTask[] };
 	// No header without a title.

package/types/icons/filter-small.d.ts

@@ -0,0 +1,5 @@
+import { ComponentType, SVGProps } from 'react';
+
+declare const Icon: ComponentType<SVGProps<SVGSVGElement>>;
+
+export default Icon;

package/types/icons/plus-small.d.ts

@@ -0,0 +1,5 @@
+import { ComponentType, SVGProps } from 'react';
+
+declare const Icon: ComponentType<SVGProps<SVGSVGElement>>;
+
+export default Icon;