shadcn_view_component 0.3.3

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

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module ThemeSelector
+    # Port of apps/v4/components/theme-selector.tsx — the select that swaps the
+    # colour palette.
+    #
+    # In React this reads `useThemeConfig()`; here each option hands its value
+    # to the `shadcn--theme` Stimulus controller, which swaps the `theme-*`
+    # class the way shadcn's `ActiveThemeProvider` does.
+    class Component < ApplicationViewComponent
+      slot_name :"theme-selector"
+
+      style do
+        base { "flex items-center gap-2" }
+      end
+
+      attr_reader :themes, :value
+
+      # @param themes [Array<Hash>] entries from ShadcnViewComponent::Themes
+      # @param value [String] the palette currently applied
+      def initialize(themes: ShadcnViewComponent::Themes::BASE_COLORS,
+                     value: ShadcnViewComponent::Themes::DEFAULT,
+                     label: nil,
+                     **attributes)
+        @themes = themes
+        @value = value.to_s
+        @label = label
+        super(**attributes)
+      end
+
+      def label
+        @label || shadcn_t("theme.label")
+      end
+
+      def label_id
+        @label_id ||= "shadcn-theme-selector-#{SecureRandom.hex(4)}"
+      end
+
+      def element_attributes(**defaults)
+        super(**{ "data-controller" => "shadcn--theme" }.merge(defaults))
+      end
+
+      def call
+        render_element(body: safe_join([ hidden_label, select ]))
+      end
+
+      private
+
+      def hidden_label
+        render(Label::Component.new(id: label_id, class: "sr-only")) { label }
+      end
+
+      def select
+        render(Select::Component.new(value:, placeholder: "Select a theme")) do |component|
+          component.with_trigger(
+            "aria-labelledby" => label_id,
+            class: "w-36",
+            placeholder: current_title.nil?
+          ) do |trigger|
+            trigger.with_value(placeholder: "Select a theme") { current_title }
+          end
+          component.with_select_content { options }
+        end
+      end
+
+      def current_title
+        ShadcnViewComponent::Themes.find(value)&.fetch(:title)
+      end
+
+      def options
+        render(Select::Group::Component.new) do
+          safe_join([ render(Select::Label::Component.new) { label } ] + items)
+        end
+      end
+
+      def items
+        themes.map do |theme|
+          render(Select::Item::Component.new(
+            value: theme[:name],
+            selected: theme[:name] == value,
+            "data-action": "click->shadcn--theme#setTheme"
+          )) { theme[:title] }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module ThemeSelector
+    class Preview < ApplicationViewComponentPreview
+      # The base colours a project picks from.
+      def default
+        render_with_template
+      end
+
+      # Every palette in the registry, accents included.
+      def all_themes
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/theme_selector/previews/all_themes.html.erb

