optics_view_components 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3d8a939a59793e3f27065ac5cddadd809131961428f67f06d37e4be3f1e308ee
-  data.tar.gz: d239ad7523f2e891a1659d0d5fc84b27ba01a6c46eef684196171d185bdf52d5
+  metadata.gz: a06b9454efef278cd56ab9a178e0aa4567f01db54119ad83e7d972c5a2fa232f
+  data.tar.gz: 3f0d0d5559526ba23baa50e88a4c84c4a38870e602013db702f1588be94d67e3
 SHA512:
-  metadata.gz: 39847ffae1cc6c7c0d90625f1c247dd78b2037e6862145eb4185f34999c02028651dd44385465c521b40c207cffa8fcc260b0ef14ae4b9b72af0f15544c0c233
-  data.tar.gz: 29b8bb26b211e60be644e7fb9e4548dff55ce39bbe4d1d9cc6aa7385421d08d39b63fbd1dd3e4fb143f46a2d9e703b7741b7f897de3d753c301d8da6bcbd3d9a
+  metadata.gz: 872cb462157bc5b9bcf7e610aafdb91eb2a125c042e7e9049ed38ced9f0750e54e6c8da305c8b568663bea3b3b56b72e0c8902df14758a8cfced1d3baefb8688
+  data.tar.gz: c66b0e6b482134588976015aaabdec6997c763b54460d28215b03cfb31524eda90c2825b4f4488559a84b40707f035191fa1f31450d4fbed449dbb2fad9f7f36

data/.rubocop.yml

@@ -1,3 +1,3 @@
 AllCops:
   NewCops: enable
-  TargetRubyVersion: 2.6
+  TargetRubyVersion: 3.1

data/Gemfile

@@ -5,8 +5,10 @@ source 'https://rubygems.org'
 # Specify your gem's dependencies in optics_view_components.gemspec
 gemspec
 
-gem 'rake', '~> 13.0'
+gem 'rails', '~> 7.0'
 
+gem 'bootsnap', require: false
+gem 'rake', '~> 13.0'
 gem 'rspec', '~> 3.0'
-
 gem 'rubocop', '~> 1.21'
+gem 'view_component'

data/Gemfile.lock

@@ -2,16 +2,165 @@ PATH
   remote: .
   specs:
     optics_view_components (0.1.0)
+      view_component (> 2.0, < 4.0)
 
 GEM
   remote: https://rubygems.org/
   specs:
+    actioncable (7.0.4.3)
+      actionpack (= 7.0.4.3)
+      activesupport (= 7.0.4.3)
+      nio4r (~> 2.0)
+      websocket-driver (>= 0.6.1)
+    actionmailbox (7.0.4.3)
+      actionpack (= 7.0.4.3)
+      activejob (= 7.0.4.3)
+      activerecord (= 7.0.4.3)
+      activestorage (= 7.0.4.3)
+      activesupport (= 7.0.4.3)
+      mail (>= 2.7.1)
+      net-imap
+      net-pop
+      net-smtp
+    actionmailer (7.0.4.3)
+      actionpack (= 7.0.4.3)
+      actionview (= 7.0.4.3)
+      activejob (= 7.0.4.3)
+      activesupport (= 7.0.4.3)
+      mail (~> 2.5, >= 2.5.4)
+      net-imap
+      net-pop
+      net-smtp
+      rails-dom-testing (~> 2.0)
+    actionpack (7.0.4.3)
+      actionview (= 7.0.4.3)
+      activesupport (= 7.0.4.3)
+      rack (~> 2.0, >= 2.2.0)
+      rack-test (>= 0.6.3)
+      rails-dom-testing (~> 2.0)
+      rails-html-sanitizer (~> 1.0, >= 1.2.0)
+    actiontext (7.0.4.3)
+      actionpack (= 7.0.4.3)
+      activerecord (= 7.0.4.3)
+      activestorage (= 7.0.4.3)
+      activesupport (= 7.0.4.3)
+      globalid (>= 0.6.0)
+      nokogiri (>= 1.8.5)
+    actionview (7.0.4.3)
+      activesupport (= 7.0.4.3)
+      builder (~> 3.1)
+      erubi (~> 1.4)
+      rails-dom-testing (~> 2.0)
+      rails-html-sanitizer (~> 1.1, >= 1.2.0)
+    activejob (7.0.4.3)
+      activesupport (= 7.0.4.3)
+      globalid (>= 0.3.6)
+    activemodel (7.0.4.3)
+      activesupport (= 7.0.4.3)
+    activerecord (7.0.4.3)
+      activemodel (= 7.0.4.3)
+      activesupport (= 7.0.4.3)
+    activestorage (7.0.4.3)
+      actionpack (= 7.0.4.3)
+      activejob (= 7.0.4.3)
+      activerecord (= 7.0.4.3)
+      activesupport (= 7.0.4.3)
+      marcel (~> 1.0)
+      mini_mime (>= 1.1.0)
+    activesupport (7.0.4.3)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (>= 1.6, < 2)
+      minitest (>= 5.1)
+      tzinfo (~> 2.0)
+    addressable (2.8.4)
+      public_suffix (>= 2.0.2, < 6.0)
     ast (2.4.2)
