shadcn_view_components 0.2.0

data/app/components/shadcn/sidebar.rb

@@ -0,0 +1,332 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # サイドバー(10-roadmap Phase 4 の重量級)。開閉状態は Provider の
+  # data-state(open/closed)で持ち、Trigger/Rail がトグルする。
+  # upstream のモバイルSheet展開・cookie永続化は本gemでは扱わない
+  # (ホストが data-state をサーバ側で出力すれば良い — 05 §6 のキャッシュ方針)
+  # JS無効時フォールバック: Readable(初期状態はSSRされた data-state のまま)
+  class Sidebar < BaseComponent
+    CONTROLLER = "shadcn--sidebar"
+
+    sig { params(state: T.any(Symbol, String), args: T::Hash[Symbol, T.untyped]).void.checked(:never) }
+    def initialize(state: self.class.property_default(:state), **args)
+      @state = T.let(normalize_property(:state, state), String)
+      super(**args)
+    end
+
+    # 契約スロット構成: sidebar(状態root) > sidebar-gap / sidebar-container > sidebar-inner
+    sig { override.returns(String) }
+    def call
+      content_tag(:div, **html_attributes) do
+        safe_join([gap, container])
+      end
+    end
+
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def html_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: "sidebar", state: @state }.merge(data)
+      attributes
+    end
+
+    private
+
+    sig { returns(String) }
+    def gap
+      content_tag(:div, class: slot_class("sidebar-gap"), data: { slot: "sidebar-gap" }) { "".html_safe }
+    end
+
+    sig { returns(String) }
+    def container
+      content_tag(:div, class: slot_class("sidebar-container"), data: { slot: "sidebar-container" }) do
+        content_tag(:div, class: slot_class("sidebar-inner"), data: { slot: "sidebar-inner" }) { content }
+      end
+    end
+
+    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
+
+    class Provider < BaseComponent
+      # div(ラッパー)。data-controller を持つ状態の持ち主
+      sig { params(state: T.any(Symbol, String), args: T::Hash[Symbol, T.untyped]).void.checked(:never) }
+      def initialize(state: self.class.property_default(:state), **args)
+        @state = T.let(normalize_property(:state, state), String)
+        super(**args)
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_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: "sidebar-wrapper", controller: Sidebar::CONTROLLER, state: @state }.merge(data)
+        attributes
+      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: "true", label: "サイドバーの切替" })
+        merge_nested(attributes, :data, { action: "#{Sidebar::CONTROLLER}#toggle" })
+        attributes
+      end
+
+      sig { override.returns(String) }
+      def call
+        content_tag(tag, **html_attributes) do
+          safe_join([panel_left_icon, content_tag(:span, class: "sr-only") { "サイドバーの切替" }])
+        end
+      end
+
+      private
+
+      sig { returns(String) }
+      def panel_left_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" }
+        ) { raw(%(<rect width="18" height="18" x="3" y="4" rx="2"/><path d="M9 4v16"/>)) }
+      end
+    end
+
+    class Rail < 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)
+        attributes[:tabindex] = "-1"
+        merge_nested(attributes, :aria, { label: "サイドバーの切替" })
+        merge_nested(attributes, :data, { action: "#{Sidebar::CONTROLLER}#toggle" })
+        attributes
+      end
+    end
+
+    class Inset < BaseComponent
+      # main(本体コンテンツ領域)
+      sig { override.returns(String) }
+      def default_tag
+        "main"
+      end
+    end
+
+    class Input < BaseComponent
+      # upstream は Input(別アイテム)に静的クラスを足す(contains で検証)
+      sig { override.returns(String) }
+      def call
+        # NOTE: `**@html_args, data: {...}` は Ruby 4 でリテラルキーがスプラット側を
+        # 黙って上書きするため、merge + 深部マージで利用者指定を保持する
+        attributes = @html_args.merge(class: self.class.classes(extra: @user_class))
+        merge_nested(attributes, :data, { slot: "sidebar-input", sidebar: "input" })
+        render(::Shadcn::Input.new(**attributes)) { content }
+      end
+    end
+
+    class Header < BaseComponent
+      # div
+    end
+
+    class Footer < BaseComponent
+      # div
+    end
+
+    class Separator < BaseComponent
+      # upstream は Separator(別アイテム)に静的クラスを足す
+      sig { override.returns(String) }
+      def call
+        attributes = @html_args.merge(class: self.class.classes(extra: @user_class))
+        merge_nested(attributes, :data, { slot: "sidebar-separator", sidebar: "separator" })
+        render(::Shadcn::Separator.new(**attributes)) { content }
+      end
+    end
+
+    class Content < BaseComponent
+      # div
+    end
+
+    class Group < BaseComponent
+      # div
+    end
+
+    class GroupLabel < BaseComponent
+      # div
+    end
+
+    class GroupAction < BaseComponent
+      # button相当(利用者が tag: a 等を渡せる)
+      sig { override.returns(String) }
+      def default_tag
+        "button"
+      end
+    end
+
+    class GroupContent < BaseComponent
+      # div
+    end
+
+    class Menu < BaseComponent
+      # ul
+      sig { override.returns(String) }
+      def default_tag
+        "ul"
+      end
+    end
+
+    class MenuItem < BaseComponent
+      # li
+      sig { override.returns(String) }
+      def default_tag
+        "li"
+      end
+    end
+
+    class MenuButton < BaseComponent
+      # variant / size は base-nova では data-variant / data-size 属性
+      # (クラスは data-[size=...]: 等のCSS variantで追従する)
+      sig do
+        params(
+          variant: T.any(Symbol, String),
+          size: T.any(Symbol, String),
+          active: T::Boolean,
+          args: T::Hash[Symbol, T.untyped]
+        ).void.checked(:never)
+      end
+      def initialize(variant: ShadcnViewComponents::Contracts::Sidebar::MenuButton::DEFAULTS.fetch(:variant),
+                     size: ShadcnViewComponents::Contracts::Sidebar::MenuButton::DEFAULTS.fetch(:size),
+                     active: false, **args)
+        @variant = T.let(normalize_option(:variant, variant), Symbol)
+        @size = T.let(normalize_option(:size, size), Symbol)
+        @active = active
+        super(**args)
+      end
+
+      sig { override.returns(T::Hash[Symbol, VariantOption]) }
+      def variant_options
+        { variant: @variant, size: @size }
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = super
+        attributes[:type] = "button" unless attributes.key?(:type) || tag == "a"
+        # 契約スロットの静的属性 data-sidebar="menu-button"
+        merge_nested(attributes, :data, { sidebar: "menu-button", active: @active.to_s })
+        attributes
+      end
+    end
+
+    class MenuAction < BaseComponent
+      # button
+      sig { override.returns(String) }
+      def default_tag
+        "button"
+      end
+    end
+
+    class MenuBadge < BaseComponent
+      # div
+    end
+
+    class MenuSkeleton < BaseComponent
+      # upstream は Skeleton(別アイテム)を内側に描く
+      sig { params(show_icon: T::Boolean, args: T::Hash[Symbol, T.untyped]).void.checked(:never) }
+      def initialize(show_icon: true, **args)
+        @show_icon = show_icon
+        super(**args)
+      end
+
+      sig { override.returns(String) }
+      def call
+        content_tag(tag, **html_attributes) do
+          safe_join([icon_skeleton, text_skeleton])
+        end
+      end
+
+      private
+
+      # Skeleton(別アイテム)のクラスは Classes.resolve で引き、構造は自前で描く
+      sig { returns(String) }
+      def icon_skeleton
+        return "" unless @show_icon
+
+        skeleton_div(extra: "size-4 rounded-md")
+      end
+
+      sig { returns(String) }
+      def text_skeleton
+        skeleton_div(extra: "h-4 flex-1")
+      end
+
+      sig { params(extra: String).returns(String) }
+      def skeleton_div(extra:)
+        klass = ShadcnViewComponents::Classes.resolve(:skeleton, extra: extra)
+        content_tag(:div, class: klass, data: { slot: "skeleton" }) { "".html_safe }
+      end
+    end
+
+    class MenuSub < BaseComponent
+      # ul
+      sig { override.returns(String) }
+      def default_tag
+        "ul"
+      end
+    end
+
+    class MenuSubItem < BaseComponent
+      # li
+      sig { override.returns(String) }
+      def default_tag
+        "li"
+      end
+    end
+
+    class MenuSubButton < BaseComponent
+      # a相当(tag: で差し替え可)。isActive / size は base-nova では data-active /
+      # data-size 属性で表現される(クラスは data-[size=...]: のCSS variantで追従)
+      sig do
+        params(
+          size: T.any(Symbol, String),
+          active: T::Boolean,
+          args: T::Hash[Symbol, T.untyped]
+        ).void.checked(:never)
+      end
+      def initialize(size: self.class.property_default(:size), active: false, **args)
+        @size = T.let(normalize_property(:size, size), String)
+        @active = active
+        super(**args)
+      end
+
+      sig { override.returns(String) }
+      def default_tag
+        "a"
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = super
+        merge_nested(attributes, :data, { active: @active.to_s, size: @size })
+        attributes
+      end
+    end
+  end
+end

