@drawbridge/components 0.0.78 → 0.1.0

package/dist/dashboard/input-array.js

@@ -0,0 +1,272 @@
+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_array_exports = {};
+__export(input_array_exports, {
+  InputArray: () => InputArray,
+  InputArrayButton: () => InputArrayButton,
+  InputArrayControl: () => InputArrayControl,
+  InputArraySortable: () => InputArraySortable
+});
+module.exports = __toCommonJS(input_array_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_hook_form = require("react-hook-form");
+var import_sortable = __toESM(require("../shared/sortable"));
+var import_plus = __toESM(require("../icons/plus"));
+var import_trash = __toESM(require("../icons/trash"));
+var import_empty = __toESM(require("../shared/empty"));
+var import_button = __toESM(require("../shared/button"));
+var import_react = require("react");
+const InputArrayButton = ({
+  onClick,
+  icon = import_plus.default,
+  text,
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_button.default,
+  {
+    ...{
+      icon,
+      // A row in a list: the label keeps to the left, its icon to the right.
+      justify: icon ? "between" : "start",
+      onClick,
+      variant: "secondary",
+      ...rest
+    },
+    children: text
+  }
+);
+const InputArrayControl = ({
+  onClick,
+  icon: IconComponent = import_trash.default,
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_button.default,
+  {
+    ...{
+      // Icon-only, so it carries its own name — nothing else in the row
+      // says what it does before you click it. `rest` last, so a caller
+      // with a different icon can say what its own control removes.
+      "aria-label": "Remove",
+      inline: true,
+      onClick,
+      title: "Remove",
+      variant: "link",
+      ...rest
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        ...{
+          className: "flex items-center justify-center w-8 h-8 text-black border border-black rounded-full"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconComponent, { className: "w-4 h-4" })
+      }
+    )
+  }
+);
+const InputArray = ({
+  children,
+  control,
+  empty = "No items added",
+  name,
+  renderButton,
+  renderControls,
+  ...rest
+}) => {
+  const { append, fields, remove, update } = (0, import_react_hook_form.useFieldArray)({
+    control,
+    keyName: "_field",
+    name
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...{
+        className: "space-y-4",
+        ...(rest == null ? void 0 : rest["data-guide"]) && {
+          "data-guide": rest["data-guide"]
+        }
+      },
+      children: [
+        (fields == null ? void 0 : fields.length) > 0 ? fields.map((field, index) => (
+          // `update` REPLACES THE ROW and regenerates this key, which remounts it —
+          // so it belongs to one-shot changes (picking a step, choosing a file),
+          // never to anything typed. A per-keystroke `update` drops focus after
+          // every character. Bind typed inputs to their own path with a Controller
+          // named `<name>.<index>.<key>` instead.
+          //
+          // Keyed by the generated id, never the index. A Controller subscribes
+          // to its own path with `exact : true`, so mutating the array never
+          // reaches `rules.0.value` — only a remount refreshes a shifted row,
+          // and an index key gives the deleted row's instance to its successor.
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              ...{
+                className: "flex items-start space-x-4"
+              },
+              children: [
+                children({
+                  field,
+                  index,
+                  update,
+                  remove
+                }),
+                renderControls instanceof Function && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    ...{
+                      className: "flex items-center shrink-0 h-full space-x-2 min-h-[42px]"
+                    },
+                    children: renderControls({
+                      field,
+                      index,
+                      update,
+                      remove
+                    }).map((item, key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: item }, key))
+                  }
+                )
+              ]
+            },
+            field._field
+          )
+        )) : Boolean(empty) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_empty.default,
+          {
+            ...{
+              variant: "primary"
+            },
+            children: empty
+          }
+        ),
+        renderButton instanceof Function && renderButton(append)
+      ]
+    }
+  );
+};
+const InputArraySortable = ({
+  children,
+  control,
+  empty = "No items added",
+  name,
+  onSort,
+  renderButton,
+  renderControls,
+  ...rest
+}) => {
+  const { append, fields, move, remove, update } = (0, import_react_hook_form.useFieldArray)({
+    control,
+    keyName: "_field",
+    name
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...{
+        className: "space-y-4",
+        ...(rest == null ? void 0 : rest["data-guide"]) && {
+          "data-guide": rest["data-guide"]
+        }
+      },
+      children: [
+        (fields == null ? void 0 : fields.length) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_sortable.default,
+          {
+            ...{
+              items: fields,
+              onSort: (array, { from, to }) => {
+                move(from, to);
+                if (onSort instanceof Function) {
+                  onSort(array);
+                }
+              },
+              renderItem: (field, index, handle) => (
+                // Same generated key as InputArray above — remove and
+                // sort both shift rows the Controllers never hear about.
+                //
+                // And the same rule about `update`: it replaces the row and
+                // regenerates this key, so it is for one-shot changes only
+                // (picking a file), never for anything typed. `field` is a
+                // snapshot too — it never hears a Controller write, so read
+                // display values from useWatch, not from here.
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "div",
+                  {
+                    ...{
+                      className: "flex items-start space-x-4"
+                    },
+                    children: [
+                      children({
+                        field,
+                        handle,
+                        index,
+                        update,
+                        remove
+                      }),
+                      renderControls instanceof Function && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "div",
+                        {
+                          ...{
+                            className: "flex items-center shrink-0 h-full space-x-2 min-h-[42px]"
+                          },
+                          children: renderControls({
+                            field,
+                            index,
+                            update,
+                            remove
+                          }).map((item, key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: item }, key))
+                        }
+                      )
+                    ]
+                  },
+                  field._field
+                )
+              )
+            }
+          }
+        ) : Boolean(empty) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_empty.default,
+          {
+            ...{
+              variant: "primary"
+            },
+            children: empty
+          }
+        ),
+        renderButton instanceof Function && renderButton(append)
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InputArray,
+  InputArrayButton,
+  InputArrayControl,
+  InputArraySortable
+});

