lookbook 1.1.0 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d855b9a3a2e36fa5e18aa2388ced2c97a8b07dc8cd5b81785cd6ed1b85269bca
-  data.tar.gz: 3f54dfcf6def53543c8247634ed0b40e6a39807d6e09c59690c50f0f8a0f175d
+  metadata.gz: f9eb2fb9c83d7406f76b1fb6efad8ff47e319ea787f7f4c047c8d7a3abc88533
+  data.tar.gz: b12e1c27f2a855ac0f9cf192bf0431cbc6e03c4c189ce85967f0022993a08603
 SHA512:
-  metadata.gz: f213eb79ea2eab3f01af6be18544c1d59d02905b50d6ff773f54f89e14e0982be43ff948c1eab32819317278a6915070cf1c8259923bb17b195d86d4932f27c5
-  data.tar.gz: 616c37c62765074f87d79c14313499e9bcec19e8722751f74ce39793693ca3058b60f55ac5e80edb406b9301022d79d55c3bb33f9601281576d3f15eb868109b
+  metadata.gz: 1525cfecfea005128898f84bb3b8589495f7241320abd75c71f81dabc68766ec6b30f4cb743e453b5006dbb800a0b142d9e0a3aded9901c7c4c598c1ecda0341
+  data.tar.gz: c822ea16974d0b4b9c5d750204dca4a7e5d43df14c9e9891629077b9dd0d19b61b7b82e0b18c205b8065c2b687ac4fa2be4de4323438c0eb46ccef975dfe830e

data/app/assets/lookbook/js/helpers/string.js

@@ -8,4 +8,26 @@ function prefixString(string, prefix = null) {
   return prefix ? `${prefix}-${string}` : string;
 }
 
-export { prefixString, decodeEntities };
+function parseSearchParamValue(value) {
+  const params = {};
+  value.split("|").forEach((pair_str) => {
+    const [key, value] = pair_str.split(":").map((part) => part.trim());
+    params[key] = value;
+  });
+  return params;
+}
+
+function buildSearchParamValue(data) {
+  const pairs = [];
+  for (const [key, value] of Object.entries(data)) {
+    pairs.push(`${key}:${value}`);
+  }
+  return pairs.join("|");
+}
+
+export {
+  prefixString,
+  decodeEntities,
+  parseSearchParamValue,
+  buildSearchParamValue,
+};

data/app/assets/lookbook/js/lookbook.js

@@ -50,7 +50,6 @@ Alpine.data("app", app);
 [components, subComponents, jsComponents].forEach((scripts) => {
   const components = getComponents(scripts);
   Object.keys(components).forEach((name) => {
-    console.log(name);
     Alpine.data(`${name}Component`, components[name]);
   });
 });

data/app/components/lookbook/display_options/editor/component.html.erb

@@ -0,0 +1,13 @@
+<%= render_component_tag class: "px-2" do %>
+  <% if fields.many? %>
+    <%= lookbook_render :button, icon: :settings, tooltip: "Display options" do |button| %>
+      <% button.dropdown do %>
+        <div class="p-3 space-y-3">
+          <%= safe_join(fields) %>
+        </div>
+      <% end %>
+    <% end %>
+  <% else %>
+    <%= safe_join(fields) %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,7 @@
+module Lookbook
+  module DisplayOptions
+    class Editor::Component < Lookbook::BaseComponent
+      renders_many :fields, Lookbook::DisplayOptions::Field::Component
+    end
+  end
+end

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