data/app/components/shadcn/skeleton.rb

@@ -0,0 +1,13 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  class Skeleton < BaseComponent
+    # BaseComponent の rest-kwargs initialize を再宣言する(srb の静的モデルが
+    # 継承した **args を誤バインドするため — 他コンポーネントと同じ定形)
+    sig { params(args: T::Hash[Symbol, T.untyped]).void.checked(:never) }
+    def initialize(**args)
+      super
+    end
+  end
+end

data/app/components/shadcn/slider.rb

@@ -0,0 +1,279 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # スライダー(ネイティブ input[type=range] を用いる — 05 §3 ネイティブ最優先)。
+  # class / style / tag はupstreamのRootに、それ以外の利用者HTML属性はフォームコントロールの
+  # inputへ渡す。track / range / thumbはinputの現在値を表す装飾で、状態源にはしない。
+  class Slider < BaseComponent
+    # ブラウザがrange inputへ適用する初期値の制約と、装飾位置の算出を同じ値から行う。
+    class InitialState
+      extend T::Sig
+
+      sig do
+        params(
+          min: T.untyped,
+          max: T.untyped,
+          step: T.untyped,
+          value: T.untyped,
+          orientation: T.untyped
+        ).void
+      end
+      def initialize(min:, max:, step:, value:, orientation:)
+        @min = T.let(normalize_number(:min, min), T.any(Integer, Float))
+        @max = T.let(normalize_number(:max, max), T.any(Integer, Float))
+        @step = T.let(normalize_number(:step, step), T.any(Integer, Float))
+        @value = T.let(normalize_value(value), T.nilable(T.any(Integer, Float)))
+        @orientation = T.let(normalize_orientation(orientation), String)
+        validate!
+      end
+
+      sig { returns(T::Hash[Symbol, T.untyped]) }
+      def input_attributes
+        attributes = T.let({ min: @min, max: @max, step: @step }, T::Hash[Symbol, T.untyped])
+        attributes[:value] = @value if @value
+        attributes
+      end
+
+      sig { returns(String) }
+      attr_reader :orientation
+
+      sig { returns(T::Boolean) }
+      def vertical?
+        @orientation == "vertical"
+      end
+
+      sig { returns(String) }
+      def range_style
+        if vertical?
+          "position: absolute; bottom: 0; height: #{percentage}%"
+        else
+          "position: absolute; left: 0; width: #{percentage}%"
+        end
+      end
+
+      sig { returns(String) }
+      def thumb_style
+        if vertical?
+          "position: absolute; bottom: #{percentage}%; left: 50%; transform: translate(-50%, 50%)"
+        else
+          "position: absolute; left: #{percentage}%; top: 50%; transform: translate(-50%, -50%)"
+        end
+      end
+
+      private
+
+      sig { params(property: Symbol, value: T.untyped).returns(T.any(Integer, Float)) }
+      def normalize_number(property, value)
+        T.cast(normalize(property, value), T.any(Integer, Float))
+      end
+
+      sig { params(value: T.untyped).returns(T.nilable(T.any(Integer, Float))) }
+      def normalize_value(value)
+        T.cast(normalize(:value, value), T.nilable(T.any(Integer, Float)))
+      end
+
+      sig { params(value: T.untyped).returns(String) }
+      def normalize_orientation(value)
+        T.cast(normalize(:orientation, value), String)
+      end
+
+      sig { params(property: Symbol, value: T.untyped).returns(T.untyped) }
+      def normalize(property, value)
+        ShadcnViewComponents::PropertyContracts.normalize(
+          component: :slider,
+          owner: "Shadcn::Slider",
+          property:,
+          value:
+        )
+      end
+
+      sig { returns(String) }
+      def percentage
+        result = ((effective_value - decimal(@min)) / (decimal(@max) - decimal(@min))) * 100
+        format("%.12g", result.to_f)
+      end
+
+      sig { returns(Rational) }
+      def effective_value
+        return decimal(@value) if @value
+
+        minimum = decimal(@min)
+        step = decimal(@step)
+        midpoint = minimum + ((decimal(@max) - minimum) / 2)
+        position = (midpoint - minimum) / step
+        step_count = position.floor
+        step_count += 1 if (position - step_count) * 2 >= 1
+        minimum + (step * step_count)
+      end
+
+      sig { params(value: T.any(Integer, Float)).returns(Rational) }
+      def decimal(value)
+        Rational(value.to_s)
+      end
+
+      sig { void }
+      def validate!
+        raise ArgumentError, "Shadcn::Slider max must be greater than min, got min=#{@min.inspect}, max=#{@max.inspect}" unless @min < @max
+        if @value && !@value.between?(@min, @max)
+          raise ArgumentError,
+                "Shadcn::Slider value must be between min and max, got value=#{@value.inspect}, " \
+                "min=#{@min.inspect}, max=#{@max.inspect}"
+        end
+
+        validate_step_alignment!
+      end
+
+      sig { void }
+      def validate_step_alignment!
+        return unless @value
+
+        steps = (decimal(@value) - decimal(@min)) / decimal(@step)
+        return if steps.denominator == 1
+
+        raise ArgumentError,
+              "Shadcn::Slider value must align with step from min, got value=#{@value.inspect}, " \
+              "min=#{@min.inspect}, step=#{@step.inspect}"
+      end
+    end
+
+    CONTROLLER = "shadcn--slider"
+    INPUT_CLASS = "peer absolute inset-0 z-10 size-full cursor-pointer opacity-0"
+    INPUT_ACTION = T.let("input->#{CONTROLLER}#sync change->#{CONTROLLER}#sync".freeze, String)
+    THUMB_INPUT_STATE_CLASS = "peer-hover:ring-3 peer-focus-visible:ring-3 peer-active:ring-3 " \
+                              "peer-disabled:pointer-events-none peer-disabled:opacity-50"
+
+    private_constant :InitialState, :INPUT_CLASS, :INPUT_ACTION, :THUMB_INPUT_STATE_CLASS
+
+    sig do
+      params(
+        min: T.any(Integer, Float, String),
+        max: T.any(Integer, Float, String),
+        step: T.any(Integer, Float, String),
+        value: T.nilable(T.any(Integer, Float, String)),
+        orientation: T.any(Symbol, String),
+        args: T::Hash[Symbol, T.untyped]
+      ).void.checked(:never)
+    end
+    def initialize(min: self.class.property_default(:min), # rubocop:disable Metrics/ParameterLists
+                   max: self.class.property_default(:max),
+                   step: self.class.property_default(:step),
+                   value: self.class.property_default(:value),
+                   orientation: self.class.property_default(:orientation), **args)
+      @initial_state = T.let(InitialState.new(min:, max:, step:, value:, orientation:), InitialState)
+
+      # SliderのclassName / tagはupstream RootのAPI。それ以外は実際にフォーカス・
+      # 送信されるinputのHTML属性として扱い、wrapperへ誤送しない。
+      root_args = T.let({}, T::Hash[Symbol, T.untyped])
+      %i[class style tag].each { |key| root_args[key] = args.delete(key) if args.key?(key) }
+      @input_args = T.let(args, T::Hash[Symbol, T.untyped])
+      super(**root_args)
+    end
+
+    sig { override.returns(String) }
+    def call
+      content_tag(tag, **html_attributes) do
+        content_tag(:div, class: control_class, data: part_data) do
+          # peer variantでnative inputのhover/focus/active状態をthumbへ渡すため、
+          # inputはthumbより前の兄弟に置く。
+          safe_join([track, range_input, thumb])
+        end
+      end
+    end
+
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def html_attributes
+      super.tap do |attributes|
+        merge_nested(attributes, :data, part_data.merge(controller: CONTROLLER))
+      end
+    end
+
+    private
+
+    sig { returns(String) }
+    def track
+      content_tag(:div, class: slot_class("slider-track"), data: part_data(slot: "slider-track")) do
+        content_tag(
+          :div,
+          class: slot_class("slider-range"),
+          style: @initial_state.range_style,
+          data: part_data(slot: "slider-range")
+        ) { "".html_safe }
+      end
+    end
+
+    sig { returns(String) }
+    def thumb
+      content_tag(
+        :span,
+        class: thumb_class,
+        style: @initial_state.thumb_style,
+        aria: { hidden: "true" },
+        data: part_data(slot: "slider-thumb")
+      ) { "".html_safe }
+    end
+
+    sig { returns(String) }
+    def range_input
+      attributes = T.let(
+        @input_args.dup,
+        T::Hash[Symbol, T.untyped]
+      )
+      attributes[:type] = "range"
+      attributes[:class] = INPUT_CLASS
+      attributes.merge!(@initial_state.input_attributes)
+
+      merge_nested(attributes, :aria, { orientation: @initial_state.orientation })
+      merge_input_data(attributes)
+      merge_style(attributes, { writing_mode: "vertical-lr", direction: "rtl" }) if @initial_state.vertical?
+      void_tag("input", **attributes)
+    end
+
+    sig { params(attributes: T::Hash[Symbol, T.untyped]).void }
+    def merge_input_data(attributes)
+      user_data = T.cast(attributes[:data], T.nilable(T::Hash[Symbol, T.untyped])) || {}
+      user_action = user_data[:action]
+      attributes[:data] = user_data.merge(
+        slot: "slider-input",
+        action: [INPUT_ACTION, user_action].compact.join(" ")
+      )
+    end
+
+    sig { params(slot: T.nilable(String)).returns(T::Hash[Symbol, T.untyped]) }
+    def part_data(slot: nil)
+      data = T.let({ orientation: @initial_state.orientation }, T::Hash[Symbol, T.untyped])
+      data[:slot] = slot if slot
+      data[:disabled] = "" if disabled?
+      data
+    end
+
+    sig { returns(T::Boolean) }
+    def disabled?
+      !@input_args[:disabled].nil? && @input_args[:disabled] != false
+    end
+
+    sig { params(name: String).returns(String) }
+    def slot_class(name)
+      slot = contract_slot(name)
+      raise KeyError, "Slider contract is missing #{name}" if slot.empty?
+
+      static_attributes = T.cast(slot.fetch(:static_attributes), T::Hash[Symbol, T.untyped])
+      T.cast(static_attributes.fetch(:class), String)
+    end
+
+    sig { returns(String) }
+    def thumb_class
+      ShadcnViewComponents::Classes::MERGER.merge("#{slot_class('slider-thumb')} #{THUMB_INPUT_STATE_CLASS}")
+    end
+
+    sig { returns(String) }
+    def control_class
+      slot = T.cast(contract.const_get(:SLOTS), T::Array[T::Hash[Symbol, T.untyped]])
+              .find { |candidate| candidate[:tag] == "SliderPrimitive.Control" }
+      raise KeyError, "Slider contract is missing SliderPrimitive.Control" unless slot
+
+      static_attributes = T.cast(slot.fetch(:static_attributes), T::Hash[Symbol, T.untyped])
+      T.cast(static_attributes.fetch(:class), String)
+    end
+  end
+end