@@ -0,0 +1,20 @@
+<div class="flex flex-col gap-6">
+  <%= render(Shadcn::ThemeSelector::Component.new(
+        themes: ShadcnViewComponent::Themes::ALL,
+        value: shadcn_theme_name,
+        label: "Palette"
+      )) %>
+
+  <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
+    <% ShadcnViewComponent::Themes::ALL.each do |theme| %>
+      <div class="theme-<%= theme[:name] %> flex flex-col gap-2 rounded-lg border bg-card p-3">
+        <span class="text-xs font-medium text-card-foreground"><%= theme[:title] %></span>
+        <div class="flex gap-1">
+          <% %w[bg-primary bg-secondary bg-muted bg-accent bg-destructive].each do |swatch| %>
+            <span class="size-5 rounded-sm border <%= swatch %>"></span>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,18 @@
+<div class="flex flex-col gap-6">
+  <%= render(Shadcn::ThemeSelector::Component.new(value: shadcn_theme_name)) %>
+
+  <%= render(Shadcn::Card::Component.new(class: "w-full max-w-sm")) do |card| %>
+    <% card.with_header do |header| %>
+      <% header.with_title { "Pick a palette" } %>
+      <% header.with_description { "The theme-* class on <body> re-points every token." } %>
+    <% end %>
+    <% card.with_card_content do %>
+      <div class="flex flex-wrap gap-2">
+        <%= render(Shadcn::Button::Component.new) { "Primary" } %>
+        <%= render(Shadcn::Button::Component.new(variant: :secondary)) { "Secondary" } %>
+        <%= render(Shadcn::Button::Component.new(variant: :destructive)) { "Destructive" } %>
+        <%= render(Shadcn::Badge::Component.new) { "Badge" } %>
+      </div>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,139 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Toaster
+    # Ours, not a port — and the distinction matters more here than anywhere
+    # else in this gem.
+    #
+    # `sonner.tsx` is forty lines and emits no `data-slot` at all: a theme, five
+    # icons and four custom properties handed to the `sonner` package, which
+    # supplies every element and every rule — 1,601 lines of TypeScript and 729
+    # of CSS. There is no upstream markup here to be 1:1 with, so `parity_spec`
+    # has nothing to check and this component's shape is this port's own.
+    #
+    # What is kept from upstream is what can be: sonner's measurements, read
+    # from its stylesheet — 356px wide, 14px between, 24px from the edge, four
+    # seconds of life — and the four colours `sonner.tsx` itself chooses, which
+    # are the popover's.
+    #
+    # And the way in is Rails': a toast is a component, so the server can raise
+    # one. Three routes, in order of how much an app will use them —
+    #
+    #   flash            `Toaster::Component.new(flash:)` turns each into a toast
+    #   turbo_stream     `turbo_stream.append "shadcn-toasts", …` onto this list
+    #   javascript       `document.dispatchEvent(new CustomEvent("shadcn--toast", …))`
+    #
+    # — where sonner has only the third. See features/toaster.md.
+    class Component < ApplicationViewComponent
+      POSITIONS = {
+        "top-left" => "top-6 left-6 items-start",
+        "top-center" => "top-6 left-1/2 -translate-x-1/2 items-center",
+        "top-right" => "top-6 right-6 items-end",
+        "bottom-left" => "bottom-6 left-6 items-start",
+        "bottom-center" => "bottom-6 left-1/2 -translate-x-1/2 items-center",
+        "bottom-right" => "bottom-6 right-6 items-end"
+      }.freeze
+
+      # sonner's own, so a caller who has read its docs is not surprised.
+      DEFAULT_DURATION = 4000
+
+      renders_many :toasts, "Shadcn::Toaster::Toast::Component"
+
+      # A `<section>`, as sonner renders (index.tsx:788): `aria-label` on a bare
+      # `<div>` is prohibited ARIA — a label needs a role to belong to, and a
+      # section is the landmark that has one.
+      default_tag :section
+      slot_name :toaster
+
+      attr_reader :position, :duration, :list_id, :flash
+
+      def initialize(position: "bottom-right", duration: DEFAULT_DURATION,
+                     list_id: "shadcn-toasts", flash: nil, **attributes)
+        @position = POSITIONS.key?(position.to_s) ? position.to_s : "bottom-right"
+        @duration = duration
+        @list_id = list_id
+        @flash = flash
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          class: "group/toaster pointer-events-none fixed z-[100] flex " \
+                 "#{POSITIONS.fetch(position)}",
+          "aria-live" => "polite",
+          # sonner's own (index.tsx:792): each toast is read on its own, not as
+          # a re-reading of the whole stack every time one arrives.
+          "aria-atomic" => "false",
+          "aria-label" => shadcn_t("toaster.label"),
+          "data-position" => position,
+          "data-controller" => "shadcn--toaster",
+          "data-shadcn--toaster-duration-value" => duration,
+          "data-action" => "shadcn--toast@document->shadcn--toaster#raise"
+        }.merge(defaults))
+      end
+
+      def call
+        render_element(body: safe_join([ list, template ]))
+      end
+
+      private
+
+      # The element a `turbo_stream.append` aims at, which is why it has an id
+      # by default and why the id is an argument rather than generated.
+      def list
+        tag.ol(safe_join([ flash_toasts, toasts, content ].flatten.compact),
+               id: list_id,
+               # The stack, and it is a stack rather than a column: the toasts
+               # are absolutely placed inside this box and the controller writes
+               # where each one sits. `w-[356px]` is sonner's width, and the
+               # height is the controller's — it is what the pointer has to be
+               # inside for the stack to open.
+               # No transition on the height, and that is deliberate: this box is
+               # the area a pointer has to be inside for the stack to stay open,
+               # and an area that arrives four hundred milliseconds late is an
+               # area that is wrong while it matters. The toasts animate; the
+               # box they are in does not. Measured in a browser that runs no
+               # animation frames, a transition here left it at zero for good.
+               class: "relative w-[356px] max-w-[calc(100vw-2rem)]",
+               "data-shadcn--toaster-target": "list",
+               "data-action": "pointerenter->shadcn--toaster#hold " \
+                              "pointerleave->shadcn--toaster#release " \
+                              "focusin->shadcn--toaster#hold " \
+                              "focusout->shadcn--toaster#release")
+      end
+
+      # Rails' own flash, rendered with the page. `:notice` and `:alert` are the
+      # two `redirect_to` sets without being asked, so they are mapped rather
+      # than left to be configured.
+      FLASH_VARIANTS = { "notice" => :success, "alert" => :error, "error" => :error,
+                        "warning" => :warning, "info" => :info }.freeze
+
+      def flash_toasts
+        return [] if flash.blank?
+
+        flash.map do |key, message|
+          next if message.blank?
+
+          render(Toast::Component.new(title: message, variant: FLASH_VARIANTS.fetch(key.to_s, :default)))
+        end.compact
+      end
+
+      # The shapes the JavaScript route clones — one per variant, because a
+      # variant is not only an attribute: `success` has an icon and `default`
+      # has none, and no attribute set afterwards can conjure an element that
+      # was never rendered. That is what the first version of this did, and the
+      # toasts it made came out blank-faced.
+      #
+      # Rendered in Ruby so the class strings live in one place. A controller
+      # that builds this markup from string literals is a second copy of every
+      # class in this file, kept in step by hand.
+      def template
+        safe_join(Toast::Component::VARIANTS.keys.map { |variant|
+          tag.template("data-shadcn--toaster-target": "template", "data-variant": variant) do
+            render(Toast::Component.new(title: "", description: "", variant:))
+          end
+        })
+      end
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Toaster
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Rendered with the page, which is what a Rails flash does.
+      def from_the_server
+        render_with_template
+      end
+    end
+  end
+end

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

