shadcn_view_components 0.2.0

data/app/components/shadcn/context_menu.rb

@@ -0,0 +1,79 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # 右クリックメニュー(10-roadmap Phase 3「context-menu = 同上(右クリック)」)。
+  # 実装は DropdownMenu を継承し、差分のみを上書きする:
+  # - Trigger は click ではなく contextmenu で showAt を呼ぶ
+  # - Content は右クリックイベント列の途中で light dismiss されないよう popover=manual
+  # JS無効時フォールバック: Readable
+  class ContextMenu < DropdownMenu
+    class Trigger < BaseComponent
+      # 任意の領域を右クリック対象にできる非button要素。
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = super
+        attributes[:tabindex] = "0" unless attributes.key?(:tabindex)
+        merge_nested(attributes, :aria, { haspopup: "menu" })
+        merge_nested(attributes, :data, { action: "contextmenu->#{DropdownMenu::CONTROLLER}#showAt" })
+        attributes
+      end
+    end
+
+    class Portal < DropdownMenu::Portal
+      # 搬送のみの機能要素の実体化
+    end
+
+    class Content < DropdownMenu::Content
+      FLOATING_POSITION_DEFAULTS = T.let(
+        { side: :right, align: :start, side_offset: 0, align_offset: 4, collision_padding: 5 }.freeze,
+        T::Hash[Symbol, T.untyped]
+      )
+
+      # 右クリックで開く際、イベント列の途中でlight dismissされないようmanualにする
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        super.tap { |attributes| attributes[:popover] = "manual" }
+      end
+    end
+
+    class Group < DropdownMenu::Group; end
+
+    class Label < DropdownMenu::Label; end
+
+    class Item < DropdownMenu::Item; end
+
+    class CheckboxItem < DropdownMenu::CheckboxItem
+      # 契約に indicator スロットが無いため data-slot 無しで描く
+      sig { returns(T.nilable(String)) }
+      def indicator_slot_name
+        nil
+      end
+    end
+
+    class RadioGroup < DropdownMenu::RadioGroup; end
+
+    class RadioItem < DropdownMenu::RadioItem
+      # 契約に indicator スロットが無いため data-slot 無しで描く
+      sig { returns(T.nilable(String)) }
+      def indicator_slot_name
+        nil
+      end
+    end
+
+    class Separator < DropdownMenu::Separator; end
+
+    class Shortcut < DropdownMenu::Shortcut; end
+
+    class Sub < DropdownMenu::Sub; end
+
+    class SubTrigger < DropdownMenu::SubTrigger; end
+
+    class SubContent < DropdownMenu::SubContent
+      FLOATING_POSITION_DEFAULTS = T.let(
+        { side: :right, align: :start, side_offset: 0, align_offset: 4, collision_padding: 5 }.freeze,
+        T::Hash[Symbol, T.untyped]
+      )
+    end
+  end
+end

data/app/components/shadcn/dialog.rb