@@ -0,0 +1,33 @@
+@layer components {
+  [data-component="display-options-field"] {
+    [type="text"],
+    [type="email"],
+    [type="url"],
+    [type="password"],
+    [type="number"],
+    [type="date"],
+    [type="datetime-local"],
+    [type="month"],
+    [type="search"],
+    [type="tel"],
+    [type="time"],
+    [type="week"],
+    textarea,
+    select {
+      padding: 0.26rem 0.6rem;
+      font-size: 0.8rem;
+      line-height: 1.1rem;
+    }
+
+    label {
+      @apply text-[0.82rem] text-lookbook-input-text cursor-pointer;
+    }
+
+    select {
+      border-radius: 0.375rem;
+      padding-right: 1.5rem;
+      background-size: 1.2em 1.2em;
+      background-position: right 0.4rem center;
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+<%= render_component_tag do %>
+  <div class="flex items-center space-x-1.5">
+    <label for="<%= name %>">
+      <%= name.to_s.titleize %>:
+    </label>
+    <%= select_tag(name, options_for_select(choices, value), "x-model": "value") %>
+  </div>
+<% end %>

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

@@ -0,0 +1,30 @@
+import Cookies from "js-cookie";
+import {
+  parseSearchParamValue,
+  buildSearchParamValue,
+} from "~/app/assets/lookbook/js/helpers/string";
+
+export default function displayOptionsFieldComponent({ name, value }) {
+  return {
+    name,
+    value,
+
+    init() {
+      this.$watch("value", () => this.update());
+    },
+
+    update() {
+      Cookies.set(`lookbook-display-${name}`, this.value);
+
+      const searchParams = new URLSearchParams(window.location.search);
+      const display = searchParams.get("_display");
+
+      const displayParams = display ? parseSearchParamValue(display) : {};
+      displayParams[this.name] = this.value;
+      searchParams.set("_display", buildSearchParamValue(displayParams));
+
+      const path = location.href.replace(location.search, "");
+      this.navigateTo(`${path}?${searchParams.toString()}`);
+    },
+  };
+}

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

@@ -0,0 +1,28 @@
+module Lookbook
+  module DisplayOptions
+    class Field::Component < Lookbook::BaseComponent
+      attr_reader :name, :value
+
+      def initialize(name:, opts:, value:, **html_attrs)
+        @name = name
+        @opts = opts
+        @value = value
+        super(**html_attrs)
+      end
+
+      def choices
+        @opts.is_a?(Hash) ? @opts[:choices].to_a : @opts
+      end
+
+      protected
+
+      def alpine_data
+        "{name: '#{name}', value: '#{value}'}"
+      end
+
+      def alpine_component
+        "displayOptionsFieldComponent"
+      end
+    end
+  end
+end

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

@@ -1,4 +1,4 @@
-<%= render_component_tag :div, class: "h-full" do %>
+<%= render_component_tag :div, id: id, class: "h-full", "data-panel": @name do %>
   <%= panel_html %>
 <% end %>
 

data/app/components/lookbook/inspector_panel/component.rb

@@ -2,22 +2,21 @@ require "css_parser"
 
 module Lookbook
   class InspectorPanel::Component < Lookbook::BaseComponent
-    attr_reader :panel_styles, :panel_html, :id
+    attr_reader :panel_styles, :panel_html
 
-    def initialize(id:, name:, **attrs)
-      @id = id
+    def initialize(name:, **attrs)
       @name = name
-      @system = attrs[:system] || false
-      super(**attrs.except(:system))
+      super(**attrs)
+    end
+
+    def id
+      AttributeUtils.dom_id("panel", @name)
     end
 
     def before_render
-      if @system == false
-        tpl = TemplateParser.new(content)
-        @panel_styles = tpl.styles.map { |s| "##{id} #{s}" }.join("\n")
-        @panel_html = tpl.content
-      end
-      @panel_html ||= content
+      tpl = TemplateParser.new(content)
+      @panel_styles = tpl.styles.map { |s| "##{id} #{s}" }.join("\n")
+      @panel_html = tpl.content
     end
   end
 end

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

@@ -5,11 +5,14 @@ module Lookbook
         @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)
+        Lookbook::Params::Field::Component.new(input: input,
+          description: description,
+          index: @field_count,
+          config: input_config, **attrs)
       end
 
-      def initialize(inputs: {}, **html_attrs)
-        @inputs = inputs
+      def initialize(inputs: nil, **html_attrs)
+        @inputs = inputs.to_h
         @field_count = -1
         @descriptions = false
         @@input_styles = {}

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

@@ -59,7 +59,7 @@ module Lookbook
       end
 
       def input_options
-        config_options = @config.fetch(:input_options, {})
+        config_options = @config.fetch(:opts, {})
         opts = config_options.merge(@input_options).symbolize_keys
         opts[:id] = "param-#{@name}"
         opts
@@ -79,7 +79,6 @@ module Lookbook
 
       def render_input
         target = @config[:partial]
-
         if target
           render(target, **render_props)
         else
@@ -88,9 +87,6 @@ module Lookbook
       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

data/app/components/lookbook/tab_panels/panel/component.html.erb

@@ -1,6 +1,6 @@
 <%= render_component_tag :section,
-  id: @id,
   "x-ref": @name,
+  "data-tab-panel": @name,
   cloak: true,
   class: "h-full",
   ":class": "{ hidden: !isActive($el) }" do %>

data/app/components/lookbook/tab_panels/panel/component.rb

@@ -1,8 +1,7 @@
 module Lookbook
   class TabPanels::Panel::Component < Lookbook::BaseComponent
-    def initialize(name:, id: nil, **html_attrs)
+    def initialize(name:, **html_attrs)
       @name = name
-      @id = (id || "panel-#{name}").to_s
       super(**html_attrs)
     end
   end

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

@@ -1,5 +1,6 @@
 <%= render_component_tag :button,
   "x-ref": @name,
+  "data-tab": @name,
   class: [
     "whitespace-nowrap px-4 border-l-2 cursor-pointer block w-full text-left",
     {

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

@@ -1,6 +1,7 @@
 <%= render_component_tag :button,
   id: @id,
   "x-ref": @name,
+  "data-tab": @name,
   class: [
     "whitespace-nowrap cursor-pointer pt-2.5 pb-1.5 border-b-2",
     {

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

@@ -25,7 +25,7 @@
     <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? %>">
-      <iframe seamless
+      <iframe seamless<%= " id=#{@iframe_id}" if @iframe_id.present? %>
         x-ref="iframe"
         class="h-full w-full border border-lookbook-divider"
         :class="{ 'pointer-events-none': reflowing }"

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

@@ -1,10 +1,11 @@
 module Lookbook
   class Viewport::Component < Lookbook::BaseComponent
-    def initialize(src:, resize_height: true, resize_width: true, max_height: nil, **html_attrs)
+    def initialize(src:, resize_height: true, resize_width: true, max_height: nil, iframe_id: nil, **html_attrs)
       @src = src
       @resize_height = resize_height
       @resize_width = resize_width
       @max_height = max_height
+      @iframe_id = iframe_id
       super(**html_attrs)
     end
 

data/app/controllers/lookbook/previews_controller.rb

@@ -10,6 +10,7 @@ module Lookbook
 
     before_action :lookup_entities, only: [:preview, :show]
     before_action :set_title
+    before_action :set_display_options
     before_action :set_params
 
     def preview
@@ -92,6 +93,38 @@ module Lookbook
       @title = @target.present? ? [@target&.label, @preview&.label].compact.join(" :: ") : "Not found"
     end
 
+    def set_display_options
+      @dynamic_display_options = []
+      @static_display_options = []
+
+      if @target.present?
+        opts = @target.display_options
+        @dynamic_display_options = opts.select { _2.is_a?(Array) || _2.is_a?(Hash) }
+        @static_display_options = opts.except(*@dynamic_display_options.keys)
+
+        if params[:_display]
+          display_params = SearchParamParser.call(params[:_display])
+          display_params.each do |name, value|
+            if @dynamic_display_options.key?(name)
+              cookies["lookbook-display-#{name}"] = value
+            end
+          end
+        end
+
+        @dynamic_display_options.each do |name, opts|
+          choices = opts.is_a?(Hash) ? opts[:choices].to_a : opts
+          @static_display_options[name] ||= cookies.fetch("lookbook-display-#{name}", choices.first)
+        end
+
+        unless params[:_display]
+          display_params = @dynamic_display_options.map do |name, opts|
+            [name, @static_display_options[name]]
+          end.to_h
+          request.query_parameters[:_display] = SearchParamBuilder.call(display_params)
+        end
+      end
+    end
+
     def set_params
       if @target
         # cast known params to type
@@ -103,7 +136,7 @@ module Lookbook
         # set display and data params
         preview_controller.params.merge!({
           lookbook: {
-            display: @target.display_params,
+            display: @static_display_options,
             data: Lookbook.data
           }
         })
@@ -156,38 +189,16 @@ module Lookbook
       })
     end
 
-    def panels
-      return @panels if @panels.present?
-      inspector_data_hash = inspector_data.to_h
-      panel_counts = {}
-
-      @panels = Lookbook.config.inspector_panels.map do |name, config|
-        config_with_defaults = Lookbook.config.inspector_panel_defaults.merge(config)
-        panel_counts[config_with_defaults[:pane].to_sym] ||= 0
-        panel_counts[config_with_defaults[:pane].to_sym] += 1
-
-        callable_data = {
-          name: name.to_s,
-          index_position: panel_counts[config_with_defaults[:pane].to_sym],
-          **inspector_data_hash
-        }
-
-        resolved_config = config_with_defaults.transform_values do |value|
-          value.instance_of?(Proc) ? value.call(Lookbook::Store.new(callable_data)) : value
-        end
-        resolved_config[:name] = name.to_s
-        Store.new(resolved_config)
-      end
-
-      @panels = @panels.select(&:show).sort_by { |p| [p.position, p.label] }
-    end
-
     def main_panels
-      panels.select { |panel| panel.pane == :main }
+      Engine.panels.in_group(:main).map do |config|
+        PanelStore.resolve_config(config, inspector_data)
+      end
     end
 
     def drawer_panels
-      panels.select { |panel| panel.pane == :drawer }
+      Engine.panels.in_group(:drawer).map do |config|
+        PanelStore.resolve_config(config, inspector_data)
+      end
     end
 
     def preview_controller

data/app/helpers/lookbook/preview_helper.rb

@@ -5,7 +5,7 @@ module Lookbook
     end
 
     def lookbook_data(key, fallback = nil)
-      Lookbook.data.get(key, fallback)
+      Lookbook.data.fetch(key.to_sym, fallback)
     end
   end
 end

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

@@ -1,7 +1,7 @@
 <% if examples.many? %>
   <%# Render a group of examples %>
   <% examples.each do |example| %>
-    <div style="all: unset; margin-bottom: 30px; display: block;">
+    <div style="margin-bottom: 30px !important; display: block !important;">
       <h6 style="all: unset; display: block; color: #999; font-family: sans-serif; font-size: 14px; margin-top: 0; margin-bottom: 10px;">
         <%= example.label %>
       </h6>

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

@@ -6,7 +6,7 @@
   </div>
 <% else %>
   <div class="h-full overflow-x-hidden">
-    <%= lookbook_render "params/editor", inputs: Lookbook::Params.inputs do |editor| %>
+    <%= lookbook_render "params/editor", inputs: Lookbook::Engine.inputs do |editor| %>
       <% preview.params.each do |param| %>
         <% editor.field **param, value: params[param[:name]] %>
       <% end %>

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

@@ -1,6 +1,9 @@
-<%= lookbook_render :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)"
-  %>
+<div class="overflow-hidden h-full w-full">
+  <%= lookbook_render :viewport,
+    iframe_id: "preview-iframe",
+    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)"
+    %>
+</div>

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

@@ -5,9 +5,9 @@
   <%= layout.pane class: "flex flex-col h-full overflow-hidden",
     "x-effect": "forceOrientation = (layoutWidth < $store.inspector.minVerticalSplitWidth) ? 'horizontal' : null" do %>
   
-    <%= lookbook_render :toolbar do |toolbar| %>
+    <%= lookbook_render :toolbar, id: "main-toolbar" do |toolbar| %>
       <% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
-        <%= lookbook_render :tabs, alpine_data: "$store.inspector.main" do |tabs| %>
+        <%= lookbook_render :tabs, alpine_data: "$store.inspector.main", id: "inspector-tabs-main" do |tabs| %>
           <%= @main_panels.each do |panel| %>
             <% tabs.tab name: panel.name,
               label: panel.label,
@@ -17,8 +17,24 @@
         <% end %>
       <% end %>
 
-      <% toolbar.section divide: :left, align: :right, class: "flex-none relative z-10" do %>
+      <% toolbar.section align: :right, class: "flex-none" do %>
+        <% if @dynamic_display_options.any? %>
+          <%= lookbook_render "display_options/editor" do |editor| %>
+            <% @dynamic_display_options.each do |key, opts| %>
+              <% editor.field name: key, opts: opts, value: @static_display_options[key] %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <% toolbar.section divide: :left, class: "flex-none relative z-10" do %>
         <%= lookbook_render :button_group do |group| %>
+          <% group.button icon: :link,
+            tooltip: "Copy preview URL",
+            copy: true do %>
+            <%= lookbook_inspect_url(@target.lookup_path, request.query_parameters) %>
+          <% end %>
+
           <% if @pages.any? %>
             <% group.button icon: :code,
               tooltip: "Copy page embed code",
@@ -47,10 +63,12 @@
     <% end %>
 
     <div class="h-full relative overflow-auto">
-      <%= lookbook_render :tab_panels, alpine_data: "$store.inspector.main" do |tabs| %>
+      <%= lookbook_render :tab_panels, alpine_data: "$store.inspector.main", id: "inspector-panels-main" do |tabs| %>
         <% @main_panels.each do |panel| %>
-          <% tabs.panel id: panel.id, name: panel.name, class: panel.panel_classes do %>
-            <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
+          <% tabs.panel name: panel.name do %>
+            <%= lookbook_render :inspector_panel, name: panel.name do %>
+              <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
+            <% end %>
           <% end %>
         <% end %>
       <% end %>
@@ -60,9 +78,9 @@
   <%= layout.pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer-bg",
     "x-show": "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>
 
-    <%= lookbook_render :toolbar do |toolbar| %>
+    <%= lookbook_render :toolbar, id: "drawer-toolbar" do |toolbar| %>
       <% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
-        <%= lookbook_render :tabs, alpine_data: "$store.inspector.drawer" do |tabs| %>
+        <%= lookbook_render :tabs, alpine_data: "$store.inspector.drawer", id: "inspector-tabs-drawer" do |tabs| %>
           <%= @drawer_panels.each do |panel| %>
             <% tabs.tab name: panel.name,
               label: panel.label,
@@ -115,10 +133,10 @@
     <% end %> 
 
     <div class="h-full overflow-auto">
-      <%= lookbook_render :tab_panels, alpine_data: "$store.inspector.drawer" do |tabs| %>
+      <%= lookbook_render :tab_panels, alpine_data: "$store.inspector.drawer", id: "inspector-panels-drawer" do |tabs| %>
         <% @drawer_panels.each do |panel| %>
-          <% tabs.panel id: panel.id, name: panel.name, class: panel.panel_classes  do %>
-            <%= lookbook_render :inspector_panel, **panel.slice(:id, :name, :system) do %>
+          <% tabs.panel name: panel.name do %>
+            <%= lookbook_render :inspector_panel, name: panel.name do %>
               <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
             <% end %>
           <% end %>

data/config/app.yml

@@ -0,0 +1,36 @@
+shared:
+  project_name: Lookbook
+  log_level: 2
+  log_use_rails_logger: true
+  auto_refresh: true
+  components_path: app/components
+  page_controller: Lookbook::PageController
+  page_route: pages
+  page_paths: [test/components/docs]
+  page_options: {}
+  markdown_options:
+    tables: true
+    fenced_code_blocks: true
+    disable_indented_code_blocks: true
+    strikethrough: true
+    highlight: true
+    with_toc_data: true
+    lax_spacing: true
+  sort_examples: false
+  preview_paths: []
+  preview_display_options: {}
+  preview_disable_action_view_annotations: true
+  preview_params_options_eval: false
+  listen: false
+  listen_paths: []
+  listen_extensions: [rb, html.*]
+  listen_use_polling: false
+  ui_theme: indigo
+  ui_theme_overrides: {}
+  ui_favicon: true
+  debug_menu: false
+  experimental_features: false
+
+development:
+  listen: true
+  debug_menu: true

data/config/hooks.yml

@@ -0,0 +1,4 @@
+shared:
+  after_initialize: []
+  before_exit: []
+  after_change: []

data/config/inputs.yml

@@ -0,0 +1,48 @@
+shared:
+  select:
+    partial: lookbook/previews/inputs/select
+    opts: {}
+
+  textarea:
+    partial: lookbook/previews/inputs/textarea
+    opts: {}
+
+  toggle:
+    partial: lookbook/previews/inputs/toggle
+    opts: {}
+
+  color:
+    partial: lookbook/previews/inputs/color
+    opts: {}
+
+  range:
+    partial: lookbook/previews/inputs/range
+    opts: {}
+
+  text:
+    partial: lookbook/previews/inputs/text
+    opts: {}
+
+  email:
+    partial: lookbook/previews/inputs/text
+    opts: {}
+
+  number:
+    partial: lookbook/previews/inputs/text
+    opts: {}
+
+  tel:
+    partial: lookbook/previews/inputs/text
+    opts: {}
+
+  url:
+    partial: lookbook/previews/inputs/text
+    opts: {}
+
+  date:
+    partial: lookbook/previews/inputs/text
+    opts: {}
+
+  datetime_local:
+    partial: lookbook/previews/inputs/text
+    opts: {}