bootstrap5-rails-extensions 0.1.0

data/app/helpers/bootstrap5_rails_extensions/modal_helper.rb

@@ -0,0 +1,227 @@
+# typed: false
+# frozen_string_literal: true
+
+module Bootstrap5RailsExtensions
+  module ModalHelper
+    # Stripeダッシュボードを意識したBootstrap 5.3モーダルのDSLを提供するヘルパー。
+    #
+    # 使い方:
+    #   <%= render_modal id: "exampleModal", title: "タイトル" do |modal| %>
+    #     <% modal.body do %>
+    #       本文...
+    #     <% end %>
+    #   <% end %>
+    #
+    # フォームを1枚で扱う場合:
+    #   <%= render_modal id: "userModal", title: "ユーザー追加",
+    #       form: { model: User.new, url: users_path } do |modal| %>
+    #     <% modal.body do |f| %>
+    #       <%= f.text_field :name %>
+    #     <% end %>
+    #     <% modal.footer do |f| %>
+    #       <%= f.submit "保存" %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # オプション:
+    #   dialog: { size: :sm|:lg|:xl|:fullscreen, centered: true/false, scrollable: true/false }
+    #   data:   data-*属性をマージ（controller: "modal" をデフォルト付与）
+    #   form:   form_withにそのまま渡すオプション(Hash)。指定時はブロックにフォームビルダーを渡す。
+    def render_modal(title_or_nil = nil, id: nil, title: nil, dialog: {}, data: {}, form: nil, &block)
+      raise ArgumentError, _("モーダルにはブロックが必要です") unless block_given?
+
+      title ||= title_or_nil if title.nil? && title_or_nil.is_a?(String)
+      raise ArgumentError, _("モーダルIDを指定してください") if id.nil? || id.to_s.empty?
+      raise ArgumentError, _("モーダルタイトルを指定してください") if title.nil? || title.to_s.empty?
+
+      dialog_classes = ["modal-dialog"]
+      case dialog[:size]&.to_sym
+      when :sm then dialog_classes << "modal-sm"
+      when :lg then dialog_classes << "modal-lg"
+      when :xl then dialog_classes << "modal-xl"
+      when :fullscreen then dialog_classes << "modal-fullscreen"
+      end
+      dialog_classes << "modal-dialog-centered" if dialog[:centered]
+      dialog_classes << "modal-dialog-scrollable" if dialog[:scrollable]
+
+      modal_data = { controller: "modal" }.merge(data || {})
+
+      builder = ModalBuilder.new(self, modal_id: id, default_title: title)
+
+      content_markup = if form.present?
+        form_options = form.to_h.symbolize_keys
+        capture do
+          form_with(**form_options) do |form_builder|
+            builder.with_form(form_builder) { yield(builder) }
+            concat(builder.render_modal_content)
+          end
+        end
+      else
+        builder.with_form(nil) { yield(builder) }
+        builder.render_modal_content
+      end
+
+      render(
+        partial: "bootstrap5_rails_extensions/modal",
+        locals: {
+          id: id,
+          dialog_class: dialog_classes.join(" "),
+          data: modal_data,
+          content: content_markup,
+        },
+      )
+    end
+
+    # モーダルの各セクションを構築する小さなDSL用ビルダー。
+    class ModalBuilder
+      def initialize(view_context, modal_id:, default_title:)
+        @view = view_context
+        @modal_id = modal_id
+        @default_title = default_title
+        @header_html = nil
+        @header_full = false
+        @body_fragments = []
+        @body_full = nil
+        @footer_fragments = []
+        @footer_full = nil
+        @current_form_builder = nil
+      end
+
+      def with_form(form_builder)
+        previous = @current_form_builder
+        @current_form_builder = form_builder
+        yield(self)
+      ensure
+        @current_form_builder = previous
+      end
+
+      def header(content = nil, full: false, &block)
+        raise ArgumentError, _("モーダルヘッダーは一度だけ定義できます") if @header_html
+
+        html = extract_content(content, &block)
+        @header_full = full
+        @header_html = html
+        self
+      end
+
+      def body(content = nil, full: false, &block)
+        html = extract_content(content, &block)
+
+        if full
+          raise ArgumentError, _("モーダル本文はfull: trueでは一度だけ設定できます") if @body_full || @body_fragments.any?
+
+          @body_full = html
+        else
+          @body_fragments << html
+        end
+        self
+      end
+
+      def footer(content = nil, full: false, &block)
+        html = extract_content(content, &block)
+
+        if full
+          raise ArgumentError, _("モーダルフッターはfull: trueでは一度だけ設定できます") if @footer_full || @footer_fragments.any?
+
+          @footer_full = html
+        else
+          @footer_fragments << html
+        end
+        self
+      end
+
+      def render_modal_content
+        body_markup = build_body_markup
+
+        header_markup = build_header_markup
+        footer_markup = build_footer_markup
+
+        @view.content_tag(:div, class: "modal-content") do
+          @view.concat(header_markup) if header_markup
+          @view.concat(body_markup)
+          @view.concat(footer_markup) if footer_markup
+        end
+      end
+
+      private
+
+      def extract_content(content, &block)
+        if block_given?
+          if block.arity.positive?
+            raise ArgumentError, _("form_withオプションを指定した場合のみフォームビルダーを利用できます") if @current_form_builder.nil?
+
+            @view.capture(@current_form_builder, &block)
+          else
+            @view.capture(&block)
+          end
+        else
+          content
+        end
+      end
+
+      def build_header_markup
+        if @header_html
+          return @header_html if @header_full
+
+          @view.content_tag(:div, class: "modal-header") do
+            @view.concat(@header_html)
+            @view.concat(default_close_button)
+          end
+        else
+          default_header_markup
+        end
+      end
+
+      def build_body_markup
+        if @body_full
+          raise ArgumentError, _("モーダル本文が空です") if blank_html?(@body_full)
+
+          @body_full
+        else
+          raise ArgumentError, _("モーダル本文を定義してください") if @body_fragments.empty? || blank_html?(@view.safe_join(@body_fragments))
+
+          @view.content_tag(:div, @view.safe_join(@body_fragments), class: "modal-body")
+        end
+      end
+
+      def build_footer_markup
+        if @footer_full
+          return if blank_html?(@footer_full)
+
+          @footer_full
+        elsif @footer_fragments.present?
+          fragment_html = @view.safe_join(@footer_fragments)
+          return if blank_html?(fragment_html)
+
+          @view.content_tag(:div, fragment_html, class: "modal-footer")
+        end
+      end
+
+      def default_header_markup
+        @view.content_tag(:div, class: "modal-header") do
+          @view.concat(
+            @view.content_tag(
+              :h5,
+              @default_title,
+              class: "modal-title",
+              id: header_label_id,
+            ),
+          )
+          @view.concat(default_close_button)
+        end
+      end
+
+      def default_close_button
+        @view.button_tag("", type: "button", class: "btn-close", data: { action: "click->modal#hide" }, aria: { label: "閉じる" })
+      end
+
+      def header_label_id
+        "#{@modal_id}Label"
+      end
+
+      def blank_html?(html)
+        html.respond_to?(:blank?) ? html.blank? : html.to_s.strip.empty?
+      end
+    end
+  end
+end

