lookbook 0.4.6 → 0.4.7

data/app/assets/lookbook/js/stores/sidebar.js

@@ -0,0 +1,14 @@
+import config from "../config";
+
+export default function createSidebarStore(Alpine) {
+  const { defaultWidth, minWidth, maxWidth } = config.sidebar;
+  return {
+    open: Alpine.$persist(false).as("sidebar-open"),
+    width: Alpine.$persist(defaultWidth).as("sidebar-width"),
+    minWidth,
+    maxWidth,
+    toggle() {
+      Alpine.store("sidebar").open = !Alpine.store("sidebar").open;
+    },
+  };
+}

data/app/controllers/lookbook/app_controller.rb

@@ -1,52 +1,44 @@
-require "htmlbeautifier"
-
 module Lookbook
   class AppController < ActionController::Base
     EXCEPTIONS = [ViewComponent::PreviewTemplateError, ViewComponent::ComponentError, ViewComponent::TemplateError, ActionView::Template::Error]
 
     protect_from_forgery with: :exception
-    prepend_view_path File.expand_path("../../views/lookbook", __dir__)
-
-    layout "layouts/app"
     helper Lookbook::ApplicationHelper
 
     before_action :find_preview, only: [:preview, :show]
     before_action :find_example, only: [:preview, :show]
-    before_action :assign_nav, only: [:index, :show]
-    before_action :initialize_inspector, only: [:show]
+    before_action :build_nav
+
+    def self.controller_path
+      "lookbook"
+    end
 
     def preview
       if @example
-        render html: rendered_example
+        set_params
+        render html: render_examples(examples_data)
       else
-        render "app/not_found"
+        render "not_found"
       end
     end
 
     def show
       if @example
         begin
-          @rendered_example = rendered_example.gsub("\"", "&quot;")
-          (@example.type == :group ? @example.examples : [@example]).each do |example|
-            include_example_data(example)
-          end
-          assign_inspector
+          set_params
+          @examples = examples_data
+          @preview_srcdoc = render_examples(examples_data).gsub("\"", "&quot;")
+          @panels = panels.filter { |name, panel| panel[:show] }
         rescue *EXCEPTIONS
-          render "app/error"
+          render "error"
         end
       else
-        render "app/not_found"
+        render "not_found"
       end
     end
 
     private
 
