better_ui 0.3.0 → 0.4.0

metadata

@@ -1,15 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: better_ui
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.4.0
 platform: ruby
 authors:
 - alessiobussolari
-- umberto_peserico
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-06-03 00:00:00.000000000 Z
+date: 2025-05-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -29,16 +28,16 @@ dependencies:
   name: view_component
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '3.22'
+        version: 3.0.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '3.22'
+        version: 3.0.0
 - !ruby/object:Gem::Dependency
   name: redcarpet
   requirement: !ruby/object:Gem::Requirement
@@ -53,6 +52,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.6'
+- !ruby/object:Gem::Dependency
+  name: tailwindcss-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
 - !ruby/object:Gem::Dependency
   name: coderay
   requirement: !ruby/object:Gem::Requirement
@@ -68,39 +81,93 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '1.1'
 - !ruby/object:Gem::Dependency
-  name: lookbook
+  name: font-awesome-sass
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.3'
+        version: 6.5.1
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.3'
+        version: 6.5.1
 - !ruby/object:Gem::Dependency
-  name: font-awesome-sass
+  name: sqlite3
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: puma
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: lookbook
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '6.5'
-  type: :runtime
+        version: '2.1'
+  type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '6.5'
-description: Better UI is a Rails gem that works as a mountable engine containing
-  reusable UI components, built with ViewComponent and Tailwind CSS, following the
-  BEM methodology. It includes documentation and interactive previews with Lookbook.
+        version: '2.1'
+- !ruby/object:Gem::Dependency
+  name: listen
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: actioncable
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Una gem Rails che funziona come engine montabile contenente componenti
+  UI riutilizzabili e pagine di documentazione
 email:
 - alessio.bussolari@pandev.it
-- umberto.peserico@pandev.it
 executables: []
 extensions: []
 extra_rdoc_files: []
@@ -108,152 +175,46 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
+- app/assets/javascripts/better_ui/controllers/navbar_controller.js
+- app/assets/javascripts/better_ui/controllers/sidebar_controller.js
+- app/assets/javascripts/better_ui/controllers/toast_controller.js
+- app/assets/javascripts/better_ui/index.js
+- app/assets/javascripts/better_ui/toast_manager.js
 - app/assets/stylesheets/better_ui/application.css
