lookbook 1.0.0.beta.2 → 1.0.0.beta.5

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

@@ -5,44 +5,44 @@
     @navigation:complete.window="$refs.scroller.scrollTop = 0">
   
     <div class="h-full bg-lookbook-page 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="relative z-10 flex items-center">
+      <% unless @error %>
         
-        <% if @previous_page %>
-          <%= render_component :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,
-            size: :lg,
-            icon: :chevron_left,
-            disabled: true,
-            class: "opacity-50 !cursor-default pr-0.5 bg-transparent" %>
-        <% end %>
+        <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="relative z-10 flex items-center">
+          
+          <% if @previous_page %>
+            <%= render_component :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,
+              size: :lg,
+              icon: :chevron_left,
+              disabled: true,
+              class: "opacity-50 !cursor-default pr-0.5 bg-transparent" %>
+          <% end %>
 
-        <% if @next_page %>
-          <%= render_component :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,
-            size: :lg,
-            icon: :chevron_right,
-            disabled: true,
-            class: "opacity-50 !cursor-default pl-0.5 bg-transparent" %>
-        <% end %>
+          <% if @next_page %>
+            <%= render_component :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,
+              size: :lg,
+              icon: :chevron_right,
+              disabled: true,
+              class: "opacity-50 !cursor-default pl-0.5 bg-transparent" %>
+          <% end %>
+          </div>
         </div>
-      </div>
-    <% end %>
+      <% end %>
 
       <%= yield %>
     </div>

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

@@ -7,58 +7,12 @@
     @navigation:start="closeMobileSidebar"
     class="w-screen h-screen grid grid-rows-[40px_1fr] relative">
 
-    <%= render_component :header do |header| %>
+    <%= render_component :header, id: "app-header", debug_menu: config.debug_menu do |header| %>
       <% header.branding { config.project_name } %>
     <% end %>
 
-    <% if false %>
-      <%= render_component :toolbar, class: "group !bg-lookbook-header !text-lookbook-header-text" do |toolbar| %>
-        <% toolbar.section padded: true do %>
-          <%= render_component :branding,
-            text: config.project_name,
-            href: landing_path if config.project_name %>
-        <% end %>
-        <% toolbar.section padded: false, align: :right, class: "flex items-center" do %>
-          <%= render_component :button_group, class: "relative -top-px" do |group| %>
-            <% if Rails.env == "development" %>
-              <% group.button icon: :help_circle, class: "opacity-50 hover:opacity-100 transition !text-lookbook-header-text" do |button| %>
-                <% button.dropdown do %>
-                  <%= tag.div class: "divide-y divide-lookbook-divider" do %>
-                    <div class="flex items-center text-xs px-3 py-2">
-                      <span class="opacity-60 mr-1">Lookbook</span>
-                      <span class="mr-6">v<%= Lookbook::VERSION %></span>
-                      <a href="https://github.com/allmarkedup/lookbook" target="_blank" class="ml-auto opacity-70">
-                        <%= render_component :icon, name: :github, size: 3 %>
-                      </a>
-                    </div>
-                    <div class="px-3 py-2">
-                      <a href="#"
-                        class="text-xs underline"
-                        @click.stop="localStorage.clear(); window.location.reload();">
-                        Clear local storage
-                      </a>
-                    </div>
-                  <% end %>
-                <% end %>
-              <% end %>
-            <% end %>
-            <% group.button icon: :menu,
-              "@click.stop": "toggleSidebar",
-              x_show: "$store.layout.mobile && sidebarHidden",
-              class: "!text-lookbook-header-text" %>
-            <% group.button icon: :x,
-              "@click.stop": "toggleSidebar",
-              x_show: "$store.layout.mobile && !sidebarHidden",
-              "@keydown.esc.window": "closeMobileSidebar",
-              class: "!text-lookbook-header-text" %>
-          <% end %>    
-        <% end %>
-      <% end %>
-    <% end %>
-    
     <%= content_for?(:shell) ? yield(:shell) : yield %>
   </div>
 <% end %>
 
-<%= render template: "layouts/lookbook/skeleton" %>
-0
+<%= render template: "layouts/lookbook/skeleton" %>

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

@@ -8,11 +8,17 @@
   <link href="/lookbook-assets/css/lookbook.css?v=<%= Lookbook::VERSION %>" rel="stylesheet">
   <link href="/lookbook-assets/css/themes/<%= config.ui_theme %>.css?v=<%= Lookbook::VERSION %>" rel="stylesheet">
   <% if @theme_overrides.present? %>
