lookbook 1.0.0.beta.5 → 1.0.0.beta.6

data/app/assets/lookbook/css/tooltip.css

@@ -4,23 +4,23 @@
 .tippy-box[data-theme~="tooltip"] {
   @apply text-xs opacity-90;
 
-  background-color: var(--lookbook-tooltip);
+  background-color: var(--lookbook-tooltip-bg);
   color: var(--lookbook-tooltip-text);
 
   &[data-placement^="top"] > .tippy-arrow::before {
-    border-top-color: var(--lookbook-tooltip);
+    border-top-color: var(--lookbook-tooltip-bg);
   }
 
   &[data-placement^="bottom"] > .tippy-arrow::before {
-    border-bottom-color: var(--lookbook-tooltip);
+    border-bottom-color: var(--lookbook-tooltip-bg);
   }
 
   &[data-placement^="left"] > .tippy-arrow::before {
-    border-left-color: var(--lookbook-tooltip);
+    border-left-color: var(--lookbook-tooltip-bg);
   }
 
   &[data-placement^="right"] > .tippy-arrow::before {
-    border-right-color: var(--lookbook-tooltip);
+    border-right-color: var(--lookbook-tooltip-bg);
   }
 }
 

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

@@ -1,9 +1,9 @@
 <%= render_component_tag tag_name,
   href: @href,
   class: [
-    "block text-lookbook-button-text focus:outline-none focus-visible:outline-none #{padding}",
+    "block text-lookbook-icon-button-stroke focus:outline-none focus-visible:outline-none #{padding}",
     {
-      "hover:text-lookbook-button-text-hover": !@disabled,
+      "hover:text-lookbook-icon-button-stroke-hover": !@disabled,
       "cursor-[not-allowed] opacity-50": @disabled
     }
   ],

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

@@ -7,13 +7,13 @@
         <%= @example.preview.label %> (<%= @example.label %>)
       </h3>
     <% end %>
-      <% toolbar.section align: :right, divide: :left do %>
-        <%= render_component :button_group do |group| %>
+    <% toolbar.section align: :right, divide: :left do %>
+      <%= render_component :button_group do |group| %>
         <% group.button icon: :eye,
-          href: helpers.lookbook_inspect_path(@example.path, @params),
+          href: lookbook_inspect_path(@example.path, @params),
           tooltip: "View in Inspector" %>
         <% group.button icon: :external_link,
-          href: helpers.lookbook_inspect_path(@example.path, @params),
+          href: lookbook_inspect_path(@example.path, @params),
           tooltip: "Open in new window",
           target: "_blank" %>
       <% end %>
@@ -28,7 +28,7 @@
     @viewport:resize-complete="resizeIframe"
     @tabs:change.window="resizeIframe"> 
     <%= render_component :viewport,
-      src: helpers.lookbook_preview_path(@example.path, @params.merge(lookbook_embed: true)),
+      src: lookbook_preview_path(@example.path, @params.merge(lookbook_embed: true)),
       alpine_data: "store",
       resize_height: false,
       max_height: @max_height,

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

@@ -11,6 +11,14 @@ module Lookbook
 
     protected
 
+    def lookbook_inspect_path(*args)
+      Lookbook::Engine.routes.url_helpers.lookbook_inspect_path(*args)
+    end
+
+    def lookbook_preview_path(*args)
+      Lookbook::Engine.routes.url_helpers.lookbook_preview_path(*args)
+    end
+
     def alpine_data
       [@id.to_json, "$store.pages.embeds"].join(",")
     end

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

@@ -10,7 +10,7 @@
     @keydown.esc.stop="clear"
     @keydown.f.stop.prevent.window="focus"
     @keydown.stop>
-    <button class="text-lookbook-button-text hover:text-lookbook-button-text-hover focus:ring-0 focus:outline-none absolute top-1/2 right-3 -translate-y-1/2" @click="clear" :class="{hidden: !active}">
+    <button class="text-lookbook-icon-button-stroke hover:text-lookbook-icon-button-stroke-hover focus:ring-0 focus:outline-none absolute top-1/2 right-3 -translate-y-1/2" @click="clear" :class="{hidden: !active}">
       <%= icon  :x, size: 3 %>
     </button>
 </div>

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

@@ -1,5 +1,5 @@
 <%= render_component_tag :header do %>
-  <%= render_component :toolbar, class: "!bg-lookbook-header !text-lookbook-header-text !border-lookbook-header-border" do |toolbar| %>
+  <%= render_component :toolbar, class: "!bg-lookbook-header-bg !text-lookbook-header-text !border-lookbook-header-border" do |toolbar| %>
     <% toolbar.section padded: true do %>
       <% if branding.present? %>
         <a

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

@@ -0,0 +1,4 @@
+<% if panel_styles %>
+  <% content_for :panel_css do %><%= panel_styles %><% end %>
+<% end %>
+<%= panel_html %>

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

@@ -0,0 +1,36 @@
+require "css_parser"
+
+module Lookbook
+  class InspectorPanel::Component < Lookbook::BaseComponent
+    attr_reader :panel_styles, :panel_html, :id
+
+    def initialize(id:, name:, system: false, **html_attrs)
+      @id = id
+      @name = name
+      @system = system
+      @panel_html = nil
+      @panel_styles = nil
+      super(**html_attrs)
+    end
+
+    def before_render
+      if @system == false
+        panel_dom = ::Nokogiri::HTML::fragment(content)
+        style_tags = panel_dom.css('style')
+        if style_tags.any?
+          css_parser = ::CssParser::Parser.new
+          @panel_styles = ""
+          style_tags.each do |style_tag|
+            css_parser.load_string! style_tag.text
+            css_parser.each_selector do |selector, declarations, specificity|
+              @panel_styles += "##{id} #{selector} { #{declarations} }\n"
+            end
+            style_tag.unlink
+          end
+          @panel_html = panel_dom.to_html.html_safe 
+        end
+      end
+      @panel_html ||= content
+    end
+  end
+end

data/app/components/lookbook/nav/item/component.html.erb

@@ -16,7 +16,7 @@
         size: 3,
         class: "mr-1 text-lookbook-nav-toggle absolute -left-4",
         "x-effect": "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
-      <%= icon nav_icon, size: 3.5, class: "mr-1.5 text-lookbook-nav-icon" %>
+      <%= icon nav_icon, size: 3.5, class: "mr-1.5 text-lookbook-nav-icon-stroke" %>
       <span><%= label %></span>
     </div>
   <% end %>

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

@@ -1,3 +1,3 @@
-<%= render_component_tag class: "prose #{size_class} text-lookbook-prose-text bg-lookbook-prose prose-a:text-lookbook-prose-link" do %>
+<%= render_component_tag class: "prose #{size_class} text-lookbook-prose-text bg-lookbook-prose-bg prose-a:text-lookbook-prose-link" do %>
   <%== rendered_content %>
 <% end %>

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

@@ -8,7 +8,7 @@
     }
   ],
   ":class": "{
-    'border-lookbook-tabs-highlight': isSelected($el),
+    'border-lookbook-tabs-border-active': isSelected($el),
     'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el),
     'hidden': visibleTabsCount >= #{@position}
   }",

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

@@ -9,7 +9,7 @@
     }
   ],
   ":class": "{
-    'border-lookbook-tabs-highlight': isSelected($el),
+    'border-lookbook-tabs-border-active': isSelected($el),
     'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el),
     '!text-lookbook-tabs-text-disabled': isDisabled($el),
     'invisible pointer-events-none relative z-[-1]': visibleTabsCount < #{@position}

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

@@ -1,4 +1,4 @@
-<%= render_component_tag class: "h-10 border-b border-lookbook-divider w-full flex items-center text-sm flex-none bg-lookbook-toolbar" do %>
+<%= render_component_tag class: "h-10 border-b border-lookbook-divider w-full flex items-center text-sm flex-none bg-lookbook-toolbar-bg" do %>
   <div class="toolbar-sections flex items-stretch w-full">
     <%= safe_join(sections) %>
   </div>

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

@@ -5,7 +5,7 @@
 
     .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 text-lookbook-viewport-handle-icon hover:text-lookbook-viewport-handle-icon-hover transition select-none touch-none;
+      @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

@@ -34,7 +34,7 @@
         <% end %>
         <% if @resize_height %>
           <div
-            class="resize-handle border-b border-l border-lookbook-divider cursor-[col-resize] <%= "border-r" unless @resize_width %>"
+            class="resize-handle border-b border-l border-lookbook-divider cursor-[row-resize] <%= "border-r" unless @resize_width %>"
             @pointerdown="onResizeHeightStart"
             @dblclick="toggleFullHeight">
             <svg class="h-4 w-4 pointer-events-none rotate-90" fill="currentColor" viewBox="0 0 24 24" >

