shadcn-ui 0.0.1

data/app/helpers/components/alert_dialog_helper.rb

@@ -0,0 +1,6 @@
+module Components::AlertDialogHelper
+  def render_alert_dialog(trigger:, label:, description:, continue:, **options)
+    cancel = options[:cancel] || render_button("Cancel", class: "mt-2 sm:mt-0", data: {action: "ui--dialog#close"})
+    render "components/ui/alert_dialog", trigger:, label:, description:, continue:, cancel:, **options
+  end
+end

data/app/helpers/components/alert_helper.rb

@@ -0,0 +1,11 @@
+module Components::AlertHelper
+  def render_alert(title:, description:, variant: :default)
+    alert_classes = case variant.to_sym
+    when :default
+      "[&>svg]:text-foreground bg-background text-foreground"
+    when :error, :danger, :alert, :destructive
+      "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
+    end
+    render "components/ui/alert", title: title, description: description, alert_classes: alert_classes, variant: variant
+  end
+end

data/app/helpers/components/badge_helper.rb

@@ -0,0 +1,20 @@
+module Components::BadgeHelper
+  def render_badge(label = "", data: "", text: "", variant: :default, **options)
+    badge_classes = " inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2  "
+    varianet_classes = case variant.to_sym
+    when :default
+      ComponentsHelper::PRIMARY_CLASSES
+    when :secondary
+      ComponentsHelper::SECONDARY_CLASSES
+    when :error, :danger, :alert, :destructive
+      ComponentsHelper::DESTRUCTIVE_CLASSES
+    when :outline
+      ComponentsHelper::OUTLINE_CLASSES
+    when :ghost
+      ComponentsHelper::GHOST_CLASSES
+    end
+    badge_classes << " #{varianet_classes}"
+    text = label if label.present?
+    render "components/ui/badge", text:, badge_classes:, data:, **options
+  end
+end

data/app/helpers/components/button_helper.rb

@@ -0,0 +1,20 @@
+module Components::ButtonHelper
+  def render_button(label = "", data: "", text: "", variant: :default, as: :button, href: nil, **options)
+    button_classes = " inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 "
+    varianet_classes = case variant.to_sym
+    when :default
+      " bg-primary text-primary-foreground hover:bg-primary/90 "
+    when :secondary
+      " bg-secondary text-secondary-foreground hover:bg-secondary/80 "
+    when :error, :danger, :alert, :destructive
+      " bg-destructive text-destructive-foreground hover:bg-destructive/90 "
+    when :outline
+      "  border border-input bg-background hover:bg-accent hover:text-accent-foreground"
+    when :ghost
+      " hover:bg-accent hover:text-accent-foreground  "
+    end
+    button_classes << " #{varianet_classes} #{options[:class]}"
+    text = label if label.present?
+    render "components/ui/button", text:, button_classes:, as:, href:, data:, **options
+  end
+end

data/app/helpers/components/card_helper.rb

@@ -0,0 +1,5 @@
+module Components::CardHelper
+  def render_card(footer: nil, title: nil, subtitle: nil, body: nil, **options, &block)
+    render "components/ui/card", title: title, subtitle: subtitle, footer: footer, body: (block ? capture(&block) : body), block:, **options
+  end
+end

data/app/helpers/components/checkbox_helper.rb

@@ -0,0 +1,5 @@
+module Components::CheckboxHelper
+  def render_checkbox(label:, name:)
+    render "components/ui/checkbox", name: name, label: label
+  end
+end

data/app/helpers/components/collapsible_helper.rb

@@ -0,0 +1,6 @@
+module Components::CollapsibleHelper
+  def render_collapsible(**options, &block)
+    content = capture(&block) if block
+    render "components/ui/collapsible", content: content, **options
+  end
+end

data/app/helpers/components/dialog_helper.rb

@@ -0,0 +1,14 @@
+module Components::DialogHelper
+  def render_dialog(**options, &block)
+    content = capture(&block) if block
+    render "components/ui/dialog", content: content, **options
+  end
+
+  def dialog_trigger(&block)
+    content_for :dialog_trigger, capture(&block), flush: true
+  end
+
+  def dialog_content(&block)
+    content_for :dialog_content, capture(&block), flush: true
+  end
+end

