better_page 2.0.0

data/lib/generators/better_page/templates/javascript/controllers/modal_controller.js

@@ -0,0 +1,70 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="modal"
+export default class extends Controller {
+  static targets = ["container", "panel", "backdrop"]
+  static values = {
+    open: { type: Boolean, default: false },
+    confirmClose: { type: Boolean, default: false }
+  }
+
+  connect() {
+    this.boundKeydown = this.keydown.bind(this)
+    document.addEventListener("keydown", this.boundKeydown)
+  }
+
+  disconnect() {
+    document.removeEventListener("keydown", this.boundKeydown)
+    document.body.classList.remove("overflow-hidden")
+  }
+
+  open() {
+    this.openValue = true
+    this.containerTarget.classList.remove("hidden")
+    document.body.classList.add("overflow-hidden")
+
+    requestAnimationFrame(() => {
+      this.backdropTarget.classList.remove("opacity-0")
+      this.panelTarget.classList.remove("opacity-0", "translate-y-4", "sm:translate-y-0", "sm:scale-95")
+      this.panelTarget.classList.add("opacity-100", "translate-y-0", "sm:scale-100")
+    })
+  }
+
+  close() {
+    this.openValue = false
+    this.backdropTarget.classList.add("opacity-0")
+    this.panelTarget.classList.remove("opacity-100", "translate-y-0", "sm:scale-100")
+    this.panelTarget.classList.add("opacity-0", "translate-y-4", "sm:translate-y-0", "sm:scale-95")
+
+    setTimeout(() => {
+      this.containerTarget.classList.add("hidden")
+      document.body.classList.remove("overflow-hidden")
+    }, 300)
+  }
+
+  toggle() {
+    this.openValue ? this.close() : this.open()
+  }
+
+  requestClose() {
+    if (this.confirmCloseValue) {
+      if (confirm("Sei sicuro di voler chiudere? I dati non salvati andranno persi.")) {
+        this.close()
+      }
+    } else {
+      this.close()
+    }
+  }
+
+  keydown(event) {
+    if (event.key === "Escape" && this.openValue) {
+      this.requestClose()
+    }
+  }
+
+  backdropClick(event) {
+    if (event.target === this.backdropTarget) {
+      this.requestClose()
+    }
+  }
+}

data/lib/generators/better_page/templates/javascript/controllers/sidebar_controller.js