+    bootsnap (1.16.0)
+      msgpack (~> 1.2)
+    builder (3.2.4)
+    capybara (3.39.1)
+      addressable
+      matrix
+      mini_mime (>= 0.1.3)
+      nokogiri (~> 1.8)
+      rack (>= 1.6.0)
+      rack-test (>= 0.6.3)
+      regexp_parser (>= 1.5, < 3.0)
+      xpath (~> 3.2)
+    coderay (1.1.3)
+    concurrent-ruby (1.2.2)
+    crass (1.0.6)
+    date (3.3.3)
     diff-lcs (1.5.0)
+    erubi (1.12.0)
+    globalid (1.1.0)
+      activesupport (>= 5.0)
+    i18n (1.13.0)
+      concurrent-ruby (~> 1.0)
     json (2.6.3)
+    loofah (2.21.3)
+      crass (~> 1.0.2)
+      nokogiri (>= 1.12.0)
+    mail (2.8.1)
+      mini_mime (>= 0.1.1)
+      net-imap
+      net-pop
+      net-smtp
+    marcel (1.0.2)
+    matrix (0.4.2)
+    method_source (1.0.0)
+    mini_mime (1.1.2)
+    minitest (5.18.0)
+    msgpack (1.7.1)
+    net-imap (0.3.4)
+      date
+      net-protocol
+    net-pop (0.1.2)
+      net-protocol
+    net-protocol (0.2.1)
+      timeout
+    net-smtp (0.3.3)
+      net-protocol
+    nio4r (2.5.9)
+    nokogiri (1.15.1-x86_64-linux)
+      racc (~> 1.4)
     parallel (1.23.0)
     parser (3.2.2.1)
       ast (~> 2.4.1)
+    pry (0.14.2)
+      coderay (~> 1.1)
+      method_source (~> 1.0)
+    public_suffix (5.0.1)
+    racc (1.6.2)
+    rack (2.2.7)
+    rack-test (2.1.0)
+      rack (>= 1.3)
+    rails (7.0.4.3)
+      actioncable (= 7.0.4.3)
+      actionmailbox (= 7.0.4.3)
+      actionmailer (= 7.0.4.3)
+      actionpack (= 7.0.4.3)
+      actiontext (= 7.0.4.3)
+      actionview (= 7.0.4.3)
+      activejob (= 7.0.4.3)
+      activemodel (= 7.0.4.3)
+      activerecord (= 7.0.4.3)
+      activestorage (= 7.0.4.3)
+      activesupport (= 7.0.4.3)
+      bundler (>= 1.15.0)
+      railties (= 7.0.4.3)
+    rails-dom-testing (2.0.3)
+      activesupport (>= 4.2.0)
+      nokogiri (>= 1.6)
+    rails-html-sanitizer (1.5.0)
+      loofah (~> 2.19, >= 2.19.1)
+    railties (7.0.4.3)
+      actionpack (= 7.0.4.3)
+      activesupport (= 7.0.4.3)
+      method_source
+      rake (>= 12.2)
+      thor (~> 1.0)
+      zeitwerk (~> 2.5)
     rainbow (3.1.1)
     rake (13.0.6)
     regexp_parser (2.8.0)
@@ -28,6 +177,14 @@ GEM
     rspec-mocks (3.12.5)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.12.0)
+    rspec-rails (6.0.2)
+      actionpack (>= 6.1)
+      activesupport (>= 6.1)
+      railties (>= 6.1)
+      rspec-core (~> 3.12)
+      rspec-expectations (~> 3.12)
+      rspec-mocks (~> 3.12)
+      rspec-support (~> 3.12)
     rspec-support (3.12.0)
     rubocop (1.51.0)
       json (~> 2.3)
@@ -42,16 +199,45 @@ GEM
     rubocop-ast (1.28.1)
       parser (>= 3.2.1.0)
     ruby-progressbar (1.13.0)
