lookbook 0.3.0.beta.1 → 0.3.0.beta.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6b0d42f049a62be24079955f108c14f4b7b73b8b0f0a677639cce865e2260006
-  data.tar.gz: db6d156648495478cdcd55101065cb3875cfbdfb2b9bce3f924e37a11b2b789b
+  metadata.gz: 61d3cbcc3579d9a79aaa03fb87bda891923c10aed37eb78f11ef948b09b99ed9
+  data.tar.gz: 9ac3803965a4d9fc17eed96bb8a2e2a0821c78019e061032fa5f22276edbe321
 SHA512:
-  metadata.gz: 15a7f9761f859bfdc9965801aba418e30fc95520635fc1a03dd9ff63af5e73e98563bc8d16420ae705824f18dffcdc9f834b57547815c4ab5cf899aba831e2e3
-  data.tar.gz: 889cea13089b40fa493c7ca39e6ff871f9db6432b9fffa1b57ab1a3a686b6e04ee2d0e3859093abcea386ccd67e2d7fe3aeaf2acf239632c535332d2a35e2ae3
+  metadata.gz: 4d902210204c1f779a535dcf6aec261b827ff92cef73ce384f2d791ccc0fb85ff0f5de0d56f2cf19aeff67f5190a1ea753b1f6d2016108bc7fe3be55b8b0930e
+  data.tar.gz: 3d52cc3c23b60d1cc8fdef2f753ff7e80ad858e0f2eec598212307cfa0338b69b87071fd3fa45a3848f303533f033b1c55dc0995ba15364c9f831daa2c893338

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 "./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/nav/_leaf.html.erb

@@ -0,0 +1,21 @@
+<%
+path = show_path leaf.path
+display ||= :leaf
+%>
+<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 %>">
+      <%= leaf.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 %>
-<% end %>
-
-    
+<% else %>
+  <% example = examples.first %>
+  <%= render "./nav/leaf", leaf: example, depth: example.hierarchy_depth, 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/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.0.beta.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;
 }
@@ -1492,22 +1480,6 @@ pre[class*="language-"] {
   bottom: 0px;
 }
 
-.top-\[-2px\] {
-  top: -2px;
-}
-
-.left-\[-2px\] {
-  left: -2px;
-}
-
-.top-\[4px\] {
-  top: 4px;
-}
-
-.left-\[4px\] {
-  left: 4px;
-}
-
 .left-4 {
   left: 1rem;
 }
@@ -1541,14 +1513,18 @@ 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;
 }
@@ -1862,16 +1838,16 @@ pre[class*="language-"] {
   padding-right: 1rem;
 }
 
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-
 .py-\[5px\] {
   padding-top: 5px;
   padding-bottom: 5px;
 }
 
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1973,14 +1949,14 @@ pre[class*="language-"] {
   color: rgba(31, 41, 55, var(--tw-text-opacity));
 }
 
-.text-indigo-500 {
+.text-gray-900 {
   --tw-text-opacity: 1;
-  color: rgba(99, 102, 241, var(--tw-text-opacity));
+  color: rgba(17, 24, 39, var(--tw-text-opacity));
 }
 
-.text-gray-900 {
+.text-indigo-500 {
   --tw-text-opacity: 1;
-  color: rgba(17, 24, 39, var(--tw-text-opacity));
+  color: rgba(99, 102, 241, var(--tw-text-opacity));
 }
 
 .\!text-gray-300 {

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.0.beta.2
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-09-20 00:00:00.000000000 Z
+date: 2021-09-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -214,10 +214,11 @@ files:
 - 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/workbench/_header.html.erb

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