ariadne_view_components 0.0.6 → 0.0.7

data/app/lib/ariadne/form_builder.rb

@@ -5,64 +5,64 @@ module Ariadne
   class FormBuilder < ActionView::Helpers::FormBuilder
     include ClassNameHelper
 
-    DEFAULT_SECTION_CLASSES = "pt-8 space-y-6 sm:pt-10 sm:space-y-5"
+    DEFAULT_SECTION_CLASSES = "ariadne-pt-8 ariadne-space-y-6 sm:ariadne-pt-10 sm:ariadne-space-y-5"
     def section(classes: "", attributes: {}, &block)
       actual_classes = class_names(DEFAULT_SECTION_CLASSES, classes)
       options = { class: actual_classes, **attributes }
       @template.content_tag(:div, **options, &block)
     end
 
-    DEFAULT_SECTION_HEADING_CLASSES = "text-lg leading-6 font-medium text-gray-900"
+    DEFAULT_SECTION_HEADING_CLASSES = "ariadne-text-lg ariadne-leading-6 ariadne-font-medium ariadne-text-gray-900"
     def heading(tag: :h3, classes: "", attributes: {}, &block)
       actual_classes = class_names(DEFAULT_SECTION_HEADING_CLASSES, classes)
       options = { class: actual_classes, **attributes }
       @template.content_tag(tag, **options, &block)
     end
 
-    DEFAULT_SECTION_SUBHEADING_CLASSES = "mt-1 max-w-2xl text-sm text-gray-500"
+    DEFAULT_SECTION_SUBHEADING_CLASSES = "ariadne-mt-1 ariadne-max-w-2xl ariadne-text-sm ariadne-text-gray-500"
     def subheading(classes: "", attributes: {}, &block)
       actual_classes = class_names(DEFAULT_SECTION_SUBHEADING_CLASSES, classes)
       options = { class: actual_classes, **attributes }
       @template.content_tag(:p, **options, &block)
     end
 
-    DEFAULT_LABEL_CLASSES = "block text-sm font-medium text-gray-700 pl-2"
+    DEFAULT_LABEL_CLASSES = "ariadne-block ariadne-text-sm ariadne-font-medium ariadne-text-gray-700 ariadne-pl-2"
     def label(object_name, content, ptions = {}, &block)
       options[:class] = class_names(DEFAULT_LABEL_CLASSES, options.delete(:classes))
       super(object_name, content, options, &block)
     end
 
-    DEFAULT_TEXT_CLASSES = "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
+    DEFAULT_TEXT_CLASSES = "ariadne-shadow-sm focus:ariadne-ring-indigo-500 focus:ariadne-border-indigo-500 ariadne-block ariadne-w-full sm:ariadne-text-sm ariadne-border-gray-300 ariadne-rounded-md"
     def text_field(method, options = {})
       options[:class] = class_names(DEFAULT_TEXT_CLASSES, options.delete(:classes))
       super(method, **options)
     end
 
-    DEFAULT_CHECKBOX_CLASSES = "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+    DEFAULT_CHECKBOX_CLASSES = "focus:ariadne-ring-indigo-500 ariadne-h-4 ariadne-w-4 ariadne-text-indigo-600 ariadne-border-gray-300 ariadne-rounded"
     def check_box(method, options = {}, checked_value = "1", unchecked_value = "0")
       options[:class] = class_names(DEFAULT_CHECKBOX_CLASSES, options.delete(:classes))
       super(method, options, checked_value, unchecked_value)
     end
 
-    DEFAULT_RADIO_CLASSES = "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+    DEFAULT_RADIO_CLASSES = "focus:ariadne-ring-indigo-500 ariadne-h-4 ariadne-w-4 ariadne-text-indigo-600 ariadne-border-gray-300 ariadne-rounded"
     def radio_button(method, tag_value, options = {})
       options[:class] = class_names(DEFAULT_RADIO_CLASSES, options.delete(:classes))
       super(method, tag_value, **options)
     end
 
-    DEFAULT_TEXTAREA_CLASSES = "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border border-gray-300 rounded-md"
+    DEFAULT_TEXTAREA_CLASSES = "ariadne-shadow-sm focus:ariadne-ring-indigo-500 focus:ariadne-border-indigo-500 ariadne-block ariadne-w-full sm:ariadne-text-sm ariadne-border ariadne-border-gray-300 ariadne-rounded-md"
     def text_area(method, options = {})
       options[:class] = class_names(DEFAULT_TEXTAREA_CLASSES, options.delete(:classes))
       super(method, **options)
     end
 
