RubyGems - lookbook - Versions diffs - 0.4.5 → 0.5.0.beta.0 - Mend

lookbook 0.4.5 → 0.5.0.beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (102) hide show

checksums.yaml +4 -4
data/README.md +8 -4
data/app/assets/lookbook/css/app.css +63 -5
data/app/assets/lookbook/css/tooltip_theme.css +28 -0
data/app/assets/lookbook/js/app.js +40 -54
data/app/assets/lookbook/js/components/copy.js +16 -0
data/app/assets/lookbook/js/components/filter.js +24 -0
data/app/assets/lookbook/js/components/inspector.js +58 -0
data/app/assets/lookbook/js/{nav/node.js → components/nav-group.js} +17 -16
data/app/assets/lookbook/js/components/nav-item.js +27 -0
data/app/assets/lookbook/js/components/nav.js +35 -0
data/app/assets/lookbook/js/components/page.js +45 -0
data/app/assets/lookbook/js/components/param.js +32 -0
data/app/assets/lookbook/js/components/preview-window.js +107 -0
data/app/assets/lookbook/js/components/sidebar.js +3 -0
data/app/assets/lookbook/js/components/sizes.js +16 -0
data/app/assets/lookbook/js/components/splitter.js +25 -0
data/app/assets/lookbook/js/components/tabs.js +50 -0
data/app/assets/lookbook/js/config.js +20 -0
data/app/assets/lookbook/js/{utils/reloader.js → lib/socket.js} +7 -12
data/app/assets/lookbook/js/lib/split.js +21 -0
data/app/assets/lookbook/js/lib/utils.js +3 -0
data/app/assets/lookbook/js/stores/filter.js +11 -0
data/app/assets/lookbook/js/stores/inspector.js +24 -0
data/app/assets/lookbook/js/stores/layout.js +12 -0
data/app/assets/lookbook/js/stores/nav.js +21 -0
data/app/assets/lookbook/js/stores/sidebar.js +14 -0
data/app/controllers/lookbook/app_controller.rb +71 -96
data/app/helpers/lookbook/application_helper.rb +48 -4
data/app/views/layouts/lookbook/app.html.erb +58 -0
data/app/views/layouts/lookbook/preview.html.erb +12 -0
data/app/views/lookbook/components/_code.html.erb +8 -0
data/app/views/lookbook/components/_copy.html.erb +14 -0
data/app/views/lookbook/components/_drawer.html.erb +121 -0
data/app/views/lookbook/components/_filter.html.erb +15 -0
data/app/views/lookbook/{shared → components}/_header.html.erb +3 -3
data/app/views/lookbook/components/_icon.html.erb +5 -0
data/app/views/lookbook/components/_nav.html.erb +17 -0
data/app/views/lookbook/components/_nav_collection.html.erb +5 -0
data/app/views/lookbook/components/_nav_group.html.erb +14 -0
data/app/views/lookbook/components/_nav_item.html.erb +23 -0
data/app/views/lookbook/components/_nav_preview.html.erb +11 -0
data/app/views/lookbook/components/_param.html.erb +24 -0
data/app/views/lookbook/components/_preview.html.erb +52 -0
data/app/views/lookbook/{app/error.html.erb → error.html.erb} +0 -0
data/app/views/lookbook/index.html.erb +9 -0
data/app/views/lookbook/{workbench/inspector/params → inputs}/_select.html.erb +2 -2
data/app/views/lookbook/{workbench/inspector/params → inputs}/_text.html.erb +3 -2
data/app/views/lookbook/inputs/_textarea.html.erb +9 -0
data/app/views/lookbook/{workbench/inspector/params → inputs}/_toggle.html.erb +5 -5
data/app/views/lookbook/{app/not_found.html.erb → not_found.html.erb} +2 -4
data/app/views/lookbook/panels/_notes.html.erb +25 -0
data/app/views/lookbook/panels/_output.html.erb +18 -0
data/app/views/lookbook/panels/_params.html.erb +17 -0
data/app/views/lookbook/panels/_source.html.erb +20 -0
data/app/views/lookbook/show.html.erb +73 -0
data/lib/lookbook/code_formatter.rb +20 -0
data/lib/lookbook/engine.rb +8 -1
data/lib/lookbook/lang.rb +10 -5
data/lib/lookbook/preview.rb +1 -1
data/lib/lookbook/preview_controller.rb +1 -1
data/lib/lookbook/preview_group.rb +5 -1
data/lib/lookbook/version.rb +1 -1
data/lib/lookbook.rb +2 -0
data/public/lookbook-assets/css/app.css +4 -0
data/public/lookbook-assets/css/app.css.map +1 -0
data/public/lookbook-assets/js/app.js +2 -0
data/public/lookbook-assets/js/app.js.map +1 -0
metadata +58 -45
data/app/assets/lookbook/js/nav/leaf.js +0 -20
data/app/assets/lookbook/js/nav.js +0 -38
data/app/assets/lookbook/js/page.js +0 -38
data/app/assets/lookbook/js/utils/clipboard.js +0 -13
data/app/assets/lookbook/js/utils/morph.js +0 -19
data/app/assets/lookbook/js/utils/screen.js +0 -44
data/app/assets/lookbook/js/utils/size_observer.js +0 -16
data/app/assets/lookbook/js/utils/split.js +0 -26
data/app/assets/lookbook/js/workbench/inspector.js +0 -11
data/app/assets/lookbook/js/workbench/param.js +0 -19
data/app/assets/lookbook/js/workbench/preview.js +0 -39
data/app/assets/lookbook/js/workbench.js +0 -14
data/app/views/lookbook/app/index.html.erb +0 -11
data/app/views/lookbook/app/show.html.erb +0 -1
data/app/views/lookbook/layouts/app.html.erb +0 -41
data/app/views/lookbook/nav/_collection.html.erb +0 -5
data/app/views/lookbook/nav/_leaf.html.erb +0 -22
data/app/views/lookbook/nav/_node.html.erb +0 -19
data/app/views/lookbook/nav/_preview.html.erb +0 -11
data/app/views/lookbook/preview/group.html.erb +0 -8
data/app/views/lookbook/shared/_clipboard.html.erb +0 -11
data/app/views/lookbook/shared/_sidebar.html.erb +0 -45
data/app/views/lookbook/shared/_workbench.html.erb +0 -12
data/app/views/lookbook/workbench/_header.html.erb +0 -39
data/app/views/lookbook/workbench/_inspector.html.erb +0 -38
data/app/views/lookbook/workbench/_preview.html.erb +0 -24
data/app/views/lookbook/workbench/inspector/_code.html.erb +0 -3
data/app/views/lookbook/workbench/inspector/_notes.html.erb +0 -24
data/app/views/lookbook/workbench/inspector/_params.html.erb +0 -28
data/app/views/lookbook/workbench/inspector/_plain.html.erb +0 -3
data/app/views/lookbook/workbench/inspector/params/_textarea.html.erb +0 -8
data/public/lookbook-assets/app.css +0 -2626
data/public/lookbook-assets/app.js +0 -8718

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

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en" class="h-screen">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+  <link href="/lookbook-assets/css/app.css?v=<%= Lookbook::VERSION %>" rel="stylesheet">
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👀</text></svg>">
+  <% if config.auto_refresh %>
+    <script>
+      window.SOCKET_PATH = "<%= Lookbook::Engine.websocket_mount_path %>";
+    </script>
+  <% end %>
+  <script src="/lookbook-assets/js/app.js?v=<%= Lookbook.version %>" defer></script>
+  <title><%= [@example&.label, @preview&.label, "Lookbook"].compact.join(" :: ") %></title>
+</head>
+<body class="text-gray-800 font-sans text-sm antialiased overflow-hidden">
+  <div
+    id="page"
+    x-data="page"
+    :style="`grid-template-columns: ${$store.sidebar.width}px 1px 1fr;`"
+    @popstate.window="update"
+    @resize.window="$store.layout.desktop = window.innerWidth >= $store.layout.desktopWidth"
+    class="md:grid w-screen h-screen"
+  >
+    <div class="h-full bg-gray-100 overflow-hidden flex flex-col" x-show="$store.layout.desktop || $store.sidebar.open" x-cloak>
+      <div class="bg-white h-10 border-b border-gray-300 flex flex-none items-center relative">
+        <button class="flex-none ml-4 md:hidden" @click="$store.sidebar.toggle">
+          <%= icon "x", size: 4, class: "hover:text-indigo-500" %>
+        </button>
+        <%= component "filter" %>
+      </div>
+      <div class="flex-grow overflow-y-auto">
+        <%= component "nav", items: @nav.items %>
+      </div>
+    </div>
+    <div
+      x-data="splitter('vertical', {minSize: $store.sidebar.minWidth})"
+      class="h-full gutter border-r border-gray-300 relative"
+      x-show="$store.layout.desktop"
+      x-effect="$store.sidebar.width = Math.min(splits[0] || $store.sidebar.width, $store.sidebar.maxWidth)"
+      x-cloak
+    >
+      <div class="w-[9px] h-full bg-transparent hover:bg-indigo-100 hover:bg-opacity-20 transition absolute top-0 bottom-0 -translate-x-1/2 cursor-[col-resize] z-10"></div>
+    </div>
+    <main
+      id="main"
+      class="h-full overflow-hidden w-full"
+      x-show="$store.layout.desktop || !$store.sidebar.open" x-cloak
+    >
+      <%= yield %>
+    </main>
+  </div>
+</body>
+</html>

