better_page 2.0.0

data/lib/generators/better_page/templates/view_components/ui/table_component.html.erb.tt

@@ -0,0 +1,112 @@
+<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg"
+     <%% if selectable? %>data-controller="table"<%% end %>>
+  <%% if items? %>
+    <table class="min-w-full divide-y divide-gray-300">
+      <thead class="bg-gray-50">
+        <tr>
+          <%% if selectable? %>
+            <th scope="col" class="relative px-6 py-3">
+              <input type="checkbox"
+                     class="absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                     data-table-target="selectAll"
+                     data-action="change->table#selectAll">
+            </th>
+          <%% end %>
+          <%% columns.each do |column| %>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider <%%= column[:class] %>">
+              <%%= column[:label] %>
+            </th>
+          <%% end %>
+          <%% if row_actions? %>
+            <th scope="col" class="relative px-6 py-3">
+              <span class="sr-only">Actions</span>
+            </th>
+          <%% end %>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-gray-200 bg-white">
+        <%% items.each do |item| %>
+          <tr class="<%%= row_link? ? 'hover:bg-gray-50 cursor-pointer' : 'hover:bg-gray-50' %>"
+              <%% if row_link? %>
+                data-turbo-frame="_top"
+                onclick="Turbo.visit('<%%= link_for(item) %>')"
+              <%% end %>>
+            <%% if selectable? %>
+              <td class="relative px-6 py-4" onclick="event.stopPropagation()">
+                <input type="checkbox"
+                       class="absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                       value="<%%= item_id(item) %>"
+                       data-table-target="row"
+                       data-action="change->table#rowChanged">
+              </td>
+            <%% end %>
+            <%% columns.each do |column| %>
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 <%%= column[:cell_class] %>">
+                <%%= format_value(item, column) %>
+              </td>
+            <%% end %>
+            <%% if row_actions? %>
+              <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium" onclick="event.stopPropagation()">
+                <%% if dropdown_actions? %>
+                  <div data-controller="dropdown" class="relative inline-block text-left">
+                    <button type="button"
+                            data-action="click->dropdown#toggle"
+                            class="p-2 rounded-full hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                      <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                        <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"/>
+                      </svg>
+                      <span class="sr-only">Open options</span>
+                    </button>
+
+                    <div data-dropdown-target="menu"
+                         class="hidden w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
+                      <div class="py-1" role="menu">
+                        <%% actions_for(item).each do |action| %>
+                          <%%= link_to action[:path],
+                              data: { turbo_method: action[:method], turbo_confirm: action[:confirm] }.compact,
+                              class: action_dropdown_class(action[:style]),
+                              role: "menuitem" do %>
+                            <%%= action[:label] %>
+                          <%% end %>
+                        <%% end %>
+                      </div>
+                    </div>
+                  </div>
+                <%% else %>
+                  <div class="flex justify-end space-x-2">
+                    <%% actions_for(item).each do |action| %>
+                      <%%= link_to action[:path],
+                          data: { turbo_method: action[:method], turbo_confirm: action[:confirm] }.compact,
+                          class: action_link_class(action[:style]) do %>
+                        <%%= action[:label] %>
+                      <%% end %>
+                    <%% end %>
+                  </div>
+                <%% end %>
+              </td>
+            <%% end %>
+          </tr>
+        <%% end %>
+      </tbody>
+    </table>
+  <%% elsif empty_state? %>
+    <div class="text-center py-12">
+      <%% if empty_state[:icon] %>
+        <div class="mx-auto h-12 w-12 text-gray-400">
+          <%%= empty_state[:icon] %>
+        </div>
+      <%% end %>
+      <h3 class="mt-2 text-sm font-medium text-gray-900"><%%= empty_state[:title] %></h3>
+      <%% if empty_state[:description] %>
+        <p class="mt-1 text-sm text-gray-500"><%%= empty_state[:description] %></p>
+      <%% end %>
+      <%% if empty_state[:action] %>
+        <%%= link_to empty_state[:action][:path],
+            data: { turbo_frame: "_top" },
+            class: "mt-4 inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" do %>
+          <%%= empty_state[:action][:label] %>
+        <%% end %>
+      <%% end %>
+    </div>
+  <%% end %>
+</div>

