ariadne_view_components 0.0.84 → 0.0.86

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

@@ -0,0 +1,124 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Toggle
+      class Component < Ariadne::BaseComponent
+        option :size, default: proc { :md }
+        option :reversed, default: proc { false }
+
+        # @param form_url [String] The URL to POST to when the toggle switch is toggled. If `nil`, the toggle switch will not make any requests.
+        # @param csrf_token [String] A CSRF token that will be sent to the server as "authenticity_token" when the toggle switch is toggled. Unused if `src` is `nil`.
+        # @param checked [Boolean] Whether the toggle switch is on or off.
+        # @param enabled [Boolean] Whether or not the toggle switch responds to user input.
+        option :form_url, default: proc { nil }
+        option :form_method, default: proc { :post }
+        option :checked, default: proc { false }
+        option :enabled, default: proc { true }
+
+        accepts_html_attributes do |html_attrs|
+          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(size:), html_attrs[:class]].join(" "))
+
+          if @checked
+            html_attrs[:checked] = @checked
+            html_attrs["aria-pressed"] = @checked
+          end
+
+          html_attrs[:data] ||= {}
+          html_attrs[:data] = {
+            controller: "#{stimulus_name} #{html_attrs[:data].delete(:controller)}".strip,
+            "#{stimulus_name}-target": "toggle",
+            action: "click->#{stimulus_name}#toggle #{html_attrs[:data].delete(:action)}".strip,
+          }.merge(html_attrs[:data])
+        end
+
+        def before_render
+          @label_id = ::Ariadne::ViewHelper.generate_id
+
+          if @form_url.present?
+            csrf_token = view_context.form_authenticity_token(
+              form_options: {
+                method: @form_method,
+                action: @form_url,
+              },
+            )
+
+            form_values = {
+              "#{stimulus_name}-csrf-token-value": csrf_token,
+              "#{stimulus_name}-form-method-value": @form_method,
+              "#{stimulus_name}-form-url-value": @form_url,
+            }
+            html_attrs[:data] = html_attrs[:data].merge(form_values)
+          end
+        end
+
+        style do
+          base do
+            [
+              "ariadne-peer",
+              "ariadne-relative",
+              "ariadne-rounded-full",
+              "peer-focus:ariadne-ring-2",
+              "ariadne-bg-zinc-200",
+              "dark:ariadne-bg-zinc-700",
+              "peer-checked:ariadne-bg-indigo-500",
+
+              "after:ariadne-absolute",
+              "after:ariadne-content-['']",
+              "after:ariadne-start-0.5",
+              "after:ariadne-top-0.5",
+              "after:ariadne-rounded-full",
+              "after:ariadne-transition-all",
+              "after:ariadne-bg-white",
+              "peer-checked:after:ariadne-translate-x-full",
+            ]
+          end
+
+          variants do
+            size do
+              sm do
+                [
+                  "ariadne-w-7",
+                  "ariadne-h-4",
+                  "after:ariadne-h-3",
+                  "after:ariadne-w-3",
+                ]
+              end
+              md do
+                [
+                  "ariadne-w-9",
+                  "ariadne-h-5",
+                  "after:ariadne-h-4",
+                  "after:ariadne-w-4",
+                ]
+              end
+            end
+          end
+        end
+
+        style(:label) do
+          base do
+            [
+              "ariadne-relative",
+              "ariadne-inline-flex",
+              "ariadne-gap-3",
+              "ariadne-items-center",
+              "ariadne-cursor-pointer",
+            ]
+          end
+
+          variants do
+            reversed do
+              yes do
+                ["ariadne-flex-row-reverse"]
+              end
+              no do
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,133 @@
+import {controllerFactory} from '@utils/createController'
+
+export default class ToggleController extends controllerFactory<HTMLInputElement>()({
+  targets: {
+    toggle: HTMLInputElement,
+  },
+  values: {
+    formMethod: String,
+    formUrl: String,
+    csrfToken: String,
+  },
+}) {
+  connect() {
+    this.toggling = false
+  }
+
+  requiresFormSubmit(): boolean {
+    return this.formUrlValue != null
+  }
+
+  async toggle() {
+    if (this.toggling) return
+
+    this.toggling = true
+
+    if (this.isDisabled()) {
+      return
+    }
+
+    if (!this.requiresFormSubmit()) {
+      this.performToggle()
+      this.toggling = false
+      return
+    }
+
+    // toggle immediately to tell screen readers the switch was clicked
+    this.performToggle()
+
+    try {
+      await this.submitForm()
+    } catch (error) {
+      if (error instanceof Error) {
+        // because we toggle immediately when the switch is clicked, toggle back to the
+        // old state on failure
+        // this.setErrorState(error.message || 'An error occurred, please try again.')
+        this.performToggle()
+      }
+
+      return
+    } finally {
+      this.toggling = false
+    }
+
+    // this.setSuccessState()
+  }
+
+  performToggle(): void {
+    if (this.isOn()) {
+      this.turnOff()
+    } else {
+      this.turnOn()
+    }
+  }
+
+  turnOn(): void {
+    if (this.isDisabled()) {
+      return
+    }
+
+    this.toggleTarget.setAttribute('aria-pressed', 'true')
+  }
+
+  turnOff(): void {
+    if (this.isDisabled()) {
+      return
+    }
+
+    this.toggleTarget.setAttribute('aria-pressed', 'false')
+  }
+
+  isOn(): boolean {
+    return this.toggleTarget.getAttribute('aria-pressed') === 'true'
+  }
+
+  isOff(): boolean {
+    return !this.isOn()
+  }
+
+  isDisabled(): boolean {
+    return this.toggleTarget.getAttribute('disabled') != null
+  }
+
+  private async submitForm() {
+    const body = new FormData()
+
+    const csrfToken = this.documentCsrfToken() || this.csrfTokenValue
+    if (csrfToken) {
+      body.append(this.csrfField(), csrfToken)
+    }
+
+    body.append(this.toggleTarget.name, this.isOn() ? 'true' : 'false')
+
+    if (!this.formUrlValue) throw new Error('invalid src')
+
+    let response
+
+    try {
+      response = await fetch(this.formUrlValue, {
+        credentials: 'same-origin',
+        method: this.formMethodValue,
+        headers: {
+          'Requested-With': 'XMLHttpRequest',
+        },
+        body,
+      })
+    } catch (error) {
+      throw new Error('A network error occurred, please try again.')
+    }
+
+    if (!response.ok) {
+      throw new Error(await response.text())
+    }
+  }
+
+  // the authenticity token is passed into the element and is not generated in js land
+  private csrfField(): string {
+    return this.toggleTarget.getAttribute('csrf-field') || 'authenticity_token'
+  }
+  private documentCsrfToken(): string | null {
+    const meta = document.querySelector('meta[name=csrf-token]')
+    return meta && meta.getAttribute('content')
+  }
+}