data/app/views/layouts/lookbook/preview.html.erb ADDED Viewed

@@ -0,0 +1,12 @@
+<% if examples.many? %>
+  <% examples.each do |example| %>
+    <div style="all: unset; margin-bottom: 30px; display: block;">
+      <h6 style="all: unset; display: block; color: #999; font-family: sans-serif; font-size: 14px; margin-top: 0; margin-bottom: 10px;">
+        <%= example[:label] %>
+      </h6>
+      <%= example[:html] %>
+    </div>
+  <% end %>
+<% else %>
+  <%= examples.first[:html] %>
+<% end %>

data/app/views/lookbook/components/_code.html.erb ADDED Viewed

@@ -0,0 +1,8 @@
+<%
+line_numbers ||= false
+language ||= "html"
+%>
+<% code = capture do %><%= yield %><% end %>
+<div class="code <%= "numbered" if line_numbers %> <%= classes %>">
+  <pre><code class="highlight"><%= highlight(code.strip, language, line_numbers: line_numbers) %></code></pre>
+</div>

data/app/views/lookbook/components/_copy.html.erb ADDED Viewed

@@ -0,0 +1,14 @@
+<button
+  class="text-gray-400 transition"
+  x-data="copy('<%= target %>')"
+  x-tooltip.theme.lookbook="done ? 'copied!' : 'copy to clipboard'"
+  @click="save"
+  :class="{'!text-green-600 hover:text-green-600': done, 'hover:text-indigo-500': !done}"
+  data-tippy-placement="left"
+  <% if defined?(show) %>
+    x-show="<%= show %>"
+    x-cloak
+  <% end %>
+  >
+  <%= icon "${done ? 'check' : 'clipboard'}", size: 4 %>
+</button>

