shadcn_view_component 0.3.3

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

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Button
+    # Port of registry/new-york-v4/ui/button.tsx
+    class Component < ApplicationViewComponent
+      default_tag :button
+      slot_name :button
+
+      style do
+        base {
+          "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium " \
+          "whitespace-nowrap transition-all outline-none focus-visible:border-ring " \
+          "focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none " \
+          "disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 " \
+          "dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 " \
+          "[&_svg:not([class*='size-'])]:size-4"
+        }
+
+        variants {
+          variant {
+            default { "bg-primary text-primary-foreground hover:bg-primary/90" }
+            destructive {
+              "bg-destructive text-white hover:bg-destructive/90 " \
+              "focus-visible:ring-destructive/20 dark:bg-destructive/60 " \
+              "dark:focus-visible:ring-destructive/40"
+            }
+            outline {
+              "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground " \
+              "dark:border-input dark:bg-input/30 dark:hover:bg-input/50"
+            }
+            secondary { "bg-secondary text-secondary-foreground hover:bg-secondary/80" }
+            ghost { "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50" }
+            link { "text-primary underline-offset-4 hover:underline" }
+          }
+
+          size {
+            default { "h-9 px-4 py-2 has-[>svg]:px-3" }
+            xs {
+              "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 " \
+              "[&_svg:not([class*='size-'])]:size-3"
+            }
+            sm { "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5" }
+            lg { "h-10 rounded-md px-6 has-[>svg]:px-4" }
+            icon { "size-9" }
+            # `send` is how the DSL takes variant names that are not valid Ruby
+            # method names — the keys have to stay identical to the TSX ones.
+            send(:"icon-xs") { "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3" }
+            send(:"icon-sm") { "size-8" }
+            send(:"icon-lg") { "size-10" }
+          }
+        }
+
+        defaults { { variant: :default, size: :default } }
+      end
+
+      # Ruby equivalent of shadcn's exported `buttonVariants` — other components
+      # (pagination links, dialog footers, …) borrow the button's classes.
+      def self.variant_classes(variant: :default, size: :default, class: nil)
+        style_config.compile(
+          default_style_name.to_sym,
+          variant: variant&.to_sym,
+          size: size&.to_sym,
+          class: binding.local_variable_get(:class)
+        )
+      end
+
+      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 style_variants
+        { variant:, size: }
+      end
+
+      def element_attributes(**defaults)
+        super(**{ "data-variant" => variant, "data-size" => size }.merge(defaults))
+      end
+    end
+  end
+end

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

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Button
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # @param variant select { choices: [default, destructive, outline, secondary, ghost, link] }
+      # @param size select { choices: [default, xs, sm, lg, icon, icon-xs, icon-sm, icon-lg] }
+      # @param disabled toggle
+      def playground(variant: :default, size: :default, disabled: false)
+        render_component(variant:, size:, disabled:) { "Button" }
+      end
+
+      def variants
+        render_with_template
+      end
+
+      def sizes
+        render_with_template
+      end
+
+      # `as:` is the equivalent of shadcn's `asChild`.
+      def as_link
+        render_component(as: :a, href: "#", variant: :link) { "A link that looks like a button" }
+      end
+    end
+  end
+end

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

@@ -0,0 +1,8 @@
+<div class="flex flex-wrap items-center gap-2">
+  <%= render(Shadcn::Button::Component.new) { "Button" } %>
+  <%= render(Shadcn::Button::Component.new(variant: :outline)) { "Outline" } %>
+  <%= render(Shadcn::Button::Component.new(disabled: true)) { "Disabled" } %>
+  <%= render(Shadcn::Button::Component.new(size: :icon, "aria-label": "Loading")) do %>
+    <%= render(Shadcn::Spinner::Component.new) %>
+  <% end %>
+</div>

data/app/components/shadcn/button/previews/sizes.html.erb

@@ -0,0 +1,5 @@
+<div class="flex flex-wrap items-center gap-2">
+  <% [:xs, :sm, :default, :lg].each do |size| %>
+    <%= render(Shadcn::Button::Component.new(size:, variant: :outline)) { size.to_s } %>
+  <% end %>
+</div>

data/app/components/shadcn/button/previews/variants.html.erb

