@raketa-cloud/admin 0.0.4 → 0.0.6

package/src/helpers/FormBuilder.js

@@ -0,0 +1,226 @@
+import HTMLBuilder from "./HTMLBuilder";
+
+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 = {}) {
+    super();
+    this.obj = obj;
+    this.errors = errors;
+  }
+
+  __getValue(name) {
+    return dig(this.obj, name) || "";
+  }
+
+  __getError(name) {
+    return dig(this.errors, name) || "";
+  }
+
+  __getFieldName(name) {
+    return name.split(".").at(-1).replace("[]", "");
+  }
+
+  __getID(name) {
+    const field = this.__getFieldName(name);
+    return `f_${field}`;
+  }
+
+  __getDefaultLabel(name) {
+    const field = this.__getFieldName(name);
+    return humanize(field);
+  }
+
+  input(name, opts = {}) {
+    const value = this.__getValue(name);
+    return this.tag("input", null, { type: "text", name, value, ...opts });
+  }
+
+  textarea(name, opts = {}) {
+    const { value, ...rest } = opts;
+
+    return this.tag(
+      "textarea",
+      value || this.__getValue(name),
+      {
+        name,
+        ...rest,
+      },
+      { nonVoid: true }
+    );
+  }
+
+  select(name, opts = {}) {
+    const { value, options = [], prompt = "Please select...", ...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.tag("select", renderedOpts.join(""), { name, ...rest });
+  }
+
+  radio_group(name, opts = {}) {
+    const { value, options = [], ...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.tag("div", renderedOpts.join(""), { ...rest });
+  }
+
+  checkbox_group(name, opts = {}) {
+    const { value, options = [], ...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: `${opts.name}[]`,
+        value: o[0],
+        ...additionalOpts,
+      });
+
+      renderedOpts.push(this.tag("label", `${checkbox} ${o[1]}`));
+    }
+
+    return this.tag("div", renderedOpts.join(""), {
+      ...rest,
+      class: ["checkbox-group", rest.class].filter(Boolean).join(" "),
+    });
+  }
+
+  checkbox(name, opts = {}) {
+    const { value: desiredValue } = opts;
+
+    const value = this.__getValue(name);
+    const selected = value === desiredValue ? { checked: "checked" } : {};
+
+    return this.tag("input", null, {
+      type: "checkbox",
+      name,
+      value,
+      ...opts,
+      ...selected,
+    });
+  }
+
+  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" });
+  }
+
+  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 });
+  }
+
+  field(name, opts = {}) {
+    const { as = "input", label, ...rest } = opts;
+    const defaultLabel = opts?.label || this.__getDefaultLabel(name);
+    const htmlID = this.__getID(name);
+    const error = this.__getError(name);
+
+    if (as === "checkbox") {
+      return this.group(
+        [
+          this.tag(
+            "div",
+            [
+              this[as](name, { id: htmlID, name: toFormName(name), ...rest }),
+              this.label(name, `${label || defaultLabel}`),
+            ]
+              .filter(Boolean)
+              .join(""),
+            {
+              class: "checkbox-wrapper",
+            }
+          ),
+          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}</${tag}>`;
+
+    return `<${tag} ${htmlAttributes} />`;
+  }
+}

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,6 @@
+import FormBuilder from "./FormBuilder";
+
+export default function form_for(obj = {}, errors = {}, callback = (_) => {}) {
+  const form = new FormBuilder(obj, errors);
+  return callback(form);
+}

package/src/helpers/pagination_helper.js

@@ -0,0 +1,5 @@
+import Pagination from "./Pagination";
+
+export default function pagination(pagination, router) {
+  return new Pagination(pagination, router).build();
+}

package/src/helpers/sort_button.js

@@ -0,0 +1,5 @@
+import SortButton from "./SortButton";
+
+export default function sort_button(label, name, router) {
+  return new SortButton(label, name, router).build();
+}

package/src/index.js

@@ -1,3 +1,7 @@
 export { default as HonoAdapter } from "./HonoAdapter";
-export { default as createResource } from "./createResource";
-export { default as createNestedResource } from "./createNestedResource";
+export { default as routeCollection } from "./routeCollection";
+export { default as routeNestedCollection } from "./routeNestedCollection";
+export { default as routeMember } from "./routeMember";
+export { default as routeNestedMember } from "./routeNestedMember";
+export { default as setGlobalContext } from "./setGlobalContext";
+export { default as setGlobalConfig } from "./setGlobalConfig";

package/src/{createResource.js → routeCollection.js}

@@ -1,4 +1,4 @@
-const createResource = (adapter, resource, handler) => {
+const routeCollection = (adapter, resource, handler) => {
   const {
     before_filter,
     after_filter,
@@ -16,6 +16,7 @@ const createResource = (adapter, resource, handler) => {
       "GET",
       `/${resource}`,
       resource,
+      resource,
       "index",
       index,
       before_filter,
@@ -25,6 +26,7 @@ const createResource = (adapter, resource, handler) => {
       "GET",
       `/${resource}/new`,
       resource,
+      resource,
       "create_form",
       create_form,
       before_filter,
@@ -34,6 +36,7 @@ const createResource = (adapter, resource, handler) => {
       "GET",
       `/${resource}/:id`,
       resource,
+      resource,
       "show",
       show,
       before_filter,
@@ -43,6 +46,7 @@ const createResource = (adapter, resource, handler) => {
       "GET",
       `/${resource}/:id/edit`,
       resource,
+      resource,
       "edit_form",
       edit_form,
       before_filter,
@@ -52,16 +56,18 @@ const createResource = (adapter, resource, handler) => {
       "POST",
       `/${resource}`,
       resource,
-      "create",
+      resource,
+      "create_form",
       create,
       before_filter,
       after_filter,
     ],
     [
-      "PUT",
+      "POST",
       `/${resource}/:id`,
       resource,
-      "update",
+      resource,
+      "edit_form",
       update,
       before_filter,
       after_filter,
@@ -70,6 +76,7 @@ const createResource = (adapter, resource, handler) => {
       "DELETE",
       `/${resource}/:id`,
       resource,
+      resource,
       "destroy",
       destroy,
       before_filter,
@@ -77,7 +84,7 @@ const createResource = (adapter, resource, handler) => {
     ],
   ];
 
-  adapter.createResource(mapping);
+  adapter.routeCollection(mapping);
 };
 
-export default createResource;
+export default routeCollection;

package/src/routeMember.js

@@ -0,0 +1,40 @@
+const routeMember = (adapter, resource, handler) => {
+  const { before_filter, after_filter, show, edit_form, update } = handler;
+
+  const mapping = [
+    [
+      "GET",
+      `/${resource}`,
+      resource,
+      resource,
+      "show",
+      show,
+      before_filter,
+      after_filter,
+    ],
+    [
+      "GET",
+      `/${resource}/edit`,
+      resource,
+      resource,
+      "edit_form",
+      edit_form,
+      before_filter,
+      after_filter,
+    ],
+    [
+      "POST",
+      `/${resource}`,
+      resource,
+      resource,
+      "edit_form",
+      update,
+      before_filter,
+      after_filter,
+    ],
+  ];
+
+  adapter.routeMember(mapping);
+};
+
+export default routeMember;

package/src/{createNestedResource.js → routeNestedCollection.js}

@@ -1,4 +1,4 @@
-const createNestedResource = (adapter, parent, resource, handler) => {
+const routeNestedCollection = (adapter, parent, resource, handler) => {
   const {
     before_filter,
     after_filter,
@@ -16,6 +16,7 @@ const createNestedResource = (adapter, parent, resource, handler) => {
       "GET",
       `/${parent}/:parent_id/${resource}`,
       resource,
+      resource,
       "index",
       index,
       before_filter,
@@ -25,6 +26,7 @@ const createNestedResource = (adapter, parent, resource, handler) => {
       "GET",
       `/${parent}/:parent_id/${resource}/new`,
       resource,
+      resource,
       "create_form",
       create_form,
       before_filter,
@@ -34,6 +36,7 @@ const createNestedResource = (adapter, parent, resource, handler) => {
       "GET",
       `/${resource}/:id`,
       resource,
+      resource,
       "show",
       show,
       before_filter,
@@ -43,6 +46,7 @@ const createNestedResource = (adapter, parent, resource, handler) => {
       "GET",
       `/${resource}/:id/edit`,
       resource,
+      resource,
       "edit_form",
       edit_form,
       before_filter,
@@ -50,9 +54,10 @@ const createNestedResource = (adapter, parent, resource, handler) => {
     ],
     [
       "POST",
-      `/orders/:parent_id/${resource}`,
+      `/${parent}/:parent_id/${resource}`,
       resource,
-      "create",
+      resource,
+      "create_form",
       create,
       before_filter,
       after_filter,
@@ -61,6 +66,7 @@ const createNestedResource = (adapter, parent, resource, handler) => {
       "PUT",
       `/${resource}/:id`,
       resource,
+      resource,
       "update",
       update,
       before_filter,
@@ -70,6 +76,7 @@ const createNestedResource = (adapter, parent, resource, handler) => {
       "DELETE",
       `/${resource}/:id`,
       resource,
+      resource,
       "destroy",
       destroy,
       before_filter,
@@ -77,7 +84,7 @@ const createNestedResource = (adapter, parent, resource, handler) => {
     ],
   ];
 
-  adapter.createNestedResource(mapping);
+  adapter.routeNestedCollection(mapping);
 };
 
-export default createNestedResource;
+export default routeNestedCollection;