lookbook 0.3.0.beta.1 → 0.3.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6b0d42f049a62be24079955f108c14f4b7b73b8b0f0a677639cce865e2260006
-  data.tar.gz: db6d156648495478cdcd55101065cb3875cfbdfb2b9bce3f924e37a11b2b789b
+  metadata.gz: 7079abdbe93ab54ba45d95752d1506c90d7aa0734afff9fc4bd947984d2dede9
+  data.tar.gz: ff9f78726cb4b6686ced040eca344e8585ea8ec16931d670591692400e7307ff
 SHA512:
-  metadata.gz: 15a7f9761f859bfdc9965801aba418e30fc95520635fc1a03dd9ff63af5e73e98563bc8d16420ae705824f18dffcdc9f834b57547815c4ab5cf899aba831e2e3
-  data.tar.gz: 889cea13089b40fa493c7ca39e6ff871f9db6432b9fffa1b57ab1a3a686b6e04ee2d0e3859093abcea386ccd67e2d7fe3aeaf2acf239632c535332d2a35e2ae3
+  metadata.gz: edcf8e461252b4d18101019c6636bb4a2b298691abac0d8154a4eb30a66a8cb836c3b60b9e63533c66753fc336005ef78e9e8cabac11330c3db0447ec22a9475
+  data.tar.gz: fd329c551311cf634c92544226fb5c5fe6104146945e1498cae010a18694fba46b01ce0fc3d86ae1a4b9ff51cb9a10030f4223e0fff601d7b081dc687f3b62d5

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/assets/lookbook/js/nav.js

@@ -21,8 +21,11 @@ export default function () {
         this.$dispatch("nav:updated");
       });
     },
