uikit_rails 0.1.1

data/lib/uikit_rails/templates/components/toggle/toggle.css

@@ -0,0 +1,89 @@
+/* ============================================
+ * UikitRails — Toggle
+ *
+ * Pressable toggle button.
+ * Variants: default, outline
+ * Sizes:    sm, md, lg
+ * ============================================ */
+
+.ui-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-family: var(--ui-font-family);
+  font-weight: 500;
+  border: 1px solid transparent;
+  border-radius: var(--ui-radius);
+  background-color: transparent;
+  color: var(--ui-muted-foreground);
+  cursor: pointer;
+  transition:
+    background-color var(--ui-transition-speed) ease,
+    color var(--ui-transition-speed) ease,
+    border-color var(--ui-transition-speed) ease;
+  line-height: 1;
+}
+
+.ui-toggle:hover {
+  background-color: var(--ui-muted);
+  color: var(--ui-muted-foreground);
+}
+
+.ui-toggle:focus-visible {
+  outline: 2px solid var(--ui-ring);
+  outline-offset: 2px;
+}
+
+.ui-toggle:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* --- Pressed state --- */
+
+.ui-toggle--pressed {
+  background-color: var(--ui-accent);
+  color: var(--ui-accent-foreground);
+}
+
+.ui-toggle--pressed:hover {
+  background-color: color-mix(in srgb, var(--ui-accent) 80%, transparent);
+}
+
+/* --- Variants --- */
+
+.ui-toggle--outline {
+  border-color: var(--ui-border);
+  background-color: transparent;
+}
+
+.ui-toggle--outline:hover {
+  background-color: var(--ui-accent);
+  color: var(--ui-accent-foreground);
+}
+
+.ui-toggle--outline.ui-toggle--pressed {
+  background-color: var(--ui-accent);
+  color: var(--ui-accent-foreground);
+}
+
+/* --- Sizes --- */
+
+.ui-toggle--sm {
+  height: 2.25rem;
+  padding: 0 0.625rem;
+  font-size: var(--ui-font-size-xs);
+}
+
+.ui-toggle--md {
+  height: 2.5rem;
+  padding: 0 0.75rem;
+  font-size: var(--ui-font-size-sm);
+}
+
+.ui-toggle--lg {
+  height: 2.75rem;
+  padding: 0 1.25rem;
+  font-size: var(--ui-font-size-base);
+}

data/lib/uikit_rails/templates/components/tooltip/USAGE

@@ -0,0 +1,23 @@
+Basic tooltip (top position):
+
+  <%= render Ui::Tooltip::Component.new(text: "Tooltip text") do %>
+    <span>Hover me</span>
+  <% end %>
+
+Positions (top, bottom, left, right):
+
+  <%= render Ui::Tooltip::Component.new(text: "Bottom tip", position: :bottom) do %>
+    <span>Hover me</span>
+  <% end %>
+
+With a button trigger:
+
+  <%= render Ui::Tooltip::Component.new(text: "Save your changes") do %>
+    <%= render Ui::Button::Component.new do %>Save<% end %>
+  <% end %>
+
+With custom attributes:
+
+  <%= render Ui::Tooltip::Component.new(text: "Info", class: "extra", data: { turbo: false }) do %>
+    <span>Hover</span>
+  <% end %>

data/lib/uikit_rails/templates/components/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/lib/uikit_rails/templates/components/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/lib/uikit_rails/templates/components/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/lib/uikit_rails/templates/components/tooltip/tooltip.css

@@ -0,0 +1,78 @@
+/* ============================================
+ * UikitRails — Tooltip
+ *
+ * Hover/focus tooltip popup with four placement
+ * options: top, bottom, left, right.
+ * ============================================ */
+
+.ui-tooltip {
+  position: relative;
+  display: inline-flex;
+  font-family: var(--ui-font-family);
+}
+
+.ui-tooltip__trigger {
+  display: inline-flex;
+}
+
+/* --- Tooltip Content --- */
+
+.ui-tooltip__content {
+  position: absolute;
+  z-index: 50;
+  background-color: var(--ui-foreground);
+  color: var(--ui-background);
+  font-size: var(--ui-font-size-xs);
+  line-height: 1.4;
+  padding: 0.375rem 0.75rem;
+  border-radius: var(--ui-radius);
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--ui-transition-speed) ease;
+}
+
+.ui-tooltip__content[hidden] {
+  display: none;
+}
+
+.ui-tooltip__content:not([hidden]) {
+  opacity: 1;
+}
+
+/* --- Position: Top (default) --- */
+
+.ui-tooltip__content--top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 0.5rem;
+}
+
+/* --- Position: Bottom --- */
+
+.ui-tooltip__content--bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 0.5rem;
+}
+
+/* --- Position: Left --- */
+
+.ui-tooltip__content--left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: 0.5rem;
+}
+
+/* --- Position: Right --- */
+
+.ui-tooltip__content--right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 0.5rem;
+}

