simple_form-tailwind 0.1.2 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2399719b0970ee061cc46ab22c6a53dda1e54906d865f36f39ede5c2573d1c96
-  data.tar.gz: 2590b3c970d827319de99f6e9b27343ca3517902e22249d99c8e36ef02a89907
+  metadata.gz: c22ded5d6274d290520ed422df31a3f876ecc55efd2ad244c5fc79331f1f2d38
+  data.tar.gz: b903d2af76a8070ac79a574883564da189725c5621bc7e0ea97665d52756f022
 SHA512:
-  metadata.gz: 61101424ceea3305056a6c54f30ed5801a7b850e25fd2b2fb11e19435ef4a67203e787b92896283546bde6255d2321fa3aac2656fd42e2d4e641fdf083e0b7be
-  data.tar.gz: 17f267933c59f1d8540a5d3943ffedb1103c269d0007cf9891868f5489bc7896c3b5d5005655f45078ddae0ffb97b1166b8c69402e9be685fa25da79572aa79b
+  metadata.gz: 7ca518f967a62b4c6e2692e44ab169d409b1eff70ffa2f6ec6ebb9785783c085c79ae7bb890afd45e8fdcb8dcd8e05dabeb6cb2fc7707fe703085f4d0d26ce61
+  data.tar.gz: 358522dbdd2ff3f2e7ac78a773fb55b477b7c6d510b42cfdce63ddcd71274959a7835c57bded9f9395531d54ef04d566820b53827d0c2976622c20bddeeb26ee

data/CHANGELOG.md

@@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.2.0] - 2024-04-09
+
+* Compatibility with Rails 8 and Tailwind CSS 4
+* Updated installer for the new Tailwind CSS installation method
+* Removed dependency on tailwind.config.js file
+* Added new wrappers for date, time, datetime fields, etc.
+* Fixed color classes (grey -> gray)
+* Improved documentation
 
 ## [0.1.1] - 2020-12-30
 
@@ -12,4 +20,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [0.0.1] - 2020-11-29
 
-* Initia Commit
+* Initial Commit

data/README.md

@@ -1,8 +1,18 @@
 # SimpleForm::Tailwind
 
-Used to add a base [simple_form](https://github.com/heartcombo/simple_form) config with basic tailwind classes added to the form attributes.
+Used to add a base [simple_form](https://github.com/heartcombo/simple_form) configuration with Tailwind CSS classes for form attributes.
 
-**NOTE:** This simple_form config is best used with tailwindCSS `v2.0`
+**NOTE:** This simple_form configuration is optimized for Rails 7> and Tailwind CSS 4.
+
+## Prerequisites
+
+Before installing this gem, make sure you have installed Tailwind CSS in your Rails application:
+
+```bash
+./bin/bundle add tailwindcss-ruby
+./bin/bundle add tailwindcss-rails
+./bin/rails tailwindcss:install
+```
 
 ## Installation
 
@@ -12,7 +22,7 @@ Add this line to your application's Gemfile:
 gem 'simple_form-tailwind'
 ```
 
-And then execute:
+Then execute:
 
     $ bundle install
 
@@ -22,8 +32,8 @@ Or install it yourself as:
 
 ## Usage
 
-To use this simple_form config you need to ensure your application is using simple_form to generate it's forms.
-Run the generator to add the following file to your application `config/initializers/simple_form_tailwind.rb`
+To use this simple_form configuration, you need to ensure that your application uses simple_form to generate its forms.
+Run the generator to add the following file to your application `config/initializers/simple_form_tailwind.rb`:
 
     $ rails g simple_form:tailwind:install
 
@@ -31,7 +41,6 @@ Run the generator to add the following file to your application `config/initiali
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/tarellel/simple_form-tailwind.
 
-
 ## License
 
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/lib/generators/simple_form/tailwind/install_generator.rb

@@ -8,26 +8,18 @@ module SimpleForm
       desc 'Generate a SimpleForm config for tailwind based forms'
       source_root File.expand_path('templates', __dir__)
 
-      def update_tailwind_config
-        # Open the tailwind.config.js file
-        config_path = Rails.root.join('config/tailwind.config.js')
-        if File.exist?(config_path)
-          # Read the existing file
-          config = File.read(config_path)
-          # Add the line in the content section if it's not already there
-          if config.include?('./config/initializers')
-            say 'tailwind.config.js already includes the necessary configuration.', :green
-          else
-            config.sub!('content: [', "content: [\n    \"./config/initializers/*.rb\",")
-            # save modifications
-            File.write(config_path, config)
-            say 'tailwind.config.js has been updated with the necessary configuration.', :green
-          end
-        else
-          say 'tailwind.config.js not found.', :red
-          say 'Please ensure Tailwind is properly installed and try again.', :yellow
+      def check_tailwind_installation
+        # Check if tailwindcss-rails is installed
+        unless File.exist?(Rails.root.join('app/assets/stylesheets/application.css'))
+          say 'Tailwind CSS is not properly installed.', :red
+          say 'Please install Tailwind CSS with the following commands:', :yellow
+          say '  ./bin/bundle add tailwindcss-ruby', :yellow
+          say '  ./bin/bundle add tailwindcss-rails', :yellow
+          say '  ./bin/rails tailwindcss:install', :yellow
           exit # Cancel installation
         end
+        
+        say 'Tailwind CSS is properly installed.', :green
       end
 
       def copy_initialzier

data/lib/generators/simple_form/tailwind/templates/simple_form.rb

@@ -49,7 +49,7 @@ SimpleForm.setup do |config|
     b.use :input,
           class: 'shadow appearance-none border border-gray-300 rounded w-full py-2 px-3 bg-white focus:outline-none focus:ring-0 focus:border-blue-500 text-gray-400 leading-6 transition-colors duration-200 ease-in-out', error_class: 'border-red-500', valid_class: 'border-green-400'
     b.use :full_error, wrap_with: { tag: 'p', class: 'mt-2 text-red-500 text-xs italic' }
-    b.use :hint, wrap_with: { tag: 'p', class: 'mt-2 text-grey-700 text-xs italic' }
+    b.use :hint, wrap_with: { tag: 'p', class: 'mt-2 text-gray-700 text-xs italic' }
   end
 
   # vertical input for boolean (aka checkboxes)
@@ -62,7 +62,7 @@ SimpleForm.setup do |config|
     end
     b.wrapper tag: 'div', class: 'ml-3 text-sm' do |bb|
       bb.use :label, class: 'block', error_class: 'text-red-500'
-      bb.use :hint, wrap_with: { tag: 'p', class: 'block text-grey-700 text-xs italic' }
+      bb.use :hint, wrap_with: { tag: 'p', class: 'block text-gray-700 text-xs italic' }
       bb.use :full_error, wrap_with: { tag: 'p', class: 'block text-red-500 text-xs italic' }
     end
   end
@@ -79,7 +79,7 @@ SimpleForm.setup do |config|
     b.use :input,
           class: 'focus:ring-2 focus:ring-indigo-500 ring-offset-2 h-4 w-4 text-indigo-600 border-gray-300 rounded', error_class: 'text-red-500', valid_class: 'text-green-400'
     b.use :full_error, wrap_with: { tag: 'p', class: 'block mt-2 text-red-500 text-xs italic' }
-    b.use :hint, wrap_with: { tag: 'p', class: 'mt-2 text-grey-700 text-xs italic' }
+    b.use :hint, wrap_with: { tag: 'p', class: 'mt-2 text-gray-700 text-xs italic' }
   end
 
   # vertical file input
@@ -93,55 +93,98 @@ SimpleForm.setup do |config|
     b.use :input, class: 'w-full text-gray-500 px-3 py-2 border rounded', error_class: 'text-red-500 border-red-500',
                   valid_class: 'text-green-400'
     b.use :full_error, wrap_with: { tag: 'p', class: 'mt-2 text-red-500 text-xs italic' }
-    b.use :hint, wrap_with: { tag: 'p', class: 'mt-2 text-grey-700 text-xs italic' }
+    b.use :hint, wrap_with: { tag: 'p', class: 'mt-2 text-gray-700 text-xs italic' }
   end
 
   # vertical multi select
   config.wrappers :vertical_multi_select, tag: 'div', class: 'my-4', error_class: 'f', valid_class: '' do |b|
     b.use :html5
     b.optional :readonly
-    b.wrapper :legend_tag, tag: 'legend', class: 'text-sm font-medium text-gray-600',
-                           error_class: 'text-red-500' do |ba|
-      ba.use :label_text
-    end
+    b.use :label, class: 'text-sm font-medium text-gray-600 block', error_class: 'text-red-500'
     b.wrapper tag: 'div', class: 'inline-flex space-x-1' do |ba|
-      # ba.use :input, class: 'flex w-auto w-auto text-gray-500 text-sm border-gray-300 rounded p-2', error_class: 'text-red-500', valid_class: 'text-green-400'
-      ba.use :input,
-             class: 'flex w-auto w-auto shadow appearance-none border border-gray-300 rounded w-full p-2 bg-white focus:outline-none focus:border-blue-500 text-gray-400 leading-4 transition-colors duration-200 ease-in-out'
+      ba.use :input, class: 'flex-grow', error_class: 'text-red-500', valid_class: 'text-green-400'
     end
     b.use :full_error, wrap_with: { tag: 'p', class: 'mt-2 text-red-500 text-xs italic' }
-    b.use :hint, wrap_with: { tag: 'p', class: 'mt-2 text-grey-700 text-xs italic' }
+    b.use :hint, wrap_with: { tag: 'p', class: 'mt-2 text-gray-700 text-xs italic' }
   end
 
-  # vertical range input
-  config.wrappers :vertical_range, tag: 'div', class: 'my-4', error_class: 'text-red-500',
-                                   valid_class: 'text-green-400' do |b|
+  # vertical date input
+  config.wrappers :vertical_date, tag: 'div', class: 'my-4', error_class: 'f', valid_class: '' do |b|
+    b.use :html5
+    b.optional :readonly
+    b.use :label, class: 'text-sm font-medium text-gray-600 block', error_class: 'text-red-500'
+    b.use :input, class: 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm', error_class: 'text-red-500', valid_class: 'text-green-400'
+    b.use :full_error, wrap_with: { tag: 'p', class: 'mt-2 text-red-500 text-xs italic' }
+    b.use :hint, wrap_with: { tag: 'p', class: 'mt-2 text-gray-700 text-xs italic' }
+  end
+
+  # vertical time input
+  config.wrappers :vertical_time, tag: 'div', class: 'my-4', error_class: 'f', valid_class: '' do |b|
+    b.use :html5
+    b.optional :readonly
+    b.use :label, class: 'text-sm font-medium text-gray-600 block', error_class: 'text-red-500'
+    b.use :input, class: 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm', error_class: 'text-red-500', valid_class: 'text-green-400'
+    b.use :full_error, wrap_with: { tag: 'p', class: 'mt-2 text-red-500 text-xs italic' }
+    b.use :hint, wrap_with: { tag: 'p', class: 'mt-2 text-gray-700 text-xs italic' }
+  end
+
+  # vertical date time
+  config.wrappers :vertical_datetime, tag: 'div', class: 'my-4', error_class: 'f', valid_class: '' do |b|
+    b.use :html5
+    b.optional :readonly
+    b.use :label, class: 'text-sm font-medium text-gray-600 block', error_class: 'text-red-500'
+    b.use :input, class: 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm', error_class: 'text-red-500', valid_class: 'text-green-400'
+    b.use :full_error, wrap_with: { tag: 'p', class: 'mt-2 text-red-500 text-xs italic' }
+    b.use :hint, wrap_with: { tag: 'p', class: 'mt-2 text-gray-700 text-xs italic' }
+  end
+
+  # vertical date time zone
+  config.wrappers :vertical_datetime_local, tag: 'div', class: 'my-4', error_class: 'f', valid_class: '' do |b|
+    b.use :html5
+    b.optional :readonly
+    b.use :label, class: 'text-sm font-medium text-gray-600 block', error_class: 'text-red-500'
+    b.use :input, class: 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm', error_class: 'text-red-500', valid_class: 'text-green-400'
+    b.use :full_error, wrap_with: { tag: 'p', class: 'mt-2 text-red-500 text-xs italic' }
+    b.use :hint, wrap_with: { tag: 'p', class: 'mt-2 text-gray-700 text-xs italic' }
+  end
+
+  # vertical select
+  config.wrappers :vertical_select, tag: 'div', class: 'my-4', error_class: 'f', valid_class: '' do |b|
+    b.use :html5
+    b.optional :readonly
+    b.use :label, class: 'text-sm font-medium text-gray-600 block', error_class: 'text-red-500'
+    b.use :input, class: 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm', error_class: 'text-red-500', valid_class: 'text-green-400'
+    b.use :full_error, wrap_with: { tag: 'p', class: 'mt-2 text-red-500 text-xs italic' }
+    b.use :hint, wrap_with: { tag: 'p', class: 'mt-2 text-gray-700 text-xs italic' }
+  end
+
+  # vertical range
+  config.wrappers :vertical_range, tag: 'div', class: 'my-4', error_class: 'f', valid_class: '' do |b|
     b.use :html5
-    b.use :placeholder
     b.optional :readonly
     b.optional :step
     b.use :label, class: 'text-sm font-medium text-gray-600 block', error_class: 'text-red-500'
-    b.wrapper tag: 'div', class: 'flex items-center h-5' do |ba|
-      ba.use :input, class: 'rounded-lg overflow-hidden appearance-none bg-gray-400 h-3 w-full text-gray-300',
-                     error_class: 'text-red-500', valid_class: 'text-green-400'
-    end
+    b.use :input, class: 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm', error_class: 'text-red-500', valid_class: 'text-green-400'
     b.use :full_error, wrap_with: { tag: 'p', class: 'mt-2 text-red-500 text-xs italic' }
-    b.use :hint, wrap_with: { tag: 'p', class: 'mt-2 text-grey-700 text-xs italic' }
+    b.use :hint, wrap_with: { tag: 'p', class: 'mt-2 text-gray-700 text-xs italic' }
   end
 
   # The default wrapper to be used by the FormBuilder.
   config.default_wrapper = :vertical_form
 
   # Custom wrappers for input types. This should be a hash containing an input
-  # type as key and the wrapper that will be used for all inputs with specified type.
+  # type as key and the wrapper used for the input.
   config.wrapper_mappings = {
     boolean: :vertical_boolean,
     check_boxes: :vertical_collection,
-    date: :vertical_multi_select,
-    datetime: :vertical_multi_select,
+    collection: :vertical_collection,
+    date: :vertical_date,
+    datetime: :vertical_datetime,
     file: :vertical_file,
     radio_buttons: :vertical_collection,
     range: :vertical_range,
-    time: :vertical_multi_select
+    select: :vertical_select,
+    time: :vertical_time,
+    datetime_local: :vertical_datetime_local
   }
 end

data/lib/simple_form/tailwind/version.rb

@@ -2,8 +2,8 @@
 
 module SimpleForm
   module Tailwind
-    MIN_RAILS_VERSION = '4.0'
+    MIN_RAILS_VERSION = '7.0'
     MIN_SIMPLEFORM_VERSION = '5.0'
-    VERSION = '0.1.2'
+    VERSION = '0.2.0'
   end
 end

metadata

@@ -1,14 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: simple_form-tailwind
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.2.0
 platform: ruby
 authors:
 - Brandon Hicks
-autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-12-30 00:00:00.000000000 Z
+date: 2025-05-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -16,14 +15,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '4.0'
+        version: '7.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '4.0'
+        version: '7.0'
 - !ruby/object:Gem::Dependency
   name: simple_form
   requirement: !ruby/object:Gem::Requirement
@@ -102,7 +101,6 @@ metadata:
   bug_tracker_uri: https://github.com/tarellel/simple_form-tailwind/issues
   changelog_uri: https://github.com/tarellel/simple_form-tailwind/blob/master/CHANGELOG.md
   source_code_uri: https://github.com/tarellel/simple_form-tailwind
-post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -117,8 +115,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.17
-signing_key:
+rubygems_version: 3.6.3
 specification_version: 4
 summary: A basic rails generator for adding a simpleform config setup for tailwindCSS
   based forms