package/dist/dashboard/input-array.mjs

@@ -0,0 +1,236 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFieldArray } from "react-hook-form";
+import Sortable from "../shared/sortable";
+import Plus from "../icons/plus";
+import Trash from "../icons/trash";
+import Empty from "../shared/empty";
+import Button from "../shared/button";
+import { Fragment } from "react";
+const InputArrayButton = ({
+  onClick,
+  icon = Plus,
+  text,
+  ...rest
+}) => /* @__PURE__ */ jsx(
+  Button,
+  {
+    ...{
+      icon,
+      // A row in a list: the label keeps to the left, its icon to the right.
+      justify: icon ? "between" : "start",
+      onClick,
+      variant: "secondary",
+      ...rest
+    },
+    children: text
+  }
+);
+const InputArrayControl = ({
+  onClick,
+  icon: IconComponent = Trash,
+  ...rest
+}) => /* @__PURE__ */ jsx(
+  Button,
+  {
+    ...{
+      // Icon-only, so it carries its own name — nothing else in the row
+      // says what it does before you click it. `rest` last, so a caller
+      // with a different icon can say what its own control removes.
+      "aria-label": "Remove",
+      inline: true,
+      onClick,
+      title: "Remove",
+      variant: "link",
+      ...rest
+    },
+    children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...{
+          className: "flex items-center justify-center w-8 h-8 text-black border border-black rounded-full"
+        },
+        children: /* @__PURE__ */ jsx(IconComponent, { className: "w-4 h-4" })
+      }
+    )
+  }
+);
+const InputArray = ({
+  children,
+  control,
+  empty = "No items added",
+  name,
+  renderButton,
+  renderControls,
+  ...rest
+}) => {
+  const { append, fields, remove, update } = useFieldArray({
+    control,
+    keyName: "_field",
+    name
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: "space-y-4",
+        ...(rest == null ? void 0 : rest["data-guide"]) && {
+          "data-guide": rest["data-guide"]
+        }
+      },
+      children: [
+        (fields == null ? void 0 : fields.length) > 0 ? fields.map((field, index) => (
+          // `update` REPLACES THE ROW and regenerates this key, which remounts it —
+          // so it belongs to one-shot changes (picking a step, choosing a file),
+          // never to anything typed. A per-keystroke `update` drops focus after
+          // every character. Bind typed inputs to their own path with a Controller
+          // named `<name>.<index>.<key>` instead.
+          //
+          // Keyed by the generated id, never the index. A Controller subscribes
+          // to its own path with `exact : true`, so mutating the array never
+          // reaches `rules.0.value` — only a remount refreshes a shifted row,
+          // and an index key gives the deleted row's instance to its successor.
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ...{
+                className: "flex items-start space-x-4"
+              },
+              children: [
+                children({
+                  field,
+                  index,
+                  update,
+                  remove
+                }),
+                renderControls instanceof Function && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ...{
+                      className: "flex items-center shrink-0 h-full space-x-2 min-h-[42px]"
+                    },
+                    children: renderControls({
+                      field,
+                      index,
+                      update,
+                      remove
+                    }).map((item, key) => /* @__PURE__ */ jsx(Fragment, { children: item }, key))
+                  }
+                )
+              ]
+            },
+            field._field
+          )
+        )) : Boolean(empty) && /* @__PURE__ */ jsx(
+          Empty,
+          {
+            ...{
+              variant: "primary"
+            },
+            children: empty
+          }
+        ),
+        renderButton instanceof Function && renderButton(append)
+      ]
+    }
+  );
+};
+const InputArraySortable = ({
+  children,
+  control,
+  empty = "No items added",
+  name,
+  onSort,
+  renderButton,
+  renderControls,
+  ...rest
+}) => {
+  const { append, fields, move, remove, update } = useFieldArray({
+    control,
+    keyName: "_field",
+    name
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: "space-y-4",
+        ...(rest == null ? void 0 : rest["data-guide"]) && {
+          "data-guide": rest["data-guide"]
+        }
+      },
+      children: [
+        (fields == null ? void 0 : fields.length) > 0 ? /* @__PURE__ */ jsx(
+          Sortable,
+          {
+            ...{
+              items: fields,
+              onSort: (array, { from, to }) => {
+                move(from, to);
+                if (onSort instanceof Function) {
+                  onSort(array);
+                }
+              },
+              renderItem: (field, index, handle) => (
+                // Same generated key as InputArray above — remove and
+                // sort both shift rows the Controllers never hear about.
+                //
+                // And the same rule about `update`: it replaces the row and
+                // regenerates this key, so it is for one-shot changes only
+                // (picking a file), never for anything typed. `field` is a
+                // snapshot too — it never hears a Controller write, so read
+                // display values from useWatch, not from here.
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    ...{
+                      className: "flex items-start space-x-4"
+                    },
+                    children: [
+                      children({
+                        field,
+                        handle,
+                        index,
+                        update,
+                        remove
+                      }),
+                      renderControls instanceof Function && /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          ...{
+                            className: "flex items-center shrink-0 h-full space-x-2 min-h-[42px]"
+                          },
+                          children: renderControls({
+                            field,
+                            index,
+                            update,
+                            remove
+                          }).map((item, key) => /* @__PURE__ */ jsx(Fragment, { children: item }, key))
+                        }
+                      )
+                    ]
+                  },
+                  field._field
+                )
+              )
+            }
+          }
+        ) : Boolean(empty) && /* @__PURE__ */ jsx(
+          Empty,
+          {
+            ...{
+              variant: "primary"
+            },
+            children: empty
+          }
+        ),
+        renderButton instanceof Function && renderButton(append)
+      ]
+    }
+  );
+};
+export {
+  InputArray,
+  InputArrayButton,
+  InputArrayControl,
+  InputArraySortable
+};