data/app/views/lookbook/components/_drawer.html.erb ADDED Viewed

@@ -0,0 +1,121 @@
+<div id="drawer" class="bg-white w-full h-full flex flex-col min-w-0">
+  <div class="px-4 border-b border-gray-200 select-none flex-none" x-show="!drawerHidden">
+    <div class="-mb-px flex cursor-auto relative">
+      <div
+        id="inspector-tabs-<%= example.id %>"
+        x-data="tabs"
+        class="min-w-0"
+        x-effect="$store.inspector.drawer.visibleTabCount = visibleTabCount"
+      >
+        <nav x-ref="tabs" class="flex h-10 space-x-8 flex-grow pr-8">
+          <% panels.each.with_index(1) do |(key,props),i| %>
+            <a
+              id="inspector-tab-<%= key %>-<%= example.id %>"
+              href="#inspector-panel-<%= key %>"
+              class="whitespace-nowrap pt-2.5 pb-1.5 px-1 border-b-2 cursor-pointer <%= "!text-gray-300" if props[:disabled] %>"
+              :class="{
+                'border-indigo-400': isActivePanel('<%= key %>'),
+                'border-transparent text-gray-500 hover:text-gray-700': !isActivePanel('<%= key %>'),
+                'invisible': (<%= i %> > visibleTabCount)
+              }"
+              @click.stop.prevent="switchPanel('<%= key %>')"
+              <% if props[:hotkey] %>data-hotkey="<%= props[:hotkey] %>"<% end %>
+            >
+              <%== props[:label] %>
+            </a>
+          <% end %>
+          <div
+            x-ref="toggle"
+            x-show="visibleTabCount !== tabs.length"
+            class="flex-none absolute top-[9px]"
+            :style="`left: ${tabsWidth - 48}px`"
+          >
+            <button class="py-1 px-2 text-gray-500 hover:text-indigo-800">
+              <%= icon "chevrons-right", size: 3.5 %>
+            </button>
+          </div>
+        </nav>
+        <nav class="hidden">
+          <div x-ref="dropdown" class="min-w-[120px]">
+            <% panels.each.with_index(1) do |(key,props),i| %>
+              <template id="inspector-dropdown-tab-<%= key %>-<%= example.id %>" x-if="<%= i %> > $store.inspector.drawer.visibleTabCount">
+                <div :class="{'border-t border-gray-300': (<%= i %> > $store.inspector.drawer.visibleTabCount + 1)}">
+                  <a
+                    href="#inspector-panel-<%= key %>"
+                    class="block whitespace-nowrap py-2 px-4 border-l-2 cursor-pointer <%= "!text-gray-300" if props[:disabled] %>"
+                    :class="{
+                      'border-indigo-400': $store.inspector.drawer.active === '<%= key %>',
+                      'border-transparent text-gray-500 hover:text-gray-700': $store.inspector.drawer.active !== '<%= key %>',
+                    }"
+                    @click.stop.prevent=" hideDropdown(); switchPanel('<%= key %>')"
+                  >
+                    <%== props[:label] %>
+                  </a>
+                </div>
+              </template>
+            <% end %>
+          </div>
+        </nav>
+      </div>
+      <div class="flex items-center ml-auto pl-8 space-x-3">
+        <% panels.each do |key, props| %>
+          <div
+            ref="<%= "inspector-panel-#{example.id}-#{key}-copy" %>"
+            class="flex items-center"
+            :class="{'pointer-events-none opacity-30': <%= !props[:copy].present? %>}"
+            x-show="isActivePanel('<%= key %>')"
+          >
+            <button
+              class="text-gray-400 transition"
+              x-data="copy('<%= "inspector-panel-#{example.id}-#{key}-clipboard" %>')"
+              x-tooltip.theme.lookbook="done ? 'copied!' : 'copy to clipboard'"
+              @click="save"
+              :class="{
+                '!text-green-600 hover:text-green-600': done,
+                'hover:text-indigo-500': !done}"
+              x-cloak
+              <% unless props[:copy].present? %>disabled<% end %>
+            >
+              <%= icon "${done ? 'check' : 'clipboard'}", size: 4 %>
+            </button>
+          </div>
+        <% end %>
+        <button
+          x-tooltip.theme.lookbook="`switch orientation`"
+          @click="toggleOrientation"
+          :class="{'pointer-events-none opacity-30': !canBeVertical}"
+        >
+          <%= icon "${horizontal ? 'sidebar' : 'credit-card'}",
+            size: 4,
+            class: "scale-[-1] text-gray-400 hover:text-indigo-800" %>
+        </button>
+        <button
+          x-tooltip.theme.lookbook="`close drawer`"
+          @click="toggleDrawer"
+        >
+          <%= icon "x",
+            size: 4,
+            class: "text-gray-400 hover:text-indigo-800" %>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div class="bg-white relative flex-grow">
+    <% panels.each do |key, props| %>
+      <div
+        class="h-full w-full absolute inset-0"
+        x-show="$store.inspector.drawer.active === '<%= key %>'"
+        x-cloak
+      >
+        <div id="inspector-panel-<%= example.id %>-<%= key %>" class="h-full">
+          <%= render props[:template],
+            key: key,
+            examples: examples,
+            clipboard_id: "inspector-panel-#{example.id}-#{key}-clipboard",
+            **props %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/lookbook/components/_filter.html.erb ADDED Viewed

