shadcn_view_components 0.2.0

data/app/assets/tailwind/shadcn_view_components/engine.css

@@ -0,0 +1,11 @@
+/* shadcn_view_components: Tailwind CSS entry point for tailwindcss-rails. */
+@import "../../stylesheets/shadcn/shadcn.css";
+
+/* Generated and hand-maintained class contracts used at runtime. */
+@source "../../../../lib/shadcn_view_components/generated/contracts/**/*.rb";
+@source "../../../../lib/shadcn_view_components/contracts/**/*.rb";
+
+/* Classes emitted directly by ViewComponents and distributed JavaScript. */
+@source "../../../components/**/*.rb";
+@source "../../../components/**/*.erb";
+@source "../../javascripts/shadcn/**/*.js";

data/app/components/shadcn/accordion.rb

@@ -0,0 +1,121 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  class Accordion < BaseComponent
+    # ネイティブな details によるアコーディオン(JS無しで開閉可 — 05-stimulus-hotwire §3)。
+    # JS無効時フォールバック: Graceful(開閉・排他ともネイティブ要素で成立)。
+    # 単一排他は Item の name 属性で実現する(利用者が name: を渡す)。
+    # 開閉アニメーション(animate-accordion-down/up)は shadcn--accordion コントローラが
+    # data-state と高さ変数を同期して担う
+    CONTROLLER = "shadcn--accordion"
+
+    sig { params(args: T::Hash[Symbol, T.untyped]).void.checked(:never) }
+    def initialize(**args)
+      assign_accessibility_root_id(args, prefix: "accordion")
+      super
+    end
+
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def contract_data_attributes
+      super.merge(controller: CONTROLLER)
+    end
+
+    class Item < BaseComponent
+      # 契約タグは AccordionPrimitive.Item。ネイティブな details として描く
+      sig { params(args: T::Hash[Symbol, T.untyped]).void.checked(:never) }
+      def initialize(**args)
+        assign_accessibility_root_id(args, prefix: "accordion-item")
+        super
+      end
+
+      sig { override.returns(String) }
+      def default_tag
+        "details"
+      end
+
+      # Accordion ルート外で Item 単体を描画した場合も、開閉状態と
+      # ARIA参照を同期できるようにする。ルート内では親controllerが管理する。
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def contract_data_attributes
+        super.merge(controller: Accordion::CONTROLLER)
+      end
+    end
+
+    class Trigger < BaseComponent
+      # 契約ルートは AccordionPrimitive.Trigger。JS無しで開閉するため summary 要素として
+      # 描く。summary は details の直接子でなければ開閉機能しない(HTML仕様)ため、
+      # upstream の Header(h3)ラッパーは省略し、見出しセマンティクスは
+      # content に見出しを渡すことで表現する(summary は見出し内容を含めることができる)
+      sig { override.returns(String) }
+      def call
+        content_tag(:summary, **trigger_attributes) do
+          safe_join([content.presence, chevron_icons])
+        end
+      end
+
+      private
+
+      sig { returns(T::Hash[Symbol, T.untyped]) }
+      def trigger_attributes
+        attributes = @html_args.merge(class: self.class.classes(extra: @user_class))
+        merge_nested(attributes, :data, { slot: self.class.contract.const_get(:CLASSES_SLOT) })
+        merge_nested(attributes, :aria, { expanded: "false" })
+        attributes
+      end
+
+      # base-nova は開閉で2つのアイコンを group-aria-expanded で切り替える
+      # (閉: ChevronDown / 開: ChevronUp)。両方を描き、表示は契約クラスに任せる
+      sig { returns(String) }
+      def chevron_icons
+        icon_slots = self.class.contract.const_get(:SLOTS)
+                         .select { |slot| slot[:name] == "accordion-trigger-icon" }
+        safe_join(icon_slots.map do |slot|
+          content_tag(:span,
+                      class: slot.dig(:static_attributes, :class),
+                      data: { slot: "accordion-trigger-icon" },
+                      "aria-hidden": "true") { chevron_svg }
+        end)
+      end
+
+      sig { returns(String) }
+      def chevron_svg
+        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(%(<path d="m6 9 6 6 6-6"/>))
+        end
+      end
+    end
+
+    class Content < BaseComponent
+      # upstream はルートに静的クラス(overflow-hidden / アニメーション)、
+      # 内側のdivに契約クラス(cn)を持つ二重構造。そのまま再現する
+      sig { override.returns(String) }
+      def call
+        attributes = @html_args.merge(class: root_static_class)
+        merge_nested(attributes, :data, { slot: contract_root_slot[:name] })
+        content_tag(tag, **attributes) do
+          content_tag(:div, class: self.class.classes(extra: @user_class)) { content }
+        end
+      end
+
+      private
+
+      sig { returns(T.nilable(String)) }
+      def root_static_class
+        T.cast(contract_root_slot.dig(:static_attributes, :class), T.nilable(String))
+      end
+    end
+  end
+end

data/app/components/shadcn/alert.rb