-    <style>
+    <style media="all">
       <%== @theme_overrides %>
     </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/404.html.erb

@@ -1,6 +1,6 @@
 <div class="bg-white flex flex-col items-center justify-center h-screen w-full">
   <div class="px-4 text-center max-w-sm">
-    <%= render_component :icon, name: :alert_triangle, size: 10, class: "text-red-300 mx-auto" %>
+    <%= icon  :alert_triangle, size: 10, class: "text-red-300 mx-auto" %>
     <div class="mt-3">
       <h5 class="text-base">
         <%== message %>

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

@@ -1,14 +1,27 @@
-<div id="welcome-message" class="flex flex-col h-full w-full">
-  <div class="flex flex-col items-center justify-center h-full">
-    <div class="p-4 text-center mx-auto">
-      <%= render_component :icon, name: :layers, size: 10, class: "opacity-30 mx-auto" %>
-      <div class="mt-6 text-base opacity-40">
-        <% if Lookbook.previews.any? %>
-          <h5>Select a preview to get started</h5>
-        <% else %>
-          <p>Create a <a href="https://viewcomponent.org/guide/previews.html" target="_blank">preview file</a> to get started.</p>
-      <% end %>
+<div id="landing" class="flex flex-col items-center justify-center h-full w-full">
+  <div class="p-4 text-center mx-auto">
+    <% if Lookbook.previews? %>
+      <div id="landing-with-content">
+        <h5 class="text-lg opacity-50"><%= config.project_name %></h5>
+        <div class="mt-2 italic opacity-30 max-w-[400px]">
+          <p>
+            Select a preview from the nav to get started.
+          </p>
+        </div>
       </div>
-    </div>
+    <% else %>
+      <div id="landing-no-content">
+        <h5 class="text-lg font-bold opacity-80"><%= config.project_name %></h5>
+        <div class="mt-3 italic opacity-40 max-w-[400px]">
+          <p>
+            Nothing here yet! 
+            <a class="underline" href="https://viewcomponent.org/guide/previews.html" target="_blank">
+              Create a preview
+            </a>
+            to get started.
+          </p>
+        </div>
+      </div>
+    <% end %>
   </div>
 </div>

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

@@ -1,17 +1,17 @@
 <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-3xl mx-auto h-full flex flex-col">
+  <div class="w-full max-w-screen-lg mx-auto h-full flex flex-col">
     <% if @page.header? %>
-      <header class="mb-8 prose max-w-none flex-none">
+      <header id="page-header" class="mb-8 prose max-w-none flex-none">
         <h1><%= @page.title %></h1>
       </header>
     <% end %>
 
-    <%= render_component :prose, markdown: false, class: "max-w-none flex-none" do %>
+    <%= render_component :prose, id: "page-content", markdown: false, class: "max-w-none flex-none" do %>
       <%= @page_content %>
     <% end %>
 
     <% if @page.sections.any? %>
-      <%= render_component :page_tabs, markdown: false, class: "mt-6" do |page_tabs| %>
+      <%= render_component :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) %>
@@ -21,11 +21,11 @@
     <% end %>
 
     <% if @page.footer? && @pages.many? %>
-      <footer class="flex items-center justify-between border-t border-gray-300 mt-12 pt-8 pb-10 ">
+      <footer id="page-footer" class="flex items-center justify-between border-t border-gray-300 mt-12 pt-8 pb-10 ">
         <% if @previous_page %>
           <a href="<%= lookbook_page_path @previous_page.lookup_path %>"
             class="flex items-center flex-none">
-            <%= render_component :icon, name: :arrow_left, size: 4, class: "hover:text-indigo-800" %>
+            <%= icon  :arrow_left, size: 4, class: "hover:text-indigo-800" %>
             <span class="ml-2 underline"><%= @previous_page.title %></span>
           </a>
         <% end %>
@@ -34,7 +34,7 @@
           <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>
-            <%= render_component :icon, name: :arrow_right, size: 4, class: "hover:text-indigo-800" %>
+            <%= icon  :arrow_right, size: 4, class: "hover:text-indigo-800" %>
           </a>
         <% end %>
       </footer>

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

@@ -1,4 +1,4 @@
-<% items = examples.filter { |example| example.notes.present? } %>
+<% 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">
     <% items.each do |item| %>

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

@@ -3,7 +3,7 @@
   ":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 %>
+    "x-effect": "forceOrientation = (layoutWidth < $store.inspector.minVerticalSplitWidth) ? 'horizontal' : null" do %>
   
     <%= render_component :toolbar do |toolbar| %>
       <% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