@@ -0,0 +1,15 @@
+<div x-data="filter" class="flex items-center w-full">
+  <input
+    type="text"
+    class="text-sm px-4 h-10 w-full border-0 bg-transparent focus:outline-none outline-none focus:ring-0"
+    placeholder="Filter previews&hellip;"
+    x-ref="input"
+    x-model="$store.filter.raw"
+    x-effect="if (!$store.layout.desktop && $store.sidebar.open) focus()"
+    @keyup.stop="checkEsc"
+    @keyup.f.document="focus"
+  >
+  <button class="text-gray-400 hover:text-indigo-500 focus:ring-0 focus:outline-none absolute top-1/2 right-2 -translate-y-1/2" @click="clear">
+    <%= icon "x", size: 3, class: "hover:text-indigo-500" %>
+  </button>
+</div>

data/app/views/lookbook/{shared → components}/_header.html.erb RENAMED Viewed

@@ -1,8 +1,8 @@
-<header class="py-2 px-4 w-full flex-none bg-white border-b border-gray-300 flex items-center h-10">
-  <button class="flex-none mr-3" x-show="!$screen('md')" @click="$dispatch('sidebar:toggle')">
+<header class="py-2 px-4 w-full flex-none bg-white border-b border-gray-300 flex items-center h-10 select-none  min-w-0">
+  <button class="flex-none mr-3" x-show="!$store.layout.desktop" @click="$store.sidebar.toggle">
     <svg class="feather w-5 h-5 hover:text-indigo-500 transition">
       <use xlink:href="/lookbook-assets/feather-sprite.svg#menu" />
     </svg>
   </button>
   <%= yield %>
