lookbook 0.2.1 → 0.3.0.beta.0

metadata

@@ -1,27 +1,27 @@
 --- !ruby/object:Gem::Specification
 name: lookbook
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.3.0.beta.0
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-08-19 00:00:00.000000000 Z
+date: 2021-09-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
         version: '6.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
         version: '6.0'
 - !ruby/object:Gem::Dependency
@@ -94,6 +94,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 0.9.25
+- !ruby/object:Gem::Dependency
+  name: htmlbeautifier
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.3'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.3'
 - !ruby/object:Gem::Dependency
   name: sqlite3
   requirement: !ruby/object:Gem::Requirement
@@ -176,31 +190,42 @@ files:
 - app/assets/lookbook/css/code_theme.css
 - app/assets/lookbook/css/tooltip_theme.css
 - app/assets/lookbook/js/app.js
-- app/assets/lookbook/js/preview.js
-- app/assets/lookbook/js/reloader.js
-- app/assets/lookbook/js/size_observer.js
-- app/assets/lookbook/js/split.js
+- app/assets/lookbook/js/nav.js
+- app/assets/lookbook/js/nav/leaf.js
+- app/assets/lookbook/js/nav/node.js
+- app/assets/lookbook/js/page.js
+- app/assets/lookbook/js/utils/clipboard.js
+- app/assets/lookbook/js/utils/morph.js
+- app/assets/lookbook/js/utils/reloader.js
+- app/assets/lookbook/js/utils/screen.js
+- app/assets/lookbook/js/utils/size_observer.js
+- app/assets/lookbook/js/utils/split.js
+- app/assets/lookbook/js/workbench.js
+- app/assets/lookbook/js/workbench/inspector.js
+- app/assets/lookbook/js/workbench/preview.js
 - app/channels/lookbook/connection.rb
 - app/channels/lookbook/reload_channel.rb
-- app/controllers/lookbook/browser_controller.rb
+- app/controllers/lookbook/app_controller.rb
 - app/helpers/lookbook/application_helper.rb
-- app/views/lookbook/browser/error.html.erb
-- app/views/lookbook/browser/index.html.erb
-- app/views/lookbook/browser/not_found.html.erb
-- app/views/lookbook/browser/show.html.erb
+- 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/partials/_icon_sprite.html.erb
-- app/views/lookbook/partials/_preview.html.erb
-- app/views/lookbook/partials/_sidebar.html.erb
-- app/views/lookbook/partials/inspector/_code.html.erb
-- app/views/lookbook/partials/inspector/_inspector.html.erb
-- app/views/lookbook/partials/inspector/_plain.html.erb
-- app/views/lookbook/partials/inspector/_prose.html.erb
-- app/views/lookbook/partials/nav/_collection.html.erb
-- app/views/lookbook/partials/nav/_label.html.erb
-- app/views/lookbook/partials/nav/_nav.html.erb
-- app/views/lookbook/partials/nav/_preview.html.erb
-- config/lookbook_cable.yml
+- app/views/lookbook/layouts/group.html.erb
+- app/views/lookbook/nav/_collection.html.erb
+- app/views/lookbook/nav/_node.html.erb
+- app/views/lookbook/nav/_preview.html.erb
+- app/views/lookbook/shared/_clipboard.html.erb
+- app/views/lookbook/shared/_header.html.erb
+- app/views/lookbook/workbench/_header.html.erb
+- app/views/lookbook/workbench/_inspector.html.erb
+- app/views/lookbook/workbench/_preview.html.erb
+- app/views/lookbook/workbench/inspector/_code.html.erb
+- app/views/lookbook/workbench/inspector/_notes.html.erb
+- app/views/lookbook/workbench/inspector/_plain.html.erb
 - config/routes.rb
 - lib/lookbook.rb
 - lib/lookbook/collection.rb
@@ -211,11 +236,13 @@ files:
 - lib/lookbook/preview.rb
 - lib/lookbook/preview_controller.rb
 - lib/lookbook/preview_example.rb