data/app/helpers/components/dropdown_menu_helper.rb

@@ -0,0 +1,23 @@
+module Components::DropdownMenuHelper
+  def render_dropdown_menu(**options, &block)
+    content = capture(&block) if block
+    render "components/ui/dropdown_menu", content: content, **options
+  end
+
+  def dropdown_menu_trigger(&block)
+    content_for :dropdown_menu_trigger, capture(&block), flush: true
+  end
+
+  def dropdown_menu_label(label = nil, &block)
+    content_for :dropdown_menu_label, (label || capture(&block)), flush: true
+  end
+
+  def dropdown_menu_content(&block)
+    content_for :dropdown_menu_content, capture(&block), flush: true
+  end
+
+  def dropdown_menu_item(label = nil, **options, &block)
+    content = (label || capture(&block))
+    render "components/ui/shared/menu_item", content: content
+  end
+end

data/app/helpers/components/hover_card_helper.rb

@@ -0,0 +1,15 @@
+module Components::HoverCardHelper
+  def render_hover_card(**options, &block)
+    content = capture(&block) if block
+    render "components/ui/hover_card", content: content, **options
+  end
+
+  def hover_card_trigger(&block)
+    content_for :hover_card_trigger, capture(&block), flush: true
+  end
+
+  def hover_card_content(options = {}, &block)
+    content_for :hover_card_content_class, options[:class], flush: true
+    content_for :hover_card_content, capture(&block), flush: true
+  end
+end

data/app/helpers/components/popover_helper.rb

@@ -0,0 +1,15 @@
+module Components::PopoverHelper
+  def render_popover(**options, &block)
+    content = capture(&block) if block
+    render "components/ui/popover", content: content, **options
+  end
+
+  def popover_trigger(&block)
+    content_for :popover_trigger, capture(&block), flush: true
+  end
+
+  def popover_content(options = {}, &block)
+    content_for :popover_content_class, options[:class], flush: true
+    content_for :popover_content, capture(&block), flush: true
+  end
+end

data/app/helpers/components/seperator_helper.rb

@@ -0,0 +1,6 @@
+module Components::SeperatorHelper
+  def render_separator(options = {})
+    options = {class: "shrink-0 bg-border h-[1px] w-full #{options[:class]}"}.reverse_merge(options)
+    content_tag :div, "", options
+  end
+end

data/app/helpers/components/textarea_helper.rb

@@ -0,0 +1,13 @@
+module Components::TextareaHelper
+  def render_textarea(name:, label: false, id: nil, value: nil, **options)
+    options.reverse_merge!(rows: 3, required: false, disabled: false,
+      readonly: false, class: "", label: false, placeholder: "Type here...")
+    render partial: "components/ui/textarea", locals: {
+      label:,
+      name:,
+      value:,
+      id:,
+      options: options
+    }
+  end
+end

data/app/helpers/components/toast_helper.rb

@@ -0,0 +1,5 @@
+module Components::ToastHelper
+  def render_toast(header: nil, description: nil, action: nil, class: nil, data: nil, **options, &block)
+    render "components/ui/toast", header:, description:, action:, class:, data:, options: options
+  end
+end

data/app/helpers/components/toggle_helper.rb

@@ -0,0 +1,6 @@
+module Components::ToggleHelper
+  def render_toggle(label = nil, **options, &block)
+    content = label || capture(&block)
+    render "components/ui/toggle", content: content, **options
+  end
+end

data/app/helpers/components/tooltip_helper.rb

@@ -0,0 +1,15 @@
+module Components::TooltipHelper
+  def render_tooltip(**options, &block)
+    content = capture(&block) if block
+    render "components/ui/tooltip", content: content, **options
+  end
+
+  def tooltip_trigger(&block)
+    content_for :tooltip_trigger, capture(&block), flush: true
+  end
+
+  def tooltip_content(options = {}, &block)
+    content_for :tooltip_content_class, options[:class], flush: true
+    content_for :tooltip_content, capture(&block), flush: true
+  end
+end

data/app/helpers/components_helper.rb

