shadcn_view_component 0.3.3

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

@@ -0,0 +1,104 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Switch
+    # Port of registry/new-york-v4/ui/switch.tsx
+    class Component < ApplicationViewComponent
+      THUMB_CLASSES = "pointer-events-none block rounded-full bg-background ring-0 " \
+                      "transition-transform group-data-[size=default]/switch:size-4 " \
+                      "group-data-[size=sm]/switch:size-3 " \
+                      "data-[state=checked]:translate-x-[calc(100%-2px)] " \
+                      "data-[state=unchecked]:translate-x-0 " \
+                      "dark:data-[state=checked]:bg-primary-foreground " \
+                      "dark:data-[state=unchecked]:bg-foreground"
+
+      HIDDEN_INPUT_STYLE = "transform:translateX(-100%);position:absolute;" \
+                           "pointer-events:none;opacity:0;margin:0"
+
+      default_tag :button
+      slot_name :switch
+
+      style do
+        base {
+          "peer group/switch inline-flex shrink-0 items-center rounded-full " \
+          "border border-transparent shadow-xs transition-all outline-none " \
+          "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
+          "disabled:cursor-not-allowed disabled:opacity-50 " \
+          "data-[size=default]:h-[1.15rem] data-[size=default]:w-8 " \
+          "data-[size=sm]:h-3.5 data-[size=sm]:w-6 " \
+          "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input " \
+          "dark:data-[state=unchecked]:bg-input/80"
+        }
+      end
+
+      attr_reader :size, :name, :value, :checked, :disabled
+
+      def initialize(size: :default, name: nil, value: "on", checked: false, disabled: false,
+                     **attributes)
+        @size = size&.to_sym || :default
+        @name = name
+        @value = value
+        @checked = checked
+        @disabled = disabled
+        super(**attributes)
+      end
+
+      def state
+        checked ? "checked" : "unchecked"
+      end
+
+      def input_id
+        @input_id ||= "shadcn-switch-#{SecureRandom.hex(4)}" if name
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          type: "button",
+          role: "switch",
+          value: value,
+          disabled: (true if disabled),
+          "aria-checked" => checked.to_s,
+          "data-state" => state,
+          "data-size" => size,
+          "data-disabled" => (true if disabled),
+          "data-controller" => "shadcn--switch",
+          "data-shadcn--switch-checked-value" => checked,
+          "data-shadcn--switch-disabled-value" => disabled,
+          "data-shadcn--switch-input-id-value" => input_id,
+          "data-action" => "click->shadcn--switch#toggle keydown->shadcn--switch#keydown"
+        }.merge(defaults))
+      end
+
+      def call
+        safe_join([ render_element(body: thumb), hidden_input ].compact)
+      end
+
+      private
+
+      def thumb
+        tag.span(
+          "data-slot": "switch-thumb",
+          "data-state": state,
+          "data-shadcn--switch-target": "thumb",
+          class: THUMB_CLASSES
+        )
+      end
+
+      def hidden_input
+        return unless name
+
+        tag.input(
+          type: "checkbox",
+          id: input_id,
+          name: name,
+          value: value,
+          checked: checked,
+          disabled: (true if disabled),
+          "aria-hidden": "true",
+          tabindex: "-1",
+          style: HIDDEN_INPUT_STYLE
+        )
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,24 @@
+<%# A `<label for>` *does* name a `<button>` — button is a labelable element,
+    and Chrome's accessibility tree gives this switch the name "Airplane mode"
+    from the label alone (`relatedElement`, measured). This preview said the
+    opposite for as long as it existed, which is the misconception
+    decisions/04-bugs-fixed.md exists to correct.
+
+    So the first two follow upstream's own example and use `<label for>`. The
+    third and fourth have no visible label at all, which is what `aria-label`
+    is for; the FormBuilder wires `aria-labelledby` instead, because it already
+    renders the label and knows its id. All three name the control. %>
+<div class="flex items-center gap-6">
+  <div class="flex items-center gap-2">
+    <%= render(Shadcn::Switch::Component.new(name: "airplane", id: "switch-airplane")) %>
+    <%= render(Shadcn::Label::Component.new(for: "switch-airplane")) { "Airplane mode" } %>
+  </div>
+  <div class="flex items-center gap-2">
+    <%= render(Shadcn::Switch::Component.new(size: :sm, checked: true, id: "switch-small")) %>
+    <%= render(Shadcn::Label::Component.new(for: "switch-small")) { "Small, on" } %>
+  </div>
+  <%= render(Shadcn::Switch::Component.new(disabled: true, "aria-label": "Disabled")) %>
+  <%# Upstream's "Invalid". Added here rather than to a page of its own: it is
+      one attribute, and it says more beside the states it is not. %>
+  <%= render(Shadcn::Switch::Component.new("aria-invalid": "true", "aria-label": "Invalid")) %>
+</div>

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

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Table
+    # Port of registry/new-york-v4/ui/table.tsx
+    #
+    # shadcn always wraps the table in a scroll container carrying
+    # `data-slot="table-container"`.
+    class Component < ApplicationViewComponent
+      CONTAINER_CLASSES = "relative w-full overflow-x-auto"
+
+      default_tag :table
+      slot_name :table
+
+      style do
+        base { "w-full caption-bottom text-sm" }
+      end
+
+      def call
+        tag.div("data-slot": "table-container", class: CONTAINER_CLASSES) do
+          render_element(body: content)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Table
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Footer": a `<tfoot>` totalling the rows above it.
+      def footer
+        render_with_template
+      end
+    end
+  end
+end

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