+- lib/lookbook/preview_group.rb
 - lib/lookbook/taggable.rb
 - lib/lookbook/version.rb
 - lib/tasks/lookbook_tasks.rake
 - public/lookbook-assets/app.css
 - public/lookbook-assets/app.js
+- public/lookbook-assets/feather-sprite.svg
 homepage: https://github.com/allmarkedup/lookbook
 licenses:
 - MIT
@@ -231,9 +258,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.1.2
 signing_key:

data/app/assets/lookbook/js/preview.js

@@ -1,76 +0,0 @@
-export default function preview() {
-  const app = Alpine.store("app");
-  const preview = Alpine.store("preview");
-  return {
-    init() {
-      this.root = this.$el;
-    },
-    onResize(e) {
-      const size =
-        this.resizeStartSize - (this.resizeStartPosition - e.pageX) * 2;
-      const parentSize = this.root.parentElement.clientWidth;
-      const percentSize = (Math.round(size) / parentSize) * 100;
-      const minWidth = (300 / parentSize) * 100;
-      preview.width = `${Math.min(Math.max(percentSize, minWidth), 100)}%`;
-    },
-    onResizeStart(e) {
-      app.reflowing = true;
-      this.onResize = this.onResize.bind(this);
-      this.onResizeEnd = this.onResizeEnd.bind(this);
-      this.resizeStartPosition = e.pageX;
-      this.resizeStartSize = this.root.clientWidth;
-      window.addEventListener("pointermove", this.onResize);
-      window.addEventListener("pointerup", this.onResizeEnd);
-    },
-    onResizeEnd(e) {
-      window.removeEventListener("pointermove", this.onResize);
-      window.removeEventListener("pointerup", this.onResizeEnd);
-      app.reflowing = false;
-    },
-    handle: {
-      ["@pointerdown"]: "onResizeStart",
-      ["@dblclick"]() {
-        if (preview.width === "100%" && preview.lastWidth) {
-          preview.width = preview.lastWidth;
-        } else {
-          preview.lastWidth = preview.width;
-          preview.width = "100%";
-        }
-      },
-    },
-  };
-}
-
-// export default function (dimension, store, { shrink = false, centered = false } = {}) {
-//   const position = (e) => (dimension == "height" ? e.pageY : e.pageX);
-//   const pane = {
-//     onResize(e) {
-//       let size =
-//         this.resizeStartSize -
-//         (shrink
-//           ? (this.resizeStartPosition - position(e)) * (centered ? 2 : 1)
-//           : (position(e) - this.resizeStartPosition) * (centered ? 2 : 1));
-//       const parentSize =
-//         dimension == "height"
-//           ? this.$el.parentElement.clientHeight
-//           : this.$el.parentElement.clientWidth;
-//       const percentSize = (Math.round(size) / parentSize) * 100;
-//       store[dimension] = `${Math.min(Math.max(percentSize, 0), 100)}%`;
-//     },
-//     onResizeStart(e) {
-//       Spruce.store("app").reflowing = true;
-//       this.resizeStartPosition = position(e);
-//       this.resizeStartSize = dimension == "height" ? this.$el.clientHeight : this.$el.clientWidth;
-//       this.onResize = this.onResize.bind(this);
-//       this.onResizeEnd = this.onResizeEnd.bind(this);
-//       window.addEventListener("pointermove", this.onResize);
-//       window.addEventListener("pointerup", this.onResizeEnd);
-//     },
-//     onResizeEnd() {
-//       Spruce.store("app").reflowing = false;
-//       window.removeEventListener("pointermove", this.onResize);
-//       window.removeEventListener("pointerup", this.onResizeEnd);
-//     },
-//   };
-//   return pane;
-// };

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

@@ -1,8 +0,0 @@
-<div class="flex flex-col items-center justify-center h-screen w-full">
-  <div class="p-4 text-center">
-    <svg class="feather w-10 h-10 text-gray-300 mx-auto">
-      <use xlink:href="#layers" />
-    </svg>
-    <h5 class="mt-4 text-gray-400 text-base">Select a preview to get started</h5>
-  </div>
-</div>

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

