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
@@ -0,0 +1,217 @@
|
|
1
|
+
@layer components {
|
2
|
+
.theme-github-light {
|
3
|
+
@apply bg-white;
|
4
|
+
|
5
|
+
& .highlight {
|
6
|
+
& .hll {
|
7
|
+
background-color: #f8f8f8;
|
8
|
+
border: 1px solid #ccc;
|
9
|
+
padding: 6px 10px;
|
10
|
+
border-radius: 3px;
|
11
|
+
}
|
12
|
+
& .c {
|
13
|
+
color: #999988;
|
14
|
+
font-style: italic;
|
15
|
+
}
|
16
|
+
& .err {
|
17
|
+
/* color: #a61717;
|
18
|
+
background-color: #e3d2d2; */
|
19
|
+
}
|
20
|
+
& .k {
|
21
|
+
font-weight: bold;
|
22
|
+
}
|
23
|
+
& .o {
|
24
|
+
font-weight: bold;
|
25
|
+
}
|
26
|
+
& .cm {
|
27
|
+
color: #999988;
|
28
|
+
font-style: italic;
|
29
|
+
}
|
30
|
+
& .cp {
|
31
|
+
color: #999999;
|
32
|
+
font-weight: bold;
|
33
|
+
}
|
34
|
+
& .c1 {
|
35
|
+
color: #999988;
|
36
|
+
font-style: italic;
|
37
|
+
}
|
38
|
+
& .cs {
|
39
|
+
color: #999999;
|
40
|
+
font-weight: bold;
|
41
|
+
font-style: italic;
|
42
|
+
}
|
43
|
+
& .gd {
|
44
|
+
color: #000000;
|
45
|
+
background-color: #ffdddd;
|
46
|
+
}
|
47
|
+
& .gd .x {
|
48
|
+
color: #000000;
|
49
|
+
background-color: #ffaaaa;
|
50
|
+
}
|
51
|
+
& .ge {
|
52
|
+
font-style: italic;
|
53
|
+
}
|
54
|
+
& .gr {
|
55
|
+
color: #aa0000;
|
56
|
+
}
|
57
|
+
& .gh {
|
58
|
+
color: #999999;
|
59
|
+
}
|
60
|
+
& .gi {
|
61
|
+
color: #000000;
|
62
|
+
background-color: #ddffdd;
|
63
|
+
}
|
64
|
+
& .gi .x {
|
65
|
+
color: #000000;
|
66
|
+
background-color: #aaffaa;
|
67
|
+
}
|
68
|
+
& .go {
|
69
|
+
color: #888888;
|
70
|
+
}
|
71
|
+
& .gp {
|
72
|
+
color: #555555;
|
73
|
+
}
|
74
|
+
& .gs {
|
75
|
+
font-weight: bold;
|
76
|
+
}
|
77
|
+
& .gu {
|
78
|
+
color: #800080;
|
79
|
+
font-weight: bold;
|
80
|
+
}
|
81
|
+
& .gt {
|
82
|
+
color: #aa0000;
|
83
|
+
}
|
84
|
+
& .kc {
|
85
|
+
font-weight: bold;
|
86
|
+
}
|
87
|
+
& .kd {
|
88
|
+
font-weight: bold;
|
89
|
+
}
|
90
|
+
& .kn {
|
91
|
+
font-weight: bold;
|
92
|
+
}
|
93
|
+
& .kp {
|
94
|
+
font-weight: bold;
|
95
|
+
}
|
96
|
+
& .kr {
|
97
|
+
font-weight: bold;
|
98
|
+
}
|
99
|
+
& .kt {
|
100
|
+
color: #445588;
|
101
|
+
font-weight: bold;
|
102
|
+
}
|
103
|
+
& .m {
|
104
|
+
color: #009999;
|
105
|
+
}
|
106
|
+
& .s {
|
107
|
+
color: #dd1144;
|
108
|
+
}
|
109
|
+
& .n {
|
110
|
+
color: #333333;
|
111
|
+
}
|
112
|
+
& .na {
|
113
|
+
color: teal;
|
114
|
+
}
|
115
|
+
& .nb {
|
116
|
+
color: #0086b3;
|
117
|
+
}
|
118
|
+
& .nc {
|
119
|
+
color: #445588;
|
120
|
+
font-weight: bold;
|
121
|
+
}
|
122
|
+
& .no {
|
123
|
+
color: teal;
|
124
|
+
}
|
125
|
+
& .ni {
|
126
|
+
color: purple;
|
127
|
+
}
|
128
|
+
& .ne {
|
129
|
+
color: #990000;
|
130
|
+
font-weight: bold;
|
131
|
+
}
|
132
|
+
& .nf {
|
133
|
+
color: #990000;
|
134
|
+
font-weight: bold;
|
135
|
+
}
|
136
|
+
& .nn {
|
137
|
+
color: #555555;
|
138
|
+
}
|
139
|
+
& .nt {
|
140
|
+
color: navy;
|
141
|
+
}
|
142
|
+
& .nv {
|
143
|
+
color: teal;
|
144
|
+
}
|
145
|
+
& .ow {
|
146
|
+
font-weight: bold;
|
147
|
+
}
|
148
|
+
& .w {
|
149
|
+
color: #bbbbbb;
|
150
|
+
}
|
151
|
+
& .mf {
|
152
|
+
color: #009999;
|
153
|
+
}
|
154
|
+
& .mh {
|
155
|
+
color: #009999;
|
156
|
+
}
|
157
|
+
& .mi {
|
158
|
+
color: #009999;
|
159
|
+
}
|
160
|
+
& .mo {
|
161
|
+
color: #009999;
|
162
|
+
}
|
163
|
+
& .sb {
|
164
|
+
color: #dd1144;
|
165
|
+
}
|
166
|
+
& .sc {
|
167
|
+
color: #dd1144;
|
168
|
+
}
|
169
|
+
& .sd {
|
170
|
+
color: #dd1144;
|
171
|
+
}
|
172
|
+
& .s2 {
|
173
|
+
color: #dd1144;
|
174
|
+
}
|
175
|
+
& .se {
|
176
|
+
color: #dd1144;
|
177
|
+
}
|
178
|
+
& .sh {
|
179
|
+
color: #dd1144;
|
180
|
+
}
|
181
|
+
& .si {
|
182
|
+
color: #dd1144;
|
183
|
+
}
|
184
|
+
& .sx {
|
185
|
+
color: #dd1144;
|
186
|
+
}
|
187
|
+
& .sr {
|
188
|
+
color: #009926;
|
189
|
+
}
|
190
|
+
& .s1 {
|
191
|
+
color: #dd1144;
|
192
|
+
}
|
193
|
+
& .ss {
|
194
|
+
color: #990073;
|
195
|
+
}
|
196
|
+
& .bp {
|
197
|
+
color: #999999;
|
198
|
+
}
|
199
|
+
& .vc {
|
200
|
+
color: teal;
|
201
|
+
}
|
202
|
+
& .vg {
|
203
|
+
color: teal;
|
204
|
+
}
|
205
|
+
& .vi {
|
206
|
+
color: teal;
|
207
|
+
}
|
208
|
+
& .il {
|
209
|
+
color: #009999;
|
210
|
+
}
|
211
|
+
& .gc {
|
212
|
+
color: #999;
|
213
|
+
background-color: #eaf2f5;
|
214
|
+
}
|
215
|
+
}
|
216
|
+
}
|
217
|
+
}
|
@@ -0,0 +1,41 @@
|
|
1
|
+
module Lookbook
|
2
|
+
class Component < ViewComponent::Base
|
3
|
+
include Lookbook::ComponentHelper
|
4
|
+
|
5
|
+
def initialize(alpine_data: [], **html_attrs)
|
6
|
+
@alpine_data ||= alpine_data
|
7
|
+
@html_attrs = html_attrs
|
8
|
+
@html_attrs[:class] = {"#{@html_attrs[:class]}": true} if @html_attrs[:class].is_a? String
|
9
|
+
end
|
10
|
+
|
11
|
+
def render_component_tag(tag = :div, **attrs, &block)
|
12
|
+
merged_classes = class_names(attrs[:class], @html_attrs[:class])
|
13
|
+
merge_attrs = @html_attrs.except(:class).deep_merge(attrs.except(:class))
|
14
|
+
render Lookbook::TagComponent.new(tag: tag,
|
15
|
+
name: component_name,
|
16
|
+
**merge_attrs,
|
17
|
+
x_data: prepare_alpine_data(attrs[:x_data]),
|
18
|
+
class: merged_classes), &block
|
19
|
+
end
|
20
|
+
|
21
|
+
def component_name
|
22
|
+
self.class.name.chomp("::Component").delete_prefix("Lookbook::").underscore.tr("/", "_").tr("_", "-")
|
23
|
+
end
|
24
|
+
|
25
|
+
protected
|
26
|
+
|
27
|
+
attr_reader :alpine_data
|
28
|
+
|
29
|
+
def alpine_component
|
30
|
+
nil
|
31
|
+
end
|
32
|
+
|
33
|
+
def prepare_alpine_data(x_data = nil)
|
34
|
+
alpine_component_name = x_data || @html_attrs&.dig(:x_data) || alpine_component
|
35
|
+
if alpine_component_name.present?
|
36
|
+
args = Array.wrap(alpine_data)
|
37
|
+
args.any? ? "#{alpine_component_name}(#{safe_join(args).gsub(""", "'").tr("\"", "'")})" : alpine_component_name
|
38
|
+
end
|
39
|
+
end
|
40
|
+
end
|
41
|
+
end
|
@@ -0,0 +1,11 @@
|
|
1
|
+
<%= render_component :button,
|
2
|
+
name: "copy-button",
|
3
|
+
**@button_attrs,
|
4
|
+
x_data: prepare_alpine_data,
|
5
|
+
"@click.prevent": "copyToClipboard" do |button| %>
|
6
|
+
<% button.icon name: @icon, size: icon_size, x_show: "!copied", cloak: true %>
|
7
|
+
<%= render_component :icon, name: :check, size: icon_size, class: "text-green-500", x_show: "copied", cloak: true %>
|
8
|
+
<% if content %>
|
9
|
+
<div x-ref="copyTarget" class="hidden"><%== content %></div>
|
10
|
+
<% end %>
|
11
|
+
<% end %>
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import { initClipboard } from "~/app/assets/lookbook/js/components/clipboard";
|
2
|
+
import buttonComponent from "@components/button/component";
|
3
|
+
|
4
|
+
export default function copyButtonComponent() {
|
5
|
+
const button = buttonComponent();
|
6
|
+
return {
|
7
|
+
...button,
|
8
|
+
|
9
|
+
copied: false,
|
10
|
+
|
11
|
+
init() {
|
12
|
+
button.init.bind(this)();
|
13
|
+
initClipboard(this);
|
14
|
+
},
|
15
|
+
};
|
16
|
+
}
|
@@ -0,0 +1,23 @@
|
|
1
|
+
module Lookbook
|
2
|
+
class CopyButton::Component < Lookbook::Component
|
3
|
+
def initialize(target: nil, icon: :code, **attrs)
|
4
|
+
@icon = icon
|
5
|
+
@target = target
|
6
|
+
@button_attrs = attrs
|
7
|
+
end
|
8
|
+
|
9
|
+
def icon_size
|
10
|
+
Lookbook::Button::Component::ICON_SIZES[@size]
|
11
|
+
end
|
12
|
+
|
13
|
+
protected
|
14
|
+
|
15
|
+
def alpine_data
|
16
|
+
content ? nil : @target.to_json
|
17
|
+
end
|
18
|
+
|
19
|
+
def alpine_component
|
20
|
+
"copyButtonComponent"
|
21
|
+
end
|
22
|
+
end
|
23
|
+
end
|
@@ -0,0 +1,10 @@
|
|
1
|
+
<%= render_component_tag class: "flex items-center text-xs font-mono space-x-1 transition",
|
2
|
+
":class":"{'!opacity-100': resizing}",
|
3
|
+
"@viewport:resize-start.window": "resizing = true",
|
4
|
+
"@viewport:resize-complete.window": "resizing = false",
|
5
|
+
"@dom:update-start.window": "tearDown",
|
6
|
+
"@dom:update-complete.window": "createObserver" do %>
|
7
|
+
<span x-text="`${width}px`"></span>
|
8
|
+
<span class="opacity-70">x</span>
|
9
|
+
<span x-text="`${height}px`"></span>
|
10
|
+
<% end %>
|
@@ -0,0 +1,30 @@
|
|
1
|
+
import { observeSize } from "@helpers/layout";
|
2
|
+
|
3
|
+
export default function dimensionsDisplayComponent(targetSelector) {
|
4
|
+
return {
|
5
|
+
width: 0,
|
6
|
+
height: 0,
|
7
|
+
resizing: false,
|
8
|
+
|
9
|
+
init() {
|
10
|
+
const target = document.querySelector(targetSelector);
|
11
|
+
this.width = Math.round(target.clientWidth);
|
12
|
+
this.height = Math.round(target.clientHeight);
|
13
|
+
this.createObserver();
|
14
|
+
},
|
15
|
+
|
16
|
+
createObserver() {
|
17
|
+
this.observer = observeSize(
|
18
|
+
document.querySelector(targetSelector),
|
19
|
+
({ width, height }) => {
|
20
|
+
this.width = width;
|
21
|
+
this.height = height;
|
22
|
+
}
|
23
|
+
);
|
24
|
+
},
|
25
|
+
|
26
|
+
tearDown() {
|
27
|
+
this.observer.disconnect();
|
28
|
+
},
|
29
|
+
};
|
30
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
module Lookbook
|
2
|
+
class DimensionsDisplay::Component < Lookbook::Component
|
3
|
+
def initialize(target:, **html_attrs)
|
4
|
+
@target = target
|
5
|
+
super(**html_attrs)
|
6
|
+
end
|
7
|
+
|
8
|
+
protected
|
9
|
+
|
10
|
+
def alpine_data
|
11
|
+
@target.to_json
|
12
|
+
end
|
13
|
+
|
14
|
+
def alpine_component
|
15
|
+
"dimensionsDisplayComponent"
|
16
|
+
end
|
17
|
+
end
|
18
|
+
end
|
@@ -0,0 +1,50 @@
|
|
1
|
+
<% if @example.present? %>
|
2
|
+
<%= render_component_tag class: "not-prose border-b border-lookbook-divider rounded-sm overflow-hidden", "@navigation:start.window": "cleanup" do %>
|
3
|
+
|
4
|
+
<%= render_component :toolbar, class: "border border-b-0 border-lookbook-divider" do |toolbar| %>
|
5
|
+
<% toolbar.section padded: true do %>
|
6
|
+
<h3>
|
7
|
+
<%= @example.preview.label %> (<%= @example.label %>)
|
8
|
+
</h3>
|
9
|
+
<% end %>
|
10
|
+
<% toolbar.section align: :right, divide: :left do %>
|
11
|
+
<%= render_component :button_group do |group| %>
|
12
|
+
<% group.button icon: :eye,
|
13
|
+
href: helpers.lookbook.inspect_path(@example.path, @params),
|
14
|
+
tooltip: "View in Inspector" %>
|
15
|
+
<% group.button icon: :external_link,
|
16
|
+
href: helpers.lookbook.inspect_path(@example.path, @params),
|
17
|
+
tooltip: "Open in new window",
|
18
|
+
target: "_blank" %>
|
19
|
+
<% end %>
|
20
|
+
<% end %>
|
21
|
+
<% end %>
|
22
|
+
|
23
|
+
<div
|
24
|
+
x-show="tab === 'preview'"
|
25
|
+
@viewport:loaded="loadResizer"
|
26
|
+
@dom:update-complete="loadResizer"
|
27
|
+
@viewport:resize-progress="resizeIframe"
|
28
|
+
@viewport:resize-complete="resizeIframe">
|
29
|
+
<%= render_component :viewport,
|
30
|
+
src: helpers.lookbook.preview_path(@example.path, @params.merge(lookbook_embed: true)),
|
31
|
+
alpine_data: "store",
|
32
|
+
resize_height: false,
|
33
|
+
max_height: @max_height,
|
34
|
+
class: "mb-[-2px]" %>
|
35
|
+
</div>
|
36
|
+
|
37
|
+
<% end %>
|
38
|
+
<% else %>
|
39
|
+
<%= render_component_tag class: "bg-white flex flex-col items-center justify-center border-2 border-dashed border-gray-200 p-6 rounded-md not-prose" do %>
|
40
|
+
<div class="px-4 text-center">
|
41
|
+
<%= render_component :icon, name: :alert_triangle, size: 6, class: "text-red-300 mx-auto" %>
|
42
|
+
<div class="mt-2 max-w-xs">
|
43
|
+
<h5 class="text-base">Preview not found</h5>
|
44
|
+
<p class="mt-1 opacity-50 text-sm">
|
45
|
+
The preview may have been renamed or deleted
|
46
|
+
</p>
|
47
|
+
</div>
|
48
|
+
</div>
|
49
|
+
<% end %>
|
50
|
+
<% end %>
|
@@ -0,0 +1,39 @@
|
|
1
|
+
import "iframe-resizer/js/iframeResizer";
|
2
|
+
|
3
|
+
export default function embedComponent(id, embedStore) {
|
4
|
+
if (!embedStore[id]) {
|
5
|
+
embedStore[id] = { width: "100%", height: "100%" };
|
6
|
+
}
|
7
|
+
|
8
|
+
return {
|
9
|
+
tab: "preview",
|
10
|
+
|
11
|
+
resizer: null,
|
12
|
+
|
13
|
+
get store() {
|
14
|
+
return embedStore[id];
|
15
|
+
},
|
16
|
+
|
17
|
+
async loadResizer() {
|
18
|
+
window.iFrameResize(
|
19
|
+
{
|
20
|
+
heightCalculationMethod: "lowestElement",
|
21
|
+
},
|
22
|
+
this.$el.querySelector("iframe")
|
23
|
+
);
|
24
|
+
this.resizer = this.$el.querySelector("iframe").iFrameResizer;
|
25
|
+
this.resizer.resize();
|
26
|
+
this.$dispatch("embed:resizer-loaded", { resizer: this.resizer });
|
27
|
+
},
|
28
|
+
|
29
|
+
resizeIframe() {
|
30
|
+
this.$el.querySelector("iframe").iFrameResizer.resize();
|
31
|
+
},
|
32
|
+
|
33
|
+
cleanup() {
|
34
|
+
if (this.resizer) {
|
35
|
+
this.resizer.removeListeners();
|
36
|
+
}
|
37
|
+
},
|
38
|
+
};
|
39
|
+
}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
module Lookbook
|
2
|
+
class Embed::Component < Lookbook::Component
|
3
|
+
def initialize(id:, example:, params: {}, opts: {}, max_height: nil, **html_attrs)
|
4
|
+
@id = id
|
5
|
+
@example = example
|
6
|
+
@params = params
|
7
|
+
@opts = opts
|
8
|
+
@max_height = max_height
|
9
|
+
super(**html_attrs)
|
10
|
+
end
|
11
|
+
|
12
|
+
protected
|
13
|
+
|
14
|
+
def alpine_data
|
15
|
+
[@id.to_json, "$store.pages.embeds"].join(",")
|
16
|
+
end
|
17
|
+
|
18
|
+
def alpine_component
|
19
|
+
"embedComponent"
|
20
|
+
end
|
21
|
+
end
|
22
|
+
end
|
@@ -0,0 +1,17 @@
|
|
1
|
+
<%= render_component_tag do %>
|
2
|
+
<div class="relative">
|
3
|
+
<input
|
4
|
+
type="text"
|
5
|
+
class="form-input text-sm"
|
6
|
+
placeholder="<%== @placeholder %>"
|
7
|
+
x-ref="input"
|
8
|
+
x-model="<%= @model %>"
|
9
|
+
x-effect="$dispatch('filter:change', { text, filter: this })"
|
10
|
+
@keydown.esc.stop="clear"
|
11
|
+
@keydown.f.stop.prevent.window="focus"
|
12
|
+
@keydown.stop>
|
13
|
+
<button class="text-lookbook-button-text hover:text-lookbook-button-text-hover focus:ring-0 focus:outline-none absolute top-1/2 right-3 -translate-y-1/2" @click="clear" :class="{hidden: !active}">
|
14
|
+
<%= render_component :icon, name: :x, size: 3 %>
|
15
|
+
</button>
|
16
|
+
</div>
|
17
|
+
<% end %>
|
@@ -0,0 +1,21 @@
|
|
1
|
+
export default function filterComponent(store) {
|
2
|
+
return {
|
3
|
+
focussed: false,
|
4
|
+
get active() {
|
5
|
+
return store.active;
|
6
|
+
},
|
7
|
+
get text() {
|
8
|
+
return store.text;
|
9
|
+
},
|
10
|
+
clear() {
|
11
|
+
if (store.raw === "") {
|
12
|
+
this.$refs.input.blur();
|
13
|
+
} else {
|
14
|
+
store.raw = "";
|
15
|
+
}
|
16
|
+
},
|
17
|
+
focus() {
|
18
|
+
this.$refs.input.focus();
|
19
|
+
},
|
20
|
+
};
|
21
|
+
}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
module Lookbook
|
2
|
+
class Filter::Component < Lookbook::Component
|
3
|
+
def initialize(store: nil, placeholder: "Type to filter…", **html_attrs)
|
4
|
+
@model = store.nil? ? "{}" : "#{store}.raw"
|
5
|
+
@placeholder = placeholder
|
6
|
+
super(alpine_data: store, **html_attrs)
|
7
|
+
end
|
8
|
+
|
9
|
+
protected
|
10
|
+
|
11
|
+
def alpine_component
|
12
|
+
"filterComponent"
|
13
|
+
end
|
14
|
+
end
|
15
|
+
end
|
@@ -0,0 +1,79 @@
|
|
1
|
+
<%= render_component_tag :header do %>
|
2
|
+
<%= render_component :toolbar, class: "!bg-lookbook-header !text-lookbook-header-text !border-lookbook-header-border" do |toolbar| %>
|
3
|
+
<% toolbar.section padded: true do %>
|
4
|
+
<% if branding.present? %>
|
5
|
+
<a
|
6
|
+
<% if landing_path %>href="<%= landing_path %>"<% end %>
|
7
|
+
class="text-sm truncate uppercase font-black tracking-wider text-lookbook-branding-text">
|
8
|
+
<%= branding %>
|
9
|
+
</a>
|
10
|
+
<% end %>
|
11
|
+
<% end %>
|
12
|
+
|
13
|
+
<% toolbar.section padded: false, align: :right, class: "flex items-center" do %>
|
14
|
+
<%= render_component :button_group do |group| %>
|
15
|
+
<% if Rails.env.development? %>
|
16
|
+
<% group.button icon: :help_circle, class: "opacity-50 hover:opacity-100 transition !text-lookbook-header-text" do |button| %>
|
17
|
+
<% button.dropdown do %>
|
18
|
+
<%= tag.div class: "divide-y divide-lookbook-divider min-w-[180px]" do %>
|
19
|
+
<div class="px-3 py-3">
|
20
|
+
<ul class="space-y-2 opacity-80">
|
21
|
+
<li>
|
22
|
+
<a href="#"
|
23
|
+
class="text-xs flex items-center hover:underline"
|
24
|
+
x-data="clipboardComponent"
|
25
|
+
@click.prevent.stop="copyToClipboard('#debug-data')">
|
26
|
+
<span x-show="copied" x-cloak>
|
27
|
+
<%= render_component :icon,
|
28
|
+
name: :check,
|
29
|
+
size: 2.5,
|
30
|
+
class: "text-green-600" %>
|
31
|
+
</span>
|
32
|
+
<span x-show="!copied">
|
33
|
+
<%= render_component :icon,
|
34
|
+
name: :clipboard,
|
35
|
+
size: 2.5 %>
|
36
|
+
</span>
|
37
|
+
<span class="ml-2">Copy debug data</span>
|
38
|
+
</a>
|
39
|
+
</li>
|
40
|
+
<li>
|
41
|
+
<a href="#"
|
42
|
+
class="text-xs flex items-center hover:underline"
|
43
|
+
@click.stop="localStorage.clear(); window.location.reload();">
|
44
|
+
<%= render_component :icon, name: :refresh_cw, size: 2.5 %>
|
45
|
+
<span class="ml-2">Reset local storage</span>
|
46
|
+
</a>
|
47
|
+
</li>
|
48
|
+
</ul>
|
49
|
+
</div>
|
50
|
+
<div class="flex items-center text-xs px-3 py-2 bg-zinc-50">
|
51
|
+
<span class="opacity-70 mr-1">Lookbook</span>
|
52
|
+
<span class="mr-6">v<%= Lookbook::VERSION %></span>
|
53
|
+
<div class="flex items-center space-x-2">
|
54
|
+
<a href="https://github.com/allmarkedup/lookbook" target="_blank" class="ml-auto opacity-70" title="Documentation">
|
55
|
+
<%= render_component :icon, name: :book, size: 3 %>
|
56
|
+
</a>
|
57
|
+
<a href="https://github.com/allmarkedup/lookbook" target="_blank" class="ml-auto opacity-70" title="Github">
|
58
|
+
<%= render_component :icon, name: :github, size: 3 %>
|
59
|
+
</a>
|
60
|
+
</div>
|
61
|
+
</div>
|
62
|
+
<% end %>
|
63
|
+
<% end %>
|
64
|
+
<% end %>
|
65
|
+
<% end %>
|
66
|
+
<% group.button icon: :menu,
|
67
|
+
"@click.stop": "toggleSidebar",
|
68
|
+
x_show: "$store.layout.mobile && sidebarHidden",
|
69
|
+
class: "!text-lookbook-header-text" %>
|
70
|
+
<% group.button icon: :x,
|
71
|
+
"@click.stop": "toggleSidebar",
|
72
|
+
x_show: "$store.layout.mobile && !sidebarHidden",
|
73
|
+
"@keydown.esc.window": "closeMobileSidebar",
|
74
|
+
class: "!text-lookbook-header-text" %>
|
75
|
+
<% end %>
|
76
|
+
<% end %>
|
77
|
+
<% end %>
|
78
|
+
|
79
|
+
<% end %>
|
@@ -0,0 +1,23 @@
|
|
1
|
+
module Lookbook
|
2
|
+
class Icon::Component < Lookbook::Component
|
3
|
+
def initialize(name:, size: 4, **html_attrs)
|
4
|
+
@icon_name = name.is_a?(Symbol) ? name.to_s.tr("_", "-").to_json : name
|
5
|
+
@size = size || 4
|
6
|
+
super(**html_attrs)
|
7
|
+
end
|
8
|
+
|
9
|
+
def size_rems
|
10
|
+
"#{@size * 0.25}rem"
|
11
|
+
end
|
12
|
+
|
13
|
+
protected
|
14
|
+
|
15
|
+
def alpine_data
|
16
|
+
@icon_name
|
17
|
+
end
|
18
|
+
|
19
|
+
def alpine_component
|
20
|
+
"iconComponent"
|
21
|
+
end
|
22
|
+
end
|
23
|
+
end
|