lookbook 2.0.0.beta.7 → 2.0.0.beta.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2aeae40db8c7d4b78350a2de8a0b95cdf2728e539bd7875a9c7562116db2bca4
-  data.tar.gz: a9167271b7ba9af1942b13ef871b045f76c5a71ff7dc6e1771c5fae94934abc0
+  metadata.gz: c56294755ec1cadc843570567334d0b03ca5c2f462a8b2f78a8732b8829b63d8
+  data.tar.gz: 7acecdcc7dee2ba4a1110da91f204d75a05a04c28c7578c425c9bcc00e946623
 SHA512:
-  metadata.gz: 858c8effb4094dbd6aba5cb125b0e241e6c8f49959fb7437ce96bd1925afb9994d8d11cda03ef456823627f6af2732cfddbdf96e897e3bdb3fecc0081755e356
-  data.tar.gz: 66680a4c10c8be27d25a4cf790d3833a2d93b6ffcef1ca9c965f27f350962d4d000c668820b59ac02326b783db25c5f9499ca4994afe2fde0340e5c8d3df89bf
+  metadata.gz: 6c1aec7589afd938ef941d112c478756a0d2838458245752e0605333a2c68d94efea2a7dda06a60951b7a760850f62c69efe2d393a17773632e5fcbfd707b2d0
+  data.tar.gz: f5cd4fbf4ad04f6dc8d99038cd6f5d8058e4463e0ec7844d89bef51c2200412890ef3be51315d42a01141fb8b46be895ecd4b5b6059c0723cc7de72398859421

data/README.md

@@ -54,6 +54,13 @@ Tests can be run using the `rake spec` or `bundle exec rspec` commands.
 
 The dummy app that the tests are being run against can be viewed by running the `bin/dummy` command and then browsing to http://localhost:9292/lookbook
 
