optics_view_components 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4a96cbd214ce4d3eb339e032c1c04ccc3435751f2618e5b41f9175114fd8e7de
-  data.tar.gz: 5d7edae41972ec1d189827dcdb71bdf0859cd26c7164f2de992ba282fc37df95
+  metadata.gz: c7e868dbff72f35b8979429a0a6ab9cb6690f1ed46ff5d4ca3d658aaec5fcd68
+  data.tar.gz: 5200729a15f3672e8afb161e7437909f8ec55b8d6c4e189ba9d44349e5e58111
 SHA512:
-  metadata.gz: 9dc9e7910cdd85f698f9080704e2b16f5b8bc38e78509ddca578d7c8a4b35f9df810b06a04d6f19fe51471a81baaad88f9518a45d2091956c074117b042eaf04
-  data.tar.gz: fa393926ee1c68a2e14a6795f8b01c8a815aa0f324227e55df5df030e03afda1414c0cced29f4f632e56327ab5478e3925ff3315fecb3de8bc273f706a3e6ecb
+  metadata.gz: 21c5922dabf1c062f5b184d8650ac9b0616df298770d519a87abbd577ba237ff039d0fa1759df5172cc8a39e21018a2013ac6f65a97fb7eeceeaa64edf779f20
+  data.tar.gz: '06913b6c9d7d9718ec86f6d9f81f648fa0a9ed2bc19e1a73eef0c614c0995f958c105bcf29a8074358ee221c153e2af12fda0d991a7dadc66bcbb98f81e52299'

data/Gemfile

@@ -8,6 +8,7 @@ gemspec
 gem 'rails', '~> 7.0'
 
 gem 'bootsnap', require: false
+gem 'lookbook'
 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.1)
+    optics_view_components (0.1.3)
       view_component (> 2.0, < 4.0)
 
 GEM
@@ -90,17 +90,33 @@ GEM
     coderay (1.1.3)
     concurrent-ruby (1.2.2)
     crass (1.0.6)
+    css_parser (1.14.0)
+      addressable
     date (3.3.3)
     diff-lcs (1.5.0)
     erubi (1.12.0)
     globalid (1.1.0)
       activesupport (>= 5.0)
+    htmlbeautifier (1.4.2)
+    htmlentities (4.3.4)
     i18n (1.13.0)
       concurrent-ruby (~> 1.0)
     json (2.6.3)
     loofah (2.21.3)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
+    lookbook (2.0.3)
+      activemodel
+      css_parser
+      htmlbeautifier (~> 1.3)
+      htmlentities (~> 4.3.4)
+      marcel (~> 1.0)
+      railties (>= 5.0)
+      redcarpet (~> 3.5)
+      rouge (>= 3.26, < 5.0)
+      view_component (>= 2.0)
+      yard (~> 0.9.25)
+      zeitwerk (~> 2.5)
     mail (2.8.1)
       mini_mime (>= 0.1.1)
       net-imap
@@ -163,8 +179,10 @@ GEM
       zeitwerk (~> 2.5)
     rainbow (3.1.1)
     rake (13.0.6)
+    redcarpet (3.6.0)
     regexp_parser (2.8.0)
     rexml (3.2.5)
+    rouge (4.1.1)
     rspec (3.12.0)
       rspec-core (~> 3.12.0)
       rspec-expectations (~> 3.12.0)
@@ -220,6 +238,7 @@ GEM
     websocket-extensions (0.1.5)
     xpath (3.2.0)
       nokogiri (~> 1.8)
+    yard (0.9.34)
     zeitwerk (2.6.8)
 
 PLATFORMS
@@ -228,6 +247,7 @@ PLATFORMS
 DEPENDENCIES
   bootsnap
   capybara
+  lookbook
   optics_view_components!
   pry
   rails (~> 7.0)

data/README.md

@@ -17,7 +17,7 @@ If bundler is not being used to manage dependencies, install the gem by executin
 Add to `config/application.rb`:
 
 ```
-require 'optics/view_components'
+require 'view_component'
 require 'optics/view_components/engine'
 ```
 