@@ -0,0 +1,31 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  class Alert < BaseComponent
+    sig do
+      params(
+        variant: T.any(Symbol, String),
+        args: T::Hash[Symbol, T.untyped]
+      ).void.checked(:never)
+    end
+    def initialize(variant: ShadcnViewComponents::Contracts::Alert::DEFAULTS.fetch(:variant), **args)
+      @variant = T.let(normalize_option(:variant, variant), Symbol)
+      super(**args)
+    end
+
+    sig { returns(Symbol) }
+    attr_reader :variant
+
+    sig { override.returns(T::Hash[Symbol, VariantOption]) }
+    def variant_options
+      { variant: @variant }
+    end
+
+    class Title < BaseComponent
+    end
+
+    class Description < BaseComponent
+    end
+  end
+end

data/app/components/shadcn/alert_dialog.rb

@@ -0,0 +1,165 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # 確認ダイアログ(ネイティブ `<dialog>` + role="alertdialog")。
+  # EscはARIA Authoring Practicesのモーダルダイアログと同じく閉じる操作とし、
+  # ネイティブ <dialog> の cancel 動作に委ねる。
+  # JS無効時フォールバック: Readable(dialog と同じ)
+  class AlertDialog < BaseComponent
+    CONTROLLER = "shadcn--dialog"
+
+    sig { params(args: T::Hash[Symbol, T.untyped]).void.checked(:never) }
+    def initialize(**args)
+      assign_accessibility_root_id(args, prefix: "alert-dialog")
+      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 Portal < BaseComponent
+      # upstream の Portal は子を body 末尾へ搬送するだけの機能要素。
+      # 本gemではラッパー div として実体化する(Dialog::Portal と同じ)
+    end
+
+    class Overlay < BaseComponent
+      # Dialog::Overlay と同じ扱い(::backdrop で代替)
+    end
+
+    class Content < BaseComponent
+      # 契約スロット構成: alert-dialog-content のみ(portal/overlayは契約外)。
+      # サイズ(default/sm)は data-size で表現する
+      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
+        content_tag(:dialog, **content_attributes) { content }
+      end
+
+      private
+
+      sig { returns(T::Hash[Symbol, T.untyped]) }
+      def content_attributes
+        attributes = @html_args.merge(
+          class: self.class.classes(extra: @user_class),
+          role: "alertdialog"
+        )
+        data = T.cast(attributes[:data], T.nilable(T::Hash[Symbol, T.untyped])) || {}
+        attributes[:data] = { slot: "alert-dialog-content", size: @size }.merge(data)
+        aria = T.cast(attributes[:aria], T.nilable(T::Hash[Symbol, T.untyped])) || {}
+        attributes[:aria] = { modal: "true" }.merge(aria)
+        attributes
+      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
+
+    class Media < BaseComponent
+      # div(アイコン等を含める領域)
+    end
+
+    # Action/Cancel: upstream は Button を asChild で重ねる。本gemでは Button の
+    # 描画結果に data-slot を差し替えて出す(どちらも押下でダイアログを閉じる)
+    class Action < BaseComponent
+      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: :default, size: :default, **args)
+        @variant = T.let(ShadcnViewComponents::Classes.normalize_option(:button, :variant, variant), Symbol)
+        @size = T.let(ShadcnViewComponents::Classes.normalize_option(:button, :size, size), Symbol)
+        super(**args)
+      end
+
+      sig { override.returns(String) }
+      def call
+        render(Button.new(variant: @variant, size: @size, type: "button", **button_attributes)) { content }
+      end
+
+      private
+
+      # Cancel 側は alert-dialog-cancel を上書きする
+      sig { returns(String) }
+      def slot_name
+        "alert-dialog-action"
+      end
+
+      sig { returns(T::Hash[Symbol, T.untyped]) }
+      def button_attributes
+        data = T.cast(@html_args[:data], T.nilable(T::Hash[Symbol, T.untyped])) || {}
+        @html_args.merge(
+          data: { slot: slot_name, action: "#{CONTROLLER}#close" }.merge(data),
+          class: @user_class
+        )
+      end
+    end
+
+    class Cancel < Action
+      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: :outline, size: :default, **args)
+        super
+      end
+
+      private
+
+      sig { override.returns(String) }
+      def slot_name
+        "alert-dialog-cancel"
+      end
+    end
+  end
+end

data/app/components/shadcn/aspect_ratio.rb

@@ -0,0 +1,34 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  class AspectRatio < BaseComponent
+    # 契約タグは AspectRatioPrimitive.Root。ネイティブな div + CSS aspect-ratio で描画する
+    sig { override.returns(String) }
+    def default_tag
+      "div"
+    end
+
+    # upstream の ratio prop は style 経由でアスペクト比を指定する。ネイティブCSSで同等に再現
+    sig do
+      params(
+        ratio: T.nilable(T.any(Integer, Float, String)),
+        args: T::Hash[Symbol, T.untyped]
+      ).void.checked(:never)
+    end
+    def initialize(ratio: self.class.property_default(:ratio), **args)
+      @ratio = T.let(normalize_property(:ratio, ratio), T.nilable(T.any(Integer, Float)))
+      super(**args)
+    end
+
+    sig { returns(T.nilable(T.any(Integer, Float))) }
+    attr_reader :ratio
+
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def html_attributes
+      attributes = super
+      merge_style(attributes, { aspect_ratio: @ratio.to_s }) if @ratio
+      attributes
+    end
+  end
+end