-</header>
+</header>

data/app/views/lookbook/components/_icon.html.erb ADDED Viewed

@@ -0,0 +1,5 @@
+<i class="transition block flex-none leading-none w-<%= size %> h-<%= size %> <%= classes %>">
+  <svg class="feather w-full h-full">
+    <use :href="`/lookbook-assets/feather-sprite.svg#<%= name %>`" x-cloak />
+  </svg>
+</i>

data/app/views/lookbook/components/_nav.html.erb ADDED Viewed

@@ -0,0 +1,17 @@
+<nav id="nav" x-data="nav" @popstate.window="setActive">
+  <% if items.any? %>
+    <ul x-ref="items">
+      <% items.each do |node| %>
+        <%= component "nav_#{node.type}", node: node %>
+      <% 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/components/_nav_collection.html.erb ADDED Viewed

@@ -0,0 +1,5 @@
+<%= component "nav_group", node: node do %>
+  <% node.items.each do |item| %>
+    <%= component "nav_#{item.type}", node: item %>
+  <% end %>
+<% end %>

data/app/views/lookbook/components/_nav_group.html.erb ADDED Viewed

@@ -0,0 +1,14 @@
+<li key="<%= node.id %>" class="<%= classes %>">
+  <div id="nav-group-<%= node.id %>" x-data="navGroup" :class="{hidden}" x-cloak>
+    <div @click="toggle" class="nav-toggle py-[5px]" style="padding-left: calc((<%= node.hierarchy_depth - 1 %> * 12px) + 0.5rem);">
+      <%= icon "${open ? 'chevron-down' : 'chevron-right'}", size: 3, class: "mr-1 text-gray-500" %>
+      <%= icon node.type == :preview ? "layers" : "folder", size: 3.5, class: "mr-1.5 text-indigo-500" %>
+      <div class="nav-label <%= "font-bold" if node.type == :preview %>" <% if node.type == :preview %> @click.stop="toggle(); navigateToFirstChild()"<% end %>>
+        <%= node.label %>
+      </div>
+    </div>
+    <ul x-ref="items" x-show="open" x-cloak>
+      <%= yield %>
+    </ul>
+  </div>
+</li>