data/lib/uikit_rails/templates/stimulus/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/lib/uikit_rails/templates/stimulus/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/lib/uikit_rails/templates/stimulus/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/lib/uikit_rails/templates/stimulus/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/lib/uikit_rails/templates/stimulus/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/lib/uikit_rails/templates/stimulus/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/lib/uikit_rails/templates/stimulus/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/lib/uikit_rails/templates/stimulus/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/lib/uikit_rails/templates/stimulus/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/lib/uikit_rails/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module UikitRails
+  VERSION = "0.1.1"
+end

data/lib/uikit_rails.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+require_relative "uikit_rails/version"
+
+# Copy-paste UI components for Rails, inspired by shadcn/ui.
+module UikitRails
+  class Error < StandardError; end
+
+  COMPONENTS = %w[
+    accordion
+    alert
+    alert_dialog
+    avatar
+    badge
+    breadcrumb
+    button
+    card
+    checkbox
+    collapsible
+    dialog
+    dropdown
+    form
+    input
+    label
+    pagination
+    popover
+    progress
+    select
+    separator
+    sheet
+    skeleton
+    switch
+    table
+    tabs
+    textarea
+    toggle
+    tooltip
+  ].freeze
+
+  class << self
+    def component_path(name)
+      File.join(templates_root, "components", name)
+    end
+
+    def templates_root
+      File.expand_path("uikit_rails/templates", __dir__)
+    end
+
+    def component_exists?(name)
+      COMPONENTS.include?(name) && Dir.exist?(component_path(name))
+    end
+
+    def available_components
+      COMPONENTS.select { |name| Dir.exist?(component_path(name)) }
+    end
+  end
+end
+
+require_relative "uikit_rails/engine" if defined?(Rails::Railtie)

data/sig/uikit_rails.rbs

@@ -0,0 +1,4 @@
+module UikitRails
+  VERSION: String
+  # See the writing guide of rbs: https://github.com/ruby/rbs#guides
+end

data/test_app/.dockerignore

@@ -0,0 +1,51 @@
+# See https://docs.docker.com/engine/reference/builder/#dockerignore-file for more about ignoring files.
+
+# Ignore git directory.
+/.git/
+/.gitignore
+
+# Ignore bundler config.
+/.bundle
+
+# Ignore all environment files.
+/.env*
+
+# Ignore all default key files.
+/config/master.key
+/config/credentials/*.key
+
+# Ignore all logfiles and tempfiles.
+/log/*
+/tmp/*
+!/log/.keep
+!/tmp/.keep
+
+# Ignore pidfiles, but keep the directory.
+/tmp/pids/*
+!/tmp/pids/.keep
+
+# Ignore storage (uploaded files in development and any SQLite databases).
+/storage/*
+!/storage/.keep
+/tmp/storage/*
+!/tmp/storage/.keep
+
+# Ignore assets.
+/node_modules/
+/app/assets/builds/*
+!/app/assets/builds/.keep
+/public/assets
+
+# Ignore CI service files.
+/.github
+
+# Ignore Kamal files.
+/config/deploy*.yml
+/.kamal
+
+# Ignore development files
+/.devcontainer
+
+# Ignore Docker-related files
+/.dockerignore
+/Dockerfile*

data/test_app/.gitattributes

@@ -0,0 +1,9 @@
+# See https://git-scm.com/docs/gitattributes for more about git attribute files.
+
+# Mark the database schema as having been generated.
+db/schema.rb linguist-generated
+
+# Mark any vendored files as having been vendored.
+vendor/* linguist-vendored
+config/credentials/*.yml.enc diff=rails_credentials
+config/credentials.yml.enc diff=rails_credentials

data/test_app/.github/dependabot.yml

@@ -0,0 +1,12 @@
+version: 2
+updates:
+- package-ecosystem: bundler
+  directory: "/"
+  schedule:
+    interval: weekly
+  open-pull-requests-limit: 10
+- package-ecosystem: github-actions
+  directory: "/"
+  schedule:
+    interval: weekly
+  open-pull-requests-limit: 10