-    DEFAULT_EMAIL_CLASSES = "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
+    DEFAULT_EMAIL_CLASSES = "ariadne-shadow-sm focus:ariadne-ring-indigo-500 focus:ariadne-border-indigo-500 ariadne-block ariadne-w-full sm:ariadne-text-sm ariadne-border-gray-300 ariadne-rounded-md"
     def email_field(method, options = {})
       options[:class] = class_names(DEFAULT_EMAIL_CLASSES, options.delete(:classes))
       super(method, **options)
     end
 
-    DEFAULT_PASSWORD_CLASSES = "appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+    DEFAULT_PASSWORD_CLASSES = "ariadne-appearance-none ariadne-block ariadne-w-full ariadne-px-3 ariadne-py-2 ariadne-border ariadne-border-gray-300 ariadne-rounded-md ariadne-shadow-sm ariadne-placeholder-gray-400 focus:ariadne-outline-none focus:ariadne-ring-indigo-500 focus:ariadne-border-indigo-500 sm:ariadne-text-sm"
     def password_field(method, options = {})
       options[:class] = class_names(DEFAULT_PASSWORD_CLASSES, options.delete(:classes))
       super(method, **options)

data/app/lib/ariadne/icon_helper.rb

@@ -23,7 +23,7 @@ module Ariadne
 
       icon_presence!(icon, variant)
       variant_presence!(icon, variant)
-      fetch_or_raise(HeroiconsHelper::Icon::VARIANTS, variant)
+      fetch_or_raise(HeroiconsHelper::Icon::VALID_VARIANTS, variant)
 
       true
     end

data/lib/ariadne/view_components/engine.rb

@@ -3,10 +3,16 @@
 require "rails/engine"
 
 require "view_component"
-require "ariadne/classify/utilities"
+
+require "tailwind_merge"
+require "simple_form"
 
 module Ariadne
+  # The Ariadne gem is a collection of ViewComponents that can be used to build
+  # accessible, responsive, and consistent UIs for Yetto.
   module ViewComponents
+    mattr_accessor :tailwind_merger
+
     # :nodoc:
     class Engine < ::Rails::Engine
       isolate_namespace Ariadne::ViewComponents
@@ -30,8 +36,168 @@ module Ariadne
         end
       end
 