data/app/components/shadcn/sonner.rb

@@ -0,0 +1,30 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # トースト(Phase 4)。upstream は sonner ライブラリを使うが、本gemは
+  # Stimulus + CustomEvent で同等の通知領域を提供する:
+  #   dispatchEvent(new CustomEvent("shadcn:toast", { detail: { title: "保存しました" } }))
+  # JS無効時フォールバック: Graceful(通知はJS依存だが、領域自体は空で害がない)
+  # Sonner自体は名前空間であり、描画にはToasterを使う。
+  module Sonner
+    class Toaster < BaseComponent
+      CONTROLLER = "shadcn--toast"
+
+      sig { override.returns(String) }
+      def default_tag
+        "section"
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        static_class = T.cast(contract_slot("").dig(:static_attributes, :class), T.nilable(String))
+        attributes = @html_args.merge(class: [static_class, @user_class].compact.join(" "))
+        data = T.cast(attributes[:data], T.nilable(T::Hash[Symbol, T.untyped])) || {}
+        attributes[:data] = { controller: CONTROLLER }.merge(data)
+        merge_nested(attributes, :aria, { live: "polite" })
+        attributes
+      end
+    end
+  end
+end

data/app/components/shadcn/spinner.rb

@@ -0,0 +1,32 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  class Spinner < BaseComponent
+    # 契約タグは lucide の Loader2Icon。lucide と同等の loader-circle パスを持つ
+    # インラインSVGとして描画する(アイコン系は契約に data-slot を持たない)
+    sig { override.returns(String) }
+    def default_tag
+      "svg"
+    end
+
+    sig { override.returns(String) }
+    def call
+      content_tag(
+        :svg,
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        width: "16",
+        height: "16",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        **html_attributes
+      ) do
+        raw(%(<path d="M21 12a9 9 0 1 1-9-9"/>))
+      end
+    end
+  end
+end