simple_form-theme 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5e275530d19251b93ce0131fa8f50fde91594a5dc39cc5d3cc6a9e120218d86f
-  data.tar.gz: d1c5054ad31b75e7275773414d3fc773bf51b18b8a03ee33bf887fdb3f0887f4
+  metadata.gz: 437ec70587ba8a60a1c4d2dc5e8c3b02298439dc55ef904d5c71115c8cd1da48
+  data.tar.gz: 3d042a0e47a5ff75365a08dfd242134d7e8dfae4b75437afe70b95a1fd641da5
 SHA512:
-  metadata.gz: 32bf9ba67047d0309dff1b7265a295f382067f605fc9112bb1a7a58960d62e2b94e25435994659750e2c68801049964b06250e527b8fad49a7b55490ecb53420
-  data.tar.gz: 43c9616ac3ae8c74bd5a76e273d4dce6093d8e6c54c38775b672ca51be9c3d605d9870938f24f8ceeec012ee837a1c542f4d21c2712a841d6aa258abe04e3dee
+  metadata.gz: cfe2bbe85d5ba2ae74c8aea94f789028d0e42325c47a6a2e5fe490f9d5a005eaafdac420fc266656946dbb2af820e63cfa3291864ffdfa05b6d2cfe1612a1c9b
+  data.tar.gz: 9be70bb643d0cd348a5c91ff66c0820d7c7dce37b9dc6bbc8c6219f4080563ee1da85f37e188fc48f69bd68e4e29741f76ba015072ffd516e83ffe3f447209ad

data/README.md

@@ -1,8 +1,9 @@
 # SimpleForm::Theme
 Short description and motivation.
 