+### Releases
+
+Lookbook uses [Release It!](https://github.com/release-it/release-it) to automate the release process.
+
+Running `npm run release` will start the process of publishing a new release and walks though all the steps from picking a version number to publishing the updated gem.
+
+Publishing a release requires write permissions for this repository (ViewComponent/lookbook) and 2FA publish permissions for Lookbook on RubyGems.
 
 ## Contributing
 

data/app/components/lookbook/page_tabs/component.html.erb

@@ -1,5 +1,5 @@
  <%= render_component_tag "x-data": "{ activeTab: null }" do %>
-  <div class="flex w-full border-b border-lookbook-divider mb-6">
+  <div class="flex w-full border-b border-lookbook-divider mb-6 lg:mb-8">
     <%= lookbook_render :tabs, theme: :page do |t| %>
       <% @tabs.each do |props| %>
         <%= t.with_tab **props %>
@@ -9,7 +9,7 @@
   <%= lookbook_render :tab_panels do |t| %>
     <% @tabs.each do |props| %>
       <% t.with_panel name: props[:name] do %>
-        <%= lookbook_render :prose, markdown: props[:markdown], class: "max-w-none flex-none" do %>
+        <%= lookbook_render :prose, size: :md, markdown: props[:markdown], class: "max-w-none flex-none" do %>
           <%== props[:tab_content] %>
         <% end %>
       <% end %>

data/app/components/lookbook/params/field/component.rb

@@ -17,7 +17,7 @@ module Lookbook
         escaped_value = json_escape(param.value.to_s)
         wrapper_attrs = {
           data: {"param-input": param.input},
-          "x-data": "paramsInputComponent({name: '#{param.name}', value: '#{escaped_value}'})"
+          "x-data": "paramsInputComponent({name: \"#{param.name}\", value: \"#{escaped_value}\"})"
         }
         @rendered_input = tag.div(**wrapper_attrs) { html.html_safe }
       end

data/app/components/lookbook/prose/component.css

@@ -1,6 +1,8 @@
 @layer components {
   [data-component="prose"] {
-    letter-spacing: -0.015em !important;
+    @apply font-prose;
+
+    /* letter-spacing: -0.015em !important; */
 
     [data-component="code"] {
       @apply border border-lookbook-divider rounded-md;

data/app/components/lookbook/prose/component.html.erb

@@ -3,6 +3,7 @@
     text-lookbook-prose-text bg-lookbook-prose-bg prose-a:text-lookbook-prose-link
     prose-headings:font-semibold
     prose-h1:font-bold
+    prose-h2:border-b prose-h2:border-lookbook-divider prose-h2:pb-3
   " do %>
   <%== rendered_content %>
 <% end %>

data/app/components/lookbook/split_layout/component.html.erb

@@ -2,10 +2,10 @@
   <% panes.each.with_index(1) do |pane, i| %>
     <%= pane %>
     <% if i < panes.size %>
-      <div class="bg-lookbook-divider relative z-50" x-init="registerGutter">
+      <div class="split-layout-gutter bg-lookbook-divider relative z-50" x-init="registerGutter">
         <div class="absolute z-10 bg-transparent hover:bg-lookbook-draggable-hint transition-all" :class="{
-          'w-[9px] h-full -translate-x-1/2 cursor-[col-resize]': vertical,
-          'h-[9px] w-full -translate-y-1/2 cursor-[row-resize]': horizontal
+          'w-[9px] h-full -translate-x-1/2 cursor-[col-resize] split-layout-gutter-vertical': vertical,
+          'h-[9px] w-full -translate-y-1/2 cursor-[row-resize] split-layout-gutter-horizontal': horizontal
         }"></div>
       </div>
     <% end %>

data/app/controllers/concerns/lookbook/targetable_concern.rb

@@ -96,7 +96,7 @@ module Lookbook
 
       scenarios = @target ? @target.scenarios : []
       rendered_scenarios = scenarios.map do |scenario|
-        output = preview_controller.process(:render_scenario_to_string, @preview, scenario.name)
+        output = preview_controller.process(:render_scenario_to_string, @preview, scenario)
         RenderedScenarioEntity.new(scenario, output, preview_controller.params)
       end
 

data/app/helpers/lookbook/application_helper.rb

@@ -1,7 +1,7 @@
 module Lookbook
   module ApplicationHelper
     def lookbook_asset_path(file, version: true)
-      path = "/lookbook-assets/#{file}".gsub("//", "/")
+      path = "#{Engine.host_config.relative_url_root}/lookbook-assets/#{file}".gsub("//", "/")
       version ? "#{path}?v=#{Lookbook::VERSION}" : path
     end
 

data/app/views/lookbook/errors/default.html.erb

@@ -5,7 +5,7 @@
     </header>
 
     <div class="px-8 py-6 mb-8 border-t border-b border-red-200 bg-red-100 text-base leading-relaxed">
-      <pre class="whitespace-pre-wrap font-sans leading-tight text-red-900"><%= @error.message %></pre>
+      <pre class="whitespace-pre-wrap font-ui leading-tight text-red-900"><%= @error.message %></pre>
     </div>
 
     <% if @error.file_path %>

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

@@ -1,6 +1,6 @@
 <div class="overflow-hidden h-full w-full">
   <%= lookbook_render :viewport,
-    key: (lookbook_preview_path(request.query_parameters).parameterize unless Rails.env.test?),
+    key: (lookbook_preview_path(request.query_parameters).force_encoding('UTF-8').parameterize unless Rails.env.test?),
     iframe_id: "preview-iframe",
     src: lookbook_preview_path(request.query_parameters.merge(lookbook_timestamp: Time.now)),
     alpine_data: "$store.inspector.main",

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

@@ -1,5 +1,6 @@
 <main class="h-[calc(100vh_-_2.5rem)]">
   <%= lookbook_render :split_layout,
+    id: "inspector",
     alpine_data: "$store.layout.inspector",
     ":class": "($store.inspector.drawer.hidden || #{@drawer_panels.none?}) && '!grid-rows-[1fr] !grid-cols-[1fr]'",
     data: {

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

@@ -3,86 +3,93 @@
   x-data="{}"
   @navigation:complete.window="$refs.scroller.scrollTop = 0">
   <div class="h-full bg-lookbook-page-bg relative">
-    <% unless @error %>
-
-      <div class="absolute top-0 right-0 pt-1 pr-0 pl-1 pb-1 rounded-bl-md">
-        <div class="bg-lookbook-page-bg opacity-90 absolute inset-0 w-full h-full z-0"></div>
-        <div class="relative z-10 flex items-center">
+    <div class="overflow-auto scroll-smooth w-full max-h-full pb-12" x-ref="scroller">
+      <div class="h-full flex flex-col">
+        <% if @page.header? %>
+          <header id="page-header"
+            class="px-4 md:px-10 mb-8 pt-8 md:pt-10 lg:pt-12 pb-6 lg:pb-8 lg:mb-9 bg-lookbook-page-header-bg border-b border-lookbook-page-header-border relative">
+            <div class="w-full max-w-screen-lg mx-auto">
+              <%= lookbook_render :prose, size: :md, markdown: false, class: "bg-transparent max-w-none flex-none" do %>
+                <h1 class="text-lookbook-page-header-text"><%= @page.title %></h1>
+              <% end %>
+            </div>
+            <% unless @error %>
+              <div class="absolute top-0 right-0 pt-1 pr-0 pl-1 pb-1 rounded-bl-md">
+                <div class="bg-transparent opacity-90 absolute inset-0 w-full h-full z-0"></div>
+                <div class="relative z-10 flex items-center scale-75 -mt-1 -mr-1.5 md:scale-100 md:mt-0 md:-mr-[2px]">
 
-        <% if @previous_page %>
-          <%= lookbook_render :icon_button,
-            size: :lg,
-            icon: :chevron_left,
-            tooltip: "Previous page",
-            href: lookbook_page_path(@previous_page.lookup_path),
-            class: "pr-0.5 bg-transparent" %>
-        <% else %>
-          <%= lookbook_render :icon_button,
-            size: :lg,
-            icon: :chevron_left,
-            disabled: true,
-            class: "opacity-50 !cursor-default pr-0.5 bg-transparent" %>
-        <% end %>
+                <% if @previous_page %>
+                  <%= lookbook_render :icon_button,
+                    size: :lg,
+                    icon: :chevron_left,
+                    tooltip: "Previous page",
+                    href: lookbook_page_path(@previous_page.lookup_path),
+                    class: "pr-0.5 bg-transparent" %>
+                <% else %>
+                  <%= lookbook_render :icon_button,
+                    size: :lg,
+                    icon: :chevron_left,
+                    disabled: true,
+                    class: "opacity-50 !cursor-default pr-0.5 bg-transparent" %>
+                <% end %>
 
-        <% if @next_page %>
-          <%= lookbook_render :icon_button,
-            size: :lg,
-            icon: :chevron_right,
-            tooltip: "Next page",
-            href: lookbook_page_path(@next_page.lookup_path),
-            class: "pl-0.5 bg-transparent" %>
-        <% else %>
-          <%= lookbook_render :icon_button,
-            size: :lg,
-            icon: :chevron_right,
-            disabled: true,
-            class: "opacity-50 !cursor-default pl-0.5 bg-transparent" %>
-        <% end %>
-        </div>
-      </div>
-    <% end %>
-
-    <div class="px-4 md:px-10 pt-8 md:pt-10 overflow-auto scroll-smooth w-full max-h-full pb-12" x-ref="scroller">
-      <div class="w-full max-w-screen-lg mx-auto h-full flex flex-col">
-        <% if @page.header? %>
-          <header id="page-header" class="mb-7 pb-6 lg:mb-9 lg:pb-8 border-b border-lookbook-divider">
-            <%= lookbook_render :prose, size: :md, markdown: false, class: "max-w-none flex-none" do %>
-              <h1><%= @page.title %></h1>
+                <% if @next_page %>
+                  <%= lookbook_render :icon_button,
+                    size: :lg,
+                    icon: :chevron_right,
+                    tooltip: "Next page",
+                    href: lookbook_page_path(@next_page.lookup_path),
+                    class: "pl-0.5 bg-transparent" %>
+                <% else %>
+                  <%= lookbook_render :icon_button,
+                    size: :lg,
+                    icon: :chevron_right,
+                    disabled: true,
+                    class: "opacity-50 !cursor-default pl-0.5 bg-transparent" %>
+                <% end %>
+                </div>
+              </div>
             <% end %>
           </header>
         <% end %>
 
-        <%= lookbook_render :prose, size: :md, id: "page-content", markdown: false, class: "max-w-none flex-none min-h-[50vh]" do %>
-          <%= @page_content %>
-        <% end %>
+        <div class="px-4 md:px-10 min-h-[calc(100vh_-_400px)]">
+          <div class="w-full max-w-screen-lg mx-auto">
+            <%= lookbook_render :prose, size: :md, id: "page-content", markdown: false, class: "max-w-none flex-none" do %>
+              <%= @page_content %>
+            <% end %>
 
-        <% if @page.sections.any? %>
-          <%= lookbook_render :page_tabs, id: "page-tabbed-sections", markdown: false, class: "mt-6" do |page_tabs| %>
-            <% @page.sections.each do |section| %>
-              <% page_tabs.with_tab name: "page-section-#{section.name}", label: section.label do %>
-                <%= page_controller.render_page(section) %>
+            <% if @page.sections.any? %>
+              <%= lookbook_render :page_tabs, id: "page-tabbed-sections", markdown: false, class: "mt-6 lg:mt-8" do |page_tabs| %>
+                <% @page.sections.each do |section| %>
+                  <% page_tabs.with_tab name: "page-section-#{section.name}", label: section.label do %>
+                    <%= page_controller.render_page(section) %>
+                  <% end %>
+                <% end %>
               <% end %>
             <% end %>
-          <% end %>
-        <% end %>
+          </div>
+        </div>
 
         <% if @page.footer? && @pages.many? %>
-          <footer id="page-footer" class="flex items-center justify-between border-t border-gray-300 mt-12 pt-8 pb-10 ">
+          <footer id="page-footer" class="mt-12 lg:mt-16 px-4 md:px-10">
+          <div class=" border-t border-gray-300 w-full max-w-screen-lg mx-auto pt-8 pb-10 flex items-center justify-between ">
             <% if @previous_page %>
               <a href="<%= lookbook_page_path @previous_page.lookup_path %>"
-                class="flex items-center flex-none">
+                class="flex items-center flex-none max-w-[40%] overflow-hidden">
                 <%= icon  :arrow_left, size: 4, class: "hover:text-indigo-800" %>
-                <span class="ml-2 underline"><%= @previous_page.title %></span>
+                <span class="ml-2 underline truncate"><%= @previous_page.title %></span>
               </a>
             <% end %>
 
             <% if @next_page %>
               <a href="<%= lookbook_page_path @next_page.lookup_path %>"
-                class="flex items-center flex-none ml-auto">
-                <span class="mr-2 underline"><%= @next_page.title %></span>
+                class="flex items-center flex-none ml-auto max-w-[40%] overflow-hidden">
+                <span class="mr-2 underline truncate"><%= @next_page.title %></span>
                 <%= icon  :arrow_right, size: 4, class: "hover:text-indigo-800" %>
               </a>
             <% end %>
+          </div>
           </footer>
         <% end %>
       </div>

data/assets/css/lookbook.css

@@ -19,7 +19,7 @@
   }
 
   body {
-    @apply text-lookbook-text font-sans text-sm antialiased overflow-hidden;
+    @apply text-lookbook-text font-ui text-sm overflow-hidden;
   }
 
   [x-cloak] {
@@ -142,4 +142,8 @@
     background-size: 1.2em 1.2em;
     background-position: right 0.4rem center;
   }
+
+  #inspector .split-layout-gutter-horizontal {
+    top: 4px;
+  }
 }

data/assets/css/themes/blue.css

@@ -71,6 +71,9 @@
   --lookbook-message-border: var(--lookbook-divider);
   --lookbook-message-title: var(--lookbook-base-600);
   --lookbook-message-text: var(--lookbook-text);
+  --lookbook-page-header-bg: var(--lookbook-base-50);
+  --lookbook-page-header-text: var(--lookbook-text);
+  --lookbook-page-header-border: var(--lookbook-divider);
   --lookbook-embed-title: var(--lookbook-text);
   --lookbook-branding-text: var(--lookbook-header-text);
 }

