lookbook 1.0.0.beta.7 → 1.0.0.rc.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 52925967015a9d02a18dfcde3e185d7d1dcd1917ea03fdf63276743b3ce18e66
-  data.tar.gz: a8523484936828701e3775603996c8477bb14830ad2b18b5ca5ef1bc55d58117
+  metadata.gz: 03c7bc590a271bc1db49e9636c5c6a274ec45f9a449aaf811695e74c4de52aaa
+  data.tar.gz: a23446857053cf0789adf7ac0644ea3fe8968a8a7fee7c25e2f688ff5e15b7b5
 SHA512:
-  metadata.gz: 104d5b01cc83a5bd4440e64e7da9a551e46b5f583e2a1209bc391bb75facf1c2633453a3b9d15f1a9e351269aa07b5d6e83783768301570346e111076c9511bf
-  data.tar.gz: 5b86248682b5105de0a56ba9e3832cfa243ed8307ac2215d1331ed7915386728db479ada8d8c9ab05a0fa0e00e98ed338416827ca7bfe613533e4c41795f2301
+  metadata.gz: b1eac6af6a1e73ef6c44aa637ca1552bba495d3f07a402ff2bb60d79606c391aaa4a54eeed8e44896273007cb9261cffe57d40b135951b94ea57919be9581d44
+  data.tar.gz: 70fd860db9aa315acd81b182188f3b7f53a38098f33a57bd7b4d8839437de932bc93462a5d00acd30195790157f8af70e7f8313778663bf784ffb3d8fb9437a1

data/README.md

@@ -1,53 +1,61 @@
-# Lookbook v1.0 [beta]
+# Lookbook v1.0
 
-**This is the development branch for Lookbook v1.0.**
+<div>
+<a href="https://rubygems.org/gems/lookbook"><img src="https://img.shields.io/gem/v/lookbook?include_prereleases" alt="Gem version"></a>
+<img src="https://github.com/allmarkedup/lookbook/actions/workflows/ci.yml/badge.svg?branch=v1.0-beta" alt="CI status">
+</div>
+<br>
 
