shadcn_view_component 0.3.3

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

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Sidebar
+    module Rail
+      # SidebarRail — the thin strip along the panel's edge that toggles it, and
+      # shows a resize cursor while doing so. `tabindex="-1"` is upstream's:
+      # the rail duplicates the trigger, so it is deliberately out of the tab
+      # order (vendor/shadcn/ui/sidebar.tsx:282-305).
+      class Component < ApplicationViewComponent
+        default_tag :button
+        slot_name :"sidebar-rail"
+
+        style do
+          base {
+            "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear " \
+            "group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute " \
+            "after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex " \
+            "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize " \
+            "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize " \
+            "[[data-side=right][data-state=collapsed]_&]:cursor-w-resize " \
+            "group-data-[collapsible=offcanvas]:translate-x-0 " \
+            "group-data-[collapsible=offcanvas]:after:left-full " \
+            "hover:group-data-[collapsible=offcanvas]:bg-sidebar " \
+            "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2 " \
+            "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2"
+          }
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            type: "button",
+            "data-sidebar" => "rail",
+            "aria-label" => shadcn_t("sidebar.toggle"),
+            "tabindex" => "-1",
+            title: shadcn_t("sidebar.toggle"),
+            "data-action" => "click->shadcn--sidebar#toggle"
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Sidebar
+    module Separator
+      # SidebarSeparator — the ported Separator, restamped and tinted to the
+      # sidebar's own border colour.
+      class Component < Shadcn::Separator::Component
+        slot_name :"sidebar-separator"
+
+        EXTRA_CLASSES = "mx-2 w-auto bg-sidebar-border"
+
+        def css_classes(extra = nil)
+          super([ EXTRA_CLASSES, extra ].compact.join(" "))
+        end
+
+        def element_attributes(**defaults)
+          super(**{ "data-sidebar" => "separator" }.merge(defaults))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Sidebar
+    module Trigger
+      # SidebarTrigger — upstream renders a ghost icon Button
+      # (vendor/shadcn/ui/sidebar.tsx:256-280), so this borrows the button's own
+      # compiled variants rather than restating them, as PaginationLink does.
+      class Component < ApplicationViewComponent
+        default_tag :button
+        slot_name :"sidebar-trigger"
+
+        def element_attributes(**defaults)
+          super(**{
+            type: "button",
+            "data-sidebar" => "trigger",
+            "data-shadcn--sidebar-target" => "trigger",
+            "data-action" => "click->shadcn--sidebar#toggle"
+          }.merge(defaults))
+        end
+
+        def css_classes(extra = nil)
+          Button::Component.variant_classes(variant: :ghost, size: :icon, class: [ "size-7", extra ].compact.join(" "))
+        end
+
+        # The label is `sr-only` rather than an `aria-label`: upstream puts it in
+        # the button's content, and a visible-to-screen-readers span survives
+        # translation tooling that an attribute does not.
+        def call
+          render_element(body: safe_join([
+            render(Icon::Component.new("panel-left")),
+            tag.span(shadcn_t("sidebar.toggle"), class: "sr-only"),
+            content
+          ].compact))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/sidebar.rb