@@ -0,0 +1,5 @@
+<div class="flex flex-wrap items-center gap-2">
+  <% %i[default secondary destructive outline ghost link].each do |variant| %>
+    <%= render(Shadcn::Button::Component.new(variant:)) { variant.to_s.capitalize } %>
+  <% end %>
+</div>

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

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module ButtonGroup
+    # Port of registry/new-york-v4/ui/button-group.tsx
+    class Component < ApplicationViewComponent
+      slot_name :"button-group"
+
+      style do
+        base {
+          "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 " \
+          "[&>*]:focus-visible:relative [&>*]:focus-visible:z-10 " \
+          "has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md " \
+          "[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1"
+        }
+
+        variants {
+          orientation {
+            horizontal {
+              "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 " \
+              "[&>*:not(:last-child)]:rounded-r-none"
+            }
+            vertical {
+              "flex-col [&>*:not(:first-child)]:rounded-t-none " \
+              "[&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
+            }
+          }
+        }
+
+        defaults { { orientation: :horizontal } }
+      end
+
+      attr_reader :orientation
+
+      # Left nil rather than defaulted, because upstream destructures
+      # `orientation` with no default: the classes fall back to horizontal via
+      # cva's `defaultVariants`, but `data-orientation` is only emitted when the
+      # caller actually passed one.
+      def initialize(orientation: nil, **attributes)
+        @orientation = orientation&.to_sym
+        super(**attributes)
+      end
+
+      def style_variants
+        { orientation: orientation || :horizontal }
+      end
+
+      def element_attributes(**defaults)
+        super(**{ role: "group", "data-orientation" => orientation }.merge(defaults))
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,18 @@
+<div class="flex flex-col gap-6">
+  <%= render(Shadcn::ButtonGroup::Component.new) do %>
+    <%= render(Shadcn::Button::Component.new(variant: :outline)) { "Copy" } %>
+    <%= render(Shadcn::Button::Component.new(variant: :outline)) { "Paste" } %>
+    <%= render(Shadcn::Button::Component.new(variant: :outline)) { "Cut" } %>
+  <% end %>
+
+  <%= render(Shadcn::ButtonGroup::Component.new) do %>
+    <%= render(Shadcn::ButtonGroup::Text::Component.new) { "https://" } %>
+    <%= render(Shadcn::Input::Component.new(placeholder: "example.com")) %>
+  <% end %>
+
+  <%= render(Shadcn::ButtonGroup::Component.new) do %>
+    <%= render(Shadcn::Button::Component.new(variant: :outline)) { "Undo" } %>
+    <%= render(Shadcn::ButtonGroup::Separator::Component.new) %>
+    <%= render(Shadcn::Button::Component.new(variant: :outline)) { "Redo" } %>
+  <% end %>
+</div>

data/app/components/shadcn/button_group/previews/vertical.html.erb

@@ -0,0 +1,5 @@
+<%= render(Shadcn::ButtonGroup::Component.new(orientation: :vertical)) do %>
+  <%= render(Shadcn::Button::Component.new(variant: :outline)) { "Top" } %>
+  <%= render(Shadcn::Button::Component.new(variant: :outline)) { "Middle" } %>
+  <%= render(Shadcn::Button::Component.new(variant: :outline)) { "Bottom" } %>
+<% end %>

data/app/components/shadcn/button_group/separator/component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module ButtonGroup
+    module Separator
+      # ButtonGroupSeparator renders a Separator rather than a bare element, and
+      # overrides three things about it: the `data-slot`, the default
+      # orientation, and a handful of classes layered on top of the separator's
+      # own — `cn(separatorClasses, …)` in the TSX.
+      #
+      # Borrowing the parent's compiled classes rather than restating them is
+      # the same move `PaginationLink` makes with `Button`, and is why
+      # `parity_spec` lists this family as inheriting from `separator`.
+      class Component < Shadcn::Separator::Component
+        slot_name :"button-group-separator"
+
+        EXTRA_CLASSES = "relative m-0! self-stretch bg-input " \
+                        "data-[orientation=vertical]:h-auto"
+
+        def initialize(orientation: :vertical, **attributes)
+          super(orientation:, **attributes)
+        end
+
+        def css_classes(extra = nil)
+          super([ EXTRA_CLASSES, extra ].compact.join(" "))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/button_group/text/component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module ButtonGroup
+    module Text
+      # ButtonGroupText. Deliberately has no `data-slot`: upstream emits none,
+      # so `slot_name` is never called and `element_attributes` drops the key.
+      #
+      # Its `asChild` is the base class's `as:`, which needs no code here.
+      class Component < ApplicationViewComponent
+        style do
+          base {
+            "flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium " \
+            "shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4"
+          }
+        end
+      end
+    end
+  end
+end