data/app/views/lookbook/components/_nav_item.html.erb ADDED Viewed

@@ -0,0 +1,23 @@
+<%
+path = show_path item.path
+display ||= :item
+label ||= item.label
+%>
+<li key="<%= item.id %>">
+  <div id="nav-item-<%= item.id %>" x-data="navItem(<%= item.matchers.to_json %>)" :class="{hidden}" data-path="<%= path %>" x-cloak>
+    <a href="<%= path %>"
+      class="nav-link pr-3 py-[5px] flex items-center w-full group transition hover:bg-gray-200 hover:bg-opacity-50"
+      style="padding-left: calc((<%= depth - 1 %> * 12px) + 0.5rem);"
+      x-ref="link"
+      :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'">
+        <%= icon display == :node ? "layers" : "eye", size: 3.5, class: "group-hover:text-indigo-800" %>
+      </div>
+      <div class="truncate whitespace-nowrap select-none <%= "font-bold" if display == :node %>">
+        <%= label %>
+      </div>
+    </a>
+  </div>
+</li>

data/app/views/lookbook/components/_nav_preview.html.erb ADDED Viewed

@@ -0,0 +1,11 @@
+<% examples = node.get_examples.reject(&:hidden?) %>
+<% if examples.many? %>
+  <%= component "nav_group", node: node, path: show_path(examples.first.path) do %>
+    <% examples.each do |example| %>
+      <%= component "nav_item", item: example, depth: example.hierarchy_depth + 1 %>
+    <% end %>
+  <% end %>
+<% else %>
+  <% example = examples.first %>
+  <%= component "nav_item", item: example, depth: example.hierarchy_depth, label: node.label, display: :node %>
+<% end %>

data/app/views/lookbook/components/_param.html.erb ADDED Viewed

@@ -0,0 +1,24 @@
+<%
+value = params.key?(param[:name]) ? params[param[:name]] : param[:default]
+%>
+<div
+  id="<%= @example.id %>-param-<%= param[:name] %>-input"
+  class="px-4 py-3"
+  x-data="param('<%= param[:name] %>', <%= value.to_json %>)"
+  <% if i == 0 %>x-effect="if ($store.inspector.drawer.active === 'params') setFocus()"<% end %>
+>
+  <div class="flex items-start max-w-[800px]">
+    <div class="flex-none py-2" :style="`width: ${horizontal ? '200' : '120' }px`">
+      <label for="param-<%= param[:name] %>" class="font-bold">
+        <%= param[:name].titleize %>
+      </label>
+    </div>
+    <div class="flex-grow">
+      <%= render "lookbook/inputs/#{param[:input]}",
+        **param,
+        value: value,
+        id: "#{@example.id}-param-#{param[:name]}-input"
+      %>
+    </div>
+  </div>
+</div>

data/app/views/lookbook/components/_preview.html.erb ADDED Viewed