+    sprockets (4.2.0)
+      concurrent-ruby (~> 1.0)
+      rack (>= 2.2.4, < 4)
+    sprockets-rails (3.4.2)
+      actionpack (>= 5.2)
+      activesupport (>= 5.2)
+      sprockets (>= 3.0.0)
+    thor (1.2.2)
+    timeout (0.3.2)
+    tzinfo (2.0.6)
+      concurrent-ruby (~> 1.0)
     unicode-display_width (2.4.2)
+    view_component (3.0.0)
+      activesupport (>= 5.2.0, < 8.0)
+      concurrent-ruby (~> 1.0)
+      method_source (~> 1.0)
+    websocket-driver (0.7.5)
+      websocket-extensions (>= 0.1.0)
+    websocket-extensions (0.1.5)
+    xpath (3.2.0)
+      nokogiri (~> 1.8)
+    zeitwerk (2.6.8)
 
 PLATFORMS
   x86_64-linux
 
 DEPENDENCIES
+  bootsnap
+  capybara
   optics_view_components!
+  pry
+  rails (~> 7.0)
   rake (~> 13.0)
   rspec (~> 3.0)
+  rspec-rails
   rubocop (~> 1.21)
+  sprockets
+  sprockets-rails
+  view_component
 
 BUNDLED WITH
    2.4.10

data/app/components/optics/application_view_component.rb

@@ -0,0 +1,113 @@
+# frozen_string_literal: true
+
+class Optics::ApplicationViewComponent < ViewComponent::Base
+  class_attribute :optional_attributes, default: {}
+  class_attribute :required_attributes, default: {}
+
+  class << self
+    # To allow DB queries, put this in the class definition:
+    # self.allow_db_queries = true
+    attr_accessor :allow_db_queries
+    alias allow_db_queries? allow_db_queries
+
+    def requires(parameter, default: nil)
+      required_attributes[parameter] = default
+
+      attr_reader parameter
+    end
+
+    def accepts(parameter, default: nil)
+      optional_attributes[parameter] = default
+
+      attr_reader parameter
+    end
+
+    def inherited(subclass)
+      subclass.optional_attributes = optional_attributes.dup
+      subclass.required_attributes = required_attributes.dup
+      super
+    end
+  end
+
+  def initialize(**attributes)
+    initialize_instance_variables(required_attributes, attributes) do |key, _default|
+      raise ArgumentError, "Missing keyword: :#{key}"
+    end
+
+    initialize_instance_variables(optional_attributes, attributes) do |key, default|
+      instance_variable_set("@#{key}", default)
+    end
+
+    @attributes = attributes.except(*optional_attributes.keys, *required_attributes.keys)
+  end
+
+  def class_for(name)
+    "c--#{identifier}--#{name}"
+  end
+
+  def container_class
+    "c--#{identifier}"
+  end
+
+  def class_names_for(*args)
+    class_names(*args).map { |name| class_for(name) }.join(' ')
+  end
+
+  # Inspired by https://github.com/primer/view_components/blob/v0.1.9/app/lib/primer/class_name_helper.rb#L9
+  def class_names(*args) # rubocop:disable Metrics/MethodLength
+    [].tap do |classes|
+      args.each do |class_name|
+        case class_name
+        when String
+          classes << class_name
+        when Hash
+          class_name.each do |key, val|
+            classes << key if val
+          end
+        end
+      end
+
+      classes.compact!
+      classes.uniq!
+    end
+  end
+
+  # Used by Stimulus. E.g. data-controller=identifier => data-controller='dynamic-form--field'
+  def identifier
+    @identifier ||= self.class.name.sub('::Component', '').underscore.gsub('_', '-').gsub('/', '--')
+  end
+
+  # Helper for Stimulus data attributes
+  def data_for(method:, target:)
+    data_method(method).merge(data_target(target))
+  end
+
+  # Helper for Stimulus controller method
+  def data_method(method, event: 'click')
+    { action: "#{event}->#{identifier}##{method}" }
+  end
+
+  # Helper for Stimulus controller target
+  def data_target(target)
+    { "#{identifier}": { target: } }
+  end
+
+  # Helper for Stimulus controller value
+  def data_values(values)
+    values.transform_keys do |key|
+      "#{identifier}-#{key}-value"
+    end
+  end
+
+  private
+
+  def initialize_instance_variables(configured_attributes, attributes)
+    configured_attributes.each do |key, default|
+      if attributes.key?(key)
+        instance_variable_set("@#{key}", attributes[key])
+      else
+        yield(key, default)
+      end
+    end
+  end
+end

data/app/components/optics/application_view_component_preview.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class Optics::ApplicationViewComponentPreview < ViewComponent::Preview
+  include ApplicationHelper
+end