data/app/helpers/bootstrap5_rails_extensions/offcanvas_helper.rb

@@ -0,0 +1,67 @@
+module Bootstrap5RailsExtensions
+  module OffcanvasHelper
+    # Renders a Bootstrap 5.3 Offcanvas using a shared partial. Works with Stimulus/Turbo.
+    #
+    # TODO: The host app currently coordinates opening Offcanvas + Turbo Frame
+    # loads via custom `data-offcanvas-*` attributes handled in a Stimulus controller.
+    # Consider standardizing this interface (e.g., provide a helper to render trigger
+    # links that play nicely with Turbo without introducing custom attributes) or
+    # embracing Bootstrap's data API by adding a reliable integration layer.
+    # This is a compromise and should be revisited.
+    #
+    # Example:
+    #   <%= render_offcanvas id: "exampleOffcanvas", title: "プレビュー" do %>
+    #     <turbo-frame id="offcanvas-frame">...</turbo-frame>
+    #   <% end %>
+    #   # もしくはタイトルを第1引数で指定（render_modalと同様のインタフェース）
+    #   <%= render_offcanvas "プレビュー", id: "exampleOffcanvas" do %>
+    #     ...
+    #   <% end %>
+    #
+    # Options:
+    #   placement: :start|:end|:top|:bottom (default: :end)
+    #   footer: String/HTML or -> { ... } (Proc)
+    #   data:   additional data-* for the offcanvas root (controller "offcanvas" added by default)
+    #
+    # 引数:
+    #   - render_offcanvas id: "...", title: "..." do ... end
+    #   - render_offcanvas "タイトル", id: "..." do ... end
+    def render_offcanvas(title_or_nil = nil, id: nil, title: nil, placement: :end, footer: nil, data: {}, &block)
+      # ブロック必須
+      raise ArgumentError, "block required for offcanvas body" unless block_given?
+
+      # 2つの呼び出しシグネチャに対応
+      title ||= title_or_nil if title.nil? && title_or_nil.is_a?(String)
+      raise ArgumentError, "id is required" if id.nil? || id.to_s.empty?
+      raise ArgumentError, "title is required" if title.nil? || title.to_s.empty?
+
+      placement_class = case placement.to_s
+      when "start" then "offcanvas-start"
+      when "end" then "offcanvas-end"
+      when "top" then "offcanvas-top"
+      when "bottom" then "offcanvas-bottom"
+      else "offcanvas-end"
+      end
+
+      # Stimulusコントローラをデフォルト付与（上書きも許可）
+      offcanvas_data = { controller: "offcanvas" }.merge(data || {})
+
+      body_html = capture(&block)
+      footer_html = if footer.respond_to?(:call)
+        capture(&footer)
+      else
+        footer
+      end
+
+      render partial: "bootstrap5_rails_extensions/offcanvas",
+             locals: {
+               id: id,
+               title: title,
+               placement_class: placement_class,
+               body: body_html,
+               footer: footer_html,
+               data: offcanvas_data
+             }
+    end
+  end
+end

