lookbook 1.0.8 → 1.1.0

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

@@ -0,0 +1,40 @@
+module Lookbook
+  module Params
+    class Editor::Component < Lookbook::BaseComponent
+      renders_many :fields, ->(input:, description: nil, **attrs) do
+        @field_count += 1
+        @descriptions = true if description.present?
+        input_config = @inputs[input.tr("-", "_").to_sym]
+        Lookbook::Params::Field::Component.new(input: input, description: description, index: @field_count, config: input_config, **attrs)
+      end
+
+      def initialize(inputs: {}, **html_attrs)
+        @inputs = inputs
+        @field_count = -1
+        @descriptions = false
+        @@input_styles = {}
+        super(**html_attrs)
+      end
+
+      def before_render
+        fields
+      end
+
+      def param_styles
+        @css_styles ||= @@input_styles.map do |input_name, styles|
+          styles.map { |s| "[data-param-input=#{input_name}] #{s}" }.join("\n")
+        end.join("\n")
+      end
+
+      def self.add_styles(input, styles)
+        @@input_styles[input] ||= styles
+      end
+
+      protected
+
+      def alpine_component
+        "paramsEditorComponent"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,76 @@
+@layer components {
+  [data-component="params-editor"] {
+    table:not(.linear) {
+      thead {
+        tr {
+          @apply border-b border-gray-300;
+        }
+
+        th {
+          @apply font-bold py-4 px-4 align-middle text-left;
+        }
+
+        th.param-label {
+          width: 18%;
+        }
+
+        th.param-input {
+          width: 45%;
+        }
+      }
+
+      tbody {
+        tr + tr td {
+          @apply border-t border-gray-200;
+        }
+
+        td {
+          @apply py-4 px-4 align-middle;
+        }
+
+        td.param-label {
+          @apply font-bold;
+        }
+
+        .param-input-wrapper {
+          min-height: 38px;
+        }
+      }
+    }
+  }
+
+  [data-component="params-editor"] {
+    table.linear {
+      table,
+      tr,
+      td {
+        display: block;
+      }
+
+      thead,
+      th {
+        display: none;
+      }
+
+      tr:not(:last-child) {
+        @apply border-b border-gray-200;
+      }
+
+      tr {
+        @apply space-y-3 py-4;
+      }
+
+      td {
+        @apply px-4 align-middle;
+      }
+
+      td.param-label {
+        @apply font-bold;
+      }
+
+      td.param-description-empty {
+        @apply hidden;
+      }
+    }
+  }
+}

data/app/components/lookbook/params/field/component.html.erb

@@ -0,0 +1,27 @@
+<%= render_component_tag :tr, "@keydown.stop": true do %>  
+  <td class="param-label">
+    <label for="param-<%= @name %>">
+      <span class="mr-0.5"><%== @label %></span>
+      <% if hint? %>
+        <span x-data="tooltipComponent" class="inline-block cursor-help relative top-[2px]">
+          <%= icon :help_circle, size: 3.5, class: "opacity-40 hover:opacity-100 transition" %>
+          <div class="hidden" x-ref="tooltip">
+            <%= @hint %>
+          </div>
+        </span>
+      <% end %>
+    </label>
+  </td>
+  <td class="param-description <%= "param-description-empty" unless description? %>">
+    <% if description? %>
+      <p class="opacity-70"><%= @description %></p>
+    <% else %>
+      <p class="italic opacity-40">&mdash;</p>
+    <% end %>
+  </td>
+  <td class="param-input">
+    <div class="param-input-wrapper">
+      <%= input %>
+    </div>
+  </td>
+<% end %>

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

@@ -0,0 +1,7 @@
+export default function paramsFieldComponent() {
+  return {
+    get isNarrowLayout() {
+      return this.narrow || false;
+    },
+  };
+}

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

