lookbook 0.4.6 → 0.5.0.beta.1

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

@@ -1,12 +0,0 @@
-<div id="workbench" class="bg-gray-50 h-screen flex flex-col" x-data="workbench">
-  <%= render "workbench/header" %>
-  <div class="md:grid flex-grow" :style="`grid-template-rows: 1fr 1px ${$store.inspector.height}px`">
-    <%= 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 %>
-    <% end %>
-  </div>
-</div>

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

@@ -1,39 +0,0 @@
-<%= 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>
-      <% 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')">
-    <span x-text="`${previewViewportWidth}px`"></span>
-    <span class="text-gray-500">x</span>
-    <span x-text="`${previewViewportHeight}px`"></span>
-  </div>
-  <div class="flex items-center ml-auto md:ml-3 md:pl-3 space-x-3 md:border-l border-gray-300 text-gray-400">
-    <a
-      href="<%= url_for %>"
-      class="block transition hover:text-indigo-800"
-      x-tooltip.theme.lookbook="`Refresh preview`"
-      @click.prevent.stop="$dispatch('navigate')"
-      data-hotkey="r"
-    >
-      <svg class="feather w-4 h-4">
-        <use xlink:href="/lookbook-assets/feather-sprite.svg#refresh-cw" />
-      </svg>
-    </a>
-      <a
-      href="<%= preview_path %>"
-      class="block transition hover:text-indigo-800" target="_blank"
-      x-tooltip.theme.lookbook="`Open in new window`"
-      data-hotkey="w"
-    >
-      <svg class="feather w-4 h-4">
-        <use xlink:href="/lookbook-assets/feather-sprite.svg#external-link" />
-      </svg>
-    </a>
-  </div>
-<% end %>

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

@@ -1,38 +0,0 @@
-<div id="inspector" class="bg-white w-full overflow-hidden flex flex-col" x-data="inspector" x-show="$screen('md')">
-   <div class="px-4 border-b border-gray-200 flex items-center flex-none select-none">
-    <nav class="-mb-px flex space-x-8 cursor-auto">
-      <% panes.each do |key, props| %>
-        <a
-          id="inspector-tab-<%= key %>"
-          href="#<%= key %>"
-          class="whitespace-nowrap py-2 px-1 border-b-2 cursor-pointer <%= "!text-gray-300" if props[:disabled] %>"
-          :class="{
-            'border-indigo-400': active('<%= key %>'),
-            'border-transparent text-gray-500 hover:text-gray-700': !active('<%= key %>')
-          }"
-          @click.stop.prevent="switchTo('<%= key %>')"
-          <% if props[:hotkey] %>data-hotkey="<%= props[:hotkey] %>"<% end %>
-        >
-          <%== props[:label] %>
-        </a>
-      <% end %>
-    </nav>
-  </div>
-  <div class="flex-auto overflow-auto bg-gray-50">
-    <% panes.each do |key, props| %>
-      <div class="flex flex-col h-full relative" x-show="active('<%= key %>')" x-effect="
-        if ($store.inspector.active === '<%= key %>') {
-          const input = $el.querySelector('[data-param-input]');
-          if (input) setTimeout(() => input.focus(), 0)
-        }
-      " x-cloak>
-        <% if props[:clipboard].present? %>
-          <%= render "shared/clipboard" do %><%= h props[:clipboard].strip %><% end %>
-        <% end %>
-        <div id="inspector-content-<%= key %>" class="flex flex-col h-full overflow-auto">
-          <%= render "workbench/inspector/#{props[:template]}", key: key, **props %>
-        </div>
-      </div>
-    <% end %>
-  </div>
-</div>

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

@@ -1,24 +0,0 @@
-<div id="preview" class="h-full md:h-auto md:min-h-0 flex w-full bg-gray-50">
-  <div class="relative mx-auto bg-white" x-data="preview" :style="`width: ${$screen('md') ? $store.preview.width : '100%'}`">
-    <iframe seamless
-      class="absolute h-full inset-0 w-full border-l border-gray-300 md:pr-4 md:-mx-px"
-      src="<%= url_for lookbook.preview_path %>"
-      <% if config.preview_srcdoc %>srcdoc="<%== @rendered_example %>"<% end %>
-      frameborder="0"
-      x-data="sizeObserver"
-      x-effect="previewViewportWidth = observedWidth; previewViewportHeight = observedHeight;"
-    ></iframe>
-    <div class="absolute opacity-0 inset-0 pointer-events-none" :class="{ 'pointer-events-none': !$store.page.reflowing }"></div>
-    <div
-      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"
-      @pointerdown="onResizeStart"
-      @dblclick="toggleFullWidth"
-      x-show="$screen('md')"
-    >
-      <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/workbench/inspector/_code.html.erb