@@ -1,33 +0,0 @@
-<div class="bg-gray-50 h-full flex flex-col" x-data="{viewportHeight: 0, viewportWidth: 0}">
-
-  <header class="py-2 px-4 w-full flex-none bg-white border-b border-gray-300 flex items-center h-10">
-    <div class="flex items-center ">
-      <div class="flex items-center space-x-1">
-        <strong><%= @preview.label %></strong>
-        <span>/</span>
-        <span><%= @example.label %></span>
-      </div>
-      <a href="<%= preview_path %>" class="block ml-2 text-gray-400 hover:text-indigo-800 transition" x-tooltip.theme.lookbook="`Open preview in new window`" target="_blank">
-        <svg class="feather w-3 h-3 ">
-          <use xlink:href="#external-link" />
-        </svg>
-      </a>
-    </div>
-    <div class="ml-auto flex text-xs font-monospace text-gray-700 space-x-1">
-      <span x-text="`${viewportWidth}px`"></span>
-      <span class="text-gray-500">x</span>
-      <span x-text="`${viewportHeight}px`"></span>
-    </div>
-  </header>
-
-  <div class="grid h-full" x-data :style="`grid-template-rows: 1fr 1px ${$store.inspector.height}px`">
-    <%= render "partials/preview" %>
-    <div class="w-full gutter border-t border-gray-300 relative" x-data="split({direction: 'vertical', minSize: 200, onDrag: (splits) => { $store.inspector.height = splits[2] }})">
-      <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 "partials/inspector/inspector" %>
-    <% end %>
-  </div>
-    
-</div>

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

@@ -1,18 +0,0 @@
-<div class="w-full bg-gray-50">
-  <div class="h-full relative mx-auto bg-white" x-data="preview" :style="`width: ${$store.preview.width}`">
-    <iframe
-      src="<%= url_for lookbook.preview_path %>"
-      srcdoc="<%== @preview_srcdoc %>"
-      frameborder="0"
-      class="h-full w-full border-l border-gray-300 pr-4 -mx-px"
-      x-data="sizeObserver"
-      x-effect="viewportWidth = observedWidth; viewportHeight = observedHeight;"
-      seamless></iframe>
-    <div class="absolute opacity-0 inset-0 pointer-events-none" :class="{ 'pointer-events-none': !$store.app.reflowing }"></div>
-    <div x-bind="handle" class="border-l border-r border-gray-300 bg-white hover:bg-indigo-100 hover:bg-opacity-20 transition absolute right-0 inset-y-0 flex items-center w-4 cursor-[col-resize] select-none" style="touch-action: none">
-      <svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
-        <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
-      </svg>
-    </div>
-  </div>
-</div>

data/app/views/lookbook/partials/_sidebar.html.erb

@@ -1,21 +0,0 @@
-<div class="h-screen overflow-hidden" x-data="{open: $store.nav.open, isOpen(id){ return this.open[id] }}" @popstate.window="$store.nav.active = document.location.pathname">
-  <div class="bg-white h-10 border-b border-gray-300 flex items-center relative">
-    <input type="text"
-      class="text-sm px-4 h-10 w-full border-0 bg-transparent focus:outline-none outline-none focus:ring-0"
-      x-model="$store.nav.filter"
-      @keyup.stop="if ($event.key === 'Escape') $store.nav.filter = ''"
-      placeholder="Filter previews&hellip;">
-    <button class="text-gray-400 hover:text-indigo-500 focus:ring-0 focus:outline-none absolute top-1/2 right-2 transform -translate-y-1/2" @click="$store.nav.filter = ''">
-      <svg class="feather w-3 h-3">
-        <use xlink:href="#x" />
-      </svg>
-    </button>
-  </div>
-  <div
-    class="bg-gray-100 relative overflow-auto"
-    style="height: calc(100% - 40px)"
-    @scroll.passive="$store.nav.scrollTop = $event.currentTarget.scrollTop;"
-    x-init="setTimeout(() => {$el.scrollTop = $store.nav.scrollTop}, 30)">
-    <%= render "partials/nav/nav" %>
-  </div> 
-</div>

data/app/views/lookbook/partials/inspector/_code.html.erb