data/app/components/optics/button/component.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Optics
+  module Button
+    class Component < ApplicationViewComponent
+      SIZES = %w[small medium large].freeze
+      STYLES = %w[default primary secondary delete].freeze
+
+      renders_one :leading_icon, lambda { |name:, size: 'normal'|
+        Optics::Icon::Component.new(name:, size:)
+      }
+
+      accepts :label
+      accepts :border, default: true
+      accepts :icon, default: false
+      accepts :size, default: 'medium'
+      accepts :variant, default: 'default'
+      accepts :url
+
+      def call
+        build_button do
+          leading_icon
+          label
+        end
+      end
+
+      def build_button(&)
+        return link_to(url, class: classes, **@attributes, &) if url
+
+        tag.button(class: classes, **@attributes, &)
+      end
+
+      def button_class
+        return 'btn' if variant == 'default'
+
+        "btn-#{variant}"
+      end
+
+      def classes
+        class_names(
+          button_class,
+          size_class,
+          'btn--icon': icon,
+          'btn--no-border': !border
+        ).join(' ')
+      end
+
+      def size_class
+        return if size == 'medium'
+
+        "btn--#{size}"
+      end
+    end
+  end
+end

data/app/components/optics/button/preview.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Optics
+  module Button
+    class Preview < ApplicationViewComponentPreview
+      # @param border toggle
+      # @param icon toggle
+      # @param id text
+      # @param label text
+      # @param size select {{ ::Button::Component::SIZES }}
+      # @param variant select {{ ::Button::Component::STYLES }}
+      # @param url text
+      def default( # rubocop:disable Metrics/ParameterLists
+            border: true,
+            icon: false,
+            id: nil,
+            label: 'Default',
+            size: 'normal',
+            variant: 'default',
+            url: nil
+          )
+        render(Button::Component.new(
+                 border:,
+                 icon:,
+                 id:,
+                 label:,
+                 size:,
+                 variant:,
+                 url:,
+               ))
+      end
+    end
+  end
+end

data/app/components/optics/icon/component.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Optics
+  module Icon
+    class Component < ApplicationViewComponent
+      SIZES = %w[normal large x-large].freeze
+      WEIGHTS = %w[light normal semi-bold bold].freeze
+      EMPHASES = %w[low normal high].freeze
+
+      requires :name
+      accepts :data
+      accepts :emphasis, default: 'normal'
+      accepts :filled, default: false
+      accepts :size, default: 'normal'
+      accepts :title
+      accepts :weight, default: 'normal'
+
+      def call
+        content_tag(
+          :span,
+          class: classes,
+          'aria-label': title,
+          title:,
+          data:
+        ) do
+          name
+        end
+      end
+
+      def classes
+        class_names(
+          'material-symbols-outlined',
+          size_class,
+          weight_class,
+          emphasis_class,
+          'icon--filled': filled
+        ).join(' ')
+      end
+
+      def size_class
+        return if size == 'normal'
+
+        "icon--#{size}"
+      end
+
+      def weight_class
+        return if weight == 'normal'
+
+        "icon--weight-#{weight}"
+      end
+
+      def emphasis_class
+        return if emphasis == 'normal'
+
+        "icon--#{emphasis}-emphasis"
+      end
+    end
+  end
+end

data/app/components/optics/icon/preview.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Icon
+  class Preview < ViewComponent::Preview
+    # @param emphasis select {{ ::Icon::Component::EMPHASES }}
+    # @param filled toggle
+    # @param name
+    # @param size select {{ ::Icon::Component::SIZES }}
+    # @param title
+    # @param weight select {{ ::Icon::Component::WEIGHTS }}
+    def default( # rubocop:disable Metrics/ParameterLists
+      emphasis: 'normal',
+      filled: false,
+      name: 'settings',
+      size: 'normal',
+      title: nil,
+      weight: 'normal'
+    )
+      render(
+        Icon::Component.new(
+          emphasis:,
+          filled:,
+          name:,
+          size:,
+          title:,
+          weight:
+        )
+      )
+    end
+  end
+end

data/demo/.ruby-version

@@ -0,0 +1 @@
+3.2.2

data/demo/Gemfile

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+source 'https://rubygems.org'
+
+gem 'rails', '~> 7.0.4', '>= 7.0.4.3'
+
+gem 'bootsnap', require: false
+gem 'cssbundling-rails', '~> 1.1'
+gem 'puma', '~> 6.0'
+gem 'sprockets-rails'
+
+gem 'optics_view_components', path: '../'
+
+group :development, :test do
+  gem 'debug', platforms: %i[mri mingw x64_mingw]
+end
+
+group :development do
+  gem 'web-console'
+end
+