atomic_view 0.1.9 → 0.1.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b817e39386cd3776eac52dc194c42755d0c77dac42c237cc5783d5ed62aea76b
-  data.tar.gz: 0d20253d17fb2e627dc13dbc125e4e6d136bd8db4cc3bf14b4f3c40c3fec1d2f
+  metadata.gz: 8d4e1219dbfa172625d237cc3d8d164e89d5ea07970aba2d3ef7eeff274641b2
+  data.tar.gz: d247639eefd01fe823d75ba0dcf38424f2479275a2e1c616c7bfebd54e0e751d
 SHA512:
-  metadata.gz: eeb1ce8e2fc53395b14d2e8c4e878d5e548e9fa040b6ab7848a0a33a0c052b361765188c73661c99633ca4a6aa1491b9460528e7a5f83abee12be31c58a55385
-  data.tar.gz: 86f4e559785caee6915e93c61c6555b56300a5078b123bfdb396f3dde89bcfb2905eab0bf3cc4fa9cd0e6fe7444b8219d275438d16b8b6da30e8f3da6a20af18
+  metadata.gz: 0c3c20d67269e91d589827053856626a38c7e03bc649b11a3ff3090f6f94576a2b044e79644926e2b02d13aa23a756c91e1ce34d0e4841d6b08b5e802af1f90d
+  data.tar.gz: 2ab75bf246557bc2fcc9db8f09945eea2010bb8f6c2290398b2e4b6507891b5f7c308e917cd79d2b65a8161af835dc99138ca3d4a72b761bd70eeeb096e1a39e

data/app/assets/javascripts/atomic_view/controllers/chip_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  remove() {
+    this.element.classList.add("opacity-0", "transition-opacity")
+    setTimeout(() => this.element.remove(), 200)
+  }
+}

data/app/assets/javascripts/atomic_view/controllers/command_palette_controller.js

@@ -0,0 +1,96 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "row"]
+
+  highlightedIndex = null
+
+  connect() {
+    document.addEventListener("keydown", this.onGlobalKeydown)
+    this.element.addEventListener("close", this.onClose)
+  }
+
+  disconnect() {
+    document.removeEventListener("keydown", this.onGlobalKeydown)
+    this.element.removeEventListener("close", this.onClose)
+  }
+
+  onGlobalKeydown = (event) => {
+    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+      event.preventDefault()
+      this.element.showModal()
+    }
+  }
+
+  onClose = () => {
+    this.inputTarget.value = ""
+    this.rowTargets.forEach((row) => row.classList.remove("hidden"))
+    this.clearHighlight()
+  }
+
+  filter() {
+    const query = this.inputTarget.value.trim().toLowerCase()
+
+    this.rowTargets.forEach((row) => {
+      const matches = row.dataset.searchText.includes(query)
+      row.classList.toggle("hidden", !matches)
+    })
+
+    this.clearHighlight()
+  }
+
+  navigate(event) {
+    if (event.key === "ArrowDown") {
+      event.preventDefault()
+      this.moveHighlight(1)
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault()
+      this.moveHighlight(-1)
+    } else if (event.key === "Enter") {
+      this.activateHighlighted(event)
+    }
+  }
+
+  moveHighlight(delta) {
+    const visibleRows = this.visibleRows
+    if (visibleRows.length === 0) return
+
+    const nextIndex = this.nextIndex(visibleRows.length, delta)
+    this.highlight(visibleRows, nextIndex)
+  }
+
+  nextIndex(count, delta) {
+    if (this.highlightedIndex === null) return delta === 1 ? 0 : count - 1
+    return (this.highlightedIndex + delta + count) % count
+  }
+
+  highlight(visibleRows, index) {
+    visibleRows.forEach((row) => row.classList.remove("bg-offset"))
+
+    this.highlightedIndex = index
+    const row = visibleRows[index]
+    if (!row) return
+
+    row.classList.add("bg-offset")
+    row.scrollIntoView({ block: "nearest" })
+  }
+
+  activateHighlighted(event) {
+    if (this.highlightedIndex === null) return
+
+    const row = this.visibleRows[this.highlightedIndex]
+    if (!row) return
+
+    event.preventDefault()
+    row.click()
+  }
+
+  clearHighlight() {
+    this.rowTargets.forEach((row) => row.classList.remove("bg-offset"))
+    this.highlightedIndex = null
+  }
+
+  get visibleRows() {
+    return this.rowTargets.filter((row) => !row.classList.contains("hidden"))
+  }
+}