@@ -0,0 +1,7 @@
+module ComponentsHelper
+  PRIMARY_CLASSES = " bg-primary text-primary-foreground hover:bg-primary/80 "
+  SECONDARY_CLASSES = " bg-secondary text-secondary-foreground hover:bg-secondary/80 "
+  OUTLINE_CLASSES = "  border border-input bg-background hover:bg-accent hover:text-accent-foreground "
+  GHOST_CLASSES = " hover:bg-accent hover:text-accent-foreground  "
+  DESTRUCTIVE_CLASSES = " bg-destructive text-destructive-foreground hover:bg-destructive/90 "
+end

data/app/helpers/examples_helper.rb

@@ -0,0 +1,41 @@
+module ExamplesHelper
+  def render_component_header(title:, description:)
+    render "layouts/documentation/component_header", title:, description:
+  end
+
+  def render_example
+    render "layouts/documentation/examples"
+  end
+
+  def render_preview
+    render "layouts/documentation/preview"
+  end
+
+  def render_usage(name)
+    render "examples/components/#{name}/usage"
+  end
+
+  def code_partial(name, language)
+    content_tag :pre, class: "code-sample py-4 px-4", data: {controller: "highlight"} do
+      content_tag :code, class: "language-#{language}" do
+        html_escape(File.read(Rails.root.join("app", "views", "examples", "components", "#{name}.erb")))
+      end
+    end
+  end
+
+  def code_sample(content = "", language:, &block)
+    content_tag :pre, class: "code-sample px-4 my-2 pb-5", data: {controller: "highlight"} do
+      content_tag :code, class: "language-#{language}" do
+        content
+        yield if block
+      end
+    end
+  end
+
+  def inline_code(content = nil, &block)
+    content_tag :code, class: "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono font-semibold" do
+      content || yield(block)
+    end
+  end
+  alias_method :code, :inline_code
+end

data/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/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/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/app/javascript/controllers/highlight_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus";
+import hljs from "highlight.js";
+
+export default class extends Controller {
+  connect() {
+    console.log("hi");
+    hljs.highlightAll();
+  }
+}

data/app/javascript/controllers/index.js

@@ -0,0 +1,11 @@
+// Import and register all your controllers from the importmap under controllers/*
+
+import { application } from "controllers/application"
+
+// Eager load all controllers defined in the import map under controllers/**/*_controller
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)
+
+// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
+// import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
+// lazyLoadControllersFrom("controllers", application)

data/app/javascript/controllers/tabs_controller.js

@@ -0,0 +1,72 @@
+// https://github.com/excid3/tailwindcss-stimulus-components/blob/master/src/tabs.js
+import { Controller } from "@hotwired/stimulus";
+import "@kanety/stimulus-static-actions";
+
+export default class extends Controller {
+  static targets = ["tab", "panel"];
+  static actions = [["tab", "click->change"]];
+
+  connect() {
+    this.activeTabClasses = (this.data.get("activeTab") || "active").split(" ");
+    this.inactiveTabClasses = (this.data.get("inactiveTab") || "inactive").split(" ");
+    if (this.anchor) this.index = this.tabTargets.findIndex((tab) => tab.id === this.anchor);
+    this.showTab();
+  }
+
+  change(event) {
+    // If target specifies an index, use that
+    if (event.currentTarget.dataset.index) {
+      this.index = event.currentTarget.dataset.index;
+
+      // If target specifies an id, use that
+    } else if (event.currentTarget.dataset.id) {
+      this.index = this.tabTargets.findIndex((tab) => tab.id == event.currentTarget.dataset.id);
+
+      // Otherwise, use the index of the current target
+    } else {
+      this.index = this.tabTargets.indexOf(event.currentTarget);
+    }
+
+    window.dispatchEvent(new CustomEvent("tsc:tab-change"));
+  }
+
+  showTab() {
+    this.tabTargets.forEach((tab, index) => {
+      const panel = this.panelTargets[index];
+
+      if (index === this.index) {
+        panel.classList.remove("hidden");
+        tab.classList.remove(...this.inactiveTabClasses);
+        tab.classList.add(...this.activeTabClasses);
+        tab.dataset.state = "active";
+        panel.dataset.state = "active";
+
+        // Update URL with the tab ID if it has one
+        // This will be automatically selected on page load
+        // - Breaks any other anchors
+        // if (tab.id) {
+        //   location.hash = tab.id;
+        // }
+      } else {
+        panel.classList.add("hidden");
+        tab.classList.remove(...this.activeTabClasses);
+        tab.classList.add(...this.inactiveTabClasses);
+        tab.dataset.state = "inactive";
+        panel.dataset.state = "inactive";
+      }
+    });
+  }
+
+  get index() {
+    return parseInt(this.data.get("index") || 0);
+  }
+
+  set index(value) {
+    this.data.set("index", value >= 0 ? value : 0);
+    this.showTab();
+  }
+
+  get anchor() {
+    return document.URL.split("#").length > 1 ? document.URL.split("#")[1] : null;
+  }
+}

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