@@ -0,0 +1,180 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # ネイティブ `<dialog>` + showModal によるモーダル(05-stimulus-hotwire §3)。
+  # フォーカストラップ・EscClose・背景inert・フォーカス復帰はネイティブが提供する。
+  # JS無効時フォールバック: Readable(dialog要素は閉じた状態で出力されるため
+  # 内容は取得できる。開く操作にはJSが必要 — 05 §5)
+  class Dialog < BaseComponent
+    CONTROLLER = "shadcn--dialog"
+
+    sig { params(args: T::Hash[Symbol, T.untyped]).void.checked(:never) }
+    def initialize(**args)
+      assign_accessibility_root_id(args, prefix: "dialog")
+      super
+    end
+
+    # upstream の Root はDOMを出力しないが、本gemではトリガーとコンテンツを
+    # 同一のコントローラスコープに置くためのラッパーとして描く(文書化された構造差)
+    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: "#{Dialog::CONTROLLER}#show" })
+        attributes
+      end
+    end
+
+    class Portal < BaseComponent
+      # upstream の Portal は子を body 末尾へ搬送するだけの機能要素。
+      # 本gemではラッパー div として実体化する(契約スロットの維持のため)
+    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: "#{Dialog::CONTROLLER}#close" })
+        attributes
+      end
+    end
+
+    class Overlay < BaseComponent
+      # 契約上は Content の外に置かれる独立エクスポート。ネイティブ運用では
+      # dialogの ::backdrop で代替するため、コンテンツ側には含めない
+      # (利用者が明示的に描きたい場合に備えて公開する)
+    end
+
+    class Content < BaseComponent
+      # 契約スロット構成: 無名ポータルラッパー > dialog-content(dialog要素)
+      # + dialog-close(右上クローズ)。オーバーレイは ::backdrop で代替する
+      sig { params(show_close_button: T::Boolean, args: T::Hash[Symbol, T.untyped]).void.checked(:never) }
+      def initialize(show_close_button: true, **args)
+        @show_close_button = show_close_button
+        super(**args)
+      end
+
+      sig { override.returns(String) }
+      def default_tag
+        "div"
+      end
+
+      sig { override.returns(String) }
+      def call
+        # ポータルラッパーは契約上無名(data-slotを持たない)
+        content_tag(:div) { dialog_element }
+      end
+
+      private
+
+      sig { returns(String) }
+      def dialog_element
+        content_tag(:dialog, **content_attributes) do
+          safe_join([content.presence, close_button].compact)
+        end
+      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: "dialog-close", action: "#{Dialog::CONTROLLER}#close" },
+          aria: { label: "Close" }
+        ) do
+          safe_join([close_icon, content_tag(:span, class: "sr-only") { "Close" }])
+        end
+      end
+
+      # lucide のXIcon相当
+      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
+
+      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])) || {}
+        # 開閉状態属性(data-open / data-closed)はコントローラが同期する(SSRでは出さない)
+        attributes[:data] = { slot: "dialog-content" }.merge(data)
+        aria = T.cast(attributes[:aria], T.nilable(T::Hash[Symbol, T.untyped])) || {}
+        attributes[:aria] = { modal: "true" }.merge(aria)
+        attributes
+      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-2 right-2", **button_options)
+      end
+    end
+
+    class Header < BaseComponent
+      # div
+    end
+
+    class Footer < BaseComponent
+      # div(末尾の任意クローズボタンは利用者が Dialog::Close として置く)
+    end
+
+    class Title < BaseComponent
+      # h2(Radix Title の既定)
+      sig { override.returns(String) }
+      def default_tag
+        "h2"
+      end
+    end
+
+    class Description < BaseComponent
+      # p
+      sig { override.returns(String) }
+      def default_tag
+        "p"
+      end
+    end
+  end
+end

data/app/components/shadcn/direction_provider.rb

@@ -0,0 +1,18 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # 書字方向スコープ。div[dir] で括るだけ(Radix DirectionProvider 相当の役割)
+  class DirectionProvider < BaseComponent
+    sig { params(dir: T.any(Symbol, String), args: T::Hash[Symbol, T.untyped]).void.checked(:never) }
+    def initialize(dir: self.class.property_default(:dir), **args)
+      @dir = T.let(normalize_property(:dir, dir), String)
+      super(**args)
+    end
+
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def html_attributes
+      super.tap { |attributes| attributes[:dir] = @dir }
+    end
+  end
+end

data/app/components/shadcn/drawer.rb

