shadcn_view_components 0.2.0

data/app/components/shadcn/native_select.rb

@@ -0,0 +1,78 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # 素の select/optgroup/option(JSレス — 05 §3)。ラッパーdiv + select + chevron。
+  # 利用者属性(name/id/required 等)はすべて実際の <select> に渡す
+  # (ラッパーは gem 内部要素のため name 等が届かないフォーム送信の破壊を防ぐ)
+  class NativeSelect < 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 call
+      # base-nova ではユーザークラス(className)はラッパーへ流れる
+      content_tag(:div, class: wrapper_class, data: { slot: "native-select-wrapper", size: @size }) do
+        safe_join([select_element, chevron_icon])
+      end
+    end
+
+    private
+
+    # 選択肢は OptGroup / Option コンポーネントで content に渡す
+    sig { returns(String) }
+    def select_element
+      attributes = @html_args.merge(class: select_class)
+      merge_nested(attributes, :data, { slot: "native-select", size: @size })
+      content_tag(:select, **attributes) { content }
+    end
+
+    # ラッパーのクラスは契約combination(group/native-select ...)
+    sig { returns(String) }
+    def wrapper_class
+      ShadcnViewComponents::Classes.resolve(:native_select, extra: @user_class.to_s)
+    end
+
+    # select 要素のクラスは契約スロットの静的クラス
+    sig { returns(T.nilable(String)) }
+    def select_class
+      T.cast(contract_slot("native-select").dig(:static_attributes, :class), T.nilable(String))
+    end
+
+    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",
+        width: "16", height: "16",
+        class: T.cast(contract_slot("native-select-icon").dig(:static_attributes, :class), T.nilable(String)),
+        aria: { hidden: "true" }, data: { slot: "native-select-icon" }
+      ) { raw(%(<path d="m6 9 6 6 6-6"/>)) }
+    end
+
+    class OptGroup < BaseComponent
+      # optgroup
+      sig { override.returns(String) }
+      def default_tag
+        "optgroup"
+      end
+    end
+
+    class Option < BaseComponent
+      # option(内容はテキストのみ)
+      sig { override.returns(String) }
+      def default_tag
+        "option"
+      end
+
+      sig { override.returns(String) }
+      def call
+        content_tag(tag, **html_attributes) { content.to_s }
+      end
+    end
+  end
+end

data/app/components/shadcn/navigation_menu.rb