@@ -0,0 +1,128 @@
+// Inspired by https://github.com/kanety/stimulus-accordion
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  get togglers() {
+    return this.context.bindingObserver.bindings
+      .filter((binding) => binding.action.methodName == "toggle")
+      .map((binding) => binding.action.element);
+  }
+
+  get openedTogglers() {
+    return this.togglers.filter((toggler) => this.isOpened(toggler));
+  }
+
+  get contents() {
+    return this.scope.findAllElements("[data-accordion-id]");
+  }
+
+  connect() {
+    this.init();
+  }
+
+  init() {
+    this.togglers.forEach((toggler) => {
+      let content = this.findContent(toggler);
+      if (this.isOpened(toggler)) {
+        this.show(toggler, content, false);
+      } else {
+        this.hide(toggler, content, false);
+      }
+    });
+  }
+
+  toggle(e) {
+    this.togglers.forEach((toggler) => {
+      if (toggler.contains(e.target)) {
+        if (this.isOpened(toggler)) {
+          this.close(toggler);
+        } else {
+          this.open(toggler);
+        }
+      } else if (this.isOpened(toggler)) {
+        this.close(toggler);
+      }
+    });
+
+    e.preventDefault();
+  }
+
+  open(toggler) {
+    let content = this.findContent(toggler);
+    this.show(toggler, content);
+    this.dispatch("opened", { detail: { toggler: toggler, content: content } });
+  }
+
+  close(toggler) {
+    let content = this.findContent(toggler);
+    this.hide(toggler, content);
+    this.dispatch("closed", { detail: { toggler: toggler, content: content } });
+  }
+
+  show(toggler, content, transition = true) {
+    if (transition) {
+      content.style.height = "0px";
+      content.removeEventListener("transitionend", this.transitionEnd);
+      content.addEventListener("transitionend", this.transitionEnd);
+      setTimeout(() => {
+        content.style.height = content.scrollHeight + "px";
+      });
+    }
+
+    this.toggleClass(toggler, content, true);
+    this.toggleText(toggler, true);
+  }
+
+  hide(toggler, content, transition = true) {
+    if (transition) {
+      content.style.height = content.scrollHeight + "px";
+      content.removeEventListener("transitionend", this.transitionEnd);
+      content.addEventListener("transitionend", this.transitionEnd);
+      setTimeout(() => {
+        content.style.height = "0px";
+      });
+    }
+
+    this.toggleClass(toggler, content, false);
+    this.toggleText(toggler, false);
+  }
+
+  transitionEnd(e) {
+    e.target.style.height = "";
+  }
+
+  toggleClass(toggler, content, opened) {
+    if (opened) {
+      toggler.classList.add("st-accordion__icon--opened");
+      content.classList.add("st-accordion__content--visible");
+      toggler.dataset.state = "open";
+    } else {
+      toggler.classList.remove("st-accordion__icon--opened");
+      content.classList.remove("st-accordion__content--visible");
+      toggler.dataset.state = "closed";
+    }
+  }
+
+  toggleText(toggler, opened) {
+    let text;
+    if (opened) {
+      text = toggler.getAttribute("data-accordion-opened-text-param");
+    } else {
+      text = toggler.getAttribute("data-accordion-closed-text-param");
+    }
+    if (text) toggler.innerHTML = text;
+  }
+
+  isOpened(toggler) {
+    return toggler.matches(".st-accordion__icon--opened");
+  }
+
+  findContent(toggler) {
+    let id = this.getID(toggler);
+    return this.scope.findElement(`[data-accordion-id="${id}"]`);
+  }
+
+  getID(toggler) {
+    return toggler.getAttribute("href").replace(/^#/, "");
+  }
+}