@@ -0,0 +1,152 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Sidebar Controller
+ *
+ * A Stimulus controller for collapsible sidebar navigation.
+ * Connects to data-controller="sidebar"
+ *
+ * Features:
+ * - Toggle entire sidebar collapse/expand
+ * - Toggle individual menu groups
+ * - Persist collapse state in localStorage
+ *
+ * Usage:
+ *   <aside data-controller="sidebar"
+ *          data-sidebar-collapsed-value="false"
+ *          data-sidebar-persist-value="true"
+ *          data-sidebar-storage-key-value="main-sidebar-collapsed">
+ *     <button data-action="click->sidebar#toggle">Toggle</button>
+ *     <div data-sidebar-target="group">
+ *       <button data-action="click->sidebar#toggleGroup" data-group-id="nav">
+ *         <span data-sidebar-target="groupLabel">Navigation</span>
+ *         <svg data-sidebar-target="groupIcon">...</svg>
+ *       </button>
+ *       <div data-sidebar-target="groupContent" data-group-id="nav">
+ *         <!-- group items -->
+ *       </div>
+ *     </div>
+ *   </aside>
+ */
+export default class extends Controller {
+  static targets = [
+    "brand",
+    "brandText",
+    "toggleIcon",
+    "group",
+    "groupToggle",
+    "groupLabel",
+    "groupIcon",
+    "groupContent",
+    "item",
+    "itemLabel"
+  ]
+
+  static values = {
+    collapsed: Boolean,
+    persist: Boolean,
+    storageKey: String
+  }
+
+  connect() {
+    // Restore saved state if persistence is enabled
+    if (this.persistValue && this.storageKeyValue) {
+      const saved = localStorage.getItem(this.storageKeyValue)
+      if (saved !== null) {
+        this.collapsedValue = saved === "true"
+      }
+    }
+    this.updateUI()
+  }
+
+  /**
+   * Toggle the entire sidebar collapse state
+   */
+  toggle() {
+    this.collapsedValue = !this.collapsedValue
+
+    // Save state if persistence is enabled
+    if (this.persistValue && this.storageKeyValue) {
+      localStorage.setItem(this.storageKeyValue, this.collapsedValue.toString())
+    }
+
+    this.updateUI()
+  }
+
+  /**
+   * Toggle a specific menu group
+   * @param {Event} event - Click event from the group toggle button
+   */
+  toggleGroup(event) {
+    const button = event.currentTarget
+    const groupId = button.dataset.groupId
+
+    // Find the content container for this group
+    const content = this.groupContentTargets.find(
+      (el) => el.dataset.groupId === groupId
+    )
+
+    // Find the icon within the button
+    const icon = button.querySelector('[data-sidebar-target="groupIcon"]')
+
+    // Toggle aria-expanded
+    const isExpanded = button.getAttribute("aria-expanded") === "true"
+    button.setAttribute("aria-expanded", (!isExpanded).toString())
+
+    // Toggle content visibility
+    if (content) {
+      content.classList.toggle("hidden")
+    }
+
+    // Toggle icon rotation
+    if (icon) {
+      icon.classList.toggle("-rotate-90")
+      icon.classList.toggle("rotate-0")
+    }
+  }
+
+  /**
+   * Update the UI based on current collapsed state
+   */
+  updateUI() {
+    const collapsed = this.collapsedValue
+
+    // Update width classes
+    this.element.classList.toggle("w-64", !collapsed)
+    this.element.classList.toggle("w-16", collapsed)
+
+    // Update toggle icon rotation
+    if (this.hasToggleIconTarget) {
+      this.toggleIconTarget.classList.toggle("rotate-180", collapsed)
+    }
+
+    // Collect all text elements to hide/show
+    const textTargets = [
+      ...(this.hasBrandTextTarget ? this.brandTextTargets : []),
+      ...(this.hasGroupLabelTarget ? this.groupLabelTargets : []),
+      ...(this.hasItemLabelTarget ? this.itemLabelTargets : [])
+    ]
+
+    // Toggle visibility of text elements
+    textTargets.forEach((el) => {
+      el.classList.toggle("opacity-0", collapsed)
+      el.classList.toggle("w-0", collapsed)
+      el.classList.toggle("overflow-hidden", collapsed)
+    })
+
+    // Hide badges when collapsed
+    if (collapsed) {
+      this.element.querySelectorAll("[class*='badge'], [class*='rounded-full']").forEach((badge) => {
+        if (badge.classList.contains("bg-blue-100") || badge.classList.contains("bg-red-500")) {
+          badge.classList.add("hidden")
+        }
+      })
+    } else {
+      this.element.querySelectorAll("[class*='badge'], [class*='rounded-full']").forEach((badge) => {
+        if (badge.classList.contains("bg-blue-100") || badge.classList.contains("bg-red-500")) {
+          badge.classList.remove("hidden")
+        }
+      })
+    }
+  }
+}

data/lib/generators/better_page/templates/javascript/controllers/table_controller.js

