lookbook 1.0.0.beta.0 → 1.0.0.beta.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aeef273a433c57159752664a6897e4fb17e1836fa7581db64446ee1674cbcd72
-  data.tar.gz: 74411f7b3b81d3a442772d1c1dd2ba46f3af684248f96aafd445014278b73b2e
+  metadata.gz: 5efc30f722f9fff6377285d5b4e06a5f62e20e0a202eb19966ab6a7701999db2
+  data.tar.gz: 4987e68865cf8ddfdc68838bfc1497c71118898c0607d0c5dd9701ccc754d406
 SHA512:
-  metadata.gz: b722bd45d02ce7588a1babfe7b6920c30b42a6c7f4517da03c9faaec4777766fff6eee11c9280758a294b30340a2e9526ed4f35f5459f54eb675a427fff8f943
-  data.tar.gz: 17997ac9bfebed9c4f56999dbdc8ddbc13b9a47acab70137113b1cdf12d69fff3c40c466cb5412eed2878c7bd99363cdcafea3718af2c28f59afce161d34c3db
+  metadata.gz: 27b85921801c7e88510e69ae88a0b6b093f9da9252910130b5ee7edbc89ecb9149a8b7d0a6c60b6993904e73448e64150a2756a936eeb1e3f61a4ab7d2acc40b
+  data.tar.gz: 68d236bd6baba5c456cc090cd2faed45ef02300ba2d0913eae9d2087b0572d140653df035a65a28d29baf435459f67ea86aa1cb7142634c5154324540ac56e1f

data/README.md

@@ -17,7 +17,11 @@ The main goals of the v1.0 release are:
 
 **No breaking changes** are planned for user-facing features, although the app UI will include some minor visual updates and usability improvements.
 
-![Lookbook UI](.github/assets/lookbook_screenshot_v1.0_beta.png)
+## Demo app
+
+There is a demo of the current v1.0-beta here: https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook/
+
+[![Lookbook UI](.github/assets/lookbook_screenshot_v1.0_beta.png)](https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook/)
 
 ## 👋 Testing and feedback - help wanted!
 
@@ -30,10 +34,14 @@ The bulk of the v1.0 'new feature' development work is now mostly complete, alth
 - Existing Lookbook setups should continue to work **with no changes required**
 - There have been a number of small UI changes - do any of them negatively affect your experience of using Lookbook?
 - The Pages feature should work without opting in to any experimental features. 
-- It's now possible to pick from one of a small set of pre-defined UI themes (finer-grained customisation coming soon!). See below for details. Any thoughts on this?
+- It's now possible to pick from one of a small set of pre-defined UI themes (finer-grained customisation coming soon!). [See below](#ui-theming) for details. Any thoughts on this?
 
 > However absolutely any thoughts, comments or bug reports (even if unrelated to the specific areas above) would be much appreciated!
 
+## New features
+
+There are a number of new features that are planned for inclusion in the v1.0 release. They are:
+
 ### UI theming
 
 Lookbook now ships with a small set of pre-defined UI themes, which can be set using the `ui_theme` config option:
@@ -51,6 +59,80 @@ Currently available themes are:
 
 > More themes and finer-grained customisation of theme colours is coming soon!
 
