shadcn_view_components 0.2.0

data/app/components/shadcn/resizable.rb

@@ -0,0 +1,77 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # ペインリサイズ。ハンドルのドラッグ/矢印キーで前後パネルの
+  # flex-basis を配分する(10-roadmap Phase 3 の「CSS grid」案を
+  # flex-basis で実装したもの。契約・parity は flex 前提)
+  # JS無効時フォールバック: Graceful(静的レイアウトとして表示される)
+  # Resizable自体は名前空間であり、描画には配下のクラスを使う。
+  module Resizable
+    class PanelGroup < BaseComponent
+      # div(水平flex。配置方向は data-orientation のクラス契約に従う)
+      CONTROLLER = "shadcn--resizable"
+
+      sig do
+        params(orientation: T.any(Symbol, String), args: T::Hash[Symbol, T.untyped]).void.checked(:never)
+      end
+      def initialize(orientation: self.class.property_default(:orientation), **args)
+        assign_accessibility_root_id(args, prefix: "resizable")
+        @orientation = T.let(normalize_property(:orientation, orientation), String)
+        super(**args)
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = super
+        attributes[:role] = "group"
+        merge_style(attributes, { display: "flex" })
+        merge_nested(attributes, :data, { controller: CONTROLLER, orientation: @orientation })
+        attributes
+      end
+    end
+
+    class Panel < BaseComponent
+      # div。flex-grow の比率は利用者が style で指定する(既定 1)
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = super
+        merge_style(attributes, { "flex-grow": "1", "flex-basis": "0", overflow: "auto",
+                                  "min-width": "0", "min-height": "0" })
+        attributes
+      end
+    end
+
+    class Handle < BaseComponent
+      # ドラッグで前後パネルの幅を配分する(キーボードは矢印キー)。
+      # orientation はセパレータ自身の向き(縦積みグループでは horizontal)で、
+      # グループの orientation の逆になる
+      sig do
+        params(orientation: T.any(Symbol, String), args: T::Hash[Symbol, T.untyped]).void.checked(:never)
+      end
+      def initialize(orientation: self.class.property_default(:orientation), **args)
+        @orientation = T.let(normalize_property(:orientation, orientation), String)
+        super(**args)
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = super
+        attributes[:role] = "separator"
+        attributes[:tabindex] = "0"
+        merge_nested(attributes, :aria, {
+                       orientation: @orientation,
+                       valuemin: "10",
+                       valuemax: "90",
+                       valuenow: "50"
+                     })
+        merge_style(attributes, { cursor: @orientation == "vertical" ? "col-resize" : "row-resize",
+                                  flex: "0 0 auto" })
+        merge_nested(attributes, :data, {
+                       action: "mousedown->shadcn--resizable#startDrag keydown->shadcn--resizable#nudge"
+                     })
+        attributes
+      end
+    end
+  end
+end

data/app/components/shadcn/scroll_area.rb

@@ -0,0 +1,59 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  class ScrollArea < BaseComponent
+    # 契約タグは ScrollAreaPrimitive.Root/Viewport。ネイティブな CSSスクロールで再現する
+    # (05-stimulus-hotwire §3「scroll-area = CSSユーティリティ」)。
+    # overflow-auto は本ライブラリの装飾(契約クラスはRadixの構造前提のため)
+    sig { override.returns(String) }
+    def call
+      content_tag(tag, **html_attributes) do
+        content_tag(:div, class: viewport_class, data: { slot: "scroll-area-viewport" }) { content }
+      end
+    end
+
+    private
+
+    sig { returns(String) }
+    def viewport_class
+      contract_class = T.cast(contract_slot("scroll-area-viewport").dig(:static_attributes, :class), T.nilable(String))
+      [contract_class, "size-full overflow-auto"].compact.join(" ")
+    end
+
+    class Scrollbar < BaseComponent
+      # ネイティブCSSスクロールでは独自スクロールバー部品は不要。契約構造を保つため
+      # 描画するが、表示はCSSスクロールバーが担う。
+      # base-nova では orientation は契約propではなく data-orientation 属性
+      # (クラスは data-horizontal: / data-vertical: のCSS variantで追従する)
+      sig do
+        params(orientation: T.any(Symbol, String), args: T::Hash[Symbol, T.untyped]).void.checked(:never)
+      end
+      def initialize(orientation: self.class.property_default(:orientation), **args)
+        @orientation = T.let(normalize_property(:orientation, orientation), String)
+        super(**args)
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = super
+        merge_nested(attributes, :data, { orientation: @orientation })
+        attributes
+      end
+
+      sig { override.returns(String) }
+      def call
+        content_tag(tag, **html_attributes) do
+          content_tag(:span, data: { slot: "scroll-area-thumb" }, class: thumb_class) { content }
+        end
+      end
+
+      private
+
+      sig { returns(String) }
+      def thumb_class
+        T.cast(contract_slot("scroll-area-thumb").dig(:static_attributes, :class), T.nilable(String)).to_s
+      end
+    end
+  end
+end

