feat: Add flowbite (#5)

.gitignore

@@ -9,4 +9,6 @@
 /test/dummy/storage/
 /test/dummy/tmp/
 .byebug_history
-*.gem
+*.gem
+node_modules/
+test/dummy/mkmf.log

CHANGELOG.md

@@ -0,0 +1,38 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/), and this project adheres to [Semantic Versioning](http://semver.org/).
+
+## [0.0.4] - 2024-01-31
+### Added
+- Integration of Flowbite, including configuration and installer (`Add Flowbite config and installer`).
+- Flowbite framework to enhance UI/UX design (`Add Flowbite`).
+- Horizontal scrolling for tables to improve UI (`Feature: Add overflow scroll x on tables`).
+
+### Upgrade
+- Add [documentation](docs/upgrade_to_0.0.4.md) to upgrade from previous versions
+
+## [0.0.3] - 2024-01-31
+### Changed
+- Update to generator tool or script (`Update generator`).
+
+### Fixed
+- Improvements to project specifications or tests (`Fix specs`).
+
+## [0.0.2] - 2024-01-24
+### Added
+- GitHub Actions workflow for automated gem pushing (`Add GitHub Actions for gem push`).
+
+### Changed
+- Update to `.gitignore` to refine project configuration.
+
+## [0.0.1] - 2024-01-17
+### Added
+- Initial release with basic theme setup.
+
+## [0.0.0] - 2024-01-10
+### Fixed
+- Minor bug fixes and performance improvements.
+
+### Changed
+- Adjustments to `.gitignore` and initial project setup.
+

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    administrate_tailwind_theme (0.0.3)
+    administrate_tailwind_theme (0.0.4)
       administrate (~> 0.15)
       iso_country_codes (~> 0.7.8)
       rails (~> 7.1, >= 7.1.3)

README.md

@@ -12,6 +12,7 @@
 - **Additional Fields:** Adds BooleanEmoji and CountryEmoji fields to your Administrate dashboard.
 - **Easy Setup:** Automatic initializer creation and configuration.
 - **Rails 7, Rails-Tailwind, and Administrate Compatibility:** Seamlessly works with the latest versions of these key gems.
+- **Flowbite** Bringing a comprehensive suite of Tailwind CSS
 
 ## Installation
 ### Prerequisites
@@ -20,26 +21,33 @@
 - Administrate 0.15 or higher.
 - Tailwind CSS Rails 2.0 or higher.
 
+### Flowbite Integration
+administrate_tailwind_theme now comes with Flowbite integration by default, bringing a rich set of Tailwind CSS components to your Administrate dashboard. For those who prefer not to use Flowbite, it can be easily disabled during the installation of the gem by setting the `FLOWBITE=false` environment variable.
+
 ### Setup
 1. Add this line to your application's Gemfile:
 
-   ```ruby
-   gem 'administrate_tailwind_theme'
-   ```
+```ruby
+gem 'administrate_tailwind_theme'
+```
 
 2. Execute:
 
-   ```
-   bundle install
-   ```
+```
+bundle install
+```
 
 3. After installing the gem, run the installer:
 
-   ```
-   rails generate administrate_tailwind_theme:install
-   ```
+```shell
+# With flowbite integration (default since 0.0.4)
+rails generate administrate_tailwind_theme:install
+
+# Without flowbite integration
+FLOWBITE=false rails generate administrate_tailwind_theme:install
+```
 
-   This will create an initializer and modify your `tailwind.config.js` to ensure proper compilation of the gem's view styles.
+This will create an initializer and modify your `tailwind.config.js` to ensure proper compilation of the gem's view styles.
 
 ## Usage
 

app/views/admin/application/_default_sidebar.html.erb

@@ -0,0 +1,31 @@
+<!-- Default Sidebar -->
+<aside id="default-sidebar" class="fixed top-0 left-0 z-40 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0" aria-label="Sidebar">
+  <div class="h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800">
+    <ul class="space-y-2 font-medium">
+      <% if defined?(root_path) %>
+        <li>
+          <%= link_to(root_path, class: "flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group") do %>
+            <svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 21">
+              <path d="M4 10L3.29289 10.7071L2.58579 10L3.29289 9.29289L4 10ZM21 18C21 18.5523 20.5523 19 20 19C19.4477 19 19 18.5523 19 18L21 18ZM8.29289 15.7071L3.29289 10.7071L4.70711 9.29289L9.70711 14.2929L8.29289 15.7071ZM3.29289 9.29289L8.29289 4.29289L9.70711 5.70711L4.70711 10.7071L3.29289 9.29289ZM4 9L14 9L14 11L4 11L4 9ZM21 16L21 18L19 18L19 16L21 16ZM14 9C17.866 9 21 12.134 21 16L19 16C19 13.2386 16.7614 11 14 11L14 9Z" fill="#33363F"/>
+            </svg>
+            <span class="ms-3">
+              <%= t("administrate.navigation.back_to_app") %>
+            </span>
+          <% end %>
+        </li>
+      <% end %>
+      <% Administrate::Namespace.new(namespace).resources_with_index_route.each do |resource| %>
+        <% if accessible_action?(model_from_resource(resource), :index) %>
+          <%= link_to(resource_index_route(resource), class: "flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group #{'bg-gray-100' if nav_link_state(resource)&.to_sym == :active }") do %>
+            <% if icon?(resource) %>
+              <%= render partial: "administrate/navigation/icons/#{resource}" %>
+            <% end %>
+            <span class="ms-3">
+              <%= display_resource_name(resource) %>
+            </span>
+          <% end %>
+        <% end %>
+      <% end %>
+    </ul>
+  </div>
+</aside>

app/views/admin/application/_flowbite_sidebar.html.erb

@@ -0,0 +1,59 @@
+<!-- Flowbite Sidebar -->
+<button data-drawer-target="default-sidebar" data-drawer-toggle="default-sidebar" aria-controls="default-sidebar" type="button" class="inline-flex items-center p-2 mt-2 ml-3 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
+<button data-drawer-target="sidebar-multi-level-sidebar" data-drawer-toggle="sidebar-multi-level-sidebar" aria-controls="sidebar-multi-level-sidebar" type="button" class="inline-flex items-center p-2 mt-2 ms-3 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
+   <span class="sr-only">Open sidebar</span>
+   <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+   <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
+   </svg>
+</button>
+
+<aside id="sidebar-multi-level-sidebar" class="fixed top-0 left-0 z-40 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0" aria-label="Sidebar">
+   <div class="h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800">
+      <ul class="space-y-2 font-medium">
+         <% if defined?(root_path) %>
+            <li>
+              <%= link_to(root_path, class: "flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group") do %>
+                <svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 21">
+                <path d="M4 10L3.29289 10.7071L2.58579 10L3.29289 9.29289L4 10ZM21 18C21 18.5523 20.5523 19 20 19C19.4477 19 19 18.5523 19 18L21 18ZM8.29289 15.7071L3.29289 10.7071L4.70711 9.29289L9.70711 14.2929L8.29289 15.7071ZM3.29289 9.29289L8.29289 4.29289L9.70711 5.70711L4.70711 10.7071L3.29289 9.29289ZM4 9L14 9L14 11L4 11L4 9ZM21 16L21 18L19 18L19 16L21 16ZM14 9C17.866 9 21 12.134 21 16L19 16C19 13.2386 16.7614 11 14 11L14 9Z" fill="#33363F"/>
+                </svg>
+                <span class="ms-3">
+                <%= t("administrate.navigation.back_to_app") %>
+                </span>
+              <% end %>
+            </li>
+         <% end %>
+
+        <% grouped_resources.map do |group_name, resources| %>
+          <li>
+            <button type="button" class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" aria-controls="dropdown-example-<%= group_name %>" data-collapse-toggle="dropdown-example-<%= group_name %>">
+              <% if icon?(group_name) %>
+                <%= render partial: "administrate/navigation/icons/#{group_name}" %>
+              <% end %>
+              <span class="flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">
+                <%= group_name.to_s.capitalize %>
+              </span>
+              <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
+              </svg>
+            </button>
+            <ul id="dropdown-example-<%= group_name %>" class="hidden py-2 space-y-2">
+              <% resources.map do |resource| %>
+                <% if accessible_action?(model_from_resource(resource), :index) %>
+                  <li>
+                    <%= link_to(resource_index_route(resource), class: "flex items-center w-full p-2 text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 #{'bg-gray-200' if nav_link_state(resource)&.to_sym == :active }") do %>
+                    <% if icon?(resource) %>
+                      <%= render partial: "administrate/navigation/icons/#{resource}" %>
+                    <% end %>
+                    <span class="ms-3">
+                      <%= display_resource_name(resource) %>
+                    </span>
+                  <% end %>
+                  </li>
+                <% end %>
+              <% end %>
+            </ul>
+         </li>
+        <% end %>
+      </ul>
+   </div>
+</aside>

app/views/admin/application/_navigation.html.erb

@@ -7,33 +7,9 @@ for all resources in the admin dashboard,
 as defined by the routes in the `admin/` namespace
 %>
 <!-- Navigation Sidebar -->
-<aside id="default-sidebar" class="fixed top-0 left-0 z-40 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0" aria-label="Sidebar">
-  <div class="h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800">
-    <ul class="space-y-2 font-medium">
-      <% if defined?(root_path) %>
-        <li>
-          <%= link_to(root_path, class: "flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group") do %>
-            <svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 21">
-              <path d="M4 10L3.29289 10.7071L2.58579 10L3.29289 9.29289L4 10ZM21 18C21 18.5523 20.5523 19 20 19C19.4477 19 19 18.5523 19 18L21 18ZM8.29289 15.7071L3.29289 10.7071L4.70711 9.29289L9.70711 14.2929L8.29289 15.7071ZM3.29289 9.29289L8.29289 4.29289L9.70711 5.70711L4.70711 10.7071L3.29289 9.29289ZM4 9L14 9L14 11L4 11L4 9ZM21 16L21 18L19 18L19 16L21 16ZM14 9C17.866 9 21 12.134 21 16L19 16C19 13.2386 16.7614 11 14 11L14 9Z" fill="#33363F"/>
-            </svg>
-            <span class="ms-3">
-              <%= t("administrate.navigation.back_to_app") %>
-            </span>
-          <% end %>
-        </li>
-      <% end %>
-      <% Administrate::Namespace.new(namespace).resources_with_index_route.each do |resource| %>
-        <% if accessible_action?(model_from_resource(resource), :index) %>
-          <%= link_to(resource_index_route(resource), class: "flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group #{'bg-gray-100' if nav_link_state(resource)&.to_sym == :active }") do %>
-            <% if icon?(resource) %>
-              <%= render partial: "administrate/navigation/icons/#{resource}" %>
-            <% end %>
-            <span class="ms-3">
-              <%= display_resource_name(resource) %>
-            </span>
-          <% end %>
-        <% end %>
-      <% end %>
-    </ul>
-  </div>
-</aside>
+
+<% if flowbite? %>
+  <%= render partial: 'admin/application/flowbite_sidebar' %>
+<% else %>
+  <%= render partial: 'admin/application/default_sidebar' %>
+<% end %>

app/views/administrate/navigation/icons/_main.html.erb

@@ -0,0 +1,3 @@
+<svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 21">
+  <path d="M21.66,10.25l-9-8a1,1,0,0,0-1.32,0l-9,8a1,1,0,0,0-.27,1.11A1,1,0,0,0,3,12H4v9a1,1,0,0,0,1,1H19a1,1,0,0,0,1-1V12h1a1,1,0,0,0,.93-.64A1,1,0,0,0,21.66,10.25ZM13,20H11V17a1,1,0,0,1,2,0Zm5,0H15V17a3,3,0,0,0-6,0v3H6V12H18ZM5.63,10,12,4.34,18.37,10Z"/>
+</svg>

app/views/fields/has_many/_show.html.erb

@@ -21,18 +21,20 @@ from the associated resource class's dashboard.
 <% if field.resources.any? %>
   <% order = field.order_from_params(params.fetch(field.name, {})) %>
   <% page_number = params.fetch(field.name, {}).fetch(:page, nil) %>
-  <%= render(
-    "collection",
-    collection_presenter: field.associated_collection(order),
-    collection_field_name: field.name,
-    page: page,
-    resources: field.resources(page_number, order),
-    table_title: field.name,
-    resource_class: field.associated_class,
-  ) %>
-  <% if field.more_than_limit? %>
-    <%= render("pagination", resources: field.resources(page_number), param_name: "#{field.name}[page]") %>
-  <% end %>
+  <section class="mt-1 mb-1 pb-2 bg-white shadow overflow-hidden overflow-x-scroll rounded-lg">
+    <%= render(
+      "collection",
+      collection_presenter: field.associated_collection(order),
+      collection_field_name: field.name,
+      page: page,
+      resources: field.resources(page_number, order),
+      table_title: field.name,
+      resource_class: field.associated_class,
+    ) %>
+    <% if field.more_than_limit? %>
+      <%= render("pagination", resources: field.resources(page_number), param_name: "#{field.name}[page]") %>
+    <% end %>
+  </section>
 
 <% else %>
   <%= t("administrate.fields.has_many.none", default: "–") %>

app/views/fields/polymorphic/_show.html.erb

@@ -18,15 +18,17 @@ By default, the relationship is rendered as a link to the associated object.
 
 <% if field.data %>
   <% if accessible_action?(field.data, :show) %>
-    <%= link_to(
-      field.display_associated_resource,
-      [namespace, field.data],
-      class: "text-blue-600 hover:text-blue-800 visited:text-purple-600"
-    ) %>
+    <div class="bg-gray-50 p-3 rounded-md shadow-sm">
+      <%= link_to(
+        field.display_associated_resource,
+        [namespace, field.data],
+        class: "text-blue-600 hover:text-blue-800 visited:text-purple-600"
+      ) %>
+    </div>
   <% else %>
-    <span class="text-gray-900">
+    <div class="bg-gray-50 p-3 rounded-md shadow-sm">
       <%= field.display_associated_resource %>
-    </span>
+    </div>
   <% end %>
 <% end %>
 

app/views/layouts/admin/application.html.erb

@@ -24,6 +24,9 @@ By default, it renders:
   <%= stylesheet_link_tag 'tailwind', 'data-turbo-track': 'reload' %>
   <%= stylesheet_link_tag 'administrate-tailwind-theme', 'data-turbo-track': 'reload' %>
   <%= javascript_include_tag 'administrate-tailwind-theme', 'data-turbo-track': 'reload', defer: true %>
+  <%- if flowbite? %>
+    <%= javascript_include_tag 'https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js', defer: true %>
+  <% end %>
 
 </head>
 <body class="bg-gray-100">

docs/upgrade_to_0.0.4.md

@@ -0,0 +1,60 @@
+# How to Upgrade to Include Flowbite
+
+Upgrading from a version prior to 0.0.4 to include Flowbite in your project involves several key steps. Follow this guide to ensure a smooth transition and to leverage the enhancements offered by Flowbite within your administrate-tailwind-theme setup.
+
+## Step 1: Upgrade the Gem
+
+First, ensure that you update the `administrate-tailwind-theme` gem to the latest version. Modify your Gemfile to specify the new version:
+
+```ruby
+gem 'administrate-tailwind-theme', '~> 0.4.0'
+```
+
+Then, run `bundle update administrate-tailwind-theme` to update the gem in your project.
+
+## Step 2: Install Flowbite
+
+Flowbite must be installed manually using npm to ensure it's properly integrated into your project. Navigate to the root of your project and run the following command:
+
+```bash
+npm install flowbite --save
+```
+
+This command adds Flowbite to your project's dependencies, ensuring you have the latest version compatible with the administrate-tailwind-theme.
+
+## Step 3: Update Tailwind Configuration
+
+Modify your `tailwind.config.js` file to include the necessary configurations for Flowbite. You should add Flowbite as a plugin in your Tailwind configuration. Here is an example modification:
+
+```javascript
+module.exports = {
+  // Existing configuration...
+  content: [
+    // Other content...
+    './node_modules/flowbite/**/*.js',
+  ],
+  plugins: [
+    // Other plugins...
+    require('flowbite/plugin')
+  ],
+};
+```
+
+Ensure you merge this snippet with your existing Tailwind configuration, paying special attention not to overwrite any existing settings.
+
+## Step 4: Enable Flowbite in the Initializer
+
+After installing the gem, an initializer file is generated for the administrate-tailwind-theme. You'll need to modify this initializer to enable Flowbite within your project. Open the initializer (typically found at `config/initializers/administrate_tailwind_theme.rb`) and add or modify the following line:
+
+```ruby
+AdministrateTailwindTheme.config.flowbite = true
+```
+
+This line ensures that Flowbite is enabled and that the administrate-tailwind-theme will utilize its components and styling.
+
+## Final Steps
+```shell
+./bin/dev
+```
+
+After completing these steps, ensure that you test your application thoroughly to confirm that the upgrade has been successful and that Flowbite components are correctly integrated and functioning as expected.

lib/administrate_tailwind_theme.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require 'administrate_tailwind_theme/version'
+require 'administrate_tailwind_theme/configuration'
 require 'administrate_tailwind_theme/engine'
 require 'administrate/field/boolean_emoji'
 require 'administrate/field/country_emoji'

lib/administrate_tailwind_theme/configuration.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module AdministrateTailwindTheme
+  class Configuration
+    class << self
+      attr_accessor :flowbite
+
+      def configure
+        yield(self)
+      end
+    end
+  end
+end