data/app/assets/javascripts/atomic_view/controllers/dropdown_controller.js

@@ -0,0 +1,42 @@
+import { Controller } from "@hotwired/stimulus"
+import { computePosition, offset, flip, shift, autoUpdate } from "@floating-ui/dom"
+
+export default class extends Controller {
+  static targets = ["trigger", "menu"]
+
+  toggle() {
+    this.menuTarget.classList.contains("hidden") ? this.open() : this.close()
+  }
+
+  open() {
+    this.menuTarget.classList.remove("hidden")
+    this.cleanup = autoUpdate(this.triggerTarget, this.menuTarget, () => {
+      computePosition(this.triggerTarget, this.menuTarget, {
+        middleware: [offset(4), flip(), shift({ padding: 8 })]
+      }).then(({ x, y }) => {
+        Object.assign(this.menuTarget.style, { left: `${x}px`, top: `${y}px` })
+      })
+    })
+    document.addEventListener("click", this.onOutsideClick)
+    document.addEventListener("keydown", this.onKeydown)
+  }
+
+  close() {
+    this.menuTarget.classList.add("hidden")
+    if (this.cleanup) this.cleanup()
+    document.removeEventListener("click", this.onOutsideClick)
+    document.removeEventListener("keydown", this.onKeydown)
+  }
+
+  onOutsideClick = (event) => {
+    if (!this.element.contains(event.target)) this.close()
+  }
+
+  onKeydown = (event) => {
+    if (event.key === "Escape") this.close()
+  }
+
+  disconnect() {
+    this.close()
+  }
+}

data/app/assets/javascripts/atomic_view/controllers/modal_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  open() {
+    this.element.showModal()
+  }
+
+  close() {
+    this.element.close()
+  }
+
+  closeOnBackdrop(event) {
+    if (event.target === this.element) this.close()
+  }
+
+  connect() {
+    this.element.addEventListener("click", this.closeOnBackdrop.bind(this))
+  }
+
+  disconnect() {
+    this.element.removeEventListener("click", this.closeOnBackdrop.bind(this))
+  }
+}

data/app/assets/javascripts/atomic_view/controllers/theme_toggle_controller.js

@@ -0,0 +1,45 @@
+import { Controller } from "@hotwired/stimulus"
+
+const STORAGE_KEY = "atomic-view-theme"
+
+export default class extends Controller {
+  connect() {
+    this.apply(this.resolved())
+  }
+
+  toggle() {
+    this.apply(this.isDark ? "light" : "dark")
+  }
+
+  apply(theme) {
+    document.documentElement.classList.toggle("dark", theme === "dark")
+
+    try {
+      localStorage.setItem(STORAGE_KEY, theme)
+    } catch {
+      // localStorage unavailable (private browsing, etc.) -- the toggle
+      // still works for the current page load, it just won't persist.
+    }
+  }
+
+  resolved() {
+    return this.stored() ?? (this.systemPrefersDark() ? "dark" : "light")
+  }
+
+  stored() {
+    try {
+      const value = localStorage.getItem(STORAGE_KEY)
+      return value === "light" || value === "dark" ? value : null
+    } catch {
+      return null
+    }
+  }
+
+  systemPrefersDark() {
+    return window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false
+  }
+
+  get isDark() {
+    return document.documentElement.classList.contains("dark")
+  }
+}

