fuji_admin 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 84d5ee21faecdb6bc1cfc795a561d6048b78c6fc5606a1677f1f7e3f2c98255e
+  data.tar.gz: 752b254a7fa3769e3edc3dc7145793d1212ce9a6ff220830fb1ad42bebec468a
+SHA512:
+  metadata.gz: f749ae04c4dbb606f8f5ee790b1af74f37fe8138ba7f71d79dc151004a0a18296784c8095da90fef088dbd23e8e0581f53f7c6986e20b2b6208667c7bbfa4b35
+  data.tar.gz: b9798fe929298c2b856ccb858095cd270fdd542d08a03a33e5ea7191834203118be47ce8078b1cd39769e55c6163ac008d1b1c2bf5f4af61a73edefb9dae7fe1

data/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dario
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,143 @@
+# Fuji Admin
+
+A responsive [ActiveAdmin](https://github.com/activeadmin/activeadmin) theme.
+Clean card-based layout, slide-in filter drawer, float-label inputs,
+row-action dropdowns, and a live palette switcher with 30 built-in palettes.
+
+Inspired by [arctic_admin](https://github.com/cprodhomme/arctic_admin) (SCSS
+structure) and [PrimeReact Verona](https://verona.primereact.org/) (visual
+language).
+
+## Features
+
+- **Responsive layout** — fixed header + sidebar nav at `lg+`, auto-injected
+  hamburger drawer below, edge-to-edge content on mobile.
+- **Filter drawer** — AA's `#sidebar` is turned into a right-side slide-in
+  panel with a "Filters" toggle in the title bar. Includes a chip strip
+  above the table showing each active Ransack filter (click × to remove).
+- **Float labels** on text inputs, matching the Verona feel.
+- **Row-action dropdown** — 2+ row actions collapse into a single `⋯`
+  menu per row, rendered above any clipping parents via `position: fixed`.
+- **Palette switcher** — 30 palettes (Coolors-trending), 8 of them curated
+  full themes that repaint surfaces + text + borders. Non-themed palettes
+  auto-derive tinted surfaces from the primary via `color-mix()`.
+- **Refactored form chrome** — fieldset legends rendered as proper card
+  headers, not floating `<legend>` text over borders.
+- **Full component set** — buttons, inputs, selects, Select2, jQuery UI
+  date picker, tables (index / attributes / summary / `table_for`),
+  pagination, status tags, flash banners, scopes, dropdown menus, comments,
+  watchlist bar.
+
+## Requirements
+
+- Ruby `>= 3.1.0`
+- ActiveAdmin `>= 3.0`, `< 4.0`
+
+## Installation
+
+### From GitHub (recommended)
+
+In your host app's `Gemfile`:
+
+```ruby
+gem "fuji_admin", github: "BarbaricCorgi/fuji_admin"
+```
+
+Then:
+
+```bash
+bundle install
+```
+
+The Gemfile.lock pins the exact commit SHA, so CI / Docker / Kamal builds
+are reproducible without needing to publish to RubyGems.
+
+### Asset imports
+
+In `app/assets/stylesheets/active_admin.scss`:
+
+```scss
+@import "fuji_admin/base";
+```
+
+In `app/assets/javascripts/active_admin.js`:
+
+```javascript
+//= require fuji_admin/base
+```
+
+## Configuration
+
+Add a Rails initializer — all attributes are optional.
+
+```ruby
+# config/initializers/fuji_admin.rb
+FujiAdmin.configure do |config|
+  # Id of the palette to apply before any user selection is stored.
+  # Must match one of the ids in app/assets/javascripts/fuji_admin/palettes.js.
+  config.default_palette = "forest-meadow"
+
+  # Render the floating palette-picker UI. Defaults to false. Flip on in
+  # development to audition palettes live.
+  config.palette_picker = Rails.env.development?
+end
+```
+
+Configuration is surfaced to the browser via `<meta>` tags injected into
+ActiveAdmin's `<head>` — no host-layout changes required.
+
+## Development against a host app
+
+Clone both repos side-by-side:
+
+```
+~/development/
+  ├── fuji_admin/
+  └── my_admin_app/
+```
+
+Point the host's `Gemfile` at the github source (as above), then tell
+Bundler to resolve it locally so edits in `fuji_admin/` reflect immediately:
+
+```bash
+bundle config local.fuji_admin ~/development/fuji_admin
+```
+
+This is a per-machine config stored in `~/.bundle/config` — CI and
+production never see it and fall back to the github source.
+
+## Customising palettes
+
+The 30 bundled palettes live in
+`app/assets/javascripts/fuji_admin/palettes.js`. Each has:
+
+```javascript
+{
+  id:      "navy-amber",
+  name:    "Navy & Amber",
+  primary: "#219ebc",
+  swatch:  ["#8ecae6","#219ebc","#023047","#ffb703","#fb8500"],
+  theme:   {                        // optional — promotes to a full theme
+    surface:     "#fdfcdc",
+    surfaceAlt:  "#f0ebc5",
+    text:        "#003844",
+    textMuted:   "#00afb5",
+    border:      "#e6e3b5"
+  }
+}
+```
+
+Palettes without a `theme` block get auto-derived surfaces + text by mixing
+the `primary` with white / black at runtime via `color-mix()`, so every
+palette reads as a coherent mini-theme.
+
+## Credits
+
+- [arctic_admin](https://github.com/cprodhomme/arctic_admin) — SCSS
+  structure (variables → mixins → layouts → components → pages).
+- [PrimeReact Verona](https://verona.primereact.org/) — visual language
+  (layout proportions, rounded cards, float labels, filter chips).
+
+## License
+
+MIT — see [LICENSE.txt](LICENSE.txt).

data/app/assets/javascripts/fuji_admin/base.js

@@ -0,0 +1,6 @@
+//= require active_admin/base
+//= require fuji_admin/menu
+//= require fuji_admin/filters
+//= require fuji_admin/floats
+//= require fuji_admin/row_actions
+//= require fuji_admin/palettes

data/app/assets/javascripts/fuji_admin/filters.js

@@ -0,0 +1,282 @@
+// Fuji Admin — filters drawer + active-filter chip strip.
+//
+// On any index page with ActiveAdmin filters (sidebar containing
+// `form.filter_form`):
+//
+//   1. Injects a "Filters" button into #titlebar_right.
+//   2. Turns #sidebar into a right drawer, hidden until the button is clicked.
+//   3. Parses the current URL's Ransack query params (`q[...]`) and renders
+//      a chip strip above the main content, with one-click removal per filter
+//      and a "Clear all" link.
+
+(function () {
+  "use strict";
+
+  var BODY_OPEN_CLASS = "fuji-filters-open";
+
+  // --- DOM helpers --------------------------------------------------------
+
+  // AA sometimes renders the #sidebar as a child of #active_admin_content
+  // (resource index pages) and sometimes as a direct child of #wrapper
+  // (custom register_page index pages). Match either.
+  function filterForm() {
+    return document.querySelector("#sidebar form.filter_form");
+  }
+
+  function sidebar() {
+    var sb = document.querySelector("#sidebar");
+    return sb && sb.querySelector("form.filter_form") ? sb : null;
+  }
+
+  function toggleBtn() {
+    return document.querySelector(".fuji-filters-toggle");
+  }
+
+  // --- Drawer -------------------------------------------------------------
+
+  function ensureToggle() {
+    var rightCol = document.querySelector("#title_bar #titlebar_right");
+    if (!rightCol || rightCol.querySelector(".fuji-filters-toggle")) return;
+
+    var btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "fuji-filters-toggle";
+    btn.setAttribute("aria-label", "Open filters");
+    btn.innerHTML =
+      '<svg class="fuji-filters-toggle__icon" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
+      '<line x1="4" y1="6" x2="20" y2="6"></line>' +
+      '<line x1="7" y1="12" x2="17" y2="12"></line>' +
+      '<line x1="10" y1="18" x2="14" y2="18"></line>' +
+      "</svg>" +
+      "<span>Filters</span>" +
+      '<span class="fuji-filters-toggle__count" hidden></span>';
+    rightCol.insertBefore(btn, rightCol.firstChild);
+  }
+
+  function ensureDrawerHeader() {
+    var sb = sidebar();
+    if (!sb || sb.querySelector(".fuji-filters-drawer__header")) return;
+
+    var header = document.createElement("div");
+    header.className = "fuji-filters-drawer__header";
+    header.innerHTML =
+      '<h3 class="fuji-filters-drawer__title">Filters</h3>' +
+      '<button type="button" class="fuji-filters-drawer__close" aria-label="Close filters">' +
+      '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">' +
+      '<line x1="6" y1="6" x2="18" y2="18"></line>' +
+      '<line x1="18" y1="6" x2="6" y2="18"></line>' +
+      "</svg></button>";
+    sb.insertBefore(header, sb.firstChild);
+  }
+
+  function openDrawer() {
+    document.body.classList.add(BODY_OPEN_CLASS);
+  }
+
+  function closeDrawer() {
+    document.body.classList.remove(BODY_OPEN_CLASS);
+  }
+
+  function onToggleClick(e) {
+    e.stopPropagation();
+    if (document.body.classList.contains(BODY_OPEN_CLASS)) closeDrawer();
+    else openDrawer();
+  }
+
+  function onDocumentClick(e) {
+    if (!document.body.classList.contains(BODY_OPEN_CLASS)) return;
+    var sb = sidebar();
+    if (sb && sb.contains(e.target)) return;
+    var t = toggleBtn();
+    if (t && t.contains(e.target)) return;
+    closeDrawer();
+  }
+
+  function onKey(e) {
+    if (e.key === "Escape") closeDrawer();
+  }
+
+  // --- Active filter chips ------------------------------------------------
+
+  // Matchers Ransack commonly uses. Order matters — longer suffixes first so
+  // we don't misparse `_not_eq` as `_eq`.
+  var MATCHERS = [
+    { suffix: "_not_eq",  op: " ≠ "      },
+    { suffix: "_not_in",  op: " not in " },
+    { suffix: "_gteq",    op: " ≥ "      },
+    { suffix: "_lteq",    op: " ≤ "      },
+    { suffix: "_gt",      op: " > "      },
+    { suffix: "_lt",      op: " < "      },
+    { suffix: "_cont",    op: ": "       },
+    { suffix: "_start",   op: " starts " },
+    { suffix: "_end",     op: " ends "   },
+    { suffix: "_in",      op: ": "       },
+    { suffix: "_eq",      op: ": "       },
+  ];
+
+  function humanize(field) {
+    return field
+      .replace(/_id$/, "")
+      .replace(/_/g, " ")
+      .replace(/\b\w/g, function (c) { return c.toUpperCase(); });
+  }
+
+  function prettyValue(raw) {
+    if (raw === "1" || raw === "true")  return "Yes";
+    if (raw === "0" || raw === "false") return "No";
+    return raw;
+  }
+
+  function parseChipKey(key) {
+    // Matches `q[field_suffix]` or `q[field_suffix][]`.
+    var m = key.match(/^q\[([^\]]+)\](?:\[\])?$/);
+    if (!m) return null;
+    var inner = m[1];
+    for (var i = 0; i < MATCHERS.length; i++) {
+      var suffix = MATCHERS[i].suffix;
+      if (inner.length > suffix.length && inner.slice(-suffix.length) === suffix) {
+        return {
+          field: inner.slice(0, -suffix.length),
+          op: MATCHERS[i].op,
+        };
+      }
+    }
+    return { field: inner, op: ": " };
+  }
+
+  function readChips() {
+    var params = new URLSearchParams(window.location.search);
+    var byKey = {};
+
+    params.forEach(function (value, key) {
+      if (!key.startsWith("q[") || value === "") return;
+      if (!byKey[key]) byKey[key] = [];
+      byKey[key].push(value);
+    });
+
+    var chips = [];
+    Object.keys(byKey).forEach(function (key) {
+      var parsed = parseChipKey(key);
+      if (!parsed) return;
+      var values = byKey[key].map(prettyValue).join(", ");
+      chips.push({
+        key: key,
+        label: humanize(parsed.field) + parsed.op + values,
+      });
+    });
+    return chips;
+  }
+
+  function buildRemoveHref(key) {
+    var url = new URL(window.location.href);
+    // Remove every entry matching this key (handles [] arrays too).
+    var remaining = new URLSearchParams();
+    url.searchParams.forEach(function (v, k) {
+      if (k !== key) remaining.append(k, v);
+    });
+    // Drop pagination so removing a filter doesn't land you on page 7 of 2.
+    remaining.delete("page");
+    url.search = remaining.toString();
+    return url.toString();
+  }
+
+  function buildClearAllHref() {
+    var url = new URL(window.location.href);
+    var remaining = new URLSearchParams();
+    url.searchParams.forEach(function (v, k) {
+      if (!k.startsWith("q[")) remaining.append(k, v);
+    });
+    remaining.delete("page");
+    url.search = remaining.toString();
+    return url.toString();
+  }
+
+  function escapeHtml(s) {
+    var d = document.createElement("div");
+    d.textContent = s;
+    return d.innerHTML;
+  }
+
+  function renderChips(chips) {
+    var main = document.querySelector("#main_content");
+    if (!main) return;
+
+    var existing = main.querySelector(".fuji-filter-chips");
+    if (existing) existing.remove();
+    if (!chips.length) return;
+
+    var strip = document.createElement("div");
+    strip.className = "fuji-filter-chips";
+
+    chips.forEach(function (chip) {
+      var pill = document.createElement("a");
+      pill.className = "fuji-filter-chips__pill";
+      pill.href = buildRemoveHref(chip.key);
+      pill.setAttribute("aria-label", "Remove filter: " + chip.label);
+      pill.innerHTML =
+        '<span class="fuji-filter-chips__label">' + escapeHtml(chip.label) + "</span>" +
+        '<span class="fuji-filter-chips__remove" aria-hidden="true">×</span>';
+      strip.appendChild(pill);
+    });
+
+    if (chips.length > 1) {
+      var clear = document.createElement("a");
+      clear.className = "fuji-filter-chips__clear";
+      clear.href = buildClearAllHref();
+      clear.textContent = "Clear all";
+      strip.appendChild(clear);
+    }
+
+    main.insertBefore(strip, main.firstChild);
+  }
+
+  function updateToggleCount(chips) {
+    var t = toggleBtn();
+    if (!t) return;
+    var badge = t.querySelector(".fuji-filters-toggle__count");
+    if (!badge) return;
+    if (chips.length) {
+      badge.textContent = String(chips.length);
+      badge.hidden = false;
+      t.classList.add("fuji-filters-toggle--active");
+    } else {
+      badge.hidden = true;
+      t.classList.remove("fuji-filters-toggle--active");
+    }
+  }
+
+  // --- Bind ---------------------------------------------------------------
+
+  function bind() {
+    closeDrawer(); // reset state across turbo navigations
+    if (!filterForm()) return;
+
+    ensureToggle();
+    ensureDrawerHeader();
+
+    var t = toggleBtn();
+    if (t) {
+      t.removeEventListener("click", onToggleClick);
+      t.addEventListener("click", onToggleClick);
+    }
+
+    var closeX = document.querySelector(".fuji-filters-drawer__close");
+    if (closeX) {
+      closeX.removeEventListener("click", closeDrawer);
+      closeX.addEventListener("click", closeDrawer);
+    }
+
+    document.removeEventListener("click", onDocumentClick);
+    document.addEventListener("click", onDocumentClick);
+    document.removeEventListener("keydown", onKey);
+    document.addEventListener("keydown", onKey);
+
+    var chips = readChips();
+    renderChips(chips);
+    updateToggleCount(chips);
+  }
+
+  document.addEventListener("DOMContentLoaded", bind);
+  document.addEventListener("turbo:load", bind);
+  document.addEventListener("turbolinks:load", bind);
+})();

data/app/assets/javascripts/fuji_admin/floats.js

@@ -0,0 +1,73 @@
+// Fuji Admin — float labels for text-like form inputs.
+//
+// Scans `fieldset.inputs > ol > li` wrappers with formtastic's type classes
+// (.string, .email, .password, .numeric, .url, .tel, .search, .text) and
+// adds:
+//
+//   .fuji-float          — always present when eligible
+//   .fuji-float-focused  — when the inner input has focus
+//   .fuji-float-filled   — when the inner input has a non-empty value
+//
+// CSS in components/_float_labels.scss reads these state classes to animate
+// the label from inside the input (resting) to sitting on the top border
+// (active/filled).
+//
+// Idempotent — wiring is guarded by a data attribute so turbo re-navigations
+// don't stack listeners.
+
+(function () {
+  "use strict";
+
+  var SELECTOR = [
+    "fieldset.inputs > ol > li.string",
+    "fieldset.inputs > ol > li.email",
+    "fieldset.inputs > ol > li.password",
+    "fieldset.inputs > ol > li.numeric",
+    "fieldset.inputs > ol > li.url",
+    "fieldset.inputs > ol > li.tel",
+    "fieldset.inputs > ol > li.search",
+    "fieldset.inputs > ol > li.text",
+  ].join(",");
+
+  function fieldOf(li) {
+    return li.querySelector(":scope > input, :scope > textarea");
+  }
+
+  function labelOf(li) {
+    return li.querySelector(":scope > label");
+  }
+
+  function sync(li, input) {
+    li.classList.toggle("fuji-float-filled", input.value !== "" && input.value != null);
+    li.classList.toggle("fuji-float-focused", document.activeElement === input);
+  }
+
+  function wire(li) {
+    if (li.dataset.fujiFloatWired === "1") return;
+    var input = fieldOf(li);
+    var label = labelOf(li);
+    if (!input || !label) return;
+
+    li.classList.add("fuji-float");
+    sync(li, input);
+
+    var handler = function () { sync(li, input); };
+    input.addEventListener("focus", handler);
+    input.addEventListener("blur", handler);
+    input.addEventListener("input", handler);
+    input.addEventListener("change", handler);
+
+    li.dataset.fujiFloatWired = "1";
+  }
+
+  function bind() {
+    // Logged-out pages (login, password reset) usually carry host-supplied
+    // custom templates with their own label treatment — leave them alone.
+    if (document.body.classList.contains("logged_out")) return;
+    document.querySelectorAll(SELECTOR).forEach(wire);
+  }
+
+  document.addEventListener("DOMContentLoaded", bind);
+  document.addEventListener("turbo:load", bind);
+  document.addEventListener("turbolinks:load", bind);
+})();

data/app/assets/javascripts/fuji_admin/menu.js

@@ -0,0 +1,112 @@
+// Fuji Admin — menu interactions.
+//
+// Responsibilities:
+//   * Inject a hamburger toggle into the header when one isn't present.
+//   * Toggle the mobile drawer (adds .tabs_open to #tabs and
+//     .fuji-menu-open to <body> so we can style a backdrop).
+//   * Close the drawer on outside click, ESC, or nav link click.
+//   * Toggle ActiveAdmin nested menu items (li.has_nested).
+//
+// Idempotent — safe to re-run on turbo:load.
+
+(function () {
+  "use strict";
+
+  var MENU_OPEN_CLASS = "tabs_open";
+  var BODY_OPEN_CLASS = "fuji-menu-open";
+
+  function header() {
+    return document.querySelector("#header, .header");
+  }
+
+  function menu() {
+    return document.querySelector("#tabs");
+  }
+
+  function toggle() {
+    return document.querySelector(".fuji-menu-toggle");
+  }
+
+  function closeMenu() {
+    var m = menu();
+    if (m) m.classList.remove(MENU_OPEN_CLASS);
+    document.body.classList.remove(BODY_OPEN_CLASS);
+  }
+
+  function openMenu() {
+    var m = menu();
+    if (m) m.classList.add(MENU_OPEN_CLASS);
+    document.body.classList.add(BODY_OPEN_CLASS);
+  }
+
+  function ensureToggle() {
+    var h = header();
+    if (!h || toggle()) return;
+
+    var btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "fuji-menu-toggle";
+    btn.setAttribute("aria-label", "Toggle navigation menu");
+    btn.innerHTML =
+      '<span class="fuji-menu-toggle__bar"></span>' +
+      '<span class="fuji-menu-toggle__bar"></span>' +
+      '<span class="fuji-menu-toggle__bar"></span>';
+    h.insertBefore(btn, h.firstChild);
+  }
+
+  function onToggleClick(e) {
+    e.stopPropagation();
+    var m = menu();
+    if (!m) return;
+    if (m.classList.contains(MENU_OPEN_CLASS)) closeMenu();
+    else openMenu();
+  }
+
+  function onDocumentClick(e) {
+    var m = menu();
+    if (!m || !m.classList.contains(MENU_OPEN_CLASS)) return;
+    if (m.contains(e.target)) return;
+    var t = toggle();
+    if (t && t.contains(e.target)) return;
+    closeMenu();
+  }
+
+  function onKey(e) {
+    if (e.key === "Escape") closeMenu();
+  }
+
+  function onNestedClick(e) {
+    // `this` is the <a>; the expandable wrapper is its parent <li>.
+    var li = this.parentElement;
+    if (!li || !li.classList.contains("has_nested")) return;
+    e.preventDefault();   // parent anchors are `href="#"` in AA
+    e.stopPropagation();  // don't let onDocumentClick close the drawer
+    li.classList.toggle("open");
+  }
+
+  function bind() {
+    ensureToggle();
+
+    var t = toggle();
+    if (t) {
+      t.removeEventListener("click", onToggleClick);
+      t.addEventListener("click", onToggleClick);
+    }
+
+    document.removeEventListener("click", onDocumentClick);
+    document.addEventListener("click", onDocumentClick);
+
+    document.removeEventListener("keydown", onKey);
+    document.addEventListener("keydown", onKey);
+
+    var nested = document.querySelectorAll("#tabs li.has_nested > a");
+    nested.forEach(function (a) {
+      a.removeEventListener("click", onNestedClick);
+      a.addEventListener("click", onNestedClick);
+    });
+  }
+
+  document.addEventListener("DOMContentLoaded", bind);
+  document.addEventListener("turbo:load", bind);
+  document.addEventListener("turbolinks:load", bind);
+})();