uikit_rails 0.1.1

data/test_app/app/components/ui/tabs/component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Ui
+  module Tabs
+    # Tabbed content panels.
+    class Component < Ui::BaseComponent
+      renders_many :tabs, lambda { |id:, label:, **html_attrs|
+        Tab.new(id: id, label: label, **html_attrs)
+      }
+
+      attr_reader :default_tab, :html_attrs
+
+      def initialize(default_tab: nil, **html_attrs)
+        @default_tab = default_tab
+        @html_attrs = html_attrs
+        super()
+      end
+
+      class Tab < Ui::BaseComponent
+        attr_reader :id, :label, :html_attrs
+
+        def initialize(id:, label:, **html_attrs)
+          @id = id
+          @label = label
+          @html_attrs = html_attrs
+          super()
+        end
+
+        def call
+          content
+        end
+      end
+    end
+  end
+end

data/test_app/app/components/ui/tabs/preview.yml

@@ -0,0 +1,60 @@
+description: Tabbed content panels for organizing related content into switchable views. Supports keyboard navigation and ARIA roles.
+
+sections:
+  - title: Basic Tabs
+    examples:
+      - title: Default tabs
+        code: |
+          <%= render Ui::Tabs::Component.new do |tabs| %>
+            <% tabs.with_tab(id: "account", label: "Account") do %>
+              <p>Manage your account settings and preferences.</p>
+            <% end %>
+            <% tabs.with_tab(id: "password", label: "Password") do %>
+              <p>Change your password and security settings.</p>
+            <% end %>
+            <% tabs.with_tab(id: "notifications", label: "Notifications") do %>
+              <p>Configure how you receive notifications.</p>
+            <% end %>
+          <% end %>
+
+  - title: Default Active Tab
+    examples:
+      - title: Second tab active by default
+        code: |
+          <%= render Ui::Tabs::Component.new(default_tab: "password") do |tabs| %>
+            <% tabs.with_tab(id: "account", label: "Account") do %>
+              <p>Account details go here.</p>
+            <% end %>
+            <% tabs.with_tab(id: "password", label: "Password") do %>
+              <p>Password settings are shown first.</p>
+            <% end %>
+          <% end %>
+
+  - title: Rich Content
+    examples:
+      - title: Tabs with forms and actions
+        code: |
+          <%= render Ui::Tabs::Component.new do |tabs| %>
+            <% tabs.with_tab(id: "profile", label: "Profile") do %>
+              <div style="max-width: 24rem;">
+                <p style="margin-bottom: 1rem;">Update your profile information.</p>
+                <%= render Ui::Button::Component.new(size: :sm) do %>Save Changes<% end %>
+              </div>
+            <% end %>
+            <% tabs.with_tab(id: "billing", label: "Billing") do %>
+              <p>View and manage your billing information and invoices.</p>
+            <% end %>
+          <% end %>
+
+  - title: Custom Attributes
+    examples:
+      - title: With custom class
+        code: |
+          <%= render Ui::Tabs::Component.new(class: "my-custom-tabs", data: { turbo: false }) do |tabs| %>
+            <% tabs.with_tab(id: "tab1", label: "First") do %>
+              <p>First tab content.</p>
+            <% end %>
+            <% tabs.with_tab(id: "tab2", label: "Second") do %>
+              <p>Second tab content.</p>
+            <% end %>
+          <% end %>

data/test_app/app/components/ui/textarea/component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Ui
+  module Textarea
+    # Multi-line text input field.
+    class Component < Ui::BaseComponent
+      attr_reader :html_attrs
+
+      def initialize(**html_attrs)
+        @html_attrs = html_attrs
+        super()
+      end
+
+      def call
+        content_tag(:textarea, content, **computed_attrs)
+      end
+
+      private
+
+      def computed_attrs
+        merge_attrs({ class: "ui-textarea" }, html_attrs)
+      end
+    end
+  end
+end

data/test_app/app/components/ui/textarea/preview.yml