data/app/helpers/bootstrap5_rails_extensions/table_helper.rb

@@ -0,0 +1,93 @@
+# frozen_string_literal: true
+
+module Bootstrap5RailsExtensions
+  module TableHelper
+    # Bootstrapのtableコンポーネント向け簡易DSL。
+    #
+    # 使い方:
+    #   <%= render_table class: "table-striped" do |table| %>
+    #     <%= table.thead class: "table-light" do %>
+    #       <tr><th>見出し</th></tr>
+    #     <% end %>
+    #     <%= table.tbody do %>
+    #       <tr><td>内容</td></tr>
+    #     <% end %>
+    #   <% end %>
+    def render_table(data: {}, wrapper_class: nil, wrapper_html: {}, **html_options)
+      raise ArgumentError, "theadかtbodyを定義してください" unless block_given?
+
+      builder = TableBuilder.new(self)
+      yield(builder)
+
+      raise ArgumentError, "theadかtbodyを最低1つは定義してください" if builder.empty?
+
+      html_options[:class] = build_table_class(html_options[:class])
+      html_options[:data] = merge_data_attributes(html_options[:data], data) if data.present?
+
+      wrapper_options = build_wrapper_options(wrapper_html, wrapper_class)
+
+      content_tag(:div, **wrapper_options) do
+        content_tag(:table, builder.render, **html_options)
+      end
+    end
+
+    private
+
+    def build_wrapper_options(wrapper_html, wrapper_class)
+      options = wrapper_html.present? ? wrapper_html.deep_dup : {}
+      options[:class] = build_wrapper_class(options[:class], wrapper_class)
+      options
+    end
+
+    def build_table_class(custom_class)
+      classes = ["table", "text-nowrap"]
+      classes << custom_class if custom_class.present?
+      classes.join(" ")
+    end
+
+    def build_wrapper_class(custom_class, additional_class)
+      classes = ["table-responsive"]
+      classes << additional_class if additional_class.present?
+      classes << custom_class if custom_class.present?
+      classes.join(" ")
+    end
+
+    def merge_data_attributes(existing, additional)
+      (existing || {}).merge(additional)
+    end
+
+    class TableBuilder
+      def initialize(view_context)
+        @view = view_context
+        @sections = []
+      end
+
+      def thead(**options, &block)
+        append_section(:thead, options, block)
+        self
+      end
+
+      def tbody(**options, &block)
+        append_section(:tbody, options, block)
+        self
+      end
+
+      def render
+        @view.safe_join(@sections)
+      end
+
+      def empty?
+        @sections.empty?
+      end
+
+      private
+
+      def append_section(tag_name, options, block)
+        raise ArgumentError, "#{tag_name}にはブロックを渡してください" unless block
+
+        content = @view.capture(&block)
+        @sections << @view.content_tag(tag_name, content, **options)
+      end
+    end
+  end
+end