@@ -1,3 +0,0 @@
-<pre class="h-full"><code class="h-full p-4 block highlight font-monospace" style="background-image: none"><% items.each do |item| %><%== highlight( "#{items.many? ? item[:label] + "\n" : ""}#{item[:content].strip}", item[:lang][:name]) %>
-
-<% end %></code></pre>

data/app/views/lookbook/workbench/inspector/_notes.html.erb

@@ -1,24 +0,0 @@
-<div class="text-gray-600">
-  <% if items.many? %>
-    <div class="divide-y divide-gray-300">
-      <% items.each do |item| %>
-        <div class="px-4 pt-10 pb-8 relative">
-          <div class="prose prose-sm">
-            <%= markdown(item[:content]) %>
-          </div>
-          <h6 class="text-[11px] text-gray-600 inline-block px-2 py-0.25 bg-gray-100 border border-t-0 border-gray-300 absolute top-0 left-4 rounded-b">
-            <%= item[:label] %>
-          </h6>
-        </div>
-      <% end %>
-    </div>
-  <% else %>
-    <div class="p-4 prose prose-sm">
-      <% if items.any? %>
-        <%= markdown(items[0][:content]) %>
-      <% else %>
-        <em class='opacity-50'>No notes provided.</em>
-      <% end %>
-    </div>
-  <% end %>
-</div>

data/app/views/lookbook/workbench/inspector/_params.html.erb

@@ -1,28 +0,0 @@
-<% if @example.type == :group %>
-  <div class="p-4 prose prose-sm">
-    <em class='opacity-50'>Params are not supported for grouped previews.</em>
-  </div>
-<% elsif items.none? %>
-  <div class="p-4 prose prose-sm">
-    <em class='opacity-50'>No params configured.</em>
-  </div>
-<% else %>
-  <div class="py-3">
-    <% items.each do |param| %>
-      <div class="px-4 py-3" x-data="param" @document:patched="setFocus">
-        <div class="flex items-start max-w-[800px]">
-          <div class="w-[200px] flex-none py-2">
-            <label for="param-<%= param[:name] %>" class="font-bold"><%= param[:name].titleize %></label>
-          </div>
-          <div class="flex-grow" @focus="focussed = true" @blur="focussed = false">
-            <%= render "workbench/inspector/params/#{param[:input]}",
-              **param,
-              value: params.key?(param[:name]) ? params[param[:name]] : param[:default],
-              id: "#{@example.id}-param-#{param[:name]}"
-            %>
-          </div>
-        </div>
-      </div>
-    <% end %>
-  </div>
-<% end %>

data/app/views/lookbook/workbench/inspector/_plain.html.erb

@@ -1,3 +0,0 @@
-<div class="p-4">
-  <%= content %>
-</div>

data/app/views/lookbook/workbench/inspector/params/_text.html.erb

@@ -1,8 +0,0 @@
-<input
-  id="<%= id %>"
-  class="form-input"
-  type="<%= input_type %>"
-  name="<%= name %>"
-  value="<%= value %>"
-  @keyup.stop.debounce.400="if (validate()) update($el.name, $el.value)"
-  data-param-input>

data/app/views/lookbook/workbench/inspector/params/_textarea.html.erb

@@ -1,8 +0,0 @@
-<textarea
-  id="<%= id %>"
-  class="form-input"
-  name="<%= name %>"
-  rows="4"
-  @keyup.stop.debounce.300="update($el.name, $el.value)"
-  data-param-input
-><%= value %></textarea>

data/app/views/lookbook/workbench/inspector/params/_toggle.html.erb

@@ -1,13 +0,0 @@
-<div id="<%= id %>" x-init="checked = <%= value == true || value == "true" ? "true" : "false" %>" data-param-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}"
-    role="switch"
-    @click.stop="checked = !checked; update('<%= name %>', checked)">
-    <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}"
-    ></span>
-  </button>
-</div>