@@ -0,0 +1,98 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the Sidebar family that are an element with its two attributes
+  # and a fixed set of classes. Anything with variants, slots or markup of its
+  # own keeps its own `component.rb`.
+  #
+  # This family needs a macro of its own because shadcn stamps a *second*
+  # attribute on every one of its 24 parts — `data-sidebar="header"` beside
+  # `data-slot="sidebar-header"` — and `part` declares a slot, classes and a tag
+  # and deliberately nothing else. Taken literally that meant 23 files of eleven
+  # lines each, which is precisely what `part` was written to remove.
+  #
+  # `sidebar_part` is not `part` widened to take attributes; that was considered
+  # and rejected in decisions/01-architecture.md, on the grounds that it turns a
+  # lookup table into a configuration language. It adds exactly one attribute and
+  # *derives* it: measured across the whole vendored source, `data-sidebar` is
+  # `data-slot` without its `sidebar-` prefix in 21 of 21 cases, no exceptions.
+  # A rule, not a parameter. If upstream ever breaks it, one file changes.
+  module Sidebar
+    extend Parts
+
+    # Declares a part and stamps the derived `data-sidebar` on it. Caller
+    # attributes still win, as they do everywhere else here.
+    def self.sidebar_part(name, slot:, **options)
+      marker = slot.to_s.delete_prefix("sidebar-")
+
+      part(name, slot:, **options).tap do |component|
+        component.define_method(:element_attributes) do |**defaults|
+          super(**{ "data-sidebar" => marker }.merge(defaults))
+        end
+      end
+    end
+
+    sidebar_part :header, slot: "sidebar-header", classes: "flex flex-col gap-2 p-2"
+
+    sidebar_part :footer, slot: "sidebar-footer", classes: "flex flex-col gap-2 p-2"
+
+    sidebar_part :content, slot: "sidebar-content",
+                           classes: "flex min-h-0 flex-1 flex-col gap-2 overflow-auto " \
+                                    "group-data-[collapsible=icon]:overflow-hidden"
+
+    sidebar_part :group, slot: "sidebar-group",
+                 classes: "relative flex w-full min-w-0 flex-col p-2"
+
+    sidebar_part :group_label, slot: "sidebar-group-label",
+                 classes: "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium " \
+                          "text-sidebar-foreground/70 ring-sidebar-ring outline-hidden " \
+                          "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"
+
+    sidebar_part :group_action, slot: "sidebar-group-action", tag: :button,
+                 classes: "absolute top-3.5 right-3 flex aspect-square w-5 items-center " \
+                          "justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring " \
+                          "outline-hidden 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 md:after:hidden " \
+                          "group-data-[collapsible=icon]:hidden"
+
+    sidebar_part :group_content, slot: "sidebar-group-content",
+                 classes: "w-full text-sm"
+
+    sidebar_part :menu, slot: "sidebar-menu", tag: :ul,
+                 classes: "flex w-full min-w-0 flex-col gap-1"
+
+    sidebar_part :menu_item, slot: "sidebar-menu-item", tag: :li,
+                 classes: "group/menu-item relative"
+
+    sidebar_part :menu_badge, slot: "sidebar-menu-badge",
+                 classes: "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center " \
+                          "justify-center rounded-md px-1 text-xs font-medium " \
+                          "text-sidebar-foreground tabular-nums select-none " \
+                          "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"
+
+    sidebar_part :menu_sub, slot: "sidebar-menu-sub", tag: :ul,
+                 classes: "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"
+
+    sidebar_part :menu_sub_item, slot: "sidebar-menu-sub-item", tag: :li,
+                 classes: "group/menu-sub-item relative"
+
+    # The one part upstream stamps with `data-slot` alone, so it takes the plain
+    # macro and must not gain a `data-sidebar`.
+    part :inset, slot: "sidebar-inset", tag: :main,
+                 classes: "relative flex w-full flex-1 flex-col bg-background " \
+                          "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 " \
+                          "md:peer-data-[variant=inset]:rounded-xl " \
+                          "md:peer-data-[variant=inset]:shadow-sm " \
+                          "md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2"
+  end
+end

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

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Skeleton
+    # Port of registry/new-york-v4/ui/skeleton.tsx
+    class Component < ApplicationViewComponent
+      slot_name :skeleton
+
+      style do
+        base { "animate-pulse rounded-md bg-accent" }
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,7 @@
+<div class="flex items-center gap-4">
+  <%= render(Shadcn::Skeleton::Component.new(class: "size-12 rounded-full")) %>
+  <div class="flex flex-col gap-2">
+    <%= render(Shadcn::Skeleton::Component.new(class: "h-4 w-[250px]")) %>
+    <%= render(Shadcn::Skeleton::Component.new(class: "h-4 w-[200px]")) %>
+  </div>
+</div>

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