data/app/helpers/bootstrap5_rails_extensions/toast_helper.rb

@@ -0,0 +1,33 @@
+module Bootstrap5RailsExtensions
+  module ToastHelper
+    # コンテナだけを描画（右上固定）。この時点ではStimulusは起動しない。
+    # レイアウトで <%= render_toast %> を配置しておき、表示時は turbo_stream.toast で要素を差し込む。
+    FLASH_TOAST_COLORS = {
+      notice: :success,
+      alert: :danger,
+      error: :danger,
+      warning: :warning,
+      info: :info,
+      success: :success
+    }.freeze
+
+    def render_toast(id: "toast-root", position: "top-0 end-0", flash_messages: nil)
+      flash_nodes = build_flash_toasts(flash_messages)
+      content_tag(:div, safe_join(flash_nodes), id: id, class: "toast-container position-fixed #{position} p-3")
+    end
+
+    private
+
+    def build_flash_toasts(flash_messages)
+      return [] unless flash_messages.respond_to?(:each)
+
+      flash_messages.each_with_object([]) do |(type, messages), nodes|
+        color = FLASH_TOAST_COLORS[type.to_sym] || :secondary
+        Array(messages).each do |message|
+          nodes << render(partial: "bootstrap5_rails_extensions/toast",
+                          locals: { msg: { text: message, color: color } })
+        end
+      end
+    end
+  end
+end

data/app/javascript/bootstrap5_rails_extensions/modal_controller.js

@@ -0,0 +1,88 @@
+import { Controller } from "@hotwired/stimulus"
+import { Modal } from "bootstrap"
+
+// Stimulusコントローラー（Bootstrap.Modalの薄いラッパー）
+//
+// 目的:
+// - 画面上の任意のトリガーで、モーダルのオープンとTurbo Frameの読み込みを同時に制御する
+// 契約:
+// - トリガー属性：
+//     data-modal-target="#modalId"         // 開きたいモーダルのセレクタ（必須）
+//     data-turbo-frame="frameId"           // Turbo FrameのID（指定時はTurboに任せて読み込み）
+//     href                                 // 読み込むURL（任意。未指定ならフレーム読み込みはスキップ）
+// 備考:
+// - Bootstrapのdata APIと競合させないため、documentのcapture段階で先取りして手動でshow()する
+export default class extends Controller {
+  static targets = ["form"]
+
+  connect() {
+    // この要素自身のモーダルインスタンスを確保
+    this.modal = Modal.getOrCreateInstance(this.element)
+
+    // 委譲クリックでモーダルを開き、必要ならFrameへ読み込み
+    // data-modal-target が付いた要素のクリックをフック
+    this.handleDelegatedClick = (event) => {
+      const trigger = event.target?.closest?.('[data-modal-target]')
+      if (!trigger) return
+
+      // 修飾クリックや既に処理済みはスキップ
+      if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
+
+      const targetSelector = trigger.getAttribute('data-modal-target')
+      if (!targetSelector) return
+
+      const targetEl = document.querySelector(targetSelector)
+      if (!targetEl) return
+      // 自身が対象モーダルでなければ無視（複数モーダルが同時に存在する場合の重複実行を防止）
+      if (targetEl !== this.element) return
+
+      // モーダルをプログラムで開く
+      this.modal.show()
+    }
+    // captureでBootstrapのdata APIより先に処理する
+    document.addEventListener('click', this.handleDelegatedClick, true)
+
+  }
+
+  disconnect() {
+    document.removeEventListener('click', this.handleDelegatedClick, true)
+    if (this.modal) {
+      this.modal.hide()
+      this.modal.dispose()
+      this.modal = null
+    }
+  }
+
+  // 手動制御用のアクション
+  open() { this.modal?.show() }
+  hide(event) {
+    // Turboイベント以外（クリックなど detail が number）のケースはそのまま閉じる
+    if (!event?.detail || typeof event.detail === 'number') {
+      this.modal?.hide()
+      return
+    }
+
+    // Turbo submit で失敗 (422) した場合のみ閉じない
+    if (event.detail.success === false) return
+
+    this.modal?.hide()
+  }
+  toggle() { this.modal?.toggle() }
+
+  formSubmit(event) {
+    event?.preventDefault()
+
+    const form = this.hasFormTarget ? this.formTarget : this.element.querySelector("form")
+
+    if (!form) {
+      console.warn("[modal] フォームが見つかりませんでした。")
+      return
+    }
+
+    if (typeof form.requestSubmit === "function") {
+      form.requestSubmit()
+    } else {
+      form.submit()
+    }
+  }
+}

data/app/javascript/bootstrap5_rails_extensions/offcanvas_controller.js

@@ -0,0 +1,62 @@
+import { Controller } from "@hotwired/stimulus"
+import { Offcanvas } from "bootstrap"
+
+// Stimulusコントローラー（Bootstrap.Offcanvasの薄いラッパー）
+//
+// 目的:
+// - 任意のトリガークリックで「オフキャンバスを開く + Turbo FrameへURLを読み込む」を同時に行う
+// 契約:
+// - トリガー属性：
+//     data-offcanvas-target="#offcanvasId"  // 開きたいOffcanvasのセレクタ（必須）
+//     data-turbo-frame="frameId"            // Turbo FrameのID（指定時はTurboに任せて読み込み）
+//     href                                   // 読み込むURL（任意。未指定ならフレーム読み込みはスキップ）
+// 備考:
+// - Bootstrapのdata APIと競合させないため、documentのcapture段階で先取りして手動でshow()する
+
+export default class extends Controller {
+
+  connect() {
+    this.offcanvas = Offcanvas.getOrCreateInstance(this.element)
+
+    // 委譲クリックでオープン＋Frame読み込み
+    this.handleDelegatedClick = (event) => {
+      const trigger = event.target?.closest?.('[data-offcanvas-target]')
+      if (!trigger) return
+
+      // 修飾クリック等はスキップ
+      if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
+
+      const targetSelector = trigger.getAttribute('data-offcanvas-target')
+      if (!targetSelector) return
+
+      const targetEl = document.querySelector(targetSelector)
+      if (!targetEl) return
+      // 自分のOffcanvas以外宛は無視
+      if (targetEl !== this.element) return
+
+      // 開く
+      this.offcanvas.show()
+    }
+    document.addEventListener('click', this.handleDelegatedClick, true)
+
+  }
+
+  disconnect() {
+    document.removeEventListener('click', this.handleDelegatedClick, true)
+    if (this.offcanvas) {
+      this.offcanvas.hide()
+      this.offcanvas.dispose()
+      this.offcanvas = null
+    }
+  }
+
+  open() { this.offcanvas?.show() }
+  hide(event) { 
+    // Turboイベント以外（クリックなど detail が number）のケースはそのまま閉じる
+    if (!event?.detail || typeof event.detail === 'number') {
+      this.modal?.hide()
+      return
+    }
+  }
+  toggle() { this.offcanvas?.toggle() }
+}