@@ -0,0 +1,60 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Table Controller
+ *
+ * A Stimulus controller for table row selection.
+ * Connects to data-controller="table"
+ *
+ * Usage:
+ *   <div data-controller="table">
+ *     <table>
+ *       <thead>
+ *         <tr>
+ *           <th>
+ *             <input type="checkbox"
+ *                    data-table-target="selectAll"
+ *                    data-action="change->table#selectAll">
+ *           </th>
+ *         </tr>
+ *       </thead>
+ *       <tbody>
+ *         <tr>
+ *           <td>
+ *             <input type="checkbox"
+ *                    data-table-target="row"
+ *                    data-action="change->table#rowChanged">
+ *           </td>
+ *         </tr>
+ *       </tbody>
+ *     </table>
+ *   </div>
+ */
+export default class extends Controller {
+  static targets = ["selectAll", "row"]
+
+  /**
+   * Select or deselect all row checkboxes
+   * @param {Event} event - The change event from the select all checkbox
+   */
+  selectAll(event) {
+    const checked = event.target.checked
+    this.rowTargets.forEach(checkbox => {
+      checkbox.checked = checked
+    })
+  }
+
+  /**
+   * Update the select all checkbox state based on individual row selections
+   * Sets indeterminate state when some (but not all) rows are selected
+   */
+  rowChanged() {
+    const total = this.rowTargets.length
+    const checked = this.rowTargets.filter(cb => cb.checked).length
+
+    if (this.hasSelectAllTarget) {
+      this.selectAllTarget.checked = checked === total
+      this.selectAllTarget.indeterminate = checked > 0 && checked < total
+    }
+  }
+}

data/lib/generators/better_page/templates/javascript/controllers/tabs_controller.js

@@ -0,0 +1,89 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="tabs"
+export default class extends Controller {
+  static targets = ["tab", "panel"]
+  static values = {
+    default: String,
+    style: { type: String, default: "underline" },
+    activeClass: String,
+    inactiveClass: String
+  }
+
+  connect() {
+    const defaultId = this.defaultValue || this.tabTargets[0]?.dataset.tabId
+    if (defaultId) {
+      this.selectTab(defaultId, false)
+    }
+  }
+
+  select(event) {
+    const tabId = event.currentTarget.dataset.tabId
+    this.selectTab(tabId)
+  }
+
+  selectTab(tabId, animate = true) {
+    // Update tabs
+    this.tabTargets.forEach(tab => {
+      const isActive = tab.dataset.tabId === tabId
+      tab.setAttribute("aria-selected", isActive)
+      tab.setAttribute("tabindex", isActive ? "0" : "-1")
+
+      // Update classes
+      const activeClasses = this.activeClassValue.split(" ").filter(c => c)
+      const inactiveClasses = this.inactiveClassValue.split(" ").filter(c => c)
+
+      if (isActive) {
+        tab.classList.remove(...inactiveClasses)
+        tab.classList.add(...activeClasses)
+      } else {
+        tab.classList.remove(...activeClasses)
+        tab.classList.add(...inactiveClasses)
+      }
+    })
+
+    // Update panels
+    this.panelTargets.forEach(panel => {
+      const isActive = panel.dataset.tabId === tabId
+      panel.classList.toggle("hidden", !isActive)
+    })
+
+    // Dispatch custom event
+    this.dispatch("changed", { detail: { tabId } })
+  }
+
+  keydown(event) {
+    const currentTab = event.currentTarget
+    const currentIndex = this.tabTargets.indexOf(currentTab)
+    let newIndex
+
+    switch (event.key) {
+      case "ArrowLeft":
+        event.preventDefault()
+        newIndex = currentIndex - 1
+        if (newIndex < 0) newIndex = this.tabTargets.length - 1
+        break
+      case "ArrowRight":
+        event.preventDefault()
+        newIndex = currentIndex + 1
+        if (newIndex >= this.tabTargets.length) newIndex = 0
+        break
+      case "Home":
+        event.preventDefault()
+        newIndex = 0
+        break
+      case "End":
+        event.preventDefault()
+        newIndex = this.tabTargets.length - 1
+        break
+      default:
+        return
+    }
+
+    const newTab = this.tabTargets[newIndex]
+    if (newTab) {
+      newTab.focus()
+      this.selectTab(newTab.dataset.tabId)
+    }
+  }
+}

data/lib/generators/better_page/templates/new_page.rb.tt

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+<% namespace_path.each_with_index do |ns, i| -%>
+<%= "  " * i %>module <%= ns.camelize %>
+<% end -%>
+<%= "  " * namespace_path.length %>class NewPage < FormBasePage
+<%= "  " * namespace_path.length %>  def initialize(<%= resource_singular %>, metadata = {})
+<%= "  " * namespace_path.length %>    @<%= resource_singular %> = <%= resource_singular %>
+<%= "  " * namespace_path.length %>    @user = metadata[:user]
+<%= "  " * namespace_path.length %>    super(<%= resource_singular %>, metadata)
+<%= "  " * namespace_path.length %>  end
+
+<%= "  " * namespace_path.length %>  private
+
+<%= "  " * namespace_path.length %>  # Required: Form header configuration
+<%= "  " * namespace_path.length %>  def header
+<%= "  " * namespace_path.length %>    {
+<%= "  " * namespace_path.length %>      title: "New <%= resource_singular.humanize %>",
+<%= "  " * namespace_path.length %>      description: "Create a new <%= resource_singular.humanize.downcase %>.",
+<%= "  " * namespace_path.length %>      breadcrumbs: breadcrumbs_config
+<%= "  " * namespace_path.length %>    }
+<%= "  " * namespace_path.length %>  end
+
+<%= "  " * namespace_path.length %>  # Required: Form panels with fields
+<%= "  " * namespace_path.length %>  def panels
+<%= "  " * namespace_path.length %>    [
+<%= "  " * namespace_path.length %>      {
+<%= "  " * namespace_path.length %>        title: "Basic Information",
+<%= "  " * namespace_path.length %>        fields: [
+<%= "  " * namespace_path.length %>          # { name: :name, type: :text, label: "Name", required: true },
+<%= "  " * namespace_path.length %>          # { name: :email, type: :email, label: "Email" }
+<%= "  " * namespace_path.length %>        ]
+<%= "  " * namespace_path.length %>      }
+<%= "  " * namespace_path.length %>      # NOTE: Checkbox and radio fields must be in separate panels
+<%= "  " * namespace_path.length %>      # {
+<%= "  " * namespace_path.length %>      #   title: "Settings",
+<%= "  " * namespace_path.length %>      #   fields: [
+<%= "  " * namespace_path.length %>      #     { name: :is_active, type: :checkbox, label: "Active" }
+<%= "  " * namespace_path.length %>      #   ]
+<%= "  " * namespace_path.length %>      # }
+<%= "  " * namespace_path.length %>    ]
+<%= "  " * namespace_path.length %>  end
+<%= "  " * namespace_path.length %>end
+<% namespace_path.reverse.each_with_index do |_, i| -%>
+<%= "  " * (namespace_path.length - i - 1) %>end
+<% end -%>

data/lib/generators/better_page/templates/show_base_page.rb.tt

