lookbook 1.4.5 → 1.5.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +4 -4
- data/app/components/lookbook/display_options/editor/component.html.erb +1 -1
- data/app/components/lookbook/embed/component.html.erb +4 -4
- data/app/components/lookbook/header/component.html.erb +6 -6
- data/app/components/lookbook/tabs/component.rb +1 -1
- data/app/components/lookbook/viewport/component.html.erb +2 -1
- data/app/controllers/concerns/lookbook/targetable_concern.rb +3 -2
- data/app/controllers/lookbook/application_controller.rb +1 -0
- data/app/controllers/lookbook/previews_controller.rb +38 -0
- data/app/helpers/lookbook/page_helper.rb +0 -2
- data/app/views/layouts/lookbook/application.html.erb +14 -14
- data/app/views/layouts/lookbook/shell.html.erb +1 -1
- data/app/views/lookbook/inspector/panels/_params.html.erb +1 -1
- data/app/views/lookbook/inspector/show.html.erb +23 -23
- data/app/views/lookbook/pages/show.html.erb +1 -1
- data/app/views/lookbook/preview.html.erb +1 -1
- data/config/routes.rb +1 -0
- data/lib/lookbook/engine.rb +10 -0
- data/lib/lookbook/entities/preview_example.rb +4 -0
- data/lib/lookbook/entities/preview_group.rb +4 -0
- data/lib/lookbook/error.rb +1 -1
- data/lib/lookbook/services/markdown_renderer.rb +1 -5
- data/lib/lookbook/version.rb +1 -1
- data/public/lookbook-assets/css/lookbook.css +357 -355
- data/public/lookbook-assets/css/lookbook.css.map +1 -1
- data/public/lookbook-assets/js/embed.js +32 -31
- data/public/lookbook-assets/js/embed.js.map +1 -1
- data/public/lookbook-assets/js/lookbook.js +519 -403
- data/public/lookbook-assets/js/lookbook.js.map +1 -1
- metadata +11 -5
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 7f540f127ea326803394a4fb256d8ec3f27a9f7564f003d075b5e3b70ccd0ff2
|
4
|
+
data.tar.gz: 7987f3e5caaeb9cc8ebd3e0a38fc3b2735ba3c894207320b612e15075441ac5e
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 4984fbeb06a7ba811cb45a0253fb9391f238c1fbe48e8cb4d2f8b32166e5551c08a9df6116b737423af6ecdd90d13bd91317189d962fc174b32e16b848f21f26
|
7
|
+
data.tar.gz: aadc14cb2bc965a03fbed65fb6824b898449567fc09574974dd4edde3c317fe52ef5ba989b9039f291a34c6ad0673471f22c9b2ce5869567a3e684d78fbdfbbe
|
data/README.md
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
<br>
|
2
|
-
<img src=".github/assets/lookbook_logo.svg" width="180">
|
2
|
+
<img alt="Lookbook Logo" src=".github/assets/lookbook_logo.svg" width="180">
|
3
3
|
|
4
4
|
A tool to help browse, develop, test & document [ViewComponents](https://viewcomponent.org/) in Ruby on Rails apps.
|
5
5
|
|
@@ -25,7 +25,7 @@ A tool to help browse, develop, test & document [ViewComponents](https://viewcom
|
|
25
25
|
|
26
26
|
## Development
|
27
27
|
|
28
|
-
Lookbook is implemented as an isolated [Rails Engine](https://guides.rubyonrails.org/engines.html) and uses [ViewComponent](https://viewcomponent.org), [Tailwind](https://tailwindcss.com/) and [Alpine](https://alpinejs.dev/) for
|
28
|
+
Lookbook is implemented as an isolated [Rails Engine](https://guides.rubyonrails.org/engines.html) and uses [ViewComponent](https://viewcomponent.org), [Tailwind](https://tailwindcss.com/) and [Alpine](https://alpinejs.dev/) for its UI.
|
29
29
|
|
30
30
|
This repository contains:
|
31
31
|
|
@@ -78,9 +78,9 @@ Lookbook was created by [Mark Perkins](https://github.com/allmarkedup) and conti
|
|
78
78
|
<br>
|
79
79
|
<br>
|
80
80
|
<a href="https://github.com/ViewComponent/lookbook/graphs/contributors">
|
81
|
-
<img src="https://contrib.rocks/image?repo=ViewComponent/lookbook&columns=14" width="800" />
|
81
|
+
<img alt="Lookbook contributors" src="https://contrib.rocks/image?repo=ViewComponent/lookbook&columns=14" width="800" />
|
82
82
|
</a>
|
83
83
|
|
84
84
|
## License
|
85
85
|
|
86
|
-
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
86
|
+
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
@@ -1,7 +1,7 @@
|
|
1
1
|
<%= render_component_tag class: "px-2" do %>
|
2
2
|
<% if fields.many? %>
|
3
3
|
<%= lookbook_render :button, icon: :settings, tooltip: "Display options" do |button| %>
|
4
|
-
<% button.
|
4
|
+
<% button.with_dropdown do %>
|
5
5
|
<div class="p-3 space-y-3">
|
6
6
|
<%= safe_join(fields) %>
|
7
7
|
</div>
|
@@ -2,17 +2,17 @@
|
|
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
|
<%= lookbook_render :toolbar, class: "border border-b-0 border-lookbook-divider" do |toolbar| %>
|
5
|
-
<% toolbar.
|
5
|
+
<% toolbar.with_section padded: true do %>
|
6
6
|
<h3>
|
7
7
|
<%= @target.preview.label %> (<%= @target.label %>)
|
8
8
|
</h3>
|
9
9
|
<% end %>
|
10
|
-
<% toolbar.
|
10
|
+
<% toolbar.with_section align: :right, divide: :left do %>
|
11
11
|
<%= lookbook_render :button_group do |group| %>
|
12
|
-
<% group.
|
12
|
+
<% group.with_button icon: :eye,
|
13
13
|
href: lookbook_inspect_path(@target.path, @params),
|
14
14
|
tooltip: "View in Inspector" %>
|
15
|
-
<% group.
|
15
|
+
<% group.with_button icon: :external_link,
|
16
16
|
href: lookbook_preview_path(@target.path, @params),
|
17
17
|
tooltip: "Open in new window",
|
18
18
|
target: "_blank" %>
|
@@ -1,6 +1,6 @@
|
|
1
1
|
<%= render_component_tag :header do %>
|
2
2
|
<%= lookbook_render :toolbar, class: "!bg-lookbook-header-bg !text-lookbook-header-text !border-lookbook-header-border" do |toolbar| %>
|
3
|
-
<% toolbar.
|
3
|
+
<% toolbar.with_section padded: true do %>
|
4
4
|
<% if branding.present? %>
|
5
5
|
<a
|
6
6
|
<% if landing_path %>href="<%= landing_path %>"<% end %>
|
@@ -10,7 +10,7 @@
|
|
10
10
|
<% end %>
|
11
11
|
<% end %>
|
12
12
|
|
13
|
-
<% toolbar.
|
13
|
+
<% toolbar.with_section padded: false, align: :right, class: "flex items-center" do %>
|
14
14
|
|
15
15
|
<div x-show="loading" x-cloak>
|
16
16
|
<svg class="animate-spin h-3.5 w-3.5 text-lookbook-header-text opacity-60" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
@@ -21,23 +21,23 @@
|
|
21
21
|
|
22
22
|
<%= lookbook_render :button_group do |group| %>
|
23
23
|
<% if @debug_menu %>
|
24
|
-
<% group.
|
24
|
+
<% group.with_button icon: :help_circle, class: "opacity-50 hover:opacity-100 transition !text-lookbook-header-text", "x-show": "!loading" do |button| %>
|
25
25
|
<% menu = lookbook_render :debug_menu,
|
26
26
|
version: Lookbook::VERSION,
|
27
27
|
docs_url: "https://lookbook.build/guide",
|
28
28
|
repo_url: "https://github.com/ViewComponent/lookbook" do %>
|
29
29
|
<%= helpers.pretty_json(Lookbook.debug_data) %>
|
30
30
|
<% end %>
|
31
|
-
<% button.
|
31
|
+
<% button.with_dropdown({}).with_content(menu) %>
|
32
32
|
<% end %>
|
33
33
|
<% end %>
|
34
34
|
|
35
|
-
<% group.
|
35
|
+
<% group.with_button icon: :menu,
|
36
36
|
"@click.stop": "toggleSidebar",
|
37
37
|
"x-show": "$store.layout.mobile && sidebarHidden",
|
38
38
|
class: "!text-lookbook-header-text" %>
|
39
39
|
|
40
|
-
<% group.
|
40
|
+
<% group.with_button icon: :x,
|
41
41
|
"@click.stop": "toggleSidebar",
|
42
42
|
"x-show": "$store.layout.mobile && !sidebarHidden",
|
43
43
|
"@keydown.esc.window": "closeMobileSidebar",
|
@@ -32,7 +32,8 @@
|
|
32
32
|
style="<%= "max-height: #{@max_height}px;" if @max_height.present? %>"
|
33
33
|
src="<%= @src %>"
|
34
34
|
frameborder="0"
|
35
|
-
@load="$dispatch('viewport:loaded', {viewport: this})"
|
35
|
+
@load="$dispatch('viewport:loaded', {viewport: this})"
|
36
|
+
title="viewport"></iframe>
|
36
37
|
<% if @resize_width %>
|
37
38
|
<div
|
38
39
|
class="resize-handle border-r border-t border-lookbook-divider cursor-[col-resize] <%= "border-b" unless @resize_height %>"
|
@@ -44,14 +44,15 @@ module Lookbook
|
|
44
44
|
display_params = SearchParamParser.call(params[:_display])
|
45
45
|
display_params.each do |name, value|
|
46
46
|
if @dynamic_display_options.key?(name)
|
47
|
-
cookies["lookbook-display-#{name}"] = value
|
47
|
+
cookies["lookbook-display-#{name}"] = value.is_a?(Array) ? value[1] : value
|
48
48
|
end
|
49
49
|
end
|
50
50
|
end
|
51
51
|
|
52
52
|
@dynamic_display_options.each do |name, opts|
|
53
53
|
choices = opts.is_a?(Hash) ? opts[:choices].to_a : opts
|
54
|
-
|
54
|
+
value = choices.first.is_a?(Array) ? choices.first[1] : choices.first
|
55
|
+
@static_display_options[name] ||= cookies.fetch("lookbook-display-#{name}", value)
|
55
56
|
end
|
56
57
|
|
57
58
|
unless params[:_display]
|
@@ -3,6 +3,8 @@ module Lookbook
|
|
3
3
|
include TargetableConcern
|
4
4
|
include WithPreviewControllerConcern
|
5
5
|
|
6
|
+
before_action { response.headers.delete("X-Frame-Options") }
|
7
|
+
|
6
8
|
layout "lookbook/inspector"
|
7
9
|
helper Lookbook::PreviewHelper
|
8
10
|
|
@@ -10,6 +12,31 @@ module Lookbook
|
|
10
12
|
"lookbook/previews"
|
11
13
|
end
|
12
14
|
|
15
|
+
def index
|
16
|
+
respond_to do |format|
|
17
|
+
format.json do
|
18
|
+
render(
|
19
|
+
json: Lookbook.previews.map do |preview|
|
20
|
+
{
|
21
|
+
name: preview.name,
|
22
|
+
examples: preview.examples.map { |example|
|
23
|
+
case example
|
24
|
+
when Lookbook::PreviewExample
|
25
|
+
example_json(example)
|
26
|
+
when Lookbook::PreviewGroup
|
27
|
+
{
|
28
|
+
name: example.name,
|
29
|
+
examples: example.examples.map { |ex| example_json(ex) }
|
30
|
+
}
|
31
|
+
end
|
32
|
+
}
|
33
|
+
}
|
34
|
+
end
|
35
|
+
)
|
36
|
+
end
|
37
|
+
end
|
38
|
+
end
|
39
|
+
|
13
40
|
def show
|
14
41
|
if @target
|
15
42
|
begin
|
@@ -28,5 +55,16 @@ module Lookbook
|
|
28
55
|
show_404 layout: "lookbook/standalone"
|
29
56
|
end
|
30
57
|
end
|
58
|
+
|
59
|
+
private
|
60
|
+
|
61
|
+
def example_json(example)
|
62
|
+
{
|
63
|
+
inspect_path: example.url_path,
|
64
|
+
name: example.name,
|
65
|
+
preview_path: example.preview_path,
|
66
|
+
lookup_path: example.lookup_path
|
67
|
+
}
|
68
|
+
end
|
31
69
|
end
|
32
70
|
end
|
@@ -5,7 +5,7 @@
|
|
5
5
|
alpine_data: "$store.layout.main",
|
6
6
|
":class": "$store.layout.mobile && '!block'" do |layout| %>
|
7
7
|
|
8
|
-
<% layout.
|
8
|
+
<% layout.with_pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar-bg relative translate-x-0",
|
9
9
|
":class": "{
|
10
10
|
'transition': $store.layout.mobile,
|
11
11
|
'translate-x-full': $store.layout.mobile && sidebarHidden,
|
@@ -13,47 +13,47 @@
|
|
13
13
|
}",
|
14
14
|
"@click.outside": "closeMobileSidebar",
|
15
15
|
cloak: true do %>
|
16
|
-
<% cache do %>
|
16
|
+
<% cache Lookbook::Engine.last_changed do %>
|
17
17
|
<%= lookbook_render :split_layout,
|
18
18
|
alpine_data: "$store.layout.#{@pages.any? && @previews.any? ? "sidebar" : "singleSectionSidebar"}",
|
19
19
|
style: "height: calc(100vh - 2.5rem);" do |layout| %>
|
20
20
|
|
21
21
|
<% if @previews.any? %>
|
22
|
-
<% layout.
|
22
|
+
<% layout.with_pane class: "overflow-hidden" do %>
|
23
23
|
<%= lookbook_render :nav,
|
24
24
|
id: "previews-nav",
|
25
25
|
tree: @previews.to_tree,
|
26
26
|
alpine_data: "$store.nav.previews" do |nav| %>
|
27
|
-
<%= nav.
|
28
|
-
<% toolbar.
|
27
|
+
<%= nav.with_toolbar do |toolbar| %>
|
28
|
+
<% toolbar.with_section padded: true do %>
|
29
29
|
<h4 class="pt-1">Previews</h4>
|
30
30
|
<% end %>
|
31
|
-
<% toolbar.
|
31
|
+
<% toolbar.with_section align: :right, padded: false do %>
|
32
32
|
<%= lookbook_render :button_group, size: :xs do |group| %>
|
33
|
-
<% group.
|
33
|
+
<% group.with_button icon: :minus_square,
|
34
34
|
tooltip: "Collapse all",
|
35
35
|
"@click": "closeAll" %>
|
36
36
|
<% end %>
|
37
37
|
<% end %>
|
38
38
|
<% end %>
|
39
|
-
<% nav.
|
39
|
+
<% nav.with_filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name…" %>
|
40
40
|
<% end %>
|
41
41
|
<% end %>
|
42
42
|
<% end %>
|
43
43
|
|
44
44
|
<% if @pages.any? %>
|
45
|
-
<% layout.
|
45
|
+
<% layout.with_pane class: "overflow-hidden" do %>
|
46
46
|
<%= lookbook_render :nav,
|
47
47
|
id: "pages-nav",
|
48
48
|
tree: @pages.to_tree,
|
49
49
|
alpine_data: "$store.nav.pages" do |nav| %>
|
50
|
-
<%= nav.
|
51
|
-
<% toolbar.
|
50
|
+
<%= nav.with_toolbar do |toolbar| %>
|
51
|
+
<% toolbar.with_section padded: true do %>
|
52
52
|
<h4 class="pt-1">Pages</h4>
|
53
53
|
<% end %>
|
54
|
-
<% toolbar.
|
54
|
+
<% toolbar.with_section align: :right, padded: false do %>
|
55
55
|
<%= lookbook_render :button_group, size: :xs do |group| %>
|
56
|
-
<% group.
|
56
|
+
<% group.with_button icon: :minus_square,
|
57
57
|
tooltip: "Collapse all",
|
58
58
|
"@click": "closeAll" %>
|
59
59
|
<% end %>
|
@@ -66,7 +66,7 @@
|
|
66
66
|
<% end %>
|
67
67
|
<% end %>
|
68
68
|
|
69
|
-
<% layout.
|
69
|
+
<% layout.with_pane id: "app-main", class: "overflow-hidden h-full", ":class": "$store.layout.mobile && 'w-screen'" do %>
|
70
70
|
<%= content_for?(:main) ? yield(:main) : yield %>
|
71
71
|
<% end %>
|
72
72
|
<% end %>
|
@@ -15,7 +15,7 @@
|
|
15
15
|
<% end %>
|
16
16
|
|
17
17
|
<%= lookbook_render :header, id: "app-header", debug_menu: @config.debug_menu do |header| %>
|
18
|
-
<% header.
|
18
|
+
<% header.with_branding { @config.project_name } %>
|
19
19
|
<% end %>
|
20
20
|
|
21
21
|
<%= content_for?(:shell) ? yield(:shell) : yield %>
|
@@ -8,7 +8,7 @@
|
|
8
8
|
<div class="p-4 w-full h-full overflow-x-hidden" id="params-editor-<%= @target.id %>">
|
9
9
|
<%= lookbook_render "params/editor" do |editor| %>
|
10
10
|
<% @params.each do |param| %>
|
11
|
-
<% editor.
|
11
|
+
<% editor.with_field param: param %>
|
12
12
|
<% end %>
|
13
13
|
<% end %>
|
14
14
|
</div>
|
@@ -5,14 +5,14 @@
|
|
5
5
|
"preview-target": @target.id
|
6
6
|
} do |layout| %>
|
7
7
|
|
8
|
-
<%= layout.
|
8
|
+
<%= layout.with_pane class: "flex flex-col h-full overflow-hidden",
|
9
9
|
"x-effect": "forceOrientation = (layoutWidth < $store.inspector.minVerticalSplitWidth) ? 'horizontal' : null" do %>
|
10
10
|
|
11
11
|
<%= lookbook_render :toolbar, id: "main-toolbar" do |toolbar| %>
|
12
|
-
<% toolbar.
|
12
|
+
<% toolbar.with_section ":class": "layoutResizing && 'overflow-hidden'" do %>
|
13
13
|
<%= lookbook_render :tabs, alpine_data: "$store.inspector.main", id: "inspector-tabs-main" do |tabs| %>
|
14
14
|
<%= @main_panels.each do |panel| %>
|
15
|
-
<% tabs.
|
15
|
+
<% tabs.with_tab name: panel.name,
|
16
16
|
label: panel.label,
|
17
17
|
hotkey: panel.hotkey,
|
18
18
|
disabled: panel.disabled %>
|
@@ -20,42 +20,42 @@
|
|
20
20
|
<% end %>
|
21
21
|
<% end %>
|
22
22
|
|
23
|
-
<% toolbar.
|
23
|
+
<% toolbar.with_section align: :right, class: "flex-none" do %>
|
24
24
|
<% if @dynamic_display_options.any? %>
|
25
25
|
<%= lookbook_render "display_options/editor" do |editor| %>
|
26
26
|
<% @dynamic_display_options.each do |key, opts| %>
|
27
|
-
<% editor.
|
27
|
+
<% editor.with_field name: key, opts: opts, value: @static_display_options[key] %>
|
28
28
|
<% end %>
|
29
29
|
<% end %>
|
30
30
|
<% end %>
|
31
31
|
<% end %>
|
32
32
|
|
33
|
-
<% toolbar.
|
33
|
+
<% toolbar.with_section divide: :left, class: "flex-none relative z-10" do %>
|
34
34
|
<%= lookbook_render :button_group do |group| %>
|
35
|
-
<% group.
|
35
|
+
<% group.with_button icon: :link,
|
36
36
|
tooltip: "Copy preview URL",
|
37
37
|
copy: true do %>
|
38
38
|
<%= lookbook_inspect_url(@target.lookup_path, request.query_parameters) %>
|
39
39
|
<% end %>
|
40
40
|
|
41
41
|
<% if @pages.any? %>
|
42
|
-
<% group.
|
42
|
+
<% group.with_button icon: :code,
|
43
43
|
tooltip: "Copy page embed code",
|
44
44
|
copy: true do %>
|
45
45
|
<%= embed <%= @preview.preview_class_name %>, :<%= @target.name %>, params: <%= request.query_parameters.deep_symbolize_keys.to_s %> %>
|
46
46
|
<% end %>
|
47
47
|
<% end %>
|
48
48
|
|
49
|
-
<% group.
|
49
|
+
<% group.with_button icon: :refresh_cw,
|
50
50
|
tooltip: "Refresh preview",
|
51
51
|
"@click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
|
52
52
|
|
53
|
-
<% group.
|
53
|
+
<% group.with_button icon: :external_link,
|
54
54
|
href: lookbook_preview_path(@target.lookup_path, request.query_parameters),
|
55
55
|
tooltip: "Open preview in new window",
|
56
56
|
target: "_blank" %>
|
57
57
|
|
58
|
-
<% group.
|
58
|
+
<% group.with_button icon: "vertical ? 'sidebar' : 'credit-card'",
|
59
59
|
tooltip: "Show drawer",
|
60
60
|
"@click": "$store.inspector.drawer.hidden = false",
|
61
61
|
class: "rotate-180",
|
@@ -68,7 +68,7 @@
|
|
68
68
|
<div class="h-full relative overflow-auto">
|
69
69
|
<%= lookbook_render :tab_panels, alpine_data: "$store.inspector.main", id: "inspector-panels-main" do |tabs| %>
|
70
70
|
<% @main_panels.each do |panel| %>
|
71
|
-
<% tabs.
|
71
|
+
<% tabs.with_panel name: panel.name do %>
|
72
72
|
<%= lookbook_render :inspector_panel, name: panel.name do %>
|
73
73
|
<%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
|
74
74
|
<% end %>
|
@@ -78,14 +78,14 @@
|
|
78
78
|
</div>
|
79
79
|
<% end %>
|
80
80
|
|
81
|
-
<%= layout.
|
81
|
+
<%= layout.with_pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer-bg",
|
82
82
|
"x-show": "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>
|
83
83
|
|
84
84
|
<%= lookbook_render :toolbar, id: "drawer-toolbar" do |toolbar| %>
|
85
|
-
<% toolbar.
|
85
|
+
<% toolbar.with_section ":class": "layoutResizing && 'overflow-hidden'" do %>
|
86
86
|
<%= lookbook_render :tabs, alpine_data: "$store.inspector.drawer", id: "inspector-tabs-drawer" do |tabs| %>
|
87
87
|
<%= @drawer_panels.each do |panel| %>
|
88
|
-
<% tabs.
|
88
|
+
<% tabs.with_tab name: panel.name,
|
89
89
|
label: panel.label,
|
90
90
|
hotkey: panel.hotkey,
|
91
91
|
disabled: panel.disabled %>
|
@@ -93,10 +93,10 @@
|
|
93
93
|
<% end %>
|
94
94
|
<% end %>
|
95
95
|
|
96
|
-
<% toolbar.
|
96
|
+
<% toolbar.with_section align: :right, class: "flex-none relative z-10" do %>
|
97
97
|
<%= lookbook_render :button_group do |group| %>
|
98
98
|
<%= @drawer_panels.select { |p| !p.disabled && p.copy }.each do |panel| %>
|
99
|
-
<% group.
|
99
|
+
<% group.with_button icon: :copy,
|
100
100
|
tooltip: "Copy panel contents",
|
101
101
|
copy: !!panel.copy,
|
102
102
|
"x-show": "$store.inspector.drawer.activeTab === '#{panel.name}'",
|
@@ -107,27 +107,27 @@
|
|
107
107
|
<% end %>
|
108
108
|
<% end %>
|
109
109
|
|
110
|
-
<% toolbar.
|
110
|
+
<% toolbar.with_section divide: :left, class: "flex-none relative z-10" do %>
|
111
111
|
<%= lookbook_render :button_group do |group| %>
|
112
112
|
|
113
|
-
<% group.
|
113
|
+
<% group.with_button icon: :corner_up_right,
|
114
114
|
tooltip: "Move drawer to right",
|
115
115
|
"@click": "switchOrientation",
|
116
116
|
"x-show": "horizontal && layoutWidth > $store.inspector.minVerticalSplitWidth",
|
117
117
|
cloak: true %>
|
118
118
|
|
119
|
-
<% group.
|
119
|
+
<% group.with_button icon: :corner_up_right,
|
120
120
|
"x-show": "horizontal && layoutWidth <= $store.inspector.minVerticalSplitWidth",
|
121
121
|
disabled: true,
|
122
122
|
cloak: true %>
|
123
123
|
|
124
|
-
<% group.
|
124
|
+
<% group.with_button icon: :corner_left_down,
|
125
125
|
tooltip: "Move drawer to bottom",
|
126
126
|
"@click": "switchOrientation",
|
127
127
|
"x-show": "vertical",
|
128
128
|
cloak: true %>
|
129
129
|
|
130
|
-
<% group.
|
130
|
+
<% group.with_button icon: :x_circle,
|
131
131
|
tooltip: "Hide drawer",
|
132
132
|
"@click": "$store.inspector.drawer.hidden = true",
|
133
133
|
cloak: true %>
|
@@ -138,7 +138,7 @@
|
|
138
138
|
<div class="h-full overflow-auto">
|
139
139
|
<%= lookbook_render :tab_panels, alpine_data: "$store.inspector.drawer", id: "inspector-panels-drawer" do |tabs| %>
|
140
140
|
<% @drawer_panels.each do |panel| %>
|
141
|
-
<% tabs.
|
141
|
+
<% tabs.with_panel name: panel.name do %>
|
142
142
|
<%= lookbook_render :inspector_panel, name: panel.name do %>
|
143
143
|
<%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
|
144
144
|
<% end %>
|
@@ -13,7 +13,7 @@
|
|
13
13
|
<% if @page.sections.any? %>
|
14
14
|
<%= lookbook_render :page_tabs, id: "page-tabbed-sections", markdown: false, class: "mt-6" do |page_tabs| %>
|
15
15
|
<% @page.sections.each do |section| %>
|
16
|
-
<% page_tabs.
|
16
|
+
<% page_tabs.with_tab name: "page-section-#{section.name}", label: section.label do %>
|
17
17
|
<%= page_controller.render_page(section) %>
|
18
18
|
<% end %>
|
19
19
|
<% end %>
|
@@ -2,7 +2,7 @@
|
|
2
2
|
<%# Render a group of examples %>
|
3
3
|
<% examples.each do |example| %>
|
4
4
|
<div style="margin-bottom: 30px !important; display: block !important;">
|
5
|
-
<h6 style="all: unset; display: block; color: #
|
5
|
+
<h6 style="all: unset; display: block; color: #555; font-family: sans-serif; font-size: 14px; margin-top: 0; margin-bottom: 10px;">
|
6
6
|
<%= example.label %>
|
7
7
|
</h6>
|
8
8
|
<%= example.output %>
|
data/config/routes.rb
CHANGED
@@ -8,6 +8,7 @@ Lookbook::Engine.routes.draw do
|
|
8
8
|
get "/#{Lookbook.config.page_route}", to: "pages#index", as: :lookbook_page_index
|
9
9
|
get "/#{Lookbook.config.page_route}/*path", to: "pages#show", as: :lookbook_page
|
10
10
|
|
11
|
+
get "/previews", to: "previews#index", as: :lookbook_previews
|
11
12
|
get "/preview/*path", to: "previews#show", as: :lookbook_preview
|
12
13
|
get "/inspect/*path", to: "inspector#show", as: :lookbook_inspect
|
13
14
|
|
data/lib/lookbook/engine.rb
CHANGED
@@ -43,6 +43,7 @@ module Lookbook
|
|
43
43
|
initializer "lookbook.file_watcher.pages" do
|
44
44
|
file_watcher.watch(opts.page_paths, opts.page_extensions) do |changes|
|
45
45
|
Engine.pages.load(Engine.page_paths)
|
46
|
+
Engine.mark_changed
|
46
47
|
Engine.websocket.broadcast(:reload)
|
47
48
|
run_hooks(:after_change, changes)
|
48
49
|
end
|
@@ -51,6 +52,7 @@ module Lookbook
|
|
51
52
|
initializer "lookbook.parser.previews_load_callback" do
|
52
53
|
parser.after_parse do |code_objects|
|
53
54
|
Engine.previews.load(code_objects.all(:class))
|
55
|
+
Engine.mark_changed
|
54
56
|
Engine.websocket.broadcast(:reload)
|
55
57
|
end
|
56
58
|
end
|
@@ -168,6 +170,14 @@ module Lookbook
|
|
168
170
|
@_previews ||= PreviewCollection.new
|
169
171
|
end
|
170
172
|
|
173
|
+
def mark_changed
|
174
|
+
@_last_changed = nil
|
175
|
+
end
|
176
|
+
|
177
|
+
def last_changed
|
178
|
+
@_last_changed ||= (Time.now.to_f * 1000).to_i
|
179
|
+
end
|
180
|
+
|
171
181
|
attr_reader :preview_controller
|
172
182
|
end
|
173
183
|
|
data/lib/lookbook/error.rb
CHANGED
@@ -18,11 +18,7 @@ module Lookbook
|
|
18
18
|
class LookbookMarkdownRenderer < Redcarpet::Render::HTML
|
19
19
|
def block_code(code, language = "ruby")
|
20
20
|
line_numbers = language.to_s.end_with? "-numbered"
|
21
|
-
ApplicationController.render(Lookbook::Code::Component.new(
|
22
|
-
source: code,
|
23
|
-
language: language.to_s.chomp("-numbered"),
|
24
|
-
line_numbers: line_numbers
|
25
|
-
}), layout: nil)
|
21
|
+
ApplicationController.render(Lookbook::Code::Component.new(source: code, language: language.to_s.chomp("-numbered"), line_numbers: line_numbers), layout: nil)
|
26
22
|
end
|
27
23
|
end
|
28
24
|
end
|
data/lib/lookbook/version.rb
CHANGED