@@ -0,0 +1,47 @@
+description: A styled multi-line text input. Supports all standard HTML textarea attributes including placeholder, rows, disabled, and name.
+
+sections:
+  - title: Basic Usage
+    examples:
+      - title: Default textarea
+        code: |
+          <%= render Ui::Textarea::Component.new(placeholder: "Type your message here...") %>
+
+      - title: With rows
+        code: |
+          <%= render Ui::Textarea::Component.new(placeholder: "Write something...", rows: 6) %>
+
+  - title: With Content
+    examples:
+      - title: Pre-filled content
+        code: |
+          <%= render Ui::Textarea::Component.new(name: "bio") do %>This is pre-filled content.<% end %>
+
+      - title: With name and placeholder
+        code: |
+          <%= render Ui::Textarea::Component.new(name: "description", placeholder: "Describe your project...") %>
+
+  - title: States
+    examples:
+      - title: Disabled
+        code: |
+          <%= render Ui::Textarea::Component.new(placeholder: "Disabled textarea", disabled: true) %>
+
+      - title: Required
+        code: |
+          <%= render Ui::Textarea::Component.new(placeholder: "Required field", required: true) %>
+
+      - title: Readonly
+        code: |
+          <%= render Ui::Textarea::Component.new(readonly: true) do %>This content is read-only.<% end %>
+
+  - title: With Custom Attributes
+    examples:
+      - title: Custom class and data attributes
+        code: |
+          <%= render Ui::Textarea::Component.new(
+            placeholder: "Custom",
+            class: "my-custom-class",
+            data: { controller: "auto-resize" },
+            maxlength: 500
+          ) %>

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

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Ui
+  module Toggle
+    # Pressable toggle button.
+    class Component < Ui::BaseComponent
+      VARIANTS = %i[default outline].freeze
+      SIZES = %i[sm md lg].freeze
+
+      attr_reader :variant, :size, :pressed, :html_attrs
+
+      def initialize(variant: :default, size: :md, pressed: false, **html_attrs)
+        @variant = variant.to_sym
+        @size = size.to_sym
+        @pressed = pressed
+        @html_attrs = html_attrs
+        super()
+      end
+
+      def call
+        content_tag(:button, content, **computed_attrs)
+      end
+
+      private
+
+      def computed_attrs
+        merge_attrs(
+          {
+            class: class_names("ui-toggle", "ui-toggle--#{variant}", "ui-toggle--#{size}",
+                               "ui-toggle--pressed": pressed),
+            type: "button",
+            "aria-pressed": pressed.to_s
+          },
+          html_attrs
+        )
+      end
+    end
+  end
+end

data/test_app/app/components/ui/toggle/preview.yml

@@ -0,0 +1,81 @@
+description: A pressable toggle button with variants and sizes. Uses aria-pressed for accessibility. Ideal for toolbar actions or binary state controls.
+
+sections:
+  - title: Basic Usage
+    examples:
+      - title: Default (unpressed)
+        code: |
+          <%= render Ui::Toggle::Component.new do %>
+            B
+          <% end %>
+
+      - title: Pressed
+        code: |
+          <%= render Ui::Toggle::Component.new(pressed: true) do %>
+            B
+          <% end %>
+
+  - title: Variants
+    examples:
+      - title: Default variant
+        code: |
+          <%= render Ui::Toggle::Component.new do %>
+            Italic
+          <% end %>
+
+      - title: Outline variant
+        code: |
+          <%= render Ui::Toggle::Component.new(variant: :outline) do %>
+            Italic
+          <% end %>
+
+      - title: Outline pressed
+        code: |
+          <%= render Ui::Toggle::Component.new(variant: :outline, pressed: true) do %>
+            Italic
+          <% end %>
+
+  - title: Sizes
+    examples:
+      - title: Small
+        code: |
+          <%= render Ui::Toggle::Component.new(size: :sm) do %>
+            S
+          <% end %>
+
+      - title: Medium (default)
+        code: |
+          <%= render Ui::Toggle::Component.new(size: :md) do %>
+            M
+          <% end %>
+
+      - title: Large
+        code: |
+          <%= render Ui::Toggle::Component.new(size: :lg) do %>
+            L
+          <% end %>
+
+  - title: Disabled State
+    examples:
+      - title: Disabled
+        code: |
+          <%= render Ui::Toggle::Component.new(disabled: true) do %>
+            Disabled
+          <% end %>
+
+      - title: Disabled pressed
+        code: |
+          <%= render Ui::Toggle::Component.new(pressed: true, disabled: true) do %>
+            Locked
+          <% end %>
+
+  - title: With Custom Attributes
+    examples:
+      - title: Custom data attributes
+        code: |
+          <%= render Ui::Toggle::Component.new(
+            variant: :outline,
+            data: { controller: "toolbar", action: "click->toolbar#toggleBold" }
+          ) do %>
+            B
+          <% end %>

data/test_app/app/components/ui/tooltip/component.html.erb

@@ -0,0 +1,8 @@
+<div class="ui-tooltip" data-controller="ui--tooltip" <%= tag.attributes(html_attrs) %>>
+  <div class="ui-tooltip__trigger" data-action="mouseenter->ui--tooltip#show mouseleave->ui--tooltip#hide focusin->ui--tooltip#show focusout->ui--tooltip#hide">
+    <%= content %>
+  </div>
+  <div class="ui-tooltip__content ui-tooltip__content--<%= position %>" role="tooltip" data-ui--tooltip-target="content" hidden>
+    <%= text %>
+  </div>
+</div>

