shadcn_view_components 0.2.0

data/app/components/shadcn/base_component.rb

@@ -0,0 +1,239 @@
+# typed: strict
+# frozen_string_literal: true
+
+require "securerandom"
+
+module Shadcn
+  # 共通基底(04-component-conventions §5-6)。属性マージ・クラス解決・tag差し替えを担う。
+  # 利用者が直接参照しない private 扱いのクラス。
+  class BaseComponent < ViewComponent::Base
+    extend T::Sig
+
+    VariantOption = T.type_alias { T.nilable(T.any(Symbol, String)) }
+
+    # HTMLのvoid要素。閉じタグを付けてはならない
+    VOID_ELEMENTS = %w[area base br col embed hr img input link meta source track wbr].freeze
+
+    # ViewComponent::Base は initialize を持たず、ActionView::Base の initialize は
+    # 互換性のない引数を取るため super を呼ばない(ViewComponentの標準的な慣行)。
+    # この件は .rubocop.yml の Lint/MissingSuper Exclude にも反映している。
+    # なお rest-kwargs を持つメソッドの実行時sig検証は sorbet-runtime の既知の誤バインドがあるため
+    # checked(:never) で無効化し、srb tc の静的検査に委ねる(module_function 経由の
+    # ShadcnViewComponents::Classes は実行時検証が正しく働くので検証はそこで行う)
+    sig { params(args: T::Hash[Symbol, T.untyped]).void.checked(:never) }
+    def initialize(**args)
+      raw_tag = args.delete(:tag)
+      raw_class = args.delete(:class)
+      @tag = T.let(raw_tag&.to_s, T.nilable(String))
+      @user_class = T.let(raw_class&.to_s, T.nilable(String))
+      @html_args = T.let(args, T::Hash[Symbol, T.untyped])
+    end
+
+    class << self
+      extend T::Sig
+
+      # 契約モジュールへのパス(例: Shadcn::Button → "button"、Shadcn::Card::Header → "card/header")
+      sig { returns(String) }
+      def contract_path
+        to_s.delete_prefix("Shadcn::").underscore
+      end
+
+      sig { returns(T::Module[T.anything]) }
+      def contract
+        ShadcnViewComponents::Classes.contract_for(contract_path.to_sym)
+      end
+
+      # クラス文字列だけを提供するモジュール関数(04 §8)。
+      # ホストが自前ERBに段階的に導入するための抜け道。
+      # checked(:never) の理由は initialize のコメント参照(rest-kwargsの実行時検証問題)
+      sig { params(extra: T.nilable(String), options: T::Hash[Symbol, VariantOption]).returns(String).checked(:never) }
+      def classes(extra: nil, **options)
+        ShadcnViewComponents::Classes.resolve(contract_path.to_sym, extra: extra, **options)
+      end
+
+      # CVAバリアント以外の意味的な公開prop契約を返す。
+      sig { params(prop: Symbol).returns(T::Hash[Symbol, T.untyped]) }
+      def property_contract(prop)
+        ShadcnViewComponents::PropertyContracts.fetch(contract_path.to_sym, prop)
+      end
+
+      sig { params(prop: Symbol).returns(T.untyped) }
+      def property_default(prop)
+        ShadcnViewComponents::PropertyContracts.default(contract_path.to_sym, prop)
+      end
+    end
+
+    # 構造を持たない単一要素コンポーネントの既定レンダリング。
+    # ERBテンプレートを置かない限りこれが使われる(クラス文字列を持たない — 04 §5)。
+    # 構造を持つコンポーネント(Buttonのdata属性、Tableのラッパー等)はcallを上書きするか
+    # sidecarテンプレートを置く
+    sig { returns(String) }
+    def call
+      return open_tag if void_element?
+
+      content_tag(tag, **html_attributes) { content }
+    end
+
+    sig { returns(T::Boolean) }
+    def void_element?
+      VOID_ELEMENTS.include?(tag)
+    end
+
+    private
+
+    # 複合コンポーネントのARIA参照で使うルートIDを、ViewComponentの
+    # インスタンス生成時に一度だけ決める。利用者指定IDはそのまま優先する。
+    # 自動生成IDの印は、fragment cache済みの同じHTMLが同一documentへ複数回
+    # 挿入された場合にだけStimulus側で安全に再採番するために使う。
+    sig { params(args: T::Hash[Symbol, T.untyped], prefix: String).void }
+    def assign_accessibility_root_id(args, prefix:)
+      supplied_id = args[:id]
+      return unless supplied_id.nil? || supplied_id.to_s.empty?
+
+      args[:id] = "shadcn-#{prefix}-#{SecureRandom.hex(12)}"
+      data = T.cast(args[:data], T.nilable(T::Hash[Symbol, T.untyped])) || {}
+      args[:data] = data.merge(shadcn_generated_root_id: "true")
+    end
+
+    # void要素は閉じタグ無しで出力する。
+    # NOTE: content_tag はブロック付き呼び出しでのみ第二引数ハッシュが属性扱いになるため
+    # 空ブロックを渡してから閉じタグを取り除く
+    sig { returns(String) }
+    def open_tag
+      void_tag(tag, **html_attributes)
+    end
+
+    # 指定タグの void 要素(input/br/hr 等)を閉じタグ無しで出力する統一ヘルパ。
+    # 手書きの input 描画で使う(閉じタグ付き <input></input> はHTML仕様違反のため)
+    # attrs を T.untyped にするのは srb の rest-kwargs モデル対策(呼び出し側の
+    # 任意キーワードを attrs に誤バインドする既知の挙動のため)
+    sig { params(name: String, attrs: T.untyped).returns(String) }
+    def void_tag(name, **attrs)
+      content_tag(name, **attrs) { "".html_safe }
+        .then { |markup| markup.sub(%r{></#{Regexp.escape(name)}>\z}, ">") }
+        .then(&:html_safe)
+    end
+
+    # asChild代替(04 §3.3): 同じクラス・スロット構造で要素名だけ変える。
+    # 契約タグがPrimitives由来(AvatarPrimitive.Root 等)でHTML要素名ではない場合は
+    # この既定タグへフォールバックする(各コンポーネントが上書きしてよい)
+    sig { returns(String) }
+    def tag
+      return @tag if @tag
+
+      contract_tag = T.cast(contract_root_slot[:tag], T.nilable(String))
+      return contract_tag if contract_tag&.match?(/\A[a-z][a-z0-9-]*\z/)
+
+      default_tag
+    end
+
+    # 契約タグがHTML要素名ではないときの描画タグ
+    sig { returns(String) }
+    def default_tag
+      "div"
+    end
+
+    # バリアント値の正規化 + fail-fast検証。契約に存在しない値は ArgumentError
+    sig { params(prop: Symbol, value: T.untyped).returns(Symbol) }
+    def normalize_option(prop, value)
+      ShadcnViewComponents::Classes.normalize_option(self.class.contract_path.to_sym, prop, value)
+    end
+
+    # data属性・ARIA・CSS値へ出す意味的なpropを、宣言済み契約で正規化する。
+    sig { params(prop: Symbol, value: T.untyped).returns(T.untyped) }
+    def normalize_property(prop, value)
+      ShadcnViewComponents::PropertyContracts.normalize(
+        component: self.class.contract_path.to_sym,
+        owner: self.class.to_s,
+        property: prop,
+        value:
+      )
+    end
+
+    # コンポーネント固有のバリアント組み合わせ(サブクラスが上書きする)
+    sig { returns(T::Hash[Symbol, VariantOption]) }
+    def variant_options
+      {}
+    end
+
+    # 契約由来の data 属性。ルートの data-slot は必ず出力する(04 §4.2)。
+    # ルートがラッパー等で data-slot を持たない契約では、契約クラスが属する要素の
+    # スロット(CLASSES_SLOT)に出す。どちらも無い契約(spinner等)では出さない
+    sig { returns(T::Hash[Symbol, T.untyped]) }
+    def contract_data_attributes
+      root_slot = T.cast(contract_root_slot[:name], T.nilable(String)).to_s
+      root_slot = T.cast(contract.const_get(:CLASSES_SLOT), T.nilable(String)).to_s if root_slot.empty? && contract.const_defined?(:CLASSES_SLOT)
+      root_slot.empty? ? {} : { slot: root_slot }
+    end
+
+    sig { returns(T::Hash[Symbol, T.untyped]) }
+    def html_attributes
+      attributes = static_attribute_defaults.merge(@html_args)
+      attributes[:class] = resolved_class
+      merge_nested(attributes, :data, contract_data_attributes)
+      merge_nested(attributes, :aria, {})
+      attributes
+    end
+
+    sig { returns(T::Module[T.anything]) }
+    def contract
+      self.class.contract
+    end
+
+    sig { returns(T::Hash[Symbol, T.untyped]) }
+    def contract_root_slot
+      root_slot_name = T.cast(contract.const_get(:ROOT_SLOT), String)
+      contract_slot(root_slot_name)
+    end
+
+    # 契約のスロット定義を data-slot 名で引く
+    sig { params(slot_name: String).returns(T::Hash[Symbol, T.untyped]) }
+    def contract_slot(slot_name)
+      slots = T.cast(contract.const_get(:SLOTS), T::Array[T::Hash[Symbol, T.untyped]])
+      slots.find { |slot| slot[:name] == slot_name } || {}
+    end
+
+    # 契約の static_attributes を既定値として採用(利用者指定が優先 — 04 §6)。
+    # cn を経ない静的 className(table のラッパー等)は class キーとして現れるため
+    # resolved_class で統合する
+    sig { returns(T::Hash[Symbol, T.untyped]) }
+    def static_attribute_defaults
+      T.cast(contract_root_slot[:static_attributes], T::Hash[Symbol, T.untyped])
+       .transform_keys(&:to_sym)
+    end
+
+    sig { returns(String) }
+    def resolved_class
+      static_class = T.cast(static_attribute_defaults[:class], T.nilable(String))
+      extra = [static_class, @user_class].compact.join(" ")
+      extra = nil if extra.empty?
+      self.class.classes(extra: extra, **variant_options)
+    end
+
+    # style は利用者が文字列・ハッシュどちらで渡しても壊れないよう結合する。
+    # 出力は常に文字列とする(ハッシュのまま渡すとレンダラの整形に依存するため)。
+    # gem 側の宣言を先頭に付け、CSSの後勝ちに従い利用者が上書きできる。
+    # key は Rails の style ハッシュと同じ規約でアンダースコアをハイフンへ変換する
+    # (aspect_ratio → aspect-ratio)
+    sig { params(attributes: T::Hash[Symbol, T.untyped], defaults: T::Hash[Symbol, T.untyped]).void }
+    def merge_style(attributes, defaults)
+      user = attributes[:style]
+      base = defaults.map { |key, value| "#{key.to_s.dasherize}: #{value}" }.join("; ")
+      user_part = if user.is_a?(Hash)
+                    user.map { |key, value| "#{key.to_s.dasherize}: #{value}" }.join("; ")
+                  else
+                    user.to_s
+                  end
+      attributes[:style] = [base, user_part].reject(&:empty?).join("; ")
+    end
+
+    # data: / aria: は深部マージ(契約由来の値と利用者指定が共存する)
+    sig { params(attributes: T::Hash[Symbol, T.untyped], key: Symbol, defaults: T::Hash[Symbol, T.untyped]).void }
+    def merge_nested(attributes, key, defaults)
+      user = T.cast(attributes[key], T.nilable(T::Hash[Symbol, T.untyped]))
+      attributes[key] = defaults.merge(user || {})
+    end
+  end
+
+  private_constant :BaseComponent
+end

data/app/components/shadcn/breadcrumb.rb

@@ -0,0 +1,70 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  class Breadcrumb < BaseComponent
+    # ナビゲーション全体。JS不要・リンクベース(05-stimulus-hotwire §6.4)
+    class List < BaseComponent; end
+
+    class Item < BaseComponent; end
+
+    class Link < BaseComponent; end
+
+    class Page < BaseComponent; end
+
+    # 区切り記号。子コンテンツが無ければ chevron アイコン(lucideと同等のパス)を描画する
+    class Separator < BaseComponent
+      sig { override.returns(String) }
+      def call
+        content_tag(tag, **html_attributes) { content.presence || chevron_icon }
+      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: "14",
+          height: "14"
+        ) do
+          raw(%(<path d="m9 18 6-6-6-6"/>))
+        end
+      end
+    end
+
+    # 省略記号(…)。lucide と同等のパス + スクリーンリーダー向けラベル
+    class Ellipsis < BaseComponent
+      sig { override.returns(String) }
+      def call
+        content_tag(tag, **html_attributes) do
+          safe_join([
+                      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"
+                      ) do
+                        raw(%(<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>))
+                      end,
+                      content_tag(:span, "More", class: "sr-only")
+                    ])
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/bubble.rb

@@ -0,0 +1,48 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # チャットの吹き出し(Phase 4)
+  class Bubble < BaseComponent
+    sig { params(variant: T.any(Symbol, String), args: T::Hash[Symbol, T.untyped]).void.checked(:never) }
+    def initialize(variant: ShadcnViewComponents::Contracts::Bubble::DEFAULTS.fetch(:variant), **args)
+      @variant = T.let(normalize_option(:variant, variant), Symbol)
+      super(**args)
+    end
+
+    sig { override.returns(T::Hash[Symbol, VariantOption]) }
+    def variant_options
+      { variant: @variant }
+    end
+
+    class Group < BaseComponent
+      # div
+    end
+
+    class Content < BaseComponent
+      # div
+    end
+
+    class Reactions < BaseComponent
+      # リアクション一覧(align/side)
+      sig do
+        params(
+          align: T.any(Symbol, String),
+          side: T.any(Symbol, String),
+          args: T::Hash[Symbol, T.untyped]
+        ).void.checked(:never)
+      end
+      def initialize(align: ShadcnViewComponents::Contracts::Bubble::Reactions::DEFAULTS.fetch(:align),
+                     side: ShadcnViewComponents::Contracts::Bubble::Reactions::DEFAULTS.fetch(:side), **args)
+        @align = T.let(normalize_option(:align, align), Symbol)
+        @side = T.let(normalize_option(:side, side), Symbol)
+        super(**args)
+      end
+
+      sig { override.returns(T::Hash[Symbol, VariantOption]) }
+      def variant_options
+        { align: @align, side: @side }
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+<%= content_tag(tag, **html_attributes) { content } %>

data/app/components/shadcn/button.rb

@@ -0,0 +1,41 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  class Button < BaseComponent
+    # 省略時の既定値は契約の defaults から読む(リテラルで二重管理しない)。
+    # checked(:never): rest-kwargs の実行時sig検証は sorbet-runtime の誤バインドがあるため
+    # 無効化し、srb tc の静的検査に委ねる(BaseComponent#initialize のコメント参照)
+    sig { override.returns(String) }
+    def default_tag
+      "button"
+    end
+
+    sig do
+      params(
+        variant: T.any(Symbol, String),
+        size: T.any(Symbol, String),
+        args: T::Hash[Symbol, T.untyped]
+      ).void.checked(:never)
+    end
+    def initialize(variant: ShadcnViewComponents::Contracts::Button::DEFAULTS.fetch(:variant),
+                   size: ShadcnViewComponents::Contracts::Button::DEFAULTS.fetch(:size), **args)
+      @variant = T.let(normalize_option(:variant, variant), Symbol)
+      @size = T.let(normalize_option(:size, size), Symbol)
+      super(**args)
+    end
+
+    sig { returns(Symbol) }
+    attr_reader :variant
+
+    sig { returns(Symbol) }
+    attr_reader :size
+
+    sig { override.returns(T::Hash[Symbol, VariantOption]) }
+    def variant_options
+      { variant: @variant, size: @size }
+    end
+    # base-nova の button は data-variant / data-size をDOMへ出さないため、
+    # 動的属性の上書きは行わない(契約どおり)
+  end
+end

data/app/components/shadcn/button_group.rb

@@ -0,0 +1,41 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # ボタンを一括りにするコンテナ(Phase 4)
+  class ButtonGroup < BaseComponent
+    sig { params(orientation: T.any(Symbol, String), args: T::Hash[Symbol, T.untyped]).void.checked(:never) }
+    def initialize(orientation: ShadcnViewComponents::Contracts::ButtonGroup::DEFAULTS.fetch(:orientation), **args)
+      @orientation = T.let(normalize_option(:orientation, orientation), Symbol)
+      super(**args)
+    end
+
+    sig { override.returns(T::Hash[Symbol, VariantOption]) }
+    def variant_options
+      { orientation: @orientation }
+    end
+
+    class Separator < BaseComponent
+      # div(契約クラスは upstream の separator 上書き分を事前解決したもの)
+      sig { params(orientation: T.any(Symbol, String), args: T::Hash[Symbol, T.untyped]).void.checked(:never) }
+      def initialize(orientation: :vertical, **args)
+        value = orientation.to_s
+        raise ArgumentError, "unknown orientation value #{orientation.inspect} (valid: :horizontal, :vertical)" unless %w[horizontal vertical].include?(value)
+
+        @orientation = T.let(value, String)
+        super(**args)
+      end
+
+      sig { override.returns(String) }
+      def call
+        attributes = @html_args.merge(class: self.class.classes(extra: @user_class))
+        merge_nested(attributes, :data, { slot: "button-group-separator" })
+        render(Shadcn::Separator.new(orientation: @orientation, **attributes))
+      end
+    end
+
+    class Text < BaseComponent
+      # div
+    end
+  end
+end

data/app/components/shadcn/button_styled.rb

@@ -0,0 +1,51 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # オーバーレイ系Triggerにボタン装飾を付与する共用モジュール。
+  #
+  # upstream では <DialogTrigger asChild><Button variant="outline">…</Button></DialogTrigger>
+  # のように asChild + Button で装飾するが、本gemのTriggerは常設の <button> 要素のため、
+  # variant:/size: キーワードでボタンの契約クラスを合成して同等の見た目を提供する。
+  # 指定しない場合は装飾なし(upstream の <XTrigger> 単体と同じ)。
+  module ButtonStyled
+    extend T::Sig
+
+    # rest-kwargs を持つメソッドの実行時sig検証は sorbet-runtime の既知の誤バインドが
+    # あるため checked(:never) で無効化し、srb tc の静的検査に委譲する(BaseComponent と同じ運用)
+    sig do
+      params(
+        variant: T.nilable(T.any(Symbol, String)),
+        size: T.nilable(T.any(Symbol, String)),
+        args: T::Hash[Symbol, T.untyped]
+      ).void.checked(:never)
+    end
+    def initialize(variant: nil, size: nil, **args)
+      @button_variant = T.let(
+        variant.nil? ? nil : ShadcnViewComponents::Classes.normalize_option(:button, :variant, variant),
+        T.nilable(Symbol)
+      )
+      @button_size = T.let(
+        size.nil? ? nil : ShadcnViewComponents::Classes.normalize_option(:button, :size, size),
+        T.nilable(Symbol)
+      )
+      super(**args)
+    end
+
+    private
+
+    # 契約のボタンクラスを属性に合成する。variant:/size: 未指定の時は何もしない
+    sig { params(attributes: T::Hash[Symbol, T.untyped]).returns(T::Hash[Symbol, T.untyped]) }
+    def apply_button_styling(attributes)
+      return attributes if @button_variant.nil? && @button_size.nil?
+
+      options = { variant: @button_variant, size: @button_size }.compact
+      attributes[:class] = ShadcnViewComponents::Classes.resolve(
+        :button,
+        extra: attributes[:class].to_s,
+        **options
+      )
+      attributes
+    end
+  end
+end