data/app/assets/javascripts/atomic_view/controllers/toast_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { autoDismissMs: Number }
+
+  connect() {
+    if (this.autoDismissMsValue > 0) {
+      this.timeout = setTimeout(() => this.dismiss(), this.autoDismissMsValue)
+    }
+  }
+
+  disconnect() {
+    if (this.timeout) clearTimeout(this.timeout)
+  }
+
+  dismiss() {
+    this.element.classList.add("opacity-0", "transition-opacity")
+    setTimeout(() => this.element.remove(), 200)
+  }
+}

data/app/assets/stylesheets/atomic_view/application.tailwind.css

@@ -5,8 +5,6 @@
 @plugin "@tailwindcss/forms";
 @plugin "@tailwindcss/typography";
 
-@custom-variant dark (&:where(.dark, .dark *));
-
 /*
   The default border color has changed to `currentColor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still

data/app/assets/tailwind/atomic_view/engine.css

@@ -1,11 +1,17 @@
 @import "tailwindcss" source(none);
+@custom-variant dark (&:where(.dark, .dark *));
 @source "../../../views/**/*.{erb}";
 @source "../../../../lib/atomic_view/components/**/*.{erb,rb}";
+@source "../../../../previews/**/*.{erb,rb}";
 
 @plugin "@tailwindcss/forms";
 @plugin "@tailwindcss/typography";
 
 @theme {
+  /* --color-offset = page canvas background
+     --color-surface = card/panel background
+     (Named "canvas"/"surface" in some design specs — kept as offset/surface
+     here since renaming would be a breaking change across every component.) */
   --color-surface: var(--color-white);
   --color-offset: var(--color-gray-50);
   --color-backdrop: oklch(0 0 0 / 0.5);
@@ -14,6 +20,11 @@
   --color-input: var(--color-gray-200);
   --color-ring: var(--color-gray-950);
 
+  --color-foreground: var(--color-neutral-900);
+
+  /* --color-primary is the brand action color (buttons, links, active states).
+     Use --color-foreground for body/label/input text — do not reuse
+     --color-primary for text color. */
   --color-primary: var(--color-neutral-800);
   --color-primary-foreground: var(--color-white);
 
@@ -29,6 +40,15 @@
   --color-destructive: var(--color-red-800);
   --color-destructive-foreground: var(--color-red-50);
 
+  --color-success: var(--color-emerald-800);
+  --color-success-foreground: var(--color-emerald-50);
+
+  --color-warning: var(--color-amber-800);
+  --color-warning-foreground: var(--color-amber-50);
+
+  --color-info: var(--color-blue-800);
+  --color-info-foreground: var(--color-blue-50);
+
   --color-disabled: var(--color-gray-50);
   --color-disabled-foreground: var(--color-zinc-500);
   --color-disabled-ring: var(--color-zinc-200);
@@ -40,45 +60,77 @@
 
   --color-placeholder: var(--color-zinc-500);
   --color-focus-ring: var(--color-neutral-700);
+
+  --radius-well: 4px;
+  --radius-btn: 6px;
+  --radius-card: 8px;
+  --radius-pill: 9999px;
+
+  --shadow-soft: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px -8px rgb(0 0 0 / .18);
+  --shadow-panel: 0 20px 40px -20px rgb(0 0 0 / .22);
+
+  /* Generic fallback stacks only — no brand fonts shipped by the gem.
+     A host app supplies its own @font-face/Google Fonts <link> and overrides
+     these three variables, e.g.:
+       --font-display: "Bitter", serif;
+       --font-body: "Manrope", sans-serif;
+       --font-mono: "JetBrains Mono", monospace; */
+  --font-display: ui-serif, Georgia, serif;
+  --font-body: ui-sans-serif, system-ui, sans-serif;
+  --font-mono: ui-monospace, monospace;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-surface: var(--color-neutral-950);
-    --color-offset: var(--color-neutral-900);
-    --color-backdrop: oklch(0 0 0 / 0.5);
+/* Explicit .dark class toggle only — no OS-preference auto-switching.
+   Host apps wanting OS-driven theming should flip the .dark class via a
+   small inline script keyed off matchMedia('(prefers-color-scheme: dark)'),
+   the same pattern Lookbook's own toggle uses
+   (test/dummy/app/views/layouts/application.html.erb). */
+:root.dark {
+  --color-surface: var(--color-neutral-950);
+  --color-offset: var(--color-neutral-900);
+  --color-backdrop: oklch(0 0 0 / 0.5);
 
-    --color-border: var(--color-white);
-    --color-input: var(--color-white);
-    --color-ring: var(--color-white);
+  --color-border: var(--color-white);
+  --color-input: var(--color-white);
+  --color-ring: var(--color-white);
 
-    --color-primary: var(--color-white);
-    --color-primary-foreground: var(--color-neutral-800);
+  --color-foreground: var(--color-neutral-50);
 
-    --color-secondary: var(--color-neutral-800);
-    --color-secondary-foreground: var(--color-neutral-100);
+  --color-primary: var(--color-white);
+  --color-primary-foreground: var(--color-neutral-800);
 
-    --color-muted: var(--color-neutral-800);
-    --color-muted-foreground: var(--color-neutral-200);
+  --color-secondary: var(--color-neutral-800);
+  --color-secondary-foreground: var(--color-neutral-100);
 
-    --color-accent: var(--color-green-50);
-    --color-accent-foreground: var(--color-green-800);
+  --color-muted: var(--color-neutral-800);
+  --color-muted-foreground: var(--color-neutral-200);
 
-    --color-destructive: var(--color-red-800);
-    --color-destructive-foreground: var(--color-red-50);
+  --color-accent: var(--color-green-50);
+  --color-accent-foreground: var(--color-green-800);
 
-    --color-disabled: var(--color-neutral-800);
-    --color-disabled-foreground: var(--color-neutral-400);
-    --color-disabled-ring: var(--color-neutral-600);
+  --color-destructive: var(--color-red-800);
+  --color-destructive-foreground: var(--color-red-50);
 
-    --color-error: var(--color-red-100);
-    --color-error-ring: var(--color-red-400);
-    --color-error-placeholder: var(--color-red-400);
-    --color-error-focus-ring: var(--color-red-500);
+  --color-success: var(--color-emerald-50);
+  --color-success-foreground: var(--color-emerald-800);
 
-    --color-placeholder: var(--color-neutral-400);
-    --color-focus-ring: var(--color-white/20);
-  }
+  --color-warning: var(--color-amber-50);
+  --color-warning-foreground: var(--color-amber-800);
+
+  --color-info: var(--color-blue-50);
+  --color-info-foreground: var(--color-blue-800);
+
+  --color-disabled: var(--color-neutral-800);
+  --color-disabled-foreground: var(--color-neutral-400);
+  --color-disabled-ring: var(--color-neutral-600);
+
+  --color-error: var(--color-red-100);
+  --color-error-ring: var(--color-red-400);
+  --color-error-placeholder: var(--color-red-400);
+  --color-error-focus-ring: var(--color-red-500);
+
+  --color-placeholder: var(--color-neutral-400);
+  --color-focus-ring: color-mix(in oklab, var(--color-white) 20%, transparent);
 }
 
 @layer base {
@@ -86,4 +138,15 @@
   [role="button"]:not(:disabled) {
     cursor: pointer;
   }
+
+  /* Hides the browser's native clear ("x") button on type="search" inputs
+     -- Tailwind's appearance-none doesn't reach this WebKit/Firefox-only
+     pseudo-element, so it has to be targeted directly. */
+  input[type="search"]::-webkit-search-cancel-button {
+    appearance: none;
+  }
+
+  input[type="search"] {
+    appearance: textfield;
+  }
 }