@@ -0,0 +1,122 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # ナビゲーションメニュー(10-roadmap Phase 3)。
+  # 通常のnav/linkと開閉領域をnavigation_menu_controller(Popover API)で管理する。
+  # ARIA menuではないためLinkはネイティブのTab/Enter操作を維持する。
+  # JS無効時フォールバック: Readable(リンク自体はSSR済みで辿れる)
+  class NavigationMenu < BaseComponent
+    CONTROLLER = "shadcn--navigation-menu"
+
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def contract_data_attributes
+      super.merge(controller: CONTROLLER)
+    end
+
+    sig { override.returns(String) }
+    def default_tag
+      "nav"
+    end
+
+    class List < BaseComponent
+      # ul
+      sig { override.returns(String) }
+      def default_tag
+        "ul"
+      end
+    end
+
+    class Item < BaseComponent
+      # li
+      sig { override.returns(String) }
+      def default_tag
+        "li"
+      end
+    end
+
+    class Trigger < 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, :aria, { expanded: "false" })
+        merge_nested(attributes, :data, { action: "#{CONTROLLER}#toggle" })
+        attributes
+      end
+
+      # upstream は chevron を含む(静的クラスは契約スロット外)
+      sig { override.returns(String) }
+      def call
+        content_tag(tag, **html_attributes) do
+          safe_join([content, chevron_icon])
+        end
+      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",
+          width: "12",
+          height: "12",
+          class: "relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180",
+          aria: { hidden: "true" }
+        ) do
+          raw(%(<path d="m6 9 6 6 6-6"/>))
+        end
+      end
+    end
+
+    class Link < BaseComponent
+      # a
+      sig { override.returns(String) }
+      def default_tag
+        "a"
+      end
+    end
+
+    class Content < BaseComponent
+      include Shadcn::FloatingPositionOptions
+
+      FLOATING_POSITION_DEFAULTS = T.let(
+        { side: :bottom, align: :start, side_offset: 8, align_offset: 0, collision_padding: 5 }.freeze,
+        T::Hash[Symbol, T.untyped]
+      )
+
+      # Popover API で開閉。中身のリンク構造は利用者が組む。
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = super
+        attributes[:popover] = "auto"
+        merge_floating_position_data(attributes, state: "closed")
+      end
+    end
+
+    class Indicator < BaseComponent
+      # 装飾要素(矢印)。既定では非表示
+      sig { override.returns(String) }
+      def call
+        content_tag(tag, **html_attributes) do
+          content_tag(:div, class: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md") { "".html_safe }
+        end
+      end
+    end
+
+    # base-nova では Viewport が廃止され Positioner(Portal 由来の位置決め)に置き換わった。
+    # 本gemは viewport/positioner なしで Content を直接表示する設計のため、両方を移植しない
+  end
+end

data/app/components/shadcn/pagination.rb

@@ -0,0 +1,160 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # リンクベースのページネーション(JSレス — 10-roadmap Phase 2)。
+  # JS無効時フォールバック: Graceful(リンク遷移のみで完全動作)
+  # Previous/Next は upstream が PaginationLink を内側で描く構成のため、
+  # ルートスロットを Link から継承した契約になっている(抽出器の兄弟継承)
+  class Pagination < BaseComponent
+    # nav。契約の静的属性(role="navigation" / aria-label="pagination")は
+    # BaseComponent#static_attribute_defaults が自動で付与する
+
+    # Previous/Next/Ellipsis 共通のインラインSVG(lucide相当)。
+    # コンポーネントクラス外のモジュールからでもヘルパが解決できるよう、必要な
+    # ActionViewヘルパを明示的にincludeする(Sorbetの解決対象にもなる)
+    module IconHelpers
+      extend T::Sig
+      include ActionView::Helpers::OutputSafetyHelper
+      include ActionView::Helpers::TagHelper
+
+      private
+
+      sig { params(paths: String).returns(String) }
+      def pagination_icon(paths)
+        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(paths)
+        end
+      end
+    end
+
+    class Content < BaseComponent
+      # ul
+    end
+
+    class Item < BaseComponent
+      # li
+    end
+
+    class Link < BaseComponent
+      # base-nova は Button装飾(variant/size)をrender propで<a>へ合成する。
+      # 本gemもButton契約からクラスを合成して同等の<a>を描く(契約クラス自体は空)
+      sig { override.returns(String) }
+      def default_tag
+        "a"
+      end
+
+      sig do
+        params(
+          is_active: T.nilable(T.any(Symbol, String, T::Boolean)),
+          size: T.any(Symbol, String),
+          args: T::Hash[Symbol, T.untyped]
+        ).void.checked(:never)
+      end
+      def initialize(is_active: nil, size: :icon, **args)
+        @is_active = T.let(is_active.to_s == "true", T::Boolean)
+        @size = T.let(ShadcnViewComponents::Classes.normalize_option(:button, :size, size), Symbol)
+        super(**args)
+      end
+
+      sig { returns(T::Boolean) }
+      def active?
+        @is_active
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        # NOTE: Hashの値型は不変のため、Classes.resolve の options と同じ型で T.let する
+        button_options = T.let({ variant: active? ? :outline : :ghost, size: @size },
+                               T::Hash[Symbol, T.nilable(T.any(Symbol, String))])
+        attributes = @html_args.merge(
+          class: ShadcnViewComponents::Classes.resolve(:button, extra: @user_class.to_s, **button_options)
+        )
+        merge_nested(attributes, :data, { slot: "pagination-link", active: active?.to_s })
+        attributes[:aria] = { current: "page" } if active?
+        attributes
+      end
+    end
+
+    class Previous < BaseComponent
+      include IconHelpers
+
+      # upstream は Link(size="default")を描き、固定の子(chevron + ラベル)を足す
+      sig { override.returns(String) }
+      def call
+        render(Link.new(size: :default, class: self.class.classes(extra: @user_class), **link_attributes)) do
+          safe_join([pagination_icon(%(<path d="m15 18-6-6 6-6"/>)), default_label])
+        end
+      end
+
+      private
+
+      sig { returns(T::Hash[Symbol, T.untyped]) }
+      def link_attributes
+        attributes = @html_args.dup
+        aria = T.cast(attributes[:aria], T.nilable(T::Hash[Symbol, T.untyped])) || {}
+        attributes[:aria] = { label: "Go to previous page" }.merge(aria)
+        attributes
+      end
+
+      sig { returns(String) }
+      def default_label
+        content.presence || content_tag(:span, class: "hidden sm:block") { "Previous" }
+      end
+    end
+
+    class Next < BaseComponent
+      include IconHelpers
+
+      sig { override.returns(String) }
+      def call
+        render(Link.new(size: :default, class: self.class.classes(extra: @user_class), **link_attributes)) do
+          safe_join([default_label, pagination_icon(%(<path d="m9 18 6-6-6-6"/>))])
+        end
+      end
+
+      private
+
+      sig { returns(T::Hash[Symbol, T.untyped]) }
+      def link_attributes
+        attributes = @html_args.dup
+        aria = T.cast(attributes[:aria], T.nilable(T::Hash[Symbol, T.untyped])) || {}
+        attributes[:aria] = { label: "Go to next page" }.merge(aria)
+        attributes
+      end
+
+      sig { returns(String) }
+      def default_label
+        content.presence || content_tag(:span, class: "hidden sm:block") { "Next" }
+      end
+    end
+
+    class Ellipsis < BaseComponent
+      include IconHelpers
+
+      # span(aria-hidden)。lucide の ellipsis アイコンと sr-only ラベルを含む
+      sig { override.returns(String) }
+      def call
+        content_tag(tag, **html_attributes) do
+          safe_join([
+                      pagination_icon(%(<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>)),
+                      content_tag(:span, class: "sr-only") { "More pages" }
+                    ])
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/popover.rb

@@ -0,0 +1,68 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # Popover API によるポップオーバー(10-roadmap Phase 3「popover = Popover API」)。
+  # popover="auto" で軽量な外側クリック解散をネイティブに任せ、コントローラは
+  # 開閉同期と位置合わせ(anchor相当)を担う
+  # JS無効時フォールバック: Readable(展開はできないが本文はSSR済み)
+  class Popover < BaseComponent
+    CONTROLLER = "shadcn--popover"
+
+    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, { expanded: "false", haspopup: "true" })
+        merge_nested(attributes, :data, { action: "#{CONTROLLER}#toggle" })
+        attributes
+      end
+    end
+
+    # base-nova では Anchor が廃止されたため非対応(位置決めはTrigger基準)
+
+    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]
+      )
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = super
+        attributes[:popover] = "auto"
+        merge_floating_position_data(attributes, state: "closed")
+      end
+    end
+
+    class Header < BaseComponent
+      # div
+    end
+
+    class Title < BaseComponent
+      # div(契約タグは h2 の型注記だが実要素は div)
+    end
+
+    class Description < BaseComponent
+      sig { override.returns(String) }
+      def default_tag
+        "p"
+      end
+    end
+  end
+end