@@ -46,7 +46,7 @@
             tooltip: "Show drawer",
             "@click": "$store.inspector.drawer.hidden = false",
             class: "rotate-180",
-            x_show: "$store.inspector.drawer.hidden",
+            "x-show": "$store.inspector.drawer.hidden",
             cloak: true %>
         <% end %>
       <% end %>
@@ -55,7 +55,7 @@
     <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 %>
+          <% 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 %>
           <% end %>
         <% end %>
@@ -64,7 +64,7 @@
   <% end %>
 
   <%= layout.pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer",
-    x_show: "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>
+    "x-show": "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>
 
     <%= render_component :toolbar do |toolbar| %>
       <% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
@@ -80,11 +80,11 @@
 
       <% 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| %>
+          <%= @drawer_panels.select { |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}'",
+              "x-show": "$store.inspector.drawer.activeTab === '#{panel.name}'",
               cloak: true do %>
               <%== panel.copy ? panel.copy : "" %>
               <% end %>
@@ -98,18 +98,18 @@
           <% group.button icon: :corner_up_right,
             tooltip: "Move drawer to right",
             "@click": "switchOrientation",
-            x_show: "horizontal && layoutWidth > $store.inspector.minVerticalSplitWidth",
+            "x-show": "horizontal && layoutWidth > $store.inspector.minVerticalSplitWidth",
             cloak: true %>
 
           <% group.button icon: :corner_up_right,
-            x_show: "horizontal && layoutWidth <= $store.inspector.minVerticalSplitWidth",
+            "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",
+            "x-show": "vertical",
             cloak: true %>
 
           <% group.button icon: :x_circle,
@@ -123,7 +123,7 @@
     <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 %>
+          <% 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 %>
           <% end %>
         <% end %>

data/lib/lookbook/collection.rb

@@ -42,7 +42,7 @@ module Lookbook
     end
 
     def non_empty_items
-      items.filter do |item|
+      items.select do |item|
         !item.is_a?(Lookbook::Collection) || item.items.any?
       end
     end

data/lib/lookbook/component.rb

@@ -0,0 +1,31 @@
+module Lookbook
+  class Component < Entity
+
+    attr_accessor :name
+
+    def initialize(name)
+      @name = name
+      super(path)
+    end
+    
+    def path
+      name.underscore
+    end
+
+    def full_path
+      Pathname.new("#{Lookbook.config.components_path}/#{path}.rb")
+    end
+
+    def dir_path
+      full_path.dirname
+    end
+
+    def template_path
+      Dir.glob("#{Lookbook.config.components_path}/#{path}.*.erb").first
+    end
+
+    def inline?
+      template_path.present?
+    end
+  end
+end

data/lib/lookbook/config.rb

@@ -6,11 +6,13 @@ module Lookbook
   class Config
     def initialize
       @options = Store.new
-      foobar = "bax"
+      
       @options.set({
         project_name: "Lookbook",
         log_level: 2,
         auto_refresh: true,
+
+        components_path: "app/components",
         
         page_controller: "Lookbook::PageController",
         page_route: "pages",
@@ -26,6 +28,7 @@ module Lookbook
 
         listen: Rails.env.development?,
         listen_paths: [],
+        listen_extensions: ["rb", "html.*"],
         listen_use_polling: false,
 
         cable_mount_path: "/lookbook-cable",
@@ -37,13 +40,24 @@ module Lookbook
         ui_theme: "indigo",
         ui_theme_overrides: {},
 
+        hooks: {
+          after_initialize: [],
+          before_exit: [],
+          after_change: [],
+        },
+
+        debug_menu: Rails.env.development?,
+
+        experimental_features: false,
+
         inspector_panels: {
           preview: {
             pane: :main,
             position: 1,
             partial: "lookbook/previews/panels/preview",
             hotkey: "v",
-            panel_classes: "overflow-hidden"
+            panel_classes: "overflow-hidden",
+            padded: false
           },
           output: {
             pane: :main,
@@ -51,6 +65,7 @@ module Lookbook
             partial: "lookbook/previews/panels/output",
             label: "HTML",
             hotkey: "h",
+            padded: false
           },
           source: {
             pane: :drawer,
@@ -58,7 +73,8 @@ module Lookbook
             partial: "lookbook/previews/panels/source",
             label: "Source",
             hotkey: "s",
-            copy: ->(data) { data.examples.map { |e| e[:source] }.join("\n") }
+            copy: ->(data) { data.examples.map { |e| e.source }.join("\n") },
+            padded: false
           },
           notes: {
             pane: :drawer,
@@ -66,7 +82,8 @@ module Lookbook
             partial: "lookbook/previews/panels/notes",
             label: "Notes",
             hotkey: "n",
-            disabled: ->(data) { data.examples.filter { |e| e.notes.present? }.none? }
+            disabled: ->(data) { data.examples.select { |e| e.notes.present? }.none? },
+            padded: false
           },
           params: {
             pane: :drawer,
@@ -74,7 +91,8 @@ module Lookbook
             partial: "lookbook/previews/panels/params",
             label: "Params",
             hotkey: "p",
-            disabled: ->(data) { data.preview.params.none? }
+            disabled: ->(data) { data.preview.params.none? },
+            padded: false
           }
         },
 
@@ -90,25 +108,82 @@ module Lookbook
           show: true,
           copy: nil,
           panel_classes: nil,
-          locals: {}
+          locals: {},
+          padded: true
         },
-
-        experimental_features: false,
       })
     end
 