@@ -26,6 +26,15 @@ Use in a view:
 <%= render(Optics::Button::Component.new(label: 'Hello')) %>
 ```
 
+### Add previews to your application's [Lookbook](https://github.com/ViewComponent/lookbook)
+
+Add to `config/application.rb`:
+
+```
+    config.lookbook.component_paths << Optics::ViewComponents::Engine.root.join('app/components/optics')
+    config.view_component.preview_paths << Optics::ViewComponents::Engine.root.join('previews')
+```
+
 ## 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/demo/Gemfile

@@ -9,6 +9,7 @@ gem 'cssbundling-rails', '~> 1.1'
 gem 'puma', '~> 6.0'
 gem 'sprockets-rails'
 
+gem 'lookbook'
 gem 'optics_view_components', path: '../'
 
 group :development, :test do

data/demo/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    optics_view_components (0.1.1)
+    optics_view_components (0.1.3)
       view_component (> 2.0, < 4.0)
 
 GEM
@@ -72,12 +72,16 @@ GEM
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
       tzinfo (~> 2.0)
+    addressable (2.8.4)
+      public_suffix (>= 2.0.2, < 6.0)
     bindex (0.8.1)
     bootsnap (1.16.0)
       msgpack (~> 1.2)
     builder (3.2.4)
     concurrent-ruby (1.2.2)
     crass (1.0.6)
+    css_parser (1.14.0)
+      addressable
     cssbundling-rails (1.1.2)
       railties (>= 6.0.0)
     date (3.3.3)
@@ -87,6 +91,8 @@ GEM
     erubi (1.12.0)
     globalid (1.1.0)
       activesupport (>= 5.0)
+    htmlbeautifier (1.4.2)
+    htmlentities (4.3.4)
     i18n (1.13.0)
       concurrent-ruby (~> 1.0)
     io-console (0.6.0)
@@ -95,6 +101,18 @@ GEM
     loofah (2.21.3)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
+    lookbook (2.0.3)
+      activemodel
+      css_parser
+      htmlbeautifier (~> 1.3)
+      htmlentities (~> 4.3.4)
+      marcel (~> 1.0)
+      railties (>= 5.0)
+      redcarpet (~> 3.5)
+      rouge (>= 3.26, < 5.0)
+      view_component (>= 2.0)
+      yard (~> 0.9.25)
+      zeitwerk (~> 2.5)
     mail (2.8.1)
       mini_mime (>= 0.1.1)
       net-imap
@@ -117,6 +135,7 @@ GEM
     nio4r (2.5.9)
     nokogiri (1.15.1-x86_64-linux)
       racc (~> 1.4)
+    public_suffix (5.0.1)
     puma (6.2.2)
       nio4r (~> 2.0)
     racc (1.6.2)
@@ -150,8 +169,10 @@ GEM
       thor (~> 1.0)
       zeitwerk (~> 2.5)
     rake (13.0.6)
+    redcarpet (3.6.0)
     reline (0.3.3)
       io-console (~> 0.5)
+    rouge (4.1.1)
     sprockets (4.2.0)
       concurrent-ruby (~> 1.0)
       rack (>= 2.2.4, < 4)
@@ -175,6 +196,7 @@ GEM
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
+    yard (0.9.34)
     zeitwerk (2.6.8)
 
 PLATFORMS
@@ -184,6 +206,7 @@ DEPENDENCIES
   bootsnap
   cssbundling-rails (~> 1.1)
   debug
+  lookbook
   optics_view_components!
   puma (~> 6.0)
   rails (~> 7.0.4, >= 7.0.4.3)

data/demo/app/views/layouts/preview.html.erb

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Component Preview</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+  </head>
+
+  <body style="padding: var(--op-space-medium);">
+    <%= yield %>
+  </body>
+</html>

data/demo/config/application.rb

@@ -22,15 +22,11 @@ Bundler.require(*Rails.groups)
 
 module Demo
   class Application < Rails::Application
-    # Initialize configuration defaults for originally generated Rails version.
     config.load_defaults 7.0
 
-    # Configuration for the application, engines, and railties goes here.
-    #
-    # These settings can be overridden in specific environments using the files
-    # in config/environments, which are processed later.
-    #
-    # config.time_zone = "Central Time (US & Canada)"
-    # config.eager_load_paths << Rails.root.join("extras")
+    config.view_component.default_preview_layout = 'preview'
+    config.view_component.preview_paths << Rails.root.join('..', 'previews')
+    config.lookbook.project_name = "Optics ViewComponents v#{Optics::ViewComponents::VERSION}"
+    config.lookbook.component_paths = [Optics::ViewComponents::Engine.root.join('app', 'components')]
   end
 end

data/demo/config/routes.rb

@@ -1,8 +1,7 @@
 # frozen_string_literal: true
 
 Rails.application.routes.draw do
-  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html
-
-  # Defines the root path route ("/")
+  get '/', to: redirect('/lookbook/')
+  mount Lookbook::Engine, at: '/lookbook'
   root 'home#index'
 end

data/lib/optics/view_components/version.rb

@@ -2,6 +2,6 @@
 
 module Optics
   module ViewComponents
-    VERSION = '0.1.2'
+    VERSION = '0.1.3'
   end
 end

data/previews/optics/button_preview.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Optics
+  class ButtonPreview < ViewComponent::Preview
+    # @param border toggle
+    # @param icon toggle
+    # @param id text
+    # @param label text
+    # @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:
+             ))
+    end
+  end
+end

data/previews/optics/icon_preview.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Optics
+  class IconPreview < ViewComponent::Preview
+    # @param emphasis select {{ Optics::Icon::Component::EMPHASES }}
+    # @param filled toggle
+    # @param name
+    # @param size select {{ Optics::Icon::Component::SIZES }}
+    # @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:
+        )
+      )
+    end
+  end
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: optics_view_components
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors:
 - Reed Law
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-05-22 00:00:00.000000000 Z
+date: 2023-05-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: view_component
@@ -118,9 +118,7 @@ files:
 - app/components/optics/application_view_component.rb
 - app/components/optics/application_view_component_preview.rb
 - app/components/optics/button/component.rb
-- app/components/optics/button/preview.rb
 - app/components/optics/icon/component.rb
-- app/components/optics/icon/preview.rb
 - demo/.ruby-version
 - demo/Gemfile
 - demo/Gemfile.lock
@@ -140,6 +138,7 @@ files:
 - demo/app/javascript/controllers/index.js
 - demo/app/views/home/index.html.erb
 - demo/app/views/layouts/application.html.erb
+- demo/app/views/layouts/preview.html.erb
 - demo/bin/bundle
 - demo/bin/dev
 - demo/bin/importmap
@@ -178,6 +177,8 @@ files:
 - lib/optics/view_components.rb
 - lib/optics/view_components/engine.rb
 - lib/optics/view_components/version.rb
+- previews/optics/button_preview.rb
+- previews/optics/icon_preview.rb
 - sig/optics_view_components.rbs
 homepage: https://github.com/RoleModel/optics_view_components
 licenses:

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

@@ -1,34 +0,0 @@
-# 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/preview.rb

@@ -1,33 +0,0 @@
-# frozen_string_literal: true
-
-module Optics
-  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
-end