data/app/javascript/bootstrap5_rails_extensions/toast_controller.js

@@ -0,0 +1,31 @@
+import { Controller } from "@hotwired/stimulus"
+import { Toast } from "bootstrap"
+
+// 単一トースト要素用のシンプルなコントローラー
+// 要素自体（.toast）がターゲット。接続時に即showする。
+export default class extends Controller {
+  static values = {
+    delay: { type: Number, default: 4000 },
+    autohide: { type: Boolean, default: true },
+  }
+
+  connect() {
+    this.toast = Toast.getOrCreateInstance(this.element, {
+      autohide: this.autohideValue,
+      delay: this.delayValue,
+    })
+    this.toast.show()
+
+    // Turboキャッシュ前に破棄
+    this.beforeCache = () => {
+      try { this.toast?.hide(); this.toast?.dispose() } catch (_) {}
+    }
+    document.addEventListener("turbo:before-cache", this.beforeCache)
+  }
+
+  disconnect() {
+    document.removeEventListener("turbo:before-cache", this.beforeCache)
+    try { this.toast?.hide(); this.toast?.dispose() } catch (_) {}
+    this.toast = null
+  }
+}

data/app/views/bootstrap5_rails_extensions/_modal.html.erb

@@ -0,0 +1,6 @@
+<%# Engine shared partial - expects locals: id:, dialog_class:, data:, content: %>
+<div class="modal fade" id="<%= id %>" tabindex="-1" aria-labelledby="<%= id %>Label" aria-hidden="true" data-controller="<%= data[:controller] %>"<% (data || {}).except(:controller).each do |k, v| %> data-<%= k.to_s.dasherize %>="<%= v %>"<% end %>>
+  <div class="<%= dialog_class %>">
+    <%= content %>
+  </div>
+</div>

data/app/views/bootstrap5_rails_extensions/_offcanvas.html.erb

@@ -0,0 +1,15 @@
+<%# Engine shared partial - expects locals: id:, title:, placement_class:, body:, footer:, data: %>
+<div class="offcanvas <%= placement_class %>" tabindex="-1" id="<%= id %>" aria-labelledby="<%= id %>Label" data-controller="<%= data[:controller] %>"<% (data || {}).except(:controller).each do |k, v| %> data-<%= k.to_s.dasherize %>="<%= v %>"<% end %>>
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title" id="<%= id %>Label"><%= title %></h5>
+    <button type="button" class="btn-close" aria-label="閉じる" data-action="click->offcanvas#hide"></button>
+  </div>
+  <div class="offcanvas-body">
+    <%= body %>
+  </div>
+  <% if footer.present? %>
+    <div class="offcanvas-footer border-top p-3">
+      <%= footer %>
+    </div>
+  <% end %>
+</div>

data/app/views/bootstrap5_rails_extensions/_toast.html.erb

@@ -0,0 +1,15 @@
+<%# 単一トースト要素。ローカル: msg = { text:, color: }
+  オプション: autohide(Boolean), delay(Number)
+%>
+<div class="toast align-items-center text-bg-<%= msg[:color] %> border-0"
+     role="status" aria-live="polite" aria-atomic="true"
+     data-controller="toast"
+     data-toast-autohide-value="<%= local_assigns.key?(:autohide) ? local_assigns[:autohide] : true %>"
+     data-toast-delay-value="<%= local_assigns.key?(:delay) ? local_assigns[:delay] : 4000 %>">
+  <div class="d-flex">
+    <div class="toast-body">
+      <%= msg[:text] %>
+    </div>
+    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+  </div>
+</div>

data/bin/console

@@ -0,0 +1,12 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require "bundler/setup"
+require "bootstrap5_rails_extensions"
+
+puts "Bootstrap5RailsExtensions console loaded!"
+puts "Try: Rails.application&.config&.eager_load_namespaces"
+puts
+
+require "irb"
+IRB.start(__FILE__)

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# bundler以外の追加セットアップが必要な場合はここに追記してください