shadcn_view_component 0.3.3

data/app/components/shadcn/select/trigger/component.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Select
+    module Trigger
+      # SelectTrigger
+      class Component < ApplicationViewComponent
+        CHEVRON_CLASSES = "size-4 opacity-50"
+
+        renders_one :value, "Shadcn::Select::Value::Component"
+
+        default_tag :button
+        slot_name :"select-trigger"
+
+        style do
+          base {
+            "flex w-fit items-center justify-between gap-2 rounded-md border border-input " \
+            "bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs " \
+            "transition-[color,box-shadow] outline-none focus-visible:border-ring " \
+            "focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
+            "disabled:cursor-not-allowed disabled:opacity-50 " \
+            "aria-invalid:border-destructive aria-invalid:ring-destructive/20 " \
+            "data-[placeholder]:text-muted-foreground data-[size=default]:h-9 " \
+            "data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 " \
+            "*:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center " \
+            "*:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 " \
+            "dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none " \
+            "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 " \
+            "[&_svg:not([class*='text-'])]:text-muted-foreground"
+          }
+        end
+
+        attr_reader :size, :placeholder, :disabled, :searchable
+
+        def initialize(size: :default, placeholder: true, disabled: false,
+                       searchable: false, **attributes)
+          @size = size&.to_sym || :default
+          @placeholder = placeholder
+          @disabled = disabled
+          @searchable = searchable
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            type: "button",
+            # A searchable select's trigger is a plain button announcing a
+            # listbox popup: the typing happens in the field inside the popover,
+            # not here. shadcn's aria variant emits it that way, and it has the
+            # side benefit that a role-less button can take its accessible name
+            # from its own text, which `role="combobox"` cannot.
+            role: ("combobox" unless searchable),
+            disabled: (true if disabled),
+            "aria-expanded" => "false",
+            "aria-haspopup" => ("listbox" if searchable),
+            "aria-autocomplete" => ("none" unless searchable),
+            "data-size" => size,
+            "data-state" => "closed",
+            "data-placeholder" => (true if placeholder),
+            "data-shadcn--select-target" => "trigger",
+            "data-action" => "click->shadcn--select#toggle " \
+                             "keydown->shadcn--select#triggerKeydown"
+          }.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([ value, content, chevron ].compact))
+        end
+
+        private
+
+        def chevron
+          render(Icon::Component.new("chevron-down", class: CHEVRON_CLASSES))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/select/value/component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Select
+    module Value
+      # SelectValue — the controller writes the chosen item's label in here.
+      class Component < ApplicationViewComponent
+        default_tag :span
+        slot_name :"select-value"
+
+        attr_reader :placeholder
+
+        def initialize(placeholder: nil, **attributes)
+          @placeholder = placeholder
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{ "data-shadcn--select-target" => "value" }.merge(defaults))
+        end
+
+        def call
+          render_element(body: content.presence || placeholder)
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/select.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the Select family that are just an element with a
+  # `data-slot` and a fixed set of classes. Anything with variants, slots or
+  # markup of its own keeps its own `component.rb`.
+  module Select
+    extend Parts
+
+    part :label, slot: "select-label", classes: "px-2 py-1.5 text-xs text-muted-foreground"
+
+    part :separator, slot: "select-separator",
+                     classes: "pointer-events-none -mx-1 my-1 h-px bg-border"
+  end
+end

data/app/components/shadcn/separator/component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Separator
+    # Port of registry/new-york-v4/ui/separator.tsx
+    #
+    # Reproduces Radix's semantics: a decorative separator is `role="none"`,
+    # a meaningful one is `role="separator"` and only advertises
+    # `aria-orientation` when vertical.
+    class Component < ApplicationViewComponent
+      slot_name :separator
+
+      style do
+        base {
+          "shrink-0 bg-border data-[orientation=horizontal]:h-px " \
+          "data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full " \
+          "data-[orientation=vertical]:w-px"
+        }
+      end
+
+      attr_reader :orientation, :decorative
+
+      def initialize(orientation: :horizontal, decorative: true, **attributes)
+        @orientation = orientation.to_sym
+        @decorative = decorative
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        semantics =
+          if decorative
+            { role: "none" }
+          else
+            { role: "separator", "aria-orientation" => (orientation.to_s if orientation == :vertical) }
+          end
+
+        super(**{ "data-orientation" => orientation }.merge(semantics).merge(defaults))
+      end
+    end
+  end
+end