data/config/importmap.rb

@@ -1,3 +1,47 @@
 # frozen_string_literal: true
 
-pin_all_from File.expand_path('../app/assets/javascripts', __dir__)
+pin_all_from File.expand_path("../app/assets/javascripts", __dir__)
+
+# Also pinned under "controllers/atomic_view" (Stimulus' own subfolder
+# namespacing rule: each "/" in a controller's path becomes "--" in its
+# identifier) so a host app's own `eagerLoadControllersFrom("controllers",
+# application)` -- boilerplate every Rails + importmap + Stimulus app
+# already has, generated by stimulus-rails' install task -- discovers and
+# registers these controllers automatically, no host app setup required.
+# "controllers/atomic_view/toast_controller" -> "atomic-view--toast",
+# matching every atomic_view component's `data-controller` attribute.
+#
+# `to:` is required here alongside `under:` -- without it, `under:` doubles
+# as both the import name prefix *and* the on-disk asset path prefix (they
+# only look decoupled below because `to:` makes them so), so importmap-rails
+# would look for the files at "controllers/atomic_view/*.js" (which doesn't
+# exist) instead of their real location, silently drop every one as an
+# unresolvable asset, and this pin would do nothing.
+#
+# The plain "atomic_view/controllers/<name>_controller" alias from the pin
+# above still works too, for a host app that wants to `import` and
+# `application.register(...)` a controller by hand instead.
+pin_all_from File.expand_path("../app/assets/javascripts/atomic_view/controllers", __dir__),
+  under: "controllers/atomic_view", to: "atomic_view/controllers"
+
+# `bin/importmap pin @floating-ui/dom` failed (the jspm.io generate API used
+# by importmap-rails returned a 500), so this is pinned manually to
+# jsDelivr's `+esm` bundle -- unlike jspm's `ga.jspm.io` build, jsDelivr's
+# `+esm` output resolves its `@floating-ui/core`/`@floating-ui/utils`
+# imports as same-origin absolute paths rather than bare specifiers, so it
+# works as a single self-contained pin with no extra import map entries.
+# Used by `dropdown_controller.js`.
+pin "@floating-ui/dom", to: "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.8.0/+esm"
+
+# `bin/importmap pin local-time` vendors the package locally under
+# "vendor/javascript" -- which works for a real Rails app, but this engine's
+# `atomic_view.precompile` initializer (see `engine.rb`) never adds
+# "vendor/javascript" to `app.config.assets.paths`, so a host app can't
+# actually serve the vendored file. Pinned to jsDelivr's `+esm` bundle
+# instead, same fix as `@floating-ui/dom` above. Used by `ItemComponent`'s
+# `local_time_ago` calls (see `TimelineComponent`'s class docs) -- the host
+# app still needs to `import LocalTime from "local-time"; LocalTime.start()`
+# per local_time's own Importmap install docs for times to localize
+# client-side; without that the server-rendered UTC fallback text just
+# stays as-is.
+pin "local-time", to: "https://cdn.jsdelivr.net/npm/local-time@3.0.3/+esm"

