nitro_kit 0.9.0 → 2.0.0.alpha.2

data/app/components/nitro_kit/typeset.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module NitroKit
+  class Typeset < Component
+    def initialize(
+      id: nil,
+      html: {},
+      aria: {},
+      data: {},
+      desperately_need_a_class: nil
+    )
+      super(
+        component: :typeset,
+        attributes: { id: }.compact,
+        html:,
+        aria:,
+        data:,
+        desperately_need_a_class:
+      )
+    end
+
+    def view_template(&content)
+      raise ArgumentError, "Typeset requires a content block" unless content
+
+      div(**root_attributes, &content)
+    end
+  end
+end

data/app/javascript/controllers/nk/app_shell_controller.js

@@ -0,0 +1,224 @@
+import { Controller } from "@hotwired/stimulus";
+
+const narrowViewport = "(max-width: 48rem)";
+
+export default class extends Controller {
+  static targets = ["dialog", "navigation", "sidebar", "trigger"];
+  static values = { openLabel: String, closeLabel: String };
+
+  connect() {
+    this.onViewportChange = this.syncViewport.bind(this);
+    this.viewport = window.matchMedia(narrowViewport);
+    this.viewport.addEventListener("change", this.onViewportChange);
+    this.syncViewport();
+  }
+
+  disconnect() {
+    this.viewport?.removeEventListener("change", this.onViewportChange);
+    this.restoreFocusAfterClose = false;
+
+    const dialog = this.element.querySelector(
+      '[data-nk--app-shell-target~="dialog"]',
+    );
+    const sidebar = this.element.querySelector(
+      '[data-nk--app-shell-target~="sidebar"]',
+    );
+    const navigation = this.element.querySelector(
+      '[data-nk--app-shell-target~="navigation"]',
+    );
+    const trigger = this.element.querySelector(
+      '[data-nk--app-shell-target~="trigger"]',
+    );
+
+    if (dialog?.open) dialog.close();
+    if (sidebar && navigation && navigation.parentElement !== sidebar) {
+      sidebar.append(navigation);
+    }
+
+    this.element.dataset.state = "closed";
+    trigger?.setAttribute("aria-expanded", "false");
+    trigger?.setAttribute("aria-label", this.openLabelValue);
+    delete this.element.dataset.enhanced;
+
+    this.previouslyFocused = null;
+    this.viewport = null;
+  }
+
+  toggle(event) {
+    event.preventDefault();
+    this.dialogTarget.open ? this.closeDialog() : this.open();
+  }
+
+  open() {
+    if (!this.isNarrow || this.dialogTarget.open) return;
+
+    this.previouslyFocused = document.activeElement;
+    this.restoreFocusAfterClose = true;
+    this.moveNavigationTo(this.dialogTarget);
+    this.dialogTarget.showModal();
+    this.setState(true);
+  }
+
+  close(event) {
+    event?.preventDefault();
+    this.closeDialog();
+  }
+
+  closeFromBackdrop(event) {
+    if (event.target !== this.dialogTarget) return;
+
+    const bounds = this.dialogTarget.getBoundingClientRect();
+    const insideDialog =
+      event.clientX >= bounds.left &&
+      event.clientX <= bounds.right &&
+      event.clientY >= bounds.top &&
+      event.clientY <= bounds.bottom;
+
+    if (!insideDialog) this.close(event);
+  }
+
+  closeForNavigation() {
+    this.closeDialog({ restoreFocus: false });
+  }
+
+  dialogClosed() {
+    this.finishClosing();
+  }
+
+  syncViewport() {
+    // A Turbo morph restores the server-rendered attributes without
+    // reconnecting the controller, so the enhancement marker is re-asserted
+    // every time the shell reconciles rather than only on connect.
+    this.element.dataset.enhanced = "";
+
+    if (
+      !this.hasDialogTarget ||
+      !this.hasNavigationTarget ||
+      !this.hasSidebarTarget
+    ) {
+      return;
+    }
+
+    const enteringNarrow = this.wasNarrow === false && this.isNarrow;
+    this.wasNarrow = this.isNarrow;
+
+    if (!this.isNarrow) {
+      this.closeDialog({ restoreFocus: false });
+      return;
+    }
+
+    if (
+      enteringNarrow &&
+      this.element.dataset.state !== "open" &&
+      this.navigationTarget.contains(document.activeElement) &&
+      this.hasTriggerTarget
+    ) {
+      this.triggerTarget.focus();
+    }
+
+    if (this.element.dataset.state === "open") {
+      this.moveNavigationTo(this.dialogTarget);
+      this.ensureModalDialog();
+      this.setState(true);
+    } else {
+      this.closeDialog({ restoreFocus: false });
+    }
+  }
+
+  dialogTargetConnected() {
+    if (this.viewport) this.syncViewport();
+  }
+
+  dialogTargetDisconnected(dialog) {
+    if (dialog.open) dialog.close();
+  }
+
+  navigationTargetConnected() {
+    if (this.viewport) this.syncViewport();
+  }
+
+  sidebarTargetConnected() {
+    if (this.viewport) this.syncViewport();
+  }
+
+  triggerTargetConnected(trigger) {
+    this.syncTrigger(trigger);
+  }
+
+  openLabelValueChanged() {
+    if (this.hasTriggerTarget) this.syncTrigger(this.triggerTarget);
+  }
+
+  closeLabelValueChanged() {
+    if (this.hasTriggerTarget) this.syncTrigger(this.triggerTarget);
+  }
+
+  closeDialog({ restoreFocus = true } = {}) {
+    this.restoreFocusAfterClose = restoreFocus;
+
+    if (this.hasDialogTarget && this.dialogTarget.open) {
+      this.dialogTarget.close();
+    } else {
+      this.finishClosing();
+    }
+  }
+
+  finishClosing() {
+    const shouldRestoreFocus = this.restoreFocusAfterClose ?? true;
+    const focusTarget = this.previouslyFocused?.isConnected
+      ? this.previouslyFocused
+      : this.hasTriggerTarget
+        ? this.triggerTarget
+        : null;
+
+    this.restoreNavigation();
+    this.setState(false);
+    this.previouslyFocused = null;
+    this.restoreFocusAfterClose = undefined;
+
+    if (
+      shouldRestoreFocus &&
+      focusTarget?.isConnected &&
+      document.activeElement !== focusTarget
+    ) {
+      focusTarget.focus();
+    }
+  }
+
+  ensureModalDialog() {
+    if (this.dialogTarget.matches(":modal")) return;
+
+    if (this.dialogTarget.open) this.dialogTarget.close();
+    this.dialogTarget.showModal();
+  }
+
+  restoreNavigation() {
+    if (!this.hasNavigationTarget || !this.hasSidebarTarget) return;
+
+    this.moveNavigationTo(this.sidebarTarget);
+  }
+
+  moveNavigationTo(container) {
+    if (this.navigationTarget.parentElement !== container) {
+      container.append(this.navigationTarget);
+    }
+  }
+
+  setState(open) {
+    this.element.dataset.state = open ? "open" : "closed";
+    if (this.hasTriggerTarget) this.syncTrigger(this.triggerTarget);
+  }
+
+  syncTrigger(trigger) {
+    const open = this.element.dataset.state === "open";
+    trigger.setAttribute("aria-expanded", String(open));
+    trigger.setAttribute(
+      "aria-label",
+      open ? this.closeLabelValue : this.openLabelValue,
+    );
+  }
+
+  get isNarrow() {
+    return this.viewport?.matches ?? false;
+  }
+}

