ruby_ui 1.0.1 → 1.1.0

data/lib/ruby_ui/sidebar/sidebar_controller.js

@@ -0,0 +1,67 @@
+import { Controller } from "@hotwired/stimulus";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const State = {
+  EXPANDED: "expanded",
+  COLLAPSED: "collapsed",
+};
+const MOBILE_BREAKPOINT = 768;
+
+export default class extends Controller {
+  static targets = ["sidebar", "mobileSidebar"];
+
+  sidebarTargetConnected() {
+    const { state, collapsibleKind } = this.sidebarTarget.dataset;
+
+    this.open = state === State.EXPANDED;
+    this.collapsibleKind = collapsibleKind;
+  }
+
+  toggle(e) {
+    e.preventDefault();
+
+    if (this.#isMobile()) {
+      this.#openMobileSidebar();
+
+      return;
+    }
+
+    this.open = !this.open;
+    this.onToggle();
+  }
+
+  onToggle() {
+    this.#updateSidebarState();
+    this.#persistSidebarState();
+  }
+
+  #updateSidebarState() {
+    if (!this.hasSidebarTarget) {
+      return;
+    }
+
+    const { dataset } = this.sidebarTarget;
+
+    dataset.state = this.open ? State.EXPANDED : State.COLLAPSED;
+    dataset.collapsible = this.open ? "" : this.collapsibleKind;
+  }
+
+  #persistSidebarState() {
+    document.cookie = `${SIDEBAR_COOKIE_NAME}=${this.open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+  }
+
+  #isMobile() {
+    return window.innerWidth < MOBILE_BREAKPOINT;
+  }
+
+  #openMobileSidebar() {
+    if (!this.hasMobileSidebarTarget) {
+      return;
+    }
+
+    this.mobileSidebarTarget.dispatchEvent(
+      new CustomEvent("ruby--ui-sidebar:open"),
+    );
+  }
+}

data/lib/ruby_ui/sidebar/sidebar_docs.rb

@@ -0,0 +1,176 @@
+# frozen_string_literal: true
+
+class Views::Docs::Sidebar < Views::Base
+  def view_template
+    component = "Sidebar"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Sidebar", description: "A composable, themeable and customizable sidebar component.")
+
+      Heading(level: 2) { "Usage" }
+
+      Alert do
+        info_icon
+        AlertTitle { "Requirements" }
+        AlertDescription { "The sidebar component depends on the following components:" }
+        ul(class: "list-disc list-inside") do
+          li do
+            InlineLink(href: docs_sheet_path, target: "_blank", class: "inline-flex items-center gap-2") do
+              span { "Sheet" }
+              external_icon_link
+            end
+          end
+          li do
+            div(class: "inline-flex items-center gap-2") do
+              InlineLink(href: docs_separator_path, target: "_blank") { "Separator" }
+              external_icon_link
+            end
+          end
+        end
+      end
+
+      render Docs::VisualCodeExample.new(title: "Example", src: "/docs/sidebar/example", context: self) do
+        Views::Docs::Sidebar::Example::CODE
+      end
+
+      render Docs::VisualCodeExample.new(title: "Inset variant", src: "/docs/sidebar/inset", context: self) do
+        Views::Docs::Sidebar::InsetExample::CODE
+      end
+
+      render Docs::VisualCodeExample.new(title: "Dialog variant", context: self) do
+        <<~RUBY
+          Dialog(data: {action: "ruby-ui--dialog:connect->ruby-ui--dialog#open"}) do
+            DialogTrigger do
+              Button { "Open Dialog" }
+            end
+            DialogContent(class: "grid overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]") do
+              SidebarWrapper(class: "items-start") do
+                Sidebar(collapsible: :none, class: "hidden md:flex") do
+                  SidebarContent do
+                    SidebarGroup do
+                      SidebarGroupContent do
+                        SidebarMenu do
+                          SidebarMenuItem do
+                            SidebarMenuButton(as: :a, href: "#") do
+                              search_icon()
+                              span { "Search" }
+                            end
+                          end
+                          SidebarMenuItem do
+                            SidebarMenuButton(as: :a, href: "#", active: true) do
+                              home_icon()
+                              span { "Home" }
+                            end
+                          end
+                          SidebarMenuItem do
+                            SidebarMenuButton(as: :a, href: "#") do
+                              inbox_icon()
+                              span { "Inbox" }
+                            end
+                          end
+                        end
+                      end
+                    end
+                  end
+                end
+                main(class: "flex h-[480px] flex-1 flex-col overflow-hidden") do
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+
+  def search_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      stroke_width: "2",
+      stroke_linecap: "round",
+      stroke_linejoin: "round",
+      class: "lucide lucide-search"
+    ) do |s|
+      s.circle(cx: "11", cy: "11", r: "8")
+      s.path(d: "M21 21L16.7 16.7")
+    end
+  end
+
+  def home_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      stroke_width: "2",
+      stroke_linecap: "round",
+      stroke_linejoin: "round",
+      class: "lucide lucide-house"
+    ) do |s|
+      s.path(d: "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8")
+      s.path(d: "M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z")
+    end
+  end
+
+  def inbox_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      stroke_width: "2",
+      stroke_linecap: "round",
+      stroke_linejoin: "round",
+      class: "lucide lucide-inbox"
+    ) do |s|
+      s.polyline(points: "22 12 16 12 14 15 10 15 8 12 2 12")
+      s.path(d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z")
+    end
+  end
+
+  def external_icon_link
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      stroke_width: "2",
+      stroke_linecap: "round",
+      stroke_linejoin: "round",
+      class: "lucide lucide-external-link-icon lucide-external-link size-3"
+    ) do |s|
+      s.path(d: "M15 3h6v6")
+      s.path(d: "M10 14 21 3")
+      s.path(d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6")
+    end
+  end
+
+  def info_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      viewbox: "0 0 24 24",
+      fill: "currentColor",
+      class: "w-5 h-5"
+    ) do |s|
+      s.path(
+        fill_rule: "evenodd",
+        d:
+          "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z",
+        clip_rule: "evenodd"
+      )
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_footer.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarFooter < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex flex-col gap-2 p-2",
+        data: {
+          sidebar: "footer"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_group.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarGroup < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "relative flex w-full min-w-0 flex-col p-2",
+        data: {
+          sidebar: "group"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_group_action.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarGroupAction < Base
+    def initialize(as: :button, **attrs)
+      @as = as
+      super(**attrs)
+    end
+
+    def view_template(&)
+      tag(@as, **attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: [
+          "absolute right-3 top-3.5 flex aspect-square w-5 items-center",
+          "justify-center rounded-md p-0 text-sidebar-foreground",
+          "outline-none ring-sidebar-ring transition-transform",
+          "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+          "focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          "after:absolute after:-inset-2 after:md:hidden",
+          "group-data-[collapsible=icon]:hidden"
+        ],
+        data: {
+          sidebar: "group-action"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_group_content.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarGroupContent < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "w-full text-sm",
+        data: {
+          sidebar: "group-content"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_group_label.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarGroupLabel < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: [
+          "flex h-8 shrink-0 items-center rounded-md px-2 text-xs",
+          "font-medium text-sidebar-foreground/70 outline-none",
+          "ring-sidebar-ring transition-[margin,opacity] duration-200",
+          "ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0"
+        ],
+        data: {
+          sidebar: "group-label"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_header.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarHeader < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex flex-col gap-2 p-2",
+        data: {
+          sidebar: "header"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_input.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarInput < Base
+    def view_template(&)
+      Input(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        data: {
+          sidebar: "input"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_inset.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarInset < Base
+    def view_template(&)
+      main(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: [
+          "relative flex w-full flex-1 flex-col bg-background",
+          "md:peer-data-[variant=inset]:m-2",
+          "md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2",
+          "md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl",
+          "md:peer-data-[variant=inset]:shadow"
+        ]
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_menu.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarMenu < Base
+    def view_template(&)
+      ul(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex w-full min-w-0 flex-col gap-1",
+        data: {
+          sidebar: "menu"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_menu_action.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarMenuAction < Base
+    def initialize(as: :button, show_on_hover: false, **attrs)
+      @as = as
+      super(**attrs)
+    end
+
+    def view_template(&)
+      tag(@as, **attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: [
+          "absolute right-1 top-1.5 flex aspect-square w-5 items-center",
+          "justify-center rounded-md p-0 text-sidebar-foreground outline-none",
+          "ring-sidebar-ring transition-transform hover:bg-sidebar-accent",
+          "hover:text-sidebar-accent-foreground focus-visible:ring-2",
+          "peer-hover/menu-button:text-sidebar-accent-foreground",
+          "[&>svg]:size-4 [&>svg]:shrink-0",
+          "after:absolute after:-inset-2 after:md:hidden",
+          "peer-data-[size=sm]/menu-button:top-1",
+          "peer-data-[size=default]/menu-button:top-1.5",
+          "peer-data-[size=lg]/menu-button:top-2.5",
+          "group-data-[collapsible=icon]:hidden",
+          show_on_hover_classes
+        ],
+        data: {
+          sidebar: "menu-action"
+        }
+      }
+    end
+
+    def show_on_hover_classes
+      return unless @show_on_hover
+
+      [
+        "group-focus-within/menu-item:opacity-100",
+        "group-hover/menu-item:opacity-100 data-[state=open]:opacity-100",
+        "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0"
+      ].join(" ")
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_menu_badge.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarMenuBadge < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: [
+          "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none",
+          "items-center justify-center rounded-md px-1 text-xs font-medium",
+          "tabular-nums text-sidebar-foreground",
+          "peer-hover/menu-button:text-sidebar-accent-foreground",
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+          "peer-data-[size=sm]/menu-button:top-1",
+          "peer-data-[size=default]/menu-button:top-1.5",
+          "peer-data-[size=lg]/menu-button:top-2.5",
+          "group-data-[collapsible=icon]:hidden"
+        ],
+        data: {
+          sidebar: "menu-badge"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_menu_button.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarMenuButton < Base
+    VARIANT_CLASSES = {
+      default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+      outline:
+        "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
+    }.freeze
+
+    SIZE_CLASSES = {
+      default: "h-8 text-sm",
+      sm: "h-7 text-xs",
+      lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0"
+    }.freeze
+
+    def initialize(as: :button, variant: :default, size: :default, active: false, **attrs)
+      raise ArgumentError, "Invalid variant: #{variant}" unless VARIANT_CLASSES.key?(variant)
+      raise ArgumentError, "Invalid size: #{size}" unless SIZE_CLASSES.key?(size)
+
+      @as = as
+      @variant = variant
+      @size = size
+      @active = active
+      super(**attrs)
+    end
+
+    def view_template(&)
+      tag(@as, **attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: [
+          "peer/menu-button flex w-full items-center gap-2 overflow-hidden",
+          "rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring",
+          "transition-[width,height,padding] hover:bg-sidebar-accent",
+          "hover:text-sidebar-accent-foreground focus-visible:ring-2",
+          "active:bg-sidebar-accent active:text-sidebar-accent-foreground",
+          "disabled:pointer-events-none disabled:opacity-50",
+          "group-has-[[data-sidebar=menu-action]]/menu-item:pr-8",
+          "aria-disabled:pointer-events-none aria-disabled:opacity-50",
+          "data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium",
+          "data-[active=true]:text-sidebar-accent-foreground",
+          "data-[state=open]:hover:bg-sidebar-accent",
+          "data-[state=open]:hover:text-sidebar-accent-foreground",
+          "group-data-[collapsible=icon]:!size-8",
+          "group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate",
+          "[&>svg]:size-4 [&>svg]:shrink-0",
+          VARIANT_CLASSES[@variant],
+          SIZE_CLASSES[@size]
+        ],
+        data: {
+          sidebar: "menu-button",
+          size: @size,
+          active: @active.to_s
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_menu_item.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarMenuItem < Base
+    def view_template(&)
+      ul(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "group/menu-item relative",
+        data: {
+          sidebar: "menu-item"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_menu_skeleton.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarMenuSkeleton < Base
+    def initialize(show_icon: false, **attrs)
+      @show_icon = show_icon
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs) do
+        Skeleton(class: "size-4 rounded-md", data: {sidebar: "menu-skeleton-icon"}) if @show_icon
+        Skeleton(
+          class: "h-4 max-w-[var(--skeleton-width)] flex-1",
+          data: {sidebar: "menu-skeleton-text"},
+          style: {"--skeleton-width" => "#{skeleton_width}%"}
+        )
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex h-8 items-center gap-2 rounded-md px-2",
+        data: {
+          sidebar: "menu-skeleton"
+        }
+      }
+    end
+
+    def skeleton_width
+      @_skeleton_width ||= rand(50..89)
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_menu_sub.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarMenuSub < Base
+    def view_template(&)
+      ul(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: [
+          "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l",
+          "border-sidebar-border px-2.5 py-0.5",
+          "group-data-[collapsible=icon]:hidden"
+        ],
+        data: {
+          sidebar: "menu-sub"
+        }
+      }
+    end
+  end
+end