shadcn_view_component 0.3.3

data/app/components/shadcn/dropdown_menu/radio_item/component.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module DropdownMenu
+    module RadioItem
+      # DropdownMenuRadioItem
+      class Component < ApplicationViewComponent
+        INDICATOR_CLASSES = "pointer-events-none absolute left-2 flex size-3.5 " \
+                            "items-center justify-center"
+
+        slot_name :"dropdown-menu-radio-item"
+
+        style do
+          base {
+            "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 " \
+            "text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground " \
+            "data-[disabled]:pointer-events-none data-[disabled]:opacity-50 " \
+            "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          }
+        end
+
+        attr_reader :value, :checked, :disabled
+
+        def initialize(value:, checked: false, disabled: false, **attributes)
+          @value = value.to_s
+          @checked = checked
+          @disabled = disabled
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            role: "menuitemradio",
+            tabindex: "-1",
+            "aria-checked" => checked.to_s,
+            "data-value" => value,
+            "data-state" => (checked ? "checked" : "unchecked"),
+            "data-disabled" => (true if disabled),
+            "data-shadcn--dropdown-menu-target" => "item",
+            "data-action" => "click->shadcn--dropdown-menu#select " \
+                             "pointerenter->shadcn--dropdown-menu#pointerenter"
+          }.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([ indicator, content ]))
+        end
+
+        private
+
+        def indicator
+          tag.span(class: INDICATOR_CLASSES) do
+            tag.span(
+              render(Icon::Component.new("circle", class: "size-2 fill-current")),
+              "data-slot": "dropdown-menu-radio-item-indicator",
+              hidden: (true unless checked)
+            )
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/dropdown_menu/sub/component.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module DropdownMenu
+    module Sub
+      # DropdownMenuSub — a nested menu.
+      #
+      # It is another `shadcn--dropdown-menu` controller, anchored to the right
+      # of its trigger. Stimulus scopes targets to the nearest controller of the
+      # same identifier, so the parent menu's items and the submenu's stay apart.
+      class Component < ApplicationViewComponent
+        renders_one :trigger, "Shadcn::DropdownMenu::SubTrigger::Component"
+        renders_one :menu_content, "Shadcn::DropdownMenu::SubContent::Component"
+
+        slot_name :"dropdown-menu-sub"
+
+        attr_reader :open, :side, :align, :side_offset
+
+        def initialize(open: false, side: :right, align: :start, side_offset: 0, **attributes)
+          @open = open
+          @side = side&.to_sym || :right
+          @align = align&.to_sym || :start
+          @side_offset = side_offset
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            style: merged_style(CONTENTS_STYLE),
+            "data-controller" => "shadcn--dropdown-menu",
+            "data-shadcn--dropdown-menu-open-value" => open,
+            "data-shadcn--dropdown-menu-side-value" => side,
+            "data-shadcn--dropdown-menu-align-value" => align,
+            "data-shadcn--dropdown-menu-side-offset-value" => side_offset
+          }.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([ trigger, menu_content, content ].compact))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/dropdown_menu/sub_content/component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module DropdownMenu
+    module SubContent
+      # DropdownMenuSubContent
+      class Component < ApplicationViewComponent
+        renders_many :items, "Shadcn::DropdownMenu::Item::Component"
+
+        slot_name :"dropdown-menu-sub-content"
+
+        style do
+          base {
+            "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) " \
+            "overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground " \
+            "shadow-lg 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: "menu",
+            tabindex: "-1",
+            "aria-orientation" => "vertical",
+            "data-state" => "closed",
+            hidden: true,
+            "data-shadcn--dropdown-menu-target" => "content",
+            "data-action" => "keydown->shadcn--dropdown-menu#contentKeydown " \
+                             "pointerenter->shadcn--dropdown-menu#cancelSubTimers " \
+                             "pointerleave->shadcn--dropdown-menu#closeLater"
+          }.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([ items, content ].flatten.compact))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/dropdown_menu/sub_trigger/component.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module DropdownMenu
+    module SubTrigger
+      # DropdownMenuSubTrigger — a menu item that opens the nested menu.
+      class Component < ApplicationViewComponent
+        slot_name :"dropdown-menu-sub-trigger"
+
+        style do
+          base {
+            "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm " \
+            "outline-hidden select-none focus:bg-accent focus:text-accent-foreground " \
+            "data-[inset]:pl-8 data-[state=open]:bg-accent " \
+            "data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none " \
+            "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 " \
+            "[&_svg:not([class*='text-'])]:text-muted-foreground"
+          }
+        end
+
+        attr_reader :inset, :disabled
+
+        def initialize(inset: false, disabled: false, **attributes)
+          @inset = inset
+          @disabled = disabled
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            role: "menuitem",
+            tabindex: "-1",
+            "aria-haspopup" => "menu",
+            "aria-expanded" => "false",
+            "data-state" => "closed",
+            "data-inset" => (true if inset),
+            "data-disabled" => (true if disabled),
+            "data-shadcn--dropdown-menu-target" => "trigger",
+            "data-action" => "click->shadcn--dropdown-menu#toggle " \
+                             "keydown->shadcn--dropdown-menu#triggerKeydown " \
+                             "pointerenter->shadcn--dropdown-menu#open " \
+                             "pointerleave->shadcn--dropdown-menu#closeLater"
+          }.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([ content, chevron ]))
+        end
+
+        private
+
+        def chevron
+          render(Icon::Component.new("chevron-right", class: "ml-auto size-4"))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module DropdownMenu
+    module Trigger
+      # DropdownMenuTrigger
+      class Component < ApplicationViewComponent
+        default_tag :button
+        slot_name :"dropdown-menu-trigger"
+
+        def element_attributes(**defaults)
+          super(**{
+            type: "button",
+            "aria-haspopup" => "menu",
+            "aria-expanded" => "false",
+            "data-state" => "closed",
+            "data-shadcn--dropdown-menu-target" => "trigger",
+            "data-action" => "click->shadcn--dropdown-menu#toggle " \
+                             "keydown->shadcn--dropdown-menu#triggerKeydown"
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/dropdown_menu.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the DropdownMenu 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 DropdownMenu
+    extend Parts
+
+    part :label, slot: "dropdown-menu-label",
+                 classes: "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8"
+
+    part :separator, slot: "dropdown-menu-separator", classes: "-mx-1 my-1 h-px bg-border"
+
+    part :shortcut, tag: :span, slot: "dropdown-menu-shortcut",
+                    classes: "ml-auto text-xs tracking-widest text-muted-foreground"
+  end
+end

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

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Empty
+    # Port of registry/new-york-v4/ui/empty.tsx
+    class Component < ApplicationViewComponent
+      slot_name :empty
+
+      style do
+        base {
+          "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg " \
+          "border-dashed p-6 text-center text-balance md:p-12"
+        }
+      end
+    end
+  end
+end

data/app/components/shadcn/empty/media/component.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Empty
+    module Media
+      # EmptyMedia. Named after the TSX function, but the `data-slot` it emits
+      # is `empty-icon` — the two differ upstream, and the slot is what the
+      # sibling selectors key on.
+      class Component < ApplicationViewComponent
+        slot_name :"empty-icon"
+
+        style do
+          base {
+            "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none " \
+            "[&_svg]:shrink-0"
+          }
+
+          variants {
+            variant {
+              default { "bg-transparent" }
+              icon {
+                "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted " \
+                "text-foreground [&_svg:not([class*='size-'])]:size-6"
+              }
+            }
+          }
+
+          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(**{ "data-variant" => variant }.merge(defaults))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Empty
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Avatar" and "Avatar Group" — the media slot's other variant.
+      def media
+        render_with_template
+      end
+    end
+  end
+end

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

@@ -0,0 +1,15 @@
+<%= render(Shadcn::Empty::Component.new(class: "w-full max-w-md border")) do %>
+  <%= render(Shadcn::Empty::Header::Component.new) do %>
+    <%= render(Shadcn::Empty::Media::Component.new(variant: :icon)) do %>
+      <%= render(Shadcn::Icon::Component.new("circle")) %>
+    <% end %>
+    <%= render(Shadcn::Empty::Title::Component.new) { "No projects yet" } %>
+    <%= render(Shadcn::Empty::Description::Component.new) do %>
+      Create your first project to get started, or
+      <a href="#">read the guide</a>.
+    <% end %>
+  <% end %>
+  <%= render(Shadcn::Empty::Content::Component.new) do %>
+    <%= render(Shadcn::Button::Component.new) { "New project" } %>
+  <% end %>
+<% end %>

data/app/components/shadcn/empty/previews/media.html.erb

@@ -0,0 +1,32 @@
+<%# Upstream's "Avatar" and "Avatar Group": the media slot's *other* variant.
+    `icon` — the one in the default preview — draws the muted rounded box; the
+    default variant draws nothing at all and lets whatever is inside stand on
+    its own, which is what a face or a stack of faces needs. %>
+<div class="flex flex-col gap-8">
+  <%= render(Shadcn::Empty::Component.new(class: "w-full max-w-md border")) do %>
+    <%= render(Shadcn::Empty::Header::Component.new) do %>
+      <%= render(Shadcn::Empty::Media::Component.new) do %>
+        <%= render(Shadcn::Avatar::Component.new(size: :lg)) do |a| %>
+          <% a.with_fallback { "EW" } %>
+        <% end %>
+      <% end %>
+      <%= render(Shadcn::Empty::Title::Component.new) { "No messages from Evelyn" } %>
+      <%= render(Shadcn::Empty::Description::Component.new) { "When she writes, it will be here." } %>
+    <% end %>
+  <% end %>
+
+  <%= render(Shadcn::Empty::Component.new(class: "w-full max-w-md border")) do %>
+    <%= render(Shadcn::Empty::Header::Component.new) do %>
+      <%= render(Shadcn::Empty::Media::Component.new) do %>
+        <%= render(Shadcn::Avatar::Group::Component.new) do %>
+          <% %w[AB CD EF].each do |initials| %>
+            <%= render(Shadcn::Avatar::Component.new) do |a| %><% a.with_fallback { initials } %><% end %>
+          <% end %>
+          <%= render(Shadcn::Avatar::GroupCount::Component.new) { "+2" } %>
+        <% end %>
+      <% end %>
+      <%= render(Shadcn::Empty::Title::Component.new) { "Nobody has joined yet" } %>
+      <%= render(Shadcn::Empty::Description::Component.new) { "Invite the five people above." } %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/shadcn/empty.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the Empty family that are just an element with a `data-slot`
+  # and a fixed set of classes. `EmptyMedia` has a variant, so it keeps its own
+  # `component.rb`.
+  #
+  # `EmptyDescription` is typed `React.ComponentProps<"p">` upstream but renders
+  # a `<div>`. The element is what the port follows.
+  module Empty
+    extend Parts
+
+    part :header, slot: "empty-header",
+                  classes: "flex max-w-sm flex-col items-center gap-2 text-center"
+
+    part :title, slot: "empty-title", classes: "text-lg font-medium tracking-tight"
+
+    part :description, slot: "empty-description",
+                       classes: "text-sm/relaxed text-muted-foreground [&>a]:underline " \
+                                "[&>a]:underline-offset-4 [&>a:hover]:text-primary"
+
+    part :content, slot: "empty-content",
+                   classes: "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 " \
+                            "text-sm text-balance"
+  end
+end

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

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Field
+    # Port of registry/new-york-v4/ui/field.tsx
+    class Component < ApplicationViewComponent
+      renders_one :label, "Shadcn::Field::Label::Component"
+      renders_one :field_content, "Shadcn::Field::Content::Component"
+      renders_one :description, "Shadcn::Field::Description::Component"
+      renders_one :error, "Shadcn::Field::Error::Component"
+
+      slot_name :field
+
+      style do
+        base { "group/field flex w-full gap-3 data-[invalid=true]:text-destructive" }
+
+        variants {
+          orientation {
+            vertical { "flex-col [&>*]:w-full [&>.sr-only]:w-auto" }
+            horizontal {
+              "flex-row items-center " \
+              "[&>[data-slot=field-label]]:flex-auto " \
+              "has-[>[data-slot=field-content]]:items-start " \
+              "has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+            }
+            responsive {
+              # Class names are never split across line continuations: Tailwind
+              # scans the source text, so half a token would generate no CSS.
+              "flex-col @md/field-group:flex-row @md/field-group:items-center " \
+              "[&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto " \
+              "@md/field-group:[&>[data-slot=field-label]]:flex-auto " \
+              "@md/field-group:has-[>[data-slot=field-content]]:items-start " \
+              "@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+            }
+          }
+        }
+
+        defaults { { orientation: :vertical } }
+      end
+
+      attr_reader :orientation
+
+      def initialize(orientation: :vertical, **attributes)
+        @orientation = orientation&.to_sym || :vertical
+        super(**attributes)
+      end
+
+      def style_variants
+        { orientation: }
+      end
+
+      def element_attributes(**defaults)
+        super(**{ role: "group", "data-orientation" => orientation }.merge(defaults))
+      end
+
+      def call
+        render_element(body: safe_join([ label, field_content, content, description, error ].compact))
+      end
+    end
+  end
+end

data/app/components/shadcn/field/error/component.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Field
+    module Error
+      # FieldError — renders nothing when there is neither content nor errors.
+      # A single error is inlined; several are listed, like the TSX does.
+      class Component < ApplicationViewComponent
+        LIST_CLASSES = "ml-4 flex list-disc flex-col gap-1"
+
+        slot_name :"field-error"
+
+        style do
+          base { "text-sm font-normal text-destructive" }
+        end
+
+        attr_reader :errors
+
+        def initialize(errors: [], **attributes)
+          @errors = Array(errors).compact.map(&:to_s).uniq
+          super(**attributes)
+        end
+
+        def render?
+          content.present? || errors.any?
+        end
+
+        def element_attributes(**defaults)
+          super(**{ role: "alert" }.merge(defaults))
+        end
+
+        def call
+          render_element(body: body)
+        end
+
+        private
+
+        def body
+          return content if content.present?
+          return errors.first if errors.one?
+
+          tag.ul(class: LIST_CLASSES) do
+            safe_join(errors.map { |message| tag.li(message) })
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/field/legend/component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Field
+    module Legend
+      # FieldLegend
+      class Component < ApplicationViewComponent
+        default_tag :legend
+        slot_name :"field-legend"
+
+        style do
+          base {
+            "mb-3 font-medium data-[variant=legend]:text-base data-[variant=label]:text-sm"
+          }
+        end
+
+        attr_reader :variant
+
+        def initialize(variant: :legend, **attributes)
+          @variant = variant&.to_sym || :legend
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{ "data-variant" => variant }.merge(defaults))
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Field
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # The same components driven by `shadcn_form_with`, so ids, names, error
+      # text and the ARIA wiring come from the model.
+      def form_builder
+        render_with_template
+      end
+    end
+  end
+end

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

@@ -0,0 +1,29 @@
+<%= render(Shadcn::Field::Group::Component.new(class: "w-[420px]")) do %>
+  <%= render(Shadcn::Field::Component.new) do |f| %>
+    <% f.with_label(for: "field-email") { "Email" } %>
+    <% f.with_field_content do %>
+      <%= render(Shadcn::Input::Component.new(id: "field-email", type: "email", placeholder: "m@example.com")) %>
+    <% end %>
+    <% f.with_description { "We will never share your email." } %>
+  <% end %>
+  <%= render(Shadcn::Field::Separator::Component.new) { "Or" } %>
+  <%= render(Shadcn::Field::Component.new(orientation: :horizontal)) do |f| %>
+    <%# The Switch is a `<button role="switch">`, and a `<label for>` names it:
+        button is a labelable element, and the accessibility tree agrees —
+        measured, after this comment claimed the opposite. %>
+    <% f.with_label(for: "field-news") { "Subscribe to the newsletter" } %>
+    <% f.with_field_content do %>
+      <%= render(Shadcn::Switch::Component.new(id: "field-news")) %>
+    <% end %>
+  <% end %>
+  <%= render(Shadcn::Field::Component.new) do |f| %>
+    <% f.with_label(for: "field-password") { "Password" } %>
+    <% f.with_field_content do %>
+      <%= render(Shadcn::Input::Component.new(id: "field-password", type: "password",
+                                              "aria-invalid": "true",
+                                              "aria-describedby": "field-password-error")) %>
+    <% end %>
+    <% f.with_error(id: "field-password-error",
+                    errors: ["Password is too short", "Password needs a digit"]) %>
+  <% end %>
+<% end %>

data/app/components/shadcn/field/previews/form_builder.html.erb

@@ -0,0 +1,38 @@
+<%# The FormBuilder integration: ids, names, error text, `aria-invalid` and
+    `aria-describedby` all come from the model. %>
+<% signup = Struct.new(:email, :bio, :plan, :newsletter, :visibility, :agreed, :errors, keyword_init: true) do
+     def self.name = "Signup"
+     def to_model = self
+     def model_name = ActiveModel::Name.new(self.class, nil, "Signup")
+     def persisted? = false
+     def to_key = nil
+   end.new(
+     email: "not-an-email", bio: "Rails developer.", plan: "pro",
+     newsletter: true, visibility: "public", agreed: false,
+     errors: ActiveModel::Errors.new(Object.new).tap { |e|
+       e.add(:email, "must contain @")
+       e.add(:email, "is too short (minimum is 6 characters)")
+     }
+   ) %>
+
+<%= shadcn_form_with(model: signup, url: "#", scope: :signup, class: "w-[420px]") do |f| %>
+  <%= render(Shadcn::Field::Group::Component.new) do %>
+    <%= f.shadcn_input_field :email, label: "Email", description: "We never share it.", type: "email" %>
+
+    <%= f.shadcn_textarea_field :bio, label: "Bio", description: "A sentence or two." %>
+
+    <%= f.shadcn_field :plan, label: "Plan" do %>
+      <%= f.shadcn_select :plan, [["Free", "free"], ["Pro", "pro"]], placeholder: "Choose a plan" %>
+    <% end %>
+
+    <%= f.shadcn_field :visibility, label: "Visibility" do %>
+      <%= f.shadcn_radio_group :visibility, [["Public", "public"], ["Private", "private"]] %>
+    <% end %>
+
+    <%= f.shadcn_switch_field :newsletter, label: "Send me the newsletter" %>
+
+    <%= f.shadcn_checkbox_field :agreed, label: "I accept the terms" %>
+
+    <%= f.shadcn_submit "Create account" %>
+  <% end %>
+<% end %>