data/lib/generators/better_page/templates/view_components/ui/table_component.rb.tt

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module BetterPage
+  module Ui
+    class TableComponent < BetterPage::ApplicationViewComponent
+      def initialize(items:, columns:, row_actions: nil, empty_state: nil,
+                     selectable: false, row_link: nil, actions_display: :inline)
+        @items = items
+        @columns = columns
+        @row_actions = row_actions
+        @empty_state = empty_state
+        @selectable = selectable
+        @row_link = row_link
+        @actions_display = actions_display&.to_sym || :inline
+      end
+
+      attr_reader :items, :columns, :row_actions, :empty_state, :selectable,
+                  :row_link, :actions_display
+
+      def items? = items.any?
+      def row_actions? = row_actions.present?
+      def empty_state? = empty_state.present?
+      def selectable? = selectable
+      def row_link? = row_link.present?
+      def dropdown_actions? = actions_display == :dropdown
+      def inline_actions? = actions_display == :inline
+
+      def link_for(item)
+        return nil unless row_link
+        row_link.respond_to?(:call) ? row_link.call(item) : row_link
+      end
+
+      def format_value(item, column)
+        value = item.respond_to?(column[:key]) ? item.send(column[:key]) : item[column[:key]]
+
+        case column[:format]&.to_sym
+        when :currency
+          number_to_currency(value)
+        when :date
+          value&.strftime("%B %d, %Y")
+        when :datetime
+          value&.strftime("%B %d, %Y %H:%M")
+        when :boolean
+          value ? "Yes" : "No"
+        when :percentage
+          "#{value}%"
+        else
+          value
+        end
+      end
+
+      def actions_for(item)
+        return [] unless row_actions
+
+        if row_actions.respond_to?(:call)
+          row_actions.call(item)
+        else
+          row_actions
+        end
+      end
+
+      def action_link_class(style)
+        case style&.to_sym
+        when :danger
+          "text-red-600 hover:text-red-900"
+        when :primary
+          "text-blue-600 hover:text-blue-900"
+        else
+          "text-gray-600 hover:text-gray-900"
+        end
+      end
+
+      def action_dropdown_class(style)
+        base = "block w-full text-left px-4 py-2 text-sm hover:bg-gray-100"
+        color = case style&.to_sym
+                when :danger then "text-red-600"
+                when :primary then "text-blue-600"
+                else "text-gray-700"
+                end
+        "#{base} #{color}"
+      end
+
+      def item_id(item)
+        item.respond_to?(:id) ? item.id : item[:id]
+      end
+    end
+  end
+end

data/lib/generators/better_page/templates/view_components/ui/tabs_component.html.erb.tt

@@ -0,0 +1,52 @@
+<div id="<%%= id %>"
+     class="bg-white shadow rounded-xl p-4"
+     data-controller="tabs"
+     data-tabs-default-value="<%%= default_tab_id %>"
+     data-tabs-active-class="<%%= active_classes %>"
+     data-tabs-inactive-class="<%%= inactive_classes %>">
+
+  <%%# Tab navigation %>
+  <nav class="<%%= nav_classes %>" role="tablist" aria-label="Tabs">
+    <%% tabs.each_with_index do |tab, index| %>
+      <%% if tab.link? %>
+        <%%= link_to tab.href,
+            class: "#{tab_base_classes} #{tab.active? ? active_classes : inactive_classes}" do %>
+          <%% if tab.icon? %><%%= tab.icon %><%% end %>
+          <%%= tab.label %>
+        <%% end %>
+      <%% else %>
+        <%% content_index = content_tabs.find_index { |t| t.id == tab.id } || 0 %>
+        <button type="button"
+                role="tab"
+                id="<%%= id %>-tab-<%%= tab.id %>"
+                data-tabs-target="tab"
+                data-action="click->tabs#select keydown->tabs#keydown"
+                data-tab-id="<%%= tab.id %>"
+                aria-controls="<%%= id %>-panel-<%%= tab.id %>"
+                aria-selected="<%%= content_index == default_index %>"
+                tabindex="<%%= content_index == default_index ? '0' : '-1' %>"
+                class="<%%= tab_base_classes %> <%%= content_index == default_index ? active_classes : inactive_classes %>">
+          <%% if tab.icon? %><%%= tab.icon %><%% end %>
+          <%%= tab.label %>
+        </button>
+      <%% end %>
+    <%% end %>
+  </nav>
+
+  <%%# Tab panels (only for content tabs) %>
+  <%% if content_tabs.any? %>
+    <div class="mt-4">
+      <%% content_tabs.each_with_index do |tab, index| %>
+        <div id="<%%= id %>-panel-<%%= tab.id %>"
+             data-tabs-target="panel"
+             data-tab-id="<%%= tab.id %>"
+             role="tabpanel"
+             aria-labelledby="<%%= id %>-tab-<%%= tab.id %>"
+             tabindex="0"
+             class="<%%= index == default_index ? '' : 'hidden' %>">
+          <%%= tab %>
+        </div>
+      <%% end %>
+    </div>
+  <%% end %>
+</div>