data/assets/css/themes/green.css

@@ -71,6 +71,9 @@
   --lookbook-message-border: var(--lookbook-divider);
   --lookbook-message-title: var(--lookbook-base-600);
   --lookbook-message-text: var(--lookbook-text);
+  --lookbook-page-header-bg: var(--lookbook-base-50);
+  --lookbook-page-header-text: var(--lookbook-text);
+  --lookbook-page-header-border: var(--lookbook-divider);
   --lookbook-embed-title: var(--lookbook-text);
   --lookbook-branding-text: var(--lookbook-header-text);
 }

data/assets/css/themes/indigo.css

@@ -71,6 +71,9 @@
   --lookbook-message-border: var(--lookbook-divider);
   --lookbook-message-title: var(--lookbook-base-600);
   --lookbook-message-text: var(--lookbook-text);
+  --lookbook-page-header-bg: var(--lookbook-base-50);
+  --lookbook-page-header-text: var(--lookbook-text);
+  --lookbook-page-header-border: var(--lookbook-divider);
   --lookbook-embed-title: var(--lookbook-text);
   --lookbook-branding-text: var(--lookbook-header-text);
 }

data/assets/css/themes/rose.css

@@ -71,6 +71,9 @@
   --lookbook-message-border: var(--lookbook-divider);
   --lookbook-message-title: var(--lookbook-base-600);
   --lookbook-message-text: var(--lookbook-text);
