lookbook 0.8.2 → 1.0.0.beta.0

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

@@ -1,112 +0,0 @@
-<div id="drawer" class="bg-white w-full h-full flex flex-col min-w-0">
-  <div class="pl-4 border-b border-gray-300 select-none flex-none" x-show="!drawerHidden">
-    <div class="flex cursor-auto relative">
-      <div
-        id="inspector-tabs-<%= example.id %>"
-        x-data="tabs"
-        class="min-w-0 -mb-px"
-        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': isActiveDrawerPanel('<%= key %>'),
-                'border-transparent text-gray-500 hover:text-gray-700': !isActiveDrawerPanel('<%= key %>'),
-                'invisible': (<%= i %> > visibleTabCount)
-              }"
-              @click.stop.prevent="switchDrawerPanel('<%= 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.panel === '<%= key %>',
-                      'border-transparent text-gray-500 hover:text-gray-700': $store.inspector.drawer.panel !== '<%= key %>',
-                    }"
-                    @click.stop.prevent=" hideDropdown(); switchDrawerPanel('<%= key %>')"
-                  >
-                    <%== props[:label] %>
-                  </a>
-                </div>
-              </template>
-            <% end %>
-          </div>
-        </nav>
-      </div>
-      <div class="flex items-center bg-white border-l border-gray-200 ml-auto space-x-3 px-3">
-        <div>
-          <% 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="isActiveDrawerPanel('<%= key %>')"
-              x-cloak>
-              <%= component "copy-button",
-                target: "inspector-panel-#{example.id}-#{key}-clipboard",
-                disabled: !props[:copy].present? %>
-            </div>
-          <% end %>
-        </div>
-        <button
-          x-tooltip.theme.lookbook="`${horizontal ? 'pin drawer on right' : 'pin drawer on bottom'}`"
-          @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="`hide drawer`"
-          @click="toggleDrawer"
-        > 
-          <%= icon "x-circle",
-            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="isActiveDrawerPanel('<%= 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/_embed.html.erb

@@ -1,39 +0,0 @@
-<div id="<%= id %>" x-data="embed" class="not-prose embed border border-gray-300 rounded-md overflow-hidden" @page:morphed.window="recaclulateIframeHeight">
-  <header class="px-3 py-2 flex items-center text-xs text-gray-400 bg-white border-b border-gray-300">
-    <div class="text-gray-500">
-      <%= example.preview.label %> (<%= example.label %>)
-    </div>
-    <div class="ml-auto flex items-center space-x-3">
-      <a href="<%= lookbook.show_path(example.path, params) %>" class="" x-tooltip.theme.lookbook="`View in Inspector`">
-        <%= icon "eye", size: 4, class: "hover:text-indigo-800" %>
-      </a>
-      <a
-        href="<%= lookbook.preview_path(example.path, params) %>"
-        target="_blank"
-        class="-top-px relative"
-        x-tooltip.theme.lookbook="`Open in new window`">
-        <%= icon "external-link", size: 4, class: "hover:text-indigo-800" %>
-      </a>
-    </div>
-  </header>
-  <div class="checked-bg overflow-hidden">
-    <div x-ref="resizer" class="grid bg-white relative grid-cols-[1fr_17px] w-full" :style="`max-width: ${maxWidth}; height: ${height ? `${height}px` : 'auto'}`">
-      <iframe seamless
-        id="<%= id %>-iframe"
-        x-ref="iframe"
-        src="<%= lookbook.preview_path(example.path, params.merge(lookbook_embed: true)) %>"
-        class="min-w-full h-full w-px"
-        :class="{ 'pointer-events-none': reflowing }"
-        @load="recaclulateIframeHeight">
-      </iframe>
-      <div
-        class="resize-handle border-r border-l cursor-[col-resize] relative -right-px"
-        @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>
-  </div>    
-</div>

data/app/views/lookbook/components/_errors.html.erb