@@ -0,0 +1,19 @@
+<%= render(Shadcn::Table::Component.new) do %>
+  <%= render(Shadcn::Table::Caption::Component.new) { "A list of your recent invoices." } %>
+  <%= render(Shadcn::Table::Header::Component.new) do %>
+    <%= render(Shadcn::Table::Row::Component.new) do %>
+      <% ["Invoice", "Status", "Method", "Amount"].each do |head| %>
+        <%= render(Shadcn::Table::Head::Component.new) { head } %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <%= render(Shadcn::Table::Body::Component.new) do %>
+    <% [["INV001", "Paid", "Credit Card", "$250.00"], ["INV002", "Pending", "PayPal", "$150.00"]].each do |row| %>
+      <%= render(Shadcn::Table::Row::Component.new) do %>
+        <% row.each do |cell| %>
+          <%= render(Shadcn::Table::Cell::Component.new) { cell } %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/table/previews/footer.html.erb

@@ -0,0 +1,25 @@
+<%# Upstream's "Footer": a `<tfoot>` totalling the rows above it. %>
+<%= render(Shadcn::Table::Component.new) do %>
+  <%= render(Shadcn::Table::Header::Component.new) do %>
+    <%= render(Shadcn::Table::Row::Component.new) do %>
+      <% ["Invoice", "Status", "Method", "Amount"].each do |head| %>
+        <%= render(Shadcn::Table::Head::Component.new) { head } %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <%= render(Shadcn::Table::Body::Component.new) do %>
+    <% [["INV001", "Paid", "Credit Card", "$250.00"],
+        ["INV002", "Pending", "PayPal", "$150.00"],
+        ["INV003", "Unpaid", "Bank Transfer", "$350.00"]].each do |row| %>
+      <%= render(Shadcn::Table::Row::Component.new) do %>
+        <% row.each { |cell| %><%= render(Shadcn::Table::Cell::Component.new) { cell } %><% } %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <%= render(Shadcn::Table::Footer::Component.new) do %>
+    <%= render(Shadcn::Table::Row::Component.new) do %>
+      <%= render(Shadcn::Table::Cell::Component.new(colspan: 3)) { "Total" } %>
+      <%= render(Shadcn::Table::Cell::Component.new) { "$750.00" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/table.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the Table 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 Table
+    extend Parts
+
+    part :body, tag: :tbody, slot: "table-body", classes: "[&_tr:last-child]:border-0"
+
+    part :caption, tag: :caption, slot: "table-caption",
+                   classes: "mt-4 text-sm text-muted-foreground"
+
+    part :cell, tag: :td, slot: "table-cell",
+                classes: "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 " \
+                         "[&>[role=checkbox]]:translate-y-[2px]"
+
+    part :footer, tag: :tfoot, slot: "table-footer",
+                  classes: "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0"
+
+    part :head, tag: :th, slot: "table-head",
+                classes: "h-10 px-2 text-left align-middle font-medium whitespace-nowrap " \
+                         "text-foreground [&:has([role=checkbox])]:pr-0 " \
+                         "[&>[role=checkbox]]:translate-y-[2px]"
+
+    part :header, tag: :thead, slot: "table-header", classes: "[&_tr]:border-b"
+
+    part :row, tag: :tr, slot: "table-row",
+               classes: "border-b transition-colors hover:bg-muted/50 " \
+                        "has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted"
+  end
+end

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

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Tabs
+    # Port of registry/new-york-v4/ui/tabs.tsx
+    class Component < ApplicationViewComponent
+      renders_one :list, "Shadcn::Tabs::List::Component"
+      renders_many :panels, "Shadcn::Tabs::Content::Component"
+
+      slot_name :tabs
+
+      style do
+        base { "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col" }
+      end
+
+      attr_reader :orientation, :value, :activation
+
+      def initialize(value: nil, orientation: :horizontal, activation: :automatic, **attributes)
+        @value = value.to_s
+        @orientation = orientation&.to_sym || :horizontal
+        @activation = activation&.to_sym || :automatic
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          "data-orientation" => orientation,
+          "data-controller" => "shadcn--tabs",
+          "data-shadcn--tabs-value-value" => value,
+          "data-shadcn--tabs-orientation-value" => orientation,
+          "data-shadcn--tabs-activation-value" => activation
+        }.merge(defaults))
+      end
+
+      def call
+        render_element(body: safe_join([ list, panels, content ].flatten.compact))
+      end
+    end
+  end
+end

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

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Tabs
+    module Content
+      # TabsContent
+      class Component < ApplicationViewComponent
+        slot_name :"tabs-content"
+
+        style do
+          base { "flex-1 outline-none" }
+        end
+
+        attr_reader :value
+
+        def initialize(value:, **attributes)
+          @value = value.to_s
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            role: "tabpanel",
+            tabindex: "0",
+            hidden: true,
+            "data-state" => "inactive",
+            "data-value" => value,
+            "data-shadcn--tabs-target" => "content"
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/tabs/list/component.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Tabs
+    module List
+      # TabsList
+      class Component < ApplicationViewComponent
+        renders_many :triggers, "Shadcn::Tabs::Trigger::Component"
+
+        slot_name :"tabs-list"
+
+        style do
+          base {
+            "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] " \
+            "text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 " \
+            "group-data-[orientation=vertical]/tabs:h-fit " \
+            "group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none"
+          }
+
+          variants {
+            variant {
+              default { "bg-muted" }
+              line { "gap-1 bg-transparent" }
+            }
+          }
+
+          defaults { { variant: :default } }
+        end
+
+        attr_reader :variant
+
+        def initialize(variant: :default, **attributes)
+          @variant = variant&.to_sym || :default
+          super(**attributes)
+        end
+
+        def style_variants
+          { variant: }
+        end
+
+        def element_attributes(**defaults)
+          super(**{ role: "tablist", "data-variant" => variant }.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([ triggers, content ].flatten.compact))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Tabs
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Line" variant and its "Vertical" orientation.
+      def line
+        render_with_template
+      end
+    end
+  end
+end

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