+    def project_name
+      @options.project_name == false ? nil : @options.project_name
+    end
+
+    def components_path
+      absolute_path(@options.components_path)
+    end
+
+    def page_paths
+      normalize_paths(@options.page_paths)
+    end
+
+    def preview_paths
+      normalize_paths(@options.preview_paths)
+    end
+
+    def listen_paths
+      normalize_paths(@options.listen_paths)
+    end
+
+    def listen_extensions
+      @options.listen_extensions += ["rb", "html.*"]
+      @options.listen_extensions.uniq!
+      @options.listen_extensions
+    end
+
+    def parser_registry_path
+      absolute_path(@options.parser_registry_path)
+    end
+
     def inspector_panels(&block)
+      panels = Store.new(@options.inspector_panels.select { |key, panel| panel != false })
       if block_given?
-        yield get(:inspector_panels)
+        yield panels
+      else
+        panels
+      end
+    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
+        end
+      end
+    end
+
+    def amend_inspector_panel(name, opts = {})
+      if opts == false
+        @options.inspector_panels[name] = false
       else
-        get(:inspector_panels)
+        @options.inspector_panels[name].merge!(opts)
       end
     end
 
+    def remove_inspector_panel(name)
+      amend_inspector_panel(name, false)
+    end
+
     def ui_theme=(name)
       name = name.to_s
       if Theme.valid_theme?(name)
-        @options[:ui_theme] = name
+        @options.ui_theme = name
       else
         Lookbook.logger.warn "'#{name}' is not a valid Lookbook theme. Theme setting not changed."
       end
@@ -116,18 +191,27 @@ module Lookbook
 
     def ui_theme_overrides(&block)
       if block_given?
-        yield get(:ui_theme_overrides)
+        yield @options.ui_theme_overrides
       else
-        get(:ui_theme_overrides)
+        @options.ui_theme_overrides
       end
     end
 
     def [](key)
-      get(key.to_sym)
+      if respond_to? key.to_sym
+        public_send(key.to_sym)
+      else
+        @options[key.to_sym]
+      end
     end
 
     def []=(key, value)
-      @options[key.to_sym] = value
+      setter_key = "#{key}=".to_sym
+      if respond_to? setter_key
+        public_send(setter_key, value)
+      else
+        @options[key.to_sym] = value
+      end
     end
 
     def to_h
@@ -140,18 +224,9 @@ module Lookbook
     
     protected
 
-    def get_inspector_panels(panels)
-      panels.filter! { |key, panel| panel }
-      panels
-    end
-
-    def get_project_name(name)
-      name == false ? nil : name
-    end
-
     def normalize_paths(paths)
       paths.map! { |path| absolute_path(path) }
-      paths.filter! { |path| Dir.exist?(path) }
+      paths.select! { |path| Dir.exist?(path) }
       paths
     end
 
@@ -159,22 +234,8 @@ module Lookbook
       File.absolute_path(path.to_s, Rails.root)
     end
 
-    alias_method :get_page_paths, :normalize_paths
-    alias_method :get_preview_paths, :normalize_paths
-    alias_method :get_listen_paths, :normalize_paths
-    alias_method :get_parser_registry_path, :absolute_path
-
-    def get(name)
-      getter_name = "get_#{name}".to_sym
-      respond_to?(getter_name, true) ? send(getter_name, @options[name]) : @options[name]
-    end
-
-    def set(name, *args)
-      @options.send(name, *args)
-    end
-
     def method_missing(name, *args)
-      args.any? ? set(name, *args) : get(name)
+      @options.send(name, *args)
     end
   end
 end