@@ -0,0 +1,19 @@
+<%# The JavaScript route: an event on the document, which the toaster hears
+    wherever it is on the page. `sonner`'s `toast()` is a function you import;
+    this is an event, because a Rails app has no bundler step to import into. %>
+<div class="flex flex-wrap items-center gap-2">
+  <% [["default", "Event created"],
+      ["success", "Changes saved"],
+      ["info", "A new version is available"],
+      ["warning", "Your trial ends on Friday"],
+      ["error", "Could not save changes"]].each do |variant, message| %>
+    <%= render(Shadcn::Button::Component.new(
+          variant: :outline,
+          onclick: "document.dispatchEvent(new CustomEvent('shadcn--toast', { detail: " \
+                   "{ title: #{message.to_json}, description: 'Sunday, December 03, 2023 at 9:00 AM', " \
+                   "variant: #{variant.to_json} } }))"
+        )) { variant.capitalize } %>
+  <% end %>
+</div>
+
+<%= render(Shadcn::Toaster::Component.new) %>

data/app/components/shadcn/toaster/previews/from_the_server.html.erb

@@ -0,0 +1,15 @@
+<%# The two routes sonner does not have.
+
+    Rendered with the page — which is what `Toaster::Component.new(flash:)` does
+    with a Rails flash, mapping `:notice` and `:alert` to the two variants
+    `redirect_to` produces without being asked — and appended afterwards, which
+    is what a `turbo_stream.append "shadcn-toasts"` does. Both arrive as ordinary
+    elements in the list, and the controller starts their clocks because it
+    watches the list rather than being told. %>
+<%= render(Shadcn::Toaster::Component.new(position: "top-center", duration: 0)) do |t| %>
+  <% t.with_toast(title: "Rendered with the page", description: "A flash, or anything else the server knows.", variant: :success) %>
+  <% t.with_toast(title: "Appended afterwards", description: "A turbo_stream.append onto this same list.", variant: :info) do |toast| %>
+    <% toast.with_action(variant: :outline, size: :sm) { "Undo" } %>
+  <% end %>
+  <% t.with_toast(title: "Still working", description: "A loading toast keeps no clock at all.", variant: :loading) %>
+<% end %>

data/app/components/shadcn/toaster/toast/component.rb