-- app/components/better_ui/application/card/component.html.erb
-- app/components/better_ui/application/card/component.rb
-- app/components/better_ui/application/main/component.html.erb
-- app/components/better_ui/application/main/component.rb
-- app/components/better_ui/application/navbar/component.html.erb
-- app/components/better_ui/application/navbar/component.rb
-- app/components/better_ui/application/sidebar/component.html.erb
-- app/components/better_ui/application/sidebar/component.rb
-- app/components/better_ui/general/accordion/component.html.erb
-- app/components/better_ui/general/accordion/component.rb
-- app/components/better_ui/general/accordion/item_component.html.erb
-- app/components/better_ui/general/accordion/item_component.rb
-- app/components/better_ui/general/alert/component.html.erb
-- app/components/better_ui/general/alert/component.rb
-- app/components/better_ui/general/avatar/component.html.erb
-- app/components/better_ui/general/avatar/component.rb
-- app/components/better_ui/general/badge/component.html.erb
-- app/components/better_ui/general/badge/component.rb
-- app/components/better_ui/general/breadcrumb/component.html.erb
-- app/components/better_ui/general/breadcrumb/component.rb
-- app/components/better_ui/general/button/component.html.erb
-- app/components/better_ui/general/button/component.rb
-- app/components/better_ui/general/divider/component.html.erb
-- app/components/better_ui/general/divider/component.rb
-- app/components/better_ui/general/dropdown/component.html.erb
-- app/components/better_ui/general/dropdown/component.rb
-- app/components/better_ui/general/dropdown/divider_component.html.erb
-- app/components/better_ui/general/dropdown/divider_component.rb
-- app/components/better_ui/general/dropdown/item_component.html.erb
-- app/components/better_ui/general/dropdown/item_component.rb
-- app/components/better_ui/general/field/component.html.erb
-- app/components/better_ui/general/field/component.rb
-- app/components/better_ui/general/heading/component.html.erb
-- app/components/better_ui/general/heading/component.rb
-- app/components/better_ui/general/icon/component.html.erb
-- app/components/better_ui/general/icon/component.rb
-- app/components/better_ui/general/input/checkbox/component.html.erb
-- app/components/better_ui/general/input/checkbox/component.rb
-- app/components/better_ui/general/input/datetime/component.html.erb
-- app/components/better_ui/general/input/datetime/component.rb
-- app/components/better_ui/general/input/radio/component.html.erb
-- app/components/better_ui/general/input/radio/component.rb
-- app/components/better_ui/general/input/select/component.html.erb
-- app/components/better_ui/general/input/select/component.rb
-- app/components/better_ui/general/input/select/select_component.html.erb
-- app/components/better_ui/general/input/select/select_component.rb
-- app/components/better_ui/general/input/text/component.html.erb
-- app/components/better_ui/general/input/text/component.rb
-- app/components/better_ui/general/input/textarea/component.html.erb
-- app/components/better_ui/general/input/textarea/component.rb
-- app/components/better_ui/general/link/component.html.erb
-- app/components/better_ui/general/link/component.rb
-- app/components/better_ui/general/modal/component.html.erb
-- app/components/better_ui/general/modal/component.rb
-- app/components/better_ui/general/modal/modal_component.html.erb
-- app/components/better_ui/general/modal/modal_component.rb
-- app/components/better_ui/general/pagination/component.html.erb
-- app/components/better_ui/general/pagination/component.rb
-- app/components/better_ui/general/panel/component.html.erb
-- app/components/better_ui/general/panel/component.rb
-- app/components/better_ui/general/progress/component.html.erb
-- app/components/better_ui/general/progress/component.rb
-- app/components/better_ui/general/spinner/component.html.erb
-- app/components/better_ui/general/spinner/component.rb
-- app/components/better_ui/general/table/component.html.erb
-- app/components/better_ui/general/table/component.rb
-- app/components/better_ui/general/table/tbody_component.html.erb
-- app/components/better_ui/general/table/tbody_component.rb
-- app/components/better_ui/general/table/td_component.html.erb
-- app/components/better_ui/general/table/td_component.rb
-- app/components/better_ui/general/table/tfoot_component.html.erb
-- app/components/better_ui/general/table/tfoot_component.rb
-- app/components/better_ui/general/table/th_component.html.erb
-- app/components/better_ui/general/table/th_component.rb
-- app/components/better_ui/general/table/thead_component.html.erb
-- app/components/better_ui/general/table/thead_component.rb
-- app/components/better_ui/general/table/tr_component.html.erb
-- app/components/better_ui/general/table/tr_component.rb
-- app/components/better_ui/general/tabs/component.html.erb
-- app/components/better_ui/general/tabs/component.rb
-- app/components/better_ui/general/tabs/panel_component.html.erb
-- app/components/better_ui/general/tabs/panel_component.rb
-- app/components/better_ui/general/tabs/tab_component.html.erb
-- app/components/better_ui/general/tabs/tab_component.rb
-- app/components/better_ui/general/tag/component.html.erb
-- app/components/better_ui/general/tag/component.rb
-- app/components/better_ui/general/tooltip/component.html.erb
-- app/components/better_ui/general/tooltip/component.rb
+- app/components/better_ui/application/alert_component.html.erb
+- app/components/better_ui/application/alert_component.rb
+- app/components/better_ui/application/header_component.html.erb
+- app/components/better_ui/application/header_component.rb
+- app/components/better_ui/application/navbar_component.html.erb
+- app/components/better_ui/application/navbar_component.rb
+- app/components/better_ui/application/sidebar_component.html.erb
+- app/components/better_ui/application/sidebar_component.rb
+- app/components/better_ui/application/toast_component.html.erb
+- app/components/better_ui/application/toast_component.rb
+- app/components/better_ui/general/breadcrumb_component.html.erb
+- app/components/better_ui/general/breadcrumb_component.rb
+- app/components/better_ui/general/button_component.html.erb
+- app/components/better_ui/general/button_component.rb
+- app/components/better_ui/general/heading_component.html.erb
+- app/components/better_ui/general/heading_component.rb
+- app/components/better_ui/general/icon_component.html.erb
+- app/components/better_ui/general/icon_component.rb
+- app/components/better_ui/general/panel_component.html.erb
+- app/components/better_ui/general/panel_component.rb
+- app/components/better_ui/general/table_component.html.erb
+- app/components/better_ui/general/table_component.rb
+- app/components/better_ui/theme_helper.rb
 - app/controllers/better_ui/application_controller.rb
