@drawbridge/components 0.0.78 → 0.1.0

package/dist/dashboard/card-setting.js

@@ -0,0 +1,136 @@
+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 card_setting_exports = {};
+__export(card_setting_exports, {
+  default: () => card_setting_default
+});
+module.exports = __toCommonJS(card_setting_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_badge = __toESM(require("../shared/badge"));
+var import_table = require("./table");
+const RowBadge = ({ badge }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_badge.default,
+  {
+    ...{
+      size: "small",
+      type: badge.type
+    },
+    children: badge.text
+  }
+);
+const CardSetting = ({
+  rows = []
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "div",
+  {
+    ...{
+      className: "@container divide-y divide-gray"
+    },
+    children: rows.map(({ badge, button, "data-guide": guide, label, value }, key) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ...{
+          className: "flex items-center gap-4 py-3 first:pt-0 last:pb-0"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              ...{
+                className: "flex flex-col flex-1 min-w-0 gap-1 @md:flex-row @md:gap-4"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    ...{
+                      className: "text-gray-dark break-words @md:w-[33cqw] @md:shrink-0",
+                      "data-guide": guide
+                    },
+                    children: label
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "div",
+                  {
+                    ...{
+                      className: "flex-1 min-w-0 break-words"
+                    },
+                    children: [
+                      value,
+                      badge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "div",
+                        {
+                          ...{
+                            className: "mt-1 @md:hidden"
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RowBadge, { badge })
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          (badge || button) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              ...{
+                className: "flex items-center gap-2 shrink-0"
+              },
+              children: [
+                badge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    ...{
+                      className: "hidden @md:inline-flex"
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RowBadge, { badge })
+                  }
+                ),
+                button && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_table.TableActionsCell,
+                  {
+                    ...{
+                      actions: {
+                        button
+                      }
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      },
+      key
+    ))
+  }
+);
+var card_setting_default = CardSetting;

package/dist/dashboard/card-setting.mjs

@@ -0,0 +1,107 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Badge from "../shared/badge";
+import { TableActionsCell } from "./table";
+const RowBadge = ({ badge }) => /* @__PURE__ */ jsx(
+  Badge,
+  {
+    ...{
+      size: "small",
+      type: badge.type
+    },
+    children: badge.text
+  }
+);
+const CardSetting = ({
+  rows = []
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...{
+      className: "@container divide-y divide-gray"
+    },
+    children: rows.map(({ badge, button, "data-guide": guide, label, value }, key) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...{
+          className: "flex items-center gap-4 py-3 first:pt-0 last:pb-0"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ...{
+                className: "flex flex-col flex-1 min-w-0 gap-1 @md:flex-row @md:gap-4"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    ...{
+                      className: "text-gray-dark break-words @md:w-[33cqw] @md:shrink-0",
+                      "data-guide": guide
+                    },
+                    children: label
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    ...{
+                      className: "flex-1 min-w-0 break-words"
+                    },
+                    children: [
+                      value,
+                      badge && /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          ...{
+                            className: "mt-1 @md:hidden"
+                          },
+                          children: /* @__PURE__ */ jsx(RowBadge, { badge })
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          (badge || button) && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ...{
+                className: "flex items-center gap-2 shrink-0"
+              },
+              children: [
+                badge && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    ...{
+                      className: "hidden @md:inline-flex"
+                    },
+                    children: /* @__PURE__ */ jsx(RowBadge, { badge })
+                  }
+                ),
+                button && /* @__PURE__ */ jsx(
+                  TableActionsCell,
+                  {
+                    ...{
+                      actions: {
+                        button
+                      }
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      },
+      key
+    ))
+  }
+);
+var card_setting_default = CardSetting;
+export {
+  card_setting_default as default
+};

package/dist/dashboard/card-task.js

@@ -0,0 +1,133 @@
+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 card_task_exports = {};
+__export(card_task_exports, {
+  default: () => card_task_default
+});
+module.exports = __toCommonJS(card_task_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_query = require("@tanstack/react-query");
+var import_button = __toESM(require("../shared/button"));
+var import_link = __toESM(require("./link"));
+var import_hooks = require("./lib/hooks");
+const CardTask = ({
+  className,
+  message,
+  title,
+  type = "default",
+  ...rest
+}) => {
+  var _a, _b;
+  const types = {
+    default: "bg-gray border border-black",
+    error: "bg-red-light border border-red",
+    success: "bg-green-light border border-green",
+    warning: "bg-yellow-light border border-yellow"
+  };
+  const queryClient = (0, import_react_query.useQueryClient)();
+  const modal = (0, import_hooks.useModal)({
+    queryClient
+  });
+  const classes = [
+    "flex flex-col items-start justify-between w-full rounded py-3 px-4 gap-4 md:flex-row md:items-center",
+    types[type]
+  ];
+  if (className) {
+    classes.push(className);
+  }
+  const button = () => {
+    const { element = import_link.default, text, ...props } = rest == null ? void 0 : rest.button;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_button.default,
+      {
+        ...{
+          element,
+          onClick: () => {
+            modal.close();
+            queryClient.setQueryData(
+              ["drawer"],
+              (data) => ({
+                ...data,
+                active: false
+              })
+            );
+            if (props.onClick) {
+              props.onClick();
+            }
+          },
+          size: "small",
+          ...props
+        },
+        children: text
+      }
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...{
+        className: classes.join(" "),
+        ...(rest == null ? void 0 : rest["data-guide"]) && {
+          "data-guide": rest["data-guide"]
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            ...{
+              className: "break-word"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  ...{
+                    className: "text-sm "
+                  },
+                  children: message
+                }
+              )
+            ]
+          }
+        ),
+        (((_a = rest == null ? void 0 : rest.button) == null ? void 0 : _a.href) || ((_b = rest == null ? void 0 : rest.button) == null ? void 0 : _b.onClick)) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ...{
+              className: "w-full md:w-auto shrink-0"
+            },
+            children: button()
+          }
+        )
+      ]
+    }
+  );
+};
+var card_task_default = CardTask;

package/dist/dashboard/card-task.mjs

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useQueryClient } from "@tanstack/react-query";
+import Button from "../shared/button";
+import Link from "./link";
+import { useModal } from "./lib/hooks";
+const CardTask = ({
+  className,
+  message,
+  title,
+  type = "default",
+  ...rest
+}) => {
+  var _a, _b;
+  const types = {
+    default: "bg-gray border border-black",
+    error: "bg-red-light border border-red",
+    success: "bg-green-light border border-green",
+    warning: "bg-yellow-light border border-yellow"
+  };
+  const queryClient = useQueryClient();
+  const modal = useModal({
+    queryClient
+  });
+  const classes = [
+    "flex flex-col items-start justify-between w-full rounded py-3 px-4 gap-4 md:flex-row md:items-center",
+    types[type]
+  ];
+  if (className) {
+    classes.push(className);
+  }
+  const button = () => {
+    const { element = Link, text, ...props } = rest == null ? void 0 : rest.button;
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ...{
+          element,
+          onClick: () => {
+            modal.close();
+            queryClient.setQueryData(
+              ["drawer"],
+              (data) => ({
+                ...data,
+                active: false
+              })
+            );
+            if (props.onClick) {
+              props.onClick();
+            }
+          },
+          size: "small",
+          ...props
+        },
+        children: text
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: classes.join(" "),
+        ...(rest == null ? void 0 : rest["data-guide"]) && {
+          "data-guide": rest["data-guide"]
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...{
+              className: "break-word"
+            },
+            children: [
+              /* @__PURE__ */ jsx("p", { children: title }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ...{
+                    className: "text-sm "
+                  },
+                  children: message
+                }
+              )
+            ]
+          }
+        ),
+        (((_a = rest == null ? void 0 : rest.button) == null ? void 0 : _a.href) || ((_b = rest == null ? void 0 : rest.button) == null ? void 0 : _b.onClick)) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...{
+              className: "w-full md:w-auto shrink-0"
+            },
+            children: button()
+          }
+        )
+      ]
+    }
+  );
+};
+var card_task_default = CardTask;
+export {
+  card_task_default as default
+};