data/app/lib/ariadne/fetch_or_fallback_helper.rb

@@ -26,6 +26,29 @@ module Ariadne
 
     INTEGER_TYPES = Set.new(["Integer"]).freeze
 
+    def fetch_or_fallback(allowed_values, given_value, fallback = nil, deprecated_values: nil)
+      if allowed_values.include?(given_value)
+        given_value
+      elsif deprecated_values&.include?(given_value)
+        ::Ariadne::ViewComponents.deprecation.warn("#{given_value} is deprecated and will be removed in a future version.") unless Rails.env.production? || silence_deprecations?
+
+        given_value
+      else
+        if fallback_raises && ENV["RAILS_ENV"] != "production"
+          raise InvalidValueError, <<~MSG
+            fetch_or_fallback was called with an invalid value.
+
+            Expected one of: #{allowed_values.inspect}
+            Got: #{given_value.inspect}
+
+            This will not raise in production, but will instead fallback to: #{fallback.inspect}
+          MSG
+        end
+
+        fallback
+      end
+    end
+
     def fetch_or_raise(allowed_values, given_value, against: nil)
       if !allowed_values.is_a?(Array) && !allowed_values.is_a?(Set)
         raise ArgumentError, "allowed_values must be an array or a set; it was #{allowed_values.class}"

data/lib/ariadne/view_components/engine.rb

@@ -61,6 +61,10 @@ module Ariadne
         end
       end
 
+      initializer "i18n.load_path" do
+        config.i18n.load_path.concat(Dir[Engine.root.join.join("app", "components", "**", "*.yml")])
+      end
+
       config.after_initialize do |_app|
         Ariadne::ViewComponents.tailwind_merger = TailwindMerge::Merger.new(config: { prefix: "ariadne-" })
       end