+  --lookbook-page-header-bg: var(--lookbook-base-50);
+  --lookbook-page-header-text: var(--lookbook-text);
+  --lookbook-page-header-border: var(--lookbook-divider);
   --lookbook-embed-title: var(--lookbook-text);
   --lookbook-branding-text: var(--lookbook-header-text);
 }

data/assets/css/themes/zinc.css

@@ -71,6 +71,9 @@
   --lookbook-message-border: var(--lookbook-divider);
   --lookbook-message-title: var(--lookbook-base-600);
   --lookbook-message-text: var(--lookbook-text);
+  --lookbook-page-header-bg: var(--lookbook-base-50);
+  --lookbook-page-header-text: var(--lookbook-text);
+  --lookbook-page-header-border: var(--lookbook-divider);
   --lookbook-embed-title: var(--lookbook-text);
   --lookbook-branding-text: var(--lookbook-header-text);
 }

data/config/tags.yml

@@ -38,3 +38,7 @@ shared:
   source:
     label: Source file
     opts: {}
+
+  after_render:
+    label: After render
+    opts: {}

data/lib/lookbook/engine.rb

@@ -37,14 +37,28 @@ module Lookbook
         vc_config = Engine.host_config.view_component
 
         opts.preview_paths += vc_config.preview_paths