-    navigate($event) {
-      history.pushState({}, null, $event.currentTarget.href);
+    navigate(path) {
+      if (path instanceof Event) {
+        path = path.currentTarget.href;
+      }
+      history.pushState({}, null, path);
       this.$dispatch("popstate");
     },
     focusFilter() {

data/app/controllers/lookbook/app_controller.rb

@@ -89,13 +89,13 @@ module Lookbook
 
     def rendered_example
       if @example.type == :group
-        rendered = @example.examples.map do |example|
+        examples = @example.examples.map do |example|
           {
             label: example.label,
-            content: preview_controller.render_example_to_string(@preview, example.name)
+            html: preview_controller.render_example_to_string(@preview, example.name)
           }
         end
-        joined = render_to_string "layouts/group", locals: {items: rendered}, 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

@@ -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

@@ -0,0 +1,22 @@
+<%
+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 %>"
+    class="pr-3 py-[5px] flex items-center w-full group transition hover:bg-gray-200 hover:bg-opacity-50"
+    style="<%= nav_padding_style(depth) %>"
+    :class="{'!bg-indigo-100':active}"
+    @click.stop.prevent="navigate"
+  >
+    <div class="relative w-3.5 h-3.5 mr-1.5 <%= "ml-[3px]" if display == :node %> " :class="active ? 'text-gray-900' : 'text-indigo-500'">
+      <svg class="feather flex-none group-hover:text-indigo-800 transition w-3.5 h-3.5">
+        <use xlink:href="/lookbook-assets/feather-sprite.svg#<%= display == :node ? "layers" : "eye" %>" />
+      </svg>
+    </div>
+    <div class="truncate whitespace-nowrap <%= "font-bold" if display == :node %>">
+      <%= label %>
+    </div>
+  </a>
+</li>

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

@@ -1,5 +1,5 @@
 <li id="<%= node.id %>" x-data="navNode" <% if node.hierarchy_depth == 1 %> class="py-1 border-b border-gray-300 cursor-pointer"<% end %> :class="{hidden}" x-cloak>
-  <div @click="toggle" style="<%= nav_padding_style(node.hierarchy_depth) %>">
+  <div @click="toggle(); if (open()) { <%= "navigate('#{path}')" if defined?(path) %>}" style="<%= nav_padding_style(node.hierarchy_depth) %>" class="hover:bg-gray-200 hover:bg-opacity-50">
     <div class="flex items-center cursor-pointer pr-3 py-[5px]">
       <svg class="feather w-3 h-3 mr-1 text-gray-500 flex-none">
         <use xlink:href="/lookbook-assets/feather-sprite.svg#chevron-down" x-show="open" x-cloak />

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

@@ -1,29 +1,11 @@
-<%= render "./nav/node", node: node do %>
-  <% node.get_examples.each do |example| %>
-    <% path = show_path example.path %>
-    <li x-data="navLeaf" :class="{hidden}" x-init="matchers = <%= example.matchers.to_json %>; path = '<%= path %>'; setActive()" @popstate.window="setActive">
-      <a href="<%= path %>"
-        class="pr-3 py-[5px] flex items-center w-full group transition hover:bg-gray-200 hover:bg-opacity-50"
-        style="<%= nav_padding_style(example.hierarchy_depth + 1) %>"
-        :class="{'!bg-indigo-100':active}"
-        @click.stop.prevent="navigate"
-      >
-        <div class="relative w-3.5 h-3.5 mr-1.5" :class="active ? 'text-gray-900' : 'text-indigo-500'"> 
-          <svg class="feather flex-none group-hover:text-indigo-800 transition <% if example.type == :group %> absolute top-[-2px] left-[-2px] w-3 h-3<% else %>w-3.5 h-3.5<% end %>">
-            <use xlink:href="/lookbook-assets/feather-sprite.svg#eye" />
-          </svg>
-          <% if example.type == :group %>
-            <svg class="feather w-3 h-3 flex-none group-hover:text-indigo-800 transition absolute top-[4px] left-[4px]">
-              <use xlink:href="/lookbook-assets/feather-sprite.svg#eye" />
-            </svg>
-          <% end %>
-        </div>
-        <div class="truncate whitespace-nowrap">
-          <%= example.label %>
-        </div>
-      </a>
-    </li>
+<% examples = node.get_examples %>
+<% if examples.many? %>
+  <%= 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 %>
+    <% end %>
   <% end %>
+<% else %>
+  <% example = examples.first %>
+  <%= render "nav/leaf", leaf: example, depth: example.hierarchy_depth, label: node.label, display: :node %>
 <% end %>
-
-    

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

@@ -0,0 +1,8 @@
+<% examples.each do |example| %>
+  <div style="margin-bottom: 30px;">
+    <h6 style="color: #999; font-family: sans-serif; font-size: 14px; margin-top: 0; margin-bottom: 10px;">
+      <%= example[:label] %>
+    </h6>
+    <%= example[:html] %>
+  </div>
+<% 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,14 @@ 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 cable

data/lib/lookbook/preview.rb

@@ -31,6 +31,7 @@ module Lookbook
           if name.nil?
             @lookbook_examples += examples
           else
+            name = lookbook_label if name.strip == ""
             @lookbook_examples << PreviewGroup.new(name.underscore, self, examples)
           end
         end

data/lib/lookbook/version.rb

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

data/public/lookbook-assets/app.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v2.2.15 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com */
 
 /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
@@ -475,18 +475,6 @@ button,
   cursor: pointer;
 }
 
-/**
- * Override legacy focus reset from Normalize with modern Firefox focus styles.
- *
- * This is actually an improvement over the new defaults in Firefox in our testing,
- * as it triggers the better focus styles even for links, which still use a dotted
- * outline in Firefox by default.
- */
-
-:-moz-focusring {
-  outline: auto;
-}
-
 table {
   border-collapse: collapse;
 }
@@ -1468,22 +1456,6 @@ pre[class*="language-"] {
   bottom: 0px;
 }
 
-.top-1\/2 {
-  top: 50%;
-}
-
-.right-2 {
-  right: 0.5rem;
-}
-
-.left-0 {
-  left: 0px;
-}
-
-.right-0 {
-  right: 0px;
-}
-
 .top-0 {
   top: 0px;
 }
@@ -1492,20 +1464,20 @@ pre[class*="language-"] {
   bottom: 0px;
 }
 
-.top-\[-2px\] {
-  top: -2px;
+.right-0 {
+  right: 0px;
 }
 
-.left-\[-2px\] {
-  left: -2px;
+.top-1\/2 {
+  top: 50%;
 }
 
-.top-\[4px\] {
-  top: 4px;
+.right-2 {
+  right: 0.5rem;
 }
 
-.left-\[4px\] {
-  left: 4px;
+.left-0 {
+  left: 0px;
 }
 
 .left-4 {
@@ -1521,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;
 }
@@ -1541,18 +1505,30 @@ pre[class*="language-"] {
   margin-top: 0.5rem;
 }
 
-.mr-1 {
-  margin-right: 0.25rem;
-}
-
 .mr-1\.5 {
   margin-right: 0.375rem;
 }
 
+.ml-\[3px\] {
+  margin-left: 3px;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
 .mr-3 {
   margin-right: 0.75rem;
 }
 
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
 .ml-auto {
   margin-left: auto;
 }
@@ -1577,6 +1553,10 @@ pre[class*="language-"] {
   display: none;
 }
 
+.h-screen {
+  height: 100vh;
+}
+
 .h-full {
   height: 100%;
 }
@@ -1585,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 {
@@ -1637,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;
 }
@@ -1657,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\] {
@@ -1683,6 +1655,10 @@ pre[class*="language-"] {
   cursor: pointer;
 }
 
+.cursor-\[row-resize\] {
+  cursor: row-resize;
+}
+
 .cursor-auto {
   cursor: auto;
 }
@@ -1778,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;
 }
@@ -1826,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;
 }
@@ -1857,9 +1833,9 @@ pre[class*="language-"] {
   padding: 0.25rem;
 }
 
-.px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
+.py-\[5px\] {
+  padding-top: 5px;
+  padding-bottom: 5px;
 }
 
 .py-1 {
@@ -1867,16 +1843,16 @@ pre[class*="language-"] {
   padding-bottom: 0.25rem;
 }
 
-.py-\[5px\] {
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
-
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
 
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -1920,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;
@@ -1930,11 +1911,6 @@ pre[class*="language-"] {
   line-height: 1rem;
 }
 
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-
 .text-\[11px\] {
   font-size: 11px;
 }
@@ -1943,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 {
@@ -1968,14 +1939,14 @@ pre[class*="language-"] {
   color: rgba(55, 65, 81, var(--tw-text-opacity));
 }
 
-.text-gray-800 {
+.text-gray-500 {
   --tw-text-opacity: 1;
-  color: rgba(31, 41, 55, var(--tw-text-opacity));
+  color: rgba(107, 114, 128, var(--tw-text-opacity));
 }
 
-.text-indigo-500 {
+.text-gray-800 {
   --tw-text-opacity: 1;
-  color: rgba(99, 102, 241, var(--tw-text-opacity));
+  color: rgba(31, 41, 55, var(--tw-text-opacity));
 }
 
 .text-gray-900 {
@@ -1983,6 +1954,11 @@ pre[class*="language-"] {
   color: rgba(17, 24, 39, var(--tw-text-opacity));
 }
 
+.text-indigo-500 {
+  --tw-text-opacity: 1;
+  color: rgba(99, 102, 241, var(--tw-text-opacity));
+}
+
 .\!text-gray-300 {
   --tw-text-opacity: 1 !important;
   color: rgba(209, 213, 219, var(--tw-text-opacity)) !important;

data/public/lookbook-assets/app.js

@@ -20,10 +20,7 @@
     return a;
   };
   var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-  var __require = typeof require !== "undefined" ? require : (x) => {
-    throw new Error('Dynamic require of "' + x + '" is not supported');
-  };
-  var __commonJS = (cb, mod) => function __require2() {
+  var __commonJS = (cb, mod) => function __require() {
     return mod || (0, cb[Object.keys(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
   };
   var __reExport = (target, module, desc) => {
@@ -2222,7 +2219,7 @@
   function closestDataStack(node) {
     if (node._x_dataStack)
       return node._x_dataStack;
-    if (typeof ShadowRoot === "function" && node instanceof ShadowRoot) {
+    if (node instanceof ShadowRoot) {
       return closestDataStack(node.host);
     }
     if (!node.parentNode) {
@@ -2428,9 +2425,6 @@ Expression: "${expression}"
       return getDirectiveHandler(el, directive2);
     });
   }
-  function attributesOnly(attributes) {
-    return Array.from(attributes).map(toTransformedAttributes()).filter((attr) => !outNonAlpineAttributes(attr));
-  }
   var isDeferringHandlers = false;
   var directiveHandlerStacks = new Map();
   var currentHandlerStackKey = Symbol();
@@ -2484,8 +2478,7 @@ Expression: "${expression}"
     return { name, value };
   };
   var into = (i) => i;
-  function toTransformedAttributes(callback = () => {
-  }) {
+  function toTransformedAttributes(callback) {
     return ({ name, value }) => {
       let { name: newName, value: newValue } = attributeTransformers.reduce((carry, transform) => {
         return transform(carry);
@@ -2565,7 +2558,7 @@ Expression: "${expression}"
     isHolding = true;
   }
   function walk(el, callback) {
-    if (typeof ShadowRoot === "function" && el instanceof ShadowRoot) {
+    if (el instanceof ShadowRoot) {
       Array.from(el.children).forEach((el2) => walk(el2, callback));
       return;
     }
@@ -2593,7 +2586,7 @@ Expression: "${expression}"
     onAttributesAdded((el, attrs) => {
       directives(el, attrs).forEach((handle) => handle());
     });
-    let outNestedComponents = (el) => !closestRoot(el.parentElement, true);
+    let outNestedComponents = (el) => !closestRoot(el.parentElement);
     Array.from(document.querySelectorAll(allSelectors())).filter(outNestedComponents).forEach((el) => {
       initTree(el);
     });
@@ -2613,15 +2606,14 @@ Expression: "${expression}"
   function addInitSelector(selectorCallback) {
     initSelectorCallbacks.push(selectorCallback);
   }
-  function closestRoot(el, includeInitSelectors = false) {
+  function closestRoot(el) {
     if (!el)
       return;
-    const selectors = includeInitSelectors ? allSelectors() : rootSelectors();
-    if (selectors.some((selector) => el.matches(selector)))
+    if (rootSelectors().some((selector) => el.matches(selector)))
       return el;
     if (!el.parentElement)
       return;
-    return closestRoot(el.parentElement, includeInitSelectors);
+    return closestRoot(el.parentElement);
   }
   function isRoot(el) {
     return rootSelectors().some((selector) => el.matches(selector));
@@ -2637,29 +2629,6 @@ Expression: "${expression}"
   function destroyTree(root) {
     walk(root, (el) => cleanupAttributes(el));
   }
-  function debounce(func, wait) {
-    var timeout;
-    return function() {
-      var context = this, args = arguments;
-      var later = function() {
-        timeout = null;
-        func.apply(context, args);
-      };
-      clearTimeout(timeout);
-      timeout = setTimeout(later, wait);
-    };
-  }
-  function throttle(func, limit) {
-    let inThrottle;
-    return function() {
-      let context = this, args = arguments;
-      if (!inThrottle) {
-        func.apply(context, args);
-        inThrottle = true;
-        setTimeout(() => inThrottle = false, limit);
-      }
-    };
-  }
   function plugin(callback) {
     callback(alpine_default);
   }
@@ -2746,7 +2715,7 @@ Expression: "${expression}"
     get raw() {
       return raw;
     },
-    version: "3.4.0",
+    version: "3.2.4",
     disableEffectScheduling,
     setReactivityEngine,
     addRootSelector,
@@ -2757,8 +2726,6 @@ Expression: "${expression}"
     interceptor,
     mutateDom,
     directive,
-    throttle,
-    debounce,
     evaluate,
     initTree,
     nextTick,
@@ -2793,23 +2760,7 @@ Expression: "${expression}"
     }));
   });
   magic("store", getStores);
-  magic("root", (el) => closestRoot(el));
-  magic("refs", (el) => {
-    if (el._x_refs_proxy)
-      return el._x_refs_proxy;
-    el._x_refs_proxy = mergeProxies(getArrayOfRefObject(el));
-    return el._x_refs_proxy;
-  });
-  function getArrayOfRefObject(el) {
-    let refObjects = [];
-    let currentEl = el;
-    while (currentEl) {
-      if (currentEl._x_refs)
-        refObjects.push(currentEl._x_refs);
-      currentEl = currentEl.parentNode;
-    }
-    return refObjects;
-  }
+  magic("refs", (el) => closestRoot(el)._x_refs || {});
   magic("el", (el) => el);
   function setClasses(el, value) {
     if (Array.isArray(value)) {
@@ -3017,9 +2968,7 @@ Expression: "${expression}"
       };
   }
   window.Element.prototype._x_toggleAndCascadeWithTransitions = function(el, value, show, hide) {
-    let clickAwayCompatibleShow = () => {
-      document.visibilityState === "visible" ? requestAnimationFrame(show) : setTimeout(show);
-    };
+    let clickAwayCompatibleShow = () => requestAnimationFrame(show);
     if (value) {
       el._x_transition ? el._x_transition.in(show) : clickAwayCompatibleShow();
       return;
@@ -3299,7 +3248,7 @@ Expression: "${expression}"
     return booleanAttributes.includes(attrName);
   }
   function attributeShouldntBePreservedIfFalsy(name) {
-    return !["aria-pressed", "aria-checked", "aria-expanded"].includes(name);
+    return !["aria-pressed", "aria-checked"].includes(name);
   }
   function on(el, event, modifiers, callback) {
     let listenerTarget = el;
@@ -3351,12 +3300,12 @@ Expression: "${expression}"
     if (modifiers.includes("debounce")) {
       let nextModifier = modifiers[modifiers.indexOf("debounce") + 1] || "invalid-wait";
       let wait = isNumeric(nextModifier.split("ms")[0]) ? Number(nextModifier.split("ms")[0]) : 250;
-      handler3 = debounce(handler3, wait);
+      handler3 = debounce(handler3, wait, this);
     }
     if (modifiers.includes("throttle")) {
       let nextModifier = modifiers[modifiers.indexOf("throttle") + 1] || "invalid-wait";
       let wait = isNumeric(nextModifier.split("ms")[0]) ? Number(nextModifier.split("ms")[0]) : 250;
-      handler3 = throttle(handler3, wait);
+      handler3 = throttle(handler3, wait, this);
     }
     if (modifiers.includes("once")) {
       handler3 = wrapHandler(handler3, (next, e) => {
@@ -3375,6 +3324,29 @@ Expression: "${expression}"
   function camelCase2(subject) {
     return subject.toLowerCase().replace(/-(\w)/g, (match, char) => char.toUpperCase());
   }
+  function debounce(func, wait) {
+    var timeout;
+    return function() {
+      var context = this, args = arguments;
+      var later = function() {
+        timeout = null;
+        func.apply(context, args);
+      };
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+    };
+  }
+  function throttle(func, limit) {
+    let inThrottle;
+    return function() {
+      let context = this, args = arguments;
+      if (!inThrottle) {
+        func.apply(context, args);
+        inThrottle = true;
+        setTimeout(() => inThrottle = false, limit);
+      }
+    };
+  }
   function isNumeric(subject) {
     return !Array.isArray(subject) && !isNaN(subject);
   }
@@ -3426,9 +3398,7 @@ Expression: "${expression}"
       up: "arrow-up",
       down: "arrow-down",
       left: "arrow-left",
-      right: "arrow-right",
-      period: ".",
-      equal: "="
+      right: "arrow-right"
     };
     modifierToKeyMap[key] = key;
     return Object.keys(modifierToKeyMap).map((modifier) => {
@@ -3509,12 +3479,7 @@ Expression: "${expression}"
   }
   directive("cloak", (el) => queueMicrotask(() => mutateDom(() => el.removeAttribute(prefix("cloak")))));
   addInitSelector(() => `[${prefix("init")}]`);
-  directive("init", skipDuringClone((el, { expression }) => {
-    if (typeof expression === "string") {
-      return !!expression.trim() && evaluate(el, expression, {}, false);
-    }
-    return evaluate(el, expression, {}, false);
-  }));
+  directive("init", skipDuringClone((el, { expression }) => evaluate(el, expression, {}, false)));
   directive("text", (el, { expression }, { effect: effect3, evaluateLater: evaluateLater2 }) => {
     let evaluate2 = evaluateLater2(expression);
     effect3(() => {
@@ -3554,12 +3519,6 @@ Expression: "${expression}"
         cleanupRunners.pop()();
       getBindings((bindings) => {
         let attributes = Object.entries(bindings).map(([name, value]) => ({ name, value }));
-        attributesOnly(attributes).forEach(({ name, value }, index2) => {
-          attributes[index2] = {
-            name: `x-bind:${name}`,
-            value: `"${value}"`
-          };
-        });
         directives(el, attributes, original).map((handle) => {
           cleanupRunners.push(handle.runCleanups);
           handle();
@@ -3759,11 +3718,6 @@ Expression: "${expression}"
       names.forEach((name, i) => {
         scopeVariables[name] = item[i];
       });
-    } else if (/^\{.*\}$/.test(iteratorNames.item) && !Array.isArray(item) && typeof item === "object") {
-      let names = iteratorNames.item.replace("{", "").replace("}", "").split(",").map((i) => i.trim());
-      names.forEach((name) => {
-        scopeVariables[name] = item[name];
-      });
     } else {
       scopeVariables[iteratorNames.item] = item;
     }
@@ -8420,8 +8374,11 @@ Expression: "${expression}"
           this.$dispatch("nav:updated");
         });
       },
-      navigate($event) {
-        history.pushState({}, null, $event.currentTarget.href);
+      navigate(path) {
+        if (path instanceof Event) {
+          path = path.currentTarget.href;
+        }
+        history.pushState({}, null, path);
         this.$dispatch("popstate");
       },
       focusFilter() {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: lookbook
 version: !ruby/object:Gem::Version
-  version: 0.3.0.beta.1
+  version: 0.3.2
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-09-20 00:00:00.000000000 Z
+date: 2021-10-05 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,19 +207,20 @@ 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
 - app/views/lookbook/app/show.html.erb
 - app/views/lookbook/layouts/app.html.erb
-- app/views/lookbook/layouts/group.html.erb
 - app/views/lookbook/nav/_collection.html.erb
+- app/views/lookbook/nav/_leaf.html.erb
 - app/views/lookbook/nav/_node.html.erb
 - app/views/lookbook/nav/_preview.html.erb
+- 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
@@ -258,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:

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

@@ -1,6 +0,0 @@
-<% items.each do |item| %>
-  <div class="lookbook-example" style="margin-bottom: 30px;">
-    <h6 class="lookbook-example-label" style="color: #999; font-size: 14px; margin-bottom: 10px;"><%= item[:label] %></h6>
-    <%= item[:content] %>
-  </div>
-<% end %>