data/app/components/shadcn/separator/preview.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Separator
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/separator/previews/default.html.erb

@@ -0,0 +1,9 @@
+<div class="max-w-sm">
+  <div class="text-sm font-medium">Radix Primitives</div>
+  <%= render(Shadcn::Separator::Component.new(class: "my-4")) %>
+  <div class="flex h-5 items-center gap-4 text-sm">
+    <div>Blog</div>
+    <%= render(Shadcn::Separator::Component.new(orientation: :vertical)) %>
+    <div>Docs</div>
+  </div>
+</div>

data/app/components/shadcn/sheet/component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Sheet
+    # Port of registry/new-york-v4/ui/sheet.tsx — shadcn builds the Sheet on the
+    # very same Radix Dialog primitive, so the port shares its behaviour.
+    class Component < ApplicationViewComponent
+      include Concerns::ModalRoot
+
+      renders_one :trigger, "Shadcn::Sheet::Trigger::Component"
+      renders_one :dialog_content, "Shadcn::Sheet::Content::Component"
+
+      slot_name :sheet
+    end
+  end
+end

data/app/components/shadcn/sheet/content/component.rb

@@ -0,0 +1,98 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Sheet
+    module Content
+      # SheetContent — slides in from one of the four edges.
+      class Component < ApplicationViewComponent
+        CLOSE_CLASSES = "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background " \
+                        "transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring " \
+                        "focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none " \
+                        "data-[state=open]:bg-secondary"
+
+        renders_one :header, "Shadcn::Sheet::Header::Component"
+        renders_one :footer, "Shadcn::Sheet::Footer::Component"
+
+        slot_name :"sheet-content"
+
+        style do
+          base {
+            "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out " \
+            "data-[state=closed]:animate-out data-[state=closed]:duration-300 " \
+            "data-[state=open]:animate-in data-[state=open]:duration-500"
+          }
+
+          variants {
+            side {
+              right {
+                "inset-y-0 right-0 h-full w-3/4 border-l " \
+                "data-[state=closed]:slide-out-to-right " \
+                "data-[state=open]:slide-in-from-right sm:max-w-sm"
+              }
+              left {
+                "inset-y-0 left-0 h-full w-3/4 border-r " \
+                "data-[state=closed]:slide-out-to-left " \
+                "data-[state=open]:slide-in-from-left sm:max-w-sm"
+              }
+              top {
+                "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top " \
+                "data-[state=open]:slide-in-from-top"
+              }
+              bottom {
+                "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom " \
+                "data-[state=open]:slide-in-from-bottom"
+              }
+            }
+          }
+
+          defaults { { side: :right } }
+        end
+
+        attr_reader :side, :show_close_button
+
+        def initialize(side: :right, show_close_button: true, **attributes)
+          @side = side&.to_sym || :right
+          @show_close_button = show_close_button
+          super(**attributes)
+        end
+
+        def style_variants
+          { side: }
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            role: "dialog",
+            "aria-modal" => "true",
+            tabindex: "-1",
+            "data-state" => "closed",
+            hidden: true,
+            "data-shadcn--dialog-target" => "content"
+          }.merge(defaults))
+        end
+
+        def call
+          tag.div("data-slot": "sheet-portal", style: CONTENTS_STYLE) do
+            safe_join([
+              render(Overlay::Component.new),
+              render_element(body: safe_join([ header, content, footer, close_button ].compact))
+            ])
+          end
+        end
+
+        private
+
+        def close_button
+          return unless show_close_button
+
+          render(Close::Component.new(class: CLOSE_CLASSES)) do
+            safe_join([
+              render(Icon::Component.new("x", class: "size-4")),
+              tag.span(shadcn_t("dialog.close"), class: "sr-only")
+            ])
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/sheet/header/component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Sheet
+    module Header
+      # SheetHeader
+      class Component < ApplicationViewComponent
+        renders_one :title, "Shadcn::Sheet::Title::Component"
+        renders_one :description, "Shadcn::Sheet::Description::Component"
+
+        slot_name :"sheet-header"
+
+        style do
+          base { "flex flex-col gap-1.5 p-4" }
+        end
+
+        def call
+          render_element(body: safe_join([ title, description, content ].compact))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/sheet/preview.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Sheet
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "No Close Button".
+      def no_close_button
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/sheet/previews/default.html.erb

