@drawbridge/components 0.0.78 → 0.1.1

package/dist/dashboard/template-dashboard.js

@@ -0,0 +1,697 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var template_dashboard_exports = {};
+__export(template_dashboard_exports, {
+  Refetch: () => Refetch,
+  TemplateDashboardError: () => TemplateDashboardError,
+  TemplateDashboardResource: () => TemplateDashboardResource,
+  default: () => template_dashboard_default
+});
+module.exports = __toCommonJS(template_dashboard_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react_query = require("@tanstack/react-query");
+var import_navigation = require("next/navigation");
+var import_fetch = require("@drawbridge/drawbridge-utils/fetch");
+var import_hooks = require("./lib/hooks");
+var import_icon_labels = require("../shared/lib/icon-labels");
+var import_provider_resource = __toESM(require("./provider-resource"));
+var import_arrow_right = __toESM(require("../icons/arrow-right"));
+var import_loader = __toESM(require("../icons/loader"));
+var import_refresh = __toESM(require("../icons/refresh"));
+var import_empty = __toESM(require("../shared/empty"));
+var import_badge = __toESM(require("../shared/badge"));
+var import_button = __toESM(require("../shared/button"));
+var import_list = __toESM(require("./list"));
+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"));
+const Refetch = ({
+  invalidate = []
+}) => {
+  const queryClient = (0, import_react_query.useQueryClient)();
+  const [isRefreshing, setIsRefreshing] = (0, import_react.useState)(false);
+  if (!(invalidate == null ? void 0 : invalidate.length)) return null;
+  const onClick = async () => {
+    setIsRefreshing(true);
+    await Promise.all(
+      invalidate.map((queryKey) => queryClient.invalidateQueries({ queryKey }))
+    );
+    setIsRefreshing(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_badge.default,
+    {
+      ...{
+        "aria-label": "Refresh",
+        "data-guide": "button-refetch",
+        element: "button",
+        onClick,
+        type: "primary"
+      },
+      children: isRefreshing ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_loader.default,
+        {
+          ...{
+            className: "w-3.5 h-3.5"
+          }
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_refresh.default,
+        {
+          ...{
+            className: "w-3.5 h-3.5"
+          }
+        }
+      )
+    }
+  );
+};
+const renderButton = (props, key) => {
+  if (!props) return null;
+  if (typeof props.render === "function") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: props.render() }, key);
+  }
+  const {
+    indicator,
+    svg,
+    title,
+    variant = "secondary",
+    ...rest
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_button.default,
+    {
+      ...{
+        "aria-label": !title && (0, import_icon_labels.iconLabel)(svg) || void 0,
+        icon: svg,
+        indicator: indicator ? "success" : null,
+        inline: true,
+        size: "small",
+        variant,
+        ...rest
+      },
+      children: title
+    },
+    key
+  );
+};
+const TemplateDashboardHeader = ({
+  badges = [],
+  header,
+  refetch,
+  ...rest
+}) => {
+  const { button, controls = [] } = rest;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...{
+        className: "flex items-center w-full space-y-2 z-10 px-6 md:px-12"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          ...{
+            className: "flex flex-col w-full justify-between sm:flex-row sm:items-center sm:space-y-0 " + ((controls == null ? void 0 : controls.length) > 0 || button ? "space-y-4" : "")
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              ...{
+                className: "w-full flex items-center justify-between"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    ...{
+                      className: "w-full flex items-center space-x-4 overflow-hidden"
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      import_wrapper_gradient.default,
+                      {
+                        ...{
+                          classNameScroll: "flex items-center space-x-4",
+                          horizontal: true
+                        },
+                        children: [
+                          header,
+                          ((0, import_react.isValidElement)(refetch) || (badges == null ? void 0 : badges.length) > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                            "div",
+                            {
+                              ...{
+                                className: "flex items-center space-x-2 pr-6"
+                              },
+                              children: [
+                                (0, import_react.isValidElement)(refetch) && refetch,
+                                badges.map(({ text, type }, key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  import_badge.default,
+                                  {
+                                    ...{
+                                      type: type || "primary"
+                                    },
+                                    children: text
+                                  },
+                                  key
+                                ))
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    ...{
+                      className: "flex items-center justify-end shrink-0"
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "div",
+                      {
+                        ...{
+                          className: "flex items-center space-x-2 shrink-0"
+                        },
+                        children: [
+                          (controls == null ? void 0 : controls.length) > 0 && controls.map((props, key) => renderButton(props, key)),
+                          button && renderButton(
+                            {
+                              variant: "success",
+                              ...button
+                            },
+                            "button-primary"
+                          )
+                        ]
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const TemplateDashboardTitle = ({
+  back,
+  title
+}) => {
+  const h1 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: title });
+  if (back) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_link_back.default,
+      {
+        ...{
+          href: back
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "h1",
+          {
+            ...{
+              className: "truncate"
+            },
+            children: title
+          }
+        )
+      }
+    );
+  }
+  return h1;
+};
+const TemplateDashboardError = ({
+  back,
+  className,
+  error,
+  title,
+  ...rest
+}) => {
+  const classes = [
+    "relative flex flex-col w-full h-full",
+    className
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...{
+        className: classes.join(" ")
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_empty.default,
+        {
+          ...{
+            variant: "primary"
+          },
+          children: [
+            back && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                ...{
+                  className: "absolute top-6 left-6"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_link_back.default,
+                  {
+                    ...{
+                      href: back
+                    }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                ...{
+                  className: "flex items-center justify-center " + ((error == null ? void 0 : error.image) ? "h-2/3" : "h-full")
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "div",
+                  {
+                    ...{
+                      className: "space-y-4 text-center"
+                    },
+                    children: [
+                      (error == null ? void 0 : error.image) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "div",
+                        {
+                          ...{
+                            className: "relative aspect-square max-w-24 mx-auto mb-12"
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            import_image.default,
+                            {
+                              ...{
+                                // An illustration beside the message, which says it all: nothing to read out.
+                                alt: "",
+                                className: "bg-contain bg-center rounded overflow-hidden bg-green border border-green",
+                                fill: true,
+                                sizes: "96px",
+                                src: error.image,
+                                unoptimized: true
+                              }
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        "div",
+                        {
+                          ...{
+                            className: "w-full max-w-lg space-y-3"
+                          },
+                          children: [
+                            title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: title }),
+                            (error == null ? void 0 : error.message) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: error.message })
+                          ]
+                        }
+                      ),
+                      (((error == null ? void 0 : error.links) || []).length > 0 || (rest == null ? void 0 : rest.button) && Boolean(error == null ? void 0 : error.button)) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        "div",
+                        {
+                          ...{
+                            className: "flex items-center justify-center space-x-3"
+                          },
+                          children: [
+                            ((error == null ? void 0 : error.links) || []).map((props, key) => renderButton(
+                              {
+                                ...props,
+                                element: import_link.default,
+                                variant: props == null ? void 0 : props.type
+                              },
+                              "empty-button" + key
+                            )),
+                            (rest == null ? void 0 : rest.button) && Boolean(error == null ? void 0 : error.button) && renderButton(
+                              {
+                                ...rest == null ? void 0 : rest.button,
+                                variant: "success"
+                              },
+                              "button-primary"
+                            )
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+const TemplateDashboardTasks = ({
+  items = []
+}) => {
+  const queryClient = (0, import_react_query.useQueryClient)();
+  const { close, open } = (0, import_hooks.useDrawer)({
+    queryClient
+  });
+  const array = [...items];
+  const first = array.shift();
+  const openAll = () => {
+    open({
+      title: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "span",
+        {
+          ...{
+            className: "flex items-center space-x-3"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Next steps" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_badge.default,
+              {
+                ...{
+                  type: "warning"
+                },
+                children: array.length + 1
+              }
+            )
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          ...{
+            className: "p-6"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_list.default,
+            {
+              ...{
+                items: [
+                  {
+                    ...first,
+                    onClick: () => close()
+                  },
+                  ...array.map((props) => ({
+                    ...props,
+                    onClick: () => close()
+                  }))
+                ]
+              }
+            }
+          )
+        }
+      )
+    });
+  };
+  if (first) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ...{
+          className: "px-6 md:px-12"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ...{
+              className: "bg-white border border-gray rounded px-4 py-3"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
+              {
+                ...{
+                  className: "flex items-center justify-between space-x-6"
+                },
+                children: [
+                  first && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_list.default,
+                    {
+                      ...{
+                        items: [
+                          {
+                            ...first,
+                            onClick: () => close()
+                          }
+                        ],
+                        svg: false
+                      }
+                    }
+                  ),
+                  (array == null ? void 0 : array.length) > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_button.default,
+                    {
+                      ...{
+                        icon: import_arrow_right.default,
+                        inline: true,
+                        onClick: openAll,
+                        variant: "link"
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_badge.default,
+                        {
+                          ...{
+                            type: "warning"
+                          },
+                          children: array.length + 1
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+  return null;
+};
+const TemplateDashboard = ({
+  back,
+  badges = [],
+  children,
+  className = "px-6 pb-6 md:px-12 md:pb-12",
+  tasks,
+  title,
+  ...rest
+}) => {
+  const classes = {
+    container: [
+      "flex flex-col w-full justify-between flex-1 min-h-0"
+    ],
+    inner: [
+      "flex-1 min-h-0 flex flex-col overflow-y-auto hide-scrollbar pb-6 md:pb-12",
+      className
+    ],
+    wrapper: [
+      "relative flex flex-col justify-between h-full w-full space-y-6 pt-6 md:pt-12"
+    ]
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...{
+        className: classes.wrapper.join(" ")
+      },
+      children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          TemplateDashboardHeader,
+          {
+            ...{
+              badges,
+              header: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                TemplateDashboardTitle,
+                {
+                  ...{
+                    back,
+                    title
+                  }
+                }
+              ),
+              ...rest
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          TemplateDashboardTasks,
+          {
+            ...tasks
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ...{
+              className: classes.container.join(" ")
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                ...{
+                  className: classes.inner.join(" ")
+                },
+                children
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+const TemplateDashboardResource = ({
+  cache,
+  children,
+  classNameLoader,
+  enabled,
+  endpoint,
+  error,
+  keepPrevious,
+  loader = true,
+  params,
+  queryKey,
+  refetchInterval,
+  refetchIntervalInBackground,
+  refetchOnMount,
+  ...chrome
+}) => {
+  const errorHandler = error || ((query) => {
+    var _a, _b, _c;
+    if (((_a = query == null ? void 0 : query.error) == null ? void 0 : _a.status) === 403 || (0, import_fetch.isTransientError)(query == null ? void 0 : query.error)) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TemplateDashboard, { children: /* @__PURE__ */ (0, import_jsx_runtime.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
+          }
+        }
+      }
+    ) });
+    (0, import_navigation.notFound)();
+  });
+  const provider = {
+    cache,
+    classNameLoader,
+    enabled,
+    endpoint,
+    error: errorHandler,
+    loader,
+    params,
+    queryKey,
+    refetchInterval,
+    refetchIntervalInBackground,
+    ...refetchOnMount !== void 0 && {
+      refetchOnMount
+    },
+    ...keepPrevious && {
+      placeholderData: import_react_query.keepPreviousData
+    }
+  };
+  const resolve = (value, data) => value instanceof Function ? value(data) : value;
+  const dynamic = Object.values(chrome).some((value) => value instanceof Function);
+  if (!dynamic) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    TemplateDashboard,
+    {
+      ...chrome,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_provider_resource.default,
+        {
+          ...provider,
+          children: (query) => {
+            var _a, _b;
+            const blocked = ((_a = query == null ? void 0 : query.data) == null ? void 0 : _a.locked) || ((_b = query == null ? void 0 : query.data) == null ? void 0 : _b.empty);
+            if (blocked) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              TemplateDashboardError,
+              {
+                ...{
+                  error: blocked
+                }
+              }
+            );
+            return children(query == null ? void 0 : query.data, query);
+          }
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...{
+        className: "relative h-full"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_provider_resource.default,
+        {
+          ...provider,
+          children: (query) => {
+            const data = query == null ? void 0 : query.data;
+            const blocked = (data == null ? void 0 : data.locked) || (data == null ? void 0 : data.empty);
+            const props = Object.fromEntries(
+              Object.entries(chrome).map(([key, value]) => [key, resolve(value, data)])
+            );
+            if (blocked) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              TemplateDashboard,
+              {
+                ...{
+                  back: props == null ? void 0 : props.back
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  TemplateDashboardError,
+                  {
+                    ...{
+                      error: blocked
+                    }
+                  }
+                )
+              }
+            );
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              TemplateDashboard,
+              {
+                ...props,
+                children: children(data, query)
+              }
+            );
+          }
+        }
+      )
+    }
+  );
+};
+var template_dashboard_default = TemplateDashboard;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Refetch,
+  TemplateDashboardError,
+  TemplateDashboardResource
+});