data/app/javascript/controllers/ui/checkbox_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus";
+export default class extends Controller {
+  connect() {
+    this.button = this.element.querySelector("button");
+    this.checkmark = this.button.querySelector("span");
+  }
+
+  toggle() {
+    if (this.checkmark.classList.contains("hidden")) {
+      this.checkmark.classList.remove("hidden");
+      this.button.dataset.state = "checked";
+    } else {
+      this.checkmark.classList.add("hidden");
+      this.button.dataset.state = "unchecked";
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["item"];
+  static classes = ["hidden"];
+
+  connect() {
+    this.class = this.hasHiddenClass ? this.hiddenClass : "hidden";
+  }
+
+  toggle() {
+    this.itemTargets.forEach((item) => {
+      item.classList.toggle(this.class);
+    });
+  }
+
+  show() {
+    this.itemTargets.forEach((item) => {
+      item.classList.remove(this.class);
+    });
+  }
+
+  hide() {
+    this.itemTargets.forEach((item) => {
+      item.classList.add(this.class);
+    });
+  }
+}

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

@@ -0,0 +1,92 @@
+// Inspired by https://github.com/kanety/stimulus-dialog
+import { Controller } from "@hotwired/stimulus";
+import "@kanety/stimulus-static-actions";
+
+export default class extends Controller {
+  static targets = ["dialog", "modal", "focus", "drag", "backdrop", "closeButton"];
+  static actions = [
+    ["element", "keydown@window->closeByKey"],
+    ["modal", "click->closeByModal"],
+    ["closeButton", "click->close"],
+  ];
+
+  initialize() {}
+  connect() {}
+  open(e) {
+    this.openBy(e.target);
+    e.preventDefault();
+  }
+
+  close(e) {
+    this.closeBy(e.target);
+    e.preventDefault();
+  }
+
+  toggle(e) {
+    if (this.isVisible()) {
+      this.closeBy(e.target);
+    } else {
+      this.openBy(e.target);
+    }
+    e.preventDefault();
+  }
+
+  closeByKey(e) {
+    if (e.keyCode == 27) {
+      this.closeBy(e.target);
+      e.preventDefault();
+    }
+  }
+
+  closeByModal(e) {
+    if (!this.dialogTarget.contains(e.target)) {
+      this.closeBy(e.target);
+    }
+  }
+
+  isVisible() {
+    return this.dialogTarget.classList.contains("st-dialog--visible");
+  }
+
+  openBy(target) {
+    this.toggleClass(true);
+
+    if (this.hasFocusTarget) {
+      this.focusTarget.focus();
+    }
+
+    this.dispatch("opened", { detail: { target: target } });
+  }
+
+  closeBy(target) {
+    this.toggleClass(false);
+
+    this.dispatch("closed", { detail: { target: target } });
+  }
+
+  toggleClass(visible) {
+    if (visible) {
+      this.dialogTarget.classList.remove("hidden");
+      this.dialogTarget.dataset.state = "open";
+      if (this.hasBackdropTarget) {
+        this.backdropTarget.classList.remove("hidden");
+        this.backdropTarget.dataset.state = "open";
+      }
+      if (this.hasModalTarget) {
+        this.modalTarget.classList.remove("hidden");
+        this.modalTarget.dataset.state = "open";
+      }
+    } else {
+      this.dialogTarget.classList.add("hidden");
+      this.dialogTarget.dataset.state = "closed";
+      if (this.hasBackdropTarget) {
+        this.backdropTarget.classList.add("hidden");
+        this.backdropTarget.dataset.state = "closed";
+      }
+      if (this.hasModalTarget) {
+        this.modalTarget.classList.add("hidden");
+        this.modalTarget.dataset.state = "closed";
+      }
+    }
+  }
+}