@@ -0,0 +1,21 @@
+<%# Three tabs rather than upstream's two, and the count is load-bearing. Arrow
+    navigation wraps, so with two triggers "forward" and "backward" both land on
+    the other one — which made every reading-direction assertion in
+    `spec/system/direction_spec.rb` pass without the code under test. Three is
+    the smallest number at which the two are distinguishable. %>
+<%= render(Shadcn::Tabs::Component.new(value: "account", class: "w-[420px]")) do |t| %>
+  <% t.with_list do |l| %>
+    <% l.with_trigger(value: "account") { "Account" } %>
+    <% l.with_trigger(value: "password") { "Password" } %>
+    <% l.with_trigger(value: "sessions") { "Sessions" } %>
+  <% end %>
+  <% t.with_panel(value: "account") do %>
+    <div class="rounded-lg border p-4 text-sm">Make changes to your account here.</div>
+  <% end %>
+  <% t.with_panel(value: "password") do %>
+    <div class="rounded-lg border p-4 text-sm">Change your password here.</div>
+  <% end %>
+  <% t.with_panel(value: "sessions") do %>
+    <div class="rounded-lg border p-4 text-sm">Sign out of other devices.</div>
+  <% end %>
+<% end %>

data/app/components/shadcn/tabs/previews/line.html.erb

