lookbook 0.8.2 → 0.9.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0b2895b167e1e2dc38f33927d4dfab553e0fe58e11b3558330d95eb139011c25
-  data.tar.gz: c7c62607dc8634d4883fde5a4495d5bfcf7c2fb30edbb37ba4ab228bf0735cd2
+  metadata.gz: e7dfafad463df617a30ac6baff60536568771276737340b18f094bb4ad29b90a
+  data.tar.gz: 24221d0a990d8181f7fec06bd2acc24d21599b33778b25591054a1d279317d6c
 SHA512:
-  metadata.gz: 510e98f6284e5d374347612e4c724bb5745b09cf82945443d2f37c6a54dde996298c31598ba2a5188ee325fb7ee550857bf66b1f9ecf260fb0ea4db0963f50b1
-  data.tar.gz: 2d41d201fd170a206b91638cc6eb51d638ade8f8d8c30206ce5e4ecbb0e53023c68379fc93428b161e4b5efeb28ead5b4d6908d9e689b493b58175f0016ab4a9
+  metadata.gz: a84d78ab4e4bd953f0f3b012a6cf8056efe57f37656ed9ba9839ed99c65cf824a510b1286eede9a4b3640cd9ee25575f0c58fd6998752169303fa5a29df10ec8
+  data.tar.gz: 0d516c5a151d34929594abb832827783fa8ceba7a95c2bbea7113a094a1320a5e8b394cab441f551cf6f9d0d4c715a72f00d14a414684e6995362344bc19de08

data/README.md

@@ -13,7 +13,7 @@
 ---
 
 <div align="center">
-<a href="#installing">Installing</a> • <a href="#previews">Previews</a>  • <a href="#pages">Pages</a> • <a href="#deployment">Deployment</a> • <a href="#config">Config</a> 
+<a href="#installing">Installing</a> • <a href="#previews">Previews</a>  • <a href="#pages">Pages</a> • <a href="#deployment">Deployment</a> • <a href="#config">Config</a>
 </div>
 
 ---