-    def initialize_inspector
-      @source = []
-      @output = []
-      @notes = []
-    end
-
     def find_preview
       candidates = []
       params[:path].to_s.scan(%r{/|$}) { candidates << $` }
@@ -65,101 +57,47 @@ module Lookbook
       end
     end
 
-    def include_example_data(example)
-      content = HtmlBeautifier.beautify(preview_controller.render_example_to_string(@preview, example.name))
-      @output << {
-        label: "<!-- #{example.label} -->",
-        content: content,
-        lang: Lookbook::Lang.find(:html)
-      }
+    def examples_data
+      @examples_data ||= (@example.type == :group ? @example.examples : [@example]).map do |example|
+        example_data(example)
+      end
+    end
+
+    def example_data(example)
       render_args = @preview.render_args(example.name, params: preview_controller.params.permit!)
       has_template = render_args[:template] != "view_components/preview"
-      @source << {
-        label: has_template ? "<!-- #{example.label} -->" : "\# #{example.label}",
-        content: has_template ? example.template_source(render_args[:template]) : example.method_source,
-        lang: has_template ? example.template_lang(render_args[:template]) : example.source_lang
+      {
+        label: example.label,
+        notes: example.notes,
+        html: preview_controller.render_example_to_string(@preview, example.name),
+        source: has_template ? example.template_source(render_args[:template]) : example.method_source,
+        source_lang: has_template ? example.template_lang(render_args[:template]) : example.source_lang,
+        params: enabled?(:params) ? example.params : []
       }
-      if example.notes.present?
-        @notes << {
-          label: example.label,
-          content: example.notes
-        }
-      end
     end
 
-    def rendered_example
-      if @example.type == :group
-        examples = @example.examples.map do |example|
-          {
-            label: example.label,
-            html: preview_controller.render_example_to_string(@preview, example.name)
-          }
-        end
-        set_params
-        preview_controller.render_in_layout_to_string("lookbook/preview/group", {examples: examples}, @preview.lookbook_layout)
-      else
-        set_params(@example)
-        preview_controller.params[:path] = "#{@preview.preview_name}/#{@example.name}".chomp("/")
-        preview_controller.process(:previews)
-      end
+    def render_examples(examples)
+      preview_controller.render_in_layout_to_string("layouts/lookbook/preview", {examples: examples}, @preview.lookbook_layout)
     end
 
-    def set_params(example = nil)
-      if example.present? && enabled?(:params)
+    def set_params
+      if enabled?(:params)
         # cast known params to type
-        example.params.each do |param|
+        @example.params.each do |param|
           if preview_controller.params.key?(param[:name])
             preview_controller.params[param[:name]] = Lookbook::Params.cast(preview_controller.params[param[:name]], param[:type])
           end
         end
       end
       # set display params
-      example_params = example.nil? ? @preview.display_params : example.display_params
       preview_controller.params.merge!({
         lookbook: {
-          display: example_params
+          display: @example.display_params
         }
       })
     end
 
-    def assign_inspector
-      @inspector = {
-        panes: {
-          source: {
-            label: "Source",
-            template: "code",
-            hotkey: "s",
-            items: @source,
-            clipboard: @source.map { |s| @source.many? ? "#{s[:label]}\n#{s[:content]}" : s[:content] }.join("\n\n")
-          },
-          output: {
-            label: "Output",
-            template: "code",
-            hotkey: "o",
-            items: @output,
-            clipboard: @output.map { |o| @output.many? ? "#{o[:label]}\n#{o[:content]}" : o[:content] }.join("\n\n")
-          },
-          notes: {
-            label: "Notes",
-            template: "notes",
-            hotkey: "n",
-            items: @notes,
-            disabled: @notes.none?
-          }
-        }
-      }
-      if enabled?(:params)
-        @inspector[:panes][:params] = {
-          label: "Params",
-          template: "params",
-          hotkey: "p",
-          items: @source.many? ? [] : @example.params,
-          disabled: @source.many? || @example.params.none?
-        }
-      end
-    end
-
-    def assign_nav
+    def build_nav
       @nav = Collection.new
       previews.reject { |p| p.hidden? }.each do |preview|
         current = @nav
@@ -179,6 +117,41 @@ module Lookbook
       @nav
     end
 
+    def panels
+      {
+        source: {
+          label: "Source",
+          template: "lookbook/panels/source",
+          hotkey: "s",
+          show: true,
+          disabled: false,
+          copy: true
+        },
+        output: {
+          label: "Output",
+          template: "lookbook/panels/output",
+          hotkey: "o",
+          show: true,
+          disabled: false,
+          copy: true
+        },
+        notes: {
+          label: "Notes",
+          template: "lookbook/panels/notes",
+          hotkey: "n",
+          show: true,
+          disabled: @examples.filter { |e| e[:notes].present? }.none?
+        },
+        params: {
+          label: "Params",
+          template: "lookbook/panels/params",
+          hotkey: "p",
+          show: enabled?(:params),
+          disabled: @example.type == :group || @example.params.none?
+        }
+      }
+    end
+
     def previews
       Lookbook::Preview.all.sort_by(&:label)
     end

data/app/helpers/lookbook/application_helper.rb

@@ -1,5 +1,6 @@
 require "redcarpet"
 require "rouge"
+require "htmlbeautifier"
 
 module Lookbook
   module ApplicationHelper
@@ -16,14 +17,57 @@ module Lookbook
       markdown.render(text).html_safe
     end
 
-    def highlight(source, language)
-      formatter = Rouge::Formatters::HTML.new(css_class: "highlight")
+    def highlight(source, language, opts = {})
+      formatter = Lookbook::CodeFormatter.new(opts)
       lexer = Rouge::Lexer.find(language)
       formatter.format(lexer.lex(source)).html_safe
     end
 
-    def nav_padding_style(depth)
-      "padding-left: calc((#{depth - 1} * 12px) + 0.5rem);"
+    def beautify(source, language = "html")
+      source = source.strip
+      result = language.downcase == "html" ? HtmlBeautifier.beautify(source) : source
+      result.strip.html_safe
+    end
+
+    def icon(name = nil, size: 4, **attrs)
+      render "lookbook/components/icon",
+        name: name,
+        size: size,
+        classes: class_names(attrs[:class]),
+        **attrs.except(:class)
+    end
+
+    def component(name, **attrs, &block)
+      render "lookbook/components/#{name}",
+        classes: class_names(attrs[:class]),
+        **attrs.except(:class),
+        &block
+    end
+
+    if Rails.version.to_f < 6.1
+      def class_names(*args)
+        tokens = build_tag_values(*args).flat_map { |value| value.to_s.split(/\s+/) }.uniq
+        safe_join(tokens, " ")
+      end
+    end
+
+    private
+
+    def build_tag_values(*args)
+      tag_values = []
+      args.each do |tag_value|
+        case tag_value
+        when Hash
+          tag_value.each do |key, val|
+            tag_values << key.to_s if val && key.present?
+          end
+        when Array
+          tag_values.concat build_tag_values(*tag_value)
+        else
+          tag_values << tag_value.to_s if tag_value.present?
+        end
+      end
+      tag_values
     end
   end
 end

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

@@ -0,0 +1,54 @@
+<!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 transform -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

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

@@ -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/{shared/_clipboard.html.erb → components/_copy.html.erb}

@@ -1,11 +1,10 @@
 <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="clipboard"
+  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 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">
-  <svg class="feather h-4 w-4 ">
-    <use x-bind:href="`/lookbook-assets/feather-sprite.svg#${done ? 'check' : 'clipboard'}`" />
-  </svg>
+  <%= icon "${done ? 'check' : 'clipboard'}", size: 4 %>
   <div class="hidden" x-init="content = $el.innerText"><%== yield %></div>
 </button>

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

@@ -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 transform -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

@@ -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">
+  <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

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

@@ -0,0 +1,17 @@
+<nav id="nav" x-data="nav" @popstate.window="setActive">
+  <% if items.any? %>
+    <ul x-ref="items" class="divide-y divide-gray-300">
+      <% 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

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

@@ -0,0 +1,17 @@
+<li id="nav-group-<%= node.id %>" class="<%= classes %>" 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"
+    id="nav-group-<%= node.id %>-children-<%= node.type == :preview ? node.get_examples.reject(&:hidden?).size : node.items.size %> %>"
+    x-cloak
+  >
+    <%= yield %>
+  </ul>
+</li>

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

@@ -0,0 +1,21 @@
+<%
+path = show_path item.path
+display ||= :item
+label ||= item.label
+%>
+<li 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>
+</li>

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

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

@@ -0,0 +1,20 @@
+<div
+  class="px-4 py-3"
+  x-data="param"
+  <% if i == 0 %>x-effect="if ($store.inspector.panels.active === 'params') setFocus()"<% end %>
+>
+  <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">
+      <%= render "lookbook/inputs/#{param[:input]}",
+        **param,
+        value: params.key?(param[:name]) ? params[param[:name]] : param[:default],
+        id: "#{@example.id}-param-#{param[:name]}-input"
+      %>
+    </div>
+  </div>
+</div>

data/app/views/lookbook/{workbench → components}/_preview.html.erb

@@ -1,24 +1,24 @@
-<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%'}`">
+<div id="preview" class="h-full md:h-auto md:min-h-0 w-full bg-gray-50">
+  <div class="relative mx-auto bg-white h-full w-full" x-data="previewWindow" :style="`width: ${$store.layout.desktop ? $store.inspector.preview.width : '100%'}`" x-show="!showSource">
     <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 %>
+      srcdoc="<%== srcdoc %>"
       frameborder="0"
-      x-data="sizeObserver"
-      x-effect="previewViewportWidth = observedWidth; previewViewportHeight = observedHeight;"
+      x-data="sizes"
+      x-effect="preview.width = width; preview.height = height;"
     ></iframe>
-    <div class="absolute opacity-0 inset-0 pointer-events-none" :class="{ 'pointer-events-none': !$store.page.reflowing }"></div>
+    <div class="absolute opacity-0 inset-0 pointer-events-none" :class="{ 'pointer-events-none': !$store.layout.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')"
+      x-show="$store.layout.desktop"
     >
       <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>
+</div>

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

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

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

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

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

data/app/views/lookbook/{workbench/inspector/params → inputs}/_textarea.html.erb

@@ -4,5 +4,5 @@
   name="<%= name %>"
   rows="4"
   @keyup.stop.debounce.300="update($el.name, $el.value)"
-  data-param-input
+  x-ref="input"
 ><%= value %></textarea>

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

@@ -1,4 +1,4 @@
-<div id="<%= id %>" x-init="checked = <%= value == true || value == "true" ? "true" : "false" %>" data-param-input>
+<div id="<%= id %>" x-init="checked = <%= 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}"

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

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