data/app/controllers/lookbook/pages_controller.rb

@@ -2,6 +2,7 @@ module Lookbook
   class PagesController < ApplicationController
     layout "lookbook/page"
     helper_method :page_controller
+    helper Lookbook::PageHelper
 
     def self.controller_path
       "lookbook/pages"

data/app/controllers/lookbook/previews_controller.rb

@@ -47,6 +47,16 @@ module Lookbook
       redirect_to lookbook_inspect_path params[:path]
     end
 
+    # Namespaced preview helpers
+
+    def lookbook_display(key, fallback = nil)
+      params.dig(:lookbook, :display, key.to_sym) || fallback
+    end
+
+    def lookbook_data(key, fallback = nil)
+      Lookbook.data.get(key, fallback)
+    end
+
     private
 
     def lookup_entities
@@ -98,10 +108,11 @@ module Lookbook
             preview_controller.params[param[:name]] = Lookbook::Params.cast(preview_controller.params[param[:name]], param[:type])
           end
         end
-        # set display params
+        # set display and data params
         preview_controller.params.merge!({
           lookbook: {
-            display: @example.display_params
+            display: @example.display_params,
+            data: Lookbook.data
           }
         })
       end
@@ -145,7 +156,8 @@ module Lookbook
         context: context_data,
         preview: preview,
         examples: examples,
-        components: preview.components,
+        example: example,
+        data: Lookbook.data,
         app: Lookbook
       })
     end

data/app/helpers/lookbook/application_helper.rb

@@ -20,11 +20,5 @@ module Lookbook
     def generate_id(*args)
       args.map { |args| args.delete_prefix("/").tr("&?=/_\-", "-") }.join("-")
     end
-
-    def append_styles(&block)
-      content_for :styles do
-        capture(&block)
-      end
-    end
   end
 end

data/app/helpers/lookbook/preview_helper.rb

@@ -1,7 +1,6 @@
 module Lookbook
   module PreviewHelper
-    def lookbook_display(key, fallback = nil)
-      params.dig(:lookbook, :display, key.to_sym) || fallback
-    end
+    # Left intentionally empty.
+    # Included for backwards compatability.
   end
 end

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

@@ -4,7 +4,7 @@
       alpine_data: "$store.layout.main",
       ":class": "$store.layout.mobile && '!block'" do |layout| %>
 
-      <% layout.pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar relative translate-x-0",
+      <% layout.pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar-bg relative translate-x-0",
         ":class": "{
           'transition': $store.layout.mobile,
           'translate-x-full': $store.layout.mobile && sidebarHidden,

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

@@ -4,11 +4,11 @@
     x-data="{}"
     @navigation:complete.window="$refs.scroller.scrollTop = 0">
   
-    <div class="h-full bg-lookbook-page relative">
+    <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 opacity-90 absolute inset-0 w-full h-full z-0"></div>
+          <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">
           
           <% if @previous_page %>

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

@@ -7,6 +7,12 @@
     @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 -%>
+      </style>
+    <% end %>
+
     <%= render_component :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

@@ -13,12 +13,6 @@
     </style>
   <% end %>
 
-  <% if content_for? :styles %>
-    <style media="all">
-      <%= content_for :styles %>
-    </style>
-  <% end %>
-
   <% if config.ui_favicon != false %>
     <link rel="icon" href="<%= config.ui_favicon || "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>" %>">
   <% end %>

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

@@ -1,4 +1,4 @@
-<div class="p-4 bg-lookbook-prose h-full">
+<div class="p-4 bg-lookbook-prose-bg h-full">
   <% if panel.content.present? %>
     <%= render_component :prose, markdown: true do %>
       <%== panel.content %>

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

@@ -1,6 +1,6 @@
 <% items = examples.select { |example| example.notes.present? } %>
 <% if items.many? %>
-  <div class="divide-y divide-dashed divide-lookbook-divider bg-lookbook-prose h-full w-full">
+  <div class="divide-y divide-dashed divide-lookbook-divider bg-lookbook-prose-bg h-full w-full">
     <% items.each do |item| %>
       <div class="px-4 py-6 relative">
         <h6 class="italic font-mono mb-4 opacity-40">
