shadcn_view_component 0.3.3

data/app/components/shadcn/pagination/link/component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Pagination
+    module Link
+      # PaginationLink — styled with the button's own variants, like the TSX
+      # does via `buttonVariants({ variant: isActive ? "outline" : "ghost", size })`.
+      class Component < ApplicationViewComponent
+        default_tag :a
+        slot_name :"pagination-link"
+
+        attr_reader :active, :size
+
+        def initialize(active: false, size: :icon, **attributes)
+          @active = active
+          @size = size&.to_sym || :icon
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            "aria-current" => ("page" if active),
+            "data-active" => active
+          }.merge(defaults))
+        end
+
+        def css_classes(extra = nil)
+          Button::Component.variant_classes(
+            variant: active ? :outline : :ghost,
+            size:,
+            class: extra
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/pagination/next/component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Pagination
+    module Next
+      # PaginationNext
+      class Component < Link::Component
+        EXTRA_CLASSES = "gap-1 px-2.5 sm:pr-2.5"
+
+        def initialize(**attributes)
+          super(size: :default, **attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{ "aria-label" => shadcn_t("pagination.go_to_next") }.merge(defaults))
+        end
+
+        def css_classes(extra = nil)
+          super(ShadcnViewComponent.cn(EXTRA_CLASSES, extra))
+        end
+
+        def call
+          render_element(body: safe_join([
+            tag.span(shadcn_t("pagination.next"), class: "hidden sm:block"),
+            render(Icon::Component.new("chevron-right"))
+          ]))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Pagination
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Simple" and "Icons Only".
+      def simple
+        render_with_template
+      end
+    end
+  end
+end

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

@@ -0,0 +1,18 @@
+<%= render(Shadcn::Pagination::Component.new) do %>
+  <%= render(Shadcn::Pagination::Content::Component.new) do %>
+    <%= render(Shadcn::Pagination::Item::Component.new) do %>
+      <%= render(Shadcn::Pagination::Previous::Component.new(href: "#")) %>
+    <% end %>
+    <% [["1", false], ["2", true], ["3", false]].each do |label, active| %>
+      <%= render(Shadcn::Pagination::Item::Component.new) do %>
+        <%= render(Shadcn::Pagination::Link::Component.new(href: "#", active:)) { label } %>
+      <% end %>
+    <% end %>
+    <%= render(Shadcn::Pagination::Item::Component.new) do %>
+      <%= render(Shadcn::Pagination::Ellipsis::Component.new) %>
+    <% end %>
+    <%= render(Shadcn::Pagination::Item::Component.new) do %>
+      <%= render(Shadcn::Pagination::Next::Component.new(href: "#")) %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/pagination/previews/simple.html.erb

@@ -0,0 +1,39 @@
+<%# Upstream's "Simple", and what its "Icons Only" actually is.
+
+    `Previous` and `Next` render a chevron and a word, and the word carries
+    `hidden sm:block` (pagination.tsx) — so the icons-only example is the same
+    component below the `sm` breakpoint rather than a variant to ask for.
+    Narrow the window and the second row here becomes it. Neither component
+    takes content: the label is theirs, translated, which is also where the
+    accessible name comes from. %>
+<div class="flex flex-col items-center gap-8">
+  <%= render(Shadcn::Pagination::Component.new) do %>
+    <%= render(Shadcn::Pagination::Content::Component.new) do %>
+      <%= render(Shadcn::Pagination::Item::Component.new) do %>
+        <%= render(Shadcn::Pagination::Previous::Component.new(href: "#")) %>
+      <% end %>
+      <%= render(Shadcn::Pagination::Item::Component.new) do %>
+        <span class="px-4 text-sm text-muted-foreground">Page 2 of 10</span>
+      <% end %>
+      <%= render(Shadcn::Pagination::Item::Component.new) do %>
+        <%= render(Shadcn::Pagination::Next::Component.new(href: "#")) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= render(Shadcn::Pagination::Component.new) do %>
+    <%= render(Shadcn::Pagination::Content::Component.new) do %>
+      <%= render(Shadcn::Pagination::Item::Component.new) do %>
+        <%= render(Shadcn::Pagination::Previous::Component.new(href: "#")) %>
+      <% end %>
+      <% [1, 2, 3].each do |page| %>
+        <%= render(Shadcn::Pagination::Item::Component.new) do %>
+          <%= render(Shadcn::Pagination::Link::Component.new(href: "#", active: page == 2)) { page.to_s } %>
+        <% end %>
+      <% end %>
+      <%= render(Shadcn::Pagination::Item::Component.new) do %>
+        <%= render(Shadcn::Pagination::Next::Component.new(href: "#")) %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/shadcn/pagination/previous/component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Pagination
+    module Previous
+      # PaginationPrevious
+      class Component < Link::Component
+        EXTRA_CLASSES = "gap-1 px-2.5 sm:pl-2.5"
+
+        def initialize(**attributes)
+          super(size: :default, **attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{ "aria-label" => shadcn_t("pagination.go_to_previous") }.merge(defaults))
+        end
+
+        def css_classes(extra = nil)
+          super(ShadcnViewComponent.cn(EXTRA_CLASSES, extra))
+        end
+
+        def call
+          render_element(body: safe_join([
+            render(Icon::Component.new("chevron-left")),
+            tag.span(shadcn_t("pagination.previous"), class: "hidden sm:block")
+          ]))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/pagination.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the Pagination 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 Pagination
+    extend Parts
+
+    part :content, tag: :ul, slot: "pagination-content", classes: "flex flex-row items-center gap-1"
+
+    part :item, tag: :li, slot: "pagination-item"
+  end
+end

data/app/components/shadcn/parts.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Declares the parts of a family that are nothing but an element carrying a
+  # `data-slot` and a fixed set of classes.
+  #
+  # Most of shadcn's sub-components are exactly that — `CardTitle` is a `<div>`
+  # with two classes — and writing each as its own file meant thirteen lines of
+  # module nesting around one string. Declared on the family module instead, a
+  # whole family reads at a glance, and the class strings stay literal, which is
+  # what both the parity spec and Tailwind's scanner need.
+  #
+  # See `card.rb` for a worked example.
+  #
+  # Parts with behaviour — variants, slots, extra markup, computed attributes —
+  # stay as their own `component.rb`. This is only for the ones that have none.
+  module Parts
+    # @param name [Symbol] the part, snake_case; `:group_count` becomes
+    #   `GroupCount::Component`
+    # @param slot [String] the `data-slot` shadcn stamps on it
+    # @param classes [String] its base classes
+    # @param tag [Symbol] the element, when it is not a `<div>`
+    # @param from [Class] a part to specialise instead of building a new one,
+    #   for the families shadcn layers on another (Sheet on Dialog)
+    def part(name, slot:, classes: nil, tag: nil, from: ApplicationViewComponent)
+      namespace = const_set(name.to_s.camelize, Module.new)
+      component = namespace.const_set(:Component, Class.new(from))
+
+      # Configured only after `const_set` has named it: StyleVariants derives the
+      # style set's name from the class name, and an anonymous class has none.
+      component.default_tag(tag) if tag
+      component.slot_name(slot)
+      component.style { base { classes } } if classes
+
+      component
+    end
+  end
+end

data/app/components/shadcn/popover/anchor/component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Popover
+    module Anchor
+      # PopoverAnchor — positions the content against something other than the
+      # trigger.
+      class Component < ApplicationViewComponent
+        slot_name :"popover-anchor"
+
+        def element_attributes(**defaults)
+          super(**{ "data-shadcn--popover-target" => "anchor" }.merge(defaults))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Popover
+    # Port of registry/new-york-v4/ui/popover.tsx
+    class Component < ApplicationViewComponent
+      renders_one :trigger, "Shadcn::Popover::Trigger::Component"
+      renders_one :anchor, "Shadcn::Popover::Anchor::Component"
+      renders_one :popover_content, "Shadcn::Popover::Content::Component"
+
+      slot_name :popover
+
+      attr_reader :open, :side, :align, :side_offset, :align_offset
+
+      def initialize(open: false, side: :bottom, align: :center, side_offset: 4,
+                     align_offset: 0, **attributes)
+        @open = open
+        @side = side&.to_sym || :bottom
+        @align = align&.to_sym || :center
+        @side_offset = side_offset
+        @align_offset = align_offset
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          style: merged_style(CONTENTS_STYLE),
+          "data-controller" => "shadcn--popover",
+          "data-shadcn--popover-open-value" => open,
+          "data-shadcn--popover-side-value" => side,
+          "data-shadcn--popover-align-value" => align,
+          "data-shadcn--popover-side-offset-value" => side_offset,
+          "data-shadcn--popover-align-offset-value" => align_offset
+        }.merge(defaults))
+      end
+
+      def call
+        render_element(body: safe_join([ anchor, trigger, popover_content, content ].compact))
+      end
+    end
+  end
+end

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

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Popover
+    module Content
+      # PopoverContent
+      class Component < ApplicationViewComponent
+        renders_one :header, "Shadcn::Popover::Header::Component"
+
+        slot_name :"popover-content"
+
+        style do
+          base {
+            "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border " \
+            "bg-popover p-4 text-popover-foreground shadow-md outline-hidden " \
+            "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 " \
+            "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 " \
+            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 " \
+            "data-[state=closed]:zoom-out-95 data-[state=open]:animate-in " \
+            "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
+          }
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            role: "dialog",
+            tabindex: "-1",
+            "data-state" => "closed",
+            hidden: true,
+            "data-shadcn--popover-target" => "content"
+          }.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([ header, content ].compact))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Popover
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # The case the layering has to survive: an ancestor that creates a
+      # stacking context.
+      def inside_stacking_context
+        render_with_template
+      end
+
+      # The other ancestor hazard: `transform`, `filter` and `contain` each
+      # become the containing block for a fixed descendant.
+      def inside_containing_block
+        render_with_template
+      end
+
+      # Upstream's "Align".
+      def align
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/popover/previews/align.html.erb