@@ -0,0 +1,52 @@
+<div id="preview" class="h-auto min-h-0 w-full checked-bg">
+  <div
+    class="mx-auto h-full w-full"
+    :style="`max-width: ${maxWidth}; max-height: ${maxHeight};`"
+    x-data="previewWindow"
+  >
+    <div class="grid bg-white relative grid-cols-[1fr_17px] grid-rows-[1fr_17px] -inset-px" style="width: calc(100% + 2px); height: calc(100% + 2px)">
+      <iframe seamless
+        class="h-full w-full border border-gray-300"
+         :class="{ 'pointer-events-none': $store.layout.reflowing }"
+        src="<%= url_for lookbook.preview_path %>"
+        <% if config.preview_srcdoc %>srcdoc="<%== srcdoc %>"<% end %>
+        frameborder="0"
+        x-data="sizes"
+        x-effect="preview.width = width; preview.height = height;"
+      ></iframe>
+      <div
+        class="resize-handle border-r border-t cursor-[col-resize]"
+        @pointerdown="onResizeWidthStart"
+        @dblclick="toggleFullWidth"
+      >
+        <svg class="h-4 w-4 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
+        </svg>
+      </div>
+      <div
+        class="resize-handle border-b border-l cursor-[col-resize]"
+        @pointerdown="onResizeHeightStart"
+        @dblclick="toggleFullHeight"
+      >
+        <svg class="h-4 w-4 pointer-events-none rotate-90" fill="currentColor" viewBox="0 0 24 24" >
+          <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
+        </svg>
+      </div>
+      <div
+        class="resize-handle border-r border-b cursor-[nwse-resize]"
+        @pointerdown="onResizeStart"
+        @dblclick="toggleFullSize"
+      >
+        <svg class="h-3.5 w-3.5 pointer-events-none rotate-45 relative -top-px -left-px" fill="currentColor" viewBox="0 0 24 24" >
+          <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/lookbook/{app/error.html.erb → error.html.erb} RENAMED Viewed

File without changes

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

@@ -0,0 +1,9 @@
+<div class="flex flex-col h-full w-full">
+  <%= component "header" %>
+  <div class="flex flex-col items-center justify-center h-full">
+    <div class="p-4 text-center">
+      <%= icon "layers", size: 10, class: "text-gray-300 mx-auto" %>
+      <h5 class="mt-4 text-gray-400 text-base">Select a preview to get started</h5>
+    </div>
+  </div>
+</div>

data/app/views/lookbook/{workbench/inspector/params → inputs}/_select.html.erb RENAMED Viewed

@@ -2,7 +2,7 @@
   name="<%= name %>"
   id="<%= id %>"
   class="form-input"
-  @change.stop="update($el.name, $el.value)"
-  data-param-input>
+  x-model="value"
+  x-ref="input">
   <%= options_for_select(options, value) %>
 </select>

data/app/views/lookbook/{workbench/inspector/params → inputs}/_text.html.erb RENAMED Viewed

@@ -4,5 +4,6 @@
   type="<%= input_type %>"
   name="<%= name %>"
   value="<%= value %>"
-  @keyup.stop.debounce.400="if (validate()) update($el.name, $el.value)"
-  data-param-input>
+  x-model="value"
+  @keyup.stop
+  x-ref="input">

data/app/views/lookbook/inputs/_textarea.html.erb ADDED Viewed

@@ -0,0 +1,9 @@
+<textarea
+  id="<%= id %>"
+  class="form-input"
+  name="<%= name %>"
+  rows="4"
+  @keyup.stop
+  x-model="value"
+  x-ref="input"
+><%= value %></textarea>

data/app/views/lookbook/{workbench/inspector/params → inputs}/_toggle.html.erb RENAMED Viewed

@@ -1,13 +1,13 @@
-<div id="<%= id %>" x-init="checked = <%= value == "true" ? "true" : "false" %>" data-param-input>
+<div id="<%= id %>" x-init="value = <%= value == true || value == "true" ? "true" : "false" %>" x-ref="input">
   <button type="button"
     class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-400"
-    :class="{'bg-indigo-500': checked, 'bg-gray-300': !checked}"
+    :class="{'bg-indigo-500': value, 'bg-gray-300': !value}"
     role="switch"
-    @click.stop="checked = !checked; update('<%= name %>', checked)">
+    @click.stop="value = !value">
     <span
       aria-hidden="true"
-      class="pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
-      :class="{'translate-x-5': checked, 'translate-x-0': !checked}"
+      class="pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200"
+      :class="{'translate-x-5': value, 'translate-x-0': !value}"
     ></span>
   </button>
 </div>

data/app/views/lookbook/{app/not_found.html.erb → not_found.html.erb} RENAMED Viewed

@@ -1,14 +1,12 @@
 <div class="bg-white 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-red-300 mx-auto">