-        opts.preview_controller = vc_config.preview_controller
-        opts.preview_layout = vc_config.default_preview_layout
+
+        # sync preview controller and layout setting between Lookbook and ViewComponent
+        if opts.preview_controller == "Lookbook::PreviewController" ||
+            vc_config.preview_controller != ViewComponent::Config.defaults.preview_controller
+          opts.preview_controller = vc_config.preview_controller
+        else
+          vc_config.preview_controller = opts.preview_controller
+        end
+
+        if opts.preview_layout.nil? || vc_config.default_preview_layout.present?
+          opts.preview_layout = vc_config.default_preview_layout
+        else
+          vc_config.default_preview_layout = opts.preview_layout
+        end
 
         vc_config.show_previews = true
 
         if vc_config.view_component_path.present?
           opts.component_paths << vc_config.view_component_path
         end
+
+        ViewComponent::Preview.extend(Lookbook::PreviewAfterRender)
       end
 
       opts.reload_on_change = host_config.reload_classes_only_on_change if opts.reload_on_change.nil?

data/lib/lookbook/entities/preview_entity.rb

@@ -7,7 +7,7 @@ module Lookbook
     include LocatableEntity
     include NavigableEntity
 
-    delegate :render_args, to: :preview_class
+    delegate :after_render, :render_args, to: :preview_class
 
     # @api private
     attr_reader :preview_class