@@ -0,0 +1,150 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # ボトムシート(ネイティブ <dialog>)。upstream は vaul(ドラッグ操作)を使うが、
+  # 本gemは開閉のみをネイティブで提供し、クラス契約は vaul の data 属性付きの
+  # まま維持する(ドラッグ方向クラスはホストが data-vaul-drawer-direction を
+  # 制御する場合に有効化される)
+  # JS無効時フォールバック: Readable
+  class Drawer < BaseComponent
+    CONTROLLER = "shadcn--dialog"
+
+    sig { params(args: T::Hash[Symbol, T.untyped]).void.checked(:never) }
+    def initialize(**args)
+      assign_accessibility_root_id(args, prefix: "drawer")
+      super
+    end
+
+    # base-nova では Drawer ルートも data-slot="drawer" を持つ(旧契約には無し)
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def contract_data_attributes
+      super.merge(slot: "drawer", 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 Portal < BaseComponent
+      # upstream の Portal(子を body 末尾へ搬送する機能要素)の実体化。
+      # DrawerContent 内部でも同じラッパーを描く
+    end
+
+    class Overlay < BaseComponent
+      # 契約上は独立エクスポート。ネイティブ運用では ::backdrop で代替するため
+      # Content 側には含めない(利用者が明示的に描く場合に備えて公開)
+    end
+
+    class Content < BaseComponent
+      # 契約スロット構成(base-nova): drawer-portal > drawer-viewport > drawer-popup
+      # > drawer-content + ドラッグハンドル。ハンドルは data-slot を持たない装飾要素。
+      # viewport / popup をネイティブ <dialog> の内側に置くことで、閉じ状態では
+      # UAスタイル(display: none)によりオーバーレイが表示されない(open時はtop-layer)。
+      # data-modal は Base UI がモーダル時に付与する属性(本gemは常にモーダル)
+      sig { override.returns(String) }
+      def call
+        content_tag(:div, data: { slot: "drawer-portal" }) do
+          content_tag(:dialog, **dialog_attributes) do
+            content_tag(:div, class: slot_class("drawer-viewport"), data: { slot: "drawer-viewport", modal: "true" }) do
+              content_tag(:div, class: popup_class, data: { slot: "drawer-popup" }) do
+                content_tag(:div, **content_attributes) do
+                  safe_join([drag_handle, content.presence].compact)
+                end
+              end
+            end
+          end
+        end
+      end
+
+      private
+
+      # 契約クラス(combination)は drawer-popup 要素に属する
+      sig { returns(String) }
+      def popup_class
+        self.class.classes(extra: @user_class)
+      end
+
+      sig { returns(T::Hash[Symbol, T.untyped]) }
+      def dialog_attributes
+        attributes = @html_args
+        data = T.cast(attributes[:data], T.nilable(T::Hash[Symbol, T.untyped])) || {}
+        attributes[:data] = { "vaul-drawer-direction": "bottom" }.merge(data)
+        aria = T.cast(attributes[:aria], T.nilable(T::Hash[Symbol, T.untyped])) || {}
+        attributes[:aria] = { modal: "true" }.merge(aria)
+        attributes
+      end
+
+      sig { returns(T::Hash[Symbol, T.untyped]) }
+      def content_attributes
+        attributes = { class: slot_class("drawer-content") }
+        data = { slot: "drawer-content", "vaul-drawer-direction": "bottom" }
+        attributes[:data] = data
+        attributes
+      end
+
+      # viewport / content のクラスは契約スロットの静的クラス
+      sig { params(name: String).returns(T.nilable(String)) }
+      def slot_class(name)
+        T.cast(contract_slot(name).dig(:static_attributes, :class), T.nilable(String))
+      end
+
+      # upstream のドラッグハンドル(装飾要素)
+      sig { returns(String) }
+      def drag_handle
+        content_tag(:div, class: "mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted") { "".html_safe }
+      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

data/app/components/shadcn/dropdown_menu.rb

@@ -0,0 +1,242 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # ARIA menu パターン + Popover API(10-roadmap Phase 3「dropdown-menu = Popover API +
+  # ARIA menu + 共通キーボードlib」)。キーボード操作(矢印・Home/End・Esc・文字検索)は
+  # menu_controller が担う
+  # JS無効時フォールバック: Readable(項目はSSR済み。開閉はJS依存)
+  class DropdownMenu < BaseComponent
+    CONTROLLER = "shadcn--menu"
+
+    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: "menu", expanded: "false" })
+        merge_nested(attributes, :data, { action: default_action })
+        attributes
+      end
+
+      private
+
+      sig { returns(String) }
+      def default_action
+        "#{controller_identifier}#toggle"
+      end
+
+      sig { returns(String) }
+      def controller_identifier
+        DropdownMenu::CONTROLLER
+      end
+    end
+
+    class Portal < BaseComponent
+      # 搬送のみの機能要素の実体化(Dialog::Portal と同じ)
+    end
+
+    class Content < BaseComponent
+      include Shadcn::FloatingPositionOptions
+
+      FLOATING_POSITION_DEFAULTS = T.let(
+        { side: :bottom, align: :start, side_offset: 4, align_offset: 0, collision_padding: 5 }.freeze,
+        T::Hash[Symbol, T.untyped]
+      )
+
+      # role=menu + popover=auto。light dismissはネイティブ、状態・位置合わせはコントローラが担う
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = super
+        attributes[:role] = "menu"
+        attributes[:popover] = "auto"
+        attributes[:tabindex] = "-1"
+        merge_floating_position_data(attributes, state: "closed")
+      end
+    end
+
+    class Group < BaseComponent
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        super.tap { |attributes| attributes[:role] = "group" }
+      end
+    end
+
+    class Label < BaseComponent
+      # div
+    end
+
+    class Item < BaseComponent
+      # role=menuitem。data-highlighted と tabindex はコントローラが管理する
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = super
+        attributes[:role] = "menuitem"
+        attributes[:tabindex] = "-1"
+        merge_nested(attributes, :data, { action: default_action })
+        attributes
+      end
+
+      private
+
+      sig { returns(String) }
+      def default_action
+        "#{controller_identifier}#activate"
+      end
+
+      sig { returns(String) }
+      def controller_identifier
+        DropdownMenu::CONTROLLER
+      end
+    end
+
+    class CheckboxItem < Item
+      sig { params(checked: T::Boolean, args: T::Hash[Symbol, T.untyped]).void.checked(:never) }
+      def initialize(checked: false, **args)
+        @checked = checked
+        super(**args)
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = super
+        attributes[:role] = "menuitemcheckbox"
+        merge_nested(attributes, :aria, { checked: @checked.to_s })
+        attributes
+      end
+
+      sig { override.returns(String) }
+      def call
+        content_tag(tag, **html_attributes) do
+          safe_join([indicator, content])
+        end
+      end
+
+      private
+
+      # upstream の ItemIndicator + CheckIcon(契約スロット dropdown-menu-checkbox-item-indicator)。
+      # indicator スロットを持たない派生(context-menu / menubar)は data-slot 無しで描く
+      sig { returns(String) }
+      def indicator
+        options = { class: indicator_class }
+        options[:data] = { slot: indicator_slot_name } if indicator_slot_name
+        content_tag(:span, **options) do
+          @checked ? check_icon : "".html_safe
+        end
+      end
+
+      # 契約に indicator スロットが無い派生では nil を返す
+      sig { returns(T.nilable(String)) }
+      def indicator_slot_name
+        "dropdown-menu-checkbox-item-indicator"
+      end
+
+      sig { returns(T.nilable(String)) }
+      def indicator_class
+        slot_name = indicator_slot_name
+        return nil unless slot_name
+
+        T.cast(contract_slot(slot_name).dig(:static_attributes, :class), T.nilable(String))
+      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",
+          width: "14",
+          height: "14",
+          class: "size-3.5"
+        ) do
+          raw(%(<path d="M20 6 9 17l-5-5"/>))
+        end
+      end
+    end
+
+    class RadioGroup < BaseComponent
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        super.tap { |attributes| attributes[:role] = "group" }
+      end
+    end
+
+    class RadioItem < CheckboxItem
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = super
+        attributes[:role] = "menuitemradio"
+        attributes
+      end
+
+      private
+
+      sig { returns(T.nilable(String)) }
+      def indicator_slot_name
+        "dropdown-menu-radio-item-indicator"
+      end
+
+      # ラジオはドット表示
+      sig { returns(String) }
+      def indicator
+        content_tag(:span, class: indicator_class, data: { slot: indicator_slot_name }) do
+          @checked ? content_tag(:span, class: "size-2 rounded-full bg-current") { "".html_safe } : "".html_safe
+        end
+      end
+    end
+
+    class Separator < BaseComponent
+      # div(契約タグ SeparatorPrimitive は div 相当)
+    end
+
+    class Shortcut < BaseComponent
+      # span
+    end
+
+    class Sub < BaseComponent
+      # ネストしたサブメニューのスコープ。データ属性のみで構造を持つ
+    end
+
+    class SubTrigger < Item
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = super
+        merge_nested(attributes, :aria, { haspopup: "menu", expanded: "false" })
+        attributes
+      end
+
+      private
+
+      sig { override.returns(String) }
+      def default_action
+        "click->#{controller_identifier}#toggleSub"
+      end
+    end
+
+    class SubContent < Content
+      FLOATING_POSITION_DEFAULTS = T.let(
+        { side: :right, align: :start, side_offset: 0, align_offset: -3, collision_padding: 5 }.freeze,
+        T::Hash[Symbol, T.untyped]
+      )
+
+      # 親Contentと同じ popover=auto。ネストはコントローラが処理する
+    end
+  end
+end