@@ -0,0 +1,145 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Slider
+    # Port of registry/new-york-v4/ui/slider.tsx, whose behaviour is Radix's
+    # `Slider` — 1,044 lines against shadcn's 63, vendored at
+    # `vendor/radix/ui/slider.tsx`.
+    #
+    # Composes the whole thing, as shadcn's own does: a track holding the filled
+    # range, and one thumb per value. Every position is computed here as well as
+    # in the controller, so the slider is in the right place before any
+    # JavaScript runs — the server knows the values, and a slider that starts at
+    # zero and jumps is worse than one that never moves.
+    class Component < ApplicationViewComponent
+      slot_name :slider
+
+      style do
+        base {
+          "relative flex w-full touch-none items-center select-none " \
+          "data-[disabled]:opacity-50 data-[orientation=vertical]:h-full " \
+          "data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto " \
+          "data-[orientation=vertical]:flex-col"
+        }
+      end
+
+      attr_reader :values, :min, :max, :step, :orientation, :disabled,
+                  :min_steps_between_thumbs, :name, :aria_label
+
+      # `value:` takes a number or a list. Upstream's default when neither
+      # `value` nor `defaultValue` is given is `[min, max]` — two thumbs, which
+      # is surprising until you notice it is what makes the component's own
+      # example a range (slider.tsx:17-24).
+      def initialize(value: nil, min: 0, max: 100, step: 1, orientation: :horizontal,
+                     disabled: false, min_steps_between_thumbs: 0, name: nil,
+                     aria_label: nil, **attributes)
+        @min = min
+        @max = max
+        @step = step
+        @orientation = orientation&.to_sym || :horizontal
+        @disabled = disabled
+        @min_steps_between_thumbs = min_steps_between_thumbs
+        @name = name
+        @aria_label = aria_label
+        @values = Array(value.nil? ? [ min, max ] : value)
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          "data-orientation" => orientation,
+          "data-disabled" => (disabled.presence && ""),
+          "aria-disabled" => (disabled.presence && "true"),
+          "data-controller" => "shadcn--slider",
+          "data-shadcn--slider-min-value" => min,
+          "data-shadcn--slider-max-value" => max,
+          "data-shadcn--slider-step-value" => step,
+          "data-shadcn--slider-orientation-value" => orientation,
+          "data-shadcn--slider-disabled-value" => disabled,
+          "data-shadcn--slider-min-steps-value" => min_steps_between_thumbs,
+          "data-action" => "pointerdown->shadcn--slider#trackDown",
+          # The transform every thumb's wrapper reads. Radix publishes it on the
+          # root so one declaration serves every thumb and the axis is decided
+          # in one place.
+          style: merged_style(
+            "--radix-slider-thumb-transform: #{orientation == :vertical ? 'translateY(50%)' : 'translateX(-50%)'};"
+          )
+        }.compact.merge(defaults))
+      end
+
+      def call
+        render_element(body: safe_join([ track, *thumbs, *inputs ]))
+      end
+
+      private
+
+      def percent_of(value)
+        return 0 if max == min
+
+        ((value.to_f - min) / (max - min) * 100).clamp(0, 100)
+      end
+
+      # A single-thumb slider fills from the start of the scale, not from its own
+      # value — otherwise the fill has zero width and there is nothing to see.
+      # Radix's rule: `valuesCount > 1 ? Math.min(...percentages) : 0`
+      # (slider.tsx:592).
+      def range_start
+        values.size > 1 ? percent_of(values.min) : 0
+      end
+
+      def track
+        render(Shadcn::Slider::Track::Component.new(orientation:)) do
+          render(Shadcn::Slider::Range::Component.new(
+            orientation:,
+            start_percent: range_start,
+            end_percent: percent_of(values.max)
+          ))
+        end
+      end
+
+      # A bare wrapper carries the position so the thumb itself can keep a
+      # transition on colour alone. `calc(P% - 8px)` is the flat half of Radix's
+      # `getThumbInBoundsOffset` (slider.tsx:908): the exact version slides the
+      # correction from +half to −half across the track so the thumb stays
+      # inside at both ends, and the controller applies that once it knows the
+      # thumb's measured width.
+      def thumbs
+        values.each_with_index.map do |value, index|
+          tag.span(
+            render(Shadcn::Slider::Thumb::Component.new(
+              orientation:, value:, min:, max:, disabled:, index:,
+              "aria-label": label_for(index)
+            )),
+            style: "transform: var(--radix-slider-thumb-transform); position: absolute; " \
+                   "#{orientation == :vertical ? 'bottom' : 'left'}: calc(#{percent_of(value)}% - 8px);",
+            "data-shadcn--slider-target": "wrapper"
+          )
+        end
+      end
+
+      # A thumb is a `role="slider"`, and a role does not take its name from the
+      # markup around it — the same trap Select, Checkbox and Switch fall into
+      # here, and axe fails the page without one. `aria_label:` takes a string
+      # or one per thumb, because a two-handled range is two controls and
+      # "Price" twice is not a name for either of them.
+      def label_for(index)
+        return nil if aria_label.blank?
+
+        aria_label.is_a?(Array) ? aria_label[index] : aria_label
+      end
+
+      # What a Rails form actually submits. Radix renders these too — shadcn's
+      # file does not, because in React the value is state rather than markup.
+      def inputs
+        return [] if name.blank?
+
+        values.map do |value|
+          tag.input(
+            type: "hidden", name: values.size > 1 ? "#{name}[]" : name, value:,
+            "data-shadcn--slider-target": "input"
+          )
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Slider
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Vertical".
+      def vertical
+        render_with_template
+      end
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+<%# Three, because the component behaves differently in each.
+
+    One thumb is the ordinary case. Two is what upstream's own default gives
+    you when you pass no value at all — `[min, max]` — and is where
+    `min_steps_between_thumbs` and "which thumb does a press move" start to
+    mean something. The third is disabled, which is a state and not a variant:
+    the root carries `data-disabled` and the thumbs leave the tab order. %>
+<div class="flex w-[420px] flex-col gap-8">
+  <%= render(Shadcn::Slider::Component.new(value: 50, name: "volume", aria_label: "Volume")) %>
+
+  <%= render(Shadcn::Slider::Component.new(
+        value: [ 25, 75 ], min_steps_between_thumbs: 1, name: "range",
+        aria_label: [ "Minimum price", "Maximum price" ]
+      )) %>
+
+  <%= render(Shadcn::Slider::Component.new(value: 30, disabled: true, aria_label: "Brightness")) %>
+</div>

