@raketa-cloud/admin 0.0.102 → 1.0.0

package/src/helpers/FormBuilder.js

@@ -0,0 +1,438 @@
+import HTMLBuilder from "./HTMLBuilder";
+
+const BUTTON_FIELDS_MAP = {
+  label: { label: "Label" },
+  link: { label: "Link" },
+  id: { label: "ID" },
+  type: {
+    label: "Type",
+    as: "select",
+    options: [
+      ["primary", "Primary"],
+      ["secondary", "Secondary"],
+      ["text", "Text"],
+    ],
+  },
+  target: {
+    label: "Target",
+    as: "select",
+    options: [
+      ["_self", "Self"],
+      ["_blank", "New Tab"],
+    ],
+  },
+  rel: {
+    label: "Follow Link",
+    as: "select",
+    options: [
+      ["follow", "Follow"],
+      ["nofollow", "No Follow"],
+    ],
+  },
+};
+
+const LINK_FIELDS_MAP = {
+  label: { label: "Label" },
+  link: { label: "Link" },
+  id: { label: "ID" },
+  className: {
+    label: "CSS Class",
+  },
+  target: {
+    label: "Target",
+    as: "select",
+    options: [
+      ["_self", "Self"],
+      ["_blank", "New Tab"],
+    ],
+  },
+  rel: {
+    label: "Follow Link",
+    as: "select",
+    options: [
+      ["follow", "Follow"],
+      ["nofollow", "No Follow"],
+    ],
+  },
+};
+
+function dig(obj, path) {
+  return path.split(".").reduce((acc, key) => {
+    if (acc && Object.hasOwn(acc, key)) {
+      return acc[key];
+    }
+
+    return undefined;
+  }, obj);
+}
+
+function humanize(string) {
+  if (typeof string !== "string") {
+    return "";
+  }
+
+  return string
+    .replace(/^_+|_+$/g, "")
+    .replace(/_id$/, "")
+    .replace(/_/g, " ")
+    .replace(/([a-z\d])([A-Z])/g, "$1 $2")
+    .replace(/\b([A-Z]+)([A-Z][a-z])/g, "$1 $2")
+    .toLowerCase()
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+function toFormName(dotNotation) {
+  return dotNotation
+    .split(".")
+    .map((part, index) => (index === 0 ? part : `[${part}]`))
+    .join("");
+}
+
+export default class FormBuilder extends HTMLBuilder {
+  constructor(obj = {}, errors = {}, config = {}) {
+    super();
+    this.obj = obj;
+    this.errors = errors;
+    this.config = config;
+  }
+
+  __getValue(name) {
+    return dig(this.obj, name) || "";
+  }
+
+  __getError(name) {
+    return dig(this.errors, name) || "";
+  }
+
+  __getFieldName(name) {
+    return name.split(".").at(-1).replace("[]", "");
+  }
+
+  __getID(name) {
+    return `f_${name.replaceAll(".", "_")}`;
+  }
+
+  __getDefaultLabel(name) {
+    const field = this.__getFieldName(name);
+    return humanize(field);
+  }
+
+  withHint(markup, hint) {
+    return [markup, hint ? this.hint(hint) : ""].join("");
+  }
+
+  input(name, opts = {}) {
+    const { hint = "", ...rest } = opts;
+    const value = this.__getValue(name);
+
+    return this.withHint(
+      this.tag("input", null, { type: "text", name, value, ...rest }),
+      hint
+    );
+  }
+
+  textarea(name, opts = {}) {
+    const { value, hint = "", ...rest } = opts;
+
+    return this.withHint(
+      this.tag(
+        "textarea",
+        value || this.__getValue(name),
+        {
+          name,
+          ...rest,
+        },
+        { nonVoid: true }
+      ),
+      hint
+    );
+  }
+
+  select(name, opts = {}) {
+    const {
+      value,
+      options = [],
+      prompt = "Please select...",
+      hint = "",
+      ...rest
+    } = opts;
+    const selected = value || this.__getValue(name);
+
+    const renderedOpts = [];
+
+    if (prompt) {
+      renderedOpts.push(this.tag("option", prompt, { value: "" }));
+    }
+
+    for (const o of options) {
+      const additionalOpts = o[0] === selected ? { selected: "selected" } : {};
+
+      renderedOpts.push(
+        this.tag("option", o[1], { value: o[0], ...additionalOpts })
+      );
+    }
+
+    return this.withHint(
+      this.tag("select", renderedOpts.join(""), { name, ...rest }),
+      hint
+    );
+  }
+
+  radio_group(name, opts = {}) {
+    const { value, options = [], hint = "", ...rest } = opts;
+    const selected = value || this.__getValue(name);
+
+    const renderedOpts = [];
+
+    for (const o of options) {
+      const additionalOpts = o[0] === selected ? { checked: "checked" } : {};
+
+      const radio = this.tag("input", null, {
+        type: "radio",
+        name: opts.name,
+        value: o[0],
+        ...additionalOpts,
+      });
+
+      renderedOpts.push(this.tag("label", `${radio} ${o[1]}`));
+    }
+
+    return this.withHint(
+      this.tag("div", renderedOpts.join(""), {
+        ...rest,
+        class: ["radio-group", rest.class].filter(Boolean).join(" "),
+      }),
+      hint
+    );
+  }
+
+  checkbox_group(name, opts = {}) {
+    const { value, options = [], hint = "", name: optsName, ...rest } = opts;
+    const selected = value || this.__getValue(name);
+
+    const renderedOpts = [];
+
+    for (const o of options) {
+      const additionalOpts = selected.includes(o[0])
+        ? { checked: "checked" }
+        : {};
+
+      const checkbox = this.tag("input", null, {
+        type: "checkbox",
+        name: `${optsName}[]`,
+        value: o[0],
+        ...additionalOpts,
+      });
+
+      renderedOpts.push(this.tag("label", `${checkbox} ${o[1]}`));
+    }
+
+    if (renderedOpts.length) {
+      renderedOpts.push(
+        this.tag("input", null, {
+          type: "hidden",
+          name: `${optsName}[]`,
+          value: "",
+        })
+      );
+    }
+
+    return this.withHint(
+      this.tag(
+        "div",
+
+        renderedOpts.length
+          ? renderedOpts.join("")
+          : this.tag("div", "No items available.", {
+              class: "italic opacity-50",
+            }),
+
+        {
+          ...rest,
+          class: ["checkbox-group", rest.class].filter(Boolean).join(" "),
+        }
+      ),
+      hint
+    );
+  }
+
+  checkbox(name, opts = {}) {
+    const { value: desiredValue, default_value: defaultValue, ...rest } = opts;
+    const value = this.__getValue(name);
+    const selected = value === desiredValue ? { checked: "checked" } : {};
+
+    const checkboxItem = this.tag("input", null, {
+      type: "checkbox",
+      value: desiredValue,
+      ...rest,
+      ...selected,
+    });
+
+    if (defaultValue === undefined) {
+      return checkboxItem;
+    }
+
+    // Make sure to submit the negative value if unchecked
+    const hiddenComplementaryItem = this.tag("input", null, {
+      type: "hidden",
+      name: toFormName(name),
+      value: defaultValue,
+    });
+
+    return [hiddenComplementaryItem, checkboxItem].join("");
+  }
+
+  label(name, children, opts = {}) {
+    const htmlID = this.__getID(name);
+    return this.tag("label", children, { for: htmlID, ...opts });
+  }
+
+  error(children) {
+    return this.tag("span", children, { class: "text-red-600" });
+  }
+
+  hint(children) {
+    return this.tag("span", children, { class: "help-block" });
+  }
+
+  group(children, opts = {}) {
+    return this.tag("div", children, {
+      class: ["mb-4", opts.class].filter(Boolean).join(" "),
+    });
+  }
+
+  submit(label, opts = {}) {
+    return this.tag("button", label, { type: "submit", ...opts });
+  }
+
+  button(name, opts) {
+    const { label, hint = "" } = opts;
+    const defaultLabel = label || this.__getDefaultLabel(name);
+    const fields = Object.keys(BUTTON_FIELDS_MAP).map((key) => {
+      const innerOpts = BUTTON_FIELDS_MAP[key];
+
+      if (innerOpts.as) {
+        return this.field(`${name}.${key}`, {
+          as: innerOpts.as,
+          options: this.config.buttons?.[`${key}Options`] || innerOpts.options,
+          label: innerOpts.label,
+          class: "no-margin",
+        });
+      }
+      return this.field(`${name}.${key}`, {
+        label: innerOpts.label,
+        class: "no-margin",
+      });
+    });
+
+    return this.tag(
+      "fieldset",
+      [
+        this.tag("legend", defaultLabel, {}),
+        ...fields,
+        hint ? this.hint(hint) : "",
+      ].join(""),
+      {
+        class: "button-group",
+      }
+    );
+  }
+
+  link(name, opts) {
+    const { label, hint = "" } = opts;
+    const defaultLabel = label || this.__getDefaultLabel(name);
+    const fields = Object.keys(LINK_FIELDS_MAP).map((key) => {
+      const innerOpts = LINK_FIELDS_MAP[key];
+
+      if (innerOpts.as) {
+        return this.field(`${name}.${key}`, {
+          as: innerOpts.as,
+          options: innerOpts.options,
+          label: innerOpts.label,
+          class: "no-margin",
+        });
+      }
+      return this.field(`${name}.${key}`, {
+        label: innerOpts.label,
+        class: "no-margin",
+      });
+    });
+
+    return this.tag(
+      "fieldset",
+      [
+        this.tag("legend", defaultLabel, {}),
+        ...fields,
+        hint ? this.hint(hint) : "",
+      ].join(""),
+      {
+        class: "link-group",
+      }
+    );
+  }
+
+  field(name, opts = {}) {
+    const { as = "input", label, ...rest } = opts;
+
+    if (as === "button" || as === "link") {
+      return this[as](name, { ...rest, label });
+    }
+
+    if (rest.type === "hidden") {
+      return this.tag("input", null, {
+        name: toFormName(name),
+        ...rest,
+      });
+    }
+
+    let defaultLabel = this.__getDefaultLabel(name);
+
+    if (Object.hasOwn(opts, "label")) {
+      defaultLabel = opts?.label;
+    }
+
+    const htmlID = this.__getID(name);
+    const error = this.__getError(name);
+
+    if (as === "checkbox") {
+      const { hint = "", ...cbOptsRest } = rest;
+
+      return this.group(
+        [
+          this.tag(
+            "div",
+            [
+              this[as](name, {
+                id: htmlID,
+                name: toFormName(name),
+                ...cbOptsRest,
+              }),
+              this.label(name, `${label || defaultLabel}`),
+            ]
+              .filter(Boolean)
+              .join(""),
+            {
+              class: "checkbox-wrapper",
+            }
+          ),
+          hint ? this.hint(hint) : "",
+          error ? this.error(error) : "",
+        ]
+          .filter(Boolean)
+          .join(""),
+        { class: error ? "has-error" : "" }
+      );
+    }
+
+    return this.group(
+      [
+        this.label(name, label || defaultLabel),
+        this[as](name, { id: htmlID, name: toFormName(name), ...rest }),
+        error ? this.error(error) : "",
+      ]
+        .filter(Boolean)
+        .join(""),
+      { class: error ? "has-error" : "" }
+    );
+  }
+}

package/src/helpers/HTMLBuilder.js

@@ -0,0 +1,38 @@
+export default class HTMLBuilder {
+  constructor() {
+    // biome-ignore lint/correctness/noConstructorReturn: <explanation>
+    return new Proxy(this, {
+      get: (target, prop) => {
+        if (prop in target) {
+          return target[prop];
+        }
+
+        return this.__notExisting.bind(this, prop);
+      },
+    });
+  }
+
+  __notExisting(methodName, ...args) {
+    return args.length === 1
+      ? this.tag(methodName, null, ...args)
+      : this.tag(methodName, ...args);
+  }
+
+  escape(str) {
+    return str.toString().replaceAll('"', '\\"');
+  }
+
+  tag(tag, children = null, attributes = {}, opts = {}) {
+    const nonVoid = opts?.nonVoid;
+
+    const htmlAttributes = Object.keys(attributes).reduce((acc, curr) => {
+      const appended = `${acc} ${curr}="${this.escape(attributes[curr])}"`;
+      return appended;
+    }, "");
+
+    if (children || nonVoid)
+      return `<${tag} ${htmlAttributes}>${children ? children : ""}</${tag}>`;
+
+    return `<${tag} ${htmlAttributes} />`;
+  }
+}

package/src/helpers/Inflector.js

@@ -0,0 +1,9 @@
+const Inflector = {
+  capitalize: (str) => str[0].toUpperCase() + str.slice(1),
+  downcase: (str) => str.toLowerCase(),
+  humanize: (str) => {
+    return str.replaceAll(/[_-]+/g, " ");
+  },
+};
+
+export default Inflector;

package/src/helpers/Pagination.js

@@ -0,0 +1,92 @@
+import HTMLBuilder from "./HTMLBuilder";
+
+export default class Pagination extends HTMLBuilder {
+  constructor(pagination, router) {
+    super();
+    this.pagination = pagination;
+    this.query = router.query;
+    this.path = router.path;
+  }
+
+  __inactiveButton(children) {
+    return this.tag("span", children, {
+      class: "btn-text is-inactive",
+    });
+  }
+
+  __activeButton(children, opts = {}) {
+    return this.tag("a", children, {
+      class: "btn-text",
+      ...opts,
+    });
+  }
+
+  __pageNumberForm() {
+    return this.tag(
+      "form",
+      [
+        this.tag("input", "", {
+          type: "number",
+          value: this.pagination.currentPage,
+        }),
+        `of  ${this.pagination.pagesCount}`,
+      ].join(" "),
+      { action: this.path, method: "GET" }
+    );
+  }
+
+  __paginationElement(children) {
+    return this.tag("div", this.tag("div", children), { class: "pagination" });
+  }
+
+  __buildHref(pageNumber) {
+    return [
+      this.path,
+      new URLSearchParams({ ...this.query, page: pageNumber }).toString(),
+    ]
+      .filter(Boolean)
+      .join("?");
+  }
+
+  build() {
+    if (this.pagination.pagesCount === 1) {
+      return "";
+    }
+
+    const children = [];
+
+    if (this.pagination.currentPage === 1) {
+      children.push(
+        this.__inactiveButton("First"),
+        this.__inactiveButton("Previous")
+      );
+    } else {
+      children.push(
+        this.__activeButton("First", { href: this.__buildHref(1) }),
+        this.__activeButton("Previous", {
+          href: this.__buildHref(this.pagination.currentPage - 1),
+        })
+      );
+    }
+
+    children.push(this.__pageNumberForm());
+
+    if (this.pagination.currentPage === this.pagination.pagesCount) {
+      children.push(
+        this.__inactiveButton("Next"),
+        this.__inactiveButton("Last")
+      );
+    } else {
+      children.push(
+        this.__activeButton("Next", {
+          href: this.__buildHref(this.pagination.currentPage + 1),
+        }),
+        this.__activeButton("Last", {
+          href: this.__buildHref(this.pagination.pagesCount),
+        })
+      );
+    }
+
+    return this.__paginationElement(children.join("\n"));
+  }
+}

package/src/helpers/SortButton.js

@@ -0,0 +1,102 @@
+import HTMLBuilder from "./HTMLBuilder";
+
+export default class SortButton extends HTMLBuilder {
+  constructor(label, name, router) {
+    super();
+    this.title = label;
+    this.name = name;
+    this.query = router.query;
+    this.path = router.path;
+  }
+
+  inactiveIcon() {
+    return `<svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        class="size-4"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M2.24 6.8a.75.75 0 0 0 1.06-.04l1.95-2.1v8.59a.75.75 0 0 0 1.5 0V4.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0L2.2 5.74a.75.75 0 0 0 .04 1.06Zm8 6.4a.75.75 0 0 0-.04 1.06l3.25 3.5a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02l-1.95 2.1V6.75a.75.75 0 0 0-1.5 0v8.59l-1.95-2.1a.75.75 0 0 0-1.06-.04Z"
+          clip-rule="evenodd"
+        />
+      </svg>`;
+  }
+
+  descIcon() {
+    return `<svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        class="size-4"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M10 3a.75.75 0 0 1 .75.75v10.638l3.96-4.158a.75.75 0 1 1 1.08 1.04l-5.25 5.5a.75.75 0 0 1-1.08 0l-5.25-5.5a.75.75 0 1 1 1.08-1.04l3.96 4.158V3.75A.75.75 0 0 1 10 3Z"
+          clip-rule="evenodd"
+        />
+      </svg>`;
+  }
+
+  ascIcon() {
+    return `<svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        class="size-4"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z"
+          clip-rule="evenodd"
+        />
+      </svg>`;
+  }
+
+  build() {
+    const updatedQuery = {};
+    const klass = ["btn-sort"];
+    let icon = this.inactiveIcon();
+
+    for (const [key, value] of Object.entries(this.query)) {
+      if (key !== "order_direction" && key !== "order_by") {
+        updatedQuery[key] = value;
+      }
+    }
+
+    if (this.query.order_by === this.name) {
+      updatedQuery.order_direction =
+        this.query.order_direction === "ASC" ? "DESC" : "ASC";
+    } else {
+      updatedQuery.order_direction = "ASC";
+    }
+
+    updatedQuery.order_by = this.name;
+
+    const href = [this.path, new URLSearchParams(updatedQuery).toString()]
+      .filter(Boolean)
+      .join("?");
+
+    if (
+      this.query.order_by === this.name &&
+      this.query.order_direction === "ASC"
+    ) {
+      klass.push("is-active");
+      icon = this.ascIcon();
+    }
+
+    if (
+      this.query.order_by === this.name &&
+      this.query.order_direction === "DESC"
+    ) {
+      klass.push("is-active");
+      icon = this.descIcon();
+    }
+
+    return this.tag("a", [icon, this.title].join("\n"), {
+      href: href,
+      class: klass.join(" "),
+    });
+  }
+}

package/src/helpers/form_for.js

@@ -0,0 +1,8 @@
+import FormBuilder from "./FormBuilder";
+
+export default function form_for(viewHelpersConfig = {}) {
+  return function form_for(obj = {}, errors = {}, callback = (_) => {}) {
+    const form = new FormBuilder(obj, errors, viewHelpersConfig);
+    return callback(form);
+  };
+}