+### Inspector panels customisation
+
+It is now possible to add, remove or customise tabbed panels in the preview inspector by editing the `lookbook.inspector_panels` configuration option.
+
+By default Lookbook comes with **five** panels split between two resizable panes:
+
+1. The `main` pane - by default includes the `preview` and `output` (HTML) panels
+2. The `drawer` pane - by default includes the  `source`, `notes` and `params` panels
+
+These can be hidden, moved, reordered and/or added to as your project requires.
+
+#### Panel config overview
+
+Panels are defined as a hash with the following properties (all of which are actually optional):
+
+```ruby
+{
+  label: "New Panel",
+  pane: :drawer,
+  position: 1,
+  partial: "path/to/view_partial",
+  content: "Some **markdown** content", 
+  hotkey: "ctrl.n",
+  disabled: false,
+  show: true,
+  copy: "Content to be copied",
+}
+```
+
+* `label`: the text to be displayed in the tab
+* `pane`: the panel location, either `:drawer` or `:main` (`:drawer` is the default)
+* `position`: used for ordering the tabs
+* `partial`: the path to the view template partial used to render the panel
+* `content`: the default partial renders and displays the contents of this (markdown supported)
+* `hotkey`: [keyboard shortcut](https://alpinejs.dev/directives/on#keyboard-events) to make panel become the active tab
+* `disabled`: `true` or `false` - disabled tabs are still accessible but are greyed out in the UI
+* `show`: `true` or `false` - whether or not to display the tab/panel
+* `copy`: if present, the panel will display a copy button that copies the value of this property to the clipboard when clicked
+* `locals`: a `Hash` of local variables that will be made available to the partial when rendering the panel
+
+All panel config values can be provided either as a **simple static value** or as a **lambda function** which will receive a hash of data relating to the current preview/example. For example:
+
+```ruby
+{
+  label: "Params",
+  disabled: ->(data) { data.preview.params.none? } # grey out the Params tab if no params are set for the current preview
+}
+```
+
+> **Work in progress!** There is more documentation to come on the data hash passed to lambdas.
+
+#### Removing panels
+
+To remove a pane entirely from the UI, just set it's value to false in your `application.rb` (or wherever you do your configuration):
+
+```ruby
+config.lookbook.inspector_panels.notes = false # remove the notes panel
+```
+
+#### Customising existing panels
+
+Existing panel configuration can be amended as needed. For example, to change the label on one of the default panels:
+
+```ruby
+config.lookbook.inspector_panels.notes.label = "Instructions"
+
+# or use block-style config
+config.lookbook.inspector_panels do |panels|
+  panels.notes.label = "Instructions"
+end
+```
+
+
+
 
 ## 🛠 Workbench
 

data/app/assets/lookbook/js/stores/inspector.js

@@ -4,15 +4,15 @@ export default function initInspectorStore(Alpine, { prefix }) {
   return {
     minVerticalSplitWidth: 800,
 
-    preview: {
+    main: {
       activeTab: Alpine.$persist("").as(
-        prefixString("inspector-preview-active-tab", prefix)
+        prefixString("inspector-main-active-tab", prefix)
       ),
       width: Alpine.$persist("100%").as(
-        prefixString("inspector-preview-width", prefix)
+        prefixString("inspector-main-width", prefix)
       ),
       height: Alpine.$persist("100%").as(
-        prefixString("inspector-preview-height", prefix)
+        prefixString("inspector-main-height", prefix)
       ),
       lastWidth: null,
       lastHeight: null,

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

@@ -3,7 +3,8 @@
   "@viewport:resize-start.window": "resizing = true",
   "@viewport:resize-complete.window": "resizing = false",
   "@dom:update-start.window": "tearDown",
-  "@dom:update-complete.window": "createObserver" do %>
+  "@dom:update-complete.window": "createObserver",
+  "x-show": "target" do %>
     <span x-text="`${width}px`"></span>
     <span class="opacity-70">x</span>
     <span x-text="`${height}px`"></span>

data/app/components/lookbook/dimensions_display/component.js

@@ -5,26 +5,33 @@ export default function dimensionsDisplayComponent(targetSelector) {
     width: 0,
     height: 0,
     resizing: false,
+    target: null,
 
     init() {
-      const target = document.querySelector(targetSelector);
-      this.width = Math.round(target.clientWidth);
-      this.height = Math.round(target.clientHeight);
-      this.createObserver();
+      this.target = document.querySelector(targetSelector);
+      if (this.target) {
+        this.width = Math.round(this.target.clientWidth);
+        this.height = Math.round(this.target.clientHeight);
+        this.createObserver();
+      }
     },
 
     createObserver() {
-      this.observer = observeSize(
-        document.querySelector(targetSelector),
-        ({ width, height }) => {
-          this.width = width;
-          this.height = height;
-        }
-      );
+      if (this.target) {
+        this.observer = observeSize(
+          document.querySelector(targetSelector),
+          ({ width, height }) => {
+            this.width = width;
+            this.height = height;
+          }
+        );
+      }
     },
 
     tearDown() {
-      this.observer.disconnect();
+      if (this.observer) {
+        this.observer.disconnect();
+      }
     },
   };
 }

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

@@ -51,9 +51,9 @@
                   <span class="opacity-70 mr-1">Lookbook</span>
                   <span class="mr-6">v<%= Lookbook::VERSION %></span>
                   <div class="flex items-center space-x-2">
-                    <a href="https://github.com/allmarkedup/lookbook" target="_blank" class="ml-auto opacity-70" title="Documentation">
+                    <!-- a href="https://github.com/allmarkedup/lookbook" target="_blank" class="ml-auto opacity-70" title="Documentation">
                       <%= render_component :icon, name: :book, size: 3 %>
-                    </a>
+                    </a -->
                     <a href="https://github.com/allmarkedup/lookbook" target="_blank" class="ml-auto opacity-70" title="Github">
                       <%= render_component :icon, name: :github, size: 3 %>
                     </a>

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

@@ -0,0 +1,18 @@
+ <%= render_component_tag x_data: "{ activeTab: null }" do %>
+  <div class="flex w-full border-b border-lookbook-divider mb-6">
+    <%= render_component :tabs, theme: :page do |t| %>
+      <% @tabs.each do |props| %>
+        <%= t.tab **props %>
+      <% end %>
+    <% end %>
+  </div>
+  <%= render_component :tab_panels do |t| %>
+    <% @tabs.each do |props| %>
+      <% t.panel name: props[:name] do %>
+        <%= render_component :prose, markdown: props[:markdown], class: "max-w-none flex-none" do %>
+          <%== props[:content] %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,19 @@
+module Lookbook
+  class PageTabs::Component < Lookbook::Component
+    renders_many :tabs, ->(**attrs, &block) do
+      @tabs ||= []
+      attrs[:content] = capture(&block)
+      attrs[:markdown] ||= @markdown
+      @tabs << attrs
+    end
+
+    def initialize(markdown: true, **html_attrs)
+      @markdown = markdown
+      super(**html_attrs)
+    end
+
+    def before_render
+      tabs.size
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<%= render_component_tag class: "h-full" do %>
+  <div x-ref="panels" class="h-full">
+    <%= safe_join(panels) %>
+  </div>
+<% end %>

data/app/components/lookbook/tab_panels/component.js

@@ -0,0 +1,25 @@
+export default function tabPanelsComponent(store) {
+  return {
+    get store() {
+      return store || this;
+    },
+
+    get id() {
+      return this.$root.id;
+    },
+
+    get panels() {
+      return Array.from(this.$refs.panels.children);
+    },
+
+    isActive(el) {
+      return this.store.activeTab === this._getRef(el);
+    },
+
+    // protected
+
+    _getRef(el) {
+      return el.getAttribute("x-ref");
+    },
+  };
+}

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

@@ -0,0 +1,20 @@
+module Lookbook
+  class TabPanels::Component < Lookbook::Component
+    renders_many :panels, ->(**attrs) do
+      @panel_counter += 1
+      attrs[:name] ||= "tab-#{@panel_counter}"
+      Lookbook::TabPanels::Panel::Component.new **attrs
+    end
+
+    def initialize(**html_attrs)
+      @panel_counter = 0
+      super(**html_attrs)
+    end
+
+    protected
+
+    def alpine_component
+      "tabPanelsComponent"
+    end
+  end
+end

data/app/components/lookbook/{tabbed_content/section → tab_panels/panel}/component.html.erb

@@ -1,8 +1,8 @@
 <%= render_component_tag :section,
   id: @id,
-  x_ref: @ref,
+  x_ref: @name,
   x_cloak: true,
   class: "h-full",
   ":class": "{ hidden: !isActive($el) }" do %>
-  <%= content %>
+    <%== content %>
 <% end %>

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

@@ -0,0 +1,9 @@
+module Lookbook
+  class TabPanels::Panel::Component < Lookbook::Component
+    def initialize(name:, id: nil, **html_attrs)
+      @name = name 
+      @id = id || name
+      super(**html_attrs)
+    end
+  end
+end

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

@@ -1,5 +1,11 @@
-<%= render_component_tag class: "px-4 flex items-center relative" do %>
-  <div x-ref="tabs" class="flex items-stretch h-10 space-x-6 select-none min-w-0">
+<%= render_component_tag class: "flex items-center relative" do %>
+  <div x-ref="tabs" class="<%= class_names [
+    "flex items-stretch select-none min-w-0",
+    {
+      "h-10 space-x-6": @theme == :toolbar,
+      "space-x-3": @theme == :page,
+    }
+  ] %>">
     <%= safe_join(tabs) %>
   </div>
   <div x-ref="dropdownTrigger" class="absolute" x-show="hasHiddenTabs" :style="{left: `${triggerLeft}px`}">

data/app/components/lookbook/tabs/component.js

@@ -4,13 +4,17 @@ import { observeSize } from "@helpers/layout";
 import { getElementSize } from "@helpers/dom";
 
 export default function tabsComponent(store) {
-  const initial = store.activeTab || null;
+  const initial = store ? store.activeTab : null;
   let dropdown = null;
   return {
     visibleTabsCount: 0,
 
     triggerLeft: 0,
 
+    get store() {
+      return store || this;
+    },
+
     get tabs() {
       return Array.from(this.$refs.tabs.children);
     },
@@ -34,6 +38,7 @@ export default function tabsComponent(store) {
           theme: "menu",
           interactive: true,
           trigger: "click",
+          placement: "bottom",
           appendTo: this.$root,
         });
 
@@ -59,10 +64,13 @@ export default function tabsComponent(store) {
       }
 
       if (width === this.$root.offsetWidth) {
+        console.log("uep");
         this.visibleTabsCount = this.tabs.length;
         return;
       }
 
+      console.log(width);
+
       let sumTabWidths = 60;
       let triggerLeft = 20;
       let visibleTabsCount = 0;
@@ -80,12 +88,12 @@ export default function tabsComponent(store) {
     },
 
     selectTab(el) {
-      store.activeTab = this._getRef(el);
+      this.store.activeTab = this._getRef(el);
       dropdown.hide();
     },
 
     isSelected(el) {
-      return store.activeTab === this._getRef(el);
+      return this.store.activeTab === this._getRef(el);
     },
 
     isDisabled(el) {

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

@@ -1,22 +1,20 @@
 module Lookbook
   class Tabs::Component < Lookbook::Component
-    renders_many :tabs, ->(ref: nil, **attrs) do
+    renders_many :tabs, ->(**attrs) do
       @tab_counter += 1
-      ref ||= "tab-#{@tab_counter}"
-      attrs = {
-        ref: ref,
-        position: @tab_counter,
-        **attrs
-      }
+      attrs[:name] ||= "tab-#{@tab_counter}"
+      attrs[:position] ||= @tab_counter
+      attrs[:theme] ||= @theme
       dropdown_tab(**attrs)
       Lookbook::Tabs::Tab::Component.new(**attrs)
     end
 
-    renders_many :dropdown_tabs, ->(ref:, **attrs) do
-      Lookbook::Tabs::DropdownTab::Component.new(ref: "dropdown-#{ref}", **attrs)
+    renders_many :dropdown_tabs, ->(name:, **attrs) do
+      Lookbook::Tabs::DropdownTab::Component.new(name: "dropdown-#{name}", **attrs)
     end
 
-    def initialize(**html_attrs)
+    def initialize(theme: :toolbar, **html_attrs)
+      @theme = theme
       @tab_counter = 0
       super(**html_attrs)
     end

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

@@ -1,6 +1,12 @@
 <%= render_component_tag :button,
-  x_ref: @ref,
-  class: "whitespace-nowrap px-4 py-2 border-l-2 cursor-pointer block w-full text-left",
+  x_ref: @name,
+  class: [
+    "whitespace-nowrap px-4 border-l-2 cursor-pointer block w-full text-left",
+    {
+      "py-2": @theme == :toolbar,
+      "py-2 text-base": @theme == :page,
+    }
+  ],
   ":class": "{
     'border-lookbook-tabs-highlight': isSelected($el),
     'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el),

data/app/components/lookbook/tabs/dropdown_tab/component.rb

@@ -1,16 +1,17 @@
 module Lookbook
   class Tabs::DropdownTab::Component < Lookbook::Component
-    def initialize(ref:, label: nil, hotkey: nil, disabled: nil, position: 0, **html_attrs)
-      @ref = ref
+    def initialize(name:, label: nil, hotkey: nil, disabled: nil, position: 0, theme: :toolbar, **html_attrs)
+      @name = name
       @label = label
       @hotkey = hotkey
       @disabled = disabled
       @position = position
+      @theme = theme
       super(**html_attrs)
     end
 
     def label
-      @label.presence || content
+      @label.presence || content || @name.titleize
     end
   end
 end

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

@@ -1,7 +1,13 @@
 <%= render_component_tag :button,
   id: @id,
-  x_ref: @ref,
-  class: "whitespace-nowrap pt-2.5 pb-1.5 px-1 border-b-2 cursor-pointer",
+  x_ref: @name,
+  class: [
+    "whitespace-nowrap cursor-pointer pt-2.5 pb-1.5 border-b-2",
+    {
+      "px-1": @theme == :toolbar,
+      "px-2 text-lg relative -bottom-px": @theme == :page,
+    }
+  ],
   ":class": "{
     'border-lookbook-tabs-highlight': isSelected($el),
     'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el),
@@ -14,5 +20,5 @@
     disabled: @disabled
   },
   cloak: true do %>
-  <%= label %>
+  <%== label %>
 <% end %>

data/app/components/lookbook/tabs/tab/component.rb

@@ -1,16 +1,17 @@
 module Lookbook
   class Tabs::Tab::Component < Lookbook::Component
-    def initialize(ref:, label: nil, hotkey: nil, disabled: nil, position: 0, **html_attrs)
-      @ref = ref
+    def initialize(name:, label: nil, hotkey: nil, disabled: nil, position: 0, theme: :toolbar, **html_attrs)
+      @name = name
       @label = label
       @hotkey = hotkey
       @disabled = disabled
       @position = position
+      @theme = theme
       super(**html_attrs)
     end
 
     def label
-      @label.presence || content
+      @label.presence || content || @name.titleize
     end
   end
 end

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

@@ -10,7 +10,7 @@
     }
 
     & [data-component="tabs"] {
-      @apply relative -mb-px;
+      @apply relative -mb-px px-4;
     }
   }
 }

data/app/controllers/lookbook/application_controller.rb

@@ -24,7 +24,7 @@ module Lookbook
     protected
 
     def generate_theme_overrides
-      @theme_overrides = Lookbook::Theme.new(Lookbook.config.ui_theme_overrides).to_css
+      @theme_overrides ||= Lookbook::Theme.new(Lookbook.config.ui_theme_overrides).to_css
     end
 
     def feature_enabled?(feature)

data/app/controllers/lookbook/pages_controller.rb

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