package/dist/dashboard/card-template.js

@@ -0,0 +1,197 @@
+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 card_template_exports = {};
+__export(card_template_exports, {
+  default: () => card_template_default
+});
+module.exports = __toCommonJS(card_template_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cdn = require("@drawbridge/drawbridge-utils/cdn");
+var import_provider_font = __toESM(require("../provider-font"));
+const CardTemplatePage = ({
+  description,
+  headline,
+  id,
+  image,
+  ...rest
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const selector = "card-template-page-" + id;
+  const classes = {
+    body: [
+      selector + "-body"
+    ],
+    button: [
+      selector + "-button",
+      "flex items-center justify-center py-3 px-4 shrink-0"
+    ],
+    heading: [
+      selector + "-heading",
+      "text-xl"
+    ]
+  };
+  const style = {
+    background: {
+      color: ((_b = (_a = rest == null ? void 0 : rest.style) == null ? void 0 : _a.background) == null ? void 0 : _b.color) ? rest == null ? void 0 : rest.style.background.color : {
+        hex: "#FFFFFF",
+        rgb: "rgb( 255, 255, 255 )"
+      }
+    },
+    text: {
+      color: ((_d = (_c = rest == null ? void 0 : rest.style) == null ? void 0 : _c.text) == null ? void 0 : _d.color) ? rest == null ? void 0 : rest.style.text.color : {
+        hex: "#000000",
+        rgb: "rgb( 0, 0, 0 )"
+      }
+    }
+  };
+  const opacity = (_g = (_f = (_e = style == null ? void 0 : style.background) == null ? void 0 : _e.color) == null ? void 0 : _f.rgb) == null ? void 0 : _g.replace(")", ",.9)");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_provider_font.default,
+    {
+      ...rest == null ? void 0 : rest.style,
+      children: (fonts) => {
+        var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ...{
+              className: "aspect-[9/16] bg-black rounded-xl bg-cover bg-center border-4 border-[#000000] shadow-xl overflow-hidden",
+              style: {
+                backgroundColor: (_b2 = (_a2 = style == null ? void 0 : style.background) == null ? void 0 : _a2.color) == null ? void 0 : _b2.hex,
+                ...image && {
+                  backgroundImage: "url(" + (0, import_cdn.cdnSrc)(image, "1080x1920", rest == null ? void 0 : rest.updatedAt) + ")"
+                },
+                color: (_d2 = (_c2 = style == null ? void 0 : style.text) == null ? void 0 : _c2.color) == null ? void 0 : _d2.hex
+              }
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
+              {
+                ...{
+                  className: "h-full w-full flex flex-col justify-end"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "div",
+                    {
+                      ...{
+                        className: "w-full h-60",
+                        style: {
+                          backgroundImage: "linear-gradient( to bottom, transparent 0%, " + opacity + " 100% )"
+                        }
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "div",
+                    {
+                      ...{
+                        style: {
+                          backgroundColor: opacity
+                        }
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        "div",
+                        {
+                          ...{
+                            className: "p-6 text-center space-y-3"
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "div",
+                              {
+                                ...{
+                                  className: classes.heading.join(" "),
+                                  style: {
+                                    ...fonts.heading
+                                  }
+                                },
+                                children: headline
+                              }
+                            ),
+                            description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "div",
+                              {
+                                ...{
+                                  className: classes.body.join(" "),
+                                  style: {
+                                    ...fonts.body
+                                  }
+                                },
+                                children: description
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "span",
+                              {
+                                ...{
+                                  className: classes.button.join(" "),
+                                  style: {
+                                    ...fonts.body,
+                                    backgroundColor: ((_h = (_g2 = (_f2 = (_e2 = rest == null ? void 0 : rest.style) == null ? void 0 : _e2.button) == null ? void 0 : _f2.background) == null ? void 0 : _g2.color) == null ? void 0 : _h.hex) || ((_j = (_i = style == null ? void 0 : style.text) == null ? void 0 : _i.color) == null ? void 0 : _j.hex),
+                                    borderRadius: ((_l = (_k = rest == null ? void 0 : rest.style) == null ? void 0 : _k.button) == null ? void 0 : _l.radius) != null ? rest.style.button.radius / 4 + "px" : void 0,
+                                    color: ((_p = (_o = (_n = (_m = rest == null ? void 0 : rest.style) == null ? void 0 : _m.button) == null ? void 0 : _n.text) == null ? void 0 : _o.color) == null ? void 0 : _p.hex) || ((_r = (_q = style == null ? void 0 : style.background) == null ? void 0 : _q.color) == null ? void 0 : _r.hex)
+                                  }
+                                },
+                                children: "Enter"
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        );
+      }
+    }
+  );
+};
+const CardTemplate = ({
+  id,
+  type,
+  ...rest
+}) => {
+  const cards = {
+    page: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      CardTemplatePage,
+      {
+        ...{
+          id,
+          updatedAt: rest == null ? void 0 : rest.updatedAt,
+          ...rest == null ? void 0 : rest.page
+        }
+      }
+    )
+  };
+  return cards == null ? void 0 : cards[type];
+};
+var card_template_default = CardTemplate;