package/dist/dashboard/input-color.js

@@ -0,0 +1,192 @@
+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_color_exports = {};
+__export(input_color_exports, {
+  default: () => input_color_default
+});
+module.exports = __toCommonJS(input_color_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_react_colorful = require("react-colorful");
+var import_tinycolor2 = __toESM(require("tinycolor2"));
+var import_button = __toESM(require("../shared/button"));
+const colorFormatted = (value) => {
+  const color = (0, import_tinycolor2.default)(value);
+  const attributes = {
+    brightness: color.getBrightness(),
+    dark: color.isDark(),
+    light: color.isLight(),
+    luminance: color.getLuminance()
+  };
+  const hex = color.toHexString();
+  const hsl = color.toHsl();
+  const hsv = color.toHsv();
+  const rgb = color.toRgbString();
+  return {
+    attributes,
+    hex,
+    hsl,
+    hsv,
+    rgb
+  };
+};
+const ColorPickerModal = ({
+  initialHex,
+  onSubmit
+}) => {
+  const [hex, setHex] = (0, import_react.useState)(initialHex);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...{
+        className: "space-y-4"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_colorful.HexColorPicker,
+          {
+            ...{
+              color: hex,
+              onChange: setHex,
+              style: { width: "100%" }
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_colorful.HexColorInput,
+          {
+            ...{
+              className: "input w-full",
+              color: hex,
+              onChange: setHex,
+              prefixed: true
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_button.default,
+          {
+            ...{
+              onClick: () => onSubmit(hex)
+            },
+            children: "Apply"
+          }
+        )
+      ]
+    }
+  );
+};
+const InputColor = ({
+  onChange,
+  value
+}) => {
+  const queryClient = (0, import_react_query.useQueryClient)();
+  const modal = (0, import_hooks.useModal)({ queryClient });
+  const hex = (value == null ? void 0 : value.hex) || "#000000";
+  const [text, setText] = (0, import_react.useState)(hex);
+  (0, import_react.useEffect)(
+    () => {
+      if ((0, import_tinycolor2.default)(text).toHexString() !== hex.toLowerCase()) setText(hex);
+    },
+    // Only outside changes; our own keystrokes move `text` first.
+    [hex]
+    // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  const handleTextChange = (value2) => {
+    setText(value2);
+    const color = (0, import_tinycolor2.default)(value2);
+    if (color.isValid()) {
+      onChange(colorFormatted(value2));
+    }
+  };
+  const openPicker = () => {
+    modal.open({
+      message: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ColorPickerModal,
+        {
+          ...{
+            initialHex: hex,
+            onSubmit: (picked) => {
+              const formatted = colorFormatted(picked);
+              setText(formatted.hex);
+              onChange(formatted);
+              modal.close();
+            }
+          }
+        }
+      ),
+      title: "Pick a color"
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...{
+        className: "input flex items-center justify-between gap-2"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            ...{
+              className: "flex-1 min-w-0 border-0 bg-transparent focus:outline-hidden focus:ring-0 p-0",
+              type: "text",
+              value: text,
+              onChange: (e) => handleTextChange(e.target.value)
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_button.default,
+          {
+            ...{
+              "aria-label": "Pick a color",
+              inline: true,
+              onClick: openPicker,
+              variant: "link"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                ...{
+                  className: "block w-5 h-5 rounded border aspect-square",
+                  style: {
+                    backgroundColor: hex
+                  }
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var input_color_default = InputColor;