shadcn_view_component 0.3.3

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

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Accordion
+    # Port of registry/new-york-v4/ui/accordion.tsx
+    #
+    # Radix's Accordion.Root renders a plain div; the `shadcn--accordion`
+    # Stimulus controller supplies the open/close state machine, the roving
+    # arrow-key navigation and the ARIA wiring between triggers and panels.
+    class Component < ApplicationViewComponent
+      renders_many :items, "Shadcn::Accordion::Item::Component"
+
+      slot_name :accordion
+
+      attr_reader :type, :collapsible, :value, :orientation
+
+      # @param type [:single, :multiple]
+      # @param collapsible [Boolean] may the open item be closed again (single only)
+      # @param value [String, Array] initially open item value(s)
+      def initialize(type: :single, collapsible: false, value: nil, orientation: :vertical,
+                     **attributes)
+        @type = type&.to_sym || :single
+        @collapsible = collapsible
+        @value = Array(value).compact.join(",")
+        @orientation = orientation&.to_sym || :vertical
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          "data-orientation" => orientation,
+          "data-controller" => "shadcn--accordion",
+          "data-shadcn--accordion-type-value" => type,
+          "data-shadcn--accordion-collapsible-value" => collapsible,
+          "data-shadcn--accordion-value-value" => value
+        }.merge(defaults))
+      end
+
+      def call
+        render_element(body: safe_join([ items, content ].flatten.compact))
+      end
+    end
+  end
+end

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

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Accordion
+    module Content
+      # AccordionContent — the animated wrapper carries the classes, the inner
+      # div takes the padding, exactly as in the TSX.
+      class Component < ApplicationViewComponent
+        WRAPPER_CLASSES = "overflow-hidden text-sm data-[state=closed]:animate-accordion-up " \
+                          "data-[state=open]:animate-accordion-down"
+
+        slot_name :"accordion-content"
+
+        style do
+          base { "pt-0 pb-4" }
+        end
+
+        def element_attributes(**defaults)
+          # The outer element gets no caller classes: shadcn puts them on the
+          # inner div instead.
+          {
+            "data-slot" => "accordion-content",
+            "data-state" => "closed",
+            "data-orientation" => "vertical",
+            role: "region",
+            hidden: true,
+            class: WRAPPER_CLASSES
+          }.merge(defaults).compact
+        end
+
+        def call
+          content_tag(:div, inner, element_attributes)
+        end
+
+        private
+
+        def inner
+          inner_attributes = attributes.except(:class)
+          content_tag(:div, content, inner_attributes.merge(class: css_classes(attributes[:class])))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/accordion/item/component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Accordion
+    module Item
+      # AccordionItem
+      class Component < ApplicationViewComponent
+        renders_one :trigger, "Shadcn::Accordion::Trigger::Component"
+        renders_one :panel, "Shadcn::Accordion::Content::Component"
+
+        slot_name :"accordion-item"
+
+        style do
+          base { "border-b last:border-b-0" }
+        end
+
+        attr_reader :value, :disabled
+
+        def initialize(value:, disabled: false, **attributes)
+          @value = value.to_s
+          @disabled = disabled
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            "data-value" => value,
+            "data-state" => "closed",
+            "data-orientation" => "vertical",
+            "data-disabled" => (true if disabled),
+            "data-shadcn--accordion-target" => "item"
+          }.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([ trigger, panel, content ].compact))
+        end
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,10 @@
+<%= render(Shadcn::Accordion::Component.new(type: :single, collapsible: true, value: "item-1", class: "w-[420px]")) do |acc| %>
+  <% [["item-1", "Is it accessible?", "Yes. It adheres to the WAI-ARIA design pattern."],
+      ["item-2", "Is it styled?", "Yes. It comes with default styles that match the other components."],
+      ["item-3", "Is it animated?", "Yes. It is animated by default, but you can disable it."]].each do |value, question, answer| %>
+    <% acc.with_item(value:) do |item| %>
+      <% item.with_trigger { question } %>
+      <% item.with_panel { answer } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/accordion/previews/multiple.html.erb