data/lib/generators/better_page/templates/view_components/ui/tabs_component.rb.tt

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module BetterPage
+  module Ui
+    class TabsComponent < BetterPage::ApplicationViewComponent
+      renders_many :tabs, "TabItem"
+
+      STYLE_CONFIG = {
+        nav: "border-b border-gray-200",
+        tab_base: "-mb-px inline-flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors",
+        active: "border-b-2 border-blue-600 text-blue-600",
+        inactive: "border-b-2 border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
+      }.freeze
+
+      def initialize(id:, default_tab: nil)
+        @id = id
+        @default_tab = default_tab
+      end
+
+      attr_reader :id, :default_tab
+
+      def default_tab_id
+        content_tabs = tabs.reject(&:link?)
+        @default_tab || content_tabs.first&.id
+      end
+
+      def default_index
+        content_tabs = tabs.reject(&:link?)
+        return 0 if @default_tab.nil? || content_tabs.empty?
+
+        content_tabs.find_index { |tab| tab.id == @default_tab } || 0
+      end
+
+      def content_tabs
+        tabs.reject(&:link?)
+      end
+
+      def nav_classes
+        "flex #{STYLE_CONFIG[:nav]}"
+      end
+
+      def tab_base_classes
+        STYLE_CONFIG[:tab_base]
+      end
+
+      def active_classes
+        STYLE_CONFIG[:active]
+      end
+
+      def inactive_classes
+        STYLE_CONFIG[:inactive]
+      end
+
+      # Nested TabItem component
+      class TabItem < BetterPage::ApplicationViewComponent
+        def initialize(id:, label:, icon: nil, href: nil, active: false)
+          @id = id
+          @label = label
+          @icon = icon
+          @href = href
+          @active = active
+        end
+
+        attr_reader :id, :label, :icon, :href, :active
+
+        def icon? = icon.present?
+        def link? = href.present?
+        def active? = active
+
+        def call
+          content
+        end
+      end
+    end
+  end
+end

data/lib/generators/better_page/templates/view_components/ui/widget_component.html.erb.tt

@@ -0,0 +1,72 @@
+<div class="<%%= size_classes %> bg-white shadow rounded-lg overflow-hidden">
+  <%% if title? %>
+    <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
+      <h3 class="text-lg font-medium leading-6 text-gray-900"><%%= title %></h3>
+    </div>
+  <%% end %>
+
+  <div class="px-4 py-5 sm:p-6">
+    <%% if stats? && options[:stats] %>
+      <dl class="grid grid-cols-1 gap-5 sm:grid-cols-2">
+        <%% options[:stats].each do |stat| %>
+          <div class="overflow-hidden">
+            <dt class="truncate text-sm font-medium text-gray-500"><%%= stat[:label] %></dt>
+            <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900"><%%= stat[:value] %></dd>
+          </div>
+        <%% end %>
+      </dl>
+
+    <%% elsif list? && options[:items] %>
+      <ul role="list" class="divide-y divide-gray-200">
+        <%% options[:items].each do |item| %>
+          <li class="py-4">
+            <div class="flex items-center space-x-4">
+              <%% if item[:icon] %>
+                <div class="flex-shrink-0">
+                  <span class="h-8 w-8 rounded-full bg-gray-100 flex items-center justify-center">
+                    <%%= item[:icon] %>
+                  </span>
+                </div>
+              <%% end %>
+              <div class="min-w-0 flex-1">
+                <p class="truncate text-sm font-medium text-gray-900"><%%= item[:title] %></p>
+                <%% if item[:subtitle] %>
+                  <p class="truncate text-sm text-gray-500"><%%= item[:subtitle] %></p>
+                <%% end %>
+              </div>
+              <%% if item[:action] %>
+                <%%= link_to item[:action][:label], item[:action][:path], class: "text-sm font-medium text-blue-600 hover:text-blue-500" %>
+              <%% end %>
+            </div>
+          </li>
+        <%% end %>
+      </ul>
+
+    <%% elsif table? && options[:table] %>
+      <%%= render BetterPage::Ui::TableComponent.new(**options[:table]) %>
+
+    <%% elsif text? && options[:content] %>
+      <div class="prose max-w-none">
+        <%%= options[:content].html_safe %>
+      </div>
+
+    <%% elsif chart? && options[:chart] %>
+      <div class="h-64" data-controller="chart" data-chart-type-value="<%%= options[:chart][:type] %>" data-chart-data-value="<%%= options[:chart][:data].to_json %>">
+        <canvas data-chart-target="canvas"></canvas>
+      </div>
+
+    <%% elsif custom? && options[:partial] %>
+      <%%= render partial: options[:partial], locals: options[:locals] || {} %>
+    <%% end %>
+  </div>
+
+  <%% if options[:footer] %>
+    <div class="bg-gray-50 px-4 py-4 sm:px-6">
+      <%% if options[:footer][:link] %>
+        <%%= link_to options[:footer][:link][:label], options[:footer][:link][:path], class: "text-sm font-medium text-blue-600 hover:text-blue-500" %>
+      <%% elsif options[:footer][:text] %>
+        <p class="text-sm text-gray-500"><%%= options[:footer][:text] %></p>
+      <%% end %>
+    </div>
+  <%% end %>
+</div>