@@ -1 +0,0 @@
-<pre class="h-full"><code class="h-full p-4 block highlight font-monospace" style="background-image: none"><%== highlight(content.strip, lang[:name]) %></code></pre>

data/app/views/lookbook/partials/inspector/_inspector.html.erb

@@ -1,43 +0,0 @@
-<div id="inspector" class="bg-white w-full overflow-hidden flex flex-col">
-   <div class="px-4 border-b border-gray-200 flex items-center flex-none select-none cursor-[ns-resize]">
-    <nav class="-mb-px flex space-x-8 cursor-auto">
-      <% @inspector[:panes].each do |key, props| %>
-        <a
-          href="#<%= key %>"
-          class="whitespace-nowrap py-2 px-1 border-b-2 cursor-pointer <%= "!text-gray-300" if props[:disabled] %>"
-          :class="{
-            'border-indigo-400 ': $store.inspector.active === '<%= key %>',
-            'border-transparent text-gray-500 hover:text-gray-700': $store.inspector.active !== '<%= key %>'
-          }"
-          @click.stop.prevent="$store.inspector.active = '<%= key %>'"
-        >
-          <%== props[:label] %>
-        </a>
-      <% end %>
-    </nav>
-  </div>
-  <div class="flex-auto overflow-auto bg-gray-50">
-    <% @inspector[:panes].each do |key, props| %>
-      <div
-        class="flex flex-col h-full relative"
-        x-show="$store.inspector.active === '<%= key %>'" x-cloak>
-        <% if props[:clipboard].present? %>
-          <button
-            class="p-1.5 border-b border-l border-gray-200 hover:border-gray-300 rounded-bl-md bg-white absolute top-0 right-0 text-gray-400 hover:text-indigo-500 transition"
-            x-data="{content: null, done: false}"
-            x-tooltip.theme.lookbook="done ? 'cpied!' : 'copy to clipboard'"
-            data-tippy-placement="left"
-            @click="$clipboard(content); done = true; setTimeout(() => {done = false}, 1000)">
-            <svg class="feather h-4 w-4 ">
-              <use x-bind:href="done ? '#check' : '#clipboard'" />
-            </svg>
-            <div class="hidden" x-init="content = $el.innerText"><%= h props[:clipboard].strip %></div>
-          </button>
-        <% end %>
-        <div class="flex flex-col h-full overflow-auto">
-          <%= render "partials/inspector/#{props[:template]}", key: key, **props %>
-        </div>
-      </div>
-    <% end %>
-  </div>
-</div>

data/app/views/lookbook/partials/inspector/_prose.html.erb

@@ -1,3 +0,0 @@
-<div class="p-4 text-gray-600 prose prose-sm">
-  <%= markdown(content) %>
-</div>

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

@@ -1,17 +0,0 @@
-<li <% if collection.hierarchy_depth == 1 %> class="py-1 border-b border-gray-300 cursor-pointer"<% end %> data-type="collection"
-  x-data="{id: '<%= collection.id %>', hidden: false}"
-  @filtered="$nextTick(() => {hidden = !$el.querySelectorAll('[data-type=preview]:not(.hidden)').length})"
-  :class="{hidden}">
-  <div @click="open[id] = !open[id]" style="<%= nav_padding_style(collection.hierarchy_depth) %>">
-    <%= render "partials/nav/label", text: collection.label, icon: "folder" %>
-  </div>
-  <ul x-show="isOpen(id)" x-cloak>
-    <% collection.items.each do |item| %>
-      <% if item.type == :collection %>
-        <%= render "partials/nav/collection", collection: item %>
-      <% elsif item.type == :preview %>
-        <%= render "partials/nav/preview", preview: item %>
-      <% end %>
-    <% end %> 
-  </ul>
-</li>

data/app/views/lookbook/partials/nav/_label.html.erb

