quicksilver_ui 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 98070a613f6cd27f56a14c30d26f7a769f92e3434dcb38ec980d6af9f99ead6b
+  data.tar.gz: b54c5beab648c18a73c6a916bacf70c5391c88ec0c1cd483ca84f8ea431b82c8
+SHA512:
+  metadata.gz: 634ea19a66852a9bd502eaeaea72edf39fab4c6c1d6b989b51e32d56e0562b8ebfc92dd8d7b226760556730c0c9788b5d290cf1764383f02fdb3c5528fc4cd89
+  data.tar.gz: a7ae72ff22c80a1ce740901c6accbe471e05ed59e15cc469ea60b6208d7ad30aed554a246fbc8cc2af3eaa5419f3ee9a80a6fe3782d9d4a188aac47604ae66a5

data/app/assets/tailwind/alert.css

@@ -0,0 +1,35 @@
+.ui-alert {
+  @apply min-w-96 max-w-2xl ring ring-gray-700 bg-white p-3 text-gray-900 inline-flex justify-start items-start gap-3;
+}
+
+.ui-alert-neutral {
+  @apply ring-gray-700 bg-gray-100;
+}
+
+.ui-alert-brand {
+  @apply text-primary-950 ring-primary-200 bg-primary-100;
+}
+
+.ui-alert-success {
+  @apply text-emerald-950 ring-emerald-200 bg-emerald-100;
+}
+
+.ui-alert-warning {
+  @apply text-amber-950 ring-amber-200 bg-amber-100;
+}
+
+.ui-alert-danger {
+  @apply text-red-950 ring-red-200 bg-red-100;
+}
+
+.ui-alert-info {
+  @apply text-blue-950 ring-blue-200 bg-blue-100;
+}
+
+.ui-alert-sm {
+  @apply p-1.5 gap-1.5;
+}
+
+.ui-alert-md {
+  @apply p-3 gap-3;
+}

data/app/assets/tailwind/badge.css

@@ -0,0 +1,27 @@
+.ui-badge {
+  @apply inline-flex justify-start items-center min-w-fit max-w-fit gap-1 px-2 py-0.5 text-xs bg-gray-50 rounded-sm ring ring-gray-600;
+}
+
+.ui-badge-neutral {
+  @apply text-gray-900 bg-gray-50 ring-gray-600;
+}
+
+.ui-badge-brand {
+  @apply text-primary-900 bg-primary-100 ring-primary-200;
+}
+
+.ui-badge-danger {
+  @apply text-red-700 bg-red-50 ring-red-700;
+}
+
+.ui-badge-sm {
+  @apply px-2 py-0.5 text-xs;
+}
+
+.ui-badge-md {
+  @apply px-2.5 py-0.5 text-sm font-medium leading-5;
+}
+
+.ui-badge-lg {
+  @apply px-3 py-1 text-sm font-medium leading-5;
+}

data/app/assets/tailwind/button.css

@@ -0,0 +1,35 @@
+.ui-button {
+  @apply max-w-fit block px-2 py-1 no-underline text-sm font-medium text-gray-950 border border-gray-900 hover:bg-gray-900 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900;
+}
+
+.ui-button-primary {
+  @apply text-white border-primary-500 bg-primary-500 hover:bg-primary-700 hover:border-primary-700 focus-visible:outline-primary-500;
+}
+
+.ui-button-secondary {
+  @apply text-white border-secondary-700 bg-secondary-700 hover:bg-secondary-900 hover:border-secondary-900 focus-visible:outline-secondary-500;
+}
+
+.ui-button-warning {
+  @apply text-amber-950 bg-amber-200 hover:bg-amber-300 active:bg-amber-400 border border-amber-300 hover:border-amber-500 focus-visible:outline-amber-500;
+}
+
+.ui-button-danger {
+  @apply text-red-500 bg-white active:bg-red-400 border border-red-500 hover:bg-red-500 hover:text-red-50 focus-visible:outline-red-500;
+}
+
+.ui-button-lg {
+  @apply text-base py-2 px-4;
+}
+
+.ui-button-md {
+  @apply text-sm py-1 px-4;
+}
+
+.ui-button-sm {
+  @apply text-xs py-1 px-3;
+}
+
+.ui-button-xs {
+  @apply text-xs py-0.5 px-2;
+}

