@drawbridge/components 0.0.78 → 0.1.1

package/dist/dashboard/input-font.js

@@ -0,0 +1,506 @@
+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 input_font_exports = {};
+__export(input_font_exports, {
+  default: () => input_font_default
+});
+module.exports = __toCommonJS(input_font_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react_query = require("@tanstack/react-query");
+var import_hooks = require("./lib/hooks");
+var import_input_combobox = __toESM(require("./input-combobox"));
+var import_empty = __toESM(require("../shared/empty"));
+var import_button = __toESM(require("../shared/button"));
+var import_input_select = __toESM(require("../input-select"));
+var import_chevron_up_down = __toESM(require("../icons/chevron-up-down"));
+const defaults = {
+  family: "Roboto Flex",
+  transform: "none",
+  weight: "regular"
+};
+const transforms = [
+  {
+    key: "None",
+    value: "none"
+  },
+  {
+    key: "Capitalize",
+    value: "capitalize"
+  },
+  {
+    key: "Lowercase",
+    value: "lowercase"
+  },
+  {
+    key: "Uppercase",
+    value: "uppercase"
+  }
+];
+const loadFont = (family) => {
+  const id = "font-" + family.replace(/ /g, "-").toLowerCase();
+  if (document.getElementById(id)) return;
+  const link = document.createElement("link");
+  link.id = id;
+  link.rel = "stylesheet";
+  link.href = "https://fonts.googleapis.com/css2?family=" + encodeURIComponent(family) + ":wght@400&display=swap";
+  document.head.appendChild(link);
+};
+const FontItem = ({
+  family,
+  isFirstInGroup,
+  observe,
+  onClick,
+  selected,
+  unobserve,
+  visible
+}) => {
+  const ref = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(
+    () => {
+      const el = ref.current;
+      if (!el) return;
+      observe(el);
+      return () => unobserve(el);
+    },
+    [observe, unobserve]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_button.default,
+    {
+      ...{
+        "data-family": family,
+        disabled: selected,
+        justify: "start",
+        onClick: () => onClick(family),
+        ref,
+        variant: "link",
+        ...isFirstInGroup && { "data-letter": family[0].toUpperCase() }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          ...{
+            className: "flex items-center justify-between w-full text-left rounded [content-visibility:auto] [contain-intrinsic-size:24px]"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              ...{
+                style: visible ? { fontFamily: '"' + family + '"' } : void 0
+              },
+              children: family
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const ScrollFade = ({
+  children,
+  className,
+  classNameInner
+}) => {
+  const ref = (0, import_react.useRef)(null);
+  const [atTop, setAtTop] = (0, import_react.useState)(true);
+  const [atBottom, setAtBottom] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(
+    () => {
+      const el = ref.current;
+      if (!el) return;
+      const update = () => {
+        setAtTop(el.scrollTop <= 0);
+        setAtBottom(el.scrollTop + el.clientHeight >= el.scrollHeight - 1);
+      };
+      update();
+      el.addEventListener("scroll", update);
+      const observer = new ResizeObserver(update);
+      observer.observe(el);
+      return () => {
+        el.removeEventListener("scroll", update);
+        observer.disconnect();
+      };
+    },
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...{
+        className: "relative " + (className || "")
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ...{
+              className: "max-h-64 overflow-y-auto hide-scrollbar" + (classNameInner ? " " + classNameInner : ""),
+              ref
+            },
+            children
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ...{
+              className: "pointer-events-none absolute inset-x-0 top-0 h-6 bg-gradient-to-b from-white to-transparent transition-opacity " + (atTop ? "opacity-0" : "opacity-100")
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ...{
+              className: "pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-white to-transparent transition-opacity " + (atBottom ? "opacity-0" : "opacity-100")
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+const ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
+const ALL = "all";
+const FontPickerModal = ({
+  categories,
+  families,
+  onSubmit,
+  value
+}) => {
+  const [search, setSearch] = (0, import_react.useState)("");
+  const [debouncedSearch, setDebouncedSearch] = (0, import_react.useState)("");
+  const [category, setCategory] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(
+    () => {
+      const timer = setTimeout(
+        () => setDebouncedSearch(search),
+        150
+      );
+      return () => clearTimeout(timer);
+    },
+    [search]
+  );
+  const [visibleFamilies, setVisibleFamilies] = (0, import_react.useState)(() => ({}));
+  const [observer] = (0, import_react.useState)(() => {
+    if (typeof IntersectionObserver === "undefined") return null;
+    let self;
+    self = new IntersectionObserver(
+      (entries) => {
+        const seen = [];
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) return;
+          const family = entry.target.getAttribute("data-family");
+          if (!family) return;
+          loadFont(family);
+          seen.push(family);
+          self.unobserve(entry.target);
+        });
+        if (!seen.length) return;
+        setVisibleFamilies((prev) => {
+          const next = { ...prev };
+          seen.forEach((family) => {
+            next[family] = true;
+          });
+          return next;
+        });
+      },
+      { threshold: 0 }
+    );
+    return self;
+  });
+  (0, import_react.useEffect)(
+    () => () => observer == null ? void 0 : observer.disconnect(),
+    [observer]
+  );
+  const observe = (0, import_react.useCallback)(
+    (el) => observer == null ? void 0 : observer.observe(el),
+    [observer]
+  );
+  const unobserve = (0, import_react.useCallback)(
+    (el) => observer == null ? void 0 : observer.unobserve(el),
+    [observer]
+  );
+  const filtered = (0, import_react.useMemo)(
+    () => families.filter(({ key, category: cat }) => {
+      const matchesSearch = key.toLowerCase().includes(debouncedSearch.toLowerCase());
+      const matchesCategory = !category || cat === category;
+      return matchesSearch && matchesCategory;
+    }),
+    [families, debouncedSearch, category]
+  );
+  const grouped = filtered.reduce((acc, { key }) => {
+    const char = key[0].toUpperCase();
+    if (!acc[char]) acc[char] = true;
+    return acc;
+  }, {});
+  const scrollToLetter = (char) => {
+    const el = document.querySelector(`[data-letter="${char}"]`);
+    if (el) el.scrollIntoView({ block: "start", behavior: "smooth" });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...{
+        className: "space-y-3"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            ...{
+              autoFocus: true,
+              className: "input w-full",
+              placeholder: "Search...",
+              type: "text",
+              value: search,
+              onChange: (e) => setSearch(e.target.value)
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_input_select.default,
+          {
+            ...{
+              "aria-label": "Category",
+              onChange: (next) => setCategory(next === ALL ? null : next),
+              // InputSelect keeps '' for its own placeholder, so All needs a value of its own.
+              options: categories.map(({ key, value: cat }) => ({ label: key, value: cat || ALL })),
+              value: category || ALL
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            ...{
+              className: "flex gap-3"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                ScrollFade,
+                {
+                  ...{
+                    className: "flex-1 min-w-0"
+                  },
+                  children: [
+                    filtered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_empty.default, { children: "No fonts found" }),
+                    filtered.map(({ value: family }, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      FontItem,
+                      {
+                        ...{
+                          family,
+                          isFirstInGroup: index === 0 || family[0].toUpperCase() !== filtered[index - 1].value[0].toUpperCase(),
+                          observe,
+                          onClick: onSubmit,
+                          selected: family === value,
+                          unobserve,
+                          visible: Boolean(visibleFamilies[family])
+                        }
+                      },
+                      family
+                    ))
+                  ]
+                }
+              ),
+              filtered.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                ScrollFade,
+                {
+                  ...{
+                    className: "shrink-0",
+                    classNameInner: "flex flex-col"
+                  },
+                  children: ALPHABET.map((char) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_button.default,
+                    {
+                      ...{
+                        disabled: !grouped[char],
+                        onClick: () => scrollToLetter(char),
+                        variant: "link"
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "span",
+                        {
+                          ...{
+                            className: "flex flex-col text-xs text-center p-1 rounded " + (grouped[char] ? "" : "opacity-20 cursor-default")
+                          },
+                          children: char
+                        }
+                      )
+                    },
+                    char
+                  ))
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const InputFontFamily = ({
+  categories,
+  disabled,
+  families,
+  onChange,
+  value
+}) => {
+  const queryClient = (0, import_react_query.useQueryClient)();
+  const modal = (0, import_hooks.useModal)({ queryClient });
+  const openPicker = () => {
+    modal.open({
+      message: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        FontPickerModal,
+        {
+          ...{
+            categories,
+            families,
+            value,
+            onSubmit: (family) => {
+              onChange(family);
+              modal.close();
+            }
+          }
+        }
+      ),
+      title: "Select font"
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_button.default,
+    {
+      ...{
+        disabled,
+        onClick: openPicker,
+        variant: "link"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "span",
+        {
+          ...{
+            className: "input flex items-center justify-between w-full"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                ...{
+                  className: "truncate"
+                },
+                children: value
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_chevron_up_down.default,
+              {
+                ...{
+                  className: "w-5 h-5 shrink-0"
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+const InputFont = ({
+  disabled = false,
+  onChange,
+  value
+}) => {
+  var _a, _b;
+  const queryClient = (0, import_react_query.useQueryClient)();
+  const { fonts } = queryClient.getQueryData(["app"]);
+  if ((fonts == null ? void 0 : fonts.families) && (fonts == null ? void 0 : fonts.weights)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ...{
+          className: "grid grid-cols-3 gap-6"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            InputFontFamily,
+            {
+              ...{
+                categories: fonts.categories,
+                disabled,
+                families: fonts.families,
+                onChange: (family) => {
+                  var _a2, _b2, _c;
+                  onChange({
+                    family,
+                    weight: (_c = (_b2 = (_a2 = fonts == null ? void 0 : fonts.weights) == null ? void 0 : _a2[family]) == null ? void 0 : _b2[0]) == null ? void 0 : _c.value
+                  });
+                },
+                value: (value == null ? void 0 : value.family) || defaults.family
+              }
+            }
+          ) }),
+          ((_a = fonts == null ? void 0 : fonts.weights) == null ? void 0 : _a[(value == null ? void 0 : value.family) || defaults.family]) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_input_combobox.default,
+            {
+              ...{
+                disabled,
+                onChange: (selectedValue) => {
+                  onChange({
+                    ...value,
+                    weight: selectedValue
+                  });
+                },
+                options: (_b = fonts == null ? void 0 : fonts.weights) == null ? void 0 : _b[(value == null ? void 0 : value.family) || defaults.family],
+                value: (value == null ? void 0 : value.weight) || defaults.weight
+              }
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_input_combobox.default,
+            {
+              ...{
+                disabled,
+                onChange: (selectedValue) => {
+                  onChange({
+                    ...value,
+                    transform: selectedValue
+                  });
+                },
+                options: transforms,
+                value: (value == null ? void 0 : value.transform) || defaults.transform
+              }
+            }
+          ) })
+        ]
+      }
+    );
+  }
+  return null;
+};
+var input_font_default = InputFont;