@@ -0,0 +1,117 @@
+# frozen_string_literal: true
+
+# Base class for all show/detail pages in this application.
+#
+# Components available (from global configuration):
+#   Required: header
+#   Optional: alerts, statistics, overview, content_sections, footer
+#
+# Customize this class to:
+#   - Add custom components with register_component
+#   - Override helper methods
+#   - Change stream_components
+#
+# @example Add a custom component
+#   register_component :activity_feed, default: { events: [] }
+#
+class ShowBasePage < ApplicationPage
+  page_type :show
+
+  # ─────────────────────────────────────────────────────────────────
+  # CUSTOM COMPONENTS
+  # ─────────────────────────────────────────────────────────────────
+  # Add custom components for all show pages here:
+  #
+  # register_component :timeline, default: []
+  # register_component :comments, default: { enabled: false }
+
+  # Main method that builds the complete show page configuration
+  # @return [Hash] complete show page configuration with :klass for rendering
+  def show
+    build_page
+  end
+
+  # The ViewComponent class used to render this show page
+  # @return [Class] BetterPage::ShowViewComponent
+  def view_component_class
+    return BetterPage::ShowViewComponent if defined?(BetterPage::ShowViewComponent)
+
+    raise NotImplementedError, "BetterPage::ShowViewComponent not found. Run: rails g better_page:install"
+  end
+
+  # Components to include in stream updates by default
+  # Override to customize which components update via Turbo Streams
+  # @return [Array<Symbol>]
+  def stream_components
+    %i[alerts statistics overview content_sections]
+  end
+
+  protected
+
+  # Helper to convert hash to info grid format
+  # @param hash [Hash] key-value pairs to convert
+  # @return [Array<Hash>] formatted info grid items
+  def info_grid_content_format(hash)
+    hash.map { |name, value| { name: name, value: value } }
+  end
+
+  # Helper to build content section
+  # @param title [String] section title
+  # @param icon [String] section icon
+  # @param color [String] section color
+  # @param type [Symbol] section type (:info_grid, :text_content, :custom)
+  # @param content [Hash, Array, nil] section content
+  # @return [Hash] formatted content section
+  def content_section_format(title:, icon:, color:, type:, content: nil)
+    section = {
+      title: title,
+      icon: icon,
+      color: color,
+      type: type
+    }
+
+    if type == :info_grid && content.is_a?(Array) && content.first.is_a?(Hash) && content.first.key?(:name)
+      section[:items] = content
+    elsif type == :info_grid && content.is_a?(Hash)
+      section[:items] = info_grid_content_format(content)
+    elsif type == :info_grid
+      section[:items] = content
+    else
+      section[:content] = content
+    end
+
+    section
+  end
+
+  # Helper to build statistic card
+  # @param label [String] statistic label
+  # @param value [String, Numeric] statistic value
+  # @param icon [String] statistic icon
+  # @param color [String] statistic color
+  # @return [Hash] formatted statistic
+  def statistic_format(label:, value:, icon:, color:)
+    {
+      label: label,
+      value: value,
+      icon: icon,
+      color: color
+    }
+  end
+
+  # Helper to build header action
+  # @param path [String] action path
+  # @param label [String] action label
+  # @param icon [String] action icon
+  # @param style [String] action style
+  # @param method [Symbol] HTTP method
+  # @return [Hash] formatted action
+  def action_format(path:, label:, icon:, style:, method: :get)
+    {
+      path: path,
+      label: label,
+      icon: icon,
+      style: style,
+      method: method
+    }
+  end
+end

data/lib/generators/better_page/templates/show_page.rb.tt

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+<% namespace_path.each_with_index do |ns, i| -%>
+<%= "  " * i %>module <%= ns.camelize %>
+<% end -%>
+<%= "  " * namespace_path.length %>class ShowPage < ShowBasePage
+<%= "  " * namespace_path.length %>  def initialize(<%= resource_singular %>, metadata = {})
+<%= "  " * namespace_path.length %>    @<%= resource_singular %> = <%= resource_singular %>
+<%= "  " * namespace_path.length %>    @user = metadata[:user]
+<%= "  " * namespace_path.length %>    super(<%= resource_singular %>, metadata)
+<%= "  " * namespace_path.length %>  end
+
+<%= "  " * namespace_path.length %>  private
+
+<%= "  " * namespace_path.length %>  # Required: Page header configuration
+<%= "  " * namespace_path.length %>  def header
+<%= "  " * namespace_path.length %>    {
+<%= "  " * namespace_path.length %>      title: @<%= resource_singular %>.to_s,
+<%= "  " * namespace_path.length %>      breadcrumbs: breadcrumbs_config,
+<%= "  " * namespace_path.length %>      metadata: [],
+<%= "  " * namespace_path.length %>      actions: [
+<%= "  " * namespace_path.length %>        # { label: "Edit", path: edit_<%= resource_singular %>_path(@<%= resource_singular %>), icon: "edit", style: "primary" }
+<%= "  " * namespace_path.length %>      ]
+<%= "  " * namespace_path.length %>    }
+<%= "  " * namespace_path.length %>  end
+
+<%= "  " * namespace_path.length %>  # Optional: Content sections
+<%= "  " * namespace_path.length %>  def content_sections
+<%= "  " * namespace_path.length %>    [
+<%= "  " * namespace_path.length %>      # {
+<%= "  " * namespace_path.length %>      #   title: "Details",
+<%= "  " * namespace_path.length %>      #   icon: "info-circle",
+<%= "  " * namespace_path.length %>      #   color: "blue",
+<%= "  " * namespace_path.length %>      #   type: :info_grid,
+<%= "  " * namespace_path.length %>      #   items: [
+<%= "  " * namespace_path.length %>      #     { name: "ID", value: @<%= resource_singular %>.id },
+<%= "  " * namespace_path.length %>      #     { name: "Created", value: format_date(@<%= resource_singular %>.created_at) }
+<%= "  " * namespace_path.length %>      #   ]
+<%= "  " * namespace_path.length %>      # }
+<%= "  " * namespace_path.length %>    ]
+<%= "  " * namespace_path.length %>  end
+<%= "  " * namespace_path.length %>end
+<% namespace_path.reverse.each_with_index do |_, i| -%>
+<%= "  " * (namespace_path.length - i - 1) %>end
+<% end -%>