@@ -11,7 +11,7 @@
     <% end %>
   </div>
 <% else %>
-  <div class="p-4 bg-lookbook-prose w-full h-full">
+  <div class="p-4 bg-lookbook-prose-bg w-full h-full">
     <%= render_component :prose do %>
       <%== items.any? ? items.first.notes : "<em class='opacity-50'>No notes provided.</em>" %>
     <% end %>

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

@@ -1,5 +1,5 @@
 <% if preview.params.none? %>
-  <div class="p-4 w-full h-full bg-lookbook-prose">
+  <div class="p-4 w-full h-full bg-lookbook-prose-bg">
     <%= render_component :prose do %>
       <em class='opacity-50'>No params configured.</em>
     <% end %>

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

@@ -38,7 +38,7 @@
             "@click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
 
           <% group.button icon: :external_link,
-            href: lookbook_preview_path(@example.lookup_path),
+            href: lookbook_preview_path(@example.lookup_path, request.query_parameters),
             tooltip: "Open preview in new window",
             target: "_blank" %>
 
@@ -63,7 +63,7 @@
     </div>
   <% end %>
 
-  <%= layout.pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer",
+  <%= layout.pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer-bg",
     "x-show": "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>
 
     <%= render_component :toolbar do |toolbar| %>
@@ -124,7 +124,9 @@
       <%= render_component :tab_panels, alpine_data: "$store.inspector.drawer" do |tabs| %>
         <% @drawer_panels.each do |panel| %>
           <% tabs.panel id: panel.id, name: panel.name, class: [panel.panel_classes, { "p-4": panel.padded, "prose": panel.prose }]  do %>
-            <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
+            <%= render_component :inspector_panel, **panel.slice(:id, :name, :system) do %>
+              <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
+            <% end %>
           <% end %>
         <% end %>
       <% end %>

data/lib/lookbook/config.rb

@@ -22,9 +22,8 @@ module Lookbook
 
         preview_paths: [],
         preview_display_params: {},
-        preview_options: {},
-        preview_srcdoc: false,
-        sort_examples: true,
+        preview_srcdoc: nil,
+        sort_examples: false,
 
         listen: Rails.env.development?,
         listen_paths: [],
@@ -57,7 +56,8 @@ module Lookbook
             partial: "lookbook/previews/panels/preview",
             hotkey: "v",
             panel_classes: "overflow-hidden",
-            padded: false
+            padded: false,
+            system: true
           },
           output: {
             pane: :main,
@@ -65,7 +65,8 @@ module Lookbook
             partial: "lookbook/previews/panels/output",
             label: "HTML",
             hotkey: "h",
-            padded: false
+            padded: false,
+            system: true
           },
           source: {
             pane: :drawer,
@@ -74,7 +75,8 @@ module Lookbook
             label: "Source",
             hotkey: "s",
             copy: ->(data) { data.examples.map { |e| e.source }.join("\n") },
-            padded: false
+            padded: false,
+            system: true
           },
           notes: {
             pane: :drawer,
@@ -83,7 +85,8 @@ module Lookbook
             label: "Notes",
             hotkey: "n",
             disabled: ->(data) { data.examples.select { |e| e.notes.present? }.none? },
-            padded: false
+            padded: false,
+            system: true
           },
           params: {
             pane: :drawer,
@@ -92,25 +95,10 @@ module Lookbook
             label: "Params",
             hotkey: "p",
             disabled: ->(data) { data.preview.params.none? },
-            padded: false
+            padded: false,
+            system: true
           }
         },
-
-        inspector_panel_defaults: {
-          id: ->(data) { "inspector-panel-#{data.name}" },
-          partial: "lookbook/previews/panels/content",
-          content: nil,
-          label: ->(data) { data.name.titleize },
-          pane: :drawer,
-          position: ->(data) { data.index_position },
-          hotkey: nil,
-          disabled: false,
-          show: true,
-          copy: nil,
-          panel_classes: nil,
-          locals: {},
-          padded: true
-        },
       })
     end
 
@@ -122,22 +110,33 @@ module Lookbook
       absolute_path(@options.components_path)
     end
 
+    def page_paths=(paths = [])
+      @options.page_paths += paths if paths.is_a? Array
+    end
+
     def page_paths
       normalize_paths(@options.page_paths)
     end
 