data/app/javascript/controllers/nk/appearance_controller.js

@@ -0,0 +1,73 @@
+import { Controller } from "@hotwired/stimulus";
+
+const preferences = ["light", "dark", "system"];
+
+export default class extends Controller {
+  static targets = ["input", "trigger"];
+
+  connect() {
+    this.synchronize();
+  }
+
+  inputTargetConnected() {
+    this.synchronize();
+  }
+
+  triggerTargetConnected() {
+    this.synchronize();
+  }
+
+  select(event) {
+    const input = this.inputTargets.find(
+      (target) => target === event.target || target === event.currentTarget,
+    );
+
+    if (!input) return;
+    if (input.type === "radio" && !input.checked) return;
+
+    const preference = input.dataset.appearancePreference ?? input.value;
+
+    window.dispatchEvent(
+      new CustomEvent("nitro-kit:appearance-request", {
+        detail: { preference },
+      }),
+    );
+  }
+
+  synchronize(event) {
+    const preference =
+      event?.detail?.preference ??
+      document.documentElement.dataset.themePreference ??
+      "system";
+
+    if (!preferences.includes(preference)) return;
+
+    this.element.dataset.state = preference;
+    this.inputTargets.forEach((input) => {
+      if (input.type === "radio") {
+        input.checked = input.value === preference;
+      } else if (input.localName === "select") {
+        input.value = preference;
+      }
+    });
+    this.updateTriggerGlyph(preference);
+  }
+
+  // The dropdown trigger renders the server-side preference glyph. Each menu
+  // item already carries the glyph for its own preference, so a client-side
+  // change swaps the trigger's drawing instructions instead of teaching this
+  // controller what any appearance looks like.
+  updateTriggerGlyph(preference) {
+    if (!this.hasTriggerTarget) return;
+
+    const glyph = this.triggerTarget.querySelector('[data-nk="icon"]');
+    const source = this.inputTargets.find(
+      (input) => input.dataset.appearancePreference === preference,
+    );
+    const replacement = source?.querySelector('[data-nk="icon"]');
+
+    if (!glyph || !replacement || glyph === replacement) return;
+
+    glyph.replaceChildren(...replacement.cloneNode(true).children);
+  }
+}

