@raketa-cloud/admin 0.0.21 → 0.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raketa-cloud/admin",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "main": "src/index.js",
   "scripts": {
     "dev": "npx tailwindcss -i ./src/styles/application.css -o ../../apps/admin/static/application.css --watch",

package/src/Adapter.js

@@ -116,11 +116,17 @@ export default class Adapter {
     return existsSync(appPath) ? appPath : packagePath;
   }
 
-  getHelpers() {
+  getHelpers(viewHelpersConfig) {
     const t = new HTMLBuilder();
     const f = new FormBuilder();
 
-    return { t, f, form_for, sort_button, pagination };
+    return {
+      t,
+      f,
+      form_for: form_for(viewHelpersConfig),
+      sort_button,
+      pagination,
+    };
   }
 
   async renderLayout(assigns, body) {
@@ -132,9 +138,9 @@ export default class Adapter {
     });
   }
 
-  async renderAction({ views, action, assigns }) {
+  async renderAction({ views, action, assigns }, viewHelpersConfig = {}) {
     const fullTemplatePath = this.getActionPath(views, action);
-    const renderAssigns = { ...this.getHelpers(), ...assigns };
+    const renderAssigns = { ...this.getHelpers(viewHelpersConfig), ...assigns };
 
     try {
       const rendered = await ejs.renderFile(fullTemplatePath, renderAssigns);

package/src/HonoAdapter.js

@@ -185,11 +185,14 @@ export default class HonoAdapter extends Adapter {
           return routerCtx.json(json);
         }
 
-        const rendered = this.renderAction({
-          views,
-          action,
-          assigns: fullAssigns,
-        });
+        const rendered = this.renderAction(
+          {
+            views,
+            action,
+            assigns: fullAssigns,
+          },
+          this.globalConfig?.helpers || {}
+        );
 
         return routerCtx.html(rendered);
       });

package/src/helpers/FormBuilder.js

@@ -1,5 +1,61 @@
 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)) {
@@ -33,10 +89,11 @@ function toFormName(dotNotation) {
 }
 
 export default class FormBuilder extends HTMLBuilder {
-  constructor(obj = {}, errors = {}) {
+  constructor(obj = {}, errors = {}, config = {}) {
     super();
     this.obj = obj;
     this.errors = errors;
+    this.config = config;
   }
 
   __getValue(name) {
@@ -85,6 +142,7 @@ export default class FormBuilder extends HTMLBuilder {
     const selected = value || this.__getValue(name);
 
     const renderedOpts = [];
+
     if (prompt) {
       renderedOpts.push(this.tag("option", prompt, { value: "" }));
     }
@@ -191,8 +249,73 @@ export default class FormBuilder extends HTMLBuilder {
     return this.tag("button", label, { type: "submit", ...opts });
   }
 
+  button(name, opts) {
+    const { label, ...rest } = opts;
+    const defaultLabel = opts?.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",
+        });
+      } else {
+        return this.field(`${name}.${key}`, {
+          label: innerOpts.label,
+          class: "no-margin",
+        });
+      }
+    });
+
+    return this.tag(
+      "fieldset",
+      [this.tag("legend", defaultLabel, {}), ...fields].join(""),
+      {
+        class: "button-group",
+      }
+    );
+  }
+
+  link(name, opts) {
+    const { label, ...rest } = opts;
+    const defaultLabel = opts?.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",
+        });
+      } else {
+        return this.field(`${name}.${key}`, {
+          label: innerOpts.label,
+          class: "no-margin",
+        });
+      }
+    });
+
+    return this.tag(
+      "fieldset",
+      [this.tag("legend", defaultLabel, {}), ...fields].join(""),
+      {
+        class: "link-group",
+      }
+    );
+  }
+
   field(name, opts = {}) {
     const { as = "input", label, ...rest } = opts;
+
+    if (as === "button" || as === "link") {
+      return this[as](name, { ...rest, label });
+    }
+
     const defaultLabel = opts?.label || this.__getDefaultLabel(name);
     const htmlID = this.__getID(name);
     const error = this.__getError(name);

package/src/helpers/form_for.js

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

package/src/styles/application.css

@@ -170,6 +170,30 @@ body {
     .hint {
       @apply text-sm opacity-50;
     }
+
+    .button-group,
+    .link-group {
+      @apply grid grid-cols-6 gap-4 mb-4;
+    }
+
+    .button-group label,
+    .link-group label {
+      @apply font-normal;
+    }
+
+    .button-group legend,
+    .link-group legend {
+      @apply col-span-6 text-nowrap text-sm font-semibold w-fit pb-2;
+    }
+
+    .button-group div,
+    .link-group div {
+      @apply col-span-2 mb-0;
+    }
+
+    .no-margin {
+      @apply m-0;
+    }
   }
 
   .inline-form {

package/src/views/articles/_form.ejs

@@ -2,7 +2,7 @@
 <form action="<%= resource?.id ? `/${_context.locale}/articles/${resource.id}` : `/${_context.locale}/articles` %>" method="post" class="form">
   <%- f.field('resource.title', { required: true }) %>
   <%- f.field('resource.slug', { label: "URL", required: true }) %>
-  <%- f.field('resource.publish_at', { required: true, type: 'datetime-local' }) %>
+  <%- f.field('general_settings.publish_at', { required: true, type: 'datetime-local', label: 'Publish at (UTC)' }) %>
 
   <%- f.field('resource.visibility', { as: 'select', required: true, options: visibilityOptions }) %>
 
@@ -18,10 +18,7 @@
   <%- f.field('resource.meta_title', { required: true }) %>
   <%- f.field('resource.meta_description', { as: "textarea", required: true }) %>
 
-  <raketa-image-picker
-    name="resource[meta_image]"
-    value="<%= JSON.stringify(resource.meta_image) %>"
-  ></raketa-image-picker>
+  <raketa-image-picker name="resource[meta_image]" value="<%= JSON.stringify(resource.meta_image) %>"></raketa-image-picker>
 
   <%- f.field('resource.tags', { as: 'checkbox_group', required: true, options: tags.map(tag => [tag.id, tag.name]) }) %>
 

package/src/views/events/_form.ejs

@@ -2,9 +2,9 @@
 <form action="<%= resource?.id ? `/${_context.locale}/events/${resource.id}` : `/${_context.locale}/events` %>" method="post" class="form">
   <%- f.field('resource.title', { required: true }) %>
   <%- f.field('resource.slug', { label: "URL", required: true }) %>
-  <%- f.field('resource.publish_at', { required: true, type: 'datetime-local' }) %>
-  <%- f.field('resource.starts_at', { required: true, type: 'datetime-local' }) %>
-  <%- f.field('resource.ends_at', { required: true, type: 'datetime-local' }) %>
+  <%- f.field('general_settings.publish_at', { required: true, type: 'datetime-local', label: 'Publish at (UTC)' }) %>
+  <%- f.field('general_settings.starts_at', { required: true, type: 'datetime-local', label: 'Starts at (UTC)' }) %>
+  <%- f.field('general_settings.ends_at', { required: true, type: 'datetime-local', label: 'Ends at (UTC)' }) %>
 
   <%- f.field('resource.visibility', { as: 'select', required: true, options: visibilityOptions }) %>
 
@@ -20,10 +20,7 @@
   <%- f.field('resource.meta_title', { required: true }) %>
   <%- f.field('resource.meta_description', { as: "textarea", required: true }) %>
 
-  <raketa-image-picker
-    name="resource[meta_image]"
-    value="<%= JSON.stringify(resource.meta_image) %>"
-  ></raketa-image-picker>
+  <raketa-image-picker name="resource[meta_image]" value="<%= JSON.stringify(resource.meta_image) %>"></raketa-image-picker>
 
   <%- f.field('resource.tags', { as: 'checkbox_group', required: true, options: tags.map(tag => [tag.id, tag.name]) }) %>
 

package/src/views/settings/general/edit_form.ejs

@@ -23,4 +23,4 @@
     </div>
   </div>
 
-</div>
+</div>

package/src/views/settings/layout/edit_form.ejs

@@ -19,4 +19,4 @@
     </form>
     <% }) %>
   </div>
-</div>
+</div>