optics_view_components 0.1.7 → 0.1.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5194f25da267f185510137dd9cb5cda150d6da2ea4bea6dcdbe2353360b460ba
-  data.tar.gz: c856c408ca950243a0b00bf080c93c8a1d182f7a1bcb87df35084522c82c78d4
+  metadata.gz: db165928ba46774fcb8412d71cd02ae0c4e066e323bff171c7bedaae7f7e1cf9
+  data.tar.gz: 482b366146b1e0ff14e8cd2c6c5819e51374ae142bb969b7f520f8f68a5de220
 SHA512:
-  metadata.gz: 87d76b46feb1fed4772bd7e6ca8efd36e1c3bb38cae8fb94325f676dfef1e38bb8b6ec9a897010d72dd7d154dd6638ce961e2a6245c45be0a170a8c036276fb9
-  data.tar.gz: fafd24dd4f8738e53b012a0a82ce10b4a2c6e35c7ccbaa872316055641260d2c62c09cfbc8ce8e87c63578ea37566c23544fd4d06d57cf54c561e866958fa148
+  metadata.gz: e8783ca32282a2e8f8f45b97b443198be8507f65d1c48cc773fe6f4ddd5ef737bdfa3a865b7591101b57fbf700e9d1af96858443f1ad3883338713f662ad2b7d
+  data.tar.gz: e21dd5880c6d94568f53c3202b154e7702d809fe7535e31134b3aef6c9ee56c8ce06a60de87a1069fb4381b4ee993c4bf5bb56b2d2ec3442720a479a7838d4c9

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

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'
@@ -40,37 +40,29 @@ module Optics
 
       class Brand < ApplicationViewComponent
         accepts :url
-        accepts :image_source
+        accepts :img_src
+        accepts :name
 
         def call
           link_to(url, class: 'sidebar__brand') do
-            image_tag(image_source)
+            name || image_tag(img_src)
           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 +72,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/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

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/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.8'
   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:, 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:, 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,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: optics_view_components
 version: !ruby/object:Gem::Version
-  version: 0.1.7
+  version: 0.1.8
 platform: ruby
 authors:
 - Reed Law
@@ -178,8 +178,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: