ariadne_view_components 0.0.88 → 0.0.89

data/app/components/ariadne/ui/flash/component.ts

@@ -39,7 +39,7 @@ export default class FlashController extends Controller {
     if (this.hasHiddenClass) {
       this.element.classList.add(this.hiddenClass)
     } else {
-      this.element.classList.add('hidden')
+      this.element.classList.add('ariadne-hidden')
     }
 
     this.element.remove()
@@ -49,7 +49,7 @@ export default class FlashController extends Controller {
     if (this.hasHiddenClass) {
       this.element.classList.remove(this.hiddenClass)
     } else {
-      this.element.classList.remove('hidden')
+      this.element.classList.remove('ariadne-hidden')
     }
     await enter(this.element)
   }

data/app/components/ariadne/ui/pagination/component.html.erb

@@ -8,7 +8,7 @@
           <% if page.nil? %>
             <span aria-hidden>…</span>
           <% else %>
-            <%= render UI::Button::Component.new(
+            <%= render Ariadne::UI::Button::Component.new(
                 as: :link,
                 theme: :ghost,
                 state: page == current_page ? 'active' : '',

data/app/components/ariadne/ui/shortcut/component.html.erb

@@ -0,0 +1,21 @@
+<span class="ariadne-inline-flex ariadne-items-center ariadne-gap-2">
+  <span><%= text %></span>
+  <kbd data-controller='<%= stimulus_name %>' <%= html_attributes %>>
+  <% keys.each_with_index do |key, index| %>
+    <% if special_keys.include? key.downcase %>
+      <kbd
+        class="<%= html_attrs[:class] %>"
+        data-<%= stimulus_name %>-target="<%= key.downcase %>">
+    <%= key.capitalize %>
+  </kbd>
+<% elsif key.downcase == 'enter' %>
+  <kbd class="<%= html_attrs[:class] %> !ariadne-font-fallback">↵</kbd>
+<% else %>
+  <kbd class="<%= html_attrs[:class] %> ariadne-uppercase"><%= key %></kbd>
+<% end %>
+<% if index != keys.size - 1 %>
+  <span class="sr-only">+</span>
+<% end %>
+<% end %>
+</kbd>
+</span>

data/app/components/ariadne/ui/shortcut/component.rb

@@ -0,0 +1,55 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Shortcut
+      class Component < Ariadne::BaseComponent
+        SPECIAL_KEYS = ["alt", "shift", "ctrl"]
+
+        option :text, default: proc { "" }
+        option :keys
+        option :size, default: proc { :base }
+
+        def special_keys = SPECIAL_KEYS
+
+        accepts_html_attributes do |html_attrs|
+          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(:key, size:), html_attrs[:class]].join(" "))
+        end
+
+        style do
+          base do
+            [
+              "ariadne-inline-flex",
+              "ariadne-items-baseline",
+              "ariadne-select-none",
+              "*:ariadne-px-0",
+            ]
+          end
+        end
+
+        style :key do
+          base do
+            ["ariadne-font-mono"]
+          end
+
+          variants do
+            size do
+              xs do
+                ["ariadne-text-xs", "ariadne-px-1", "ariadne-rounded-sm"]
+              end
+
+              sm do
+                ["ariadne-text-sm", "ariadne-px-1.5", "ariadne-rounded"]
+              end
+
+              base do
+                ["ariadne-text-base", "ariadne-px-1.5", "ariadne-rounded-md"]
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ariadne/ui/shortcut/component.ts

@@ -0,0 +1,25 @@
+import {controllerFactory} from '@utils/createController'
+import {isMac} from '@utils/isMac'
+
+export default class extends controllerFactory()({
+  targets: {
+    alt: HTMLSpanElement,
+    ctrl: HTMLSpanElement,
+    shift: HTMLSpanElement,
+  },
+}) {
+  private replaceSymbol(targets: HTMLSpanElement[], newValue: string) {
+    for (const el of targets) {
+      el.innerText = newValue
+      el.classList.add('!font-fallback')
+    }
+  }
+
+  connect() {
+    if (isMac()) {
+      this.replaceSymbol(this.ctrlTargets, '⌘')
+      this.replaceSymbol(this.altTargets, '⌥')
+      this.replaceSymbol(this.shiftTargets, '⇧')
+    }
+  }
+}

data/app/frontend/controllers/tooltip_controller.ts

@@ -0,0 +1,73 @@
+import {controllerFactory} from '@utils/createController'
+import {computePosition, arrow, offset, flip, shift} from '@floating-ui/dom'
+
+export default class TooltipController extends controllerFactory<HTMLElement>()({
+  targets: {
+    activator: HTMLElement,
+    wrapper: HTMLDivElement,
+    tooltip: HTMLDivElement,
+    arrow: HTMLDivElement,
+  },
+}) {
+  async update() {
+    computePosition(this.activatorTarget, this.tooltipTarget, {
+      placement: 'top',
+      middleware: [offset(10), flip(), shift({padding: 5}), arrow({element: this.arrowTarget})],
+      // eslint-disable-next-line github/no-then
+    }).then(({x, y, placement, middlewareData}) => {
+      Object.assign(this.tooltipTarget.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      })
+
+      // Reset any previously set styles on the arrow
+      Object.assign(this.arrowTarget.style, {
+        left: '',
+        top: '',
+        right: '',
+        bottom: '',
+      })
+
+      const {x: arrowX, y: arrowY} = middlewareData.arrow || {}
+      const primaryPlacement = placement.split('-')[0]
+
+      switch (primaryPlacement) {
+        case 'top':
+          Object.assign(this.arrowTarget.style, {
+            left: arrowX ? `${arrowX}px` : '',
+            bottom: '-4px', // Aligns arrow to the bottom edge of the tooltip
+          })
+          break
+        case 'bottom':
+          Object.assign(this.arrowTarget.style, {
+            left: arrowX ? `${arrowX}px` : '',
+            top: '-4px', // Aligns arrow to the top edge of the tooltip
+          })
+          break
+        case 'left':
+          Object.assign(this.arrowTarget.style, {
+            top: arrowY ? `${arrowY}px` : '',
+            right: '-4px', // Aligns arrow to the right edge of the tooltip
+          })
+          break
+        case 'right':
+          Object.assign(this.arrowTarget.style, {
+            top: arrowY ? `${arrowY}px` : '',
+            left: '-4px', // Aligns arrow to the left edge of the tooltip
+          })
+          break
+      }
+    })
+  }
+
+  showTooltip(_event: Event) {
+    this.wrapperTarget.classList.add('ariadne-block')
+    this.wrapperTarget.classList.remove('ariadne-hidden')
+    this.update()
+  }
+
+  hideTooltip(_event: Event) {
+    this.wrapperTarget.classList.add('ariadne-hidden')
+    this.wrapperTarget.classList.remove('ariadne-block')
+  }
+}