@@ -0,0 +1,13 @@
+<%# Upstream's "Align": the panel is placed against the trigger's start, centre
+    or end, which is the argument that decides where a menu-like popover lines
+    up under a narrow button. %>
+<div class="flex items-center gap-2">
+  <% %i[start center end].each do |align| %>
+    <%= render(Shadcn::Popover::Component.new) do |p| %>
+      <% p.with_trigger(class: Shadcn::Button::Component.variant_classes(variant: :outline)) { align.to_s.capitalize } %>
+      <% p.with_popover_content(align:, class: "w-56") do %>
+        <p class="text-sm text-muted-foreground">Aligned to the <%= align %>.</p>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,9 @@
+<%= render(Shadcn::Popover::Component.new) do |p| %>
+  <% p.with_trigger(class: Shadcn::Button::Component.variant_classes(variant: :outline)) { "Open popover" } %>
+  <% p.with_popover_content do |c| %>
+    <% c.with_header do |h| %>
+      <%= render(Shadcn::Popover::Title::Component.new) { "Dimensions" } %>
+      <%= render(Shadcn::Popover::Description::Component.new) { "Set the dimensions for the layer." } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/popover/previews/inside_containing_block.html.erb

@@ -0,0 +1,41 @@
+<%# The other ancestor hazard, and a different one from
+    `inside_stacking_context`: that preview is about what *paints over* the
+    layer, this is about *where the layer lands*.
+
+    `transform`, `filter` and `contain: paint` each make an element the
+    containing block for `position: fixed` descendants, so a fixed layer inside
+    one is positioned against that box rather than the viewport. The Popover API
+    is supposed to lift the content into the top layer and out of reach of all
+    three; whether it does is what the spec measures rather than assumes.
+
+    Three ancestors rather than one because the three properties reach the same
+    result by different routes in the spec, and browsers have shipped them at
+    different times. %>
+
+<div class="flex flex-col gap-6">
+  <% {
+       "transform" => "[transform:translateZ(0)]",
+       "filter" => "[filter:blur(0px)]",
+       "contain" => "[contain:paint]"
+     }.each do |name, ancestor| %>
+    <div class="<%= ancestor %> rounded-lg border p-4" data-testid="ancestor-<%= name %>">
+      <span class="mr-3 text-sm text-muted-foreground">Inside <%= name %></span>
+
+      <%= render(Shadcn::Popover::Component.new) do |popover| %>
+        <% popover.with_trigger(
+             class: Shadcn::Button::Component.variant_classes(variant: :outline),
+             "data-testid": "trigger-#{name}"
+           ) { "Open popover" } %>
+        <% popover.with_popover_content("data-testid": "content-#{name}") do |content| %>
+          <% content.with_header do %>
+            <%= render(Shadcn::Popover::Title::Component.new) { "Where am I?" } %>
+            <%= render(Shadcn::Popover::Description::Component.new) do %>
+              If this is not under its trigger, the ancestor became the
+              containing block.
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/components/shadcn/popover/previews/inside_stacking_context.html.erb