-- app/helpers/better_ui/application/components/card.rb
-- app/helpers/better_ui/application/components/card/card_helper.rb
-- app/helpers/better_ui/application/components/main/main_helper.rb
-- app/helpers/better_ui/application/components/navbar/navbar_helper.rb
-- app/helpers/better_ui/application/components/sidebar/sidebar_helper.rb
-- app/helpers/better_ui/application_helper.rb
-- app/helpers/better_ui/general/components/accordion.rb
-- app/helpers/better_ui/general/components/accordion/accordion_helper.rb
-- app/helpers/better_ui/general/components/alert/alert_helper.rb
-- app/helpers/better_ui/general/components/avatar/avatar_helper.rb
-- app/helpers/better_ui/general/components/badge/badge_helper.rb
-- app/helpers/better_ui/general/components/breadcrumb/breadcrumb_helper.rb
-- app/helpers/better_ui/general/components/button/button_helper.rb
-- app/helpers/better_ui/general/components/container/container_helper.rb
-- app/helpers/better_ui/general/components/divider/divider_helper.rb
-- app/helpers/better_ui/general/components/dropdown/divider_helper.rb
-- app/helpers/better_ui/general/components/dropdown/dropdown_helper.rb
-- app/helpers/better_ui/general/components/dropdown/item_helper.rb
-- app/helpers/better_ui/general/components/field/field_helper.rb
-- app/helpers/better_ui/general/components/heading/heading_helper.rb
-- app/helpers/better_ui/general/components/icon/icon_helper.rb
-- app/helpers/better_ui/general/components/input/checkbox/checkbox_helper.rb
-- app/helpers/better_ui/general/components/input/datetime/datetime_helper.rb
-- app/helpers/better_ui/general/components/input/radio/radio_helper.rb
-- app/helpers/better_ui/general/components/input/radio_group/radio_group_helper.rb
-- app/helpers/better_ui/general/components/input/select/select_helper.rb
-- app/helpers/better_ui/general/components/input/text/text_helper.rb
-- app/helpers/better_ui/general/components/input/textarea/textarea_helper.rb
-- app/helpers/better_ui/general/components/link/link_helper.rb
-- app/helpers/better_ui/general/components/modal.rb
-- app/helpers/better_ui/general/components/modal/modal_helper.rb
-- app/helpers/better_ui/general/components/pagination/pagination_helper.rb
-- app/helpers/better_ui/general/components/panel/panel_helper.rb
-- app/helpers/better_ui/general/components/progress/progress_helper.rb
-- app/helpers/better_ui/general/components/spinner/spinner_helper.rb
-- app/helpers/better_ui/general/components/table/table_helper.rb
-- app/helpers/better_ui/general/components/table/tbody_helper.rb
-- app/helpers/better_ui/general/components/table/td_helper.rb
-- app/helpers/better_ui/general/components/table/tfoot_helper.rb
-- app/helpers/better_ui/general/components/table/th_helper.rb
-- app/helpers/better_ui/general/components/table/thead_helper.rb
-- app/helpers/better_ui/general/components/table/tr_helper.rb
-- app/helpers/better_ui/general/components/tabs/panel_helper.rb
-- app/helpers/better_ui/general/components/tabs/tab_helper.rb
-- app/helpers/better_ui/general/components/tabs/tabs_helper.rb
-- app/helpers/better_ui/general/components/tag/tag_helper.rb
-- app/helpers/better_ui/general/components/tooltip/tooltip_helper.rb
+- app/controllers/better_ui/docs_controller.rb
+- app/helpers/better_ui_application_helper.rb
 - app/jobs/better_ui/application_job.rb
 - app/mailers/better_ui/application_mailer.rb
 - app/models/better_ui/application_record.rb