@@ -0,0 +1,23 @@
+<%# Upstream's "Line" variant of the list, and its "Vertical" orientation —
+    both of which the list and the root take as their own arguments. %>
+<div class="flex flex-col gap-8">
+  <%= render(Shadcn::Tabs::Component.new(value: "overview", class: "w-[420px]")) do |t| %>
+    <% t.with_list(variant: :line) do |l| %>
+      <% l.with_trigger(value: "overview") { "Overview" } %>
+      <% l.with_trigger(value: "activity") { "Activity" } %>
+      <% l.with_trigger(value: "settings", disabled: true) { "Settings" } %>
+    <% end %>
+    <% t.with_panel(value: "overview") { "What happened this week." } %>
+    <% t.with_panel(value: "activity") { "Everything, in order." } %>
+    <% t.with_panel(value: "settings") { "Not reachable — the trigger is disabled." } %>
+  <% end %>
+
+  <%= render(Shadcn::Tabs::Component.new(value: "account", orientation: :vertical, class: "w-[420px]")) do |t| %>
+    <% t.with_list do |l| %>
+      <% l.with_trigger(value: "account") { "Account" } %>
+      <% l.with_trigger(value: "billing") { "Billing" } %>
+    <% end %>
+    <% t.with_panel(value: "account") { "Names and addresses." } %>
+    <% t.with_panel(value: "billing") { "Cards and invoices." } %>
+  <% end %>
+</div>

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

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Tabs
+    module Trigger
+      # TabsTrigger
+      class Component < ApplicationViewComponent
+        default_tag :button
+        slot_name :"tabs-trigger"
+
+        style do
+          base {
+            "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 " \
+            "rounded-md border border-transparent px-2 py-1 text-sm font-medium " \
+            "whitespace-nowrap text-foreground/60 transition-all " \
+            "group-data-[orientation=vertical]/tabs:w-full " \
+            "group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground " \
+            "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
+            "focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none " \
+            "disabled:opacity-50 " \
+            "group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm " \
+            "group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none " \
+            "dark:text-muted-foreground dark:hover:text-foreground " \
+            "[&_svg]:pointer-events-none [&_svg]:shrink-0 " \
+            "[&_svg:not([class*='size-'])]:size-4 " \
+            "group-data-[variant=line]/tabs-list:bg-transparent " \
+            "group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent " \
+            "dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent " \
+            "dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent " \
+            "data-[state=active]:bg-background data-[state=active]:text-foreground " \
+            "dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 " \
+            "dark:data-[state=active]:text-foreground " \
+            "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity " \
+            "group-data-[orientation=horizontal]/tabs:after:inset-x-0 " \
+            "group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] " \
+            "group-data-[orientation=horizontal]/tabs:after:h-0.5 " \
+            "group-data-[orientation=vertical]/tabs:after:inset-y-0 " \
+            "group-data-[orientation=vertical]/tabs:after:-right-1 " \
+            "group-data-[orientation=vertical]/tabs:after:w-0.5 " \
+            "group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100"
+          }
+        end
+
+        attr_reader :value
+
+        def initialize(value:, **attributes)
+          @value = value.to_s
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            type: "button",
+            role: "tab",
+            "aria-selected" => "false",
+            tabindex: "-1",
+            "data-state" => "inactive",
+            "data-value" => value,
+            "data-shadcn--tabs-target" => "trigger",
+            "data-action" => "click->shadcn--tabs#select keydown->shadcn--tabs#keydown"
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Textarea
+    # Port of registry/new-york-v4/ui/textarea.tsx
+    class Component < ApplicationViewComponent
+      default_tag :textarea
+      slot_name :textarea
+
+      style do
+        base {
+          "flex field-sizing-content min-h-16 w-full rounded-md border border-input " \
+          "bg-transparent px-3 py-2 text-base shadow-xs " \
+          "transition-[color,box-shadow] outline-none " \
+          "placeholder:text-muted-foreground 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 " \
+          "md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40"
+        }
+      end
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Textarea
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Disabled" and "Invalid".
+      def states
+        render_with_template
+      end
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<div class="w-[420px]">
+  <%= render(Shadcn::Textarea::Component.new(placeholder: "Type your message here.")) %>
+</div>

data/app/components/shadcn/textarea/previews/states.html.erb

@@ -0,0 +1,18 @@
+<%# Upstream's "Disabled" and "Invalid", together for the same reason as the
+    input's: they are attributes rather than variants. Labelled for the same
+    reason too — axe counts a placeholder as a name, and the invalid one has a
+    value instead of a placeholder. %>
+<div class="flex w-[320px] flex-col gap-4">
+  <div class="flex flex-col gap-2">
+    <%= render(Shadcn::Label::Component.new(for: "ta-ordinary")) { "Ordinary" } %>
+    <%= render(Shadcn::Textarea::Component.new(id: "ta-ordinary", placeholder: "Tell us about it")) %>
+  </div>
+  <div class="flex flex-col gap-2">
+    <%= render(Shadcn::Label::Component.new(for: "ta-disabled")) { "Disabled" } %>
+    <%= render(Shadcn::Textarea::Component.new(id: "ta-disabled", disabled: true)) %>
+  </div>
+  <div class="flex flex-col gap-2">
+    <%= render(Shadcn::Label::Component.new(for: "ta-invalid")) { "Invalid" } %>
+    <%= render(Shadcn::Textarea::Component.new(id: "ta-invalid", "aria-invalid": "true")) { "Too short" } %>
+  </div>
+</div>