optics_view_components 0.1.7 → 0.1.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5194f25da267f185510137dd9cb5cda150d6da2ea4bea6dcdbe2353360b460ba
-  data.tar.gz: c856c408ca950243a0b00bf080c93c8a1d182f7a1bcb87df35084522c82c78d4
+  metadata.gz: 6288af3ac32f24e288467c22bea1cac3ced752a18d7cd7ff817cc927b57f3c06
+  data.tar.gz: 9cb97927ebe42807ae5990d3bc5eda34ace45842569d744994cdab0a726e8ee6
 SHA512:
-  metadata.gz: 87d76b46feb1fed4772bd7e6ca8efd36e1c3bb38cae8fb94325f676dfef1e38bb8b6ec9a897010d72dd7d154dd6638ce961e2a6245c45be0a170a8c036276fb9
-  data.tar.gz: fafd24dd4f8738e53b012a0a82ce10b4a2c6e35c7ccbaa872316055641260d2c62c09cfbc8ce8e87c63578ea37566c23544fd4d06d57cf54c561e866958fa148
+  metadata.gz: 82352039a648222ccb8721c529569cd7b1adbdc416b6e86d34c1ee611f724a9b6170f4b70843edbc3d4677af59509f1d1dfa870fc2e2b58bfc2af0991aef4661
+  data.tar.gz: 9295d7c6b41b3148bb14bd1ce9569686c90fc9d246c48ac083952feb4b43064b7e73aad9ad8eb003fbc5add4808035c8ff278bccc40b33bddcab90f83f877dc1

data/Gemfile

@@ -9,6 +9,8 @@ gem 'rails', '~> 7.0'
 
 gem 'bootsnap', require: false
 gem 'lookbook'
+gem 'puma', '~> 6.3'
+gem 'sprockets-rails'
 gem 'rake', '~> 13.0'
 gem 'rspec', '~> 3.0'
 gem 'rubocop', '~> 1.21'

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    optics_view_components (0.1.3)
+    optics_view_components (0.1.8)
       view_component (> 2.0, < 4.0)
 
 GEM
@@ -138,6 +138,8 @@ GEM
     net-smtp (0.3.3)
       net-protocol
     nio4r (2.5.9)
+    nokogiri (1.15.1-arm64-darwin)
+      racc (~> 1.4)
     nokogiri (1.15.1-x86_64-linux)
       racc (~> 1.4)
     parallel (1.23.0)
@@ -147,6 +149,8 @@ GEM
       coderay (~> 1.1)
       method_source (~> 1.0)
     public_suffix (5.0.1)
+    puma (6.3.1)
+      nio4r (~> 2.0)
     racc (1.6.2)
     rack (2.2.7)
     rack-test (2.1.0)
@@ -242,6 +246,7 @@ GEM
     zeitwerk (2.6.8)
 
 PLATFORMS
+  arm64-darwin-21
   x86_64-linux
 
 DEPENDENCIES
@@ -250,6 +255,7 @@ DEPENDENCIES
   lookbook
   optics_view_components!
   pry
+  puma (~> 6.3)
   rails (~> 7.0)
   rake (~> 13.0)
   rspec (~> 3.0)

data/Procfile

@@ -0,0 +1 @@
+web: bundle exec rackup -p ${PORT:-5000} config.ru

data/README.md