data/app/components/shadcn/attachment.rb

@@ -0,0 +1,86 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # 添付カード(Phase 4)。orientation/size のバリアントを持つ
+  class Attachment < BaseComponent
+    sig do
+      params(
+        orientation: T.any(Symbol, String),
+        size: T.any(Symbol, String),
+        args: T::Hash[Symbol, T.untyped]
+      ).void.checked(:never)
+    end
+    def initialize(orientation: ShadcnViewComponents::Contracts::Attachment::DEFAULTS.fetch(:orientation),
+                   size: ShadcnViewComponents::Contracts::Attachment::DEFAULTS.fetch(:size), **args)
+      @orientation = T.let(normalize_option(:orientation, orientation), Symbol)
+      @size = T.let(normalize_option(:size, size), Symbol)
+      super(**args)
+    end
+
+    sig { override.returns(T::Hash[Symbol, VariantOption]) }
+    def variant_options
+      { orientation: @orientation, size: @size }
+    end
+
+    class Group < BaseComponent
+      # div
+    end
+
+    class Media < BaseComponent
+      # サムネイル領域(variant: image/file)
+      sig { params(variant: T.any(Symbol, String), args: T::Hash[Symbol, T.untyped]).void.checked(:never) }
+      def initialize(variant: ShadcnViewComponents::Contracts::Attachment::Media::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
+    end
+
+    class Content < BaseComponent
+      # div
+    end
+
+    class Title < BaseComponent
+      # div
+    end
+
+    class Description < BaseComponent
+      # div
+    end
+
+    class Actions < BaseComponent
+      # div
+    end
+
+    class Action < BaseComponent
+      # button
+      sig { override.returns(String) }
+      def default_tag
+        "button"
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        super.tap { |attributes| attributes[:type] = "button" unless attributes.key?(:type) }
+      end
+    end
+
+    class Trigger < BaseComponent
+      # button(削除等の個別操作)
+      sig { override.returns(String) }
+      def default_tag
+        "button"
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        super.tap { |attributes| attributes[:type] = "button" unless attributes.key?(:type) }
+      end
+    end
+  end
+end

data/app/components/shadcn/avatar.rb

@@ -0,0 +1,55 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  class Avatar < BaseComponent
+    # 契約タグは AvatarPrimitive.Root。ネイティブな span として描画する
+    sig { override.returns(String) }
+    def default_tag
+      "span"
+    end
+
+    # upstream は size(default/sm/lg)を data-size 属性として描画する(クラスはdata-[size]セレクタで参照)
+    sig do
+      params(
+        size: T.any(Symbol, String),
+        args: T::Hash[Symbol, T.untyped]
+      ).void.checked(:never)
+    end
+    def initialize(size: self.class.property_default(:size), **args)
+      @size = T.let(normalize_property(:size, size), String)
+      super(**args)
+    end
+
+    sig { returns(String) }
+    attr_reader :size
+
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def contract_data_attributes
+      super.merge(size: @size)
+    end
+
+    class Image < BaseComponent
+      # 契約タグは AvatarPrimitive.Image。ネイティブな img として描画する(void要素)
+      sig { override.returns(String) }
+      def default_tag
+        "img"
+      end
+    end
+
+    class Fallback < BaseComponent
+      sig { override.returns(String) }
+      def default_tag
+        "span"
+      end
+    end
+
+    class Badge < BaseComponent
+    end
+
+    class Group < BaseComponent
+      class Count < BaseComponent
+      end
+    end
+  end
+end

data/app/components/shadcn/badge.rb

@@ -0,0 +1,32 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  class Badge < BaseComponent
+    # 省略時の既定値は契約の defaults から読む(リテラルで二重管理しない)
+    sig do
+      params(
+        variant: T.any(Symbol, String),
+        args: T::Hash[Symbol, T.untyped]
+      ).void.checked(:never)
+    end
+    def initialize(variant: ShadcnViewComponents::Contracts::Badge::DEFAULTS.fetch(:variant), **args)
+      @variant = T.let(normalize_option(:variant, variant), Symbol)
+      super(**args)
+    end
+
+    sig { returns(Symbol) }
+    attr_reader :variant
+
+    sig { override.returns(T::Hash[Symbol, VariantOption]) }
+    def variant_options
+      { variant: @variant }
+    end
+
+    # upstream の動的属性(data-variant)は手書き側の責務として描画する
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def contract_data_attributes
+      super.merge(variant: @variant)
+    end
+  end
+end