@drawbridge/components 0.0.78 → 0.1.1

package/dist/dashboard/template-dashboard.mjs

@@ -0,0 +1,662 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isValidElement, useState } from "react";
+import { keepPreviousData, useQueryClient } from "@tanstack/react-query";
+import { notFound } from "next/navigation";
+import { isTransientError } from "@drawbridge/drawbridge-utils/fetch";
+import { useDrawer } from "./lib/hooks.mjs";
+import { iconLabel } from "../shared/lib/icon-labels.mjs";
+import ProviderResource from "./provider-resource.mjs";
+import ArrowRight from "../icons/arrow-right.mjs";
+import LoaderIcon from "../icons/loader.mjs";
+import Refresh from "../icons/refresh.mjs";
+import Empty from "../shared/empty.mjs";
+import Badge from "../shared/badge.mjs";
+import Button from "../shared/button.mjs";
+import List from "./list.mjs";
+import LinkBack from "./link-back.mjs";
+import WrapperGradient from "../wrapper-gradient.mjs";
+import Image from "next/image";
+import Link from "./link.mjs";
+const Refetch = ({
+  invalidate = []
+}) => {
+  const queryClient = useQueryClient();
+  const [isRefreshing, setIsRefreshing] = 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__ */ jsx(
+    Badge,
+    {
+      ...{
+        "aria-label": "Refresh",
+        "data-guide": "button-refetch",
+        element: "button",
+        onClick,
+        type: "primary"
+      },
+      children: isRefreshing ? /* @__PURE__ */ jsx(
+        LoaderIcon,
+        {
+          ...{
+            className: "w-3.5 h-3.5"
+          }
+        }
+      ) : /* @__PURE__ */ jsx(
+        Refresh,
+        {
+          ...{
+            className: "w-3.5 h-3.5"
+          }
+        }
+      )
+    }
+  );
+};
+const renderButton = (props, key) => {
+  if (!props) return null;
+  if (typeof props.render === "function") {
+    return /* @__PURE__ */ jsx("span", { children: props.render() }, key);
+  }
+  const {
+    indicator,
+    svg,
+    title,
+    variant = "secondary",
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...{
+        "aria-label": !title && 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__ */ jsx(
+    "div",
+    {
+      ...{
+        className: "flex items-center w-full space-y-2 z-10 px-6 md:px-12"
+      },
+      children: /* @__PURE__ */ 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__ */ jsxs(
+            "div",
+            {
+              ...{
+                className: "w-full flex items-center justify-between"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ...{
+                      className: "w-full flex items-center space-x-4 overflow-hidden"
+                    },
+                    children: /* @__PURE__ */ jsxs(
+                      WrapperGradient,
+                      {
+                        ...{
+                          classNameScroll: "flex items-center space-x-4",
+                          horizontal: true
+                        },
+                        children: [
+                          header,
+                          (isValidElement(refetch) || (badges == null ? void 0 : badges.length) > 0) && /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              ...{
+                                className: "flex items-center space-x-2 pr-6"
+                              },
+                              children: [
+                                isValidElement(refetch) && refetch,
+                                badges.map(({ text, type }, key) => /* @__PURE__ */ jsx(
+                                  Badge,
+                                  {
+                                    ...{
+                                      type: type || "primary"
+                                    },
+                                    children: text
+                                  },
+                                  key
+                                ))
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ...{
+                      className: "flex items-center justify-end shrink-0"
+                    },
+                    children: /* @__PURE__ */ 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__ */ jsx("h1", { children: title });
+  if (back) {
+    return /* @__PURE__ */ jsx(
+      LinkBack,
+      {
+        ...{
+          href: back
+        },
+        children: /* @__PURE__ */ 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__ */ jsx(
+    "div",
+    {
+      ...{
+        className: classes.join(" ")
+      },
+      children: /* @__PURE__ */ jsxs(
+        Empty,
+        {
+          ...{
+            variant: "primary"
+          },
+          children: [
+            back && /* @__PURE__ */ jsx(
+              "div",
+              {
+                ...{
+                  className: "absolute top-6 left-6"
+                },
+                children: /* @__PURE__ */ jsx(
+                  LinkBack,
+                  {
+                    ...{
+                      href: back
+                    }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ...{
+                  className: "flex items-center justify-center " + ((error == null ? void 0 : error.image) ? "h-2/3" : "h-full")
+                },
+                children: /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    ...{
+                      className: "space-y-4 text-center"
+                    },
+                    children: [
+                      (error == null ? void 0 : error.image) && /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          ...{
+                            className: "relative aspect-square max-w-24 mx-auto mb-12"
+                          },
+                          children: /* @__PURE__ */ jsx(
+                            Image,
+                            {
+                              ...{
+                                // 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__ */ jsxs(
+                        "div",
+                        {
+                          ...{
+                            className: "w-full max-w-lg space-y-3"
+                          },
+                          children: [
+                            title && /* @__PURE__ */ jsx("h1", { children: title }),
+                            (error == null ? void 0 : error.message) && /* @__PURE__ */ 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__ */ jsxs(
+                        "div",
+                        {
+                          ...{
+                            className: "flex items-center justify-center space-x-3"
+                          },
+                          children: [
+                            ((error == null ? void 0 : error.links) || []).map((props, key) => renderButton(
+                              {
+                                ...props,
+                                element: Link,
+                                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 = useQueryClient();
+  const { close, open } = useDrawer({
+    queryClient
+  });
+  const array = [...items];
+  const first = array.shift();
+  const openAll = () => {
+    open({
+      title: /* @__PURE__ */ jsxs(
+        "span",
+        {
+          ...{
+            className: "flex items-center space-x-3"
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { children: "Next steps" }),
+            /* @__PURE__ */ jsx(
+              Badge,
+              {
+                ...{
+                  type: "warning"
+                },
+                children: array.length + 1
+              }
+            )
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...{
+            className: "p-6"
+          },
+          children: /* @__PURE__ */ jsx(
+            List,
+            {
+              ...{
+                items: [
+                  {
+                    ...first,
+                    onClick: () => close()
+                  },
+                  ...array.map((props) => ({
+                    ...props,
+                    onClick: () => close()
+                  }))
+                ]
+              }
+            }
+          )
+        }
+      )
+    });
+  };
+  if (first) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...{
+          className: "px-6 md:px-12"
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...{
+              className: "bg-white border border-gray rounded px-4 py-3"
+            },
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ...{
+                  className: "flex items-center justify-between space-x-6"
+                },
+                children: [
+                  first && /* @__PURE__ */ jsx(
+                    List,
+                    {
+                      ...{
+                        items: [
+                          {
+                            ...first,
+                            onClick: () => close()
+                          }
+                        ],
+                        svg: false
+                      }
+                    }
+                  ),
+                  (array == null ? void 0 : array.length) > 0 && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      ...{
+                        icon: ArrowRight,
+                        inline: true,
+                        onClick: openAll,
+                        variant: "link"
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        Badge,
+                        {
+                          ...{
+                            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__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: classes.wrapper.join(" ")
+      },
+      children: [
+        title && /* @__PURE__ */ jsx(
+          TemplateDashboardHeader,
+          {
+            ...{
+              badges,
+              header: /* @__PURE__ */ jsx(
+                TemplateDashboardTitle,
+                {
+                  ...{
+                    back,
+                    title
+                  }
+                }
+              ),
+              ...rest
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TemplateDashboardTasks,
+          {
+            ...tasks
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...{
+              className: classes.container.join(" ")
+            },
+            children: /* @__PURE__ */ 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 || isTransientError(query == null ? void 0 : query.error)) return /* @__PURE__ */ jsx(TemplateDashboard, { children: /* @__PURE__ */ jsx(
+      TemplateDashboardError,
+      {
+        ...{
+          error: {
+            ...(_b = query == null ? void 0 : query.error) == null ? void 0 : _b.data,
+            message: (_c = query == null ? void 0 : query.error) == null ? void 0 : _c.message
+          }
+        }
+      }
+    ) });
+    notFound();
+  });
+  const provider = {
+    cache,
+    classNameLoader,
+    enabled,
+    endpoint,
+    error: errorHandler,
+    loader,
+    params,
+    queryKey,
+    refetchInterval,
+    refetchIntervalInBackground,
+    ...refetchOnMount !== void 0 && {
+      refetchOnMount
+    },
+    ...keepPrevious && {
+      placeholderData: 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__ */ jsx(
+    TemplateDashboard,
+    {
+      ...chrome,
+      children: /* @__PURE__ */ jsx(
+        ProviderResource,
+        {
+          ...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__ */ jsx(
+              TemplateDashboardError,
+              {
+                ...{
+                  error: blocked
+                }
+              }
+            );
+            return children(query == null ? void 0 : query.data, query);
+          }
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...{
+        className: "relative h-full"
+      },
+      children: /* @__PURE__ */ jsx(
+        ProviderResource,
+        {
+          ...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__ */ jsx(
+              TemplateDashboard,
+              {
+                ...{
+                  back: props == null ? void 0 : props.back
+                },
+                children: /* @__PURE__ */ jsx(
+                  TemplateDashboardError,
+                  {
+                    ...{
+                      error: blocked
+                    }
+                  }
+                )
+              }
+            );
+            return /* @__PURE__ */ jsx(
+              TemplateDashboard,
+              {
+                ...props,
+                children: children(data, query)
+              }
+            );
+          }
+        }
+      )
+    }
+  );
+};
+var template_dashboard_default = TemplateDashboard;
+export {
+  Refetch,
+  TemplateDashboardError,
+  TemplateDashboardResource,
+  template_dashboard_default as default
+};