data/app/components/shadcn/select.rb

@@ -0,0 +1,356 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # 単一選択のcombobox + listbox。確定値はルート直下のhidden inputだけに保持し、
+  # 表示値・選択ARIA・ハイライトは専用Stimulus controllerがそこから導出する。
+  # JS不要、multiple、ネイティブ制約検証が必要な場合はNativeSelectを使う。
+  class Select < BaseComponent
+    CONTROLLER = "shadcn--select"
+
+    sig do
+      params(
+        name: T.nilable(T.any(String, Symbol)),
+        default_value: T.nilable(T.any(String, Symbol, Integer, Float)),
+        disabled: T::Boolean,
+        args: T::Hash[Symbol, T.untyped]
+      ).void.checked(:never)
+    end
+    def initialize(name: nil, default_value: nil, disabled: false, **args)
+      assign_accessibility_root_id(args, prefix: "select")
+      @name = T.let(name&.to_s, T.nilable(String))
+      @default_value = T.let(default_value&.to_s, T.nilable(String))
+      @disabled = T.let(disabled, T::Boolean)
+      super(**args)
+    end
+
+    # base-novaのSelect rootはDOMやclassを追加しないprimitive aliasで、生成契約も
+    # その空の契約面を記録する。Ruby側ではhidden inputとcontrollerの状態ホストを描く。
+    sig { override.returns(String) }
+    def call
+      content_tag(tag, **html_attributes) { safe_join([hidden_input, content]) }
+    end
+
+    private
+
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def html_attributes
+      attributes = super
+      data = T.cast(attributes[:data], T.nilable(T::Hash[Symbol, T.untyped])) || {}
+      defaults = {
+        slot: "select",
+        controller: CONTROLLER,
+        action: "keydown->#{CONTROLLER}#navigate focusout->#{CONTROLLER}#focusOut"
+      }
+      defaults[:disabled] = "true" if @disabled
+      attributes[:data] = defaults.merge(data)
+      attributes
+    end
+
+    sig { returns(String) }
+    def hidden_input
+      attributes = T.let(
+        {
+          type: "hidden",
+          value: @default_value.to_s,
+          data: {
+            slot: "select-input",
+            value_present: (!@default_value.nil?).to_s
+          }
+        },
+        T::Hash[Symbol, T.untyped]
+      )
+      attributes[:name] = @name if @name
+      attributes[:disabled] = true if @disabled
+      void_tag("input", **attributes)
+    end
+
+    class Trigger < BaseComponent
+      sig { params(size: T.any(Symbol, String), args: T::Hash[Symbol, T.untyped]).void.checked(:never) }
+      def initialize(size: self.class.property_default(:size), **args)
+        @size = T.let(normalize_property(:size, size), String)
+        super(**args)
+      end
+
+      sig { override.returns(String) }
+      def default_tag
+        "button"
+      end
+
+      sig { override.returns(String) }
+      def call
+        content_tag(tag, **html_attributes) { safe_join([content, chevron_icon]) }
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = super
+        attributes[:type] = "button" unless attributes.key?(:type)
+        attributes[:role] = "combobox"
+        merge_nested(attributes, :aria, { haspopup: "listbox", expanded: "false" })
+        merge_nested(attributes, :data, { size: @size, action: "click->#{CONTROLLER}#toggle" })
+        attributes
+      end
+
+      private
+
+      sig { returns(String) }
+      def chevron_icon
+        content_tag(
+          :svg,
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          class: "pointer-events-none size-4 text-muted-foreground",
+          aria: { hidden: "true" }
+        ) { raw(%(<path d="m6 9 6 6 6-6"/>)) }
+      end
+    end
+
+    class Value < BaseComponent
+      sig { params(placeholder: T.nilable(String), args: T::Hash[Symbol, T.untyped]).void.checked(:never) }
+      def initialize(placeholder: nil, **args)
+        @placeholder = T.let(placeholder, T.nilable(String))
+        super(**args)
+      end
+
+      sig { override.returns(String) }
+      def call
+        label = content.to_s
+        label = @placeholder.to_s if label.empty?
+        content_tag(tag, **html_attributes) { label }
+      end
+    end
+
+    class Content < BaseComponent
+      include Shadcn::FloatingPositionOptions
+
+      FLOATING_POSITION_DEFAULTS = T.let(
+        { side: :bottom, align: :center, side_offset: 4, align_offset: 0, collision_padding: 5 }.freeze,
+        T::Hash[Symbol, T.untyped]
+      )
+
+      # Positioner相当のラッパー > Popup > Listというupstream構造を保つ。
+      sig { override.returns(String) }
+      def call
+        content_tag(:div, class: "isolate z-50") do
+          content_tag(tag, **content_attributes) do
+            safe_join([
+                        render(ScrollUpButton.new),
+                        content_tag(
+                          :div,
+                          role: "listbox",
+                          tabindex: "-1",
+                          style: "position: relative; min-height: 0; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto"
+                        ) { content },
+                        render(ScrollDownButton.new)
+                      ])
+          end
+        end
+      end
+
+      sig { returns(T::Hash[Symbol, T.untyped]) }
+      def content_attributes
+        attributes = @html_args.merge(class: self.class.classes(extra: @user_class))
+        attributes[:role] = "presentation" unless attributes.key?(:role)
+        attributes[:popover] = "auto" unless attributes.key?(:popover)
+        merge_style(attributes, display: "flex", flex_direction: "column", overflow: "hidden")
+        merge_floating_position_data(
+          attributes,
+          slot: "select-content",
+          state: "closed",
+          closed: "",
+          align_trigger: "true"
+        )
+      end
+    end
+
+    class Group < BaseComponent
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        super.merge(role: "group")
+      end
+    end
+
+    class Item < BaseComponent
+      sig do
+        params(
+          value: T.any(String, Symbol, Integer, Float),
+          disabled: T::Boolean,
+          args: T::Hash[Symbol, T.untyped]
+        ).void.checked(:never)
+      end
+      def initialize(value:, disabled: false, **args)
+        @value = T.let(value.to_s, String)
+        @disabled = T.let(disabled, T::Boolean)
+        super(**args)
+      end
+
+      sig { override.returns(String) }
+      def call
+        content_tag(tag, **html_attributes) do
+          safe_join([item_text, item_indicator])
+        end
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = super
+        attributes[:role] = "option"
+        attributes[:tabindex] = "-1"
+        merge_nested(attributes, :aria, { selected: "false" }.merge(@disabled ? { disabled: "true" } : {}))
+        item_data = {
+          value: @value,
+          selected: "false",
+          action: "click->#{CONTROLLER}#select mouseenter->#{CONTROLLER}#highlight"
+        }
+        item_data[:disabled] = "" if @disabled
+        merge_nested(attributes, :data, item_data)
+        attributes
+      end
+
+      private
+
+      sig { returns(String) }
+      def item_text
+        content_tag(:span, class: "flex flex-1 shrink-0 gap-2 whitespace-nowrap") { content }
+      end
+
+      sig { returns(String) }
+      def item_indicator
+        content_tag(
+          :span,
+          hidden: true,
+          class: "pointer-events-none absolute right-2 flex size-4 items-center justify-center",
+          data: { indicator: "" }
+        ) { check_icon }
+      end
+
+      sig { returns(String) }
+      def check_icon
+        content_tag(
+          :svg,
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          class: "pointer-events-none",
+          aria: { hidden: "true" }
+        ) { raw(%(<path d="M20 6 9 17l-5-5"/>)) }
+      end
+    end
+
+    class Label < BaseComponent
+      # div
+    end
+
+    class Separator < BaseComponent
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        super.tap { |attributes| attributes[:role] = "presentation" unless attributes.key?(:role) }
+      end
+    end
+
+    module ChevronIcon
+      extend T::Helpers
+      extend T::Sig
+
+      requires_ancestor { BaseComponent }
+
+      private
+
+      sig { params(path: String).returns(String) }
+      def chevron_icon(path)
+        T.unsafe(self).content_tag(
+          :svg,
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          aria: { hidden: "true" }
+        ) { T.unsafe(self).raw(%(<path d="#{path}"/>)) }
+      end
+    end
+    private_constant :ChevronIcon
+
+    class ScrollUpButton < BaseComponent
+      include ChevronIcon
+
+      sig { override.returns(String) }
+      def call
+        content_tag(tag, **html_attributes) { content.presence || chevron_icon("m18 15-6-6-6 6") }
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        scroll_button_attributes(super, "up")
+      end
+
+      private
+
+      sig do
+        params(attributes: T::Hash[Symbol, T.untyped], direction: String)
+          .returns(T::Hash[Symbol, T.untyped])
+      end
+      def scroll_button_attributes(attributes, direction)
+        attributes[:hidden] = true
+        merge_nested(attributes, :aria, { hidden: "true" })
+        merge_nested(
+          attributes,
+          :data,
+          {
+            scroll_direction: direction,
+            action: "mouseenter->#{CONTROLLER}#startScroll mouseleave->#{CONTROLLER}#stopScroll"
+          }
+        )
+        merge_style(attributes, position: "absolute")
+        attributes
+      end
+    end
+
+    class ScrollDownButton < BaseComponent
+      include ChevronIcon
+
+      sig { override.returns(String) }
+      def call
+        content_tag(tag, **html_attributes) { content.presence || chevron_icon("m6 9 6 6 6-6") }
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        scroll_button_attributes(super, "down")
+      end
+
+      private
+
+      sig do
+        params(attributes: T::Hash[Symbol, T.untyped], direction: String)
+          .returns(T::Hash[Symbol, T.untyped])
+      end
+      def scroll_button_attributes(attributes, direction)
+        attributes[:hidden] = true
+        merge_nested(attributes, :aria, { hidden: "true" })
+        merge_nested(
+          attributes,
+          :data,
+          {
+            scroll_direction: direction,
+            action: "mouseenter->#{CONTROLLER}#startScroll mouseleave->#{CONTROLLER}#stopScroll"
+          }
+        )
+        merge_style(attributes, position: "absolute")
+        attributes
+      end
+    end
+  end
+end