data/lib/ariadne/view_components/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ariadne_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.84
+  version: 0.0.86
 platform: ruby
 authors:
 - Garen J. Torikian
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-07-12 00:00:00.000000000 Z
+date: 2024-08-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: tailwind_merge
@@ -157,17 +157,27 @@ files:
 - app/components/ariadne/form/separator/component.rb
 - app/components/ariadne/form/text_field/component.html.erb
 - app/components/ariadne/form/text_field/component.rb
+- app/components/ariadne/form/toggle_group/component.html.erb
+- app/components/ariadne/form/toggle_group/component.rb
+- app/components/ariadne/form/toggle_group/option/component.html.erb
+- app/components/ariadne/form/toggle_group/option/component.rb
 - app/components/ariadne/form/validation_message/component.html.erb
 - app/components/ariadne/form/validation_message/component.rb
 - app/components/ariadne/layout/grid/component.html.erb
 - app/components/ariadne/layout/grid/component.rb
 - app/components/ariadne/layout/grid/item/component.html.erb
 - app/components/ariadne/layout/grid/item/component.rb
+- app/components/ariadne/layout/label_block/component.html.erb
+- app/components/ariadne/layout/label_block/component.rb
 - app/components/ariadne/layout/narrow/component.html.erb
 - app/components/ariadne/layout/narrow/component.rb
 - app/components/ariadne/layout/nav_bar/component.css
 - app/components/ariadne/layout/nav_bar/component.html.erb
 - app/components/ariadne/layout/nav_bar/component.rb
+- app/components/ariadne/layout/section_block/component.html.erb
+- app/components/ariadne/layout/section_block/component.rb
+- app/components/ariadne/layout/section_block/header/component.html.erb
+- app/components/ariadne/layout/section_block/header/component.rb
 - app/components/ariadne/layout/two_panel/component.html.erb
 - app/components/ariadne/layout/two_panel/component.rb
 - app/components/ariadne/layout/wide/component.html.erb
@@ -181,12 +191,16 @@ files:
 - app/components/ariadne/ui/accordion/component.ts
 - app/components/ariadne/ui/accordion/item/component.html.erb
 - app/components/ariadne/ui/accordion/item/component.rb
+- app/components/ariadne/ui/avatar/component.html.erb
+- app/components/ariadne/ui/avatar/component.rb
 - app/components/ariadne/ui/badge/component.html.erb
 - app/components/ariadne/ui/badge/component.rb
 - app/components/ariadne/ui/blankslate/component.html.erb
 - app/components/ariadne/ui/blankslate/component.rb
 - app/components/ariadne/ui/button/component.html.erb
 - app/components/ariadne/ui/button/component.rb
+- app/components/ariadne/ui/card/body/component.html.erb
+- app/components/ariadne/ui/card/body/component.rb
 - app/components/ariadne/ui/card/component.html.erb
 - app/components/ariadne/ui/card/component.rb
 - app/components/ariadne/ui/card/footer/component.html.erb
@@ -220,11 +234,17 @@ files:
 - app/components/ariadne/ui/overlay/component.html.erb
 - app/components/ariadne/ui/overlay/component.rb
 - app/components/ariadne/ui/overlay/component.ts
+- app/components/ariadne/ui/pagination/component.html.erb
+- app/components/ariadne/ui/pagination/component.rb
 - 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/skeleton/component.html.erb
 - app/components/ariadne/ui/skeleton/component.rb
+- app/components/ariadne/ui/stats_panel/component.html.erb
+- app/components/ariadne/ui/stats_panel/component.rb
+- app/components/ariadne/ui/stats_panel/item/component.html.erb
+- app/components/ariadne/ui/stats_panel/item/component.rb
 - app/components/ariadne/ui/table/cell/component.html.erb
 - app/components/ariadne/ui/table/cell/component.rb
 - app/components/ariadne/ui/table/component.html.erb
@@ -235,6 +255,12 @@ files:
 - app/components/ariadne/ui/table/header/component.rb
 - app/components/ariadne/ui/table/row/component.html.erb
 - app/components/ariadne/ui/table/row/component.rb
+- app/components/ariadne/ui/time_ago/component.html.erb
+- app/components/ariadne/ui/time_ago/component.rb
+- app/components/ariadne/ui/time_ago/en.yml
+- app/components/ariadne/ui/toggle/component.html.erb
+- app/components/ariadne/ui/toggle/component.rb
+- app/components/ariadne/ui/toggle/component.ts
 - app/components/ariadne/ui/typography/component.html.erb
 - app/components/ariadne/ui/typography/component.rb
 - app/frontend/ariadne/index.ts