shadcn_view_component 0.3.3

data/app/components/shadcn/chart/tooltip/component.rb

@@ -0,0 +1,111 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Chart
+    module Tooltip
+      # `ChartTooltipContent`, 1:1 in markup.
+      #
+      # Upstream's is rendered by recharts each time the pointer moves, with the
+      # hovered item's payload. Here it is rendered once, empty, and the
+      # controller writes the label, the name, the value and the indicator's
+      # colour into it — which is the same DOM, arrived at from the other side.
+      #
+      # `indicator:` is upstream's `dot | line | dashed`, and the classes for
+      # all three come from `chart.tsx`.
+      class Component < ApplicationViewComponent
+        INDICATORS = {
+          dot: "h-2.5 w-2.5",
+          line: "w-1",
+          dashed: "w-0 border-[1.5px] border-dashed bg-transparent"
+        }.freeze
+
+        default_tag :div
+        slot_name :"chart-tooltip"
+
+        style do
+          base {
+            "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background " \
+            "px-2.5 py-1.5 text-xs shadow-xl"
+          }
+        end
+
+        attr_reader :indicator, :hide_label, :hide_indicator
+
+        def initialize(indicator: :dot, hide_label: false, hide_indicator: false, **attributes)
+          @indicator = INDICATORS.key?(indicator&.to_sym) ? indicator.to_sym : :dot
+          @hide_label = hide_label
+          @hide_indicator = hide_indicator
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            "data-shadcn--chart-target" => "tooltip",
+            hidden: true,
+            # Positioned against the container rather than by the wrapper
+            # recharts renders and this port does not.
+            style: merged_style("position:absolute;pointer-events:none")
+          }.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([ (heading unless nest_label?), items ].compact))
+        end
+
+        private
+
+        # Upstream's `nestLabel`: with a single item and an indicator that is
+        # not a dot, the label moves *inside* the row and the row bottom-aligns
+        # (`chart.tsx:186`). A pie's tooltip is always a single item, so here it
+        # is decided by the indicator alone.
+        def nest_label? = !hide_label && indicator != :dot
+
+        def heading
+          return if hide_label
+
+          tag.div(class: "font-medium", "data-shadcn--chart-target": "label")
+        end
+
+        def items
+          tag.div(class: "grid gap-1.5") do
+            tag.div(class: row_classes) do
+              safe_join([ swatch, body ].compact)
+            end
+          end
+        end
+
+        def row_classes
+          [
+            "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+            ("items-center" if indicator == :dot)
+          ].compact.join(" ")
+        end
+
+        def swatch
+          return if hide_indicator
+
+          classes = [
+            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+            INDICATORS[indicator],
+            ("my-0.5" if nest_label? && indicator == :dashed)
+          ].compact.join(" ")
+
+          tag.div(class: classes, "data-shadcn--chart-target": "indicator")
+        end
+
+        def body
+          tag.div(class: "flex flex-1 #{nest_label? ? 'items-end' : 'items-center'} justify-between leading-none") do
+            safe_join([
+              tag.div(class: "grid gap-1.5") do
+                safe_join([ (heading if nest_label?),
+                            tag.span(class: "text-muted-foreground", "data-shadcn--chart-target": "name") ].compact)
+              end,
+              tag.span(class: "font-mono font-medium text-foreground tabular-nums",
+                       "data-shadcn--chart-target": "value")
+            ])
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,109 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Checkbox
+    # Port of registry/new-york-v4/ui/checkbox.tsx
+    #
+    # Like Radix, this renders a `role="checkbox"` button and — when `name:` is
+    # given — a visually hidden native checkbox next to it so the control takes
+    # part in normal form submission.
+    class Component < ApplicationViewComponent
+      INDICATOR_CLASSES = "grid place-content-center text-current transition-none"
+
+      # Radix's BubbleInput styling: present for the form, invisible to the user.
+      HIDDEN_INPUT_STYLE = "transform:translateX(-100%);position:absolute;" \
+                           "pointer-events:none;opacity:0;margin:0"
+
+      default_tag :button
+      slot_name :checkbox
+
+      style do
+        base {
+          "peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs " \
+          "transition-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-[state=checked]:border-primary data-[state=checked]:bg-primary " \
+          "data-[state=checked]:text-primary-foreground dark:bg-input/30 " \
+          "dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary"
+        }
+      end
+
+      attr_reader :name, :value, :checked, :indeterminate, :disabled
+
+      def initialize(name: nil, value: "on", checked: false, indeterminate: false,
+                     disabled: false, **attributes)
+        @name = name
+        @value = value
+        @checked = checked
+        @indeterminate = indeterminate
+        @disabled = disabled
+        super(**attributes)
+      end
+
+      def state
+        return "indeterminate" if indeterminate
+
+        checked ? "checked" : "unchecked"
+      end
+
+      def input_id
+        @input_id ||= "shadcn-checkbox-#{SecureRandom.hex(4)}" if name
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          type: "button",
+          role: "checkbox",
+          value: value,
+          disabled: (true if disabled),
+          "aria-checked" => (state == "indeterminate" ? "mixed" : checked.to_s),
+          "data-state" => state,
+          "data-disabled" => (true if disabled),
+          "data-controller" => "shadcn--checkbox",
+          "data-shadcn--checkbox-checked-value" => checked,
+          "data-shadcn--checkbox-indeterminate-value" => indeterminate,
+          "data-shadcn--checkbox-disabled-value" => disabled,
+          "data-shadcn--checkbox-input-id-value" => input_id,
+          "data-action" => "click->shadcn--checkbox#toggle keydown->shadcn--checkbox#keydown"
+        }.merge(defaults))
+      end
+
+      def call
+        safe_join([ render_element(body: indicator), hidden_input ].compact)
+      end
+
+      private
+
+      # Radix mounts the indicator only while checked. It is rendered here
+      # regardless — hidden when unchecked, so the markup is correct before
+      # JavaScript runs — and the controller detaches it on connect.
+      def indicator
+        tag.span(
+          render(Icon::Component.new("check", class: "size-3.5")),
+          "data-slot": "checkbox-indicator",
+          "data-state": state,
+          "data-shadcn--checkbox-target": "indicator",
+          hidden: (true if state == "unchecked"),
+          class: INDICATOR_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/checkbox/preview.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Checkbox
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Checked State" and "Invalid State", with indeterminate beside them.
+      def states
+        render_with_template
+      end
+    end
+  end
+end

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

@@ -0,0 +1,14 @@
+<div class="flex flex-col gap-4">
+  <div class="flex items-center gap-2">
+    <%= render(Shadcn::Checkbox::Component.new(id: "cb1", name: "terms")) %>
+    <%= render(Shadcn::Label::Component.new(for: "cb1")) { "Accept terms and conditions" } %>
+  </div>
+  <div class="flex items-center gap-2">
+    <%= render(Shadcn::Checkbox::Component.new(id: "cb2", checked: true)) %>
+    <%= render(Shadcn::Label::Component.new(for: "cb2")) { "Checked by default" } %>
+  </div>
+  <div class="flex items-center gap-2">
+    <%= render(Shadcn::Checkbox::Component.new(id: "cb3", disabled: true)) %>
+    <%= render(Shadcn::Label::Component.new(for: "cb3")) { "Disabled" } %>
+  </div>
+</div>

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

@@ -0,0 +1,23 @@
+<%# Upstream's "Checked State" and "Invalid State". Indeterminate is the one
+    worth seeing beside the other two: it is neither checked nor unchecked, and
+    a parent box summarising a part-ticked list is the whole reason it exists. %>
+<div class="flex flex-col gap-4">
+  <div class="flex items-center gap-2">
+    <%= render(Shadcn::Checkbox::Component.new(id: "cbs1", indeterminate: true)) %>
+    <%= render(Shadcn::Label::Component.new(for: "cbs1")) { "Some of the below" } %>
+  </div>
+  <div class="ml-6 flex flex-col gap-2">
+    <div class="flex items-center gap-2">
+      <%= render(Shadcn::Checkbox::Component.new(id: "cbs2", checked: true)) %>
+      <%= render(Shadcn::Label::Component.new(for: "cbs2")) { "Ticked" } %>
+    </div>
+    <div class="flex items-center gap-2">
+      <%= render(Shadcn::Checkbox::Component.new(id: "cbs3")) %>
+      <%= render(Shadcn::Label::Component.new(for: "cbs3")) { "Not ticked" } %>
+    </div>
+  </div>
+  <div class="flex items-center gap-2">
+    <%= render(Shadcn::Checkbox::Component.new(id: "cbs4", "aria-invalid": "true")) %>
+    <%= render(Shadcn::Label::Component.new(for: "cbs4")) { "Has to be accepted" } %>
+  </div>
+</div>

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

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Collapsible
+    # Port of registry/new-york-v4/ui/collapsible.tsx
+    class Component < ApplicationViewComponent
+      renders_one :trigger, "Shadcn::Collapsible::Trigger::Component"
+      renders_one :panel, "Shadcn::Collapsible::Content::Component"
+
+      slot_name :collapsible
+
+      attr_reader :open, :disabled
+
+      def initialize(open: false, disabled: false, **attributes)
+        @open = open
+        @disabled = disabled
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          "data-state" => open ? "open" : "closed",
+          "data-disabled" => (true if disabled),
+          "data-controller" => "shadcn--collapsible",
+          "data-shadcn--collapsible-open-value" => open,
+          "data-shadcn--collapsible-disabled-value" => disabled
+        }.merge(defaults))
+      end
+
+      def call
+        render_element(body: safe_join([ trigger, panel, content ].compact))
+      end
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Collapsible
+    module Content
+      # CollapsibleContent
+      class Component < ApplicationViewComponent
+        slot_name :"collapsible-content"
+
+        def element_attributes(**defaults)
+          super(**{
+            "data-state" => "closed",
+            hidden: true,
+            "data-shadcn--collapsible-target" => "content"
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,9 @@
+<%= render(Shadcn::Collapsible::Component.new(class: "flex w-[420px] flex-col gap-2")) do |c| %>
+  <% c.with_trigger(class: "flex items-center justify-between rounded-md border px-4 py-2 text-sm font-medium") do %>
+    @peduarte starred 3 repositories
+  <% end %>
+  <% c.with_panel(class: "flex flex-col gap-2") do %>
+    <div class="rounded-md border px-4 py-2 font-mono text-sm">@radix-ui/colors</div>
+    <div class="rounded-md border px-4 py-2 font-mono text-sm">@stitches/react</div>
+  <% end %>
+<% end %>

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

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

data/app/components/shadcn/combobox/chip/component.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Combobox
+    module Chip
+      # One chosen value, with the X that takes it back off. `show_remove:` is
+      # upstream's `showRemove`, on by default there too.
+      class Component < ApplicationViewComponent
+        REMOVE_CLASSES = "-ml-1 opacity-50 hover:opacity-100"
+
+        default_tag :span
+        slot_name :"combobox-chip"
+
+        style do
+          base {
+            "flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm bg-muted " \
+            "px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none " \
+            "has-disabled:cursor-not-allowed has-disabled:opacity-50 " \
+            "has-data-[slot=combobox-chip-remove]:pr-0"
+          }
+        end
+
+        attr_reader :value, :show_remove
+
+        def initialize(value: nil, show_remove: true, **attributes)
+          @value = value
+          @show_remove = show_remove
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            "data-value" => value,
+            "data-shadcn--combobox-target" => "chip"
+          }.compact.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([ content, remove ].compact))
+        end
+
+        private
+
+        def remove
+          return unless show_remove
+
+          render(Shadcn::Button::Component.new(
+            variant: :ghost,
+            size: :"icon-xs",
+            class: REMOVE_CLASSES,
+            "data-slot": "combobox-chip-remove",
+            "data-value": value,
+            "data-action": "click->shadcn--combobox#remove",
+            "aria-label": shadcn_t("combobox.remove")
+          )) { render(Icon::Component.new("x", class: "pointer-events-none")) }
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/combobox/chip_input/component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Combobox
+    module ChipInput
+      # The field that sits *among* the chips rather than inside an InputGroup:
+      # it takes whatever room is left on the last row.
+      class Component < Shadcn::Combobox::Input::Component
+        slot_name :"combobox-chip-input"
+
+        style do
+          base { "min-w-16 flex-1 outline-none" }
+        end
+
+        # This field has to carry its own name, and that is **ours** rather than
+        # upstream's — the same correction Select, Checkbox, Switch and the
+        # Combobox trigger each needed here.
+        #
+        # It is not theoretical. The only name this input had was its
+        # `placeholder`, and in multiple mode the controller blanks that once
+        # there are chips — which upstream's own example also does. The field
+        # was then a `role="combobox"` with no name at all, and axe failed it as
+        # `label`, critical. Caught by the accessibility spec on the run *after*
+        # the placeholder was wired up; the run before it could not see the
+        # interaction, because nothing blanked the placeholder yet.
+        #
+        # The caller's placeholder is used when there is one, because "Add a
+        # language…" names the field better than anything this gem could
+        # generate. Read at render time and never touched again, so the name
+        # stays put while the placeholder comes and goes.
+        def element_attributes(**defaults)
+          super(**{ "aria-label" => placeholder.presence || shadcn_t("combobox.add") }.merge(defaults))
+        end
+
+        # No InputGroup and no addons: the chips box is the frame, and a chevron
+        # would have nowhere to sit.
+        def call
+          render_element
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/combobox/chips/component.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Combobox
+    module Chips
+      # The box that holds the chosen values as removable tokens, with the
+      # field beside them — upstream's multiple-selection shape.
+      #
+      # It is the field's own frame here rather than an InputGroup: upstream's
+      # classes draw the border, the ring and the invalid states themselves,
+      # because the box grows with its chips where an InputGroup does not.
+      class Component < ApplicationViewComponent
+        default_tag :div
+        slot_name :"combobox-chips"
+
+        style do
+          base {
+            "flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent " \
+            "bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] " \
+            "focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 " \
+            "has-aria-invalid:border-destructive has-aria-invalid:ring-[3px] " \
+            "has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 " \
+            "dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 " \
+            "dark:has-aria-invalid:ring-destructive/40"
+          }
+        end
+
+        def element_attributes(**defaults)
+          super(**{ "data-shadcn--combobox-target" => "chips" }.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([ content, template ]))
+        end
+
+        private
+
+        # One blank chip in a `<template>`, which the controller clones when a
+        # value is taken.
+        #
+        # The alternative was building the chip's markup in JavaScript, and that
+        # would put this library's class strings in two places — a `.js` file
+        # Tailwind does scan but `parity_spec` does not read, so the copy would
+        # drift from the component silently and upstream would never be checked
+        # against it. Cloning keeps one source: the Chip component.
+        def template
+          tag.template("data-shadcn--combobox-target": "chipTemplate") do
+            render(Shadcn::Combobox::Chip::Component.new)
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/combobox/clear/component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Combobox
+    module Clear
+      # The X that empties the field. Upstream renders it through
+      # `InputGroupButton` too, and hides the chevron whenever it is present —
+      # which is what the trigger's
+      # `group-has-data-[slot=combobox-clear]/input-group:hidden` does.
+      class Component < Shadcn::InputGroup::Button::Component
+        slot_name :"combobox-clear"
+
+        def initialize(**attributes)
+          super(variant: :ghost, size: :"icon-xs", **attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            "data-shadcn--combobox-target" => "clear",
+            "data-action" => "click->shadcn--combobox#clear",
+            tabindex: "-1",
+            "aria-label" => shadcn_t("combobox.clear")
+          }.merge(defaults))
+        end
+
+        def call
+          render_element(body: render(Icon::Component.new("x", class: "pointer-events-none")))
+        end
+      end
+    end
+  end
+end