data/test_app/app/components/ui/tooltip/component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Ui
+  module Tooltip
+    # Hover/focus tooltip popup.
+    class Component < Ui::BaseComponent
+      POSITIONS = %i[top bottom left right].freeze
+
+      attr_reader :text, :position, :html_attrs
+
+      def initialize(text:, position: :top, **html_attrs)
+        @text = text
+        @position = position.to_sym
+        @html_attrs = html_attrs
+        super()
+      end
+    end
+  end
+end

data/test_app/app/components/ui/tooltip/preview.yml

@@ -0,0 +1,52 @@
+description: A hover/focus tooltip that displays additional information. Supports four positions (top, bottom, left, right) and works with any trigger content.
+
+sections:
+  - title: Positions
+    examples:
+      - title: Top (default)
+        code: |
+          <%= render Ui::Tooltip::Component.new(text: "This is a tooltip") do %>
+            <%= render Ui::Button::Component.new(variant: :outline) do %>Hover me<% end %>
+          <% end %>
+
+      - title: Bottom
+        code: |
+          <%= render Ui::Tooltip::Component.new(text: "Bottom tooltip", position: :bottom) do %>
+            <%= render Ui::Button::Component.new(variant: :outline) do %>Bottom<% end %>
+          <% end %>
+
+      - title: Left
+        code: |
+          <div style="padding-left: 10rem;">
+            <%= render Ui::Tooltip::Component.new(text: "Left tooltip", position: :left) do %>
+              <%= render Ui::Button::Component.new(variant: :outline) do %>Left<% end %>
+            <% end %>
+          </div>
+
+      - title: Right
+        code: |
+          <%= render Ui::Tooltip::Component.new(text: "Right tooltip", position: :right) do %>
+            <%= render Ui::Button::Component.new(variant: :outline) do %>Right<% end %>
+          <% end %>
+
+  - title: With Different Triggers
+    examples:
+      - title: Text trigger
+        code: |
+          <%= render Ui::Tooltip::Component.new(text: "More information about this item") do %>
+            <span style="border-bottom: 1px dashed; cursor: help;">What is this?</span>
+          <% end %>
+
+      - title: Icon trigger
+        code: |
+          <%= render Ui::Tooltip::Component.new(text: "Settings") do %>
+            <%= render Ui::Button::Component.new(variant: :ghost, size: :icon) do %>&#9881;<% end %>
+          <% end %>
+
+  - title: Custom Attributes
+    examples:
+      - title: With custom class
+        code: |
+          <%= render Ui::Tooltip::Component.new(text: "Custom tooltip", class: "my-tooltip") do %>
+            <%= render Ui::Button::Component.new do %>Custom<% end %>
+          <% end %>

data/test_app/app/controllers/application_controller.rb

@@ -0,0 +1,7 @@
+class ApplicationController < ActionController::Base
+  # Only allow modern browsers supporting webp images, web push, badges, import maps, CSS nesting, and CSS :has.
+  allow_browser versions: :modern
+
+  # Changes to the importmap will invalidate the etag for HTML responses
+  stale_when_importmap_changes
+end

data/test_app/app/helpers/application_helper.rb

@@ -0,0 +1,2 @@
+module ApplicationHelper
+end

data/test_app/app/javascript/application.js

@@ -0,0 +1,3 @@
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+import "@hotwired/turbo-rails"
+import "controllers"

data/test_app/app/javascript/controllers/application.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus   = application
+
+export { application }

data/test_app/app/javascript/controllers/hello_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.textContent = "Hello World!"
+  }
+}

data/test_app/app/javascript/controllers/index.js

@@ -0,0 +1,4 @@
+// Import and register all your controllers from the importmap via controllers/**/*_controller
+import { application } from "controllers/application"
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)

data/test_app/app/javascript/controllers/ui/accordion_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["item"]
+  static values = { multiple: { type: Boolean, default: false } }
+
+  toggle(event) {
+    if (this.multipleValue) return
+
+    const toggled = event.currentTarget
+    if (!toggled.open) return
+
+    this.itemTargets.forEach(item => {
+      if (item !== toggled && item.open) {
+        item.open = false
+      }
+    })
+  }
+}

data/test_app/app/javascript/controllers/ui/alert_dialog_controller.js

@@ -0,0 +1,25 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["dialog"]
+
+  open() {
+    this.dialogTarget.showModal()
+    document.body.style.overflow = "hidden"
+    this.dialogTarget.addEventListener("cancel", this.preventCancel)
+  }
+
+  close() {
+    this.dialogTarget.removeEventListener("cancel", this.preventCancel)
+    this.dialogTarget.close()
+    document.body.style.overflow = ""
+  }
+
+  preventCancel(event) {
+    event.preventDefault()
+  }
+
+  disconnect() {
+    document.body.style.overflow = ""
+  }
+}