data/app/components/shadcn/separator.rb

@@ -0,0 +1,42 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  class Separator < BaseComponent
+    # 契約タグは SeparatorPrimitive.Root。ネイティブな div(装飾区切り線)として描画する
+    sig { override.returns(String) }
+    def default_tag
+      "div"
+    end
+
+    # upstream は orientation / decorative を動的属性として持つ(規定 horizontal / true)
+    sig do
+      params(
+        orientation: T.any(Symbol, String),
+        args: T::Hash[Symbol, T.untyped]
+      ).void.checked(:never)
+    end
+    def initialize(orientation: self.class.property_default(:orientation), **args)
+      @orientation = T.let(normalize_property(:orientation, orientation), String)
+      super(**args)
+    end
+
+    sig { returns(String) }
+    attr_reader :orientation
+
+    # ネイティブ要素化に伴う追加属性(05-stimulus-hotwire §3 の方針。
+    # 適合試験は spec/conformance/allowances.yml でこれらを明示的に許可する)
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def contract_data_attributes
+      super.merge(orientation: @orientation)
+    end
+
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def html_attributes
+      attributes = super
+      merge_nested(attributes, :aria, { orientation: @orientation })
+      attributes[:role] = "separator" unless @html_args.key?(:role)
+      attributes
+    end
+  end
+end

