lookbook 0.8.3 → 1.0.0.beta.1

data/app/views/lookbook/previews/panels/_notes.html.erb

@@ -1,25 +1,19 @@
-<% items = examples.select { |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 prose-a:text-indigo-900">
-            <%= markdown(item[:notes]) %>
-          </div>
-        </div>
-      <% end %>
-    </div>
-  <% else %>
-    <div class="p-4 prose prose-sm prose-a:text-indigo-900">
-      <% if items.any? %>
-        <%= markdown(items.first[:notes]) %>
-      <% else %>
-        <em class='opacity-50'>No notes provided.</em>
-      <% end %>
-    </div>
-  <% end %>
-</div>
+<% items = examples.filter { |example| example.notes.present? } %>
+<% if items.many? %>
+  <div class="divide-y divide-dashed divide-lookbook-divider bg-lookbook-prose h-full w-full">
+    <% items.each do |item| %>
+      <div class="px-4 py-6 relative">
+        <h6 class="italic font-mono mb-4 opacity-40">
+          # <%= item.label %>
+        </h6>
+        <%= render_component :prose, content: item.notes %>
+      </div>
+    <% end %>
+  </div>
+<% else %>
+  <div class="p-4 bg-lookbook-prose w-full h-full">
+    <%= render_component :prose do %>
+      <%== items.any? ? items.first.notes : "<em class='opacity-50'>No notes provided.</em>" %>
+    <% end %>
+  </div>
+<% end %>

data/app/views/lookbook/previews/panels/_output.html.erb

@@ -1,18 +1,7 @@
-<div class="p-4 h-full bg-white overflow-auto" data-morph-strategy="replace">
-  <%= component "code", wrap: "vertical" 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>
+<%= render_component :code, line_numbers: true, full_height: true do -%>
+  <% if examples.many? -%>
+    <% examples.each do |example| -%><%== "<!-- #{example.label} -->\n#{beautify(example.output)}\n\n" -%><% end %>
+  <%- else -%>
+    <%== beautify(examples.first.output) -%>
+  <%- end %>
+<% end %>

data/app/views/lookbook/previews/panels/_params.html.erb

@@ -1,17 +1,15 @@
-<div class="bg-gray-50 h-full overflow-auto">
-  <% 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">
+<% if preview.params.none? %>
+  <div class="p-4 w-full h-full bg-lookbook-prose">
+    <%= render_component :prose do %>
       <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>
+<% else %>
+  <div class="py-3 h-full">
+    <%= render_component :params_editor do |editor| %>
+      <% preview.params.each do |param| %>
+        <% editor.field **param, value: params[param[:name]] %>
       <% end %>
-    </div>
-  <% end %>
-</div>
+    <% end %>
+  </div>
+<% end %>

data/app/views/lookbook/previews/panels/_preview.html.erb

@@ -1,52 +1,6 @@
-<div id="preview-window" class="h-full 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="<%= lookbook.preview_path(request.query_parameters.merge(lookbook_timestamp: Time.now)) %>"
-        <% 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>
+<%= render_component :viewport,
+  src: lookbook.preview_path(request.query_parameters.merge(lookbook_timestamp: Time.now)),
+  alpine_data: "$store.inspector.main",
+  class: "-inset-px relative",
+  style: "width: calc(100% + 2px); height: calc(100% + 2px)"
+  %>

data/app/views/lookbook/previews/panels/_source.html.erb

@@ -1,20 +1,11 @@
-<div class="p-4 h-full overflow-auto bg-gray-50 space-y-6" data-morph-strategy="replace">
+<div class="h-full">
   <% if examples.many? %>
-    <% examples.each do |example| %>
-      <%= component "code", language: example[:source_lang][:name], wrap: "vertical" do -%>
-        <%== "#{sprintf example[:source_lang][:comment], example[:label]}\n#{example[:source]}" %>
-      <% end %>
+    <%= render_component :code, language: examples.first.source_lang[:name], line_numbers: true, full_height: true do -%>
+<%- examples.each.with_index(1) do |example, i| -%>
+<%== "#{sprintf example.source_lang[:comment], example.label}\n#{example.source}\n#{"\n" if i < examples.size}" %><% 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>
+    <% example = examples.first %>
+    <%= render_component :code, language: example.source_lang[:name], line_numbers: true, full_height: true do %><%== example.source %><% end %>
   <% end %>
 </div>

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

@@ -1,24 +1,133 @@
-<div
-  id="inspector"
-  class="bg-gray-50 h-screen grid"
-  x-data="inspector"
-  :style="`${horizontal ? `grid-template-rows: 1fr 1px ${drawerHidden ? '0' : $store.inspector.drawer.height}px` : `grid-template-columns: 1fr 1px ${drawerHidden ? '0' : $store.inspector.drawer.width}px` }`">
-  <%= component "preview", example: @example, examples: @examples, panels: @preview_panels %>
-  <div
-    x-data="splitter('horizontal', {minSize: $store.inspector.drawer.minHeight})"
-    class="w-full gutter border-t border-gray-300 relative"
-    x-effect="$store.inspector.drawer.height = maxDrawerHeight ? Math.min(splits[2] || $store.inspector.drawer.height, maxDrawerHeight) : splits[2] || $store.inspector.drawer.height"
-    x-show="horizontal && !drawerHidden"
-  >
-    <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
-    x-data="splitter('vertical', {minSize: $store.inspector.drawer.minWidth})"
-    class="h-full gutter border-r border-gray-300 relative"
-    x-effect="$store.inspector.drawer.width = maxDrawerWidth ? Math.min(splits[2] || $store.inspector.drawer.width, maxDrawerWidth) : splits[2] || $store.inspector.drawer.width"
-    x-show="vertical && !drawerHidden"
-  >
-    <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>
-  <%= component "drawer", example: @example, examples: @examples, panels: @drawer_panels %>
-</div>
+<%= render_component :split_layout,
+  alpine_data: "$store.layout.inspector",
+  ":class": "($store.inspector.drawer.hidden || #{@drawer_panels.none?}) && '!grid-rows-[1fr] !grid-cols-[1fr]'" do |layout| %>
+
+  <%= layout.pane class: "flex flex-col h-full overflow-hidden",
+    x_effect: "forceOrientation = (layoutWidth < $store.inspector.minVerticalSplitWidth) ? 'horizontal' : null" do %>
+  
+    <%= render_component :toolbar do |toolbar| %>
+      <% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
+        <%= render_component :tabs, alpine_data: "$store.inspector.main" do |tabs| %>
+          <%= @main_panels.each do |panel| %>
+            <% tabs.tab name: panel.name,
+              label: panel.label,
+              hotkey: panel.hotkey,
+              disabled: panel.disabled %>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <% toolbar.section align: :right, padded: true, class: "flex-none min-w-[140px]", ":class": "{invisible: $store.inspector.main.activeTab !== 'preview'}" do %>
+        <%= render_component :dimensions_display,
+          target: "[data-component=viewport] iframe",
+          class: "ml-auto opacity-30 hover:opacity-100" %>
+      <% end %>
+
+      <% toolbar.section divide: :left, class: "flex-none relative z-10" do %>
+        <%= render_component :button_group do |group| %>
+          <% if Lookbook.pages.any? %>
+            <% group.button icon: :code,
+              tooltip: "Copy page embed code",
+              copy: true do %>
+                &lt;%= embed <%= @preview.preview_class %>, :<%= @example.name %>, params: <%= request.query_parameters.deep_symbolize_keys.to_s %> %&gt;
+            <% end %>
+          <% end %>
+          
+          <% group.button icon: :refresh_cw,
+            tooltip: "Refresh preview",
+            "@click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
+
+          <% group.button icon: :external_link,
+            href: lookbook.preview_path(@example.lookup_path),
+            tooltip: "Open preview in new window",
+            target: "_blank" %>
+
+          <% group.button icon: "vertical ? 'sidebar' : 'credit-card'",
+            tooltip: "Show drawer",
+            "@click": "$store.inspector.drawer.hidden = false",
+            class: "rotate-180",
+            x_show: "$store.inspector.drawer.hidden",
+            cloak: true %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <div class="h-full relative overflow-auto">
+      <%= render_component :tab_panels, alpine_data: "$store.inspector.main" do |tabs| %>
+        <% @main_panels.each do |panel| %>
+          <% tabs.panel name: panel.name, class: panel.panel_classes do %>
+            <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
+          <% end %>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+
+  <%= layout.pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer",
+    x_show: "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>
+
+    <%= render_component :toolbar do |toolbar| %>
+      <% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
+        <%= render_component :tabs, alpine_data: "$store.inspector.drawer" do |tabs| %>
+          <%= @drawer_panels.each do |panel| %>
+            <% tabs.tab name: panel.name,
+              label: panel.label,
+              hotkey: panel.hotkey,
+              disabled: panel.disabled %>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <% toolbar.section align: :right,  class: "flex-none relative z-10" do %>
+        <%= render_component :button_group do |group| %>
+          <%= @drawer_panels.filter { |p| !p.disabled && p.copy }.each do |panel| %>
+            <% group.button icon: :copy,
+              tooltip: "Copy panel contents",
+              copy: !!panel.copy,
+              x_show: "$store.inspector.drawer.activeTab === '#{panel.name}'",
+              cloak: true do %>
+              <%== panel.copy ? panel.copy : "" %>
+              <% end %>
+          <% end %>  
+        <% end %>
+      <% end %>
+
+      <% toolbar.section divide: :left, class: "flex-none relative z-10" do %>
+        <%= render_component :button_group do |group| %>
+
+          <% group.button icon: :corner_up_right,
+            tooltip: "Move drawer to right",
+            "@click": "switchOrientation",
+            x_show: "horizontal && layoutWidth > $store.inspector.minVerticalSplitWidth",
+            cloak: true %>
+
+          <% group.button icon: :corner_up_right,
+            x_show: "horizontal && layoutWidth <= $store.inspector.minVerticalSplitWidth",
+            disabled: true,
+            cloak: true %>
+
+          <% group.button icon: :corner_left_down,
+            tooltip: "Move drawer to bottom",
+            "@click": "switchOrientation",
+            x_show: "vertical",
+            cloak: true %>
+
+          <% group.button icon: :x_circle,
+            tooltip: "Hide drawer",
+            "@click": "$store.inspector.drawer.hidden = true",
+            cloak: true %>
+        <% end %>
+      <% end %>
+    <% end %> 
+
+    <div class="h-full overflow-auto">
+      <%= render_component :tab_panels, alpine_data: "$store.inspector.drawer" do |tabs| %>
+        <% @drawer_panels.each do |panel| %>
+          <% tabs.panel name: panel.name do %>
+            <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
+          <% end %>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

data/config/routes.rb

@@ -5,11 +5,11 @@ Lookbook::Engine.routes.draw do
 
   root to: "application#index", as: :home
 
-  if Lookbook::Features.enabled?(:pages)
-    get "/#{Lookbook.config.page_route}", to: "pages#index", as: :page_index
-    get "/#{Lookbook.config.page_route}/*path", to: "pages#show", as: :page
-  end
+  get "/#{Lookbook.config.page_route}", to: "pages#index", as: :page_index
+  get "/#{Lookbook.config.page_route}/*path", to: "pages#show", as: :page
 
   get "/preview/*path", to: "previews#preview", as: :preview
-  get "/*path", to: "previews#show", as: :show
+  get "/inspect/*path", to: "previews#show", as: :inspect
+
+  get "/*path", to: "previews#show_legacy", as: :inspect_legacy
 end

data/lib/lookbook/code_formatter.rb

@@ -1,19 +1,21 @@
 require "rouge"
 require "htmlbeautifier"
+require 'htmlentities'
 
 module Lookbook
   module CodeFormatter
     class << self
-      def highlight(source, language, opts = {})
-        source&.strip! unless opts[:strip] == false
-        source&.gsub!("&gt;", ">")&.gsub!("&lt;", "<")
-        language ||= "ruby"
-        formatter = Formatter.new(opts)
+      def highlight(source, **opts)
+        coder = HTMLEntities.new
+        source = coder.decode source
+        language = opts[:language] || "ruby"
+        formatter = Formatter.new(**opts)
         lexer = Rouge::Lexer.find(language.to_s) || Rouge::Lexer.find("plaintext")
         formatter.format(lexer.lex(source)).html_safe
       end
 
-      def beautify(source, language = "html")
+      def beautify(source, **opts)
+        language = opts[:language] || "html"
         source = source.strip
         result = language.downcase == "html" ? HtmlBeautifier.beautify(source) : source
         result.strip.html_safe
@@ -22,23 +24,45 @@ module Lookbook
   end
 
   class Formatter < Rouge::Formatters::HTML
-    def initialize(opts = {})
+    def initialize(**opts)
       @opts = opts
       @highlight_lines = opts[:highlight_lines].to_a || []
-      @start_line = opts[:start_line] || 0
+      @start_line = opts[:start_line] || 1
+      @language = opts[:language]
     end
 
     def stream(tokens, &block)
-      token_lines(tokens).each_with_index do |line_tokens, i|
-        yield "<div class='line #{"highlighted-line" if @highlight_lines.include?(i + 1)}'>"
-        yield "<span class='line-number'>#{@start_line + i}</span>" if @opts[:line_numbers]
-        yield "<span class='line-content'>"
+      lines = token_lines(tokens)
+
+      yield "<div class='wrapper'>"
+
+      if @opts[:line_numbers]
+        yield "<div class='line-numbers'>"
+        lines.each.with_index do |line, i|
+          yield "<div class='line #{"highlighted" if highlighted?(i)}'><span class='line-number'>#{line_number(i)}</span></div>"
+        end
+        yield "</div>"
+      end
+
+      yield "<pre class='code highlight' data-lang='#{@language}'><code>"
+      lines.each.with_index do |line_tokens, i|
+        yield "<div class='line#{" highlighted" if highlighted?(i)}'>"
         line_tokens.each do |token, value|
           yield span(token, value)
         end
-        yield "</span>"
         yield "</div>"
       end
+      yield "</code></pre>"
+
+      yield "</div>"
+    end
+
+    def highlighted?(i)
+      @highlight_lines.include?(i + 1)
+    end
+
+    def line_number(i)
+      @start_line + i
     end
   end
 end

data/lib/lookbook/collection.rb

@@ -1,23 +1,24 @@
 module Lookbook
-  class Collection
-    include Utils
+  class Collection < Entity
     include Enumerable
 
-    attr_reader :path
     delegate :size, :each, to: :items
 
     def initialize(path = "", items = [])
+      @items = []
       if path.is_a?(Array)
-        @items = path
+        items = path
         path = ""
-      else
-        @items = items
       end
+      
       @path = path.delete_prefix("/").delete_suffix("/")
+      super(@path)
+
+      items.each { |item| add(item) }
     end
 
     def id
-      generate_id(lookup_path || "root")
+      lookup_path.present? ? super : "root"
     end
 
     def name
@@ -28,26 +29,24 @@ module Lookbook
       name&.titleize
     end
 
-    def lookup_path
-      @lookup_path ||= to_lookup_path(@path)
-    end
-
     def position
       @position ||= parse_position_prefix(basename).first
     end
 
-    def hierarchy_depth
-      @path ? @path.split("/").size : 0
-    end
-
     def items
-      @items.sort_by { |item| [item.hierarchy_depth, item.position, item.label] }
+      @items.sort_by { |item| [item.hierarchy_depth, item&.position, item.label] }
     end
 
     def visible_items
       reject { |i| i.hidden? }
     end
 
+    def non_empty_items
+      items.filter do |item|
+        !item.is_a?(Lookbook::Collection) || item.items.any?
+      end
+    end
+
     def add(item)
       @ordered_entities = nil
       @tree = nil
@@ -134,6 +133,10 @@ module Lookbook
       @tree
     end
 
+    def collapsible?
+      false
+    end
+
     def type
       :collection
     end