@@ -481,10 +481,10 @@ end
 If you need to add more long-form documentation to live alongside your component previews you can do so using Lookbook's markdown-powered `pages` system.
 
 > ⚠️ This feature is currently flagged as an **experimental** feature which requires [feature opt-in](#experimental-features) to use. Its API and implementation may change before it is released.
-> 
+>
 > To enable support for pages in your project, add `config.lookbook.experimental_features = [:pages]` into your application configuration file.
 
-### Pages demo 
+### Pages demo
 
 For an example of some pages in Lookbook, check out the [example pages](https://lookbook-demo-app.herokuapp.com/lookbook) in the Lookbook demo app and the associated [page files](https://github.com/allmarkedup/lookbook-demo/tree/main/test/components/docs) in the demo repo.
 
@@ -496,7 +496,7 @@ Pages must have  either a `.html.erb` or a `.md.erb` file extension. All pages a
 
 Pages can optionally make use of a **YAML frontmatter block** to customise the behaviour and content of the page itself.
 
-An example page might look like this: 
+An example page might look like this:
 
 ```markdown
 ---
@@ -510,7 +510,7 @@ contents will be run through a Markdown parser/renderer before display.
 Fenced code blocks are fully supported and will be highlighted appropriately.
 
 ERB can be used in here.
-The template will be rendered **before** being parsed as Markdown. 
+The template will be rendered **before** being parsed as Markdown.
 
 You can can access data about the page using the `@page` variable.
 The title of this page is "<%= @page.title %>".
@@ -656,6 +656,35 @@ The default language is `ruby`. To highlight a different language you need to sp
 
 > Lookbook uses [Rouge](https://github.com/rouge-ruby/rouge) for syntax highlighting. You can find a [full list of supported languages here](https://github.com/rouge-ruby/rouge/blob/master/docs/Languages.md).
 
+### Tabs
+
+You can break up your page's content into tabs. If your avatar page is named `01_avatar.md.erb`, by declaring a page named `01_avatar[web].md.erb` it will create a **web** tab on the page. Tabs like normal Pages can contain embedded previews and code examples.
+
+```
+test/components/docs/
+  ├── 01_avatar.md.erb
+  ├── 01_avatar[design].md.erb
+  ├── 01_avatar[mobile].md.erb
+  ├── 01_avatar[web].md.erb
+```
+
+By declaring the `label` frontmatter you can change the label shown on the tab:
+
+```
+---
+label: Website
+---
+```
+
+If you want the tabs in a different order, you can use the `position` frontmatter:
+
+```
+---
+label: Web
+position: 1
+---
+```
+
 ---
 
 ### Pages configuration
@@ -743,10 +772,10 @@ If for some reason you wish to enable file watching or runtime preview annotatio
 # config/environments/production.rb
 
 # enable file-change listening
-config.lookbook.listen = true 
+config.lookbook.listen = true
 
 # enable runtime preview parsing
-config.lookbook.runtime_parsing = true 
+config.lookbook.runtime_parsing = true
 ```
 
 <h2 id="config">General Configuration</h2>
@@ -778,7 +807,7 @@ config.lookbook.listen_paths << Rails.root.join('app/other/directory')
 If you want to change the favicon used by the Lookbook UI, you can provide a path to your own (or a data-uri string) using the `ui_favicon` option:
 
 ```ruby
-config.lookbook.ui_favicon = "/path/to/my/favicon.png" 
+config.lookbook.ui_favicon = "/path/to/my/favicon.png"
 ```
 
 > To disable the favicon entirely, set the value to `false`.
@@ -788,7 +817,7 @@ config.lookbook.ui_favicon = "/path/to/my/favicon.png"
 Specify a project name to display in the top left of the UI (instead of the default "Lookbook"):
 
 ```ruby
-config.lookbook.project_name = "My Project" 
+config.lookbook.project_name = "My Project"
 ```
 
 > If you don't want to display a project name at all, set the value to `false`.

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

@@ -58,7 +58,7 @@
 }
 
 @layer components {
-  .unsectioned > #nav > ul > li > div {
+  .unsectioned > nav > ul > li > div {
     @apply py-1 border-b border-gray-300;
   }
 

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

@@ -20,6 +20,7 @@ import copy from "./components/copy";
 import code from "./components/code";
 import sizes from "./components/sizes";
 import embed from "./components/embed";
+import pageTabs from "./components/page-tabs";
 
 import initFilterStore from "./stores/filter";
 import initLayoutStore from "./stores/layout";
@@ -61,6 +62,7 @@ Alpine.data("tabs", tabs);
 Alpine.data("navItem", navItem);
 Alpine.data("navGroup", navGroup);
 Alpine.data("embed", embed);
+Alpine.data("pageTabs", pageTabs);
 
 // Init
 

data/app/assets/lookbook/js/components/page-tabs.js

@@ -0,0 +1,9 @@
+export default function pageTabs() {
+  return {
+    active: "",
+
+    changeTab(tabName) {
+      this.active = tabName;
+    },
+  };
+}

data/app/controllers/lookbook/application_controller.rb

@@ -14,7 +14,7 @@ module Lookbook
       if feature_enabled? :pages
         landing = Lookbook.pages.find(&:landing) || Lookbook.pages.first
         if landing.present?
-          redirect_to page_path(landing.lookup_path)
+          redirect_to lookbook_page_path(landing.lookup_path)
         end
       end
     end

data/app/controllers/lookbook/pages_controller.rb

@@ -1,5 +1,7 @@
 module Lookbook
   class PagesController < ApplicationController
+    helper_method :page_controller
+
     def self.controller_path
       "lookbook/pages"
     end
@@ -7,7 +9,7 @@ module Lookbook
     def index
       landing = Lookbook.pages.find(&:landing) || Lookbook.pages.first
       if landing.present?
-        redirect_to page_path landing.lookup_path
+        redirect_to lookbook_page_path landing.lookup_path
       else
         @title = "Not found"
         render "not_found"

data/app/controllers/lookbook/previews_controller.rb

@@ -28,8 +28,8 @@ module Lookbook
         begin
           set_params
           @examples = examples_data
-          @drawer_panels = drawer_panels.filter { |name, panel| panel[:show] }
-          @preview_panels = preview_panels.filter { |name, panel| panel[:show] }
+          @drawer_panels = drawer_panels.select { |name, panel| panel[:show] }
+          @preview_panels = preview_panels.select { |name, panel| panel[:show] }
         rescue => exception
           render_in_layout "lookbook/error", error: prettify_error(exception)
         end
@@ -45,11 +45,11 @@ module Lookbook
       if @example
         @preview = @example.preview
         if params[:path] == @preview&.lookup_path
-          redirect_to show_path "#{params[:path]}/#{@preview.default_example.name}"
+          redirect_to lookbook_inspect_path "#{params[:path]}/#{@preview.default_example.name}"
         end
       else
         first_example = Lookbook.previews.find(params[:path])&.examples&.first
-        redirect_to show_path(first_example.lookup_path) if first_example
+        redirect_to lookbook_inspect_path(first_example.lookup_path) if first_example
       end
     end
 
@@ -133,7 +133,7 @@ module Lookbook
           template: "lookbook/previews/panels/notes",
           hotkey: "n",
           show: true,
-          disabled: @examples.filter { |e| e[:notes].present? }.none?
+          disabled: @examples.select { |e| e[:notes].present? }.none?
         },
         params: {
           label: "Params",

data/app/helpers/lookbook/application_helper.rb

@@ -11,9 +11,9 @@ module Lookbook
     def landing_path
       landing = feature_enabled?(:pages) ? Lookbook.pages.find(&:landing) || Lookbook.pages.first : nil
       if landing.present?
-        page_path(landing.lookup_path)
+        lookbook_page_path landing.lookup_path
       else
-        home_path
+        lookbook_home_path
       end
     end
   end

data/app/helpers/lookbook/page_helper.rb

@@ -4,7 +4,7 @@ module Lookbook
 
     def page_path(id)
       page = id.is_a?(Page) ? id : Lookbook.pages.find(id)
-      lookbook.page_path page.lookup_path
+      lookbook_page_path page.lookup_path
     end
 
     def embed(*args, params: {}, type: :preview, **opts)

data/app/views/lookbook/components/_embed.html.erb

@@ -1,14 +1,14 @@
-<div id="<%= id %>" x-data="embed" class="not-prose embed border border-gray-300 rounded-md overflow-hidden" @page:morphed.window="recaclulateIframeHeight">
+<div id="<%= id %>" x-data="embed" class="not-prose embed border border-gray-300 rounded-md overflow-hidden" @page:morphed.window="recaclulateIframeHeight" @tab-switch.window="recaclulateIframeHeight">
   <header class="px-3 py-2 flex items-center text-xs text-gray-400 bg-white border-b border-gray-300">
     <div class="text-gray-500">
       <%= example.preview.label %> (<%= example.label %>)
     </div>
     <div class="ml-auto flex items-center space-x-3">
-      <a href="<%= lookbook.show_path(example.path, params) %>" class="" x-tooltip.theme.lookbook="`View in Inspector`">
+      <a href="<%= lookbook_inspect_path(example.path, params) %>" class="" x-tooltip.theme.lookbook="`View in Inspector`">
         <%= icon "eye", size: 4, class: "hover:text-indigo-800" %>
       </a>
       <a
-        href="<%= lookbook.preview_path(example.path, params) %>"
+        href="<%= lookbook_preview_path(example.path, params) %>"
         target="_blank"
         class="-top-px relative"
         x-tooltip.theme.lookbook="`Open in new window`">
@@ -21,7 +21,7 @@
       <iframe seamless
         id="<%= id %>-iframe"
         x-ref="iframe"
-        src="<%= lookbook.preview_path(example.path, params.merge(lookbook_embed: true)) %>"
+        src="<%= lookbook_preview_path(example.path, params.merge(lookbook_embed: true)) %>"
         class="min-w-full h-full w-px"
         :class="{ 'pointer-events-none': reflowing }"
         @load="recaclulateIframeHeight">

data/app/views/lookbook/components/_nav.html.erb

@@ -1,6 +1,6 @@
-<nav id="nav" x-data="nav(<%= filterable %>)">
+<nav id="nav-<%= items.class.describe_as %>" x-data="nav(<%= filterable %>)">
   <% if items.any? %>
-    <ul x-ref="items" id="nav-<%= items.class.describe_as %>">
+    <ul x-ref="items" id="nav-<%= items.class.describe_as %>-items">
       <% items.each do |item| %>
         <%= component "nav_#{item.type}", node: item %>
       <% end %>

data/app/views/lookbook/components/_nav_item.html.erb

@@ -1,5 +1,5 @@
 <%
-path = show_path(item.lookup_path)
+path = lookbook_inspect_path(item.lookup_path)
 display ||= :item
 label ||= item.label
 item_icon = display == :node ? "layers" : "eye"

data/app/views/lookbook/components/_nav_page.html.erb

@@ -1,5 +1,5 @@
 <%
-path = page_path(node.lookup_path)
+path = lookbook_page_path(node.lookup_path)
 depth = node.hierarchy_depth + 1
 %>
 <li key="nav-page-<%= node.id %>-item">

data/app/views/lookbook/components/_nav_preview.html.erb

@@ -1,6 +1,6 @@
 <% examples = node.examples.reject(&:hidden?) %>
 <% if examples.many? %>
-  <%= component "nav_group", node: node, path: show_path(examples.first.path) do %>
+  <%= component "nav_group", node: node, path: lookbook_inspect_path(examples.first.path) do %>
     <% examples.each do |example| %>
       <%= component "nav_item", item: example, depth: example.hierarchy_depth + 1 %>
     <% end %>

data/app/views/lookbook/components/_preview.html.erb

@@ -47,7 +47,7 @@
               <%= icon "refresh-cw", size: 3.5, class: "hover:text-indigo-800" %>
           </button>
           <a
-            href="<%= preview_path %>"
+            href="<%= lookbook_preview_path %>"
             target="_blank"
             x-tooltip.theme.lookbook="`Open in new window`"
             data-hotkey="w">

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

@@ -43,6 +43,32 @@
       <div id="page-main-<%= @page.id %>" data-morph-strategy="replace">
         <div class="prose max-w-none prose-a:text-indigo-900">
           <%= @page_content %>
+
+          <% if @page.tabs.any? %>
+            <div
+              id="page-tabs"
+              x-data="pageTabs"
+              x-init="active = '<%= @page.tabs.first.tab %>'"
+              class="">
+              <nav class="flex border-b border-gray-300">
+                <% @page.tabs.each do |tab| %>
+                  <button
+                    class="px-5 py-2 font-bold border-b-2 hover:border-gray-500"
+                    :class="active === '<%= tab.tab %>' ? '!border-gray-500 !cursor-default' : 'border-gray-50'"
+                    x-on:click="changeTab('<%= tab.tab %>');$dispatch('tab-switch')">
+                    <%= tab.label %>
+                  </button>
+                <% end %>
+              </nav>
+
+              <% @page.tabs.each do |tab| %>
+                <div id="tab-<%= tab.tab %>" x-show="active === '<%= tab.tab %>'">
+                  <%= page_controller.render_page(tab) %>
+                </div>
+              <% end %>
+            </div>
+          <% end %>
+
         </div>
       </div>
       <% if @page.footer? %>

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

@@ -1 +1 @@
-<iframe id="error-iframe" src="<%= url_for lookbook.preview_path %>" frameborder="0" class=" h-screen w-full" seamless></iframe>
+<iframe id="error-iframe" src="<%= url_for lookbook_preview_path %>" frameborder="0" class=" h-screen w-full" seamless></iframe>

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? } %>
 <div class="text-gray-600 bg-gray-50 h-full overflow-auto" data-morph-strategy="replace">
   <% if items.many? %>
     <div class="divide-y divide-dashed divide-gray-300">
@@ -22,4 +22,4 @@
       <% end %>
     </div>
   <% end %>
-</div>
+</div>

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

@@ -9,7 +9,7 @@
       <iframe seamless
         class="h-full w-full border border-gray-300"
          :class="{ 'pointer-events-none': $store.layout.reflowing }"
-        src="<%= lookbook.preview_path(request.query_parameters.merge(lookbook_timestamp: Time.now)) %>"
+        src="<%= lookbook_preview_path(request.query_parameters.merge(lookbook_timestamp: Time.now)) %>"
         <% if config.preview_srcdoc %>srcdoc="<%== srcdoc %>"<% end %>
         frameborder="0"
         x-data="sizes"

data/config/routes.rb

@@ -3,13 +3,13 @@ Lookbook::Engine.routes.draw do
     mount Lookbook::Engine.websocket => Lookbook.config.cable_mount_path
   end
 
-  root to: "application#index", as: :home
+  root to: "application#index", as: :lookbook_home
 
   if Lookbook::Features.enabled?(:pages)
-    get "/#{Lookbook.config.page_route}", to: "pages#index", as: :page_index
-    get "/#{Lookbook.config.page_route}/*path", to: "pages#show", as: :page
+    get "/#{Lookbook.config.page_route}", to: "pages#index", as: :lookbook_page_index
+    get "/#{Lookbook.config.page_route}/*path", to: "pages#show", as: :lookbook_page
   end
 
-  get "/preview/*path", to: "previews#preview", as: :preview
-  get "/*path", to: "previews#show", as: :show
+  get "/preview/*path", to: "previews#preview", as: :lookbook_preview
+  get "/*path", to: "previews#show", as: :lookbook_inspect
 end

data/lib/lookbook/engine.rb

@@ -53,7 +53,7 @@ module Lookbook
       options.listen_paths = options.listen_paths.map(&:to_s)
       options.listen_paths += options.preview_paths
       options.listen_paths << (vc_options.view_component_path || Rails.root.join("app/components"))
-      options.listen_paths.filter! { |path| Dir.exist? path }
+      options.listen_paths.select! { |path| Dir.exist? path }
 
       options.cable_mount_path ||= "/lookbook-cable"
       options.cable_logger ||= Rails.logger
@@ -95,7 +95,7 @@ module Lookbook
         @preview_listener.start
 
         if Lookbook::Features.enabled?(:pages)
-          @page_listener = Listen.to(*config.lookbook.page_paths.filter { |dir| Dir.exist? dir }, only: /\.(html.*|md.*)$/) do |modified, added, removed|
+          @page_listener = Listen.to(*config.lookbook.page_paths.select { |dir| Dir.exist? dir }, only: /\.(html.*|md.*)$/) do |modified, added, removed|
             Lookbook::Engine.websocket&.broadcast("reload", {
               modified: modified,
               removed: removed,

data/lib/lookbook/page.rb

@@ -16,17 +16,22 @@ module Lookbook
     ]
 
     attr_reader :errors
+    attr_accessor :tabs
 
     def initialize(path, base_path)
       @pathname = Pathname.new path
-      @base_path = base_path
+      @base_path = Pathname.new base_path
       @options = nil
       @errors = []
+      @tabs = []
     end
 
     def path
       rel_path = @pathname.relative_path_from(@base_path)
-      (rel_path.dirname.to_s == "." ? name : "#{rel_path.dirname}/#{name}")
+
+      _path = (rel_path.dirname.to_s == "." ? name : "#{rel_path.dirname}/#{name}")
+      _path.gsub!("[#{tab}]", "") if tab?
+      _path
     end
 
     def lookup_path
@@ -78,7 +83,16 @@ module Lookbook
     end
 
     def type
-      :page
+      tab? ? :tab : :page
+    end
+
+    def tab
+      matches = full_path.to_s.match(%r{\[(?<tab>\w+)\]})
+      matches ? remove_position_prefix(matches[:tab]) : nil
+    end
+
+    def tab?
+      tab.present?
     end
 
     def method_missing(method_name, *args, &block)
@@ -114,7 +128,7 @@ module Lookbook
       end
       @options = Lookbook.config.page_options.deep_merge(frontmatter).with_indifferent_access
       @options[:id] = @options[:id] ? generate_id(@options[:id]) : generate_id(lookup_path)
-      @options[:label] ||= name.titleize
+      @options[:label] ||= (tab? ? tab : name).titleize
       @options[:title] ||= @options[:label]
       @options[:hidden] ||= false
       @options[:landing] ||= false
@@ -143,17 +157,29 @@ module Lookbook
       end
 
       def all
-        pages = Array(page_paths).map do |dir|
-          Dir["#{dir}/**/*.html.*", "#{dir}/**/*.md.*"].sort.map do |page|
-            Lookbook::Page.new(page, dir)
-          end
+        pages, tabs =
+          Array(page_paths).flat_map do |dir|
+            Dir["#{dir}/**/*.html.*", "#{dir}/**/*.md.*"].sort.map do |page|
+              page = Lookbook::Page.new(page, dir)
+            end
+          end.partition { |page| page.type == :page }
+
+        sorted_pages = pages
+          .uniq { |page| page.path }
+          .sort_by { |page| [page.position, page.label] }
+
+        page_dict = sorted_pages.index_by(&:path)
+        sorted_tabs = tabs.sort_by { |tab| [tab.position, tab.label] }
+
+        sorted_tabs.each do |tab|
+          page_dict[tab.path].tabs << tab
         end
-        sorted_pages = pages.flatten.uniq { |p| p.path }.sort_by { |page| [page.position, page.label] }
+
         PageCollection.new(sorted_pages)
       end
 
       def page_paths
-        Lookbook.config.page_paths.filter { |dir| Dir.exist? dir }
+        Lookbook.config.page_paths.select { |dir| Dir.exist? dir }
       end
     end
   end

data/lib/lookbook/preview.rb

@@ -33,7 +33,7 @@ module Lookbook
     def examples
       return @examples if @examples.present?
       public_methods = @preview.public_instance_methods(false)
-      public_method_objects = @preview_inspector&.methods&.filter { |m| public_methods.include?(m.name) }
+      public_method_objects = @preview_inspector&.methods&.select { |m| public_methods.include?(m.name) }
       examples = (public_method_objects || []).map { |m| PreviewExample.new(m.name.to_s, self) }
       sorted = Lookbook.config.sort_examples ? examples.sort_by(&:label) : examples
       @examples = []

data/lib/lookbook/utils.rb

@@ -6,7 +6,7 @@ module Lookbook
     protected
 
     def generate_id(*args)
-      parts = args.map { |arg| arg.to_s.parameterize.underscore }
+      parts = args.map { |arg| arg.to_s.force_encoding("UTF-8").parameterize.underscore }
       parts.join("-").tr("/", "-").tr("_", "-").delete_prefix("-").delete_suffix("-").gsub("--", "-")
     end
 

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "0.8.2"
+  VERSION = "0.9.1"
 end