-- app/views/layouts/better_ui/application.html.erb
+- app/views/layouts/component_preview.html.erb
 - config/initializers/lookbook.rb
 - config/routes.rb
 - lib/better_ui.rb
 - lib/better_ui/engine.rb
-- lib/better_ui/railtie.rb
 - lib/better_ui/version.rb
 - lib/tasks/better_ui_tasks.rake
 homepage: https://github.com/alessiobussolari/better_ui
@@ -264,7 +225,6 @@ metadata:
   homepage_uri: https://github.com/alessiobussolari/better_ui
   source_code_uri: https://github.com/alessiobussolari/better_ui
   changelog_uri: https://github.com/alessiobussolari/better_ui/blob/main/CHANGELOG.md
-  rubygems_mfa_required: 'true'
 post_install_message:
 rdoc_options: []
 require_paths:
@@ -283,5 +243,5 @@ requirements: []
 rubygems_version: 3.5.11
 signing_key:
 specification_version: 4
-summary: Elegant and reusable UI components for Rails with integrated documentation
+summary: Componenti UI riutilizzabili per Rails con documentazione integrata
 test_files: []

data/app/components/better_ui/application/card/component.html.erb

@@ -1,20 +0,0 @@
-<div class="<%= card_classes %>" <%= options.map { |k, v| "#{k}=\"#{v}\"" }.join(' ').html_safe %>>
-  <p class="<%= title_classes %>"><%= title %></p>
-  <div class="mt-2 flex items-baseline justify-between">
-    <p class="<%= value_classes %>"><%= value %></p>
-    <% if show_trend? %>
-      <span class="<%= trend_classes %>">
-        <% if trend_up? %>
-          <svg xmlns="http://www.w3.org/2000/svg" class="<%= trend_icon_size %>" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
-          </svg>
-        <% else %>
-          <svg xmlns="http://www.w3.org/2000/svg" class="<%= trend_icon_size %>" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
-          </svg>
-        <% end %>
-        <%= change %>
-      </span>
-    <% end %>
-  </div>
-</div>

data/app/components/better_ui/application/card/component.rb