data/app/components/shadcn/preview_base.rb

@@ -0,0 +1,107 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # Lookbook / ViewComponent プレビュー用の基底クラス。
+  #
+  # ViewComponent::Preview#render はコンポーネントを描画せず、
+  # {args:, block:, component:, locals:, template:} からなる描画予約のディスクリプタを返す。
+  # このためブロック内でネストした render の戻り値を組み合わせる記法
+  # (safe_join([render(Header.new) { ... }, render(Content.new) { ... }]) 等)では
+  # ディスクリプタの inspect 文字列がそのままプレビューに露出してしまう。
+  #
+  # この基底クラスの render は常に即座にHTML文字列を描画して返すため、
+  # 単一ルート・ネスト・兄弟連結のどの記法でもそのまま組み合わせられる。
+  # example の戻り値は render_args が Fragment 経由でディスクリプタに正規化する。
+  # ホストアプリが独自のプレビューを書く際にも同様に利用できる。
+  class PreviewBase < ViewComponent::Preview
+    extend T::Sig
+
+    # 描画済みHTML断片を1つのコンポーネントとして扱うラッパー。
+    # ViewComponent::Preview のディスクリプタは最終的にビューの render 経由で
+    # 描画されるため、render_in に応答するオブジェクトであればよい
+    class Fragment
+      extend T::Sig
+
+      sig { params(html: T.untyped).void }
+      def initialize(html:)
+        super()
+        @html = T.let(html, T.untyped)
+      end
+
+      # ビューの render はブロック付きで呼ぶが、断片では使わないため受けない
+      sig { params(_view_context: T.untyped).returns(T.untyped) }
+      def render_in(_view_context)
+        @html
+      end
+    end
+
+    # ViewComponent::Preview.render_args はexampleの戻り値にHashを期待するが、
+    # この基底クラスのexampleはHTML文字列(SafeBuffer)を返すため、Fragment で包んで
+    # ディスクリプタに正規化する。それ以外は VC の挙動(example検証・params渡し・
+    # テンプレートフォールバック・layout)を踏襲する
+    sig { params(example: T.any(Symbol, String), params: T.untyped).returns(T.untyped) }
+    def self.render_args(example, params: {})
+      example = example.to_s
+      raise AbstractController::ActionNotFound, "#{example} is not a valid preview example" unless examples.include?(example)
+
+      result = normalize_render_result(invoke_example(example, params))
+      result[:template] = preview_example_template_path(example) if result[:template].nil?
+      result.merge(layout: instance_variable_get(:@layout))
+    end
+
+    # example を呼び出す。宣言済みの引数名と一致するparamsだけを渡す(VCの挙動と同じ)
+    sig { params(example: String, params: T.untyped).returns(T.untyped) }
+    def self.invoke_example(example, params)
+      example_params_names = instance_method(example).parameters.map(&:last)
+      provided_params = params.slice(*example_params_names).to_h.symbolize_keys
+      provided_params.empty? ? new.public_send(example) : new.public_send(example, **provided_params)
+    end
+
+    # VC標準のディスクリプタ Hash はそのまま、それ以外(HTML文字列等)は Fragment で包む
+    sig { params(result: T.untyped).returns(T.untyped) }
+    def self.normalize_render_result(result)
+      return result if result.is_a?(Hash)
+
+      {
+        args: {},
+        block: nil,
+        component: Fragment.new(html: result),
+        locals: {},
+        template: "view_components/preview"
+      }
+    end
+
+    sig { void }
+    def initialize
+      super
+      @preview_view_context = T.let(nil, T.untyped)
+    end
+
+    private
+
+    # example メソッドからの暗黓スコープでの呼び出しのみを想定するため private。
+    # public にすると ViewComponent::Preview.examples(public_instance_methods)に
+    # 「render」が載り、この基底クラス自体がプレビュー一覧に出てしまう
+    #
+    # rest-kwargs を持つメソッドの実行時sig検証は sorbet-runtime の既知の誤バインドがあるため
+    # checked(:never) で無効化し、srb tc の静的検査に委譲する(BaseComponent と同じ運用)
+    sig do
+      params(component: T.untyped, args: T.untyped, block: T.nilable(T.proc.returns(T.untyped)))
+        .returns(T.untyped).checked(:never)
+    end
+    def render(component, **args, &block)
+      component.render_in(preview_view_context, **args, &block)
+    end
+
+    # コンポーネントの即時描画に使う単独のビューコンテキスト。
+    # Lookbook のプレビュー出力はexampleの戻り値(HTML文字列)だけで構成されるため、
+    # ルートとネストでコンテキストが分かれても出力には影響しない。
+    # NOTE: 素の ActionController::Base から作るためURLヘルパー等は使えない。
+    # 本gemのコンポーネントは属性の出力のみでURLヘルパーに依存しない
+    sig { returns(T.untyped) }
+    def preview_view_context
+      @preview_view_context ||= ActionController::Base.new.view_context
+    end
+  end
+end