@@ -0,0 +1,134 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Toaster
+    module Toast
+      # One toast.
+      #
+      # A real component rather than a shape the JavaScript builds, because the
+      # most useful way to raise one in a Rails app is from the server: a flash
+      # rendered with the page, or a `turbo_stream.append` onto the list. The
+      # controller then only has to start its clock and take it away again.
+      class Component < ApplicationViewComponent
+        VARIANTS = {
+          default: nil,
+          success: "circle-check",
+          info: "info",
+          warning: "triangle-alert",
+          error: "octagon-x",
+          loading: "loader-circle"
+        }.freeze
+
+        default_tag :li
+        slot_name :toast
+
+        style do
+          base {
+            # sonner's own measurements, read from its stylesheet: 356px wide,
+            # 16px of padding, a 13px face and a soft shadow. The colours are
+            # the four custom properties `sonner.tsx` sets — popover, its
+            # foreground, the border and the radius — written here as the
+            # Tailwind tokens they point at.
+            # Absolutely placed: the toasts are a *stack*, one behind another,
+            # and the controller writes where each sits. A column would be
+            # simpler and would not be this component — the fan-out on hover is
+            # what a toaster is.
+            #
+            # The movement is a transition rather than a keyframe animation, as
+            # sonner's is: a toast moves whenever the one in front of it goes
+            # away, and an animation would have to be restarted each time where
+            # a transition simply follows.
+            "pointer-events-auto absolute right-0 flex w-full items-start gap-3 overflow-hidden " \
+            "rounded-lg border bg-popover p-4 text-[13px] text-popover-foreground " \
+            "shadow-[0_4px_12px_rgba(0,0,0,0.1)] transition-all duration-[400ms] " \
+            "data-[state=closed]:opacity-0"
+          }
+
+          variants {
+            variant {
+              default { "" }
+              success { "[&_[data-slot=toast-icon]]:text-emerald-600 dark:[&_[data-slot=toast-icon]]:text-emerald-400" }
+              info { "[&_[data-slot=toast-icon]]:text-blue-600 dark:[&_[data-slot=toast-icon]]:text-blue-400" }
+              warning { "[&_[data-slot=toast-icon]]:text-amber-600 dark:[&_[data-slot=toast-icon]]:text-amber-400" }
+              error { "[&_[data-slot=toast-icon]]:text-destructive" }
+              loading { "[&_[data-slot=toast-icon]]:animate-spin" }
+            }
+          }
+
+          defaults { { variant: :default } }
+        end
+
+        renders_one :action, "Shadcn::Button::Component"
+
+        attr_reader :variant, :title, :description, :duration, :dismissible
+
+        def initialize(title: nil, description: nil, variant: :default, duration: nil,
+                       dismissible: true, **attributes)
+          @variant = VARIANTS.key?(variant&.to_sym) ? variant.to_sym : :default
+          @title = title
+          @description = description
+          @duration = duration
+          @dismissible = dismissible
+          super(**attributes)
+        end
+
+        def style_variants = { variant: }
+
+        def element_attributes(**defaults)
+          # No `role` here, and sonner sets none either (index.tsx renders a bare
+          # `<li>`): a role on an `<li>` replaces its implicit `listitem`, and
+          # an `<ol>` whose children are not list items is a list axe fails and
+          # a screen reader miscounts. The announcement comes from the region's
+          # `aria-live`, which is where sonner puts it too (index.tsx:790).
+          super(**{
+            "data-variant" => variant,
+            "data-state" => "open",
+            "data-duration" => duration,
+            "data-shadcn--toaster-target" => "toast"
+          }.compact.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([ icon, body, dismiss ].compact))
+        end
+
+        private
+
+        def icon
+          name = VARIANTS[variant]
+          return unless name
+
+          render(Icon::Component.new(name, class: "size-4 shrink-0", "data-slot": "toast-icon"))
+        end
+
+        def body
+          tag.div(class: "flex min-w-0 flex-1 flex-col gap-1") do
+            safe_join([
+              (tag.div(title, class: "font-medium", "data-slot": "toast-title") if title),
+              (tag.div(description, class: "text-muted-foreground", "data-slot": "toast-description") if description),
+              (tag.div(action, class: "pt-1") if action?),
+              content
+            ].compact)
+          end
+        end
+
+        def dismiss
+          return unless dismissible
+
+          # Always visible, where sonner reveals its own on hover. sonner can
+          # afford to hide it because a toast there is also dismissed by
+          # swiping it away; this port has no swipe, so the button is the only
+          # way out — and a control that appears on hover is not a control on a
+          # phone.
+          tag.button(
+            type: "button",
+            class: "absolute top-2 right-2 rounded-sm text-muted-foreground transition-colors " \
+                   "hover:text-foreground",
+            "aria-label": shadcn_t("toaster.dismiss"),
+            "data-action": "click->shadcn--toaster#dismiss"
+          ) { render(Icon::Component.new("x", class: "size-4")) }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Toggle
+    # Port of registry/new-york-v4/ui/toggle.tsx
+    class Component < ApplicationViewComponent
+      default_tag :button
+      slot_name :toggle
+
+      style do
+        base {
+          "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium " \
+          "whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted " \
+          "hover:text-muted-foreground 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 " \
+          "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground " \
+          "dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none " \
+          "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+        }
+
+        variants {
+          variant {
+            default { "bg-transparent" }
+            outline {
+              "border border-input bg-transparent shadow-xs hover:bg-accent " \
+              "hover:text-accent-foreground"
+            }
+          }
+
+          size {
+            default { "h-9 min-w-9 px-2" }
+            sm { "h-8 min-w-8 px-1.5" }
+            lg { "h-10 min-w-10 px-2.5" }
+          }
+        }
+
+        defaults { { variant: :default, size: :default } }
+      end
+
+      # Exposed the way shadcn exports `toggleVariants`, for ToggleGroupItem.
+      def self.variant_classes(variant: :default, size: :default, class: nil)
+        style_config.compile(
+          default_style_name.to_sym,
+          variant: variant&.to_sym || :default,
+          size: size&.to_sym || :default,
+          class: binding.local_variable_get(:class)
+        )
+      end
+
+      attr_reader :variant, :size, :pressed, :disabled
+
+      def initialize(variant: :default, size: :default, pressed: false, disabled: false,
+                     **attributes)
+        @variant = variant&.to_sym || :default
+        @size = size&.to_sym || :default
+        @pressed = pressed
+        @disabled = disabled
+        super(**attributes)
+      end
+
+      def style_variants
+        { variant:, size: }
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          type: "button",
+          disabled: (true if disabled),
+          "aria-pressed" => pressed.to_s,
+          "data-state" => (pressed ? "on" : "off"),
+          "data-disabled" => (true if disabled),
+          "data-controller" => "shadcn--toggle",
+          "data-shadcn--toggle-pressed-value" => pressed,
+          "data-shadcn--toggle-disabled-value" => disabled,
+          "data-action" => "shadcn--toggle#toggle"
+        }.merge(defaults))
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,6 @@
+<div class="flex items-center gap-2">
+  <%= render(Shadcn::Toggle::Component.new) { "Default" } %>
+  <%= render(Shadcn::Toggle::Component.new(variant: :outline, pressed: true)) { "Outline, on" } %>
+  <%= render(Shadcn::Toggle::Component.new(size: :sm)) { "Small" } %>
+  <%= render(Shadcn::Toggle::Component.new(size: :lg, disabled: true)) { "Disabled" } %>
+</div>

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

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module ToggleGroup
+    # Port of registry/new-york-v4/ui/toggle-group.tsx
+    #
+    # React passes variant/size/spacing down through context; here the group
+    # exposes them to its items through the slot, which is the same idea.
+    class Component < ApplicationViewComponent
+      include Concerns::SubmitsValue
+      renders_many :items, ->(**kwargs, &block) {
+        Item::Component.new(variant:, size:, spacing:, **kwargs, &block)
+      }
+
+      slot_name :"toggle-group"
+
+      style do
+        base {
+          "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md " \
+          "data-[spacing=default]:data-[variant=outline]:shadow-xs"
+        }
+      end
+
+      attr_reader :type, :variant, :size, :spacing, :value, :name
+
+      def initialize(type: :single, variant: :default, size: :default, spacing: 0,
+                     value: nil, name: nil, **attributes)
+        @type = type&.to_sym || :single
+        @variant = variant&.to_sym || :default
+        @size = size&.to_sym || :default
+        @spacing = spacing
+        @value = Array(value).compact.join(",")
+        @name = name
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          "data-variant" => variant,
+          "data-size" => size,
+          "data-spacing" => spacing,
+          style: [ attributes[:style], "--gap: #{spacing}" ].compact.join(";"),
+          "data-controller" => "shadcn--toggle-group",
+          "data-shadcn--toggle-group-type-value" => type,
+          "data-shadcn--toggle-group-value-value" => value
+        }.merge(defaults))
+      end
+
+      def call
+        render_element(body: safe_join([ items, content, hidden_input ].flatten.compact))
+      end
+
+      private
+
+      def hidden_input
+        return unless name
+
+        tag.input(**hidden_input_attributes("data-shadcn--toggle-group-target" => "input"))
+      end
+    end
+  end
+end