@@ -158,6 +158,11 @@ module Lookbook
       global_options.deep_merge(fetch_config(:display_options, {}))
     end
 
+    # @api private
+    def after_render_method
+      fetch_config(:after_render)
+    end
+
     # @api private
     def layout
       preview_class.instance_variable_get(:@layout)

data/lib/lookbook/entities/scenario_entity.rb

@@ -110,6 +110,11 @@ module Lookbook
 
     # @!endgroup
 
+    # @api private
+    def after_render_method
+      fetch_config(:after_render) || parent.after_render_method
+    end
+
     # @api private
     def scenarios
       [self]

data/lib/lookbook/preview.rb

@@ -2,6 +2,7 @@ module Lookbook
   class Preview
     include ActionView::Helpers::TagHelper
     include ActionView::Helpers::AssetTagHelper
+    extend PreviewAfterRender
 
     def render(component = nil, **args, &block)
       if component.nil?

data/lib/lookbook/preview_after_render.rb

@@ -0,0 +1,13 @@
+module Lookbook
+  # Shared module that both Lookbook::Preview and ViewComponent::Preview are extended with
+  module PreviewAfterRender
+    def after_render(method:, html:, context:)
+      instance = new
+      if instance.method(method).arity > 1
+        instance.send(method, html, context)
+      else
+        instance.send(method, html)
+      end.html_safe
+    end
+  end
+end

data/lib/lookbook/preview_controller_actions.rb

@@ -6,12 +6,12 @@ module Lookbook
       helper PreviewHelper
       prepend_view_path Engine.root.join("app/views")
 
-      def render_scenario_to_string(preview, scenario_name)
+      def render_scenario_to_string(preview, scenario)
         prepend_application_view_paths
         prepend_preview_examples_view_path
 
         @preview = preview
-        @scenario_name = scenario_name
+        @scenario_name = scenario.name
         @render_args = @preview.render_args(@scenario_name, params: params.permit!)
         template = @render_args[:template]
         locals = @render_args[:locals]
@@ -19,8 +19,19 @@ module Lookbook
         opts[:layout] = nil
         opts[:locals] = locals if locals.present?
 
+        rendered = render_to_string(template, **opts)
+
+        if scenario.after_render_method.present?
+          render_context = Store.new({
+            preview: preview,
+            scenario: scenario,
+            params: user_request_parameters
+          })
+          rendered = @preview.after_render(method: scenario.after_render_method, html: rendered, context: render_context)
+        end
+
         with_optional_action_view_annotations do
-          render html: render_to_string(template, **opts)
+          render html: rendered
         end
       end
 
@@ -40,6 +51,10 @@ module Lookbook
         disable = Lookbook.config.preview_disable_action_view_annotations
         ActionViewAnnotationsHandler.call(disable_annotations: disable, &block)
       end
+
+      def user_request_parameters
+        request.query_parameters.to_h.filter { |k, v| !k.start_with?("_") }
+      end
     end
   end
 end

data/lib/lookbook/tags/after_render_tag.rb

@@ -0,0 +1,7 @@
+module Lookbook
+  class AfterRenderTag < YardTag
+    def value
+      text.sub(/\A:/, "")
+    end
+  end
+end

data/lib/lookbook/tags/param_tag.rb

@@ -28,7 +28,7 @@ module Lookbook
     def value_default
       default_value_parts = object.parameters.find { |parts| parts[0].chomp(":") == name }
       if default_value_parts
-        object.instance_eval(default_value_parts[1])
+        host_class_instance.instance_eval(default_value_parts[1])
       else
         raise ParserError.new "Unknown method parameter '#{name}'"
       end

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "2.0.0.beta.7"
+  VERSION = "2.0.0.beta.9"
 end