@@ -0,0 +1,16 @@
+<div class="flex items-center gap-2">
+  <% %i[right left top bottom].each do |side| %>
+    <%= render(Shadcn::Sheet::Component.new) do |s| %>
+      <% s.with_trigger(class: Shadcn::Button::Component.variant_classes(variant: :outline)) { side.to_s.capitalize } %>
+      <% s.with_dialog_content(side:) do |c| %>
+        <% c.with_header do |h| %>
+          <% h.with_title { "Edit profile" } %>
+          <% h.with_description { "Make changes to your profile here." } %>
+        <% end %>
+        <% c.with_footer do %>
+          <%= render(Shadcn::Sheet::Close::Component.new(class: Shadcn::Button::Component.variant_classes(variant: :outline))) { "Close" } %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/shadcn/sheet/previews/no_close_button.html.erb

@@ -0,0 +1,14 @@
+<%# Upstream's "No Close Button": the corner dismiss left out, so the panel is
+    closed from its own footer, from Escape, or from outside. %>
+<%= render(Shadcn::Sheet::Component.new) do |s| %>
+  <% s.with_trigger(class: Shadcn::Button::Component.variant_classes(variant: :outline)) { "Open" } %>
+  <% s.with_dialog_content(show_close_button: false) do |c| %>
+    <% c.with_header do |h| %>
+      <% h.with_title { "Filters" } %>
+      <% h.with_description { "Narrow the list down." } %>
+    <% end %>
+    <% c.with_footer do %>
+      <%= render(Shadcn::Sheet::Close::Component.new(class: Shadcn::Button::Component.variant_classes(variant: :outline))) { "Done" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/sheet.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the Sheet family that are just an element with a
+  # `data-slot` and a fixed set of classes. Anything with variants, slots or
+  # markup of its own keeps its own `component.rb`.
+  module Sheet
+    extend Parts
+
+    part :close, slot: "sheet-close", from: Dialog::Close::Component
+
+    part :description, tag: :p, slot: "sheet-description", classes: "text-sm text-muted-foreground"
+
+    part :footer, slot: "sheet-footer", classes: "mt-auto flex flex-col gap-2 p-4"
+
+    part :overlay, slot: "sheet-overlay", from: Dialog::Overlay::Component
+
+    part :title, tag: :h2, slot: "sheet-title", classes: "font-semibold text-foreground"
+
+    part :trigger, slot: "sheet-trigger", from: Dialog::Trigger::Component
+  end
+end

data/app/components/shadcn/sidebar/component.rb

@@ -0,0 +1,232 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Sidebar
+    # The panel itself — upstream's `Sidebar` (vendor/shadcn/ui/sidebar.tsx:154),
+    # not its provider, which is `Sidebar::Provider::Component`.
+    #
+    # Upstream renders three different trees here and picks between them while
+    # rendering. Two of those choices are knowable on a server and one is not:
+    #
+    #   collapsible: :none  a bare panel, decided here
+    #   isMobile            a Sheet, decided by `matchMedia` — so not here
+    #
+    # The mobile branch is the controller's, applied to this same DOM without
+    # moving it. See decisions/02-javascript.md.
+    class Component < ApplicationViewComponent
+      slot_name :sidebar
+
+      style do
+        base { "group peer hidden text-sidebar-foreground md:block" }
+      end
+
+      attr_reader :side, :variant, :collapsible
+
+      def initialize(side: :left, variant: :sidebar, collapsible: :offcanvas, **attributes)
+        @side = side&.to_sym || :left
+        @variant = variant&.to_sym || :sidebar
+        @collapsible = collapsible&.to_sym || :offcanvas
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        return super(**defaults) if bare?
+
+        super(**{
+          "data-shadcn--sidebar-target" => "sidebar",
+          "data-state" => "expanded",
+          # Upstream fills this only while collapsed (sidebar.tsx:212) — the
+          # classes match `group-data-[collapsible=offcanvas]:…`, so a value here
+          # while expanded would style an open panel as a closed one. The value
+          # to collapse *to* therefore has to live somewhere else.
+          "data-collapsible" => "",
+          "data-sidebar-collapsible" => collapsible,
+          "data-variant" => variant,
+          "data-side" => side
+        }.merge(defaults))
+      end
+
+      # `collapsible: :none` is a different element with different classes, not
+      # the same one with a flag (sidebar.tsx:166-180).
+      def css_classes(extra = nil)
+        return super if !bare?
+
+        ShadcnViewComponent.cn(
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", extra
+        )
+      end
+
+      def call
+        return render_element(body: content) if bare?
+
+        render_element(body: safe_join([ overlay, gap, container ]))
+      end
+
+      private
+
+      def bare? = collapsible == :none
+
+      # The dimmed backdrop upstream gets for free by rendering a real `Sheet`
+      # below `md` (sidebar.tsx:184). There is no Sheet here — this panel *is*
+      # the sheet — so the element it would have portalled has to be in the
+      # markup, hidden, from the start. It is the gem's own `sheet-overlay`,
+      # classes and all, rather than a new slot: a host styling `sheet-overlay`
+      # should reach this one too.
+      #
+      # `hidden` until the controller opens the sheet, and it stays in the
+      # server's markup on desktop, where nothing ever unhides it. The dialog
+      # target it inherits is cleared: this one answers to the sidebar.
+      def overlay
+        render(
+          Shadcn::Sheet::Overlay::Component.new(
+            "data-shadcn--dialog-target": nil,
+            "data-shadcn--sidebar-target": "overlay"
+          )
+        )
+      end
+
+      def gap
+        tag.div("data-slot": "sidebar-gap", class: gap_classes)
+      end
+
+      def gap_classes
+        floating = "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+        plain = "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+
+        ShadcnViewComponent.cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          inset_like? ? floating : plain,
+          # This element exists to reserve the panel's width in the page's flow.
+          # A sheet overlays the page instead, so on the mobile branch it has to
+          # reserve nothing. The Popover API already takes the panel out of flow
+          # while the sheet is open, which makes this redundant there and load
+          # -bearing everywhere else: `top_layer.js` is feature-detected, and the
+          # fallback leaves the panel in flow.
+          "group-data-[mobile=true]:w-0"
+        )
+      end
+
+      def container
+        tag.div(
+          safe_join([ sheet_header, inner ]),
+          "data-slot": "sidebar-container",
+          # The element that animates, so the controller has to be able to write
+          # `data-state` on it and wait for its animations to settle.
+          "data-shadcn--sidebar-target": "container",
+          # Read by the controller when it turns this panel into a sheet: a
+          # dialog needs a name, and the name has to exist before it is pointed
+          # at.
+          "data-sheet-title" => sheet_title_id,
+          "data-sheet-description" => sheet_description_id,
+          class: container_classes
+        )
+      end
+
+      # The name and the description a Sheet gives the mobile sidebar
+      # (sidebar.tsx:198-201), which upstream renders only in its mobile tree.
+      # There is one tree here, so they are always in the markup and `hidden`
+      # until the controller opens the sheet: `hidden` keeps them out of the
+      # accessibility tree entirely, where `sr-only` alone would have a desktop
+      # screen reader read "Sidebar. Displays the mobile sidebar." in the middle
+      # of a page with no sheet on it.
+      #
+      # The ids are here rather than generated in JavaScript because the
+      # elements are: `aria-labelledby` has to point at something the server
+      # rendered.
+      def sheet_header
+        tag.div(
+          safe_join([
+            tag.h2(shadcn_t("sidebar.title"), id: sheet_title_id, "data-slot": "sheet-title"),
+            tag.p(shadcn_t("sidebar.description"), id: sheet_description_id, "data-slot": "sheet-description")
+          ]),
+          class: "sr-only",
+          hidden: true,
+          "data-slot": "sheet-header",
+          "data-shadcn--sidebar-target": "sheetHeader"
+        )
+      end
+
+      def sheet_title_id = @sheet_title_id ||= "shadcn-sidebar-title-#{SecureRandom.hex(4)}"
+      def sheet_description_id = @sheet_description_id ||= "shadcn-sidebar-description-#{SecureRandom.hex(4)}"
+
+      def container_classes
+        ShadcnViewComponent.cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) " \
+          "transition-[left,right,width] duration-200 ease-linear md:flex",
+          side_classes,
+          padding_classes,
+          # Upstream renders a Sheet below `md` and this panel above it, so its
+          # `hidden … md:flex` is never asked to show anything on a phone. Here
+          # there is one tree and the sheet *is* this element, so the mobile
+          # branch has to turn both of those off. The controller does that for
+          # the panel's own `hidden … md:block`; nothing was doing it for the
+          # container inside, which is why the sheet opened onto an empty strip.
+          #
+          # A `group-data-` variant rather than the inline `display` used on the
+          # panel: both are two-class selectors, so they outrank `md:flex` at
+          # every width without the specificity fight a bare class would lose.
+          "group-data-[mobile=true]:flex group-data-[mobile=true]:w-(--sidebar-width-mobile)",
+          # `z-50` and `shadow-lg` are `sheet-content`'s (sheet.tsx:63), and the
+          # overlay above carries `z-50` too — so the two match upstream's pair
+          # and DOM order decides, which puts the panel over its own backdrop.
+          # The desktop `z-10` would put it under.
+          "group-data-[mobile=true]:z-50 group-data-[mobile=true]:shadow-lg",
+          sheet_animation_classes
+        )
+      end
+
+      # `sheet-content`'s own entrance and exit (sheet.tsx:63-68), keyed the way
+      # upstream keys them: on the element's *own* `data-state`, which the
+      # controller writes only on the mobile branch. On desktop the attribute is
+      # absent, so none of this matches and the panel keeps sliding on the
+      # `transition-[left,right,width]` above instead.
+      #
+      # The panel's `data-state` is a different axis — expanded or collapsed —
+      # which is why this one is on the container rather than up there.
+      def sheet_animation_classes
+        slide =
+          if side == :left
+            "data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left"
+          else
+            "data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right"
+          end
+
+        "data-[state=open]:animate-in data-[state=closed]:animate-out " \
+        "data-[state=open]:duration-500 data-[state=closed]:duration-300 #{slide}"
+      end
+
+      def side_classes
+        if side == :left
+          "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+        else
+          "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]"
+        end
+      end
+
+      def padding_classes
+        if inset_like?
+          "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+        else
+          "group-data-[collapsible=icon]:w-(--sidebar-width-icon) " \
+          "group-data-[side=left]:border-r group-data-[side=right]:border-l"
+        end
+      end
+
+      def inner
+        tag.div(
+          content,
+          "data-sidebar": "sidebar",
+          "data-slot": "sidebar-inner",
+          class: "flex h-full w-full flex-col bg-sidebar " \
+                 "group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border " \
+                 "group-data-[variant=floating]:border-sidebar-border " \
+                 "group-data-[variant=floating]:shadow-sm"
+        )
+      end
+
+      def inset_like? = [ :floating, :inset ].include?(variant)
+    end
+  end
+end

data/app/components/shadcn/sidebar/input/component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Sidebar
+    module Input
+      # SidebarInput — the ported Input under another `data-slot`, with the
+      # sidebar's own sizing on top. Inherit-and-restamp, as ButtonGroupSeparator
+      # does to Separator, so the parent's classes are not restated and cannot
+      # rot.
+      class Component < Shadcn::Input::Component
+        slot_name :"sidebar-input"
+
+        EXTRA_CLASSES = "h-8 w-full bg-background shadow-none"
+
+        def css_classes(extra = nil)
+          super([ EXTRA_CLASSES, extra ].compact.join(" "))
+        end
+
+        def element_attributes(**defaults)
+          super(**{ "data-sidebar" => "input" }.merge(defaults))
+        end
+      end
+    end
+  end
+end