@@ -1,13 +0,0 @@
-<div class="bg-red-50 w-full overflow-auto h-full">
-  <ul class="text-sm divide-y divide-red-200">
-    <% errors.each do |error| %>
-      <% error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error) %>
-      <li class="px-4 py-3">
-        <h4 class="break-all leading-tight">
-          <%= error.file_name %><%= ":#{error.line_number}" if error.line_number %>
-        </h4>
-        <pre class="text-red-800 text-xs mt-2 whitespace-pre-wrap opacity-80 font-mono"><%= error.message %></pre>
-      </li>
-    <% end %>
-  </ul>
-</div>

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

@@ -1,18 +0,0 @@
-<div x-data="filter" class="bg-white rounded-md border border-gray-200 " :class="{'!border-gray-300': focussed}">
-  <input
-    type="text"
-    class="text-sm pl-3 pr-8 w-full border-0 bg-transparent focus:outline-none outline-none focus:ring-0 text-gray-500 placeholder:italic placeholder:text-gray-500"
-    placeholder="Filter by name&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"
-    @filter:clear.document="clear"
-    @filter:focus.document="focus"
-    @focus.stop="focussed = true"
-    @blur.stop="focussed = false">
-  <button class="text-gray-400 hover:text-indigo-500 focus:ring-0 focus:outline-none absolute top-1/2 right-5 -translate-y-1/2" @click="clear" :class="{hidden: !$store.filter.active}">
-    <%= icon "x", size: 3, class: "hover:text-indigo-500" %>
-  </button>
-</div>

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

@@ -1,6 +0,0 @@
-<header class="pl-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-6" x-show="!$store.sidebar.open" @click="$store.sidebar.toggle">
-    <%= icon "menu", size: 4, class: "text-gray-400 hover:text-indigo-500 transition" %>
-  </button>
-  <%= yield %>
-</header>

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