data/app/components/shadcn/slider/previews/vertical.html.erb

@@ -0,0 +1,7 @@
+<%# Upstream's "Vertical". The orientation is the root's argument and the
+    thumbs' arrow keys follow it, so Up and Down move a vertical slider where
+    Left and Right move a horizontal one. %>
+<div class="flex h-56 items-start gap-10">
+  <%= render(Shadcn::Slider::Component.new(value: 40, orientation: :vertical, class: "h-48", aria_label: "Volume")) %>
+  <%= render(Shadcn::Slider::Component.new(value: [ 20, 80 ], orientation: :vertical, class: "h-48", aria_label: [ "Lowest", "Highest" ])) %>
+</div>

data/app/components/shadcn/slider/range/component.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Slider
+    module Range
+      # The filled part of the groove, between the lowest and highest thumb.
+      # Two inline percentages rather than a width, which is Radix's own
+      # (measured: `left:25%;right:50%` for values 25 and 50) and is what makes
+      # a two-thumb range one element instead of two.
+      class Component < ApplicationViewComponent
+        slot_name :"slider-range"
+
+        style do
+          base {
+            "absolute bg-primary data-[orientation=horizontal]:h-full " \
+            "data-[orientation=vertical]:w-full"
+          }
+        end
+
+        attr_reader :orientation, :start_percent, :end_percent
+
+        def initialize(orientation: :horizontal, start_percent: 0, end_percent: 100, **attributes)
+          @orientation = orientation
+          @start_percent = start_percent
+          @end_percent = end_percent
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            "data-orientation" => orientation,
+            "data-shadcn--slider-target" => "range",
+            style: merged_style(edges)
+          }.merge(defaults))
+        end
+
+        private
+
+        # Vertical sliders fill from the bottom, so the pair of edges changes
+        # with the axis rather than the numbers doing.
+        def edges
+          if orientation.to_sym == :vertical
+            "bottom: #{start_percent}%; top: #{100 - end_percent}%;"
+          else
+            "left: #{start_percent}%; right: #{100 - end_percent}%;"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/slider/thumb/component.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Slider
+    module Thumb
+      # The handle, and the only focusable thing in the component: `role="slider"`
+      # with its own `aria-valuenow`, so a two-thumb range is two controls rather
+      # than one with two numbers.
+      #
+      # Positioning lives on a wrapper the root renders, not here — Radix does
+      # the same, and it is what lets the thumb keep `transition-[color,box-shadow]`
+      # without the position transitioning too.
+      class Component < ApplicationViewComponent
+        default_tag :span
+        slot_name :"slider-thumb"
+
+        style do
+          base {
+            "block size-4 shrink-0 rounded-full border border-primary bg-white " \
+            "shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 " \
+            "focus-visible:ring-4 focus-visible:outline-hidden " \
+            "disabled:pointer-events-none disabled:opacity-50"
+          }
+        end
+
+        attr_reader :orientation, :value, :min, :max, :disabled, :index
+
+        def initialize(orientation: :horizontal, value: 0, min: 0, max: 100,
+                       disabled: false, index: 0, **attributes)
+          @orientation = orientation
+          @value = value
+          @min = min
+          @max = max
+          @disabled = disabled
+          @index = index
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            role: "slider",
+            tabindex: disabled ? -1 : 0,
+            "aria-valuemin" => min,
+            "aria-valuemax" => max,
+            "aria-valuenow" => value,
+            "aria-orientation" => orientation,
+            "aria-disabled" => (disabled.presence && "true"),
+            "data-orientation" => orientation,
+            "data-index" => index,
+            "data-shadcn--slider-target" => "thumb",
+            "data-action" => "keydown->shadcn--slider#keydown " \
+                             "pointerdown->shadcn--slider#thumbDown"
+          }.compact.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/slider/track/component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Slider
+    module Track
+      # The groove. Its own file only for `data-orientation`, which every part
+      # of this family carries and which `part` does not do.
+      class Component < ApplicationViewComponent
+        slot_name :"slider-track"
+
+        style do
+          base {
+            "relative grow overflow-hidden rounded-full bg-muted " \
+            "data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full " \
+            "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+          }
+        end
+
+        attr_reader :orientation
+
+        def initialize(orientation: :horizontal, **attributes)
+          @orientation = orientation
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{ "data-orientation" => orientation }.merge(defaults))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Spinner
+    # Port of registry/new-york-v4/ui/spinner.tsx — the lucide Loader2 icon
+    # with a status role.
+    class Component < Icon::Component
+      def initialize(**attributes)
+        super("loader-2", **attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**{ role: "status", "aria-label" => shadcn_t("spinner.loading") }.merge(defaults))
+      end
+
+      def css_classes(extra = nil)
+        super(ShadcnViewComponent.cn("size-4 animate-spin", extra))
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,7 @@
+<div class="flex items-center gap-4">
+  <%= render(Shadcn::Spinner::Component.new) %>
+  <%= render(Shadcn::Spinner::Component.new(class: "size-8")) %>
+  <%= render(Shadcn::Button::Component.new(disabled: true)) do %>
+    <%= render(Shadcn::Spinner::Component.new) %> Loading
+  <% end %>
+</div>