data/app/components/shadcn/progress.rb

@@ -0,0 +1,49 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # 進捗バー。role=progressbar と aria 値をネイティブARIAで表現する
+  class Progress < BaseComponent
+    sig do
+      params(
+        value: T.nilable(T.any(Integer, Float, String)),
+        args: T::Hash[Symbol, T.untyped]
+      ).void.checked(:never)
+    end
+    def initialize(value: self.class.property_default(:value), **args)
+      @value = T.let(normalize_property(:value, value), T.nilable(T.any(Integer, Float)))
+      super(**args)
+    end
+
+    sig { override.returns(String) }
+    def call
+      content_tag(tag, **html_attributes) do
+        safe_join([content, progress_track])
+      end
+    end
+
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def html_attributes
+      attributes = super
+      attributes[:role] = "progressbar"
+      aria_defaults = T.let({ valuemin: "0", valuemax: "100" }, T::Hash[Symbol, T.untyped])
+      aria_defaults[:valuenow] = @value.to_s if @value
+      merge_nested(attributes, :aria, aria_defaults)
+      attributes
+    end
+
+    private
+
+    sig { returns(String) }
+    def progress_track
+      content_tag(:div, class: ShadcnViewComponents::Classes.resolve(:progress_track), data: { slot: "progress-track" }) do
+        content_tag(
+          :div,
+          class: ShadcnViewComponents::Classes.resolve(:progress_indicator),
+          style: "width: #{@value || 0}%",
+          data: { slot: "progress-indicator" }
+        ) { "".html_safe }
+      end
+    end
+  end
+end