-_For code and documentation for the current stable release see the [main branch](https://github.com/allmarkedup/lookbook/tree/main)._
+> **This is the Lookbook v1.0 BETA development branch.**<br>
+>_For code and documentation for the current stable release see the [main branch](https://github.com/allmarkedup/lookbook/tree/main)._
 
----
 
-📣 **This v1.0 beta is still under active development.** However no breaking changes are envisaged to the current implementation and it should now be stable enough to be used for day-to-day development. Give it a try! 🎉
+## Get started
 
----
- 
-## 📚 Documentation
+If you are already using Lookbook in your project, just update the Lookbook gem to the latest beta release and then head over to the [beta documentation site](https://beta.lookbook.build/) to read more about the new features.
 
-The new (work-in-progress) **documentation site** for Lookbook v1.0 is available here:
+```ruby
+gem "lookbook", ">= 1.0.0.beta.8"
+```
 
-👉 **https://beta.lookbook.build/** 👈
+If you are **new to Lookbook** then check out the <a href="https://beta.lookbook.build/guide/quick-start/">v1.0 quick start guide</a> for more detailed instructions on installing Lookbook in your project
 
-> Documentation source files are located in the `/docs` directory within this repository. The docs are built using [Bridgetown](https://www.bridgetownrb.com/).
 
-## 🚀 Demo app
+<h4>Useful Resources</h4>
 
-There is a demo of the latest v1.0 beta here:
+* 👉 <a href="https://beta.lookbook.build/">v1.0 docs</a>
+* 👉 <a href="https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook">v1.0 demo app</a> <em>(The repo for the demo <a href="https://github.com/allmarkedup/lookbook-demo/tree/v1.0-beta">is here</a> if you want to dig in further)</em>
 
-👉 **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/)
 
+## Changes and new features in v1.0
 
-## 🔎 Release focus
+Lookbook v1.0 includes a completely re-written UI, many under-the hood improvements and a some exciting new customisation options.
 
-The main goals of the v1.0 release are:
+### Frontend changes:
 
-- [x] Rebuild app UI using ViewComponent components
-- [x] Improve usability of the small screen/mobile layout
-- [x] Add support for basic UI color theme customisation
-- [x] Allow users to extend Lookbook with custom panels and by hooking into lifecycle events
-- [x] Remove the `experimental` flag from the [Pages](https://github.com/allmarkedup/lookbook#pages)
-- [x] Improve the development/debugging setup
-- [ ] Improve the test setup and test coverage, switch to RSpec **[in progress]**
+* Completely re-written UI - now built with ViewComponents
+* New [UI themes and customisation options](https://beta.lookbook.build/guide/themes/)
+* Improved small-screen/mobile view
+* Debug menu
+* ...and many other small visual and usability improvements
 
-**No breaking changes** are planned for user-facing features, although the app UI will include some minor visual updates and usability improvements.
+### New options for extending Lookbook:
 
-## 👋 Testing and feedback - help wanted!
+* Define [custom tags](https://beta.lookbook.build/guide/extend/tags/) for preview file annotations
+* Create [your own tab panels](https://beta.lookbook.build/guide/extend/panels/) - with complete control over content/layout and access to all Lookbook data
+* Use [lifecycle hooks](https://beta.lookbook.build/guide/extend/hooks/) to run your own code when Lookbook starts up, when files change or at shutdown
 
-The bulk of the v1.0 'new feature' development work is now mostly complete, although testing and bug fixing is ongoing.
+### Other changes
 
-**If you are an existing Lookbook user** I'd greatly appreciate if you can kick the tyres on the v1.0 beta and open an issue with any bug reports, suggestions or feedback you might have, either about Lookbook itself or the [new docs site](https://lookbook-docs-v1-beta.netlify.app/).
+* 'Workbench' app for developing Lookbook's UI components in Lookbook
+* New Rspec-based test suite and dummy app
+* All new documentation site built using [Bridgetown](https://www.bridgetownrb.com/)
+
+
+[![Lookbook UI](.github/assets/lookbook_screenshot_v1.0_beta.png)](https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook/)
 
-## 🛠 Workbench
+## Workbench
 
 As of this release, Lookbook's UI is itself built using ViewComponent components. To help with development it is possible to preview these components (in a Lookbook instance!) by running the included 'Workbench" app, as follows:
 
@@ -59,7 +67,7 @@ As of this release, Lookbook's UI is itself built using ViewComponent components
 This will start the Workbench app in development mode and any changes to Lookbooks views or assets will immediately be visible in the UI.
 
 
-## 🚦 Running tests
+## Running tests
 
 The test suite is in the process of being completely overhauled.
 

data/app/assets/lookbook/css/themes/blue.css

@@ -58,6 +58,7 @@
   --lookbook-header-bg: var(--lookbook-accent-600);
   --lookbook-header-text: var(--lookbook-white);
   --lookbook-header-border: var(--lookbook-accent-700);
+  --lookbook-blank-slate-title: var(--lookbook-accent-600);
   --lookbook-branding-text: var(--lookbook-header-text);
   --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
-}
+}

data/app/assets/lookbook/css/themes/indigo.css

@@ -58,6 +58,7 @@
   --lookbook-header-bg: var(--lookbook-accent-600);
   --lookbook-header-text: var(--lookbook-white);
   --lookbook-header-border: var(--lookbook-accent-700);
+  --lookbook-blank-slate-title: var(--lookbook-accent-600);
   --lookbook-branding-text: var(--lookbook-header-text);
   --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
-}
+}

data/app/assets/lookbook/css/themes/zinc.css

@@ -58,6 +58,7 @@
   --lookbook-header-bg: var(--lookbook-accent-600);
   --lookbook-header-text: var(--lookbook-white);
   --lookbook-header-border: var(--lookbook-accent-700);
+  --lookbook-blank-slate-title: var(--lookbook-accent-600);
   --lookbook-branding-text: var(--lookbook-header-text);
   --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
-}
+}

data/app/assets/lookbook/js/components/clipboard.js

@@ -19,7 +19,7 @@ function initClipboard(context = {}) {
         return false;
       }
 
-      const content = decodeEntities(targetEl.innerText.trim());
+      const content = decodeEntities(targetEl.innerHTML.trim());
 
       await window.navigator.clipboard.writeText(content);
       this.copied = true;

data/app/components/lookbook/base_component.rb

@@ -12,7 +12,6 @@ module Lookbook
       merged_classes = class_names(attrs[:class], @html_attrs[:class])
       merged_attrs = @html_attrs.except(:class).deep_merge(attrs.except(:class))
 
-
       render Lookbook::TagComponent.new(tag: tag,
         name: component_name,
         **merged_attrs,

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

@@ -13,7 +13,7 @@
           href: lookbook_inspect_path(@example.path, @params),
           tooltip: "View in Inspector" %>
         <% group.button icon: :external_link,
-          href: lookbook_inspect_path(@example.path, @params),
+          href: lookbook_preview_path(@example.path, @params),
           tooltip: "Open in new window",
           target: "_blank" %>
       <% end %>

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

@@ -0,0 +1,5 @@
+@layer components {
+  .lookbook-panel {
+    @apply p-4 min-h-full;
+  }
+}

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

@@ -1,4 +1,6 @@
-<% if panel_styles %>
-  <% content_for :panel_css do %><%= panel_styles %><% end %>
-<% end %>
-<%= panel_html %>
+<%= render_component_tag :div, class: "h-full" do %>
+  <% if panel_styles %>
+    <% content_for :panel_css do %><%= panel_styles %><% end %>
+  <% end %>
+  <%= panel_html %>
+<% end %>

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

@@ -15,8 +15,8 @@ module Lookbook
 
     def before_render
       if @system == false
-        panel_dom = ::Nokogiri::HTML::fragment(content)
-        style_tags = panel_dom.css('style')
+        panel_dom = ::Nokogiri::HTML.fragment(content)
+        style_tags = panel_dom.css("style")
         if style_tags.any?
           css_parser = ::CssParser::Parser.new
           @panel_styles = ""
@@ -27,7 +27,7 @@ module Lookbook
             end
             style_tag.unlink
           end
-          @panel_html = panel_dom.to_html.html_safe 
+          @panel_html = panel_dom.to_html.html_safe
         end
       end
       @panel_html ||= content

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

@@ -4,8 +4,7 @@ module Lookbook
     renders_one :toolbar, Lookbook::Toolbar::Component
 
     def initialize(
-      id: nil,
-      collection:,
+      collection:, id: nil,
       collapse_singles: false,
       **attrs
     )

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

@@ -17,7 +17,7 @@
         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-stroke" %>
-      <span><%= label %></span>
+      <span <% if @item.type == :preview %>class="font-bold"<% end %>><%= label %></span>
     </div>
   <% end %>
   

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

@@ -3,7 +3,7 @@ module Lookbook
     renders_many :panels, ->(**attrs) do
       @panel_counter += 1
       attrs[:name] ||= "tab-#{@panel_counter}"
-      Lookbook::TabPanels::Panel::Component.new **attrs
+      Lookbook::TabPanels::Panel::Component.new(**attrs)
     end
 
     def initialize(**html_attrs)

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

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

data/app/components/lookbook/tag_component.rb

@@ -6,19 +6,19 @@ module Lookbook
       @tag = tag
       html_attrs[:data] ||= {}
       html_attrs[:data][:component] = name if name.present?
-      html_attrs["x-cloak"] = true if cloak == true
+      html_attrs[:"x-cloak"] = true if cloak == true
       html_attrs[self.class.escape_attribute_key] = false
       @html_attrs = html_attrs
     end
 
     def call
-      tag.public_send(@tag, **@html_attrs) do
+      tag.public_send(@tag.to_sym, **@html_attrs) do
         content
       end
     end
 
     def self.escape_attribute_key
-      @escape_attribute_key ||= Gem::Version.new(Rails.version) < Gem::Version.new('6.1.5.1') ? :escape_attributes : :escape
+      @escape_attribute_key ||= Gem::Version.new(Rails.version) < Gem::Version.new("6.1.5.1") ? :escape_attributes : :escape
     end
   end
 end

data/app/controllers/lookbook/application_controller.rb

@@ -1,5 +1,6 @@
 module Lookbook
   class ApplicationController < ActionController::Base
+    content_security_policy false, if: -> { Rails.env.development? }
     protect_from_forgery with: :exception
 
     helper Lookbook::ApplicationHelper

data/app/controllers/lookbook/page_controller.rb

@@ -13,7 +13,12 @@ module Lookbook
       @pages = Lookbook.pages
       @next_page = @pages.find_next(@page)
       @previous_page = @pages.find_previous(@page)
-      content = render_to_string inline: @page.content
+      content = render_to_string inline: @page.content, locals: {
+        page: @page,
+        next_page: @next_page,
+        previous_page: @previous_page,
+        pages: @pages
+      }
       @page.markdown? ? Lookbook::Markdown.render(content) : content
     end
   end

data/app/controllers/lookbook/previews_controller.rb

@@ -2,6 +2,8 @@ module Lookbook
   class PreviewsController < ApplicationController
     layout "lookbook/inspector"
 
+    helper Lookbook::PreviewHelper
+
     def self.controller_path
       "lookbook/previews"
     end
@@ -47,16 +49,6 @@ 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
@@ -130,7 +122,7 @@ module Lookbook
 
       context_data = {
         preview_params: preview_params,
-        path: params[:path],
+        path: params[:path]
       }
 
       example = @example
@@ -145,7 +137,7 @@ module Lookbook
         output = preview_controller.process(:render_example_to_string, @preview, example.name)
         source = has_template ? example.template_source(render_args[:template]) : example.method_source
         source_lang = has_template ? example.template_lang(render_args[:template]) : example.lang
-        
+
         example.define_singleton_method(:output, proc { output })
         example.define_singleton_method(:source, proc { source })
         example.define_singleton_method(:source_lang, proc { source_lang })
@@ -170,21 +162,21 @@ module Lookbook
 
         callable_data = {
           name: name.to_s,
-          index_position: (@panels.select { |p| p.pane == config.pane }.size + 1),
+          index_position: (@panels.count { |p| p.pane == config.pane } + 1),
           **inspector_data
         }
 
         resolved_config = config_with_defaults.transform_values do |value|
-          value.class == Proc ? value.call(Lookbook::Store.new(callable_data)) : value
+          value.instance_of?(Proc) ? value.call(Lookbook::Store.new(callable_data)) : value
         end
         resolved_config[:name] = name.to_s
-        
+
         @panels << Lookbook::Store.new(resolved_config, deep: false)
       end
 
       @panels = @panels.select(&:show).sort_by { |p| [p.position, p.label] }
     end
-   
+
     def main_panels
       panels.select { |panel| panel.pane == :main }
     end

data/app/helpers/lookbook/preview_helper.rb

@@ -1,6 +1,11 @@
 module Lookbook
   module PreviewHelper
-    # Left intentionally empty.
-    # Included for backwards compatability.
+    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
   end
 end

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

@@ -1,27 +1,14 @@
 <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>
-    <% 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 class="text-center" id="landing-<%= Lookbook.previews? ? "with" : "no" %>-content">
+    <h5 class="text-base text-lookbook-blank-slate-title truncate uppercase font-black tracking-wider mb-2">
+      <%= config.project_name %>
+    </h5>
+    <div class="opacity-60">
+      <% if Lookbook.previews? %>
+        <p>Select a preview from the nav to get started.</p>
+      <% else %>
+        <p><a class="underline" href="https://beta.lookbook.build/guide/previews" target="_blank">Create a preview</a> to get started.</p>
+      <% end %>
+    </div>
   </div>
 </div>

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

@@ -11,7 +11,7 @@
     <% end %>
   </div>
 <% else %>
-  <div class="p-4 bg-lookbook-prose-bg w-full h-full">
+  <div class="px-4 py-6 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/show.html.erb

@@ -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 id: panel.id, name: panel.name, class: [panel.panel_classes, { "p-4": panel.padded, "prose": panel.prose }] do %>
+          <% tabs.panel id: panel.id, name: panel.name, class: panel.panel_classes do %>
             <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
           <% end %>
         <% end %>
@@ -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 id: panel.id, name: panel.name, class: [panel.panel_classes, { "p-4": panel.padded, "prose": panel.prose }]  do %>
+          <% tabs.panel id: panel.id, name: panel.name, class: panel.panel_classes  do %>
             <%= render_component :inspector_panel, **panel.slice(:id, :name, :system) do %>
               <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
             <% end %>

data/lib/lookbook/code_formatter.rb

@@ -1,6 +1,6 @@
 require "rouge"
 require "htmlbeautifier"
-require 'htmlentities'
+require "htmlentities"
 
 module Lookbook
   module CodeFormatter

data/lib/lookbook/collection.rb

@@ -10,7 +10,7 @@ module Lookbook
         items = path
         path = ""
       end
-      
+
       @path = path.delete_prefix("/").delete_suffix("/")
       super(@path)
 
@@ -37,6 +37,10 @@ module Lookbook
       @items.sort_by { |item| [item.hierarchy_depth, item&.position, item.label] }
     end
 
+    def clear
+      @items = []
+    end
+
     def visible_items
       reject { |i| i.hidden? }
     end
@@ -68,14 +72,15 @@ module Lookbook
 
     def find(lookup = nil, &block)
       if lookup
-        lookup.is_a?(Symbol) ? find_by_id(lookup.to_s.tr("_", "-")) : find_by_path(lookup)
+        lookup.is_a?(Symbol) ? find_by_id(lookup) : find_by_path(lookup)
       elsif block
         items.find(&block)
       end
     end
 
     def find_by_id(id)
-      items.find { |i| i.id == id }
+      id = id.to_s.tr("_", "-")
+      items.find { |i| i.id.to_s == id }
     end
 
     def find_by_path(path)

data/lib/lookbook/component.rb

@@ -1,13 +1,12 @@
 module Lookbook
   class Component < Entity
-
     attr_accessor :name
 
     def initialize(name)
       @name = name
       super(path)
     end
-    
+
     def path
       name.underscore
     end
@@ -28,4 +27,4 @@ module Lookbook
       template_path.present?
     end
   end
-end
+end

data/lib/lookbook/config.rb

@@ -6,14 +6,14 @@ module Lookbook
   class Config
     def initialize
       @options = Store.new
-      
+
       @options.set({
         project_name: "Lookbook",
         log_level: 2,
         auto_refresh: true,
 
         components_path: "app/components",
-        
+
         page_controller: "Lookbook::PageController",
         page_route: "pages",
         page_paths: ["test/components/docs"],
@@ -44,7 +44,7 @@ module Lookbook
         hooks: {
           after_initialize: [],
           before_exit: [],
-          after_change: [],
+          after_change: []
         },
 
         debug_menu: Rails.env.development?,
@@ -100,7 +100,7 @@ module Lookbook
             padded: false,
             system: true
           }
-        },
+        }
       })
     end
 
@@ -147,7 +147,7 @@ module Lookbook
 
     def inspector_panels(&block)
       panels = Store.new(@options.inspector_panels.select { |key, panel| panel != false })
-      if block_given?
+      if block
         yield panels
       else
         panels
@@ -158,7 +158,7 @@ module Lookbook
       pane = opts[:pane].presence || :drawer
       siblings = inspector_panels.select { |key, panel| panel.pane == pane }
       opts[:position] ||= siblings.size + 1
-      @options.inspector_panels[name] = opts      
+      @options.inspector_panels[name] = opts
       siblings.each do |key, panel|
         if panel.position >= opts[:position]
           panel.position += 1
@@ -192,7 +192,6 @@ module Lookbook
         copy: nil,
         panel_classes: nil,
         locals: {},
-        padded: true,
         system: false
       }
     end
@@ -207,7 +206,7 @@ module Lookbook
     end
 
     def ui_theme_overrides(&block)
-      if block_given?
+      if block
         yield @options.ui_theme_overrides
       else
         @options.ui_theme_overrides
@@ -238,7 +237,7 @@ module Lookbook
     def to_json(*a)
       to_h.to_json(*a)
     end
-    
+
     protected
 
     def normalize_paths(paths)
@@ -256,5 +255,9 @@ module Lookbook
     def method_missing(name, *args)
       @options.send(name, *args)
     end
+
+    def respond_to_missing?(name, *)
+      to_h.key? name
+    end
   end
-end
+end

data/lib/lookbook/data.rb

@@ -8,4 +8,4 @@ module Lookbook
       @data = Store.new(props)
     end
   end
-end
+end