@@ -0,0 +1,13 @@
+<%# Upstream's "Multiple" and "Disabled". Both are arguments rather than
+    markup — `type: :multiple` lets more than one panel stay open at a time,
+    and a disabled item cannot be opened at all. %>
+<%= render(Shadcn::Accordion::Component.new(type: :multiple, value: %w[shipping returns], class: "w-[420px]")) do |acc| %>
+  <% [["shipping", "How long does shipping take?", "Two to five working days.", false],
+      ["returns", "Can I return an order?", "Within thirty days, unopened.", false],
+      ["wholesale", "Do you sell wholesale?", "Not reachable — this item is disabled.", true]].each do |value, question, answer, disabled| %>
+    <% acc.with_item(value:, disabled:) do |item| %>
+      <% item.with_trigger { question } %>
+      <% item.with_panel { answer } %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Accordion
+    module Trigger
+      # AccordionTrigger — Radix wraps the button in an `<h3>` header, which is
+      # where shadcn puts the `flex` class.
+      class Component < ApplicationViewComponent
+        HEADER_CLASSES = "flex"
+
+        default_tag :button
+        slot_name :"accordion-trigger"
+
+        style do
+          base {
+            "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left " \
+            "text-sm font-medium transition-all outline-none hover:underline " \
+            "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
+            "disabled:pointer-events-none disabled:opacity-50 " \
+            "[&[data-state=open]>svg]:rotate-180"
+          }
+        end
+
+        CHEVRON_CLASSES = "pointer-events-none size-4 shrink-0 translate-y-0.5 " \
+                          "text-muted-foreground transition-transform duration-200"
+
+        def element_attributes(**defaults)
+          super(**{
+            type: "button",
+            "data-state" => "closed",
+            "data-orientation" => "vertical",
+            "aria-expanded" => "false",
+            "data-shadcn--accordion-target" => "trigger",
+            "data-action" => "click->shadcn--accordion#toggle keydown->shadcn--accordion#keydown"
+          }.merge(defaults))
+        end
+
+        def call
+          tag.h3(class: HEADER_CLASSES, "data-slot": "accordion-header") do
+            render_element(body: safe_join([ content, chevron ]))
+          end
+        end
+
+        private
+
+        def chevron
+          render(Icon::Component.new("chevron-down", class: CHEVRON_CLASSES))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Alert
+    # Port of registry/new-york-v4/ui/alert.tsx
+    class Component < ApplicationViewComponent
+      renders_one :title, "Shadcn::Alert::Title::Component"
+      renders_one :description, "Shadcn::Alert::Description::Component"
+
+      slot_name :alert
+
+      style do
+        base {
+          "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border " \
+          "px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] " \
+          "has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current"
+        }
+
+        variants {
+          variant {
+            default { "bg-card text-card-foreground" }
+            destructive {
+              "bg-card text-destructive " \
+              "*:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current"
+            }
+          }
+        }
+
+        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: "alert" }.merge(defaults))
+      end
+
+      def call
+        render_element(body: safe_join([ title, description, content ].compact))
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,8 @@
+<div class="flex max-w-xl flex-col gap-4">
+  <% %i[default destructive].each do |variant| %>
+    <%= render(Shadcn::Alert::Component.new(variant:)) do |a| %>
+      <% a.with_title { "Heads up!" } %>
+      <% a.with_description { "You can add components to your app using the CLI." } %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/shadcn/alert.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the Alert 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 Alert
+    extend Parts
+
+    part :description, slot: "alert-description",
+                       classes: "col-start-2 grid justify-items-start gap-1 text-sm " \
+                                "text-muted-foreground [&_p]:leading-relaxed"
+
+    part :title, slot: "alert-title",
+                 classes: "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight"
+  end
+end