data/app/assets/tailwind/form.css

@@ -0,0 +1,35 @@
+.ui-form-control {
+  @apply ring ring-gray-800 px-2 py-1 rounded-sm max-w-fit focus:outline-2 focus:outline-gray-900;
+
+  [data-invalid] & {
+    @apply text-red-500 ring-red-500 focus:outline-red-500;
+  }
+}
+
+.ui-form-checkbox {
+  @apply size-4 appearance-none border border-gray-800 bg-white checked:bg-gray-900 indeterminate:border-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 focus:outline-gray-900 disabled:border-gray-500 hover:disabled:border-gray-500 disabled:bg-gray-400 disabled:checked:bg-gray-400;
+}
+
+.ui-form-radio {
+  @apply size-4 appearance-none border border-gray-800 bg-white checked:bg-gray-900 indeterminate:border-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 focus:outline-gray-900 disabled:border-gray-500 hover:disabled:border-gray-500 disabled:bg-gray-400 disabled:checked:bg-gray-400;
+}
+
+.ui-form-select {
+  @apply ring ring-gray-800 pl-2 pr-6 py-1 rounded-sm max-w-fit focus:outline-2 focus:outline-gray-900;
+
+  [data-invalid] & {
+    @apply text-red-500 ring-red-500 focus:outline-red-500;
+  }
+}
+
+.ui-form-label {
+  @apply font-medium text-sm text-gray-900;
+}
+
+.ui-form-hint {
+  @apply text-sm text-gray-800;
+}
+
+.ui-form-error {
+  @apply text-sm font-medium text-red-600;
+}

data/app/assets/tailwind/link.css

@@ -0,0 +1,23 @@
+.ui-link {
+  @apply underline text-sm text-gray-900 hover:text-primary-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500;
+}
+
+.ui-link-danger {
+  @apply text-tertiary-600 hover:text-tertiary-700 active:text-tertiary-800 focus-visible:outline-tertiary-600;
+}
+
+.ui-link-primary {
+  @apply text-primary-600 hover:text-primary-700 active:text-primary-800 focus-visible:outline-primary-500;
+}
+
+.ui-link-lg {
+  @apply text-base;
+}
+
+.ui-link-md {
+  @apply text-sm;
+}
+
+.ui-link-sm {
+  @apply text-xs;
+}

data/app/assets/tailwind/modal.css