data/app/frontend/utils/isMac.ts

@@ -0,0 +1,3 @@
+export function isMac() {
+  return /Mac|iMac|Macintosh|MacIntel/.test(navigator.userAgent)
+}

data/lib/ariadne/view_components/version.rb

@@ -3,6 +3,6 @@
 # :nocov:
 module Ariadne
   module ViewComponents
-    VERSION = "0.0.88"
+    VERSION = "0.0.89"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ariadne_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.88
+  version: 0.0.89
 platform: ruby
 authors:
 - Garen J. Torikian
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-08-28 00:00:00.000000000 Z
+date: 2024-09-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: tailwind_merge
@@ -246,6 +246,9 @@ files:
 - app/components/ariadne/ui/popover/component.html.erb
 - app/components/ariadne/ui/popover/component.rb
 - app/components/ariadne/ui/popover/component.ts
+- app/components/ariadne/ui/shortcut/component.html.erb
+- app/components/ariadne/ui/shortcut/component.rb
+- app/components/ariadne/ui/shortcut/component.ts
 - app/components/ariadne/ui/skeleton/component.html.erb
 - app/components/ariadne/ui/skeleton/component.rb
 - app/components/ariadne/ui/stats_panel/component.html.erb
@@ -273,10 +276,12 @@ files:
 - app/frontend/ariadne/theme.ts
 - app/frontend/controllers/form_autosubmit_controller.ts
 - app/frontend/controllers/form_validity_controller.ts
+- app/frontend/controllers/tooltip_controller.ts
 - app/frontend/entrypoints/application.ts
 - app/frontend/stylesheets/ariadne_view_components.css
 - app/frontend/stylesheets/scrollbar.css
 - app/frontend/utils/createController.ts
+- app/frontend/utils/isMac.ts
 - app/helpers/ariadne/form_helper.rb
 - app/lib/ariadne/attributes_helper.rb
 - app/lib/ariadne/class_name_helper.rb