data/lib/generators/better_page/templates/view_components/application_view_component.rb.tt

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module BetterPage
+  class ApplicationViewComponent < ViewComponent::Base
+    include Turbo::FramesHelper
+  end
+end

data/lib/generators/better_page/templates/view_components/custom_view_component.html.erb.tt

@@ -0,0 +1,21 @@
+<div class="better-page better-page--custom">
+  <%% if alerts? %>
+    <%%= render BetterPage::Ui::AlertsComponent.new(alerts: alerts) %>
+  <%% end %>
+
+  <%% if header? %>
+    <%%= render BetterPage::Ui::HeaderComponent.new(**header) %>
+  <%% end %>
+
+  <%% if content? %>
+    <div class="space-y-6">
+      <%% content.each do |widget| %>
+        <%%= render BetterPage::Ui::WidgetComponent.new(**widget) %>
+      <%% end %>
+    </div>
+  <%% end %>
+
+  <%% if footer? %>
+    <%%= render BetterPage::Ui::FooterComponent.new(**footer) %>
+  <%% end %>
+</div>

data/lib/generators/better_page/templates/view_components/custom_view_component.rb.tt

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module BetterPage
+  class CustomViewComponent < ApplicationViewComponent
+    def initialize(config:)
+      @config = config
+    end
+
+    # Component accessors
+    def header = @config[:header]
+    def alerts = @config[:alerts]
+    def content = @config[:content]
+    def footer = @config[:footer]
+
+    # Presence helpers
+    def header? = header.present?
+    def alerts? = alerts.present?
+    def content? = content.present?
+    def footer? = footer.present?
+  end
+end

data/lib/generators/better_page/templates/view_components/form_view_component.html.erb.tt

@@ -0,0 +1,25 @@
+<div class="better-page better-page--form">
+  <%% if alerts? %>
+    <%%= render BetterPage::Ui::AlertsComponent.new(alerts: alerts) %>
+  <%% end %>
+
+  <%% if header? %>
+    <%%= render BetterPage::Ui::HeaderComponent.new(**header) %>
+  <%% end %>
+
+  <%% if errors? %>
+    <%%= render BetterPage::Ui::ErrorsComponent.new(**errors) %>
+  <%% end %>
+
+  <%% if panels? %>
+    <div class="space-y-6">
+      <%% panels.each do |panel| %>
+        <%%= render BetterPage::Ui::PanelComponent.new(**panel) %>
+      <%% end %>
+    </div>
+  <%% end %>
+
+  <%% if footer? %>
+    <%%= render BetterPage::Ui::FooterComponent.new(**footer) %>
+  <%% end %>
+</div>

data/lib/generators/better_page/templates/view_components/form_view_component.rb.tt

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module BetterPage
+  class FormViewComponent < ApplicationViewComponent
+    def initialize(config:)
+      @config = config
+    end
+
+    # Component accessors
+    def header = @config[:header]
+    def alerts = @config[:alerts]
+    def errors = @config[:errors]
+    def panels = @config[:panels]
+    def footer = @config[:footer]
+
+    # Presence helpers
+    def header? = header.present?
+    def alerts? = alerts.present?
+    def errors? = errors.present?
+    def panels? = panels.present?
+    def footer? = footer.present?
+  end
+end