data/app/javascript/controllers/nk/avatar_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["image", "fallback"];
+
+  imageTargetConnected(image) {
+    if (image.complete && image.naturalWidth === 0) this.failed();
+  }
+
+  failed() {
+    this.element.dataset.state = "error";
+    if (this.hasFallbackTarget)
+      this.fallbackTarget.removeAttribute("aria-hidden");
+  }
+}

data/app/javascript/controllers/nk/button_controller.js

@@ -0,0 +1,56 @@
+import { Controller } from "@hotwired/stimulus";
+
+const submissionIndicatorDelay = 1000;
+
+export default class extends Controller {
+  connect() {
+    this.form = this.element.form;
+    this.submissionText = this.element.getAttribute("data-turbo-submits-with");
+    this.initialAriaBusy = this.element.getAttribute("aria-busy");
+    this.element.removeAttribute("data-turbo-submits-with");
+  }
+
+  disconnect() {
+    this.reset();
+  }
+
+  submit(event) {
+    if (event.submitter !== this.element) return;
+
+    this.element.dataset.state = "submitting";
+    this.element.setAttribute("aria-busy", "true");
+    if (this.submissionSpinner) {
+      this.indicatorTimer = setTimeout(() => {
+        this.submissionSpinner.dataset.state = "visible";
+      }, submissionIndicatorDelay);
+    }
+  }
+
+  reset(event) {
+    if (event?.type === "turbo:submit-end" && event.target !== this.form)
+      return;
+
+    delete this.element.dataset.state;
+    clearTimeout(this.indicatorTimer);
+    delete this.submissionSpinner?.dataset.state;
+    if (this.initialAriaBusy === null) {
+      this.element.removeAttribute("aria-busy");
+    } else {
+      this.element.setAttribute("aria-busy", this.initialAriaBusy);
+    }
+    if (event?.type === "turbo:before-cache") {
+      if (this.submissionText !== null) {
+        this.element.setAttribute(
+          "data-turbo-submits-with",
+          this.submissionText,
+        );
+      }
+    }
+  }
+
+  get submissionSpinner() {
+    return this.element.querySelector(
+      '[data-slot="button-submission-spinner"]',
+    );
+  }
+}

data/app/javascript/controllers/nk/checkable_controller.js

@@ -0,0 +1,41 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Indeterminate is the only checkbox state HTML cannot express. Checked,
+// unchecked, and radio selection stay native and are styled through :checked.
+export default class extends Controller {
+  static targets = ["control"];
+  static values = { indeterminate: Boolean };
+
+  connect() {
+    this.apply();
+  }
+
+  change() {
+    this.indeterminateValue = this.controlTarget.indeterminate;
+    this.synchronize();
+  }
+
+  indeterminateValueChanged(indeterminate) {
+    if (!this.hasControlTarget) return;
+
+    this.controlTarget.indeterminate = indeterminate;
+    this.synchronize();
+  }
+
+  controlTargetConnected() {
+    this.apply();
+  }
+
+  apply() {
+    this.controlTarget.indeterminate = this.indeterminateValue;
+    this.synchronize();
+  }
+
+  synchronize() {
+    if (this.controlTarget.indeterminate) {
+      this.element.dataset.state = "indeterminate";
+    } else {
+      delete this.element.dataset.state;
+    }
+  }
+}