data/test_app/app/javascript/controllers/ui/collapsible_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["content"]
+
+  toggle() {
+    this.contentTarget.classList.toggle("ui-collapsible__content--open")
+  }
+}

data/test_app/app/javascript/controllers/ui/dialog_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["dialog"]
+
+  open() {
+    this.dialogTarget.showModal()
+    document.body.style.overflow = "hidden"
+  }
+
+  close() {
+    this.dialogTarget.close()
+    document.body.style.overflow = ""
+  }
+
+  disconnect() {
+    document.body.style.overflow = ""
+  }
+}

data/test_app/app/javascript/controllers/ui/dropdown_controller.js

@@ -0,0 +1,47 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["menu"]
+
+  connect() {
+    this.boundClose = this.closeOnOutsideClick.bind(this)
+    this.boundEscape = this.closeOnEscape.bind(this)
+  }
+
+  toggle() {
+    if (this.menuTarget.hidden) {
+      this.open()
+    } else {
+      this.close()
+    }
+  }
+
+  open() {
+    this.menuTarget.hidden = false
+    document.addEventListener("click", this.boundClose)
+    document.addEventListener("keydown", this.boundEscape)
+  }
+
+  close() {
+    this.menuTarget.hidden = true
+    document.removeEventListener("click", this.boundClose)
+    document.removeEventListener("keydown", this.boundEscape)
+  }
+
+  closeOnOutsideClick(event) {
+    if (!this.element.contains(event.target)) {
+      this.close()
+    }
+  }
+
+  closeOnEscape(event) {
+    if (event.key === "Escape") {
+      this.close()
+    }
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this.boundClose)
+    document.removeEventListener("keydown", this.boundEscape)
+  }
+}

data/test_app/app/javascript/controllers/ui/popover_controller.js

@@ -0,0 +1,47 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["content"]
+
+  connect() {
+    this._onOutsideClick = this._onOutsideClick.bind(this)
+    this._onKeydown = this._onKeydown.bind(this)
+  }
+
+  toggle() {
+    if (this.contentTarget.classList.contains("ui-popover__content--open")) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  open() {
+    this.contentTarget.classList.add("ui-popover__content--open")
+    document.addEventListener("click", this._onOutsideClick)
+    document.addEventListener("keydown", this._onKeydown)
+  }
+
+  close() {
+    this.contentTarget.classList.remove("ui-popover__content--open")
+    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() {
+    document.removeEventListener("click", this._onOutsideClick)
+    document.removeEventListener("keydown", this._onKeydown)
+  }
+}

data/test_app/app/javascript/controllers/ui/sheet_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["dialog"]
+
+  open() {
+    this.dialogTarget.showModal()
+    document.body.style.overflow = "hidden"
+  }
+
+  close() {
+    this.dialogTarget.close()
+    document.body.style.overflow = ""
+  }
+
+  disconnect() {
+    document.body.style.overflow = ""
+  }
+}

data/test_app/app/javascript/controllers/ui/tabs_controller.js

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["trigger", "panel"]
+  static values = { default: String }
+
+  connect() {
+    this.select({ params: { id: this.defaultValue } })
+  }
+
+  select({ params: { id } }) {
+    this.triggerTargets.forEach(trigger => {
+      const isActive = trigger.dataset.uiTabsIdParam === id
+      trigger.classList.toggle("ui-tabs__trigger--active", isActive)
+      trigger.setAttribute("aria-selected", isActive)
+    })
+
+    this.panelTargets.forEach(panel => {
+      const isActive = panel.dataset.tabId === id
+      panel.classList.toggle("ui-tabs__panel--active", isActive)
+      panel.hidden = !isActive
+    })
+  }
+}

data/test_app/app/javascript/controllers/ui/tooltip_controller.js

@@ -0,0 +1,13 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["content"]
+
+  show() {
+    this.contentTarget.hidden = false
+  }
+
+  hide() {
+    this.contentTarget.hidden = true
+  }
+}

data/test_app/app/jobs/application_job.rb

@@ -0,0 +1,7 @@
+class ApplicationJob < ActiveJob::Base
+  # Automatically retry jobs that encountered a deadlock
+  # retry_on ActiveRecord::Deadlocked
+
+  # Most jobs are safe to ignore if the underlying records are no longer available
+  # discard_on ActiveJob::DeserializationError
+end

data/test_app/app/mailers/application_mailer.rb

@@ -0,0 +1,4 @@
+class ApplicationMailer < ActionMailer::Base
+  default from: "from@example.com"
+  layout "mailer"
+end

data/test_app/app/models/application_record.rb

@@ -0,0 +1,3 @@
+class ApplicationRecord < ActiveRecord::Base
+  primary_abstract_class
+end