@@ -0,0 +1,43 @@
+  .ui-modal {
+    @apply absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 min-w-sm max-w-xl w-full shadow-xl ring ring-gray-300 bg-white backdrop:bg-gray-800/50;
+  }
+
+  dialog.ui-modal:not([open]) {
+    @apply hidden;
+  }
+
+  .ui-modal-body {
+    @apply p-4;
+  }
+
+  .ui-modal-footer {
+    @apply border-t border-gray-300 p-6;
+  }
+
+  @keyframes ui-fade-in {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes ui-fade-out {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+
+  dialog[data-modal-target="dialog"][open] {
+    animation: ui-fade-in 200ms forwards;
+  }
+
+  dialog[data-modal-target="dialog"][closing] {
+    animation: ui-fade-out 200ms forwards;
+  }

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

@@ -0,0 +1,7 @@
+@import "../typography.css" layer(affordances);
+@import "../button.css" layer(affordances);
+@import "../link.css" layer(affordances);
+@import "../alert.css" layer(affordances);
+@import "../form.css" layer(affordances);
+@import "../badge.css" layer(affordances);
+@import "../modal.css" layer(affordances);

data/app/assets/tailwind/typography.css

@@ -0,0 +1,112 @@
+/* Typography */
+.ui-display-2xl {
+  @apply text-gray-900 text-5xl font-light leading-relaxed tracking-tight;
+}
+
+.ui-display-xl {
+  @apply text-gray-900 text-4xl font-light leading-relaxed tracking-tight;
+}
+
+.ui-display-lg {
+  @apply text-gray-900 text-3xl font-light leading-relaxed tracking-tight;
+}
+
+.ui-display-md {
+  @apply text-gray-900 text-2xl font-light leading-relaxed tracking-tight;
+}
+
+.ui-display-sm {
+  @apply text-gray-900 text-xl font-light leading-relaxed;
+}
+
+.ui-display-xs {
+  @apply text-gray-900 text-lg font-light leading-relaxed;
+}
+
+/* Heading Typography */
+.ui-heading-2xl {
+  @apply text-gray-900 text-4xl font-semibold leading-tight;
+}
+
+.ui-heading-xl {
+  @apply text-gray-900 text-3xl font-semibold leading-snug;
+}
+
+.ui-heading-lg {
+  @apply text-gray-900 text-2xl font-semibold leading-snug;
+}
+
+.ui-heading-md {
+  @apply text-gray-900 text-xl font-semibold leading-snug;
+}
+
+.ui-heading-sm {
+  @apply text-gray-900 text-lg font-semibold leading-snug;
+}
+
+.ui-heading-xs {
+  @apply text-gray-900 text-base font-semibold leading-normal;
+}
+
+/* Body Typography */
+.ui-text-xl {
+  @apply text-gray-900 text-xl leading-7;
+}
+
+.ui-text-lg {
+  @apply text-gray-900 text-lg leading-7;
+}
+
+.ui-text-md {
+  @apply text-gray-900 text-base leading-6;
+}
+
+.ui-text-sm {
+  @apply text-gray-900 text-sm leading-5;
+}
+
+.ui-text-xs {
+  @apply text-gray-900 text-xs leading-4;
+}
+
+/* Body Typography - Medium Weight Variants */
+.ui-text-xl-medium {
+  @apply text-gray-900 text-xl font-medium leading-7;
+}
+
+.ui-text-lg-medium {
+  @apply text-gray-900 text-lg font-medium leading-7;
+}
+
+.ui-text-md-medium {
+  @apply text-gray-900 text-base font-medium leading-6;
+}
+
+.ui-text-sm-medium {
+  @apply text-gray-900 text-sm font-medium leading-5;
+}
+
+.ui-text-xs-medium {
+  @apply text-gray-900 text-xs font-medium leading-4;
+}
+
+/* Body Typography - Semibold Weight Variants */
+.ui-text-xl-semibold {
+  @apply text-gray-900 text-xl font-semibold leading-7;
+}
+
+.ui-text-lg-semibold {
+  @apply text-gray-900 text-lg font-semibold leading-7;
+}
+
+.ui-text-md-semibold {
+  @apply text-gray-900 text-base font-semibold leading-6;
+}
+
+.ui-text-sm-semibold {
+  @apply text-gray-900 text-sm font-semibold leading-5;
+}
+
+.ui-text-xs-semibold {
+  @apply text-gray-900 text-xs font-semibold leading-4;
+}

data/app/helpers/app_form_builder.rb

@@ -0,0 +1,94 @@
+class AppFormBuilder < ActionView::Helpers::FormBuilder
+  delegate :render, to: :@template
+
+  def self.with_blank_error_proc(&block)
+    old_error_proc = ActionView::Base.field_error_proc
+    begin
+      ActionView::Base.field_error_proc = proc do |tag, instance|
+        tag
+      end
+      block.call
+    ensure
+      ActionView::Base.field_error_proc = old_error_proc
+    end
+  end
+
+  def group(method, options = {})
+    render Form::Group.new(form: self, method:, type: options[:type] || :text, **options.except(:type))
+  end
+
+  def text_field(method, options = {})
+    render Form::TextField.new(form: self, method:, **options)
+  end
+
+  def date_field(method, options = {})
+    render Form::DateField.new(form: self, method:, **options)
+  end
+
+  def email_field(method, options = {})
+    render Form::EmailField.new(form: self, method:, **options)
+  end
+
+  def phone_field(method, options = {})
+    render Form::PhoneField.new(form: self, method:, **options)
+  end
+
+  def file_field(method, options = {})
+    render Form::FileField.new(form: self, method:, **options)
+  end
+
+  def password_field(method, options = {})
+    render Form::PasswordField.new(form: self, method:, **options)
+  end
+
+  def search_field(method, options = {})
+    render Form::SearchField.new(form: self, method:, **options)
+  end
+
+  def select(method, choices = nil, options = {}, html_options = {})
+    render Form::Select.new(
+      form: self,
+      method:,
+      choices:,
+      selected: options[:selected],
+      include_blank: options.fetch(:include_blank, true),
+      prompt: options[:prompt],
+      disabled: options[:disabled],
+      include_hidden: options.fetch(:include_hidden, true),
+      html_options:
+    )
+  end
+
+  def textarea(method, options = {})
+    render Form::Textarea.new(form: self, method:, **options)
+  end
+  alias_method :text_area, :textarea
+
+  def label(method, text = nil, options = {}, &block)
+    render Form::Label.new(form: self, method:, text:, **options)
+  end
+
+  def hint(method, text = nil, options = {}, &block)
+    render Form::Hint.new(form: self, method:, text:, **options)
+  end
+
+  def error(method, text = nil, options = {}, &block)
+    render Form::Error.new(form: self, method:, text:, **options)
+  end
+
+  def submit(value = nil, options = {})
+    super(value, options.with_defaults(class: "ui-button ui-button-primary"))
+  end
+
+  def checkbox(method, options = {})
+    render Form::Checkbox.new(form: self, method:, **options)
+  end
+
+  def toggle(method, options = {})
+    render Form::Toggle.new(form: self, method:, **options)
+  end
+
+  def radio_button(method, tag_value, options = {})
+    render Form::RadioButton.new(form: self, tag_value:, method:, **options)
+  end
+end

data/app/helpers/app_form_helper.rb

@@ -0,0 +1,7 @@
+module AppFormHelper
+  def app_form_with(*, **, &)
+    AppFormBuilder.with_blank_error_proc do
+      form_with(*, builder: AppFormBuilder, **, &)
+    end
+  end
+end

data/app/javascript/controllers/autogrow_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus"
+import { useResize } from "stimulus-use"
+
+export default class extends Controller {
+  connect() {
+    useResize(this, { element: this.element })
+    this.resize()
+  }
+
+  input() {
+    this.resize()
+  }
+
+  resize() {
+    this.element.style.overflow = "hidden"
+    this.element.style.height = "auto"
+    this.element.style.height = `${this.element.scrollHeight}px`
+  }
+}

data/app/javascript/controllers/dismissable_controller.js

@@ -0,0 +1,35 @@
+import { Controller } from "@hotwired/stimulus"
+import { useTransition } from "stimulus-use"
+
+export default class extends Controller {
+  static values = {
+    autoDismissTime: Number,
+    hiddenClass: { type: String, default: "hidden" }
+  }
+
+  initialize() {
+    if (this.hasAutoDismissTimeValue) {
+      setTimeout(this.dismiss.bind(this), this.autoDismissTimeValue)
+    }
+  }
+
+  connect() {
+    useTransition(this, {
+      element: this.element,
+      enterActive: "transition ease-out duration-300",
+      enterFrom: "transform opacity-0 scale-95",
+      enterTo: "transform opacity-100 scale-100",
+      leaveActive: "transition ease-in duration-300",
+      leaveFrom: "transform opacity-100 scale-100",
+      leaveTo: "transform opacity-0 scale-95",
+      hiddenClass: this.hiddenClassValue,
+      transitioned: true
+    })
+  }
+
+  dismiss() {
+    this.leave().then(() => {
+      this.element.remove()
+    })
+  }
+}

data/app/javascript/controllers/dropdown_controller.js

@@ -0,0 +1,59 @@
+import { Controller } from "@hotwired/stimulus"
+import { useTransition } from "stimulus-use"
+import { useFloatingUI } from "mixins/use_floating_ui"
+import { offset, flip, shift } from "@floating-ui/dom"
+
+export default class extends Controller {
+  static targets = ["trigger", "menu"]
+  static values = {
+    placement: { type: String, default: "bottom-start" },
+    shiftPadding: { type: Number, default: 8 },
+    offset: { type: Number, default: 4 }
+  }
+
+  connect() {
+    useTransition(this, {
+      element: this.menuTarget,
+      hiddenClass: "hidden",
+    })
+    this.actualTrigger = this.hasTriggerTarget ? this.triggerTarget : this.element
+
+    useFloatingUI(this, this.actualTrigger, this.menuTarget, this.positioningOptions)
+  }
+
+  toggle() {
+    if (this.menuTarget.classList.contains("hidden")) {
+      this.show()
+    } else {
+      this.hide()
+    }
+  }
+
+  show() {
+    this.enter()
+    this.showWithPositioning()
+  }
+
+  hide(event) {
+    // If event is provided, check if click is outside dropdown
+    if (event && this.element.contains(event.target)) {
+      return
+    }
+
+    this.leave()
+    this.hideWithPositioning()
+  }
+
+  // Private
+
+  get positioningOptions() {
+    return {
+      placement: this.placementValue,
+      middleware: [
+        offset(this.offsetValue),
+        flip(),
+        shift({ padding: this.shiftPaddingValue })
+      ]
+    }
+  }
+}

data/app/javascript/controllers/modal_controller.js

@@ -0,0 +1,45 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["dialog"]
+  static values = { open: Boolean }
+
+  initialize() {
+    this.forceClose = this.forceClose.bind(this)
+  }
+
+  connect() {
+    document.addEventListener("turbo:before-render", this.forceClose)
+
+    if (this.openValue) {
+      this.open()
+    }
+  }
+
+  disconnect() {
+    document.removeEventListener("turbo:before-render", this.forceClose)
+  }
+
+  open() {
+    this.dialogTarget.showModal()
+  }
+
+  close() {
+    this.dialogTarget.setAttribute("closing", "")
+
+    Promise.all(this.dialogTarget.getAnimations().map((animation) => animation.finished)).then(() => {
+      this.dialogTarget.removeAttribute("closing")
+      this.dialogTarget.close()
+    })
+  }
+
+  backdropClose(event) {
+    if (event.target === this.dialogTarget) {
+      this.close()
+    }
+  }
+
+  forceClose() {
+    this.dialogTarget.close()
+  }
+}

data/app/javascript/controllers/tabs_controller.js

@@ -0,0 +1,62 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["tab", "panel"]
+  static values = { active: { type: String, default: "preview" } }
+
+  connect() {
+    this.show()
+  }
+
+  switch(event) {
+    this.activeValue = event.params.tab
+  }
+
+  keydown(event) {
+    const tabs = this.tabTargets
+    const index = tabs.indexOf(event.currentTarget)
+    let newIndex
+
+    switch (event.key) {
+      case "ArrowRight":
+        newIndex = (index + 1) % tabs.length
+        break
+      case "ArrowLeft":
+        newIndex = (index - 1 + tabs.length) % tabs.length
+        break
+      case "Home":
+        newIndex = 0
+        break
+      case "End":
+        newIndex = tabs.length - 1
+        break
+      default:
+        return
+    }
+
+    event.preventDefault()
+    this.activeValue = tabs[newIndex].dataset.tabsTabParam
+    tabs[newIndex].focus()
+  }
+
+  activeValueChanged() {
+    this.show()
+  }
+
+  show() {
+    this.tabTargets.forEach(tab => {
+      const isActive = tab.dataset.tabsTabParam === this.activeValue
+      tab.classList.toggle("bg-gray-900", isActive)
+      tab.classList.toggle("border-gray-900", isActive)
+      tab.classList.toggle("text-white", isActive)
+      tab.classList.toggle("border-transparent", !isActive)
+      tab.setAttribute("aria-selected", isActive)
+      tab.setAttribute("tabindex", isActive ? "0" : "-1")
+    })
+
+    this.panelTargets.forEach(panel => {
+      const isActive = panel.dataset.tab === this.activeValue
+      panel.classList.toggle("hidden", !isActive)
+    })
+  }
+}