lookbook 1.0.0 → 1.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +4 -4
  3. data/app/assets/lookbook/js/app.js +1 -0
  4. data/app/assets/lookbook/js/lib/socket.js +9 -5
  5. data/app/components/lookbook/base_component.rb +10 -2
  6. data/app/components/lookbook/copy_button/component.rb +1 -1
  7. data/app/components/lookbook/dimensions_display/component.rb +1 -4
  8. data/app/components/lookbook/embed/component.html.erb +5 -5
  9. data/app/components/lookbook/embed/component.rb +2 -2
  10. data/app/components/lookbook/header/component.html.erb +4 -4
  11. data/app/components/lookbook/icon/component.html.erb +1 -1
  12. data/app/components/lookbook/icon/component.rb +1 -5
  13. data/app/components/lookbook/inspector_panel/component.rb +1 -2
  14. data/app/components/lookbook/nav/component.html.erb +1 -1
  15. data/app/components/lookbook/nav/item/component.rb +2 -2
  16. data/app/components/lookbook/params_editor/field/component.rb +1 -1
  17. data/app/components/lookbook/tabs/component.js +2 -2
  18. data/app/controllers/lookbook/application_controller.rb +10 -1
  19. data/app/controllers/lookbook/pages_controller.rb +0 -1
  20. data/app/controllers/lookbook/previews_controller.rb +29 -24
  21. data/app/helpers/lookbook/component_helper.rb +5 -0
  22. data/app/views/layouts/lookbook/application.html.erb +6 -36
  23. data/app/views/lookbook/index.html.erb +3 -3
  24. data/app/views/lookbook/previews/show.html.erb +3 -3
  25. data/config/routes.rb +2 -2
  26. data/lib/lookbook/component.rb +4 -0
  27. data/lib/lookbook/config.rb +7 -3
  28. data/lib/lookbook/data.rb +2 -2
  29. data/lib/lookbook/engine.rb +80 -75
  30. data/lib/lookbook/page.rb +4 -4
  31. data/lib/lookbook/parser.rb +19 -11
  32. data/lib/lookbook/preview.rb +28 -78
  33. data/lib/lookbook/preview_controller.rb +19 -1
  34. data/lib/lookbook/preview_example.rb +12 -5
  35. data/lib/lookbook/source_inspector.rb +2 -2
  36. data/lib/lookbook/store.rb +2 -2
  37. data/lib/lookbook/version.rb +1 -1
  38. data/lib/tasks/lookbook_tasks.rake +1 -2
  39. data/public/lookbook-assets/css/lookbook.css +8 -34
  40. data/public/lookbook-assets/css/lookbook.css.map +1 -1
  41. data/public/lookbook-assets/js/lookbook.js +175 -121
  42. data/public/lookbook-assets/js/lookbook.js.map +1 -1
  43. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 5617d397419ae8b9e95fa6c53ceb94dd3a7dffe83ea1fae0f643f17f6c15b995
4
- data.tar.gz: 1fb037740def1192fa5aa9d0c076419dc06ed629996e7cc82ed741e7aefa000f
3
+ metadata.gz: 95694c758af19ee6a561b2aedfee93d932c663f7027471204da2dce393052a5a
4
+ data.tar.gz: 1b4f3e4af714af47b6719cbbef7a861ad0ca2341089e2689ef8ed80b9a745867
5
5
  SHA512:
6
- metadata.gz: a5710f8a40f7594bc4d9ac3347ca8c04102f708b50c21d96d1695b26ab4d6ccc23436e1288cea7d43516264260c31f091530cb15d3ea144707d2ae280442c333
7
- data.tar.gz: 1bfdcf6ce5bb68e2af399b5920ec821a73057e77aaf4732216da498b1745c5c8eb15b220ce56115dd8c14d757febe75315c2620c6c6c929b3e973d001a5b7797
6
+ metadata.gz: 0a148ae5b71546463c003244040e54de07106db6f927e61b77ff35c92d524f37ed59e53646833675a8d1c399968904ffe41891817e85628aa8da879af8aa3bd8
7
+ data.tar.gz: ee91d909da4634558dbf542802ee770c921f0dfdec0bdc37592977b082a97705957bf7e19cf5168b599e78dca1f5d4222147417262c4b41f90b305a43c2c4f72
data/README.md CHANGED
@@ -1,12 +1,12 @@
1
1
  # Lookbook
2
2
 
3
3
  <div>
4
- <a href="https://rubygems.org/gems/lookbook"><img src="https://img.shields.io/gem/v/lookbook?include_prereleases" alt="Gem version"></a>
4
+ <a href="https://rubygems.org/gems/lookbook"><img src="https://img.shields.io/gem/v/lookbook" alt="Gem version"></a>
5
5
  <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>
6
6
  </div>
7
7
  <br>
8
8
 
9
- A tool to help develop, test and document [ViewComponents](https://viewcomponent.org/) in isolation.
9
+ A tool to help browse, develop, test & document [ViewComponents](https://viewcomponent.org/) in Ruby on Rails apps.
10
10
 
11
11
  ## Documentation
12
12
 
@@ -17,9 +17,9 @@ A tool to help develop, test and document [ViewComponents](https://viewcomponent
17
17
 
18
18
  ## Demo
19
19
 
20
- **Online Demo:** [https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook](https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook)
20
+ **Online Demo:** [https://lookbook-demo-app.herokuapp.com/lookbook](https://lookbook-demo-app.herokuapp.com/lookbook)
21
21
 
22
- [![Lookbook UI](.github/assets/lookbook_screenshot_v1.0_beta.png)](https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook/)
22
+ [![Lookbook UI](.github/assets/lookbook_screenshot_v1.0_beta.png)](https://lookbook-demo-app.herokuapp.com/lookbook/)
23
23
 
24
24
 
25
25
  ## Development
@@ -11,6 +11,7 @@ export default function app() {
11
11
 
12
12
  init() {
13
13
  if (window.SOCKET_PATH) {
14
+ console.log("SOCKET CREATED");
14
15
  const socket = createSocket(window.SOCKET_PATH);
15
16
  socket.addListener("Lookbook::ReloadChannel", () => this.updateDOM());
16
17
  }
@@ -1,5 +1,5 @@
1
1
  import { createConsumer } from "@rails/actioncable";
2
- import debounce from "debounce";
2
+ import { debounce } from "throttle-debounce";
3
3
  import { log } from "../plugins/logger";
4
4
 
5
5
  export default function socket(endpoint) {
@@ -8,10 +8,14 @@ export default function socket(endpoint) {
8
8
  return {
9
9
  addListener(channel, callback) {
10
10
  consumer.subscriptions.create(channel, {
11
- received: debounce((data) => {
12
- log.debug("Lookbook files changed");
13
- callback(data);
14
- }, 200),
11
+ received: debounce(
12
+ 200,
13
+ (data) => {
14
+ log.debug("Lookbook files changed");
15
+ callback(data);
16
+ },
17
+ { atBegin: true }
18
+ ),
15
19
  connected() {
16
20
  log.info("Lookbook websocket connected");
17
21
  },
@@ -31,11 +31,19 @@ module Lookbook
31
31
  nil
32
32
  end
33
33
 
34
+ def alpine_encode(data)
35
+ if data.is_a? String
36
+ "\'#{json_escape data}\'"
37
+ else
38
+ json_escape data.to_json.tr("\"", "\'")
39
+ end
40
+ end
41
+
34
42
  def prepare_alpine_data(x_data = nil)
35
43
  alpine_component_name = x_data || @html_attrs&.dig(:"x-data") || alpine_component
36
44
  if alpine_component_name.present?
37
- args = Array.wrap(alpine_data)
38
- args.any? ? "#{alpine_component_name}(#{safe_join(args)})" : alpine_component_name
45
+ args = Array.wrap(alpine_data).compact
46
+ args.any? ? "#{alpine_component_name}(#{args.join(",")})" : alpine_component_name
39
47
  end
40
48
  end
41
49
  end
@@ -13,7 +13,7 @@ module Lookbook
13
13
  protected
14
14
 
15
15
  def alpine_data
16
- content ? nil : @target.to_json
16
+ content ? nil : alpine_encode(@target)
17
17
  end
18
18
 
19
19
  def alpine_component
@@ -2,15 +2,12 @@ module Lookbook
2
2
  class DimensionsDisplay::Component < Lookbook::BaseComponent
3
3
  def initialize(target:, **html_attrs)
4
4
  @target = target
5
+ @alpine_data = alpine_encode(@target)
5
6
  super(**html_attrs)
6
7
  end
7
8
 
8
9
  protected
9
10
 
10
- def alpine_data
11
- @target.to_json
12
- end
13
-
14
11
  def alpine_component
15
12
  "dimensionsDisplayComponent"
16
13
  end
@@ -1,19 +1,19 @@
1
- <% if @example.present? %>
1
+ <% if @target.present? %>
2
2
  <%= render_component_tag class: "not-prose border-b border-lookbook-divider rounded-sm overflow-hidden", "@navigation:start.window": "cleanup" do %>
3
3
 
4
4
  <%= render_component :toolbar, class: "border border-b-0 border-lookbook-divider" do |toolbar| %>
5
5
  <% toolbar.section padded: true do %>
6
6
  <h3>
7
- <%= @example.preview.label %> (<%= @example.label %>)
7
+ <%= @target.preview.label %> (<%= @target.label %>)
8
8
  </h3>
9
9
  <% end %>
10
10
  <% toolbar.section align: :right, divide: :left do %>
11
11
  <%= render_component :button_group do |group| %>
12
12
  <% group.button icon: :eye,
13
- href: lookbook_inspect_path(@example.path, @params),
13
+ href: lookbook_inspect_path(@target.path, @params),
14
14
  tooltip: "View in Inspector" %>
15
15
  <% group.button icon: :external_link,
16
- href: lookbook_preview_path(@example.path, @params),
16
+ href: lookbook_preview_path(@target.path, @params),
17
17
  tooltip: "Open in new window",
18
18
  target: "_blank" %>
19
19
  <% end %>
@@ -28,7 +28,7 @@
28
28
  @viewport:resize-complete="resizeIframe"
29
29
  @tabs:change.window="resizeIframe">
30
30
  <%= render_component :viewport,
31
- src: lookbook_preview_path(@example.path, @params.merge(lookbook_embed: true)),
31
+ src: lookbook_preview_path(@target.path, @params.merge(lookbook_embed: true)),
32
32
  alpine_data: "store",
33
33
  resize_height: false,
34
34
  max_height: @max_height,
@@ -2,7 +2,7 @@ module Lookbook
2
2
  class Embed::Component < Lookbook::BaseComponent
3
3
  def initialize(id:, example:, params: {}, opts: {}, max_height: nil, **html_attrs)
4
4
  @id = id
5
- @example = example
5
+ @target = example
6
6
  @params = params
7
7
  @opts = opts
8
8
  @max_height = max_height
@@ -20,7 +20,7 @@ module Lookbook
20
20
  end
21
21
 
22
22
  def alpine_data
23
- [@id.to_json, "$store.pages.embeds"].join(",")
23
+ [alpine_encode(@id), "$store.pages.embeds"].join(",")
24
24
  end
25
25
 
26
26
  def alpine_component
@@ -46,11 +46,11 @@
46
46
  <span class="opacity-70 mr-1">Lookbook</span>
47
47
  <span class="mr-6">v<%= Lookbook::VERSION %></span>
48
48
  <div class="flex items-center space-x-2">
49
- <!-- a href="https://github.com/allmarkedup/lookbook" target="_blank" class="ml-auto opacity-70" title="Documentation">
50
- <%= icon :book, size: 3 %>
51
- </a -->
49
+ <a href="https://lookbook.build/guide" target="_blank" class="ml-auto opacity-70" title="Documentation">
50
+ <%= icon :book, size: 3 %>
51
+ </a>
52
52
  <a href="https://github.com/allmarkedup/lookbook" target="_blank" class="ml-auto opacity-70" title="Github">
53
- <%= icon :github, size: 3 %>
53
+ <%= icon :github, size: 3 %>
54
54
  </a>
55
55
  </div>
56
56
  </div>
@@ -1,4 +1,4 @@
1
- <%= render_component_tag :i, style: "height: #{size_rems}; width: #{size_rems}" do %>
1
+ <%= render_component_tag :i, style: "height: #{size_rems}; width: #{size_rems}; #{@html_attrs[:style]}" do %>
2
2
  <svg>
3
3
  <use :href="`/lookbook-assets/feather-sprite.svg#${iconName}`" x-cloak />
4
4
  </svg>
@@ -1,7 +1,7 @@
1
1
  module Lookbook
2
2
  class Icon::Component < Lookbook::BaseComponent
3
3
  def initialize(name:, size: 4, **html_attrs)
4
- @icon_name = name.is_a?(Symbol) ? name.to_s.tr("_", "-").to_json : name
4
+ @alpine_data = name.is_a?(Symbol) ? alpine_encode(name.to_s.tr("_", "-")) : name
5
5
  @size = size || 4
6
6
  super(**html_attrs)
7
7
  end
@@ -12,10 +12,6 @@ module Lookbook
12
12
 
13
13
  protected
14
14
 
15
- def alpine_data
16
- @icon_name
17
- end
18
-
19
15
  def alpine_component
20
16
  "iconComponent"
21
17
  end
@@ -25,9 +25,8 @@ module Lookbook
25
25
  css_parser.each_selector do |selector, declarations, specificity|
26
26
  @panel_styles += "##{id} #{selector} { #{declarations} }\n"
27
27
  end
28
- style_tag.unlink
29
28
  end
30
- @panel_html = panel_dom.to_html.html_safe
29
+ @panel_html = content.gsub(/<style(?:\s[^>]*)?>.*<\/style>/, "").html_safe
31
30
  end
32
31
  end
33
32
  @panel_html ||= content
@@ -11,7 +11,7 @@
11
11
  </div>
12
12
  <% end %>
13
13
 
14
- <div class="overflow-auto">
14
+ <div class="overflow-auto h-full">
15
15
  <% if items.any? %>
16
16
  <ul class="py-2" x-ref="items" x-show="!empty" x-cloak>
17
17
  <%= safe_join(items) %>
@@ -78,10 +78,10 @@ module Lookbook
78
78
  protected
79
79
 
80
80
  def alpine_data
81
- {
81
+ alpine_encode({
82
82
  id: @item.id,
83
83
  matchers: item.is_a?(Lookbook::Collection) ? nil : item.matchers
84
- }.to_json
84
+ })
85
85
  end
86
86
 
87
87
  def alpine_component
@@ -33,7 +33,7 @@ module Lookbook
33
33
  protected
34
34
 
35
35
  def alpine_data
36
- escaped_value = helpers.raw json_escape(value.to_json)
36
+ escaped_value = json_escape(value.to_json)
37
37
  "{name: '#{name}', value: #{escaped_value}}"
38
38
  end
39
39
 
@@ -1,4 +1,4 @@
1
- import debounce from "debounce";
1
+ import { debounce } from "throttle-debounce";
2
2
  import tippy from "~/app/assets/lookbook/js/lib/tippy";
3
3
  import { observeSize } from "@helpers/layout";
4
4
  import { getElementSize } from "@helpers/dom";
@@ -49,7 +49,7 @@ export default function tabsComponent(store) {
49
49
 
50
50
  this.parentObserver = observeSize(
51
51
  this.$root.parentElement,
52
- debounce(this.handleResize.bind(this), 10)
52
+ debounce(10, this.handleResize.bind(this))
53
53
  );
54
54
 
55
55
  this.$watch("visibleTabsCount", (value) => {
@@ -1,6 +1,9 @@
1
1
  module Lookbook
2
2
  class ApplicationController < ActionController::Base
3
- content_security_policy false, if: -> { Rails.env.development? }
3
+ if respond_to?(:content_security_policy)
4
+ content_security_policy false, if: -> { Rails.env.development? }
5
+ end
6
+
4
7
  protect_from_forgery with: :exception
5
8
 
6
9
  helper Lookbook::ApplicationHelper
@@ -8,6 +11,7 @@ module Lookbook
8
11
  helper Lookbook::ComponentHelper
9
12
 
10
13
  before_action :generate_theme_overrides
14
+ before_action :assign_collections
11
15
 
12
16
  def self.controller_path
13
17
  "lookbook"
@@ -28,6 +32,11 @@ module Lookbook
28
32
  @theme_overrides ||= Lookbook.theme.to_css
29
33
  end
30
34
 
35
+ def assign_collections
36
+ @previews = Preview.all
37
+ @pages = Page.all
38
+ end
39
+
31
40
  def feature_enabled?(feature)
32
41
  Lookbook::Features.enabled?(feature)
33
42
  end
@@ -18,7 +18,6 @@ module Lookbook
18
18
  end
19
19
 
20
20
  def show
21
- @pages = Lookbook.pages
22
21
  @page = @pages.find_by_path(params[:path])
23
22
  if @page
24
23
  @next_page = @pages.find_next(@page)
@@ -13,7 +13,7 @@ module Lookbook
13
13
  before_action :set_params
14
14
 
15
15
  def preview
16
- if @example
16
+ if @target
17
17
  begin
18
18
  opts = {layout: @preview.layout}
19
19
  if params[:lookbook_embed] == "true"
@@ -32,7 +32,7 @@ module Lookbook
32
32
  end
33
33
 
34
34
  def show
35
- if @example
35
+ if @target
36
36
  begin
37
37
  @main_panels = main_panels
38
38
  @drawer_panels = drawer_panels
@@ -52,9 +52,9 @@ module Lookbook
52
52
  private
53
53
 
54
54
  def lookup_entities
55
- @example = Lookbook.previews.find_example(params[:path])
56
- if @example.present?
57
- @preview = @example.preview
55
+ @target = Lookbook.previews.find_example(params[:path])
56
+ if @target.present?
57
+ @preview = @target.preview
58
58
  if params[:path] == @preview&.lookup_path
59
59
  redirect_to lookbook_inspect_path "#{params[:path]}/#{@preview.default_example.name}"
60
60
  end
@@ -85,17 +85,17 @@ module Lookbook
85
85
  end
86
86
 
87
87
  def target_examples
88
- @example.type == :group ? @example.examples : [@example]
88
+ @target.type == :group ? @target.examples : [@target]
89
89
  end
90
90
 
91
91
  def set_title
92
- @title = @example.present? ? [@example&.label, @preview&.label].compact.join(" :: ") : "Not found"
92
+ @title = @target.present? ? [@target&.label, @preview&.label].compact.join(" :: ") : "Not found"
93
93
  end
94
94
 
95
95
  def set_params
96
- if @example
96
+ if @target
97
97
  # cast known params to type
98
- @example.params.each do |param|
98
+ @target.params.each do |param|
99
99
  if preview_controller.params.key?(param[:name])
100
100
  preview_controller.params[param[:name]] = Lookbook::Params.cast(preview_controller.params[param[:name]], param[:type])
101
101
  end
@@ -103,7 +103,7 @@ module Lookbook
103
103
  # set display and data params
104
104
  preview_controller.params.merge!({
105
105
  lookbook: {
106
- display: @example.display_params,
106
+ display: @target.display_params,
107
107
  data: Lookbook.data
108
108
  }
109
109
  })
@@ -113,7 +113,7 @@ module Lookbook
113
113
  def preview_params
114
114
  preview_controller.params.permit!
115
115
  preview_controller.params.to_h.select do |key, value|
116
- !!@example.params.find { |param| param[:name] == key }
116
+ !!@target.params.find { |param| param[:name] == key }
117
117
  end
118
118
  end
119
119
 
@@ -125,12 +125,7 @@ module Lookbook
125
125
  path: params[:path]
126
126
  }
127
127
 
128
- example = @example
129
128
  preview = @preview
130
- preview.define_singleton_method(:params, proc {
131
- example.params
132
- })
133
-
134
129
  examples = target_examples.map do |example|
135
130
  render_args = @preview.render_args(example.name, params: preview_controller.params)
136
131
  has_template = render_args[:template] != "view_components/preview"
@@ -144,11 +139,18 @@ module Lookbook
144
139
  example
145
140
  end
146
141
 
142
+ target = @target.type == :group ? @target : examples.find { |e| e.lookup_path == @target.lookup_path }
143
+
144
+ preview.define_singleton_method(:params, proc {
145
+ target.params
146
+ })
147
+
147
148
  @inspector_data ||= Lookbook::Store.new({
148
149
  context: context_data,
149
150
  preview: preview,
150
151
  examples: examples,
151
- example: example,
152
+ example: examples.first,
153
+ target: target,
152
154
  data: Lookbook.data,
153
155
  app: Lookbook
154
156
  })
@@ -156,22 +158,25 @@ module Lookbook
156
158
 
157
159
  def panels
158
160
  return @panels if @panels.present?
159
- @panels = []
160
- Lookbook.config.inspector_panels.each do |name, config|
161
+ inspector_data_hash = inspector_data.to_h
162
+ panel_counts = {}
163
+
164
+ @panels = Lookbook.config.inspector_panels.map do |name, config|
161
165
  config_with_defaults = Lookbook.config.inspector_panel_defaults.merge(config)
166
+ panel_counts[config_with_defaults[:pane].to_sym] ||= 0
167
+ panel_counts[config_with_defaults[:pane].to_sym] += 1
162
168
 
163
169
  callable_data = {
164
170
  name: name.to_s,
165
- index_position: (@panels.count { |p| p.pane == config.pane } + 1),
166
- **inspector_data
171
+ index_position: panel_counts[config_with_defaults[:pane].to_sym],
172
+ **inspector_data_hash
167
173
  }
168
174
 
169
175
  resolved_config = config_with_defaults.transform_values do |value|
170
176
  value.instance_of?(Proc) ? value.call(Lookbook::Store.new(callable_data)) : value
171
177
  end
172
178
  resolved_config[:name] = name.to_s
173
-
174
- @panels << Lookbook::Store.new(resolved_config, deep: false)
179
+ Store.new(resolved_config)
175
180
  end
176
181
 
177
182
  @panels = @panels.select(&:show).sort_by { |p| [p.position, p.label] }
@@ -198,7 +203,7 @@ module Lookbook
198
203
  {
199
204
  file_path: @preview&.full_path,
200
205
  line_number: 0,
201
- source_code: @example&.source
206
+ source_code: @target&.source
202
207
  }
203
208
  elsif exception.is_a?(ActionView::Template::Error) & exception.message.include?("implements a reserved method")
204
209
  message_parts = exception.message.split("\n").first.split
@@ -6,6 +6,11 @@ module Lookbook
6
6
  render Lookbook::Icon::Component.new(name: name, **attrs)
7
7
  end
8
8
 
9
+ def code(language = :html, **attrs, &block)
10
+ attrs[:language] ||= language
11
+ render Lookbook::Code::Component.new(**attrs), &block
12
+ end
13
+
9
14
  def render_component(ref, **attrs, &block)
10
15
  klass = component_class(ref)
11
16
  comp = attrs.key?(:content) ? klass.new(**attrs.except(:content)).with_content(attrs[:content]) : klass.new(**attrs)
@@ -1,5 +1,5 @@
1
1
  <% content_for :shell do %>
2
- <% if Lookbook.previews? || Lookbook.pages? %>
2
+ <% if @previews.any? || @pages.any? %>
3
3
  <%= render_component :split_layout,
4
4
  alpine_data: "$store.layout.main",
5
5
  ":class": "$store.layout.mobile && '!block'" do |layout| %>
@@ -14,14 +14,14 @@
14
14
  cloak: true do %>
15
15
 
16
16
  <%= render_component :split_layout,
17
- alpine_data: "$store.layout.#{Lookbook.pages? && Lookbook.previews? ? "sidebar" : "singleSectionSidebar"}",
17
+ alpine_data: "$store.layout.#{@pages.any? && @previews.any? ? "sidebar" : "singleSectionSidebar"}",
18
18
  style: "height: calc(100vh - 2.5rem);" do |layout| %>
19
19
 
20
- <% if Lookbook.previews? %>
20
+ <% if @previews.any? %>
21
21
  <% layout.pane class: "overflow-hidden" do %>
22
22
  <%= render_component :nav,
23
23
  id: "previews-nav",
24
- collection: Lookbook.previews,
24
+ collection: @previews,
25
25
  alpine_data: "$store.nav.previews",
26
26
  collapse_singles: true do |nav| %>
27
27
  <%= nav.toolbar do |toolbar| %>
@@ -34,11 +34,11 @@
34
34
  <% end %>
35
35
  <% end %>
36
36
 
37
- <% if Lookbook.pages? %>
37
+ <% if @pages.any? %>
38
38
  <% layout.pane class: "overflow-hidden" do %>
39
39
  <%= render_component :nav,
40
40
  id: "pages-nav",
41
- collection: Lookbook.pages,
41
+ collection: @pages,
42
42
  alpine_data: "$store.nav.pages" do |nav| %>
43
43
  <%= nav.toolbar do |toolbar| %>
44
44
  <% toolbar.section padded: true do %>
@@ -49,36 +49,6 @@
49
49
  <% end %>
50
50
  <% end %>
51
51
  <% end %>
52
-
53
- <% if Lookbook::Preview.errors.any? %>
54
- <div x-data="{hidden: false}" class="flex-none border-t border-lookbook-divider absolute bottom-0 left-0 right-0" x-show="!hidden">
55
- <%= render_component :toolbar do |toolbar| %>
56
- <% toolbar.section padded: true, class: "flex items-center" do %>
57
- <%= icon :alert_triangle, size: 4, class: "text-red-700" %>
58
- <span class="ml-2">Preview load errors</span>
59
- <% end %>
60
- <% toolbar.section align: :right do %>
61
- <% render_component :button, icon: :x, "@click": "hidden = !hidden" %>
62
- <% end %>
63
- <% end %>
64
-
65
- <div class="h-full max-h-[300px] overflow-hidden">
66
- <div class="bg-red-50 w-full overflow-auto h-full">
67
- <ul class="text-sm divide-y divide-red-200">
68
- <% Lookbook::Preview.errors.each do |error| %>
69
- <% error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error) %>
70
- <li class="px-4 py-3">
71
- <h4 class="break-all leading-tight text-xs ">
72
- <%= error.file_name %><%= ":#{error.line_number}" if error.line_number %>
73
- </h4>
74
- <pre class="text-red-800 text-xs mt-2 whitespace-pre-wrap opacity-80 font-mono"><%= error.message %></pre>
75
- </li>
76
- <% end %>
77
- </ul>
78
- </div>
79
- </div>
80
- </div>
81
- <% end %>
82
52
  <% end %>
83
53
 
84
54
  <% layout.pane id: "app-main", class: "overflow-hidden h-full", ":class": "$store.layout.mobile && 'w-screen'" do %>
@@ -1,13 +1,13 @@
1
1
  <div id="landing" class="flex flex-col items-center justify-center h-full w-full">
2
- <div class="text-center" id="landing-<%= Lookbook.previews? ? "with" : "no" %>-content">
2
+ <div class="text-center" id="landing-<%= @previews.any? ? "with" : "no" %>-content">
3
3
  <h5 class="text-base text-lookbook-blank-slate-title truncate uppercase font-black tracking-wider mb-2">
4
4
  <%= config.project_name %>
5
5
  </h5>
6
6
  <div class="opacity-60">
7
- <% if Lookbook.previews? %>
7
+ <% if @previews.any? %>
8
8
  <p>Select a preview from the nav to get started.</p>
9
9
  <% else %>
10
- <p><a class="underline" href="https://beta.lookbook.build/guide/previews" target="_blank">Create a preview</a> to get started.</p>
10
+ <p><a class="underline" href="https://lookbook.build/guide/previews" target="_blank">Create a preview</a> to get started.</p>
11
11
  <% end %>
12
12
  </div>
13
13
  </div>
@@ -25,11 +25,11 @@
25
25
 
26
26
  <% toolbar.section divide: :left, class: "flex-none relative z-10" do %>
27
27
  <%= render_component :button_group do |group| %>
28
- <% if Lookbook.pages.any? %>
28
+ <% if @pages.any? %>
29
29
  <% group.button icon: :code,
30
30
  tooltip: "Copy page embed code",
31
31
  copy: true do %>
32
- &lt;%= embed <%= @preview.preview_class %>, :<%= @example.name %>, params: <%= request.query_parameters.deep_symbolize_keys.to_s %> %&gt;
32
+ &lt;%= embed <%= @preview.preview_class %>, :<%= @target.name %>, params: <%= request.query_parameters.deep_symbolize_keys.to_s %> %&gt;
33
33
  <% end %>
34
34
  <% end %>
35
35
 
@@ -38,7 +38,7 @@
38
38
  "@click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
39
39
 
40
40
  <% group.button icon: :external_link,
41
- href: lookbook_preview_path(@example.lookup_path, request.query_parameters),
41
+ href: lookbook_preview_path(@target.lookup_path, request.query_parameters),
42
42
  tooltip: "Open preview in new window",
43
43
  target: "_blank" %>
44
44
 
data/config/routes.rb CHANGED
@@ -1,6 +1,6 @@
1
1
  Lookbook::Engine.routes.draw do
2
- if Lookbook.config.auto_refresh
3
- mount Lookbook::Engine.websocket => Lookbook.config.cable_mount_path
2
+ if Lookbook::Engine.websocket?
3
+ mount Lookbook::Engine.websocket => Lookbook.config.cable_mount_path, :as => :cable
4
4
  end
5
5
 
6
6
  root to: "application#index", as: :lookbook_home
@@ -11,6 +11,10 @@ module Lookbook
11
11
  name.underscore
12
12
  end
13
13
 
14
+ def rel_path
15
+ Pathname.new("#{path}.rb")
16
+ end
17
+
14
18
  def full_path
15
19
  Pathname.new("#{Lookbook.config.components_path}/#{path}.rb")
16
20
  end