@@ -1,13 +0,0 @@
-<% bold ||= false %>
-<div class="flex items-center cursor-pointer pr-3 py-[4px]">
-  <svg class="feather w-3 h-3 mr-1 text-gray-500 flex-none">
-    <use xlink:href="#chevron-down" x-show="isOpen(id)" x-cloak />
-    <use xlink:href="#chevron-right" x-show="!isOpen(id)" />
-  </svg>
-  <svg class="feather h-3.5 w-3.5 mr-1.5 flex-none text-indigo-500">
-    <use xlink:href="#<%= icon %>" />
-  </svg>
-  <div class="truncate whitespace-nowrap text-left <%= "font-bold" if bold %>">
-    <%= text %>
-  </div>
-</div>

data/app/views/lookbook/partials/nav/_nav.html.erb

@@ -1,27 +0,0 @@
-<nav id="nav"
-  class="select-none"
-  x-data="{empty: false}"
-  @filtered="$nextTick(() => {
-    setTimeout(() => {empty = !$el.querySelectorAll('#nav > ul > li:not(.hidden)').length}, 0)
-  })"
-  @document:updated.document="$el.innerHTML = $event.detail.doc.getElementById('nav').innerHTML">
-  <% if @nav.items.any? %>
-    <ul>
-      <% @nav.items.each do |item| %>
-        <% if item.type == :collection %>
-          <%= render "partials/nav/collection", collection: item %>
-        <% else %>
-          <%= render "partials/nav/preview", preview: item %>
-        <% end %>
-      <% end %>
-    </ul>
-    <div class="p-4 text-center" x-show="empty" x-cloak>
-      <em class="text-gray-400">No matching previews found.</em>
-    </div>
-  <% else %>
-    <div class="p-4">
-      <h4 class="text-gray-500 mb-1">No previews found.</h4>
-      <p class="text-gray-400 text-xs">Have you set your <a class="underline" href="https://viewcomponent.org/api.html#preview_paths">preview paths</a> config correctly?</p>
-    </div>
-  <% end %>
-</nav>

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

@@ -1,48 +0,0 @@
-<% examples = preview.get_examples %>
-<li
-  data-type="preview"
-  x-data="{
-    id: '<%= preview.lookbook_id %>',
-    hidden: false,
-    examples: <%= examples.map { |e| {id: e.id, matched: true, filter: e.filter_match_string} }.to_json %>,
-    update(){
-      this.examples.forEach(e => { e.matched = $store.nav.shouldDisplay(e.filter) });
-      this.hidden = !this.examples.filter(e => e.matched).length;
-      this.$dispatch('filtered');
-    }
-  }"
-  x-init="
-    $watch('$store.nav.filter', (value) => update()); update()"
-  :class="{hidden}"
-  <% if preview.hierarchy_depth == 1 %> class="py-1 border-b border-gray-300 cursor-pointer"<% end %>>
-  <div @click="open[id] = !open[id]" style="<%= nav_padding_style(preview.hierarchy_depth) %>">
-    <%= render "partials/nav/label", text: preview.label, icon: "layers", bold: true %>
-  </div>
-  <ul x-show="isOpen(id)" x-cloak>
-    <% examples.each do |example| %>
-      <li x-show="examples.find(e => e.id === '<%= example.id %>').matched">
-        <a
-          x-data="{path: '<%= show_path example.path %>'}"
-          :href="path"
-          class="pr-3 py-[3px] flex items-center w-full group transition hover:bg-gray-200 hover:bg-opacity-50"
-          :class="{'!bg-indigo-100': location === path}"
-          style="<%= nav_padding_style(example.hierarchy_depth + 1) %>"
-          @click.stop.prevent="history.pushState({}, null, $event.currentTarget.href); $dispatch('popstate');"
-        >
-          <div :class="{'text-gray-900': location === path, 'text-indigo-500': location !== path}">
-            <svg class="feather w-3.5 h-3.5 mr-1.5 flex-none group-hover:text-indigo-800 transition">
-              <use xlink:href="#eye" />
-            </svg>
-          </div>
-          <div class="truncate whitespace-nowrap">
-            <%= example.label %>
-          </div>
-        </a>
-      </li>
-    <% end %>
-  </ul>
-</li>
-<% if false %>
-  
-  
-<% end %>

data/config/lookbook_cable.yml

@@ -1,8 +0,0 @@
-development:
-  adapter: async
-
-test:
-  adapter: async
-
-production:
-  adapter: async