+    def preview_paths=(paths = [])
+      @options.preview_paths += paths if paths.is_a? Array
+    end
+
     def preview_paths
       normalize_paths(@options.preview_paths)
     end
 
+    def preview_srcdoc=(enable)
+      Lookbook.logger.warn "The `preview_srcdoc` config option is deprecated and will be removed in v2.0"
+    end
+
     def listen_paths
       normalize_paths(@options.listen_paths)
     end
 
-    def listen_extensions
-      @options.listen_extensions += ["rb", "html.*"]
+    def listen_extensions=(extensions = [])
+      @options.listen_extensions += extensions if extensions.is_a? Array
       @options.listen_extensions.uniq!
-      @options.listen_extensions
     end
 
     def parser_registry_path
@@ -154,16 +153,13 @@ module Lookbook
     end
 
     def define_inspector_panel(name, opts = {})
-      @options.inspector_panels[name] = opts
-      if opts[:position].present?
-        pane = inspector_panels[name].pane.presence || :drawer
-        siblings = inspector_panels.select do |key, panel|
-          panel.pane == pane && key != name.to_sym
-        end
-        siblings.each do |key, panel|
-          if panel.position >= opts[:position]
-            panel.position += 1
-          end
+      pane = opts[:pane].presence || :drawer
+      siblings = inspector_panels.select { |key, panel| panel.pane == pane }
+      opts[:position] ||= siblings.size + 1
+      @options.inspector_panels[name] = opts      
+      siblings.each do |key, panel|
+        if panel.position >= opts[:position]
+          panel.position += 1
         end
       end
     end
@@ -180,6 +176,25 @@ module Lookbook
       amend_inspector_panel(name, false)
     end
 
+    def inspector_panel_defaults
+      {
+        id: ->(data) { "inspector-panel-#{data.name}" },
+        partial: "lookbook/previews/panels/content",
+        content: nil,
+        label: ->(data) { data.name.titleize },
+        pane: :drawer,
+        position: ->(data) { data.index_position },
+        hotkey: nil,
+        disabled: false,
+        show: true,
+        copy: nil,
+        panel_classes: nil,
+        locals: {},
+        padded: true,
+        system: false
+      }
+    end
+
     def ui_theme=(name)
       name = name.to_s
       if Theme.valid_theme?(name)
@@ -225,8 +240,10 @@ module Lookbook
     protected
 
     def normalize_paths(paths)
-      paths.map! { |path| absolute_path(path) }
-      paths.select! { |path| Dir.exist?(path) }
+      paths.map! do |path|
+        full_path = absolute_path(path)
+        full_path if Dir.exist?(full_path)
+      end.compact!
       paths
     end
 

data/lib/lookbook/engine.rb

@@ -48,6 +48,14 @@ module Lookbook
       Page.any?
     end
 
+    def data
+      @data ||= Store.new
+    end
+
+    def data=(props)
+      @data = Store.new(props)
+    end
+
     def after_initialize(&block)
       add_hook(:after_initialize, block)
     end

data/lib/lookbook/params.rb

@@ -63,6 +63,14 @@ module Lookbook
             result = []
           end
           result
+        when "datetime"
+          begin
+            result = DateTime.parse(value)
+          rescue Date::Error
+            Lookbook.logger.debug "Failed to parse '#{value}' into a DateTime"
+            result = DateTime.now
+          end
+          result
         else
           begin
             type_class = "ActiveModel::Type::#{type}".constantize
@@ -92,6 +100,8 @@ module Lookbook
           "Boolean"
         elsif default.is_a? Symbol
           "Symbol"
+        elsif ["date", "datetime-local"].include?(input&.downcase) || default.is_a?(DateTime)
+          "DateTime"
         else
           "String"
         end
@@ -99,6 +109,8 @@ module Lookbook
 
       def input_text?(input)
         [
+          "date",
+          "datetime-local",
           "email",
           "number",
           "tel",

data/lib/lookbook/store.rb

@@ -21,6 +21,14 @@ module Lookbook
       self
     end
 
+    def get(key, fallback = nil)
+      if self.key?(normalize_key(key))
+        self[normalize_key(key)]
+      else
+        fallback
+      end
+    end
+
     def method_missing(name, *args)
       super(normalize_key(name), *args.map { |arg| normalize_value(arg) })
     end

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "1.0.0.beta.5"
+  VERSION = "1.0.0.beta.6"
 end