data/app/components/shadcn/sheet.rb

@@ -0,0 +1,157 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # スライドインパネル(ネイティブ <dialog> + スライド変形 — 10-roadmap Phase 3)。
+  # JS無効時フォールバック: Readable(dialog と同じ)
+  class Sheet < BaseComponent
+    CONTROLLER = "shadcn--dialog"
+
+    sig { params(args: T::Hash[Symbol, T.untyped]).void.checked(:never) }
+    def initialize(**args)
+      assign_accessibility_root_id(args, prefix: "sheet")
+      super
+    end
+
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def contract_data_attributes
+      super.merge(controller: CONTROLLER)
+    end
+
+    class Trigger < BaseComponent
+      include Shadcn::ButtonStyled
+
+      sig { override.returns(String) }
+      def default_tag
+        "button"
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = apply_button_styling(super)
+        attributes[:type] = "button" unless attributes.key?(:type)
+        merge_nested(attributes, :aria, { haspopup: "dialog", expanded: "false" })
+        merge_nested(attributes, :data, { action: "#{CONTROLLER}#show" })
+        attributes
+      end
+    end
+
+    class Close < BaseComponent
+      sig { override.returns(String) }
+      def default_tag
+        "button"
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = super
+        attributes[:type] = "button" unless attributes.key?(:type)
+        merge_nested(attributes, :data, { action: "#{CONTROLLER}#close" })
+        attributes
+      end
+    end
+
+    class Content < BaseComponent
+      # side は base-nova では契約propではなく data-side 属性(クラスは
+      # data-[side=...]: のCSS variantで追従する)。4枝のクラスは契約に統合済み
+      sig do
+        params(
+          side: T.any(Symbol, String),
+          show_close_button: T::Boolean,
+          args: T::Hash[Symbol, T.untyped]
+        ).void.checked(:never)
+      end
+      def initialize(side: self.class.property_default(:side), show_close_button: true, **args)
+        @side = T.let(normalize_property(:side, side), String)
+        @show_close_button = show_close_button
+        super(**args)
+      end
+
+      sig { override.returns(String) }
+      def call
+        content_tag(:dialog, **content_attributes) do
+          safe_join([content.presence, close_button].compact)
+        end
+      end
+
+      private
+
+      sig { returns(T::Hash[Symbol, T.untyped]) }
+      def content_attributes
+        attributes = @html_args.merge(class: self.class.classes(extra: @user_class))
+        data = T.cast(attributes[:data], T.nilable(T::Hash[Symbol, T.untyped])) || {}
+        attributes[:data] = { slot: "sheet-content", side: @side }.merge(data)
+        aria = T.cast(attributes[:aria], T.nilable(T::Hash[Symbol, T.untyped])) || {}
+        attributes[:aria] = { modal: "true" }.merge(aria)
+        attributes
+      end
+
+      # upstream のクローズボタン(render prop のButton variant="ghost" size="icon-sm"
+      # + absolute配置)。契約クラスはButton契約から合成する
+      sig { returns(T.nilable(String)) }
+      def close_button
+        return nil unless @show_close_button
+
+        content_tag(
+          :button,
+          type: "button",
+          class: close_class,
+          data: { slot: "sheet-close", action: "#{CONTROLLER}#close" },
+          aria: { label: "Close" }
+        ) do
+          safe_join([close_icon, content_tag(:span, class: "sr-only") { "Close" }])
+        end
+      end
+
+      sig { returns(String) }
+      def close_class
+        # NOTE: Hashの値型は不変のため、Classes.resolve の options と同じ型で T.let する
+        button_options = T.let({ variant: :ghost, size: :"icon-sm" },
+                               T::Hash[Symbol, T.nilable(T.any(Symbol, String))])
+        ShadcnViewComponents::Classes.resolve(:button, extra: "absolute top-3 right-3", **button_options)
+      end
+
+      sig { returns(String) }
+      def close_icon
+        content_tag(
+          :svg,
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          width: "16",
+          height: "16",
+          class: "size-4",
+          aria: { hidden: "true" }
+        ) do
+          raw(%(<path d="M18 6 6 18"/><path d="m6 6 12 12"/>))
+        end
+      end
+    end
+
+    class Header < BaseComponent
+      # div
+    end
+
+    class Footer < BaseComponent
+      # div
+    end
+
+    class Title < BaseComponent
+      sig { override.returns(String) }
+      def default_tag
+        "h2"
+      end
+    end
+
+    class Description < BaseComponent
+      sig { override.returns(String) }
+      def default_tag
+        "p"
+      end
+    end
+  end
+end