@@ -1,5 +0,0 @@
-<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.to_s %>`" x-cloak />
-  </svg>
-</i>

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

@@ -1,16 +0,0 @@
-<nav id="nav" x-data="nav(<%= filterable %>)">
-  <% if items.any? %>
-    <ul x-ref="items" id="nav-<%= items.class.describe_as %>">
-      <% items.each do |item| %>
-        <%= component "nav_#{item.type}", node: item %>
-      <% end %>
-    </ul>
-    <div class="p-4 text-center" x-show="empty" x-cloak>
-      <em class="text-gray-400 italic">No matching <%= items.class.describe_as %> found.</em>
-    </div>
-  <% else %>
-    <div class="p-4 text-center">
-      <h4 class="text-gray-400 italic">No <%= items.class.describe_as %> found.</h4>
-    </div>
-  <% end %>
-</nav>

data/app/views/lookbook/components/_nav_collection.html.erb

@@ -1,5 +0,0 @@
-<%= 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

@@ -1,14 +0,0 @@
-<li key="nav-group-<%= node.id %>-item" 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

@@ -1,24 +0,0 @@
-<%
-path = show_path(item.lookup_path)
-display ||= :item
-label ||= item.label
-item_icon = display == :node ? "layers" : "eye"
-%>
-<li key="nav-item-<%= item.id %>-item">
-  <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 item_icon, 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_page.html.erb

@@ -1,22 +0,0 @@
-<%
-path = page_path(node.lookup_path)
-depth = node.hierarchy_depth + 1
-%>
-<li key="nav-page-<%= node.id %>-item">
-  <div id="nav-page-<%= node.id %>" x-data="navItem(<%= node.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]" :class="active ? 'text-gray-900' : 'text-indigo-500'">
-        <%= icon "file", size: 3.5, class: "group-hover:text-indigo-800" %>
-      </div>
-      <div class="truncate whitespace-nowrap select-none">
-        <%= node.label %>
-      </div>
-    </a>
-  </div>
-</li>

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

@@ -1,13 +0,0 @@
-<% examples = node.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 %>
-  <% if examples.any? %>
-    <% example = examples.first %>
-    <%= component "nav_item", item: example, depth: example.hierarchy_depth, label: node.label, display: :node %>
-  <% end %>
-<% end %>

data/app/views/lookbook/components/_not_found.html.erb

@@ -1,11 +0,0 @@
-<div  class="bg-white flex flex-col items-center justify-center border-2 border-dashed border-gray-200 p-6 rounded-md not-prose">
-  <div class="px-4 text-center">
-    <%= icon "alert-triangle", size: 6, class: "text-red-300 mx-auto" %>
-    <div class="mt-2 text-gray-700 max-w-xs">
-      <h5 class="text-base"><%= title %></h5>
-      <p class="mt-1 text-gray-400 text-sm">
-        <%== text %>
-      </p>
-    </div>
-  </div>
-</div>

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

@@ -1,21 +0,0 @@
-<%
-value = params.key?(param[:name]) ? params[param[:name]] : param[:default]
-%>
-<div
-  ref="<%= @example.id %>-param-<%= param[:name] %>-input"
-  class="px-4 py-3"
->
-  <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/previews/inputs/#{param[:input]}",
-        **param,
-        value: value
-      %>
-    </div>
-  </div>
-</div>

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

@@ -1,77 +0,0 @@
-<div id="preview" class="grid grid-rows-[40px_1fr]">
-  <%= component "header" do %>
-    <div
-      id="preview-tabs-<%= @example.id %>" class="min-w-0 -mb-px">
-      <nav class="flex h-10 space-x-8 flex-grow pr-8">
-      <% panels.each do |key, props| %>
-          <a
-            id="preview-tab-<%= key %>-<%= @example.id %>"
-            href="#preview-panel-<%= key %>"
-            class="whitespace-nowrap pt-2.5 pb-1.5 px-1 border-b-2 cursor-pointer"
-            :class="{
-              'border-indigo-400': isActivePreviewPanel('<%= key %>'),
-              'border-transparent text-gray-500 hover:text-gray-700': !isActivePreviewPanel('<%= key %>'),
-            }"
-            @click.stop.prevent="switchPreviewPanel('<%= key %>')"
-            <% if props[:hotkey] %>data-hotkey="<%= props[:hotkey] %>"<% end %>
-          >
-            <%== props[:label] %>
-          </a>
-        <% end %>
-      </nav>
-    </div>
-    <div class="flex items-stretch h-full ml-auto space-x-3">
-      <div
-        class="flex items-center text-xs font-mono text-gray-700 space-x-1 opacity-50 hover:opacity-100 transition"
-        :class="{'opacity-100': $store.inspector.preview.resizing}"
-        x-show="isActivePreviewPanel('preview')">
-        <span x-text="`${preview.width}px`"></span>
-        <span class="text-gray-500">x</span>
-        <span x-text="`${preview.height}px`"></span>
-      </div>
-      <div class="flex items-center bg-white border-l border-gray-200 space-x-3 text-gray-400 divide-x divide-gray-300 px-3">
-        <div class="flex items-center space-x-3">
-          <% if feature_enabled? :pages %>
-            <%= component "copy-button",
-              icon: :code,
-              target: "pages-embed-code",
-              tooltip: "Copy page embed code" %>
-            <div id="pages-embed-code" class="hidden">
-              &lt;%= embed <%= @preview.preview_class %>, :<%= @example.name %>, params: <%= request.query_parameters.deep_symbolize_keys.to_s %> %&gt;
-            </div>
-          <% end %>
-          <button
-            x-tooltip.theme.lookbook="`Refresh preview`"
-            @click.prevent.stop="refresh"
-            data-hotkey="r">
-              <%= icon "refresh-cw", size: 3.5, class: "hover:text-indigo-800" %>
-          </button>
-          <a
-            href="<%= preview_path %>"
-            target="_blank"
-            x-tooltip.theme.lookbook="`Open in new window`"
-            data-hotkey="w">
-              <%= icon "external-link", size: 4, class: "hover:text-indigo-800" %>
-          </a>
-          <button
-            x-tooltip.theme.lookbook="`${drawerHidden ? 'show' : 'hide'} drawer`"
-            @click="toggleDrawer"
-            x-show="drawerHidden"
-            data-hotkey="i"> 
-              <%= icon "${horizontal ? 'credit-card' : 'sidebar'}", size: 4, class: "hover:text-indigo-800 scale-[-1]" %>
-          </button>
-        </div>
-        
-      </div>
-    </div>
-  <% end %>
-  <div class="bg-white relative flex-grow">
-    <% panels.each do |key, props| %>
-      <div class="h-full w-full absolute inset-0" x-show="isActivePreviewPanel('<%= key %>')" x-cloak>
-        <div id="preview-panel-<%= example.id %>-<%= key %>" class="h-full">
-          <%= render props[:template], key: key, examples: examples, **props %>
-        </div>
-      </div>
-    <% end %>
-  </div>
-</div>

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

@@ -1,69 +0,0 @@
-<div
-  x-data="sidebar"
-  @page:morphed.window="setActiveNavItem"
-  class="h-full bg-gray-100 overflow-hidden flex flex-col relative"
-  x-show="$store.sidebar.open"
-  x-cloak>
-
-  <div class="bg-white h-10 border-b border-gray-300 flex flex-none items-center relative pl-4 pr-4">
-    <%= component "branding" %>
-    <button class="flex-none flex items-center ml-auto" @click="$store.sidebar.toggle">
-      <%= icon "menu", size: 4, class: "text-indigo-500 transition" %>
-    </button>
-  </div>
-  
-  <% if feature_enabled?(:pages) && Lookbook.pages.any? %>
-    <div
-      class="grid overflow-hidden flex-grow"
-      :style="`grid-template-rows: ${$store.sidebar.panelSplits[0] || 1}fr 1px ${$store.sidebar.panelSplits[1] || 1}fr;`"
-      x-ref="sidebarPanels">
-      <div class="flex flex-col overflow-hidden">
-        <div class="flex items-center flex-none border-b border-gray-300 h-10 bg-white relative px-4">   
-          <h2 class="whitespace-nowrap relative">Previews</h2>
-        </div>
-        <div x-ref="filter" class="px-2 py-2 relative" x-cloak>
-          <%= component "filter" %> 
-        </div>
-        <div class="flex-grow pb-3 overflow-auto">
-          <%= component "nav", items: Lookbook.previews.as_tree, filterable: true %>
-        </div>
-      </div>
-      <div
-        x-data="splitter('horizontal', {minSize: 40})"
-        class="w-full gutter border-t border-gray-300 relative"
-        x-effect="setSplits(splits)">
-        <div class="h-[11px] w-full bg-transparent hover:bg-indigo-100 hover:bg-opacity-20 transition absolute left-0 right-0 -translate-y-1/2 cursor-[row-resize]"></div>
-      </div>
-      <div class="flex flex-col overflow-hidden">
-        <div class="flex items-center flex-none border-b border-gray-300 h-10 bg-white relative px-4">   
-          <h2 class="whitespace-nowrap relative">Pages</h2>
-        </div>
-        <div class="flex-grow pt-2 pb-3 overflow-auto">
-          <%= component "nav", items: Lookbook.pages.as_tree, filterable: false %>
-        </div>
-      </div>
-    </div>
-  <% else %>
-    <div x-ref="filter" class="px-2 py-2 relative" x-cloak>
-      <%= component "filter" %> 
-    </div>
-    <div class="flex-grow overflow-y-auto unsectioned">
-      <%= component "nav", items: Lookbook.previews.as_tree, filterable: true %>
-    </div>
-  <% end %>
-
-  <% if Lookbook::Preview.errors.any? %>
-    <div class="flex-none" x-ref="preview-errors" id="preview-errors">
-      <div class="flex items-center border-b border-t border-gray-300 h-10 bg-white px-4">   
-        <h2 class="flex items-center flex-none">
-          <%= icon "alert-triangle", size: 4, class: "text-red-700" %>
-          <span class="ml-2">Preview load errors</span>
-        </h2>
-      </div>
-      <div class="h-full max-h-[300px] overflow-hidden">
-        <%= component "errors", errors: Lookbook::Preview.errors %>
-      </div>
-    </div>
-  <% end %>
-
-</div>

data/app/views/lookbook/pages/not_found.html.erb

@@ -1,15 +0,0 @@
-<div id="page-not-found" class="bg-white flex flex-col items-center justify-center h-screen w-full">
-  <div class="p-4 text-center">
-    <%= icon "alert-triangle", size: 10, class: "text-red-300 mx-auto" %>
-    <div class="mt-3 text-gray-700 max-w-xs">
-      <div data-role="page-not-found">
-        <h5 class="text-base">Page not found</h5>
-        <% if params[:path].present? %>
-          <p class="mt-2 text-gray-400 text-sm">
-            The page "<span class="text-gray-500"><%= params[:path] %></span>" does not exist.
-          </p>
-        <% end %>
-      </div>
-    </div>
-  </div>
-</div>

data/app/views/lookbook/previews/error.html.erb

@@ -1 +0,0 @@
-<iframe id="error-iframe" src="<%= url_for lookbook.preview_path %>" frameborder="0" class=" h-screen w-full" seamless></iframe>

data/app/views/lookbook/previews/inputs/_select.html.erb

@@ -1,7 +0,0 @@
-<select
-  name="<%= name %>"
-  class="form-input"
-  x-model="value"
-  x-data="param('<%= name %>', '<%= value %>')">
-  <%= options_for_select(options, value) %>
-</select>

data/app/views/lookbook/previews/inputs/_text.html.erb

@@ -1,8 +0,0 @@
-<input
-  class="form-input"
-  type="<%= input_type %>"
-  name="<%= name %>"
-  value="<%= value %>"
-  x-data="param('<%= name %>', '<%= value %>', {debounce: 300})"
-  x-model="value"
-  @keyup.stop>

data/app/views/lookbook/previews/inputs/_textarea.html.erb

@@ -1,8 +0,0 @@
-<textarea
-  class="form-input"
-  name="<%= name %>"
-  rows="4"
-  @keyup.stop
-  x-model="value"
-  x-data="param('<%= name %>', '<%= value %>', {debounce: 300})"
-><%= value %></textarea>

data/app/views/lookbook/previews/inputs/_toggle.html.erb

@@ -1,13 +0,0 @@
-<div x-data="param('<%= name %>', <%= value %>)" data-morph-strategy="replace">
-  <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': value, 'bg-gray-300': !value}"
-    role="switch"
-    @click.stop="value = !value;">
-    <span
-      aria-hidden="true"
-      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/previews/not_found.html.erb

@@ -1,23 +0,0 @@
-<div id="not-found" class="bg-white flex flex-col items-center justify-center h-screen w-full">
-  <div class="px-4 text-center">
-    <%= 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.label %></span>" preview does not have an example named "<span class="text-gray-500"><%= @example_name %></span>".
-          </p>
-        </div>
-      <% else %>
-        <div data-role="preview-not-found">
-          <h5 class="text-base">Preview not found</h5>
-          <p class="mt-2 text-gray-400 text-sm">
-            Looked for "<span class="text-gray-500"><%= params[:path] %></span>".<br>
-            The preview may have been renamed or deleted.
-          </p>
-        </div>
-      <% end %>
-    </div>
-  </div>
-</div>