@@ -0,0 +1,101 @@
+module Lookbook
+  module Params
+    class Field::Component < Lookbook::BaseComponent
+      def initialize(name:, input:, index:, label: nil, hint: nil, description: nil, value: nil, value_default: nil, value_type: nil, input_options: {}, config: nil, **html_attrs)
+        @input_name = input
+        @name = name
+        @label = label || name.titleize
+        @hint = hint
+        @description = description
+        @value = value
+        @index = index
+        @input_options = input_options
+        @value_default = value_default
+        @value_type = value_type
+        @config = config || {}
+        @rendered_input = nil
+        super(**html_attrs)
+      end
+
+      def hint?
+        @hint.present?
+      end
+
+      def description?
+        @description.present?
+      end
+
+      def input
+        @rendered_input
+      end
+
+      def before_render
+        tpl = TemplateParser.new(render_input)
+        Editor::Component.add_styles(@input_name, tpl.styles)
+
+        wrapper_attrs = {
+          data: {"param-input": @input_name},
+          "x-data": "paramsInputComponent({name: '#{@name}', value: #{escaped_value}})"
+        }
+
+        @rendered_input = tag.div(**wrapper_attrs) do
+          tpl.content
+        end
+      end
+
+      protected
+
+      def input_error(error)
+        tag.div error, class: "p-2 text-red-500 italic"
+      end
+
+      def value
+        val = @value.presence || @value_default
+        @value_type.downcase == "boolean" ? val == "true" || val == true : val
+      end
+
+      def escaped_value
+        json_escape(value.to_json)
+      end
+
+      def input_options
+        config_options = @config.fetch(:input_options, {})
+        opts = config_options.merge(@input_options).symbolize_keys
+        opts[:id] = "param-#{@name}"
+        opts
+      end
+
+      def render_props
+        {
+          name: @name,
+          input: @input_name,
+          value: value,
+          value_type: @value_type,
+          value_default: @value_default,
+          input_options: input_options.except(:choices),
+          choices: input_options[:choices]
+        }
+      end
+
+      def render_input
+        target = @config[:partial]
+
+        if target
+          render(target, **render_props)
+        else
+          input_error "No param input defined for input type '#{@input_name}'."
+        end
+      rescue ::ActionView::MissingTemplate => exception
+        Lookbook.logger.error exception
+        input_error "Param input partial '#{@config[:partial]}' could not be found."
+      rescue => exception
+        Lookbook.logger.error exception
+        input_error exception.message
+      end
+
+      def alpine_component
+        "paramsFieldComponent"
+      end
+    end
+  end
+end

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

@@ -9,8 +9,8 @@
     <%= safe_join(tabs) %>
   </div>
   <div x-ref="dropdownTrigger" class="absolute" x-show="hasHiddenTabs" :style="{left: `${triggerLeft}px`}">
-    <%= render_component :button, icon: :chevrons_right, "x-show": "visibleTabsCount > 0" %>
-    <%= render_component :button, icon: :menu, class: "-ml-3", "x-show": "visibleTabsCount === 0" %>
+    <%= lookbook_render :button, icon: :chevrons_right, "x-show": "visibleTabsCount > 0" %>
+    <%= lookbook_render :button, icon: :menu, class: "-ml-3", "x-show": "visibleTabsCount === 0" %>
   </div>
   <div class="hidden">
     <div x-ref="tabsDropdown" data-cloak>

data/app/components/lookbook/tag_component.rb

@@ -12,6 +12,7 @@ module Lookbook
     end
 
     def call
+      @html_attrs[:class] = class_names(@html_attrs[:class])
       tag.public_send(@tag.to_sym, **@html_attrs) do
         content
       end

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

@@ -4,7 +4,7 @@
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23f3f3f3' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
 
     .resize-handle {
-      @apply flex items-center justify-center h-full w-full border-lookbook-divider bg-lookbook-viewport-handle hover:bg-indigo-100 hover:bg-opacity-20;
+      @apply flex items-center justify-center h-full w-full border-lookbook-divider bg-lookbook-viewport-handle hover:bg-lookbook-draggable-hint hover:bg-opacity-20;
       @apply text-lookbook-viewport-handle-icon-stroke hover:text-lookbook-viewport-handle-icon-stroke-hover transition select-none touch-none;
     }
   }

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

@@ -11,6 +11,17 @@
       <% elsif @max_height.present? %>
         max-height: <%= @max_height %>px;
       <% end %>`">
+  
+    <div
+      class="absolute z-10 pointer-events-none pr-1 pl-2 pt-1.5 pb-1 bg-gray-100/80 rounded-tl-sm top-0 <%= @resize_width ? "right-[18px]" : "right-0" %>"
+      x-ref="dimensions"
+      x-show="store.resizing"
+      x-cloak
+      x-transition:enter.opacity.duration.300ms
+      x-transition:leave.opacity.duration.500ms.delay.600ms>
+      <%= lookbook_render :dimensions_display, target: "[data-component=viewport] iframe" %>
+    </div>
+
     <div
       class="grid bg-white relative -inset-px <%= "grid-cols-[1fr_17px]" if @resize_width %> <%= "grid-rows-[1fr_17px]" if @resize_height %>"
       style="width: calc(100% + 2px); height: calc(100% + 1px); <%= "max-height: #{@max_height}px;" if @max_height.present? %>">

data/app/controllers/lookbook/previews_controller.rb

@@ -97,7 +97,7 @@ module Lookbook
         # cast known params to type
         @target.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])
+            preview_controller.params[param[:name]] = Lookbook::Params.cast(preview_controller.params[param[:name]], param[:value_type])
           end
         end
         # set display and data params

data/app/helpers/lookbook/component_helper.rb

@@ -3,33 +3,69 @@ module Lookbook
     COMPONENT_CLASSES = {} # cache for constantized references
 
     def icon(name, **attrs)
-      render Lookbook::Icon::Component.new(name: name, **attrs)
+      lookbook_render :icon, name: name, **attrs
     end
 
     def code(language = :html, **attrs, &block)
       attrs[:language] ||= language
-      render Lookbook::Code::Component.new(**attrs), &block
+      lookbook_render :code, **attrs, &block
     end
 
-    def render_component(ref, **attrs, &block)
-      klass = component_class(ref)
-      comp = attrs.key?(:content) ? klass.new(**attrs.except(:content)).with_content(attrs[:content]) : klass.new(**attrs)
-      render comp, &block
+    def lookbook_tag(tag = :div, **attrs, &block)
+      lookbook_render :tag, tag: tag, **attrs, &block
     end
 
-    def render_tag(tag = :div, **attrs, &block)
-      render Lookbook::TagComponent.new(tag: tag, **attrs), &block
+    def lookbook_render(ref, **attrs, &block)
+      comp = if ref.is_a? ViewComponent::Base
+        ref
+      else
+        klass = component_class(ref)
+        attrs.key?(:content) ? klass.new(**attrs.except(:content)).with_content(attrs[:content]) : klass.new(**attrs)
+      end
+      if block && !attrs.key?(:content)
+        public_send render_method_name, comp, &block
+      else
+        public_send render_method_name, comp
+      end
     end
 
-    if Rails.version.to_f < 6.1
+    unless respond_to? :class_names
       def class_names(*args)
         tokens = build_tag_values(*args).flat_map { |value| value.to_s.split(/\s+/) }.uniq
+
         safe_join(tokens, " ")
       end
+
+      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
 
     private
 
+    def render_method_name
+      if Rails.application.config.view_component.render_monkey_patch_enabled || Rails.version.to_f >= 6.1
+        :render
+      else
+        :render_component
+      end
+    end
+
     def component_class(ref)
       klass = COMPONENT_CLASSES[ref]
       if klass.nil?
@@ -44,22 +80,5 @@ module Lookbook
       end
       klass
     end
-
-    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/helpers/lookbook/page_helper.rb

@@ -22,7 +22,7 @@ module Lookbook
 
       embed_id = "#{url_for}/embed/#{example.lookup_path}".delete_prefix("/").tr("/", "-")
 
-      render_component :embed,
+      lookbook_render :embed,
         id: embed_id,
         example: example,
         params: params,

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

@@ -1,6 +1,6 @@
 <% content_for :shell do %>
   <% if @previews.any? || @pages.any? %>
-    <%= render_component :split_layout,
+    <%= lookbook_render :split_layout,
       alpine_data: "$store.layout.main",
       ":class": "$store.layout.mobile && '!block'" do |layout| %>
 
@@ -13,13 +13,13 @@
         "@click.outside": "closeMobileSidebar",
         cloak: true do %>
 
-        <%= render_component :split_layout,
+        <%= lookbook_render :split_layout,
           alpine_data: "$store.layout.#{@pages.any? && @previews.any? ? "sidebar" : "singleSectionSidebar"}",
           style: "height: calc(100vh - 2.5rem);" do |layout| %>
 
           <% if @previews.any? %>
             <% layout.pane class: "overflow-hidden" do %>
-              <%= render_component :nav,
+              <%= lookbook_render :nav,
                 id: "previews-nav",
                 collection: @previews,
                 alpine_data: "$store.nav.previews",
@@ -28,6 +28,13 @@
                   <% toolbar.section padded: true do %>
                     <h4 class="pt-1">Previews</h4>
                   <% end %>
+                  <% toolbar.section align: :right, padded: false do %>
+                    <%= lookbook_render :button_group, size: :xs do |group| %>
+                      <% group.button icon: :minus_square,
+                        tooltip: "Collapse all",
+                        "@click": "closeAll" %>
+                    <% end %>
+                  <% end %>
                 <% end %>
                 <% nav.filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
               <% end %>
@@ -36,7 +43,7 @@
 
           <% if @pages.any? %>
             <% layout.pane class: "overflow-hidden" do %>
-              <%= render_component :nav,
+              <%= lookbook_render :nav,
                 id: "pages-nav",
                 collection: @pages,
                 alpine_data: "$store.nav.pages" do |nav| %>
@@ -44,6 +51,13 @@
                   <% toolbar.section padded: true do %>
                     <h4 class="pt-1">Pages</h4>
                   <% end %>
+                  <% toolbar.section align: :right, padded: false do %>
+                    <%= lookbook_render :button_group, size: :xs do |group| %>
+                      <% group.button icon: :minus_square,
+                        tooltip: "Collapse all",
+                        "@click": "closeAll" %>
+                    <% end %>
+                  <% end %>
                 <% end %>
               <% end %>
             <% end %>

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

@@ -12,14 +12,14 @@
           <div class="relative z-10 flex items-center">
           
           <% if @previous_page %>
-            <%= render_component :button,
+            <%= lookbook_render :button,
               size: :lg,
               icon: :chevron_left,
               tooltip: "Previous page",
               href: lookbook_page_path(@previous_page.lookup_path),
               class: "pr-0.5 bg-transparent" %>
           <% else %>
-            <%= render_component :button,
+            <%= lookbook_render :button,
               size: :lg,
               icon: :chevron_left,
               disabled: true,
@@ -27,14 +27,14 @@
           <% end %>
 
           <% if @next_page %>
-            <%= render_component :button,
+            <%= lookbook_render :button,
               size: :lg,
               icon: :chevron_right,
               tooltip: "Next page",
               href: lookbook_page_path(@next_page.lookup_path),
               class: "pl-0.5 bg-transparent" %>
           <% else %>
-            <%= render_component :button,
+            <%= lookbook_render :button,
               size: :lg,
               icon: :chevron_right,
               disabled: true,

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

@@ -7,13 +7,13 @@
     @navigation:start="closeMobileSidebar"
     class="w-screen h-screen grid grid-rows-[40px_1fr] relative">
 
-    <% if content_for? :panel_css %>
-      <style media="all" id="panel-styles">
-        <%= content_for :panel_css -%>
+    <% if content_for? :user_styles %>
+      <style media="all" id="user-styles">
+        <%= content_for :user_styles -%>
       </style>
     <% end %>
 
-    <%= render_component :header, id: "app-header", debug_menu: config.debug_menu do |header| %>
+    <%= lookbook_render :header, id: "app-header", debug_menu: config.debug_menu do |header| %>
       <% header.branding { config.project_name } %>
     <% end %>
 

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

@@ -42,11 +42,5 @@
 </head>
 <body>
   <%= yield :body %>
-  
-  <% if Rails.env.development? %>
-    <div id="debug-data" class="hidden" x-cloak>
-      <%= pretty_json(Lookbook.debug_data) %>
-    </div>
-  <% end %>
 </body>
 </html>

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

@@ -24,7 +24,7 @@ error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error)
 
     <% if error.source_code %>
       <div class="mx-8 border border-red-200 max-w-screen-lg">
-        <%= render_component :code,
+        <%= lookbook_render :code,
           language: error.file_lang,
           highlight_lines: [error.source_code[:highlighted_line]],
           start_line: error.source_code[:start_line],

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

@@ -6,12 +6,12 @@
       </header>
     <% end %>
 
-    <%= render_component :prose, id: "page-content", markdown: false, class: "max-w-none flex-none" do %>
+    <%= lookbook_render :prose, id: "page-content", markdown: false, class: "max-w-none flex-none" do %>
       <%= @page_content %>
     <% end %>
 
     <% if @page.sections.any? %>
-      <%= render_component :page_tabs, id: "page-tabbed-sections", markdown: false, class: "mt-6" do |page_tabs| %>
+      <%= lookbook_render :page_tabs, id: "page-tabbed-sections", markdown: false, class: "mt-6" do |page_tabs| %>
         <% @page.sections.each do |section| %>
           <% page_tabs.tab name: "page-section-#{section.name}", label: section.label do %>
             <%= page_controller.render_page(section) %>

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

@@ -0,0 +1,5 @@
+<%= text_field_tag(name, value,
+  **input_options,
+  type: "color",
+  "x-model.throttle.300ms": "value"
+) %>

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

@@ -0,0 +1,15 @@
+<div class="w-full flex items-center pt-2">
+  <div class="flex-none px-2 opacity-60">
+    <%= input_options[:min] %>
+  </div>
+  <div class="w-full px-2">
+    <%= text_field_tag(name, value,
+      **input_options,
+      type: "range",
+      "x-model.throttle.300ms": "value"
+    ) %>
+  </div>
+  <div class="flex-none px-2 opacity-60">
+    <%= input_options[:max] %>
+  </div>
+</div>

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

@@ -0,0 +1,5 @@
+<%= select_tag(name,
+  options_for_select(choices || [], value),
+  **input_options,
+  "x-model": "value"
+) %>

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

@@ -0,0 +1,5 @@
+<%= text_field_tag(name, value,
+  **input_options,
+  type: input,
+  "x-model.debounce.200ms": "value"
+) %>

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

@@ -0,0 +1,5 @@
+<%= text_area_tag(name, value,
+  rows: 4,
+  **input_options,
+  "x-model.debounce.200ms": "value"
+) %>

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

@@ -0,0 +1,20 @@
+<%
+button_classes = [
+  "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-input-border-focus",
+  value == true ? "bg-lookbook-input-toggle-active" : "bg-lookbook-input-toggle"
+]
+span_classes = [
+  "pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200",
+  value == true ? "translate-x-5" : "translate-x-0"
+]
+%>
+
+<%= button_tag **input_options,
+  class: class_names(button_classes),
+  role: "switch",
+  type: "button",
+  "@click.stop": "value = !value" do %>
+  <%= tag.span "aria-hidden": true, class: class_names(span_classes) %>
+<% end %>

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

@@ -1,11 +1,11 @@
 <div class="p-4 bg-lookbook-prose-bg h-full">
   <% if panel.content.present? %>
-    <%= render_component :prose, markdown: true do %>
+    <%= lookbook_render :prose, markdown: true do %>
       <%== panel.content %>
     <% end %>
   <% else %>
     <% if Rails.env.development? %>
-      <%= render_component :prose do %>
+      <%= lookbook_render :prose do %>
         <em class='opacity-50'>No content has been defined for this panel.</em>
       <% end %>
     <% end %>