data/app/components/shadcn/alert_dialog/action/component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module AlertDialog
+    module Action
+      # AlertDialogAction — shadcn wraps it in `<Button asChild>`, so it carries
+      # the button's classes while staying the dialog's action element.
+      class Component < ApplicationViewComponent
+        default_tag :button
+        slot_name :"alert-dialog-action"
+
+        attr_reader :variant, :size
+
+        def initialize(variant: :default, size: :default, **attributes)
+          @variant = variant&.to_sym || :default
+          @size = size&.to_sym || :default
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            type: "button",
+            "data-variant" => variant,
+            "data-size" => size,
+            "data-action" => "shadcn--dialog#close"
+          }.merge(defaults))
+        end
+
+        def css_classes(extra = nil)
+          Button::Component.variant_classes(variant:, size:, class: extra)
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/alert_dialog/cancel/component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module AlertDialog
+    module Cancel
+      # AlertDialogCancel — same as Action but outlined by default.
+      class Component < Action::Component
+        slot_name :"alert-dialog-cancel"
+
+        def initialize(variant: :outline, **attributes)
+          super(variant:, **attributes)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module AlertDialog
+    # Port of registry/new-york-v4/ui/alert-dialog.tsx
+    #
+    # Same primitive as Dialog, except Radix deliberately refuses to close an
+    # alert dialog on an outside click — the user has to pick an action.
+    class Component < ApplicationViewComponent
+      include Concerns::ModalRoot
+
+      renders_one :trigger, "Shadcn::AlertDialog::Trigger::Component"
+      renders_one :dialog_content, "Shadcn::AlertDialog::Content::Component"
+
+      slot_name :"alert-dialog"
+
+      def dismissable? = false
+    end
+  end
+end

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

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module AlertDialog
+    module Content
+      # AlertDialogContent — `role="alertdialog"`, no dismiss button.
+      class Component < ApplicationViewComponent
+        renders_one :header, "Shadcn::AlertDialog::Header::Component"
+        renders_one :footer, "Shadcn::AlertDialog::Footer::Component"
+
+        slot_name :"alert-dialog-content"
+
+        style do
+          base {
+            "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full " \
+            "max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg " \
+            "border bg-background p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs " \
+            "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 " \
+            "data-[size=default]:sm:max-w-lg"
+          }
+        end
+
+        attr_reader :size
+
+        def initialize(size: :default, **attributes)
+          @size = size&.to_sym || :default
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            role: "alertdialog",
+            "aria-modal" => "true",
+            tabindex: "-1",
+            "data-size" => size,
+            "data-state" => "closed",
+            hidden: true,
+            "data-shadcn--dialog-target" => "content"
+          }.merge(defaults))
+        end
+
+        def call
+          tag.div("data-slot": "alert-dialog-portal", style: CONTENTS_STYLE) do
+            safe_join([
+              render(Overlay::Component.new),
+              render_element(body: safe_join([ header, content, footer ].compact))
+            ])
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module AlertDialog
+    module Header
+      # AlertDialogHeader
+      class Component < ApplicationViewComponent
+        renders_one :media, "Shadcn::AlertDialog::Media::Component"
+        renders_one :title, "Shadcn::AlertDialog::Title::Component"
+        renders_one :description, "Shadcn::AlertDialog::Description::Component"
+
+        slot_name :"alert-dialog-header"
+
+        style do
+          base {
+            # Class names are never split across line continuations: Tailwind
+            # scans the source text, so half a token would generate no CSS.
+            "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center " \
+            "has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] " \
+            "has-data-[slot=alert-dialog-media]:gap-x-6 " \
+            "sm:group-data-[size=default]/alert-dialog-content:place-items-start " \
+            "sm:group-data-[size=default]/alert-dialog-content:text-left " \
+            "sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]"
+          }
+        end
+
+        def call
+          render_element(body: safe_join([ media, title, description, content ].compact))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module AlertDialog
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Small", "Media", "Small with Media" and "Destructive".
+      def small_with_media
+        render_with_template
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+<%= render(Shadcn::AlertDialog::Component.new) do |d| %>
+  <% d.with_trigger(class: Shadcn::Button::Component.variant_classes(variant: :destructive)) { "Delete account" } %>
+  <% d.with_dialog_content do |c| %>
+    <% c.with_header do |h| %>
+      <% h.with_title { "Are you absolutely sure?" } %>
+      <% h.with_description { "This action cannot be undone. It will permanently delete your account." } %>
+    <% end %>
+    <% c.with_footer do %>
+      <%= render(Shadcn::AlertDialog::Cancel::Component.new) { "Cancel" } %>
+      <%= render(Shadcn::AlertDialog::Action::Component.new) { "Continue" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/alert_dialog/previews/small_with_media.html.erb

@@ -0,0 +1,38 @@
+<%# Upstream's "Small", "Media" and "Small with Media" — `size: :sm` and the
+    `media` slot, which the default preview shows neither of. The action is
+    styled destructive, which is upstream's "Destructive": the dialog itself has
+    no variant, so the colour is the button's. %>
+<div class="flex items-center gap-2">
+  <%= render(Shadcn::AlertDialog::Component.new) do |d| %>
+    <% d.with_trigger(class: Shadcn::Button::Component.variant_classes(variant: :outline)) { "Small" } %>
+    <% d.with_dialog_content(size: :sm) do |c| %>
+      <% c.with_header do |h| %>
+        <% h.with_title { "Discard draft?" } %>
+        <% h.with_description { "It has not been saved anywhere." } %>
+      <% end %>
+      <% c.with_footer do %>
+        <%= render(Shadcn::AlertDialog::Cancel::Component.new) { "Keep" } %>
+        <%= render(Shadcn::AlertDialog::Action::Component.new(class: Shadcn::Button::Component.variant_classes(variant: :destructive))) { "Discard" } %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= render(Shadcn::AlertDialog::Component.new) do |d| %>
+    <% d.with_trigger(class: Shadcn::Button::Component.variant_classes(variant: :outline)) { "Small with media" } %>
+    <% d.with_dialog_content(size: :sm) do |c| %>
+      <%# The media sits inside the header, which is where upstream puts it and
+          what its `row-span-2` is measured against. %>
+      <% c.with_header do |h| %>
+        <% h.with_media do %>
+          <%= render(Shadcn::Icon::Component.new("circle")) %>
+        <% end %>
+        <% h.with_title { "Delete this project?" } %>
+        <% h.with_description { "Everything in it goes with it." } %>
+      <% end %>
+      <% c.with_footer do %>
+        <%= render(Shadcn::AlertDialog::Cancel::Component.new) { "Cancel" } %>
+        <%= render(Shadcn::AlertDialog::Action::Component.new(class: Shadcn::Button::Component.variant_classes(variant: :destructive))) { "Delete" } %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/shadcn/alert_dialog.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the AlertDialog 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 AlertDialog
+    extend Parts
+
+    part :description, tag: :p, slot: "alert-dialog-description",
+                       classes: "text-sm text-muted-foreground"
+
+    part :footer, slot: "alert-dialog-footer",
+                  classes: "flex flex-col-reverse gap-2 " \
+                           "group-data-[size=sm]/alert-dialog-content:grid " \
+                           "group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row " \
+                           "sm:justify-end"
+
+    part :media, slot: "alert-dialog-media",
+                 classes: "mb-2 inline-flex size-16 items-center justify-center rounded-md " \
+                          "bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 " \
+                          "*:[svg:not([class*='size-'])]:size-8"
+
+    part :overlay, slot: "alert-dialog-overlay", from: Dialog::Overlay::Component
+
+    part :title, tag: :h2, slot: "alert-dialog-title",
+                 classes: "text-lg font-semibold " \
+                          "sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2"
+
+    part :trigger, slot: "alert-dialog-trigger", from: Dialog::Trigger::Component
+  end
+end