sdr_view_components 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cbfc52ae67fecdff708f4696aaa7092396da6dff749264858c11dbbfbe8a4382
-  data.tar.gz: 32a60c51ecd3fdb27a1ef011ad8fbaee64053f956e66d0d3d42c51fd36801f78
+  metadata.gz: 69a8ea2f413d71c60cab404598d4e5f0b65c4c0bf7b4aa332e657ea4ea3fae61
+  data.tar.gz: db647210ffedcfbec61c8a16602b3a0b25de94faf04c595c5b00dfdafdbd9321
 SHA512:
-  metadata.gz: 0f7f24fc7019c867299b390b5ae6dff1a93fc7b41f66a5075f473b5ebd69061d7cd4f44f92480b6e3337f26ac2683b5b48260580bbc11aa72b9007a910884c11
-  data.tar.gz: bbca5c2fc24924a8df4e40a706140b568502bf4816b3e2a43840614d201c28d849d1e2374febb56d9b4656f4ae6a0d8cd28e13750fcc5c94da0685dc78305161
+  metadata.gz: 1bd2d7d88d402446d0d033ba6d189eb7b211efe4357110244b908a4f603a4824e104af724d518d2e8a4b86d243e5a06e37971cdd4b526e2279e54de45e1bb8f9
+  data.tar.gz: 7bd1f0afcc43c17014331278c1e9515c4f4fd2c857ad5f02f5944327ab30074e2885fd8b7017188dd46f8f8b2b0300225e918d53666d1d0e109717bf11c77c55

data/Rakefile

@@ -6,10 +6,36 @@ APP_RAKEFILE = File.expand_path('spec/dummy/Rakefile', __dir__)
 load 'rails/tasks/engine.rake'
 
 require 'bundler/gem_tasks'
-require 'rspec/core/rake_task'
-require 'rubocop/rake_task'
 
-RuboCop::RakeTask.new
-RSpec::Core::RakeTask.new(:spec)
+begin
+  require 'rubocop/rake_task'
+  RuboCop::RakeTask.new
 
-task default: %i[rubocop spec]
+  desc 'Run erblint against ERB files'
+  task erblint: :environment do
+    puts 'Running ERB linter...'
+    sh('bin/erb_lint --lint-all --format compact')
+  end
+
+  desc 'Run linter against style files'
+  task stylelint: :environment do
+    puts 'Running style linter...'
+    sh('yarn run stylelint')
+  end
+
+  desc 'Run herb against ERB files'
+  task herb: :environment do
+    puts 'Running ERB linter...'
+    sh('bin/herb analyze app --no-timing --non-interactive')
+  end
+
+  desc 'Run all configured linters'
+  task lint: %i[rubocop erblint herb]
+
+  # clear the default task injected by rspec
+  task(:default).clear
+
+  task default: %i[lint spec] # rubocop:disable Rake/DuplicateTask
+rescue LoadError
+  # should only be here when gem group development and test aren't installed
+end

data/app/assets/sdr_view_components.css