-      <use xlink:href="/lookbook-assets/feather-sprite.svg#alert-triangle" />
-    </svg>
+    <%= icon "alert-triangle", size: 10, class: "text-red-300 mx-auto" %>
     <div class="mt-3 text-gray-700 max-w-xs">
       <% if @preview %>
         <div data-role="example-not-found">
           <h5 class="text-base">Not found</h5>
           <p class="mt-2 text-gray-400 text-sm">
-            The "<span class="text-gray-500"><%= @preview.lookbook_label %></span>" preview does not have an example named "<span class="text-gray-500"><%= @example_name %></span>".
+            The "<span class="text-gray-500"><%= @preview.label %></span>" preview does not have an example named "<span class="text-gray-500"><%= @example_name %></span>".
           </p>
         </div>
       <% else %>

data/app/views/lookbook/panels/_notes.html.erb ADDED Viewed

@@ -0,0 +1,25 @@
+<% items = examples.filter { |example| example[:notes].present? } %>
+<div class="text-gray-600 bg-gray-50 h-full overflow-auto" data-morph-strategy="replace">
+  <% if items.many? %>
+    <div class="divide-y divide-dashed divide-gray-300">
+      <% items.each do |item| %>
+        <div class="px-4 pt-3 pb-6 relative">
+          <h6 class="text-[11px] text-gray-500 italic inline-block uppercase tracking-wide mb-4">
+            <%= item[:label] %>
+          </h6>
+          <div class="prose prose-sm">
+            <%= markdown(item[:notes]) %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  <% else %>
+    <div class="p-4 prose prose-sm">
+      <% if items.any? %>
+        <%= markdown(items.first[:notes]) %>
+      <% else %>
+        <em class='opacity-50'>No notes provided.</em>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/views/lookbook/panels/_output.html.erb ADDED Viewed

@@ -0,0 +1,18 @@
+<div class="p-4 h-full bg-gray-50 overflow-auto" data-morph-strategy="replace">
+  <%= component "code" do -%>
+    <% if examples.many? %>
+      <% examples.each do |example| -%>
+        <%== "\n<!-- #{example[:label]} -->\n#{beautify(example[:html])}" %>
+      <% end %>
+    <% else -%>
+      <%== beautify(examples.first[:html]) %>
+    <% end %>
+  <% end %>
+  <% if defined?(clipboard_id) %>
+    <template id="<%= clipboard_id %>">
+      <% examples.each do |example| -%>
+        <%== beautify(example[:html]) %>
+      <%- end %>
+    </template>
+  <% end %>
+</div>

data/app/views/lookbook/panels/_params.html.erb ADDED Viewed

@@ -0,0 +1,17 @@
+<div class="bg-gray-50 h-full">
+  <% if @example.type == :group %>
+    <div class="p-4 prose prose-sm">
+      <em class='opacity-50'>Params are not yet supported for grouped examples.</em>
+    </div>
+  <% elsif @example.params.none? %>
+    <div class="p-4 prose prose-sm">
+      <em class='opacity-50'>No params configured.</em>
+    </div>
+  <% else %>
+    <div class="py-3">
+      <% @example.params.each_with_index do |param, i| %>
+        <%= component "param", param: param, i: i %>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/views/lookbook/panels/_source.html.erb ADDED Viewed

@@ -0,0 +1,20 @@
+<div class="p-4 h-full overflow-auto bg-gray-50 space-y-6" data-morph-strategy="replace">
+  <% if examples.many? %>
+    <% examples.each do |example| %>
+      <%= component "code", language: example[:source_lang][:name] do -%>
+        <%== "#{sprintf example[:source_lang][:comment], example[:label]}\n#{example[:source]}" %>
+      <% end %>
+    <% end %>
+  <% else %>
+    <%= component "code", language: examples.first[:source_lang][:name] do -%>
+      <%== examples.first[:source] %>
+    <% end %>
+  <% end %>
+  <% if defined?(clipboard_id) %>
+    <template id="<%= clipboard_id %>">
+      <% examples.each do |example| -%>
+        <%== example[:source] %>
+      <%- end %>
+    </template>
+  <% end %>
+</div>