-## Usage
-How to use my plugin.
+### Supported CSS Frameworks
+* [Tailwind CSS](https://tailwindcss.com/docs/installation)
+* [Bulma](https://bulma.io/documentation/start/installation)
 
 ## Installation
 Add this line to your application's Gemfile:
@@ -13,16 +14,40 @@ gem 'simple_form-theme'
 
 And then execute:
 ```bash
-$ bundle
+bundle
+```
+
+As an alternative instead of adding an additional dependency to your project,
+you can copy the initializer file to your project from the GitHub repository.
+
+Example:
+```bash
+cp lib/generators/simple_form/theme/templates/config/initializers/simple_form_tailwindcss.rb yourapp/config/initializers/simple_form_tailwindcss.rb
 ```
 
-Or install it yourself as:
+However, if you install the gem, you will get the latest updates and improvements.
+
+## Requirements
+
+* Make sure you have installed [simple_form](https://github.com/heartcombo/simple_form) gem.
+* Make sure you have installed the decired css framework.
+
+## Usage
+
+### Install Tailwind CSS initializer
+
+```bash
+bin/rails generate simple_form:theme:tailwind install
+```
+
+### Install Bulma CSS initializer
+
 ```bash
-$ gem install simple_form-theme
+bin/rails generate simple_form:theme:bulma install
 ```
 
 ## Contributing
-Contribution directions go here.
+Bug reports and pull requests are welcome on GitHub at https://github.com/JuanVqz/simple_form-theme
 
 ## 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/theme/bulma/USAGE

@@ -0,0 +1,8 @@
+Description:
+    Install the simple form bulma config file in your app.
+
+Example:
+    bin/rails generate simple_form:theme:bulma install
+
+    This will create:
+        config/initializers/simple_form_bulma.rb

data/lib/generators/simple_form/theme/bulma/bulma_generator.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class SimpleForm::Theme::BulmaGenerator < Rails::Generators::NamedBase
+  source_root File.expand_path('templates', __dir__)
+
+  desc 'Copy the bulma initializer file for simple_form'
+  def copy_initializer_file
+    template 'config/initializers/simple_form_bulma.rb', 'config/initializers/simple_form_bulma.rb'
+  end
+end

data/lib/generators/simple_form/theme/bulma/templates/config/initializers/simple_form_bulma.rb

@@ -0,0 +1,126 @@
+# frozen_string_literal: true
+
+# Use this setup block to configure all options available in SimpleForm.
+SimpleForm.setup do |config|
+  # Default class for buttons
+  config.button_class = 'button'
+
+  # Define the default class of the input wrapper of the boolean input.
+  config.boolean_label_class = 'checkbox'
+
+  # How the label text should be generated altogether with the required text.
+  config.label_text = ->(label, required, _explicit_label) { "#{label} #{required}" }
+
+  # Define the way to render check boxes / radio buttons with labels.
+  config.boolean_style = :inline
+
+  # You can wrap each item in a collection of radio/check boxes with a tag
+  config.item_wrapper_tag = :div
+
+  # Defines if the default input wrapper class should be included in radio
+  # collection wrappers.
+  config.include_default_input_wrapper_class = false
+
+  # CSS class to add for error notification helper.
+  config.error_notification_class = 'notification is-danger'
+
+  # Method used to tidy up errors. Specify any Rails Array method.
+  # :first lists the first message for each field.
+  # :to_sentence to list all errors for each field.
+  config.error_method = :to_sentence
+
+  # add validation classes to `input_field`
+  config.input_field_error_class = 'is-danger'
+  config.input_field_valid_class = 'is-success'
+
+  # vertical forms
+  #
+  # bulma vertical default_wrapper
+  config.wrappers :vertical_form, tag: 'div', class: 'field' do |b|
+    b.use :html5
+    b.use :placeholder
+    b.optional :maxlength
+    b.optional :minlength
+    b.optional :pattern
+    b.optional :min_max
+    b.optional :readonly
+    b.use :label, class: 'label'
+    b.use :input, class: 'input', wrap_with: { tag: 'div', class: 'control' }, error_class: 'is-danger', valid_class: 'is-success'
+    b.use :full_error, wrap_with: { tag: 'div', class: 'help is-danger' }
+    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
+  end
+
+  # bulma vertical select_form
+  config.wrappers :select_form, tag: 'div', class: 'control' do |b|
+    b.use :html5
+    b.use :placeholder
+    b.optional :pattern
+    b.optional :readonly
+    b.use :input, wrap_with: { tag: 'div', class: 'select' }
+    b.use :full_error, wrap_with: { tag: 'div', class: 'help is-danger' }
+    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
+  end
+
+  # bulma extension vertical input for boolean
+  config.wrappers :vertical_boolean, tag: 'div', class: 'field' do |b|
+    b.use :html5
+    b.optional :readonly
+    b.use :input, class: 'is-checkradio is-info'
+    b.use :label
+    # b.wrapper :form_check_wrapper, tag: 'div', class: 'control' do |bb|
+    #   bb.use :input, wrap_with: { tag: 'label', class: 'checkbox' }
+    #   bb.use :label, class: 'checkbox'
+    #   bb.use :full_error, wrap_with: { tag: 'div', class: 'help is-danger' }
+    #   bb.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
+    # end
+  end
+
+  ## vertical input for radio buttons and check boxes
+  config.wrappers :vertical_collection, item_wrapper_class: 'form-check', tag: 'fieldset', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
+    b.use :html5
+    b.optional :readonly
+    b.wrapper :legend_tag, tag: 'legend', class: 'col-form-label pt-0' do |ba|
+      ba.use :label_text
+    end
+    b.use :input, class: 'form-check-input', error_class: 'is-invalid', valid_class: 'is-valid'
+    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
+    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
+  end
+
+  ## bulma vertical file input
+  config.wrappers :vertical_file, tag: 'div', class: 'file' do |b|
+    b.use :html5
+    b.optional :readonly
+    b.use :input, class: 'file-input', wrap_with: { tag: 'label', class: 'file-label' }
+    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
+    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
+  end
+
+  ## bulma vertical multi select
+  config.wrappers :vertical_multi_select, tag: 'div', class: 'field' do |b|
+    b.use :html5
+    b.optional :readonly
+    b.use :label, class: 'label'
+    b.wrapper tag: 'div', class: 'control' do |ba|
+      ba.use :input, class: 'input', error_class: 'is-danger', valid_class: 'is-success'
+    end
+    b.use :full_error, wrap_with: { tag: 'div', class: 'is-danger' }
+    b.use :hint, wrap_with: { tag: 'small', class: 'help' }
+  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.
+  config.wrapper_mappings = {
+    boolean: :vertical_boolean,
+    check_boxes: :vertical_collection,
+    date: :vertical_multi_select,
+    datetime: :vertical_multi_select,
+    file: :vertical_file,
+    radio_buttons: :vertical_collection,
+    range: :vertical_range,
+    time: :vertical_multi_select
+  }
+end

data/lib/generators/simple_form/theme/tailwind/USAGE

@@ -0,0 +1,8 @@
+Description:
+    Install the simple form tailwindcss config file in your app.
+
+Example:
+    bin/rails generate simple_form:theme:tailwind install
+
+    This will create:
+        config/initializers/simple_form_tailwindcss.rb

data/lib/generators/simple_form/theme/tailwind/tailwind_generator.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class SimpleForm::Theme::TailwindGenerator < Rails::Generators::NamedBase
+  source_root File.expand_path('templates', __dir__)
+
+  desc 'Copy the tailwindcss initializer file for simple_form'
+  def copy_initializer_file
+    template 'config/initializers/simple_form_tailwindcss.rb', 'config/initializers/simple_form_tailwindcss.rb'
+  end
+end

data/lib/generators/simple_form/theme/tailwind/templates/config/initializers/simple_form_tailwindcss.rb

@@ -0,0 +1,161 @@
+# frozen_string_literal: true
+
+# Use this setup block to configure all options available in SimpleForm.
+SimpleForm.setup do |config|
+  config.wrappers :vertical_form, tag: :div, class: 'mb-4' do |b|
+    b.use :html5
+    b.use :placeholder
+    b.optional :maxlength
+    b.optional :minlength
+    b.optional :pattern
+    b.optional :min_max
+    b.optional :readonly
+    b.use :label, class: 'block mb-2 text-sm font-medium text-gray-900 dark:text-white'
+    b.use :input,
+          class: 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500',
+          error_class: 'bg-red-50 border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500',
+          valid_class: 'bg-green-50 border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700 dark:border-green-500'
+    b.use :full_error, wrap_with: { tag: :p, class: 'mt-2 text-sm text-red-600 dark:text-red-600' }
+    b.use :hint, wrap_with: { tag: :small, class: 'text-sm text-gray-400 dark:text-gray-400' }
+  end
+
+  # vertical input for radio buttons and check boxes
+  config.wrappers :vertical_collection, item_wrapper_class: 'form-check',
+                                        item_label_class: 'form-check-label',
+                                        tag: :fieldset,
+                                        class: 'form-group mb-3',
+                                        error_class: 'form-group-invalid',
+                                        valid_class: 'form-group-valid' do |b|
+    b.use :html5
+    b.optional :readonly
+    b.wrapper :legend_tag, tag: :legend, class: 'col-form-label pt-0' do |ba|
+      ba.use :label_text, class: 'ml-3 block text-sm font-medium text-gray-700'
+    end
+    b.use :input, class: 'focus:ring-indigo-500 h-4 w-4 text-sky-600 border-gray-300 mr-2',
+                  error_class: 'is-invalid border-red-400',
+                  valid_class: 'is-valid'
+    b.use :full_error, wrap_with: { tag: :p, class: 'mt-2 text-sm text-red-600 dark:text-red-600' }
+    b.use :hint, wrap_with: { tag: :small, class: 'text-gray-400' }
+  end
+
+  # vertical input for radio buttons and check boxes
+  # config.wrappers :vertical_check_boxes_collection, item_wrapper_class: 'form-check',
+  #                                                   item_label_class: 'form-check-label',
+  #                                                   tag: 'fieldset', class: 'form-group mb-3',
+  #                                                   error_class: 'form-group-invalid',
+  #                                                   valid_class: 'form-group-valid' do |b|
+  #   b.use :html5
+  #   b.optional :readonly
+  #   b.wrapper :legend_tag, tag: 'legend', class: 'col-form-label pt-0' do |ba|
+  #     ba.use :label_text, class: 'ml-3 block text-sm font-medium text-gray-700'
+  #   end
+  #   b.use :input, class: 'focus:ring-indigo-500 h-4 w-4 text-sky-600 border-gray-300 rounded mr-2',
+  #                 error_class: 'is-invalid border-red-400',
+  #                 valid_class: 'is-valid'
+  #   b.use :full_error, wrap_with: {tag: :p, class: "mt-2 text-sm text-red-600 dark:text-red-600"}
+  #   b.use :hint, wrap_with: { tag: :small, class: 'text-gray-400' }
+  # end
+
+  # horizontal input for inline radio buttons and check boxes
+  config.wrappers :horizontal_collection_inline, item_wrapper_class: 'form-check form-check-inline',
+                                                 item_label_class: 'form-check-label',
+                                                 tag: :div,
+                                                 class: 'form-group flex flex-row-reverse w-fit mb-3',
+                                                 error_class: 'form-group-invalid',
+                                                 valid_class: 'form-group-valid' do |b|
+    b.use :html5
+    b.optional :readonly
+    b.use :label, class: 'pt-0 mb-2'
+    b.wrapper :grid_wrapper, tag: :div do |ba|
+      ba.use :input, class: 'focus:ring-indigo-500 h-4 w-4 text-sky-600 border-gray-300 rounded mr-2',
+                     error_class: 'is-invalid', valid_class: 'is-valid'
+      ba.use :full_error, wrap_with: { tag: :p, class: 'mt-2 text-sm text-red-600 dark:text-red-600' }
+      ba.use :hint, wrap_with: { tag: :small, class: 'text-gray-400' }
+    end
+  end
+
+  # vertical multi select
+  config.wrappers :vertical_multi_select, tag: :div, class: 'mb-4' do |b|
+    b.use :html5
+    b.optional :readonly
+    b.use :label, class: 'block mb-2 text-sm font-medium text-gray-900 dark:text-white'
+    b.wrapper tag: :div, class: 'flex flex-col md:flex-row gap-1 justify-between items-center' do |ba|
+      ba.use :input,
+             class: 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500',
+             error_class: 'bg-red-50 border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500',
+             valid_class: 'bg-green-50 border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700 dark:border-green-500'
+    end
+    b.use :full_error, wrap_with: { tag: :p, class: 'mt-2 text-sm text-red-600 dark:text-red-600' }
+    b.use :hint, wrap_with: { tag: :small, class: 'text-gray-400' }
+  end
+
+  # vertical input for boolean
+  config.wrappers :vertical_boolean, tag: :fieldset, class: 'mb-3',
+                                     error_class: 'form-group-invalid',
+                                     valid_class: 'form-group-valid' do |b|
+    b.use :html5
+    b.optional :readonly
+    b.wrapper :form_check_wrapper, tag: 'div' do |bb|
+      bb.use :input, class: 'focus:ring-indigo-500 h-4 w-4 text-sky-600 border-gray-300 rounded mr-2',
+                     error_class: '!border-red-500',
+                     valid_class: 'is-valid'
+      bb.use :label, class: 'mb-2'
+    end
+    b.use :full_error, wrap_with: { tag: :p, class: 'mt-2 text-sm text-red-600 dark:text-red-600' }
+    b.use :hint, wrap_with: { tag: :small, class: 'text-gray-400' }
+  end
+
+  # vertical file input
+  config.wrappers :vertical_file, tag: :div, class: 'mb-4' do |b|
+    b.use :html5
+    b.use :placeholder
+    b.optional :maxlength
+    b.optional :minlength
+    b.optional :readonly
+    b.use :label, class: 'block mb-2 text-sm font-medium text-gray-900 dark:text-white'
+    b.use :input,
+          class: 'block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400',
+          error_class: 'bg-red-50 border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500',
+          valid_class: 'bg-green-50 border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700 dark:border-green-500'
+    b.use :full_error, wrap_with: { tag: :p, class: 'mt-2 text-sm text-red-600 dark:text-red-600' }
+    b.use :hint, wrap_with: { tag: :small, class: 'text-sm text-gray-400 dark:text-gray-400' }
+  end
+
+  # 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.
+  config.wrapper_mappings = {
+    boolean: :vertical_boolean,
+    check_boxes: :vertical_collection,
+    date: :vertical_multi_select,
+    file: :vertical_file,
+    datetime: :vertical_multi_select,
+    radio_buttons: :vertical_collection,
+    time: :vertical_multi_select
+  }
+
+  # How the label text should be generated altogether with the required text.
+  config.label_text = ->(label, required, _explicit_label) { "#{label} #{required}" }
+
+  # CSS class for buttons
+  config.button_class = 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800'
+
+  # Set this to div to make the checkbox and radio properly work
+  # otherwise simple_form adds a label tag instead of a div around
+  # the nested label
+  config.item_wrapper_tag = :div
+
+  # CSS class to add for error notification helper.
+  config.error_notification_class = 'bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded'
+
+  # Method used to tidy up errors. Specify any Rails Array method.
+  # :first lists the first message for each field.
+  # :to_sentence to list all errors for each field.
+  config.error_method = :to_sentence
+
+  # The default wrapper to be used by the FormBuilder.
+  config.default_wrapper = :vertical_form
+
+  # add validation classes to `input_field`
+  config.input_field_error_class = 'bg-red-50'
+  config.input_field_valid_class = 'bg-green-50'
+end

data/lib/simple_form/theme/version.rb

@@ -1,5 +1,5 @@
 module SimpleForm
   module Theme
-    VERSION = '0.1.0'
+    VERSION = '0.1.1'
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: simple_form-theme
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - Juan Vasquez
@@ -63,6 +63,12 @@ files:
 - app/models/simple_form/theme/application_record.rb
 - app/views/layouts/simple_form/theme/application.html.erb
 - config/routes.rb
+- lib/generators/simple_form/theme/bulma/USAGE
+- lib/generators/simple_form/theme/bulma/bulma_generator.rb
+- lib/generators/simple_form/theme/bulma/templates/config/initializers/simple_form_bulma.rb
+- lib/generators/simple_form/theme/tailwind/USAGE
+- lib/generators/simple_form/theme/tailwind/tailwind_generator.rb
+- lib/generators/simple_form/theme/tailwind/templates/config/initializers/simple_form_tailwindcss.rb
 - lib/simple_form/theme.rb
 - lib/simple_form/theme/engine.rb
 - lib/simple_form/theme/version.rb
@@ -89,7 +95,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.2.3
+rubygems_version: 3.1.6
 signing_key: 
 specification_version: 4
 summary: The most modern themes for SimpleForm gem.