@@ -0,0 +1,30 @@
+<%# A floating layer inside an ancestor that creates a stacking context.
+
+    `position: fixed` escapes overflow clipping but never escapes a stacking
+    context, so the content's `z-50` is scoped to the header's `z-10` and the
+    section below — `z-20` — paints over it. This is ordinary Rails markup: a
+    sticky header, a card with `isolate`, anything with `opacity < 1`. %>
+
+<div class="relative z-10 flex items-center gap-3 rounded-lg border bg-card p-4"
+     data-testid="stacking-header">
+  <span class="text-sm text-muted-foreground">A header at z-10</span>
+
+  <%= render(Shadcn::Popover::Component.new) do |popover| %>
+    <% popover.with_trigger(class: Shadcn::Button::Component.variant_classes(variant: :outline)) do %>
+      Open popover
+    <% end %>
+    <% popover.with_popover_content do |content| %>
+      <% content.with_header do %>
+        <%= render(Shadcn::Popover::Title::Component.new) { "Am I on top?" } %>
+        <%= render(Shadcn::Popover::Description::Component.new) do %>
+          If the striped panel covers this, the layer lost to a stacking context.
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>
+
+<div class="relative z-20 mt-2 h-40 rounded-lg border bg-muted p-4"
+     data-testid="stacking-sibling">
+  <span class="text-sm font-medium">A sibling at z-20</span>
+</div>

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

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Popover
+    module Trigger
+      # PopoverTrigger
+      class Component < ApplicationViewComponent
+        default_tag :button
+        slot_name :"popover-trigger"
+
+        def element_attributes(**defaults)
+          super(**{
+            type: "button",
+            "aria-haspopup" => "dialog",
+            "aria-expanded" => "false",
+            "data-state" => "closed",
+            "data-shadcn--popover-target" => "trigger",
+            "data-action" => "shadcn--popover#toggle"
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/popover.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the Popover 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 Popover
+    extend Parts
+
+    part :description, tag: :p, slot: "popover-description", classes: "text-muted-foreground"
+
+    part :header, slot: "popover-header", classes: "flex flex-col gap-1 text-sm"
+
+    part :title, slot: "popover-title", classes: "font-medium"
+  end
+end

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

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Progress
+    # Port of registry/new-york-v4/ui/progress.tsx
+    #
+    # Reproduces the ARIA surface and the `data-state` / `data-value` / `data-max`
+    # attributes Radix puts on both the root and the indicator.
+    class Component < ApplicationViewComponent
+      slot_name :progress
+
+      style do
+        base { "relative h-2 w-full overflow-hidden rounded-full bg-primary/20" }
+      end
+
+      INDICATOR_CLASSES = "h-full w-full flex-1 bg-primary transition-all"
+
+      attr_reader :value, :max
+
+      def initialize(value: nil, max: 100, **attributes)
+        @value = value
+        @max = max
+        super(**attributes)
+      end
+
+      def state
+        return "indeterminate" if value.nil?
+
+        value >= max ? "complete" : "loading"
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          role: "progressbar",
+          "aria-valuemax" => max,
+          "aria-valuemin" => 0,
+          "aria-valuenow" => value,
+          "data-state" => state,
+          "data-value" => value,
+          "data-max" => max
+        }.merge(defaults))
+      end
+
+      def call
+        render_element(body: indicator)
+      end
+
+      private
+
+      def indicator
+        tag.div(
+          "data-slot": "progress-indicator",
+          "data-state": state,
+          "data-value": value,
+          "data-max": max,
+          class: INDICATOR_CLASSES,
+          style: "transform: translateX(-#{100 - (value || 0)}%)"
+        )
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,5 @@
+<div class="flex w-[420px] flex-col gap-4">
+  <% [0, 33, 66, 100].each do |value| %>
+    <%= render(Shadcn::Progress::Component.new(value:, "aria-label": "Upload progress")) %>
+  <% end %>
+</div>

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

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module RadioGroup
+    # Port of registry/new-york-v4/ui/radio-group.tsx
+    class Component < ApplicationViewComponent
+      include Concerns::SubmitsValue
+      renders_many :items, "Shadcn::RadioGroup::Item::Component"
+
+      slot_name :"radio-group"
+
+      style do
+        base { "grid gap-3" }
+      end
+
+      attr_reader :name, :value, :disabled
+
+      def initialize(name: nil, value: nil, disabled: false, **attributes)
+        @name = name
+        @value = value.to_s
+        @disabled = disabled
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          role: "radiogroup",
+          "aria-required" => nil,
+          "data-disabled" => (true if disabled),
+          "data-controller" => "shadcn--radio-group",
+          "data-shadcn--radio-group-value-value" => value,
+          "data-shadcn--radio-group-disabled-value" => disabled
+        }.merge(defaults))
+      end
+
+      def call
+        render_element(body: safe_join([ items, content, hidden_input ].flatten.compact))
+      end
+
+      private
+
+      # Radix mirrors the selection into a hidden input so the group submits
+      # with the form.
+      def hidden_input
+        return unless name
+
+        tag.input(**hidden_input_attributes("data-shadcn--radio-group-target" => "input"))
+      end
+    end
+  end
+end