@@ -38,6 +38,18 @@ Add to `config/application.rb`:
     config.view_component.preview_paths << Optics::ViewComponents::Engine.root.join('previews')
 ```
 
+If you need a custom layout add:
+```
+    config.view_component.default_preview_layout = 'preview'
+```
+
+To use the shorthand `component 'optics/icon'` syntax, add this to `app/helpers/application_helper.rb`:
+```
+  def component(name, *args, **kwargs, &)
+    render(name.camelize.constantize::Component.new(*args, **kwargs), &)
+  end
+```
+
 ## Development
 
 After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.

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

@@ -6,30 +6,27 @@ module Optics
       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 :active, default: false
       accepts :border, default: true
+      accepts :disabled, default: false
       accepts :icon, default: false
+      accepts :icon_with_label, default: false
+      accepts :pill, default: false
       accepts :size, default: 'medium'
       accepts :variant, default: 'default'
       accepts :url
 
       def call
         build_button do
-          capture do
-            concat leading_icon
-            concat label
-          end
+          content || label
         end
       end
 
       def build_button(&)
-        return link_to(url, class: classes, **@attributes.except(:class), &) if url
+        return link_to(url, class: classes, **@attributes.except(:class), &) if url && !disabled
 
-        tag.button(class: classes, **@attributes.except(:class), &)
+        tag.button(class: classes, disabled:, **@attributes.except(:class), &)
       end
 
       def button_class
@@ -43,8 +40,12 @@ module Optics
           @attributes[:class],
           button_class,
           size_class,
+          'btn--active': active,
+          'btn--disabled': disabled,
           'btn--icon': icon,
-          'btn--no-border': !border
+          'btn--icon-with-label': icon_with_label,
+          'btn--no-border': !border,
+          'btn--pill': pill
         ).join(' ')
       end
 

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

@@ -3,7 +3,7 @@
 module Optics
   module Sidebar
     class Component < ApplicationViewComponent
-      VARIANTS = %w[drawer compact rail]
+      VARIANTS = %w[drawer compact rail].freeze
 
       renders_one :brand, 'Brand'
       renders_many :sidebar_contents, 'SidebarContent'
@@ -41,36 +41,29 @@ module Optics
       class Brand < ApplicationViewComponent
         accepts :url
         accepts :image_source
+        accepts :image_label
+        accepts :name
 
         def call
           link_to(url, class: 'sidebar__brand') do
-            image_tag(image_source)
+            name || image_tag(image_source, alt: image_label)
           end
         end
       end
 
       class SidebarContent < ApplicationViewComponent
-        renders_many :buttons, Optics::Button::Component
-
         accepts :position, default: 'center'
-        
+
         def call
-          concat(
-            content_tag(
-              :div,
-              class: classes
-            ) do
-            buttons.each do |button|
-              concat button
-            end
+          content_tag(:div, class: classes) do
+            content
           end
-          )
         end
 
         def classes
           class_names(
             'sidebar__content',
-            position_class,
+            position_class
           ).join(' ')
         end
 
@@ -80,12 +73,12 @@ module Optics
       end
 
       class LinksComponent < ApplicationViewComponent
-        accepts :image_source
+        accepts :img_src
         accepts :url
 
         def call
           link_to(url, class: 'sidebar__brand') do
-            image_tag(image_source)
+            image_tag(img_src)
           end
         end
       end

data/config.ru

@@ -0,0 +1,3 @@
+require './demo/config/environment'
+run Demo::Application
+

data/demo/Gemfile

@@ -6,7 +6,7 @@ gem 'rails', '~> 7.0.4', '>= 7.0.4.3'
 
 gem 'bootsnap', require: false
 gem 'cssbundling-rails', '~> 1.1'
-gem 'puma', '~> 6.0'
+gem 'puma', '~> 6.3'
 gem 'sprockets-rails'
 
 gem 'lookbook'

data/demo/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    optics_view_components (0.1.3)
+    optics_view_components (0.1.8)
       view_component (> 2.0, < 4.0)
 
 GEM
@@ -133,10 +133,12 @@ GEM
     net-smtp (0.3.3)
       net-protocol
     nio4r (2.5.9)
-    nokogiri (1.15.1-x86_64-linux)
+    nokogiri (1.15.3-arm64-darwin)
+      racc (~> 1.4)
+    nokogiri (1.15.3-x86_64-linux)
       racc (~> 1.4)
     public_suffix (5.0.1)
-    puma (6.2.2)
+    puma (6.3.1)
       nio4r (~> 2.0)
     racc (1.6.2)
     rack (2.2.7)
@@ -200,6 +202,7 @@ GEM
     zeitwerk (2.6.8)
 
 PLATFORMS
+  arm64-darwin-22
   x86_64-linux
 
 DEPENDENCIES
@@ -208,7 +211,7 @@ DEPENDENCIES
   debug
   lookbook
   optics_view_components!
-  puma (~> 6.0)
+  puma (~> 6.3)
   rails (~> 7.0.4, >= 7.0.4.3)
   sprockets-rails
   web-console

data/demo/app/helpers/application_helper.rb

@@ -1,4 +1,7 @@
 # frozen_string_literal: true
 
 module ApplicationHelper
+  def component(name, *args, **kwargs, &)
+    render(name.camelize.constantize::Component.new(*args, **kwargs), &)
+  end
 end

data/demo/config/application.rb

@@ -25,8 +25,9 @@ module Demo
     config.load_defaults 7.0
 
     config.view_component.default_preview_layout = 'preview'
-    config.view_component.preview_paths << Rails.root.join('..', 'previews')
+    config.view_component.preview_paths = [Optics::ViewComponents::Engine.root.join('previews')]
     config.lookbook.project_name = "Optics ViewComponents v#{Optics::ViewComponents::VERSION}"
     config.lookbook.component_paths = [Optics::ViewComponents::Engine.root.join('app', 'components')]
+    config.view_component.show_previews = true
   end
 end

data/demo/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@rolemodel/optics": "^0.3.1",
-    "sass": "^1.62.1"
+    "@rolemodel/optics": "^0.4.2",
+    "sass": "^1.63.6"
   },
   "scripts": {
     "build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"

data/demo/yarn.lock

@@ -2,25 +2,12 @@
 # yarn lockfile v1
 
 
-"@orchidjs/sifter@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@orchidjs/sifter/-/sifter-1.0.3.tgz#43f42519472282eb632d0a1589184f044d64129b"
-  integrity sha512-zCZbwKegHytfsPm8Amcfh7v/4vHqTAaOu6xFswBYcn8nznBOuseu6COB2ON7ez0tFV0mKL0nRNnCiZZA+lU9/g==
-  dependencies:
-    "@orchidjs/unicode-variants" "^1.0.4"
-
-"@orchidjs/unicode-variants@^1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@orchidjs/unicode-variants/-/unicode-variants-1.0.4.tgz#6d2f812e3b19545bba2d81caffff1204de9a6a58"
-  integrity sha512-NvVBRnZNE+dugiXERFsET1JlKZfM5lJDEpSMilKW4bToYJ7pxf0Zne78xyXB2ny2c2aHfJ6WLnz1AaTNHAmQeQ==
-
-"@rolemodel/optics@^0.3.1":
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/@rolemodel/optics/-/optics-0.3.1.tgz#87a8f3733d8fc3e59d26f3c484e3a308cffd1f54"
-  integrity sha512-/bbYc63WH8Yp/PWJ8jew/O1mYqKYqTIw7ixWViEDt/XM4AG8WYZZV+WUvMBUrff5k8kM6M8ZZVLkmaDple8e/Q==
+"@rolemodel/optics@^0.4.2":
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/@rolemodel/optics/-/optics-0.4.2.tgz#c8cadfa37091a4d97e81f5ff8662af1b74505af5"
+  integrity sha512-yppM7DbMF5AmWQ4g21N5fLufwtmef9pmlTGlLPgUtMgVDBGZmoz0BiRf6VjUsAXNRmvgqCK/g+YrT1kyEtQE1A==
   dependencies:
     modern-css-reset "^1.4.0"
-    tom-select "^2.0.0"
 
 anymatch@~3.1.2:
   version "3.1.3"
@@ -127,10 +114,10 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
-sass@^1.62.1:
-  version "1.62.1"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.62.1.tgz#caa8d6bf098935bc92fc73fa169fb3790cacd029"
-  integrity sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==
+sass@^1.63.6:
+  version "1.63.6"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.63.6.tgz#481610e612902e0c31c46b46cf2dad66943283ea"
+  integrity sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"
@@ -147,11 +134,3 @@ to-regex-range@^5.0.1:
   integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
   dependencies:
     is-number "^7.0.0"
-
-tom-select@^2.0.0:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/tom-select/-/tom-select-2.2.2.tgz#8e5f9296e6d80254feccb57f0986bd6c44d126e2"
-  integrity sha512-igGah1yY6yhrnN2h/Ky8I5muw/nE/YQxIsEZoYu5qaA4bsRibvKto3s8QZZosKpOd0uO8fNYhRfAwgHB4IAYew==
-  dependencies:
-    "@orchidjs/sifter" "^1.0.3"
-    "@orchidjs/unicode-variants" "^1.0.4"

data/lib/optics/view_components/version.rb

@@ -2,6 +2,6 @@
 
 module Optics
   module ViewComponents
-    VERSION = '0.1.7'
+    VERSION = '0.1.9'
   end
 end

data/previews/component_helper.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module ComponentHelper
+  def component(name, *args, **kwargs, &)
+    render(name.camelize.constantize::Component.new(*args, **kwargs), &)
+  end
+end

data/previews/optics/button_preview/with_icon.html.erb

@@ -0,0 +1,4 @@
+<%= component('optics/button', active:, border:, disabled:, icon:, icon_with_label:, id:, pill:, size:, variant:, url:) do |component| %>
+  <%= component('optics/icon', name: 'home') %>
+  Button
+<% end %>

data/previews/optics/button_preview.rb

@@ -2,31 +2,59 @@
 
 module Optics
   class ButtonPreview < ViewComponent::Preview
+    include ComponentHelper
+
+    # @param active toggle
     # @param border toggle
+    # @param disabled toggle
     # @param icon toggle
+    # @param icon_with_label toggle
     # @param id text
     # @param label text
+    # @param pill toggle
     # @param size select {{ Optics::Button::Component::SIZES }}
     # @param variant select {{ Optics::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(Optics::Button::Component.new(
-               border:,
-               icon:,
-               id:,
-               label:,
-               size:,
-               variant:,
-               url:
-             ))
+      active: false,
+      border: true,
+      disabled: false,
+      icon: false,
+      icon_with_label: false,
+      id: nil,
+      label: 'Default',
+      pill: false,
+      size: 'medium',
+      variant: 'default',
+      url: nil
+    )
+      component 'optics/button', active:, border:, disabled:, icon:, icon_with_label:, id:, label:, pill:, size:,
+                                 variant:, url:
+    end
+
+    # @param active toggle
+    # @param border toggle
+    # @param disabled toggle
+    # @param icon toggle
+    # @param icon_with_label toggle
+    # @param id text
+    # @param pill toggle
+    # @param size select {{ Optics::Button::Component::SIZES }}
+    # @param variant select {{ Optics::Button::Component::STYLES }}
+    # @param url text
+    def with_icon( # rubocop:disable Metrics/ParameterLists
+      active: false,
+      border: true,
+      disabled: false,
+      icon: false,
+      icon_with_label: false,
+      id: nil,
+      pill: false,
+      size: 'medium',
+      variant: 'default',
+      url: nil
+    )
+      render_with_template(locals: { active:, border:, disabled:, icon:, icon_with_label:, id:, pill:, size:, variant:, url: })
     end
   end
 end

data/previews/optics/icon_preview.rb

@@ -2,6 +2,8 @@
 
 module Optics
   class IconPreview < ViewComponent::Preview
+    include ComponentHelper
+
     # @param emphasis select {{ Optics::Icon::Component::EMPHASES }}
     # @param filled toggle
     # @param name
@@ -9,23 +11,14 @@ module Optics
     # @param title
     # @param weight select {{ Optics::Icon::Component::WEIGHTS }}
     def default( # rubocop:disable Metrics/ParameterLists
-          emphasis: 'normal',
-          filled: false,
-          name: 'settings',
-          size: 'normal',
-          title: nil,
-          weight: 'normal'
-        )
-      render(
-        Optics::Icon::Component.new(
-          emphasis:,
-          filled:,
-          name:,
-          size:,
-          title:,
-          weight:
-        )
-      )
+      emphasis: 'normal',
+      filled: false,
+      name: 'settings',
+      size: 'normal',
+      title: nil,
+      weight: 'normal'
+    )
+      component('optics/icon', emphasis:, filled:, name:, size:, title:, weight:)
     end
   end
 end

data/previews/optics/sidebar_preview.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Optics
+  class SidebarPreview < ViewComponent::Preview
+    include ComponentHelper
+
+    # @param responsive toggle
+    # @param variant select {{ Optics::Sidebar::Component::VARIANTS }}
+    def default(
+      responsive: true,
+      variant: 'drawer'
+    )
+      component('optics/sidebar', responsive:, variant:) do |sidebar|
+        sidebar.with_brand(name: 'Optics', url: 'https://www.example.com')
+      end
+    end
+  end
+end

metadata

@@ -1,14 +1,16 @@
 --- !ruby/object:Gem::Specification
 name: optics_view_components
 version: !ruby/object:Gem::Version
-  version: 0.1.7
+  version: 0.1.9
 platform: ruby
 authors:
 - Reed Law
+- Wes Rich
+- Jeremy Walton
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-07-19 00:00:00.000000000 Z
+date: 2023-10-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: view_component
@@ -112,7 +114,8 @@ files:
 - CHANGELOG.md
 - Gemfile
 - Gemfile.lock
-- LICENSE.txt
+- LICENSE
+- Procfile
 - README.md
 - Rakefile
 - app/components/optics/application_view_component.rb
@@ -120,6 +123,7 @@ files:
 - app/components/optics/button/component.rb
 - app/components/optics/icon/component.rb
 - app/components/optics/sidebar/component.rb
+- config.ru
 - demo/.ruby-version
 - demo/Gemfile
 - demo/Gemfile.lock
@@ -178,8 +182,11 @@ files:
 - lib/optics/view_components.rb
 - lib/optics/view_components/engine.rb
 - lib/optics/view_components/version.rb
+- previews/component_helper.rb
 - previews/optics/button_preview.rb
+- previews/optics/button_preview/with_icon.html.erb
 - previews/optics/icon_preview.rb
+- previews/optics/sidebar_preview.rb
 - sig/optics_view_components.rbs
 homepage: https://github.com/RoleModel/optics_view_components
 licenses: