lookbook 1.0.0 → 1.0.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5617d397419ae8b9e95fa6c53ceb94dd3a7dffe83ea1fae0f643f17f6c15b995
-  data.tar.gz: 1fb037740def1192fa5aa9d0c076419dc06ed629996e7cc82ed741e7aefa000f
+  metadata.gz: 95694c758af19ee6a561b2aedfee93d932c663f7027471204da2dce393052a5a
+  data.tar.gz: 1b4f3e4af714af47b6719cbbef7a861ad0ca2341089e2689ef8ed80b9a745867
 SHA512:
-  metadata.gz: a5710f8a40f7594bc4d9ac3347ca8c04102f708b50c21d96d1695b26ab4d6ccc23436e1288cea7d43516264260c31f091530cb15d3ea144707d2ae280442c333
-  data.tar.gz: 1bfdcf6ce5bb68e2af399b5920ec821a73057e77aaf4732216da498b1745c5c8eb15b220ce56115dd8c14d757febe75315c2620c6c6c929b3e973d001a5b7797
+  metadata.gz: 0a148ae5b71546463c003244040e54de07106db6f927e61b77ff35c92d524f37ed59e53646833675a8d1c399968904ffe41891817e85628aa8da879af8aa3bd8
+  data.tar.gz: ee91d909da4634558dbf542802ee770c921f0dfdec0bdc37592977b082a97705957bf7e19cf5168b599e78dca1f5d4222147417262c4b41f90b305a43c2c4f72

data/README.md

@@ -1,12 +1,12 @@
 # Lookbook
 
 <div>
-<a href="https://rubygems.org/gems/lookbook"><img src="https://img.shields.io/gem/v/lookbook?include_prereleases" alt="Gem version"></a>
+<a href="https://rubygems.org/gems/lookbook"><img src="https://img.shields.io/gem/v/lookbook" alt="Gem version"></a>
 <a href="https://github.com/allmarkedup/lookbook/actions/workflows/ci.yml"><img src="https://github.com/allmarkedup/lookbook/actions/workflows/ci.yml/badge.svg?branch=main" alt="CI status"></a>
 </div>
 <br>
 
-A tool to help develop, test and document [ViewComponents](https://viewcomponent.org/) in isolation.
+A tool to help browse, develop, test & document [ViewComponents](https://viewcomponent.org/) in Ruby on Rails apps.
 
 ## Documentation
 
@@ -17,9 +17,9 @@ A tool to help develop, test and document [ViewComponents](https://viewcomponent
 
 ## Demo
 
-**Online Demo:** [https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook](https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook) 
+**Online Demo:** [https://lookbook-demo-app.herokuapp.com/lookbook](https://lookbook-demo-app.herokuapp.com/lookbook) 
 
-[![Lookbook UI](.github/assets/lookbook_screenshot_v1.0_beta.png)](https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook/)
+[![Lookbook UI](.github/assets/lookbook_screenshot_v1.0_beta.png)](https://lookbook-demo-app.herokuapp.com/lookbook/)
 
 
 ## Development

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

@@ -11,6 +11,7 @@ export default function app() {
 
     init() {
       if (window.SOCKET_PATH) {
+        console.log("SOCKET CREATED");
         const socket = createSocket(window.SOCKET_PATH);
         socket.addListener("Lookbook::ReloadChannel", () => this.updateDOM());
       }

data/app/assets/lookbook/js/lib/socket.js

@@ -1,5 +1,5 @@
 import { createConsumer } from "@rails/actioncable";
-import debounce from "debounce";
+import { debounce } from "throttle-debounce";
 import { log } from "../plugins/logger";
 
 export default function socket(endpoint) {
@@ -8,10 +8,14 @@ export default function socket(endpoint) {
   return {
     addListener(channel, callback) {
       consumer.subscriptions.create(channel, {
-        received: debounce((data) => {
-          log.debug("Lookbook files changed");
-          callback(data);
-        }, 200),
+        received: debounce(
+          200,
+          (data) => {
+            log.debug("Lookbook files changed");
+            callback(data);
+          },
+          { atBegin: true }
+        ),
         connected() {
           log.info("Lookbook websocket connected");
         },

data/app/components/lookbook/base_component.rb

@@ -31,11 +31,19 @@ module Lookbook
       nil
     end
 
+    def alpine_encode(data)
+      if data.is_a? String
+        "\'#{json_escape data}\'"
+      else
+        json_escape data.to_json.tr("\"", "\'")
+      end
+    end
+
     def prepare_alpine_data(x_data = nil)
       alpine_component_name = x_data || @html_attrs&.dig(:"x-data") || alpine_component
       if alpine_component_name.present?
-        args = Array.wrap(alpine_data)
-        args.any? ? "#{alpine_component_name}(#{safe_join(args)})" : alpine_component_name
+        args = Array.wrap(alpine_data).compact
+        args.any? ? "#{alpine_component_name}(#{args.join(",")})" : alpine_component_name
       end
     end
   end

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

@@ -13,7 +13,7 @@ module Lookbook
     protected
 
     def alpine_data
-      content ? nil : @target.to_json
+      content ? nil : alpine_encode(@target)
     end
 
     def alpine_component

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

@@ -2,15 +2,12 @@ module Lookbook
   class DimensionsDisplay::Component < Lookbook::BaseComponent
     def initialize(target:, **html_attrs)
       @target = target
+      @alpine_data = alpine_encode(@target)
       super(**html_attrs)
     end
 
     protected
 
-    def alpine_data
-      @target.to_json
-    end
-
     def alpine_component
       "dimensionsDisplayComponent"
     end

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

@@ -1,19 +1,19 @@
-<% if @example.present? %>
+<% if @target.present? %>
 <%= render_component_tag class: "not-prose border-b border-lookbook-divider rounded-sm overflow-hidden", "@navigation:start.window": "cleanup" do %>
 
   <%= render_component :toolbar, class: "border border-b-0 border-lookbook-divider" do |toolbar| %>
     <% toolbar.section padded: true do %>
       <h3>
-        <%= @example.preview.label %> (<%= @example.label %>)
+        <%= @target.preview.label %> (<%= @target.label %>)
       </h3>
     <% end %>
     <% toolbar.section align: :right, divide: :left do %>
       <%= render_component :button_group do |group| %>
         <% group.button icon: :eye,
-          href: lookbook_inspect_path(@example.path, @params),
+          href: lookbook_inspect_path(@target.path, @params),
           tooltip: "View in Inspector" %>
         <% group.button icon: :external_link,
-          href: lookbook_preview_path(@example.path, @params),
+          href: lookbook_preview_path(@target.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: lookbook_preview_path(@example.path, @params.merge(lookbook_embed: true)),
+      src: lookbook_preview_path(@target.path, @params.merge(lookbook_embed: true)),
       alpine_data: "store",
       resize_height: false,
       max_height: @max_height,

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

@@ -2,7 +2,7 @@ module Lookbook
   class Embed::Component < Lookbook::BaseComponent
     def initialize(id:, example:, params: {}, opts: {}, max_height: nil, **html_attrs)
       @id = id
-      @example = example
+      @target = example
       @params = params
       @opts = opts
       @max_height = max_height
@@ -20,7 +20,7 @@ module Lookbook
     end
 
     def alpine_data
-      [@id.to_json, "$store.pages.embeds"].join(",")
+      [alpine_encode(@id), "$store.pages.embeds"].join(",")
     end
 
     def alpine_component

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

@@ -46,11 +46,11 @@
                   <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">
-                      <%= icon  :book, size: 3 %>
-                    </a -->
+                    <a href="https://lookbook.build/guide" target="_blank" class="ml-auto opacity-70" title="Documentation">
+                      <%= icon :book, size: 3 %>
+                    </a>
                     <a href="https://github.com/allmarkedup/lookbook" target="_blank" class="ml-auto opacity-70" title="Github">
-                      <%= icon  :github, size: 3 %>
+                      <%= icon :github, size: 3 %>
                     </a>
                   </div>
                 </div>

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

@@ -1,4 +1,4 @@
-<%= render_component_tag :i, style: "height: #{size_rems}; width: #{size_rems}" do %>
+<%= render_component_tag :i, style: "height: #{size_rems}; width: #{size_rems}; #{@html_attrs[:style]}" do %>
   <svg>
     <use :href="`/lookbook-assets/feather-sprite.svg#${iconName}`" x-cloak />
   </svg>

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

@@ -1,7 +1,7 @@
 module Lookbook
   class Icon::Component < Lookbook::BaseComponent
     def initialize(name:, size: 4, **html_attrs)
-      @icon_name = name.is_a?(Symbol) ? name.to_s.tr("_", "-").to_json : name
+      @alpine_data = name.is_a?(Symbol) ? alpine_encode(name.to_s.tr("_", "-")) : name
       @size = size || 4
       super(**html_attrs)
     end
@@ -12,10 +12,6 @@ module Lookbook
 
     protected
 
-    def alpine_data
-      @icon_name
-    end
-
     def alpine_component
       "iconComponent"
     end

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

@@ -25,9 +25,8 @@ module Lookbook
             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
+          @panel_html = content.gsub(/<style(?:\s[^>]*)?>.*<\/style>/, "").html_safe
         end
       end
       @panel_html ||= content

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

@@ -11,7 +11,7 @@
     </div>
   <% end %>
 
-  <div class="overflow-auto">
+  <div class="overflow-auto h-full">
     <% if items.any? %>
       <ul class="py-2" x-ref="items" x-show="!empty" x-cloak>
         <%= safe_join(items) %>

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

@@ -78,10 +78,10 @@ module Lookbook
     protected
 
     def alpine_data
-      {
+      alpine_encode({
         id: @item.id,
         matchers: item.is_a?(Lookbook::Collection) ? nil : item.matchers
-      }.to_json
+      })
     end
 
     def alpine_component

data/app/components/lookbook/params_editor/field/component.rb

@@ -33,7 +33,7 @@ module Lookbook
     protected
 
     def alpine_data
-      escaped_value = helpers.raw json_escape(value.to_json)
+      escaped_value = json_escape(value.to_json)
       "{name: '#{name}', value: #{escaped_value}}"
     end
 

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

@@ -1,4 +1,4 @@
-import debounce from "debounce";
+import { debounce } from "throttle-debounce";
 import tippy from "~/app/assets/lookbook/js/lib/tippy";
 import { observeSize } from "@helpers/layout";
 import { getElementSize } from "@helpers/dom";
@@ -49,7 +49,7 @@ export default function tabsComponent(store) {
 
         this.parentObserver = observeSize(
           this.$root.parentElement,
-          debounce(this.handleResize.bind(this), 10)
+          debounce(10, this.handleResize.bind(this))
         );
 
         this.$watch("visibleTabsCount", (value) => {

data/app/controllers/lookbook/application_controller.rb

@@ -1,6 +1,9 @@
 module Lookbook
   class ApplicationController < ActionController::Base
-    content_security_policy false, if: -> { Rails.env.development? }
+    if respond_to?(:content_security_policy)
+      content_security_policy false, if: -> { Rails.env.development? }
+    end
+
     protect_from_forgery with: :exception
 
     helper Lookbook::ApplicationHelper
@@ -8,6 +11,7 @@ module Lookbook
     helper Lookbook::ComponentHelper
 
     before_action :generate_theme_overrides
+    before_action :assign_collections
 
     def self.controller_path
       "lookbook"
@@ -28,6 +32,11 @@ module Lookbook
       @theme_overrides ||= Lookbook.theme.to_css
     end
 
+    def assign_collections
+      @previews = Preview.all
+      @pages = Page.all
+    end
+
     def feature_enabled?(feature)
       Lookbook::Features.enabled?(feature)
     end

data/app/controllers/lookbook/pages_controller.rb

@@ -18,7 +18,6 @@ module Lookbook
     end
 
     def show
-      @pages = Lookbook.pages
       @page = @pages.find_by_path(params[:path])
       if @page
         @next_page = @pages.find_next(@page)

data/app/controllers/lookbook/previews_controller.rb

@@ -13,7 +13,7 @@ module Lookbook
     before_action :set_params
 
     def preview
-      if @example
+      if @target
         begin
           opts = {layout: @preview.layout}
           if params[:lookbook_embed] == "true"
@@ -32,7 +32,7 @@ module Lookbook
     end
 
     def show
-      if @example
+      if @target
         begin
           @main_panels = main_panels
           @drawer_panels = drawer_panels
@@ -52,9 +52,9 @@ module Lookbook
     private
 
     def lookup_entities
-      @example = Lookbook.previews.find_example(params[:path])
-      if @example.present?
-        @preview = @example.preview
+      @target = Lookbook.previews.find_example(params[:path])
+      if @target.present?
+        @preview = @target.preview
         if params[:path] == @preview&.lookup_path
           redirect_to lookbook_inspect_path "#{params[:path]}/#{@preview.default_example.name}"
         end
@@ -85,17 +85,17 @@ module Lookbook
     end
 
     def target_examples
-      @example.type == :group ? @example.examples : [@example]
+      @target.type == :group ? @target.examples : [@target]
     end
 
     def set_title
-      @title = @example.present? ? [@example&.label, @preview&.label].compact.join(" :: ") : "Not found"
+      @title = @target.present? ? [@target&.label, @preview&.label].compact.join(" :: ") : "Not found"
     end
 
     def set_params
-      if @example
+      if @target
         # cast known params to type
-        @example.params.each do |param|
+        @target.params.each do |param|
           if preview_controller.params.key?(param[:name])
             preview_controller.params[param[:name]] = Lookbook::Params.cast(preview_controller.params[param[:name]], param[:type])
           end
@@ -103,7 +103,7 @@ module Lookbook
         # set display and data params
         preview_controller.params.merge!({
           lookbook: {
-            display: @example.display_params,
+            display: @target.display_params,
             data: Lookbook.data
           }
         })
@@ -113,7 +113,7 @@ module Lookbook
     def preview_params
       preview_controller.params.permit!
       preview_controller.params.to_h.select do |key, value|
-        !!@example.params.find { |param| param[:name] == key }
+        !!@target.params.find { |param| param[:name] == key }
       end
     end
 
@@ -125,12 +125,7 @@ module Lookbook
         path: params[:path]
       }
 
-      example = @example
       preview = @preview
-      preview.define_singleton_method(:params, proc {
-        example.params
-      })
-
       examples = target_examples.map do |example|
         render_args = @preview.render_args(example.name, params: preview_controller.params)
         has_template = render_args[:template] != "view_components/preview"
@@ -144,11 +139,18 @@ module Lookbook
         example
       end
 
+      target = @target.type == :group ? @target : examples.find { |e| e.lookup_path == @target.lookup_path }
+
+      preview.define_singleton_method(:params, proc {
+        target.params
+      })
+
       @inspector_data ||= Lookbook::Store.new({
         context: context_data,
         preview: preview,
         examples: examples,
-        example: example,
+        example: examples.first,
+        target: target,
         data: Lookbook.data,
         app: Lookbook
       })
@@ -156,22 +158,25 @@ module Lookbook
 
     def panels
       return @panels if @panels.present?
-      @panels = []
-      Lookbook.config.inspector_panels.each do |name, config|
+      inspector_data_hash = inspector_data.to_h
+      panel_counts = {}
+
+      @panels = Lookbook.config.inspector_panels.map do |name, config|
         config_with_defaults = Lookbook.config.inspector_panel_defaults.merge(config)
+        panel_counts[config_with_defaults[:pane].to_sym] ||= 0
+        panel_counts[config_with_defaults[:pane].to_sym] += 1
 
         callable_data = {
           name: name.to_s,
-          index_position: (@panels.count { |p| p.pane == config.pane } + 1),
-          **inspector_data
+          index_position: panel_counts[config_with_defaults[:pane].to_sym],
+          **inspector_data_hash
         }
 
         resolved_config = config_with_defaults.transform_values do |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)
+        Store.new(resolved_config)
       end
 
       @panels = @panels.select(&:show).sort_by { |p| [p.position, p.label] }
@@ -198,7 +203,7 @@ module Lookbook
         {
           file_path: @preview&.full_path,
           line_number: 0,
-          source_code: @example&.source
+          source_code: @target&.source
         }
       elsif exception.is_a?(ActionView::Template::Error) & exception.message.include?("implements a reserved method")
         message_parts = exception.message.split("\n").first.split

data/app/helpers/lookbook/component_helper.rb

@@ -6,6 +6,11 @@ module Lookbook
       render Lookbook::Icon::Component.new(name: name, **attrs)
     end
 
+    def code(language = :html, **attrs, &block)
+      attrs[:language] ||= language
+      render Lookbook::Code::Component.new(**attrs), &block
+    end
+
     def render_component(ref, **attrs, &block)
       klass = component_class(ref)
       comp = attrs.key?(:content) ? klass.new(**attrs.except(:content)).with_content(attrs[:content]) : klass.new(**attrs)

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

@@ -1,5 +1,5 @@
 <% content_for :shell do %>
-  <% if Lookbook.previews? || Lookbook.pages? %>
+  <% if @previews.any? || @pages.any? %>
     <%= render_component :split_layout,
       alpine_data: "$store.layout.main",
       ":class": "$store.layout.mobile && '!block'" do |layout| %>
@@ -14,14 +14,14 @@
         cloak: true do %>
 
         <%= render_component :split_layout,
-          alpine_data: "$store.layout.#{Lookbook.pages? && Lookbook.previews? ? "sidebar" : "singleSectionSidebar"}",
+          alpine_data: "$store.layout.#{@pages.any? && @previews.any? ? "sidebar" : "singleSectionSidebar"}",
           style: "height: calc(100vh - 2.5rem);" do |layout| %>
 
-          <% if Lookbook.previews? %>
+          <% if @previews.any? %>
             <% layout.pane class: "overflow-hidden" do %>
               <%= render_component :nav,
                 id: "previews-nav",
-                collection: Lookbook.previews,
+                collection: @previews,
                 alpine_data: "$store.nav.previews",
                 collapse_singles: true do |nav| %>
                 <%= nav.toolbar do |toolbar| %>
@@ -34,11 +34,11 @@
             <% end %>
           <% end %>
 
-          <% if Lookbook.pages? %>
+          <% if @pages.any? %>
             <% layout.pane class: "overflow-hidden" do %>
               <%= render_component :nav,
                 id: "pages-nav",
-                collection: Lookbook.pages,
+                collection: @pages,
                 alpine_data: "$store.nav.pages" do |nav| %>
                 <%= nav.toolbar do |toolbar| %>
                   <% toolbar.section padded: true do %>
@@ -49,36 +49,6 @@
             <% end %>
           <% end %>
         <% end %>
-
-        <% if Lookbook::Preview.errors.any? %>
-          <div x-data="{hidden: false}" class="flex-none border-t border-lookbook-divider absolute bottom-0 left-0 right-0" x-show="!hidden">
-            <%= render_component :toolbar do |toolbar| %>
-              <% toolbar.section padded: true, class: "flex items-center" do %>
-                <%= icon  :alert_triangle, size: 4, class: "text-red-700" %>
-                <span class="ml-2">Preview load errors</span>
-              <% end %>
-              <% toolbar.section align: :right do %>
-                <% render_component :button, icon: :x, "@click": "hidden = !hidden" %>
-              <% end %>
-            <% end %>
-
-            <div class="h-full max-h-[300px] overflow-hidden">
-              <div class="bg-red-50 w-full overflow-auto h-full">
-                <ul class="text-sm divide-y divide-red-200">
-                  <% Lookbook::Preview.errors.each do |error| %>
-                    <% error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error) %>
-                    <li class="px-4 py-3">
-                      <h4 class="break-all leading-tight text-xs ">
-                        <%= error.file_name %><%= ":#{error.line_number}" if error.line_number %>
-                      </h4>
-                      <pre class="text-red-800 text-xs mt-2 whitespace-pre-wrap opacity-80 font-mono"><%= error.message %></pre>
-                    </li>
-                  <% end %>
-                </ul>
-              </div>
-            </div>
-          </div>
-        <% end %>
       <% end %>
 
       <% layout.pane id: "app-main", class: "overflow-hidden h-full", ":class": "$store.layout.mobile && 'w-screen'" do %>

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

@@ -1,13 +1,13 @@
 <div id="landing" class="flex flex-col items-center justify-center h-full w-full">
-  <div class="text-center" id="landing-<%= Lookbook.previews? ? "with" : "no" %>-content">
+  <div class="text-center" id="landing-<%= @previews.any? ? "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? %>
+      <% if @previews.any? %>
         <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>
+        <p><a class="underline" href="https://lookbook.build/guide/previews" target="_blank">Create a preview</a> to get started.</p>
       <% end %>
     </div>
   </div>

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

@@ -25,11 +25,11 @@
 
       <% toolbar.section divide: :left, class: "flex-none relative z-10" do %>
         <%= render_component :button_group do |group| %>
-          <% if Lookbook.pages.any? %>
+          <% if @pages.any? %>
             <% group.button icon: :code,
               tooltip: "Copy page embed code",
               copy: true do %>
-                &lt;%= embed <%= @preview.preview_class %>, :<%= @example.name %>, params: <%= request.query_parameters.deep_symbolize_keys.to_s %> %&gt;
+                &lt;%= embed <%= @preview.preview_class %>, :<%= @target.name %>, params: <%= request.query_parameters.deep_symbolize_keys.to_s %> %&gt;
             <% end %>
           <% end %>
           
@@ -38,7 +38,7 @@
             "@click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
 
           <% group.button icon: :external_link,
-            href: lookbook_preview_path(@example.lookup_path, request.query_parameters),
+            href: lookbook_preview_path(@target.lookup_path, request.query_parameters),
             tooltip: "Open preview in new window",
             target: "_blank" %>
 

data/config/routes.rb

@@ -1,6 +1,6 @@
 Lookbook::Engine.routes.draw do
-  if Lookbook.config.auto_refresh
-    mount Lookbook::Engine.websocket => Lookbook.config.cable_mount_path
+  if Lookbook::Engine.websocket?
+    mount Lookbook::Engine.websocket => Lookbook.config.cable_mount_path, :as => :cable
   end
 
   root to: "application#index", as: :lookbook_home

data/lib/lookbook/component.rb

@@ -11,6 +11,10 @@ module Lookbook
       name.underscore
     end
 
+    def rel_path
+      Pathname.new("#{path}.rb")
+    end
+
     def full_path
       Pathname.new("#{Lookbook.config.components_path}/#{path}.rb")
     end