lookbook 0.3.0.beta.2 → 0.3.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 61d3cbcc3579d9a79aaa03fb87bda891923c10aed37eb78f11ef948b09b99ed9
-  data.tar.gz: 9ac3803965a4d9fc17eed96bb8a2e2a0821c78019e061032fa5f22276edbe321
+  metadata.gz: e32460fbf9f0b09167b13eb27bacbb418f3a86425758caad4bdae58b738b06ff
+  data.tar.gz: c92f69fc1098a2798f5a35f150ea5024ab89aade365b54106e8f4861600bcc8e
 SHA512:
-  metadata.gz: 4d902210204c1f779a535dcf6aec261b827ff92cef73ce384f2d791ccc0fb85ff0f5de0d56f2cf19aeff67f5190a1ea753b1f6d2016108bc7fe3be55b8b0930e
-  data.tar.gz: 3d52cc3c23b60d1cc8fdef2f753ff7e80ad858e0f2eec598212307cfa0338b69b87071fd3fa45a3848f303533f033b1c55dc0995ba15364c9f831daa2c893338
+  metadata.gz: b4b163234a695bdb337c4341db7203a457761a51e0dd4c9c9683f8e4035d0997658fccca15d35bc779d8cd9a2418556a9784e3d3fd64f776f20dbb22259c0c95
+  data.tar.gz: dfebd15c82892d8f504d7f51f838f6f4318f04c178df3b2a97f961f30cb66b0c1718cd4e11f1af614f2af01216f14bb8f5468034737b2aff19d37f77c8690c35

data/README.md