-      config.after_initialize do |app|
-        ::Ariadne::Classify::Utilities.validate_class_names = app.config.ariadne_view_components.delete(:validate_class_names)
+      initializer "ariadne_view_components.simple_form" do |_app|
+        # Use this setup block to configure all options available in SimpleForm.
+        SimpleForm.setup do |config|
+          # Default class for buttons
+          config.button_class = "my-2 bg-blue-500 hover:bg-blue-700 text-white font-bold text-sm py-2 px-4 rounded"
+
+          # Define the default class of the input wrapper of the boolean input.
+          config.boolean_label_class = ""
+
+          # How the label text should be generated altogether with the required text.
+          config.label_text = lambda { |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 = "text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-400"
+
+          # 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 = "border-red-500"
+          config.input_field_valid_class = "border-green-400"
+          config.label_class = "text-sm font-medium text-gray-600"
+
+          # vertical forms
+          #
+          # vertical default_wrapper
+          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", error_class: "text-red-500")
+            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" })
+          end
+
+          # vertical input for boolean (aka checkboxes)
+          config.wrappers(:vertical_boolean, tag: "div", class: "mb-4 flex items-start", error_class: "") do |b|
+            b.use(:html5)
+            b.optional(:readonly)
+            b.wrapper(tag: "div", class: "flex items-center h-5") do |ba|
+              ba.use(:input, class: "focus:ring-2 focus:ring-indigo-500:focus ring-offset-2 h-4 w-4 text-indigo-600 border-gray-300 rounded")
+            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(:full_error, wrap_with: { tag: "p", class: "block text-red-500 text-xs italic" })
+            end
+          end
+
+          # vertical input for radio buttons and check boxes
+          config.wrappers(:vertical_collection, item_wrapper_class: "flex items-center", item_label_class: "my-1 ml-3 block text-sm font-medium text-gray-400", tag: "div", class: "my-4") 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(: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" })
+          end
+
+          # vertical file input
+          config.wrappers(:vertical_file, tag: "div", class: "") do |b|
+            b.use(:html5)
+            b.use(:placeholder)
+            b.optional(:maxlength)
+            b.optional(:minlength)
+            b.optional(:readonly)
+            b.use(:label, class: "text-sm font-medium text-gray-600 block", error_class: "text-red-500")
+            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" })
+          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.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")
+            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" })
+          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|
+            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(: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" })
+          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
+      end
+
+      config.after_initialize do |_app|
+        # TODO: is any of this necessary???
+        ActionView::Base.field_error_proc = proc do |html_tag, instance_tag|
+          fragment = Nokogiri::HTML.fragment(html_tag)
+          field = fragment.at("input,select,textarea")
+
+          model = instance_tag.object
+          error_message = model.errors.full_messages.join(", ")
+
+          html = if field
+            field["class"] = "#{field["class"]} invalid"
+            html = <<-HTML
+                      #{fragment}
+                      <p class="error">#{error_message}</p>
+            HTML
+            html
+          else
+            html_tag
+          end
+
+          html.html_safe # rubocop:disable Rails/OutputSafety
+        end
+
+        Ariadne::ViewComponents.tailwind_merger = TailwindMerge::Merger.new
       end
     end
   end

data/lib/ariadne/view_components/version.rb

@@ -2,6 +2,6 @@
 
 module Ariadne
   module ViewComponents
-    VERSION = "0.0.6"
+    VERSION = "0.0.7"
   end
 end

data/lib/ariadne/view_components.rb

@@ -1,6 +1,5 @@
 # frozen_string_literal: true
 
-require "ariadne/classify"
 require "ariadne/view_components/version"
 require "ariadne/view_components/engine"
 require "ariadne/view_components/constants"

data/lib/rubocop/config/default.yml

@@ -4,11 +4,5 @@ require:
 AllCops:
   DisabledByDefault: true
 
-Ariadne/SystemArgumentInsteadOfClass:
-  Enabled: true
-
 Ariadne/NoTagMemoize:
-  Enabled: false
-
-Ariadne/AriadneHeroicon:
   Enabled: true

data/lib/rubocop/cop/ariadne/no_tag_memoize.rb

@@ -16,6 +16,7 @@ module RuboCop
       #
       # good
       # @attributes[:tag] = :h2
+      # TODO: TEST THIS
       class NoTagMemoize < RuboCop::Cop::Cop
         INVALID_MESSAGE = <<~STR
           Avoid `[:tag] ||=`. Instead, try one of the following:

data/lib/tasks/docs.rake

@@ -47,7 +47,7 @@ namespace :docs do
     # Rails controller for rendering arbitrary ERB
     view_context = ApplicationController.new.tap { |c| c.request = ActionDispatch::TestRequest.create }.view_context
     components = [
-      Ariadne::FlexComponent,
+      Ariadne::RichTextAreaComponent,
       Ariadne::CommentComponent,
       Ariadne::BodyComponent,
       Ariadne::BlankslateComponent,
@@ -58,6 +58,7 @@ namespace :docs do
       Ariadne::CounterComponent,
       Ariadne::GridComponent,
       Ariadne::FlashComponent,
+      Ariadne::FlexComponent,
       Ariadne::FooterComponent,
       Ariadne::HeaderComponent,
       Ariadne::HeadingComponent,
@@ -67,8 +68,12 @@ namespace :docs do
       Ariadne::LinkComponent,
       Ariadne::ListComponent,
       Ariadne::MainComponent,
+      Ariadne::NarrowContainerComponent,
+      Ariadne::PanelBarComponent,
       Ariadne::PillComponent,
       Ariadne::SlideoverComponent,
+      Ariadne::TabComponent,
+      Ariadne::TabBarComponent,
       Ariadne::Text,
       Ariadne::TimeAgoComponent,
       Ariadne::TimelineComponent,

data/static/arguments.yml

@@ -62,7 +62,7 @@
   - name: scheme
     type: Symbol
     default: "`:default`"
-    description: One of `:danger`, `:default`, `:info`, `:success`, or `:warning`.
+    description: One of `:danger`, `:default`, `:info`, `:none`, `:success`, or `:warning`.
   - name: size
     type: Symbol
     default: "`BaseButton::DEFAULT_SIZE`"
@@ -110,10 +110,18 @@
 - component: Comment
   source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/comment_component.rb
   parameters:
-  - name: action
+  - name: url
+    type: String
+    default: N/A
+    description: The URL to take action against.
+  - name: method
+    type: String
+    default: N/A
+    description: The method to use when submitting the form.
+  - name: sr_label
     type: String
     default: N/A
-    description: The action to take when the form is submitted.
+    description: A label to introduce these tabs for screen readers.
   - name: classes
     type: String
     default: '`""`'
@@ -282,7 +290,7 @@
   - name: variant
     type: String
     default: N/A
-    description: One of `outline` and `solid`.
+    description: One of `outline`, `solid`, or `mini`.
   - name: size
     type: Symbol
     default: "`:sm`"
@@ -386,6 +394,32 @@
     type: Hash
     default: "`{}`"
     description: "[Classes and attributes](/classes-attributes)"
+- component: NarrowContainer
+  source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/narrow_container_component.rb
+  parameters:
+  - name: classes
+    type: String
+    default: '`""`'
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: attributes
+    type: Hash
+    default: "`{}`"
+    description: "[Classes and attributes](/classes-attributes)"
+- component: PanelBar
+  source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/panel_bar_component.rb
+  parameters:
+  - name: tag
+    type: Symbol, String
+    default: N/A
+    description: The rendered tag name.
+  - name: classes
+    type: String
+    default: '`""`'
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: attributes
+    type: Hash
+    default: "`{}`"
+    description: "[Classes and attributes](/classes-attributes)"
 - component: Pill
   source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/pill_component.rb
   parameters:
@@ -405,6 +439,29 @@
     type: Hash
     default: "`{}`"
     description: "[Classes and attributes](/classes-attributes)"
+- component: RichTextArea
+  source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/rich_text_area_component.rb
+  parameters:
+  - name: name
+    type: Symbol
+    default: N/A
+    description: Identifies the form/param name for this rich text area.
+  - name: sr_label
+    type: String
+    default: N/A
+    description: A label to introduce these tabs for screen readers.
+  - name: has_form
+    type: Boolean
+    default: "`true`"
+    description: Indicates whether this component is wrapped in a form.
+  - name: classes
+    type: String
+    default: '`""`'
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: attributes
+    type: Hash
+    default: "`{}`"
+    description: "[Classes and attributes](/classes-attributes)"
 - component: Slideover
   source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/slideover_component.rb
   parameters:
@@ -436,6 +493,44 @@
     type: Hash
     default: "`{}`"
     description: "[Classes and attributes](/classes-attributes)"
+- component: TabBar
+  source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/tab_bar_component.rb
+  parameters:
+  - name: tag
+    type: Symbol, String
+    default: "`:nav`"
+    description: The rendered tag name.
+  - name: sr_label
+    type: String
+    default: N/A
+    description: A label to introduce these tabs for screen readers.
+  - name: classes
+    type: String
+    default: '`""`'
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: attributes
+    type: Hash
+    default: "`{}`"
+    description: "[Classes and attributes](/classes-attributes)"
+- component: Tab
+  source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/tab_component.rb
+  parameters:
+  - name: tag
+    type: Symbol, String
+    default: "`:button`"
+    description: The rendered tag name.
+  - name: selected
+    type: Boolean
+    default: "`false`"
+    description: Whether the tab is selected or not.
+  - name: classes
+    type: String
+    default: '`""`'
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: attributes
+    type: Hash
+    default: "`{}`"
+    description: "[Classes and attributes](/classes-attributes)"
 - component: Text
   source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/text.rb
   parameters:

data/static/audited_at.json

@@ -13,7 +13,7 @@
   "Ariadne::FlexComponent": "",
   "Ariadne::FooterComponent": "",
   "Ariadne::GridComponent": "",
-  "Ariadne::GridComponent::Item": "",
+  "Ariadne::GridComponent::GridItem": "",
   "Ariadne::HeaderComponent": "",
   "Ariadne::HeadingComponent": "",
   "Ariadne::HeroiconComponent": "",
@@ -21,10 +21,16 @@
   "Ariadne::InlineFlexComponent": "",
   "Ariadne::LinkComponent": "",
   "Ariadne::ListComponent": "",
-  "Ariadne::ListComponent::Item": "",
+  "Ariadne::ListComponent::ListItem": "",
   "Ariadne::MainComponent": "",
+  "Ariadne::NarrowContainerComponent": "",
+  "Ariadne::PanelBarComponent": "",
+  "Ariadne::PanelBarComponent::PanelItem": "",
   "Ariadne::PillComponent": "",
+  "Ariadne::RichTextAreaComponent": "",
   "Ariadne::SlideoverComponent": "",
+  "Ariadne::TabBarComponent": "",
+  "Ariadne::TabComponent": "",
   "Ariadne::Text": "",
   "Ariadne::TimeAgoComponent": "",
   "Ariadne::TimelineComponent": "",