lookbook 0.8.0 → 1.0.0.beta.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +43 -830
- data/app/assets/lookbook/css/lookbook.css +55 -0
- data/app/assets/lookbook/css/themes/blue.css +42 -0
- data/app/assets/lookbook/css/themes/indigo.css +42 -0
- data/app/assets/lookbook/css/themes/zinc.css +42 -0
- data/app/assets/lookbook/css/{tooltip_theme.css → tooltip.css} +14 -8
- data/app/assets/lookbook/js/app.js +64 -61
- data/app/assets/lookbook/js/components/clipboard.js +47 -0
- data/app/assets/lookbook/js/components/tooltip.js +30 -0
- data/app/assets/lookbook/js/config.js +7 -4
- data/app/assets/lookbook/js/helpers/build.js +22 -0
- data/app/assets/lookbook/js/helpers/dom.js +45 -0
- data/app/assets/lookbook/js/helpers/layout.js +21 -0
- data/app/assets/lookbook/js/helpers/request.js +16 -0
- data/app/assets/lookbook/js/helpers/string.js +11 -0
- data/app/assets/lookbook/js/lib/socket.js +4 -3
- data/app/assets/lookbook/js/lib/tippy.js +8 -0
- data/app/assets/lookbook/js/lookbook.js +61 -0
- data/app/assets/lookbook/js/plugins/logger.js +39 -0
- data/app/assets/lookbook/js/stores/filter.js +2 -2
- data/app/assets/lookbook/js/stores/inspector.js +22 -16
- data/app/assets/lookbook/js/stores/layout.js +101 -5
- data/app/assets/lookbook/js/stores/nav.js +17 -16
- data/app/assets/lookbook/js/stores/pages.js +4 -2
- data/app/assets/lookbook/js/stores/settings.js +7 -0
- data/app/assets/lookbook/js/stores/workbench.js +29 -0
- data/app/components/lookbook/button/component.html.erb +28 -0
- data/app/components/lookbook/button/component.js +55 -0
- data/app/components/lookbook/button/component.rb +39 -0
- data/app/components/lookbook/button_group/component.html.erb +3 -0
- data/app/components/lookbook/button_group/component.rb +18 -0
- data/app/components/lookbook/code/component.css +57 -0
- data/app/components/lookbook/code/component.html.erb +10 -0
- data/app/components/lookbook/code/component.js +3 -0
- data/app/components/lookbook/code/component.rb +56 -0
- data/app/components/lookbook/code/highlight_github_light.css +217 -0
- data/app/components/lookbook/component.rb +41 -0
- data/app/components/lookbook/copy_button/component.html.erb +11 -0
- data/app/components/lookbook/copy_button/component.js +16 -0
- data/app/components/lookbook/copy_button/component.rb +23 -0
- data/app/components/lookbook/dimensions_display/component.html.erb +10 -0
- data/app/components/lookbook/dimensions_display/component.js +30 -0
- data/app/components/lookbook/dimensions_display/component.rb +18 -0
- data/app/components/lookbook/embed/component.html.erb +50 -0
- data/app/components/lookbook/embed/component.js +39 -0
- data/app/components/lookbook/embed/component.rb +22 -0
- data/app/components/lookbook/filter/component.html.erb +17 -0
- data/app/components/lookbook/filter/component.js +21 -0
- data/app/components/lookbook/filter/component.rb +15 -0
- data/app/components/lookbook/header/component.html.erb +79 -0
- data/app/components/lookbook/header/component.rb +9 -0
- data/app/components/lookbook/icon/component.css +11 -0
- data/app/components/lookbook/icon/component.html.erb +5 -0
- data/app/components/lookbook/icon/component.js +5 -0
- data/app/components/lookbook/icon/component.rb +23 -0
- data/app/components/lookbook/nav/component.html.erb +33 -0
- data/app/components/lookbook/nav/component.js +52 -0
- data/app/components/lookbook/nav/component.rb +37 -0
- data/app/components/lookbook/nav/item/component.html.erb +23 -0
- data/app/components/lookbook/nav/item/component.js +66 -0
- data/app/components/lookbook/nav/item/component.rb +84 -0
- data/app/components/lookbook/params_editor/component.html.erb +3 -0
- data/app/components/lookbook/params_editor/component.js +12 -0
- data/app/components/lookbook/params_editor/component.rb +11 -0
- data/app/components/lookbook/params_editor/field/component.html.erb +50 -0
- data/app/components/lookbook/params_editor/field/component.js +36 -0
- data/app/components/lookbook/params_editor/field/component.rb +41 -0
- data/app/components/lookbook/prose/component.css +12 -0
- data/app/components/lookbook/prose/component.html.erb +3 -0
- data/app/components/lookbook/prose/component.rb +26 -0
- data/app/components/lookbook/split_layout/component.html.erb +13 -0
- data/app/components/lookbook/split_layout/component.js +151 -0
- data/app/components/lookbook/split_layout/component.rb +11 -0
- data/app/components/lookbook/tabbed_content/component.html.erb +5 -0
- data/app/components/lookbook/tabbed_content/component.js +21 -0
- data/app/components/lookbook/tabbed_content/component.rb +20 -0
- data/app/components/lookbook/tabbed_content/section/component.html.erb +8 -0
- data/app/components/lookbook/tabbed_content/section/component.rb +9 -0
- data/app/components/lookbook/tabs/component.css +8 -0
- data/app/components/lookbook/tabs/component.html.erb +14 -0
- data/app/components/lookbook/tabs/component.js +107 -0
- data/app/components/lookbook/tabs/component.rb +30 -0
- data/app/components/lookbook/tabs/dropdown_tab/component.html.erb +14 -0
- data/app/components/lookbook/tabs/dropdown_tab/component.rb +16 -0
- data/app/components/lookbook/tabs/tab/component.html.erb +18 -0
- data/app/components/lookbook/tabs/tab/component.rb +16 -0
- data/app/components/lookbook/tag_component.rb +29 -0
- data/app/components/lookbook/toolbar/component.css +16 -0
- data/app/components/lookbook/toolbar/component.html.erb +5 -0
- data/app/components/lookbook/toolbar/component.rb +26 -0
- data/app/components/lookbook/viewport/component.css +11 -0
- data/app/components/lookbook/viewport/component.html.erb +57 -0
- data/app/{assets/lookbook/js/components/preview-window.js → components/lookbook/viewport/component.js} +57 -14
- data/app/components/lookbook/viewport/component.rb +21 -0
- data/app/controllers/lookbook/application_controller.rb +16 -5
- data/app/controllers/lookbook/pages_controller.rb +18 -8
- data/app/controllers/lookbook/previews_controller.rb +60 -23
- data/app/helpers/lookbook/application_helper.rb +5 -1
- data/app/helpers/lookbook/component_helper.rb +22 -10
- data/app/helpers/lookbook/output_helper.rb +8 -4
- data/app/helpers/lookbook/page_helper.rb +13 -21
- data/app/views/layouts/lookbook/application.html.erb +76 -28
- data/app/views/layouts/lookbook/inspector.html.erb +7 -0
- data/app/views/layouts/lookbook/page.html.erb +53 -0
- data/app/views/layouts/lookbook/shell.html.erb +64 -0
- data/app/views/layouts/lookbook/skeleton.html.erb +27 -10
- data/app/views/layouts/lookbook/standalone.html.erb +5 -0
- data/app/views/lookbook/404.html.erb +15 -0
- data/app/views/lookbook/error.html.erb +34 -34
- data/app/views/lookbook/index.html.erb +11 -6
- data/app/views/lookbook/pages/show.html.erb +29 -67
- data/app/views/{layouts/lookbook → lookbook}/preview.html.erb +3 -5
- data/app/views/lookbook/previews/panels/_notes.html.erb +19 -25
- data/app/views/lookbook/previews/panels/_output.html.erb +7 -18
- data/app/views/lookbook/previews/panels/_params.html.erb +13 -15
- data/app/views/lookbook/previews/panels/_preview.html.erb +6 -52
- data/app/views/lookbook/previews/panels/_source.html.erb +7 -16
- data/app/views/lookbook/previews/show.html.erb +130 -24
- data/config/routes.rb +5 -5
- data/lib/lookbook/code_formatter.rb +37 -13
- data/lib/lookbook/collection.rb +19 -16
- data/lib/lookbook/config.rb +125 -0
- data/lib/lookbook/engine.rb +79 -74
- data/lib/lookbook/entity.rb +47 -0
- data/lib/lookbook/error.rb +1 -2
- data/lib/lookbook/features.rb +1 -1
- data/lib/lookbook/markdown.rb +3 -4
- data/lib/lookbook/page.rb +21 -12
- data/lib/lookbook/page_collection.rb +8 -0
- data/lib/lookbook/params.rb +15 -4
- data/lib/lookbook/preview.rb +15 -6
- data/lib/lookbook/preview_collection.rb +8 -0
- data/lib/lookbook/preview_controller.rb +6 -2
- data/lib/lookbook/preview_example.rb +5 -6
- data/lib/lookbook/preview_group.rb +4 -9
- data/lib/lookbook/{code_inspector.rb → source_inspector.rb} +2 -2
- data/lib/lookbook/theme.rb +22 -0
- data/lib/lookbook/utils.rb +10 -2
- data/lib/lookbook/version.rb +1 -1
- data/lib/lookbook.rb +4 -1
- data/lib/tasks/lookbook_tasks.rake +12 -0
- data/public/lookbook-assets/css/app.css +2340 -1
- data/public/lookbook-assets/css/app.css.map +11 -1
- data/public/lookbook-assets/css/lookbook.css +3040 -0
- data/public/lookbook-assets/css/lookbook.css.map +1 -0
- data/public/lookbook-assets/css/themes/blue.css +44 -0
- data/public/lookbook-assets/css/themes/blue.css.map +1 -0
- data/public/lookbook-assets/css/themes/indigo.css +44 -0
- data/public/lookbook-assets/css/themes/indigo.css.map +1 -0
- data/public/lookbook-assets/css/themes/zinc.css +44 -0
- data/public/lookbook-assets/css/themes/zinc.css.map +1 -0
- data/public/lookbook-assets/js/app.js +10861 -1
- data/public/lookbook-assets/js/app.js.map +2571 -1
- data/public/lookbook-assets/js/embed.js +895 -1
- data/public/lookbook-assets/js/embed.js.map +1 -1
- data/public/lookbook-assets/js/lookbook.js +13529 -0
- data/public/lookbook-assets/js/lookbook.js.map +1 -0
- metadata +127 -114
- data/app/assets/lookbook/css/app.css +0 -161
- data/app/assets/lookbook/css/code_theme.css +0 -214
- data/app/assets/lookbook/js/components/app.js +0 -55
- data/app/assets/lookbook/js/components/code.js +0 -5
- data/app/assets/lookbook/js/components/copy.js +0 -20
- data/app/assets/lookbook/js/components/embed.js +0 -89
- data/app/assets/lookbook/js/components/filter.js +0 -35
- data/app/assets/lookbook/js/components/inspector.js +0 -66
- data/app/assets/lookbook/js/components/nav-group.js +0 -47
- data/app/assets/lookbook/js/components/nav-item.js +0 -29
- data/app/assets/lookbook/js/components/nav.js +0 -28
- data/app/assets/lookbook/js/components/page.js +0 -25
- data/app/assets/lookbook/js/components/param.js +0 -34
- data/app/assets/lookbook/js/components/sidebar.js +0 -18
- data/app/assets/lookbook/js/components/sizes.js +0 -16
- data/app/assets/lookbook/js/components/splitter.js +0 -25
- data/app/assets/lookbook/js/components/tabs.js +0 -52
- data/app/assets/lookbook/js/lib/split.js +0 -15
- data/app/assets/lookbook/js/stores/sidebar.js +0 -26
- data/app/views/layouts/lookbook/basic.html.erb +0 -7
- data/app/views/lookbook/components/_branding.html.erb +0 -8
- data/app/views/lookbook/components/_code.html.erb +0 -17
- data/app/views/lookbook/components/_copy_button.html.erb +0 -11
- data/app/views/lookbook/components/_drawer.html.erb +0 -112
- data/app/views/lookbook/components/_embed.html.erb +0 -39
- data/app/views/lookbook/components/_errors.html.erb +0 -13
- data/app/views/lookbook/components/_filter.html.erb +0 -18
- data/app/views/lookbook/components/_header.html.erb +0 -6
- data/app/views/lookbook/components/_icon.html.erb +0 -5
- data/app/views/lookbook/components/_nav.html.erb +0 -16
- data/app/views/lookbook/components/_nav_collection.html.erb +0 -5
- data/app/views/lookbook/components/_nav_group.html.erb +0 -14
- data/app/views/lookbook/components/_nav_item.html.erb +0 -24
- data/app/views/lookbook/components/_nav_page.html.erb +0 -22
- data/app/views/lookbook/components/_nav_preview.html.erb +0 -13
- data/app/views/lookbook/components/_not_found.html.erb +0 -11
- data/app/views/lookbook/components/_param.html.erb +0 -21
- data/app/views/lookbook/components/_preview.html.erb +0 -77
- data/app/views/lookbook/components/_sidebar.html.erb +0 -69
- data/app/views/lookbook/pages/not_found.html.erb +0 -15
- data/app/views/lookbook/previews/error.html.erb +0 -1
- data/app/views/lookbook/previews/inputs/_select.html.erb +0 -7
- data/app/views/lookbook/previews/inputs/_text.html.erb +0 -8
- data/app/views/lookbook/previews/inputs/_textarea.html.erb +0 -8
- data/app/views/lookbook/previews/inputs/_toggle.html.erb +0 -13
- data/app/views/lookbook/previews/not_found.html.erb +0 -23
@@ -1,5 +1,7 @@
|
|
1
1
|
module Lookbook
|
2
2
|
class PagesController < ApplicationController
|
3
|
+
layout "lookbook/page"
|
4
|
+
|
3
5
|
def self.controller_path
|
4
6
|
"lookbook/pages"
|
5
7
|
end
|
@@ -9,8 +11,7 @@ module Lookbook
|
|
9
11
|
if landing.present?
|
10
12
|
redirect_to page_path landing.lookup_path
|
11
13
|
else
|
12
|
-
|
13
|
-
render "not_found"
|
14
|
+
show_404
|
14
15
|
end
|
15
16
|
end
|
16
17
|
|
@@ -18,27 +19,36 @@ module Lookbook
|
|
18
19
|
@pages = Lookbook.pages
|
19
20
|
@page = @pages.find_by_path(params[:path])
|
20
21
|
if @page
|
22
|
+
@next_page = @pages.find_next(@page)
|
23
|
+
@previous_page = @pages.find_previous(@page)
|
21
24
|
if @page.errors.any?
|
22
|
-
|
25
|
+
render_in_layout "lookbook/error",
|
26
|
+
layout: "lookbook/page",
|
27
|
+
error: @page.errors.first
|
23
28
|
else
|
24
29
|
begin
|
25
30
|
@page_content = page_controller.render_page(@page)
|
26
|
-
@next_page = @pages.find_next(@page)
|
27
|
-
@previous_page = @pages.find_previous(@page)
|
28
31
|
@title = @page.title
|
29
32
|
rescue => exception
|
30
|
-
|
33
|
+
render_in_layout "lookbook/error",
|
34
|
+
layout: "lookbook/page",
|
31
35
|
error: Lookbook::Error.new(exception, file_path: @page.full_path, source_code: @page.content)
|
32
|
-
}
|
33
36
|
end
|
34
37
|
end
|
35
38
|
else
|
36
|
-
|
39
|
+
show_404
|
37
40
|
end
|
38
41
|
end
|
39
42
|
|
40
43
|
protected
|
41
44
|
|
45
|
+
def show_404
|
46
|
+
render "lookbook/404", locals: {
|
47
|
+
message: "Page not found",
|
48
|
+
description: "The page may have been removed or renamed."
|
49
|
+
}
|
50
|
+
end
|
51
|
+
|
42
52
|
def page_controller
|
43
53
|
controller_class = Lookbook.config.page_controller.constantize
|
44
54
|
controller = controller_class.new
|
@@ -1,5 +1,7 @@
|
|
1
1
|
module Lookbook
|
2
2
|
class PreviewsController < ApplicationController
|
3
|
+
layout "lookbook/inspector"
|
4
|
+
|
3
5
|
def self.controller_path
|
4
6
|
"lookbook/previews"
|
5
7
|
end
|
@@ -14,12 +16,11 @@ module Lookbook
|
|
14
16
|
render html: render_examples(examples_data)
|
15
17
|
rescue => exception
|
16
18
|
render_in_layout "lookbook/error",
|
17
|
-
layout: "lookbook/
|
18
|
-
error: prettify_error(exception)
|
19
|
-
disable_header: true
|
19
|
+
layout: "lookbook/standalone",
|
20
|
+
error: prettify_error(exception)
|
20
21
|
end
|
21
22
|
else
|
22
|
-
|
23
|
+
show_404 layout: "lookbook/standalone"
|
23
24
|
end
|
24
25
|
end
|
25
26
|
|
@@ -27,30 +28,55 @@ module Lookbook
|
|
27
28
|
if @example
|
28
29
|
begin
|
29
30
|
set_params
|
30
|
-
@
|
31
|
+
@rendered_examples = examples_data
|
31
32
|
@drawer_panels = drawer_panels.filter { |name, panel| panel[:show] }
|
32
33
|
@preview_panels = preview_panels.filter { |name, panel| panel[:show] }
|
33
34
|
rescue => exception
|
34
|
-
render_in_layout "lookbook/error", error: prettify_error(exception)
|
35
|
+
render_in_layout "lookbook/error", layout: "lookbook/inspector", error: prettify_error(exception)
|
35
36
|
end
|
36
37
|
else
|
37
|
-
|
38
|
+
show_404
|
38
39
|
end
|
39
40
|
end
|
40
41
|
|
42
|
+
def show_legacy
|
43
|
+
Lookbook.logger.warn("Legacy URL path detected. These paths are deprecated and will be removed in a future version")
|
44
|
+
redirect_to inspect_path params[:path]
|
45
|
+
end
|
46
|
+
|
41
47
|
private
|
42
48
|
|
43
49
|
def lookup_entities
|
44
50
|
@example = Lookbook.previews.find_example(params[:path])
|
45
|
-
if @example
|
51
|
+
if @example.present?
|
46
52
|
@preview = @example.preview
|
47
53
|
if params[:path] == @preview&.lookup_path
|
48
|
-
redirect_to
|
54
|
+
redirect_to inspect_path "#{params[:path]}/#{@preview.default_example.name}"
|
55
|
+
end
|
56
|
+
else
|
57
|
+
@preview = Lookbook.previews.find(params[:path])
|
58
|
+
if @preview.present?
|
59
|
+
first_example = @preview.examples.first
|
60
|
+
redirect_to inspect_path(first_example.lookup_path) if first_example
|
61
|
+
else
|
62
|
+
@preview = Lookbook.previews.find(path_segments.slice(0, path_segments.size - 1).join("/"))
|
49
63
|
end
|
64
|
+
end
|
65
|
+
end
|
66
|
+
|
67
|
+
def show_404(layout: nil)
|
68
|
+
locals = if @preview
|
69
|
+
{
|
70
|
+
message: "Example not found",
|
71
|
+
description: "The '#{@preview.label}' preview does not have an example named '#{path_segments.last}'."
|
72
|
+
}
|
50
73
|
else
|
51
|
-
|
52
|
-
|
74
|
+
{
|
75
|
+
message: "Not found",
|
76
|
+
description: "Looked for '#{params[:path]}'.<br>The preview may have been renamed or deleted."
|
77
|
+
}
|
53
78
|
end
|
79
|
+
render_in_layout "lookbook/404", layout: layout, **locals
|
54
80
|
end
|
55
81
|
|
56
82
|
def set_title
|
@@ -72,12 +98,17 @@ module Lookbook
|
|
72
98
|
html: preview_controller.process(:render_example_to_string, @preview, example.name),
|
73
99
|
source: has_template ? example.template_source(render_args[:template]) : example.method_source,
|
74
100
|
source_lang: has_template ? example.template_lang(render_args[:template]) : example.source_lang,
|
75
|
-
params: example.params
|
101
|
+
params: example.params,
|
102
|
+
display: example.display_params
|
76
103
|
}
|
77
104
|
end
|
78
105
|
|
79
106
|
def render_examples(examples)
|
80
|
-
|
107
|
+
opts = {layout: @preview.layout}
|
108
|
+
if params[:lookbook_embed] == "true"
|
109
|
+
opts[:append_html] = "<script src=\"/lookbook-assets/js/embed.js?v=#{Lookbook.version}\"></script>".html_safe
|
110
|
+
end
|
111
|
+
preview_controller.process(:render_in_layout_to_string, "lookbook/preview", {examples: examples}, **opts)
|
81
112
|
end
|
82
113
|
|
83
114
|
def set_params
|
@@ -99,21 +130,22 @@ module Lookbook
|
|
99
130
|
def preview_panels
|
100
131
|
{
|
101
132
|
preview: {
|
133
|
+
id: "preview-panel-preview",
|
102
134
|
label: "Preview",
|
103
135
|
template: "lookbook/previews/panels/preview",
|
104
|
-
srcdoc: Lookbook.config.preview_srcdoc ? render_examples(examples_data).gsub("\"", """) : nil,
|
105
136
|
hotkey: "v",
|
106
137
|
show: true,
|
107
138
|
disabled: false,
|
108
139
|
copy: false
|
109
140
|
},
|
110
141
|
output: {
|
142
|
+
id: "preview-panel-html",
|
111
143
|
label: "HTML",
|
112
144
|
template: "lookbook/previews/panels/output",
|
113
|
-
hotkey: "
|
145
|
+
hotkey: "h",
|
114
146
|
show: true,
|
115
147
|
disabled: false,
|
116
|
-
copy:
|
148
|
+
copy: false
|
117
149
|
}
|
118
150
|
}
|
119
151
|
end
|
@@ -121,26 +153,31 @@ module Lookbook
|
|
121
153
|
def drawer_panels
|
122
154
|
{
|
123
155
|
source: {
|
156
|
+
id: "drawer-panel-source",
|
124
157
|
label: "Source",
|
125
158
|
template: "lookbook/previews/panels/source",
|
126
159
|
hotkey: "s",
|
127
160
|
show: true,
|
128
161
|
disabled: false,
|
129
|
-
copy:
|
162
|
+
copy: @rendered_examples.map { |e| e[:source] }.join("\n")
|
130
163
|
},
|
131
164
|
notes: {
|
165
|
+
id: "drawer-panel-notes",
|
132
166
|
label: "Notes",
|
133
167
|
template: "lookbook/previews/panels/notes",
|
134
168
|
hotkey: "n",
|
135
169
|
show: true,
|
136
|
-
|
170
|
+
copy: false,
|
171
|
+
disabled: @rendered_examples.filter { |e| e[:notes].present? }.none?
|
137
172
|
},
|
138
173
|
params: {
|
174
|
+
id: "drawer-panel-params",
|
139
175
|
label: "Params",
|
140
176
|
template: "lookbook/previews/panels/params",
|
141
177
|
hotkey: "p",
|
142
178
|
show: true,
|
143
|
-
disabled: @example.
|
179
|
+
disabled: @example.params.none?,
|
180
|
+
copy: false
|
144
181
|
}
|
145
182
|
}
|
146
183
|
end
|
@@ -153,10 +190,6 @@ module Lookbook
|
|
153
190
|
@preview_controller ||= controller
|
154
191
|
end
|
155
192
|
|
156
|
-
def render_in_layout(path, layout: nil, **locals)
|
157
|
-
render path, layout: layout.presence || (params[:lookbook_embed] ? "lookbook/basic" : "lookbook/application"), locals: locals
|
158
|
-
end
|
159
|
-
|
160
193
|
def prettify_error(exception)
|
161
194
|
error_params = if exception.is_a?(ViewComponent::PreviewTemplateError)
|
162
195
|
{
|
@@ -178,5 +211,9 @@ module Lookbook
|
|
178
211
|
end
|
179
212
|
Lookbook::Error.new(exception, **(error_params || {}))
|
180
213
|
end
|
214
|
+
|
215
|
+
def path_segments
|
216
|
+
params[:path].split("/")
|
217
|
+
end
|
181
218
|
end
|
182
219
|
end
|
@@ -9,12 +9,16 @@ module Lookbook
|
|
9
9
|
end
|
10
10
|
|
11
11
|
def landing_path
|
12
|
-
landing =
|
12
|
+
landing = Lookbook.pages.find(&:landing) || Lookbook.pages.first
|
13
13
|
if landing.present?
|
14
14
|
page_path(landing.lookup_path)
|
15
15
|
else
|
16
16
|
home_path
|
17
17
|
end
|
18
18
|
end
|
19
|
+
|
20
|
+
def generate_id(*args)
|
21
|
+
args.map { |args| args.delete_prefix("/").tr("&?=/_\-", "-") }.join("-")
|
22
|
+
end
|
19
23
|
end
|
20
24
|
end
|
@@ -1,16 +1,15 @@
|
|
1
1
|
module Lookbook
|
2
2
|
module ComponentHelper
|
3
|
-
|
4
|
-
attrs[:classes] = class_names(attrs[:class])
|
5
|
-
render "lookbook/components/#{name.underscore}", **attrs.except(:class), &block
|
6
|
-
end
|
3
|
+
COMPONENT_CLASSES = {} # cache for constantized references
|
7
4
|
|
8
|
-
def
|
9
|
-
|
5
|
+
def render_component(ref, **attrs, &block)
|
6
|
+
klass = component_class(ref)
|
7
|
+
comp = attrs.key?(:content) ? klass.new(**attrs.except(:content)).with_content(attrs[:content]) : klass.new(**attrs)
|
8
|
+
render comp, &block
|
10
9
|
end
|
11
10
|
|
12
|
-
def
|
13
|
-
|
11
|
+
def render_tag(tag = :div, **attrs, &block)
|
12
|
+
render Lookbook::TagComponent.new(tag: tag, **attrs), &block
|
14
13
|
end
|
15
14
|
|
16
15
|
if Rails.version.to_f < 6.1
|
@@ -20,10 +19,23 @@ module Lookbook
|
|
20
19
|
end
|
21
20
|
end
|
22
21
|
|
23
|
-
alias_method :component, :render_component
|
24
|
-
|
25
22
|
private
|
26
23
|
|
24
|
+
def component_class(ref)
|
25
|
+
klass = COMPONENT_CLASSES[ref]
|
26
|
+
if klass.nil?
|
27
|
+
ref = ref.to_s.tr("-", "_")
|
28
|
+
class_namespace = ref.camelize
|
29
|
+
begin
|
30
|
+
klass = "Lookbook::#{class_namespace}::Component".constantize
|
31
|
+
rescue
|
32
|
+
klass = "Lookbook::#{class_namespace}Component".constantize
|
33
|
+
end
|
34
|
+
COMPONENT_CLASSES[ref] = klass
|
35
|
+
end
|
36
|
+
klass
|
37
|
+
end
|
38
|
+
|
27
39
|
def build_tag_values(*args)
|
28
40
|
tag_values = []
|
29
41
|
args.each do |tag_value|
|
@@ -4,12 +4,16 @@ module Lookbook
|
|
4
4
|
Lookbook::Markdown.render(block ? capture(&block) : text)
|
5
5
|
end
|
6
6
|
|
7
|
-
def highlight(source,
|
8
|
-
Lookbook::CodeFormatter.highlight(source,
|
7
|
+
def highlight(source, **opts)
|
8
|
+
Lookbook::CodeFormatter.highlight(source, **opts)
|
9
9
|
end
|
10
10
|
|
11
|
-
def beautify(source,
|
12
|
-
Lookbook::CodeFormatter.beautify(source,
|
11
|
+
def beautify(source, **opts)
|
12
|
+
Lookbook::CodeFormatter.beautify(source, **opts)
|
13
|
+
end
|
14
|
+
|
15
|
+
def pretty_json(obj)
|
16
|
+
JSON.pretty_generate(obj)
|
13
17
|
end
|
14
18
|
end
|
15
19
|
end
|
@@ -4,38 +4,30 @@ module Lookbook
|
|
4
4
|
|
5
5
|
def page_path(id)
|
6
6
|
page = id.is_a?(Page) ? id : Lookbook.pages.find(id)
|
7
|
-
|
7
|
+
if page.present?
|
8
|
+
lookbook.page_path page.lookup_path
|
9
|
+
else
|
10
|
+
Lookbook.logger.warn "Could not find page with id ':#{id}'"
|
11
|
+
end
|
8
12
|
end
|
9
13
|
|
10
|
-
def embed(*args, params: {}, type: :preview, **opts)
|
14
|
+
def embed(*args, params: {}, type: :preview, max_height: nil, **opts)
|
11
15
|
return unless args.any?
|
12
16
|
|
13
17
|
@embed_counter ||= 0
|
14
18
|
|
15
19
|
preview_lookup = args.first.is_a?(Symbol) ? args.first : preview_class_name(args.first)
|
16
20
|
preview = Lookbook.previews.find(preview_lookup)
|
17
|
-
|
18
21
|
example = args[1] ? preview&.example(args[1]) : preview&.default_example
|
19
22
|
|
20
|
-
|
21
|
-
@embed_counter += 1
|
22
|
-
render_component "embed",
|
23
|
-
id: generate_id("embed", url_for, example.lookup_path, @embed_counter - 1),
|
24
|
-
example: example,
|
25
|
-
params: params,
|
26
|
-
opts: opts
|
27
|
-
else
|
28
|
-
embed_not_found
|
29
|
-
end
|
30
|
-
end
|
31
|
-
|
32
|
-
protected
|
23
|
+
embed_id = "#{url_for}/embed/#{example.lookup_path}".delete_prefix("/").tr("/", "-")
|
33
24
|
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
25
|
+
render_component :embed,
|
26
|
+
id: embed_id,
|
27
|
+
example: example,
|
28
|
+
params: params,
|
29
|
+
max_height: max_height,
|
30
|
+
opts: opts
|
39
31
|
end
|
40
32
|
end
|
41
33
|
end
|
@@ -1,30 +1,78 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
1
|
+
<% content_for :shell do %>
|
2
|
+
<%= render_component :split_layout,
|
3
|
+
alpine_data: "$store.layout.main",
|
4
|
+
":class": "$store.layout.mobile && '!block'" do |layout| %>
|
5
|
+
|
6
|
+
<% layout.pane class: "flex flex-col bg-lookbook-sidebar relative translate-x-0",
|
7
|
+
":class": "{
|
8
|
+
'transition': $store.layout.mobile,
|
9
|
+
'translate-x-full': $store.layout.mobile && sidebarHidden,
|
10
|
+
'!absolute right-0 bottom-0 top-[40px] h-[calc(100%_-_40px)] w-full max-w-[420px] z-50 border-l border-lookbook-divider': $store.layout.mobile
|
11
|
+
}",
|
12
|
+
"@click.outside": "closeMobileSidebar",
|
13
|
+
x_cloak: true do %>
|
14
|
+
|
15
|
+
<%= render_component :split_layout,
|
16
|
+
alpine_data: "$store.layout.#{Lookbook.pages.any? ? "sidebar" : "singleSectionSidebar"}",
|
17
|
+
style: "height: calc(100vh - 2.5rem);" do |layout| %>
|
18
|
+
<% layout.pane class: "overflow-hidden" do %>
|
19
|
+
<%= render_component :nav,
|
20
|
+
collection: Lookbook.previews,
|
21
|
+
alpine_data: "$store.nav.previews",
|
22
|
+
label: "Previews",
|
23
|
+
collapse_singles: true do |nav| %>
|
24
|
+
<% nav.filter store: "$store.nav.previews.filter", placeholder: "Filter by preview name…" %>
|
25
|
+
<% end %>
|
26
|
+
<% end %>
|
27
|
+
|
28
|
+
<% if Lookbook.pages.any? %>
|
29
|
+
<% layout.pane class: "overflow-hidden" do %>
|
30
|
+
<%= render_component :nav,
|
31
|
+
collection: Lookbook.pages,
|
32
|
+
alpine_data: "$store.nav.pages",
|
33
|
+
label: "Pages" %>
|
34
|
+
<% end %>
|
35
|
+
<% end %>
|
36
|
+
|
37
|
+
<% end %>
|
38
|
+
|
39
|
+
<% if Lookbook::Preview.errors.any? %>
|
40
|
+
<div x-data="{hidden: false}" class="flex-none border-t border-lookbook-divider absolute bottom-0 left-0 right-0" x-show="!hidden">
|
41
|
+
<%= render_component :toolbar do |toolbar| %>
|
42
|
+
<% toolbar.section padded: true, class: "flex items-center" do %>
|
43
|
+
<%= render_component :icon, name: :alert_triangle, size: 4, class: "text-red-700" %>
|
44
|
+
<span class="ml-2">Preview load errors</span>
|
45
|
+
<% end %>
|
46
|
+
<% toolbar.section align: :right do %>
|
47
|
+
<% render_component :button, icon: :x, "@click": "hidden = !hidden" %>
|
48
|
+
<% end %>
|
49
|
+
<% end %>
|
50
|
+
|
51
|
+
<div class="h-full max-h-[300px] overflow-hidden">
|
52
|
+
<div class="bg-red-50 w-full overflow-auto h-full">
|
53
|
+
<ul class="text-sm divide-y divide-red-200">
|
54
|
+
<% Lookbook::Preview.errors.each do |error| %>
|
55
|
+
<% error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error) %>
|
56
|
+
<li class="px-4 py-3">
|
57
|
+
<h4 class="break-all leading-tight text-xs ">
|
58
|
+
<%= error.file_name %><%= ":#{error.line_number}" if error.line_number %>
|
59
|
+
</h4>
|
60
|
+
<pre class="text-red-800 text-xs mt-2 whitespace-pre-wrap opacity-80 font-mono"><%= error.message %></pre>
|
61
|
+
</li>
|
62
|
+
<% end %>
|
63
|
+
</ul>
|
64
|
+
</div>
|
65
|
+
</div>
|
66
|
+
</div>
|
67
|
+
<% end %>
|
68
|
+
<% end %>
|
69
|
+
|
70
|
+
<% layout.pane class: "overflow-hidden", ":class": "$store.layout.mobile && 'w-screen'" do %>
|
71
|
+
<%= content_for?(:main) ? yield(:main) : yield %>
|
72
|
+
<% end %>
|
73
|
+
|
74
|
+
<% end %>
|
75
|
+
<div class="absolute opacity-0 bg-black inset-0 top-[39px] z-[-1] transition-opacity" :class="($store.layout.mobile && !sidebarHidden) && '!opacity-30 !z-40'" data-cloak></div>
|
28
76
|
<% end %>
|
29
77
|
|
30
|
-
<%= render template: "layouts/lookbook/
|
78
|
+
<%= render template: "layouts/lookbook/shell" %>
|
@@ -0,0 +1,53 @@
|
|
1
|
+
<%= content_for :main do %>
|
2
|
+
<div
|
3
|
+
class="h-[calc(100vh_-_40px)]"
|
4
|
+
x-data="{}"
|
5
|
+
@navigation:complete.window="$refs.scroller.scrollTop = 0">
|
6
|
+
|
7
|
+
<div class="h-full bg-lookbook-page relative">
|
8
|
+
<% unless @error %>
|
9
|
+
|
10
|
+
<div class="absolute top-0 right-0 pt-1 pr-0 pl-1 pb-1 rounded-bl-md">
|
11
|
+
<div class="bg-lookbook-page opacity-90 absolute inset-0 w-full h-full z-0"></div>
|
12
|
+
<div class="relative z-10 flex items-center">
|
13
|
+
|
14
|
+
<% if @previous_page %>
|
15
|
+
<%= render_component :button,
|
16
|
+
size: :lg,
|
17
|
+
icon: :chevron_left,
|
18
|
+
tooltip: "Previous page",
|
19
|
+
href: page_path(@previous_page.lookup_path),
|
20
|
+
class: "pr-0.5 bg-transparent" %>
|
21
|
+
<% else %>
|
22
|
+
<%= render_component :button,
|
23
|
+
size: :lg,
|
24
|
+
icon: :chevron_left,
|
25
|
+
disabled: true,
|
26
|
+
class: "opacity-50 !cursor-default pr-0.5 bg-transparent" %>
|
27
|
+
<% end %>
|
28
|
+
|
29
|
+
<% if @next_page %>
|
30
|
+
<%= render_component :button,
|
31
|
+
size: :lg,
|
32
|
+
icon: :chevron_right,
|
33
|
+
tooltip: "Next page",
|
34
|
+
href: page_path(@next_page.lookup_path),
|
35
|
+
class: "pl-0.5 bg-transparent" %>
|
36
|
+
<% else %>
|
37
|
+
<%= render_component :button,
|
38
|
+
size: :lg,
|
39
|
+
icon: :chevron_right,
|
40
|
+
disabled: true,
|
41
|
+
class: "opacity-50 !cursor-default pl-0.5 bg-transparent" %>
|
42
|
+
<% end %>
|
43
|
+
</div>
|
44
|
+
</div>
|
45
|
+
<% end %>
|
46
|
+
|
47
|
+
<%= yield %>
|
48
|
+
</div>
|
49
|
+
|
50
|
+
</div>
|
51
|
+
<% end %>
|
52
|
+
|
53
|
+
<%= render template: "layouts/lookbook/application" %>
|
@@ -0,0 +1,64 @@
|
|
1
|
+
<%= content_for :body do %>
|
2
|
+
<div
|
3
|
+
id="app"
|
4
|
+
x-data="app"
|
5
|
+
@popstate.window="handleNavigation"
|
6
|
+
@click.document="hijax"
|
7
|
+
@navigation:start="closeMobileSidebar"
|
8
|
+
class="w-screen h-screen grid grid-rows-[40px_1fr] relative">
|
9
|
+
|
10
|
+
<%= render_component :header do |header| %>
|
11
|
+
<% header.branding { config.project_name } %>
|
12
|
+
<% end %>
|
13
|
+
|
14
|
+
<% if false %>
|
15
|
+
<%= render_component :toolbar, class: "group !bg-lookbook-header !text-lookbook-header-text" do |toolbar| %>
|
16
|
+
<% toolbar.section padded: true do %>
|
17
|
+
<%= render_component :branding,
|
18
|
+
text: config.project_name,
|
19
|
+
href: landing_path if config.project_name %>
|
20
|
+
<% end %>
|
21
|
+
<% toolbar.section padded: false, align: :right, class: "flex items-center" do %>
|
22
|
+
<%= render_component :button_group, class: "relative -top-px" do |group| %>
|
23
|
+
<% if Rails.env == "development" %>
|
24
|
+
<% group.button icon: :help_circle, class: "opacity-50 hover:opacity-100 transition !text-lookbook-header-text" do |button| %>
|
25
|
+
<% button.dropdown do %>
|
26
|
+
<%= tag.div class: "divide-y divide-lookbook-divider" do %>
|
27
|
+
<div class="flex items-center text-xs px-3 py-2">
|
28
|
+
<span class="opacity-60 mr-1">Lookbook</span>
|
29
|
+
<span class="mr-6">v<%= Lookbook::VERSION %></span>
|
30
|
+
<a href="https://github.com/allmarkedup/lookbook" target="_blank" class="ml-auto opacity-70">
|
31
|
+
<%= render_component :icon, name: :github, size: 3 %>
|
32
|
+
</a>
|
33
|
+
</div>
|
34
|
+
<div class="px-3 py-2">
|
35
|
+
<a href="#"
|
36
|
+
class="text-xs underline"
|
37
|
+
@click.stop="localStorage.clear(); window.location.reload();">
|
38
|
+
Clear local storage
|
39
|
+
</a>
|
40
|
+
</div>
|
41
|
+
<% end %>
|
42
|
+
<% end %>
|
43
|
+
<% end %>
|
44
|
+
<% end %>
|
45
|
+
<% group.button icon: :menu,
|
46
|
+
"@click.stop": "toggleSidebar",
|
47
|
+
x_show: "$store.layout.mobile && sidebarHidden",
|
48
|
+
class: "!text-lookbook-header-text" %>
|
49
|
+
<% group.button icon: :x,
|
50
|
+
"@click.stop": "toggleSidebar",
|
51
|
+
x_show: "$store.layout.mobile && !sidebarHidden",
|
52
|
+
"@keydown.esc.window": "closeMobileSidebar",
|
53
|
+
class: "!text-lookbook-header-text" %>
|
54
|
+
<% end %>
|
55
|
+
<% end %>
|
56
|
+
<% end %>
|
57
|
+
<% end %>
|
58
|
+
|
59
|
+
<%= content_for?(:shell) ? yield(:shell) : yield %>
|
60
|
+
</div>
|
61
|
+
<% end %>
|
62
|
+
|
63
|
+
<%= render template: "layouts/lookbook/skeleton" %>
|
64
|
+
0
|