@@ -67,7 +67,7 @@
 }
 
 .nav-underline .nav-link:not(.active) {
-  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
+  color: rgb(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
 }
 
 .nav-underline .nav-link.active {
@@ -108,3 +108,11 @@ table.table-data th {
   width: fit-content;
   white-space: nowrap;
 }
+
+/* Radio buttons */
+
+/* Inputs / labels are rendered in the opposite order than BS styles expect. */
+.form-check-label:has(+ .form-check-input:disabled), .form-check-label:has(+ .form-check-input[disabled]) {
+	cursor: default;
+	opacity: .5;
+}

data/app/components/sdr_view_components/elements/toast_component.html.erb

@@ -2,13 +2,11 @@
   class="toast align-items-center show"
   role="alert"
   aria-live="assertive"
-  aria-atomic="true"
->
+  aria-atomic="true">
   <%= tag.div class: toast_body_classes do %>
     <div class="d-flex">
       <div
-        class="bi bi-exclamation-circle-fill fs-3 me-3 align-self-center d-flex justify-content-center"
-      ></div>
+        class="bi bi-exclamation-circle-fill fs-3 me-3 align-self-center d-flex justify-content-center"></div>
       <div>
         <div class="fw-semibold"><%= title %> </div>
         <% if text.present? %>
@@ -19,8 +17,7 @@
         <% if close_text.present? %>
           <button
             type="button"
-            class="btn btn-text text-uppercase text-white"
-          >
+            class="btn btn-text text-uppercase text-white">
             <%= close_text %>
           </button>
         <% end %>
@@ -28,8 +25,7 @@
           type="button"
           class="btn btn-close btn-close-white"
           aria-label="Close"
-          data-bs-dismiss="toast"
-        ></button>
+          data-bs-dismiss="toast"></button>
       </div>
     </div>
   <% end %>

data/app/components/sdr_view_components/forms/basic_select_field_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    # Component for form select field
+    class BasicSelectFieldComponent < BasicComponent
+      def initialize(form:, field_name:, options:, prompt: false, classes: [], **args) # rubocop:disable Metrics/ParameterLists
+        @options = options
+        @prompt = prompt
+        super(form:, field_name:, classes:, **args)
+      end
+
+      attr_reader :options, :prompt
+
+      def call
+        form.select field_name, options, { prompt: }, { class: classes, **args }
+      end
+
+      def classes
+        merge_classes('form-select', @classes)
+      end
+    end
+  end
+end

data/app/components/sdr_view_components/forms/select_field_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Forms
+    # Component for form select fields
+    class SelectFieldComponent < FieldComponent
+      def initialize(options:, prompt: false, **)
+        @options = options
+        @prompt = prompt
+        super(**)
+      end
+
+      attr_reader :options, :prompt
+
+      def input_component
+        SdrViewComponents::Forms::BasicSelectFieldComponent.new(form:, field_name:, options:, prompt:, **input_args)
+      end
+    end
+  end
+end

data/app/components/sdr_view_components/forms/toggle_component.html.erb

@@ -1,4 +1,4 @@
-<%= tag.div **container_args do %>
+<%= tag.div(**container_args) do %>
   <div class="d-flex"> <%# Aligns label and tooltip %>
     <%= render SdrViewComponents::Forms::LabelComponent.new(form:, field_name:, **label_args) %>
   </div>

data/app/components/sdr_view_components/forms/toggle_option_component.html.erb

@@ -1,2 +1,2 @@
 <%= form.radio_button field_name, value, type: 'radio', class: 'btn-check', data: %>
-<%= form.label field_name, label, value:, class: label_classes %>
+<%= form.label(field_name, label, value:, class: label_classes) %>

data/app/components/sdr_view_components/tables/row_component.html.erb

@@ -1,4 +1,4 @@
-<%= tag.tr **row_options do %>
+<%= tag.tr(**row_options) do %>
   <% if label.present? || label_content.present? %>
     <th class="col-3" scope="row">
       <%= label || label_content %>

data/app/views/layouts/lookbook.html.erb

@@ -27,8 +27,7 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css"
->
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
     <%= tag.link rel: 'icon', href: "#{SdrViewComponents.configuration.component_library_url}/styles/icon.png", type: 'image/png' %>
     <%= tag.link rel: 'icon', href: "#{SdrViewComponents.configuration.component_library_url}/styles/icon.svg", type: 'image/svg+xml' %>
     <%= tag.link rel: 'apple-touch-icon', href: "#{SdrViewComponents.configuration.component_library_url}/styles/icon.png" %>

data/lib/sdr_view_components/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module SdrViewComponents
-  VERSION = '0.2.0'
+  VERSION = '0.3.0'
 end

data/spec/components/previews/sdr_view_components/elements/alert_component_preview.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    class AlertComponentPreview < ViewComponent::Preview
+      # @!group Variants
+      def default
+        render SdrViewComponents::Elements::AlertComponent.new(title: 'Information', variant: :info) do
+          'This is an informational alert.'
+        end
+      end
+
+      def danger
+        render SdrViewComponents::Elements::AlertComponent.new(title: 'Error', variant: :danger) do
+          'This is a danger alert.'
+        end
+      end
+
+      def success
+        render SdrViewComponents::Elements::AlertComponent.new(title: 'Success', variant: :success) do
+          'This is a success alert.'
+        end
+      end
+
+      def note
+        render SdrViewComponents::Elements::AlertComponent.new(title: 'Note', variant: :note) do
+          'This is a note alert.'
+        end
+      end
+
+      def warning
+        render SdrViewComponents::Elements::AlertComponent.new(title: 'Warning', variant: :warning) do
+          'This is a warning alert.'
+        end
+      end
+
+      def input
+        render SdrViewComponents::Elements::AlertComponent.new(title: 'Input Required', variant: :input) do
+          'This is an input validation alert.'
+        end
+      end
+      # @!endgroup
+
+      def with_title_only
+        render SdrViewComponents::Elements::AlertComponent.new(title: 'Alert Title Only') do
+          'Content goes here.'
+        end
+      end
+
+      def dismissible_alert
+        render SdrViewComponents::Elements::AlertComponent.new(title: 'Dismissible Alert', dismissible: true) do
+          'Click the X button to dismiss this alert.'
+        end
+      end
+
+      # @!group Content Options
+      def with_text_property
+        render SdrViewComponents::Elements::AlertComponent
+          .new(title: 'Using Text Property',
+               text: 'This alert uses the text parameter instead of block content.')
+      end
+
+      def with_block_content
+        render SdrViewComponents::Elements::AlertComponent.new(title: 'Using Block Content') do
+          'This alert uses block content, which can include HTML or other components.'
+        end
+      end
+      # @!endgroup
+    end
+  end
+end

data/spec/components/previews/sdr_view_components/elements/banner_component_preview.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    class BannerComponentPreview < ViewComponent::Preview
+      # @!group Variants
+      def default
+        render SdrViewComponents::Elements::BannerComponent.new do |component|
+          component.with_header { 'Welcome to the Banner Component' }
+        end
+      end
+
+      def note
+        render SdrViewComponents::Elements::BannerComponent.new(variant: :note) do |component|
+          component.with_header { 'Note: Important Information' }
+        end
+      end
+
+      def success
+        render SdrViewComponents::Elements::BannerComponent.new(variant: :success) do |component|
+          component.with_header { 'Success: Action Completed' }
+        end
+      end
+
+      def warning
+        render SdrViewComponents::Elements::BannerComponent.new(variant: :warning) do |component|
+          component.with_header { 'Warning: Please Review' }
+        end
+      end
+
+      def info
+        render SdrViewComponents::Elements::BannerComponent.new(variant: :info) do |component|
+          component.with_header { 'Information: For Your Reference' }
+        end
+      end
+
+      def danger
+        render SdrViewComponents::Elements::BannerComponent.new(variant: :danger) do |component|
+          component.with_header { 'Danger: Critical Alert' }
+        end
+      end
+      # @!endgroup
+
+      def with_title
+        render SdrViewComponents::Elements::BannerComponent.new(title: 'Subtitle or Additional Title') do |component|
+          component.with_header { 'Main Header' }
+        end
+      end
+
+      def with_header_and_body
+        render SdrViewComponents::Elements::BannerComponent.new do |component|
+          component.with_header { 'Banner Header' }
+          component.with_body { 'This is the body content of the banner, providing additional context or details.' }
+        end
+      end
+    end
+  end
+end

data/spec/components/previews/sdr_view_components/elements/breadcrumb_nav_component_preview.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    class BreadcrumbNavComponentPreview < ViewComponent::Preview
+      # @!group Breadcrumb Types
+      def default_breadcrumbs
+        render SdrViewComponents::Elements::BreadcrumbNavComponent.new do |component|
+          component.with_breadcrumb(text: 'Home', link: '/')
+          component.with_breadcrumb(text: 'Collections', link: '/collections')
+          component.with_breadcrumb(text: 'Current Page', active: true)
+        end
+      end
+
+      def title_breadcrumbs
+        render SdrViewComponents::Elements::BreadcrumbNavComponent.new do |component|
+          component.with_title_breadcrumb(text: 'Home', link: '/')
+          component.with_title_breadcrumb(text: 'A Very Long Title That Will Be Truncated', link: '/titles')
+          component.with_title_breadcrumb(text: 'Current Title Item', active: true)
+        end
+      end
+
+      def collection_breadcrumbs
+        render SdrViewComponents::Elements::BreadcrumbNavComponent.new do |component|
+          component.with_collection_breadcrumb(text: 'Home', link: '/')
+          component.with_collection_breadcrumb(text: 'Collection Name Truncated', link: '/collections')
+          component.with_collection_breadcrumb(text: 'Item', active: true)
+        end
+      end
+      # @!endgroup
+
+      # @!group With Links and Active State
+      def with_all_links
+        render SdrViewComponents::Elements::BreadcrumbNavComponent.new do |component|
+          component.with_breadcrumb(text: 'Home', link: '/')
+          component.with_breadcrumb(text: 'Section', link: '/section')
+          component.with_breadcrumb(text: 'Subsection', link: '/section/subsection')
+          component.with_breadcrumb(text: 'Current', active: true)
+        end
+      end
+
+      def mixed_active_items
+        render SdrViewComponents::Elements::BreadcrumbNavComponent.new do |component|
+          component.with_breadcrumb(text: 'Home', link: '/')
+          component.with_breadcrumb(text: 'Active Section', active: true)
+          component.with_breadcrumb(text: 'Another Item', link: '/other')
+        end
+      end
+      # @!endgroup
+    end
+  end
+end

data/spec/components/previews/sdr_view_components/elements/button_component_preview.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    class ButtonComponentPreview < ViewComponent::Preview
+      # @!group Button Variants
+      def primary
+        render SdrViewComponents::Elements::ButtonComponent.new(label: 'Primary', variant: 'primary')
+      end
+
+      def secondary
+        render SdrViewComponents::Elements::ButtonComponent.new(label: 'Secondary', variant: 'secondary')
+      end
+
+      def success
+        render SdrViewComponents::Elements::ButtonComponent.new(label: 'Success', variant: 'success')
+      end
+
+      def danger
+        render SdrViewComponents::Elements::ButtonComponent.new(label: 'Danger', variant: 'danger')
+      end
+
+      def warning
+        render SdrViewComponents::Elements::ButtonComponent.new(label: 'Warning', variant: 'warning')
+      end
+
+      def info
+        render SdrViewComponents::Elements::ButtonComponent.new(label: 'Info', variant: 'info')
+      end
+      # @!endgroup
+
+      # @!group Button Sizes
+      def small
+        render SdrViewComponents::Elements::ButtonComponent.new(label: 'Small Button', variant: 'primary', size: 'sm')
+      end
+
+      def large
+        render SdrViewComponents::Elements::ButtonComponent.new(label: 'Large Button', variant: 'primary', size: 'lg')
+      end
+      # @!endgroup
+
+      # @!group Borderless
+      def borderless
+        render SdrViewComponents::Elements::ButtonComponent.new(label: 'Borderless Button', variant: 'primary',
+                                                                bordered: false)
+      end
+
+      def borderless_secondary
+        render SdrViewComponents::Elements::ButtonComponent.new(label: 'Borderless Secondary', variant: 'secondary',
+                                                                bordered: false)
+      end
+      # @!endgroup
+
+      # @!group Content Options
+      def with_label
+        render SdrViewComponents::Elements::ButtonComponent.new(label: 'Button with Label', variant: 'primary')
+      end
+
+      def with_block_content
+        render SdrViewComponents::Elements::ButtonComponent.new(variant: 'primary') do
+          'Button with Block Content'
+        end
+      end
+      # @!endgroup
+
+      def default
+        render SdrViewComponents::Elements::ButtonComponent.new(label: 'Default Button')
+      end
+    end
+  end
+end

data/spec/components/previews/sdr_view_components/elements/button_form_component_preview.rb

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    class ButtonFormComponentPreview < ViewComponent::Preview
+      # @!group Button Variants
+      def primary
+        render SdrViewComponents::Elements::ButtonFormComponent.new(link: '/action', label: 'Primary Form Button',
+                                                                    variant: :primary)
+      end
+
+      def secondary
+        render SdrViewComponents::Elements::ButtonFormComponent.new(link: '/action', label: 'Secondary Form Button',
+                                                                    variant: :secondary)
+      end
+
+      def success
+        render SdrViewComponents::Elements::ButtonFormComponent.new(link: '/action', label: 'Success Action',
+                                                                    variant: :success)
+      end
+
+      def danger
+        render SdrViewComponents::Elements::ButtonFormComponent.new(link: '/action', label: 'Delete Item', variant: :danger)
+      end
+
+      def warning
+        render SdrViewComponents::Elements::ButtonFormComponent.new(link: '/action', label: 'Warning Action',
+                                                                    variant: :warning)
+      end
+
+      def info
+        render SdrViewComponents::Elements::ButtonFormComponent.new(link: '/action', label: 'Information Action',
+                                                                    variant: :info)
+      end
+      # @!endgroup
+
+      # @!group With Confirmation
+      def with_confirmation
+        render SdrViewComponents::Elements::ButtonFormComponent.new(
+          link: '/delete-item',
+          label: 'Delete (with confirmation)',
+          variant: :danger,
+          confirm: 'Are you sure you want to delete this item?'
+        )
+      end
+
+      def without_confirmation
+        render SdrViewComponents::Elements::ButtonFormComponent.new(
+          link: '/action',
+          label: 'Action (no confirmation)',
+          variant: :primary
+        )
+      end
+      # @!endgroup
+
+      # @!group Turbo Frame Behavior
+      def turbo_frame_top
+        render SdrViewComponents::Elements::ButtonFormComponent.new(
+          link: '/submit',
+          label: 'Submit (reload top)',
+          variant: :primary,
+          top: true
+        )
+      end
+
+      def turbo_frame_scoped
+        render SdrViewComponents::Elements::ButtonFormComponent.new(
+          link: '/submit',
+          label: 'Submit (scoped frame)',
+          variant: :primary,
+          top: false
+        )
+      end
+      # @!endgroup
+
+      # @!group Content Options
+      def with_label
+        render SdrViewComponents::Elements::ButtonFormComponent.new(
+          link: '/action',
+          label: 'Button with Label',
+          variant: :primary
+        )
+      end
+
+      def with_block_content
+        render SdrViewComponents::Elements::ButtonFormComponent.new(link: '/action', variant: :primary) do
+          'Button with Block Content'
+        end
+      end
+      # @!endgroup
+
+      def default
+        render SdrViewComponents::Elements::ButtonFormComponent.new(link: '/', label: 'Form Button')
+      end
+    end
+  end
+end

data/spec/components/previews/sdr_view_components/elements/button_link_component_preview.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    class ButtonLinkComponentPreview < ViewComponent::Preview
+      # @!group Button Variants
+      def primary
+        render SdrViewComponents::Elements::ButtonLinkComponent.new(link: '/example', label: 'Primary Link Button',
+                                                                    variant: :primary)
+      end
+
+      def secondary
+        render SdrViewComponents::Elements::ButtonLinkComponent.new(link: '/example', label: 'Secondary Link Button',
+                                                                    variant: :secondary)
+      end
+
+      def success
+        render SdrViewComponents::Elements::ButtonLinkComponent.new(link: '/example', label: 'Success Link Button',
+                                                                    variant: :success)
+      end
+
+      def danger
+        render SdrViewComponents::Elements::ButtonLinkComponent.new(link: '/example', label: 'Danger Link Button',
+                                                                    variant: :danger)
+      end
+
+      def warning
+        render SdrViewComponents::Elements::ButtonLinkComponent.new(link: '/example', label: 'Warning Link Button',
+                                                                    variant: :warning)
+      end
+
+      def info
+        render SdrViewComponents::Elements::ButtonLinkComponent.new(link: '/example', label: 'Info Link Button',
+                                                                    variant: :info)
+      end
+      # @!endgroup
+
+      # @!group Button Sizes
+      def small
+        render SdrViewComponents::Elements::ButtonLinkComponent.new(link: '/example', label: 'Small Link Button',
+                                                                    variant: :primary, size: 'sm')
+      end
+
+      def large
+        render SdrViewComponents::Elements::ButtonLinkComponent.new(link: '/example', label: 'Large Link Button',
+                                                                    variant: :primary, size: 'lg')
+      end
+      # @!endgroup
+
+      # @!group Borderless
+      def borderless
+        render SdrViewComponents::Elements::ButtonLinkComponent.new(link: '/example', label: 'Borderless Link Button',
+                                                                    variant: :primary, bordered: false)
+      end
+
+      def borderless_secondary
+        render SdrViewComponents::Elements::ButtonLinkComponent
+          .new(link: '/example',
+               label: 'Borderless Secondary Link Button', variant: :secondary, bordered: false)
+      end
+      # @!endgroup
+
+      # @!group Content Options
+      def with_label
+        render SdrViewComponents::Elements::ButtonLinkComponent.new(link: '/example', label: 'Label Link Button',
+                                                                    variant: :primary)
+      end
+
+      def with_block_content
+        render SdrViewComponents::Elements::ButtonLinkComponent.new(link: '/example', variant: :primary) do
+          'Link Button with Block Content'
+        end
+      end
+      # @!endgroup
+
+      def default
+        render SdrViewComponents::Elements::ButtonLinkComponent.new(link: '/example', label: 'Default Link Button')
+      end
+    end
+  end
+end

data/spec/components/previews/sdr_view_components/elements/card_component_preview.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module SdrViewComponents
+  module Elements
+    class CardComponentPreview < ViewComponent::Preview
+      # @!group Card Slots
+      def default
+        render SdrViewComponents::Elements::CardComponent.new
+      end
+
+      def with_header
+        render SdrViewComponents::Elements::CardComponent.new do |card|
+          card.with_header do
+            'Card Header'
+          end
+        end
+      end
+
+      def with_body
+        render SdrViewComponents::Elements::CardComponent.new do |card|
+          card.with_body do
+            'Card body content goes here.'
+          end
+        end
+      end
+
+      def with_header_and_body
+        render SdrViewComponents::Elements::CardComponent.new do |card|
+          card.with_header do
+            'Card Header'
+          end
+
+          card.with_body do
+            'Card body content goes here.'
+          end
+        end
+      end
+      # @!endgroup
+    end
+  end
+end