data/app/components/shadcn/radio_group.rb

@@ -0,0 +1,74 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  class RadioGroup < BaseComponent
+    # ネイティブなラジオボタン群(JS無しで動作 — 05-stimulus-hotwire §3)。
+    # name は利用者が指定する(素のinputなのでそのまま連携する)
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def html_attributes
+      attributes = super
+      attributes[:role] = "radiogroup" unless @html_args.key?(:role)
+      attributes
+    end
+
+    class Item < BaseComponent
+      include NativeCheckedState
+
+      NATIVE_STATE_CLASS = T.let([
+        "not-checked:border-input not-checked:bg-transparent dark:not-checked:bg-input/30",
+        "checked:border-primary checked:bg-primary checked:text-primary-foreground",
+        "group-has-[:focus-visible]/field-label:checked:border-primary dark:checked:bg-primary"
+      ].join(" ").freeze, String)
+
+      # 契約タグは RadioGroupPrimitive.Item。ネイティブな input[type=radio] として描く
+      sig { override.returns(String) }
+      def default_tag
+        "input"
+      end
+
+      sig { override.returns(String) }
+      def call
+        content_tag(:span, class: "relative flex w-fit") do
+          safe_join([input_element, indicator_element])
+        end
+      end
+
+      private
+
+      sig { returns(String) }
+      def input_element
+        attributes = html_attributes.merge(type: "radio")
+        # ネイティブウィジェット描画を消す(dark時の白箱問題 — checkbox.rb と同じ理由)。
+        # 印の表示は indicator を peer-checked で出すため peer も付与する
+        attributes[:class] = [attributes[:class], "appearance-none peer", NATIVE_STATE_CLASS].compact.join(" ")
+        merge_native_checked_state(attributes, checked: native_checked?(@html_args))
+        void_tag("input", **attributes)
+      end
+
+      # 契約のスロット構造(radio-group-indicator)を保つ。普段は非表示で、
+      # peer であるinputのチェック状態に連動して出す(upstreamのIndicatorと同じ挙動)
+      sig { returns(String) }
+      def indicator_element
+        indicator_class = T.cast(contract_slot("radio-group-indicator").dig(:static_attributes, :class), T.nilable(String))
+        content_tag(
+          :span,
+          data: { slot: "radio-group-indicator" },
+          aria: { hidden: "true" },
+          class: [indicator_class, "pointer-events-none absolute inset-0 hidden peer-checked:flex"].compact.join(" ")
+        ) do
+          content_tag(
+            :svg,
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "none",
+            class: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current"
+          ) do
+            raw(%(<circle cx="12" cy="12" r="10"/>))
+          end
+        end
+      end
+    end
+  end
+end