@@ -1,214 +0,0 @@
-# frozen_string_literal: true
-
-module BetterUi
-  module Application
-    module Card
-      class Component < ViewComponent::Base
-        # Costanti per le classi CSS
-        CARD_THEME = {
-          default: 'bg-gray-900 border-gray-800',
-          white: 'bg-white border-gray-200',
-          red: 'bg-red-50 border-red-200',
-          rose: 'bg-rose-50 border-rose-200',
-          orange: 'bg-orange-50 border-orange-200',
-          green: 'bg-green-50 border-green-200',
-          blue: 'bg-blue-50 border-blue-200',
-          yellow: 'bg-yellow-50 border-yellow-200',
-          violet: 'bg-violet-50 border-violet-200',
-          purple: 'bg-purple-50 border-purple-200'
-        }.freeze
-
-        CARD_SIZE = {
-          small: 'p-4',
-          medium: 'p-6',
-          large: 'p-8'
-        }.freeze
-
-        CARD_ROUNDED = {
-          none: 'rounded-none',
-          small: 'rounded-md',
-          medium: 'rounded-lg',
-          large: 'rounded-xl',
-          full: 'rounded-2xl'
-        }.freeze
-
-        CARD_SHADOW = {
-          none: 'shadow-none',
-          small: 'shadow-sm',
-          medium: 'shadow-md',
-          large: 'shadow-lg'
-        }.freeze
-
-        CARD_TREND_COLOR = {
-          green: 'text-green-600',
-          red: 'text-red-600',
-          blue: 'text-blue-600',
-          yellow: 'text-yellow-600',
-          purple: 'text-purple-600',
-          indigo: 'text-indigo-600',
-          gray: 'text-gray-600'
-        }.freeze
-
-        CARD_TITLE_SIZE = {
-          small: 'text-xs',
-          medium: 'text-sm',
-          large: 'text-base'
-        }.freeze
-
-        CARD_VALUE_SIZE = {
-          small: 'text-lg',
-          medium: 'text-2xl',
-          large: 'text-3xl'
-        }.freeze
-
-        def initialize(
-          title:,
-          value:,
-          trend: nil,
-          change: nil,
-          color: :green,
-          theme: :default,
-          size: :medium,
-          rounded: :medium,
-          shadow: :small,
-          classes: nil,
-          **options
-        )
-          @title = title
-          @value = value
-          @trend = trend
-          @change = change
-          @color = color
-          @theme = theme
-          @size = size
-          @rounded = rounded
-          @shadow = shadow
-          @classes = classes
-          @options = options
-
-          validate_params
-        end
-
-        private
-
-        attr_reader :title, :value, :trend, :change, :color, :theme, :size, :rounded, :shadow, :classes, :options
-
-        def validate_params
-          validate_theme
-          validate_size
-          validate_rounded
-          validate_shadow
-          validate_trend
-          validate_color
-        end
-
-        def validate_theme
-          return if CARD_THEME.key?(theme)
-          
-          raise ArgumentError, "Invalid theme: #{theme}. Valid options: #{CARD_THEME.keys.join(', ')}"
-        end
-
-        def validate_size
-          return if CARD_SIZE.key?(size)
-          
-          raise ArgumentError, "Invalid size: #{size}. Valid options: #{CARD_SIZE.keys.join(', ')}"
-        end
-
-        def validate_rounded
-          return if CARD_ROUNDED.key?(rounded)
-          
-          raise ArgumentError, "Invalid rounded: #{rounded}. Valid options: #{CARD_ROUNDED.keys.join(', ')}"
-        end
-
-        def validate_shadow
-          return if CARD_SHADOW.key?(shadow)
-          
-          raise ArgumentError, "Invalid shadow: #{shadow}. Valid options: #{CARD_SHADOW.keys.join(', ')}"
-        end
-
-        def validate_trend
-          return if trend.nil? || [:up, :down].include?(trend)
-          
-          raise ArgumentError, "Invalid trend: #{trend}. Valid options: :up, :down, nil"
-        end
-
-        def validate_color
-          return if CARD_TREND_COLOR.key?(color)
-          
-          raise ArgumentError, "Invalid color: #{color}. Valid options: #{CARD_TREND_COLOR.keys.join(', ')}"
-        end
-
-        def card_classes
-          base_classes = [
-            CARD_THEME[theme],
-            CARD_SIZE[size],
-            CARD_ROUNDED[rounded],
-            CARD_SHADOW[shadow],
-            'border'
-          ]
-
-          base_classes << classes if classes.present?
-          base_classes.compact.join(' ')
-        end
-
-        def title_classes
-          base_classes = [
-            CARD_TITLE_SIZE[size],
-            'font-medium'
-          ]
-
-          if theme == :default
-            base_classes << 'text-gray-300'
-          else
-            base_classes << 'text-gray-500'
-          end
-
-          base_classes.join(' ')
-        end
-
-        def value_classes
-          base_classes = [
-            CARD_VALUE_SIZE[size],
-            'font-semibold'
-          ]
-
-          if theme == :default
-            base_classes << 'text-white'
-          else
-            base_classes << 'text-gray-900'
-          end
-
-          base_classes.join(' ')
-        end
-
-        def trend_classes
-          base_classes = [
-            CARD_TREND_COLOR[color],
-            'text-sm font-medium flex items-center'
-          ]
-
-          base_classes.join(' ')
-        end
-
-        def show_trend?
-          trend.present? && change.present?
-        end
-
-        def trend_up?
-          trend == :up
-        end
-
-        def trend_icon_size
-          case size
-          when :small
-            'h-3 w-3 mr-0.5'
-          when :medium
-            'h-4 w-4 mr-0.5'
-          when :large
-            'h-5 w-5 mr-1'
-          end
-        end
-      end
-    end
-  end
-end

data/app/components/better_ui/application/main/component.html.erb

@@ -1,9 +0,0 @@
-<main class="w-full fixed <%= get_layout_class %> <%= get_padding_class(padding) %><%= classes ? ' ' + classes : '' %>">
-  <div class="h-[calc(100vh-81px)] p-4">
-    <div class="h-full w-full bg-white p-4 <%= get_padding_class(inner_padding) %> <%= get_rounded_class %> <%= get_shadow_class %> overflow-y-auto">
-      <div class="h-full overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
-      <%= content %>
-      </div>
-    </div>
-  </div>
-</main>