data/lib/atomic_view/component.rb

@@ -3,6 +3,7 @@
 module AtomicView
   class Component < ViewComponent::Base
     include Heroicons::Engine.helpers
+    include LocalTimeHelper
 
     def icon(name, variant: Heroicons.configuration.variant, options: {}, path_options: {})
       Heroicons::Icon.render(

data/lib/atomic_view/components/alert_component.erb

@@ -0,0 +1,15 @@
+<%= tag.div(**html_options, class: html_class, role: "alert") do %>
+  <div class="flex">
+    <div class="shrink-0">
+      <%= icon(icon_name, options: {class: icon_class}).to_s.html_safe %>
+    </div>
+    <div class="ml-2 min-w-0 flex-1">
+      <% if title.present? %>
+        <p class="text-sm font-medium <%= text_class %>"><%= title %></p>
+      <% end %>
+      <div class="<%= content_class %>">
+        <%= content %>
+      </div>
+    </div>
+  </div>
+<% end %>

data/lib/atomic_view/components/alert_component.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    # Alert
+    #
+    # A persistent, inline banner for messages that belong in the page flow
+    # rather than a transient corner notification -- form-level validation
+    # summaries, page banners, billing warnings, etc. For a self-dismissing
+    # notification instead, see ToastComponent.
+    class AlertComponent < AtomicView::Component
+      attr_reader :variant, :title
+
+      VARIANTS = {
+        info: {icon: "information-circle", classes: "border-info bg-info/10", text_class: "text-info"},
+        success: {icon: "check-circle", classes: "border-success bg-success/10", text_class: "text-success"},
+        warning: {icon: "exclamation-triangle", classes: "border-warning bg-warning/10", text_class: "text-warning"},
+        error: {icon: "x-circle", classes: "border-destructive bg-destructive/10", text_class: "text-destructive"}
+      }.freeze
+
+      def initialize(variant: :info, title: nil, **options)
+        super()
+        @variant = variant
+        @title = title
+        @options = options
+      end
+
+      def html_options
+        @options.except(:class)
+      end
+
+      def html_class
+        class_names(base_classes, variant_config[:classes], @options[:class])
+      end
+
+      def icon_name
+        variant_config[:icon]
+      end
+
+      def icon_class
+        class_names("size-5 shrink-0", text_class)
+      end
+
+      def text_class
+        variant_config[:text_class]
+      end
+
+      def content_class
+        class_names("text-sm", text_class, "mt-1" => title.present?)
+      end
+
+      private
+
+      def variant_config
+        VARIANTS.fetch(variant, VARIANTS[:info])
+      end
+
+      def base_classes
+        "border-l-4 p-3"
+      end
+    end
+  end
+end

data/lib/atomic_view/components/avatar_component.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    class AvatarComponent < AtomicView::Component
+      COLOR_PALETTE = [
+        "bg-[#264653] text-white",
+        "bg-[#2a9d8f] text-black",
+        "bg-[#e9c46a] text-black",
+        "bg-[#f4a261] text-black",
+        "bg-[#e76f51] text-black"
+      ].freeze
+
+      attr_reader :src, :initials, :size
+
+      def initialize(src: nil, initials: nil, size: :md, **options)
+        super()
+        @src = src
+        @initials = initials
+        @size = size
+        @options = options
+      end
+
+      def call
+        if src.present?
+          tag.img(**@options.except(:class), class: class_names("rounded-full object-cover", size_classes, @options[:class]), src: src)
+        else
+          tag.span(**@options.except(:class), class: class_names("flex items-center justify-center rounded-full font-medium", color_classes, size_classes, text_size_classes, @options[:class])) { initials }
+        end
+      end
+
+      private
+
+      def color_classes
+        return "bg-offset text-foreground" if initials.blank?
+
+        COLOR_PALETTE[initials.sum % COLOR_PALETTE.length]
+      end
+
+      def size_classes
+        case size
+        when :sm
+          "size-6"
+        when :lg
+          "size-10"
+        else
+          "size-8"
+        end
+      end
+
+      def text_size_classes
+        case size
+        when :sm
+          "text-xs"
+        when :lg
+          "text-base"
+        else
+          "text-sm"
+        end
+      end
+    end
+  end
+end

data/lib/atomic_view/components/badge_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    class BadgeComponent < AtomicView::Component
+      attr_reader :variant
+
+      def initialize(variant: :default, **options)
+        super()
+        @variant = variant
+        @options = options
+      end
+
+      def call
+        tag.span(**@options.except(:class), class: class_names(base_classes, variant_classes, @options[:class])) { content }
+      end
+
+      private
+
+      def base_classes
+        "inline-flex items-center rounded-pill px-1.5 py-0.5 text-xs font-medium"
+      end
+
+      def variant_classes
+        case variant
+        when :secondary
+          "bg-secondary text-secondary-foreground"
+        when :destructive
+          "bg-destructive text-destructive-foreground"
+        when :outline
+          "bg-transparent border border-border text-foreground"
+        else
+          "bg-primary text-primary-foreground"
+        end
+      end
+    end
+  end
+end