data/lib/generators/better_page/templates/view_components/ui/widget_component.rb.tt

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module BetterPage
+  module Ui
+    class WidgetComponent < BetterPage::ApplicationViewComponent
+      def initialize(type:, title: nil, **options)
+        @type = type.to_sym
+        @title = title
+        @options = options
+      end
+
+      attr_reader :type, :title, :options
+
+      def title? = title.present?
+
+      def chart? = type == :chart
+      def list? = type == :list
+      def stats? = type == :stats
+      def table? = type == :table
+      def text? = type == :text
+      def custom? = type == :custom
+
+      def size_classes
+        case options[:size]&.to_sym
+        when :small then "col-span-1"
+        when :medium then "col-span-2"
+        when :large then "col-span-3"
+        when :full then "col-span-full"
+        else "col-span-1"
+        end
+      end
+    end
+  end
+end

data/lib/tasks/better_page.rake

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+namespace :better_page do
+  desc "Analyze all pages for compliance with architecture conventions"
+  task analyze: :environment do
+    require "better_page/compliance/analyzer"
+
+    puts "PAGE COMPLIANCE ANALYSIS"
+    puts "========================"
+    puts
+
+    analyzer = BetterPage::Compliance::Analyzer.new
+    analyzer.analyze_all
+
+    puts
+    puts "Analysis completed!"
+    puts "Use VERBOSE=true for detailed output: bin/rails better_page:analyze VERBOSE=true"
+  end
+
+  desc "Analyze a specific page file for compliance"
+  task :analyze_page, [ :file_path ] => :environment do |_t, args|
+    require "better_page/compliance/analyzer"
+
+    if args[:file_path].blank?
+      puts "Please provide a page file path:"
+      puts "   bin/rails better_page:analyze_page[app/pages/admin/users/index_page.rb]"
+      exit 1
+    end
+
+    unless File.exist?(args[:file_path])
+      puts "File not found: #{args[:file_path]}"
+      exit 1
+    end
+
+    puts "Analyzing: #{args[:file_path]}"
+    puts "========================="
+    puts
+
+    analyzer = BetterPage::Compliance::Analyzer.new
+    result = analyzer.analyze_page(args[:file_path])
+
+    puts analyzer.format_single_page_report(result)
+    puts
+
+    # Additional details for single page analysis
+    case result[:status]
+    when :compliant
+      puts "This page follows all architectural patterns!"
+      puts
+      puts "COMPLIANCE CHECKLIST:"
+      puts "  [OK] UI configuration only (no business logic)"
+      puts "  [OK] No database access"
+      puts "  [OK] Template system integration"
+      puts "  [OK] Required build_* methods implemented"
+      puts "  [OK] Plain Hash objects (no OpenStruct)"
+    when :warning
+      puts "This page has some areas for improvement:"
+      puts "SUGGESTED IMPROVEMENTS:"
+      result[:warnings].each { |warning| puts "  - #{warning}" }
+    when :error
+      puts "This page has critical compliance issues:"
+      puts "REQUIRED FIXES:"
+      result[:issues].each { |issue| puts "  - #{issue}" }
+      if result[:warnings].any?
+        puts "ADDITIONAL IMPROVEMENTS:"
+        result[:warnings].each { |warning| puts "  - #{warning}" }
+      end
+    end
+  end
+end

data/lib/tasks/better_page_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :better_page do
+#   # Task goes here
+# end