@@ -27,9 +27,9 @@ Lookbook uses [RDoc/Yard-style comment tags](https://rubydoc.info/gems/yard/file
 - Resizable preview window for responsive testing
 - Highlighted preview source code and HTML output
 - Add notes via comments in the preview file (markdown supported)
-- Auto-updating UI when component or preview files are updated
-- Supports 'hidden' previews and examples
-- Works with standard the ViewComponent preview system
+- Auto-updating UI when component or preview files are updated _(Rails v6.0+ only)_
+- Hide, group and rename preview examples using comment tags
+- Fully compatible with standard the ViewComponent preview system
 
 ## Lookbook demo
 
@@ -248,6 +248,8 @@ However the following Lookbook-specific config options are also available:
 
 ### UI auto-refresh
 
+> ⚠️ UI auto-refresh is only supported in Rails v6.0+
+
 Disable/enable the auto-updating of the Lookbook UI when files change. Enabled by default.
 
 ```ruby

data/app/controllers/lookbook/app_controller.rb

@@ -95,7 +95,7 @@ module Lookbook
             html: preview_controller.render_example_to_string(@preview, example.name)
           }
         end
-        joined = render_to_string "./preview_group", locals: {examples: examples}, layout: nil
+        joined = render_to_string "lookbook/preview_group", locals: {examples: examples}, layout: nil
         preview_controller.render_in_layout_to_string(joined, @preview.lookbook_layout)
       else
         preview_controller.request.params[:path] = "#{@preview.preview_name}/#{@example.name}".chomp("/")

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

@@ -1,5 +1,5 @@
 <div class="flex flex-col h-full min-h-fill w-full">
-  <%= render "./shared/header" %>
+  <%= render "shared/header" %>
   <div class="flex flex-col items-center justify-center h-full min-h-fill">
     <div class="p-4 text-center">
       <svg class="feather w-10 h-10 text-gray-300 mx-auto">
@@ -8,4 +8,4 @@
       <h5 class="mt-4 text-gray-400 text-base">Select a preview to get started</h5>
     </div>
   </div>
-</div>
+</div>

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

@@ -1 +1 @@
-<%= render "./workbench" %>
+<%= render "shared/workbench" %>

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

@@ -10,7 +10,7 @@
 
   <% if config.auto_refresh %>
     <script>
-      window.SOCKET_PATH = "/lookbook/cable";
+      window.SOCKET_PATH = "<%= Lookbook::Engine.websocket_mount_path %>";
     </script>
   <% end %>
   <script src="/lookbook-assets/app.js" defer></script>
@@ -21,14 +21,14 @@
   <div
     x-data="page"
     x-effect="updateTitle"
-    @refresh.document="fetchHTML().then(doc => $dispatch('document:updated', {doc}))" 
+    @refresh.document="fetchHTML().then(doc => $dispatch('document:updated', {doc}))"
     @popstate.window="fetchHTML().then(doc => { $dispatch('document:loaded', {doc}); sidebarOpenMobile = false})"
     @sidebar:toggle.window="sidebarOpenMobile = !sidebarOpenMobile"
     :style="`grid-template-columns: ${$store.nav.width}px 1px 1fr;`"
     class="md:grid w-screen h-screen"
   >
     <div class="h-full bg-gray-100 overflow-hidden" x-show="$screen('md') || sidebarOpenMobile" x-cloak>
-      <%= render "./sidebar" %>
+      <%= render "shared/sidebar" %>
     </div>
     <div x-data="split(splitProps)" class="h-full gutter border-r border-gray-300 relative" x-show="$screen('md')" x-cloak>
       <div class="w-[9px] h-full bg-transparent hover:bg-indigo-100 hover:bg-opacity-20 transition absolute top-0 bottom-0 transform -translate-x-1/2 cursor-[col-resize] z-10"></div>

data/app/views/lookbook/nav/_collection.html.erb

@@ -1,5 +1,5 @@
-<%= render "./nav/node", node: node do %>
+<%= render "nav/node", node: node do %>
   <% node.items.each do |item| %>
-    <%= render "./nav/#{item.type.to_s}", node: item %>
-  <% end %> 
-<% end %>
+    <%= render "nav/#{item.type.to_s}", node: item %>
+  <% end %>
+<% end %>

data/app/views/lookbook/nav/_leaf.html.erb

@@ -1,6 +1,7 @@
 <%
 path = show_path leaf.path
 display ||= :leaf
+label ||= leaf.label
 %>
 <li x-data="navLeaf" :class="{hidden}" x-init="matchers = <%= leaf.matchers.to_json %>; path = '<%= path %>'; setActive()" @popstate.window="setActive">
   <a href="<%= path %>"
@@ -15,7 +16,7 @@ display ||= :leaf
       </svg>
     </div>
     <div class="truncate whitespace-nowrap <%= "font-bold" if display == :node %>">
-      <%= leaf.label %>
+      <%= label %>
     </div>
   </a>
 </li>

data/app/views/lookbook/nav/_preview.html.erb

@@ -1,11 +1,11 @@
 <% examples = node.get_examples %>
 <% if examples.many? %>
-  <%= render "./nav/node", node: node, path: show_path(examples.first.path) do %>
+  <%= render "nav/node", node: node, path: show_path(examples.first.path) do %>
     <% examples.each do |example| %>
-      <%= render "./nav/leaf", leaf: example, depth: example.hierarchy_depth + 1 %>
+      <%= render "nav/leaf", leaf: example, depth: example.hierarchy_depth + 1 %>
     <% end %>
   <% end %>
 <% else %>
   <% example = examples.first %>
-  <%= render "./nav/leaf", leaf: example, depth: example.hierarchy_depth, display: :node %>
-<% end %>
+  <%= render "nav/leaf", leaf: example, depth: example.hierarchy_depth, label: node.label, display: :node %>
+<% end %>

data/app/views/lookbook/shared/_header.html.erb

@@ -5,4 +5,4 @@
     </svg>
   </button>
   <%= yield %>
-</header>
+</header>

data/app/views/lookbook/{_sidebar.html.erb → shared/_sidebar.html.erb}

@@ -27,7 +27,7 @@
         <% if @nav.items.any? %>
           <ul x-ref="items">
             <% @nav.items.each do |item| %>
-              <%= render "./nav/#{item.type.to_s}", node: item %>
+              <%= render "nav/#{item.type.to_s}", node: item %>
             <% end %>
           </ul>
           <div class="p-4 text-center" x-show="hidden" x-cloak>
@@ -41,5 +41,5 @@
         <% end %>
       </nav>
     </div>
-  </div>   
-</div>
+  </div>
+</div>

data/app/views/lookbook/{_workbench.html.erb → shared/_workbench.html.erb}

@@ -1,12 +1,12 @@
 <div id="workbench" class="bg-gray-50 h-screen flex flex-col" x-data="workbench">
-  <%= render "./workbench/header" %>
+  <%= render "workbench/header" %>
   <div class="md:grid flex-grow" :style="`grid-template-rows: 1fr 1px ${$store.inspector.height}px`">
-    <%= render "./workbench/preview" %>
+    <%= render "workbench/preview" %>
     <div class="w-full gutter border-t border-gray-300 relative" x-data="split(splitProps)" x-show="$screen('md')">
       <div class="h-[11px] w-full bg-transparent hover:bg-indigo-100 hover:bg-opacity-20 transition absolute left-0 right-0 transform -translate-y-1/2 cursor-[row-resize]"></div>
     </div>
     <% if @inspector %>
-      <%= render "./workbench/inspector", **@inspector %>
+      <%= render "workbench/inspector", **@inspector %>
     <% end %>
-  </div>  
-</div>
+  </div>
+</div>

data/app/views/lookbook/workbench/_header.html.erb

@@ -1,9 +1,11 @@
-<%= render "./shared/header" do %>
+<%= render "shared/header" do %>
   <div class="flex items-center">
     <div class="flex items-center space-x-1">
       <strong class="whitespace-nowrap truncate"><%= @preview.label %></strong>
-      <span>/</span>
-      <span class="whitespace-nowrap truncate"><%= @example.label %></span>
+      <% if @preview.get_examples.many? %>
+        <span>/</span>
+        <span class="whitespace-nowrap truncate"><%= @example.label %></span>
+      <% end %>
     </div>
   </div>
   <div class="flex text-xs ml-auto font-monospace text-gray-700 space-x-1" x-show="$screen('md')">
@@ -34,4 +36,4 @@
       </svg>
     </a>
   </div>
-<% end %>
+<% end %>

data/app/views/lookbook/workbench/_inspector.html.erb

@@ -21,12 +21,12 @@
     <% panes.each do |key, props| %>
       <div class="flex flex-col h-full relative" x-show="active('<%= key %>')" x-cloak>
         <% if props[:clipboard].present? %>
-          <%= render "./shared/clipboard" do %><%= h props[:clipboard].strip %><% end %>
+          <%= render "shared/clipboard" do %><%= h props[:clipboard].strip %><% end %>
         <% end %>
         <div class="flex flex-col h-full overflow-auto">
-          <%= render "./workbench/inspector/#{props[:template]}", key: key, **props %>
+          <%= render "workbench/inspector/#{props[:template]}", key: key, **props %>
         </div>
       </div>
     <% end %>
   </div>
-</div>
+</div>

data/lib/lookbook/engine.rb

@@ -83,7 +83,18 @@ module Lookbook
 
     class << self
       def websocket
-        @websocket ||= ActionCable::Server::Base.new(config: Lookbook::Engine.cable)
+        if Rails.version.to_f >= 6.0
+          @websocket ||= ActionCable::Server::Base.new(config: Lookbook::Engine.cable)
+        else
+          @websocket = ActionCable::Server::Base.new
+          @websocket.config = Lookbook::Engine.cable
+
+          @websocket
+        end
+      end
+
+      def websocket_mount_path
+        "#{Lookbook::Engine.routes.find_script_name({})}#{cable.mount_path}"
       end
 
       def cable

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "0.3.0.beta.2"
+  VERSION = "0.3.3"
 end

data/public/lookbook-assets/app.css

@@ -1456,28 +1456,28 @@ pre[class*="language-"] {
   bottom: 0px;
 }
 
-.top-1\/2 {
-  top: 50%;
-}
-
-.right-2 {
-  right: 0.5rem;
+.top-0 {
+  top: 0px;
 }
 
-.left-0 {
-  left: 0px;
+.bottom-0 {
+  bottom: 0px;
 }
 
 .right-0 {
   right: 0px;
 }
 
-.top-0 {
-  top: 0px;
+.top-1\/2 {
+  top: 50%;
 }
 
-.bottom-0 {
-  bottom: 0px;
+.right-2 {
+  right: 0.5rem;
+}
+
+.left-0 {
+  left: 0px;
 }
 
 .left-4 {
@@ -1493,14 +1493,6 @@ pre[class*="language-"] {
   margin-right: auto;
 }
 
-.ml-4 {
-  margin-left: 1rem;
-}
-
-.mb-1 {
-  margin-bottom: 0.25rem;
-}
-
 .mt-4 {
   margin-top: 1rem;
 }
@@ -1529,6 +1521,14 @@ pre[class*="language-"] {
   margin-right: 0.75rem;
 }
 
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
 .ml-auto {
   margin-left: auto;
 }
@@ -1553,6 +1553,10 @@ pre[class*="language-"] {
   display: none;
 }
 
+.h-screen {
+  height: 100vh;
+}
+
 .h-full {
   height: 100%;
 }
@@ -1561,40 +1565,28 @@ pre[class*="language-"] {
   height: 2.5rem;
 }
 
-.h-5 {
-  height: 1.25rem;
+.h-3\.5 {
+  height: 0.875rem;
 }
 
 .h-3 {
   height: 0.75rem;
 }
 
-.h-screen {
-  height: 100vh;
-}
-
-.h-\[11px\] {
-  height: 11px;
-}
-
-.h-3\.5 {
-  height: 0.875rem;
-}
-
 .h-4 {
   height: 1rem;
 }
 
-.w-5 {
-  width: 1.25rem;
+.h-5 {
+  height: 1.25rem;
 }
 
-.w-full {
-  width: 100%;
+.h-\[11px\] {
+  height: 11px;
 }
 
-.w-3 {
-  width: 0.75rem;
+.w-full {
+  width: 100%;
 }
 
 .w-10 {
@@ -1613,10 +1605,18 @@ pre[class*="language-"] {
   width: 0.875rem;
 }
 
+.w-3 {
+  width: 0.75rem;
+}
+
 .w-4 {
   width: 1rem;
 }
 
+.w-5 {
+  width: 1.25rem;
+}
+
 .max-w-xs {
   max-width: 20rem;
 }
@@ -1633,22 +1633,18 @@ pre[class*="language-"] {
   flex-grow: 1;
 }
 
-.-translate-y-1\/2 {
-  --tw-translate-y: -50%;
-  transform: var(--tw-transform);
-}
-
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: var(--tw-transform);
 }
 
-.transform {
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
   transform: var(--tw-transform);
 }
 
-.cursor-\[row-resize\] {
-  cursor: row-resize;
+.transform {
+  transform: var(--tw-transform);
 }
 
 .cursor-\[col-resize\] {
@@ -1659,6 +1655,10 @@ pre[class*="language-"] {
   cursor: pointer;
 }
 
+.cursor-\[row-resize\] {
+  cursor: row-resize;
+}
+
 .cursor-auto {
   cursor: auto;
 }
@@ -1754,22 +1754,22 @@ pre[class*="language-"] {
   border-width: 1px;
 }
 
-.border-b {
-  border-bottom-width: 1px;
-}
-
-.border-t {
-  border-top-width: 1px;
-}
-
 .border-r {
   border-right-width: 1px;
 }
 
+.border-b {
+  border-bottom-width: 1px;
+}
+
 .border-l {
   border-left-width: 1px;
 }
 
+.border-t {
+  border-top-width: 1px;
+}
+
 .border-b-2 {
   border-bottom-width: 2px;
 }
@@ -1802,25 +1802,25 @@ pre[class*="language-"] {
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
 
-.bg-transparent {
-  background-color: transparent;
-}
-
-.bg-gray-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
-}
-
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
 }
 
+.bg-transparent {
+  background-color: transparent;
+}
+
 .\!bg-indigo-100 {
   --tw-bg-opacity: 1 !important;
   background-color: rgba(224, 231, 255, var(--tw-bg-opacity)) !important;
 }
 
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
+}
+
 .p-4 {
   padding: 1rem;
 }
@@ -1833,11 +1833,6 @@ pre[class*="language-"] {
   padding: 0.25rem;
 }
 
-.px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
 .py-\[5px\] {
   padding-top: 5px;
   padding-bottom: 5px;
@@ -1853,6 +1848,11 @@ pre[class*="language-"] {
   padding-bottom: 0.5rem;
 }
 
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -1896,6 +1896,11 @@ pre[class*="language-"] {
   font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
 }
 
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -1906,11 +1911,6 @@ pre[class*="language-"] {
   line-height: 1rem;
 }
 
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-
 .text-\[11px\] {
   font-size: 11px;
 }
@@ -1919,19 +1919,14 @@ pre[class*="language-"] {
   font-weight: 700;
 }
 
-.text-gray-400 {
-  --tw-text-opacity: 1;
-  color: rgba(156, 163, 175, var(--tw-text-opacity));
-}
-
-.text-gray-500 {
+.text-gray-300 {
   --tw-text-opacity: 1;
-  color: rgba(107, 114, 128, var(--tw-text-opacity));
+  color: rgba(209, 213, 219, var(--tw-text-opacity));
 }
 
-.text-gray-300 {
+.text-gray-400 {
   --tw-text-opacity: 1;
-  color: rgba(209, 213, 219, var(--tw-text-opacity));
+  color: rgba(156, 163, 175, var(--tw-text-opacity));
 }
 
 .text-red-300 {
@@ -1944,6 +1939,11 @@ pre[class*="language-"] {
   color: rgba(55, 65, 81, var(--tw-text-opacity));
 }
 
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgba(107, 114, 128, var(--tw-text-opacity));
+}
+
 .text-gray-800 {
   --tw-text-opacity: 1;
   color: rgba(31, 41, 55, var(--tw-text-opacity));

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: lookbook
 version: !ruby/object:Gem::Version
-  version: 0.3.0.beta.2
+  version: 0.3.3
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-09-23 00:00:00.000000000 Z
+date: 2021-10-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -16,14 +16,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '6.0'
+        version: '5.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '6.0'
+        version: '5.0'
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -72,14 +72,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.3'
+        version: '3.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.3'
+        version: '3.0'
 - !ruby/object:Gem::Dependency
   name: yard
   requirement: !ruby/object:Gem::Requirement
@@ -207,8 +207,6 @@ files:
 - app/channels/lookbook/reload_channel.rb
 - app/controllers/lookbook/app_controller.rb
 - app/helpers/lookbook/application_helper.rb
-- app/views/lookbook/_sidebar.html.erb
-- app/views/lookbook/_workbench.html.erb
 - app/views/lookbook/app/error.html.erb
 - app/views/lookbook/app/index.html.erb
 - app/views/lookbook/app/not_found.html.erb
@@ -221,6 +219,8 @@ files:
 - app/views/lookbook/preview_group.html.erb
 - app/views/lookbook/shared/_clipboard.html.erb
 - app/views/lookbook/shared/_header.html.erb
+- app/views/lookbook/shared/_sidebar.html.erb
+- app/views/lookbook/shared/_workbench.html.erb
 - app/views/lookbook/workbench/_header.html.erb
 - app/views/lookbook/workbench/_inspector.html.erb
 - app/views/lookbook/workbench/_preview.html.erb
@@ -259,9 +259,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.1.2
 signing_key: