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,112 +0,0 @@
|
|
1
|
-
<div id="drawer" class="bg-white w-full h-full flex flex-col min-w-0">
|
2
|
-
<div class="pl-4 border-b border-gray-300 select-none flex-none" x-show="!drawerHidden">
|
3
|
-
<div class="flex cursor-auto relative">
|
4
|
-
<div
|
5
|
-
id="inspector-tabs-<%= example.id %>"
|
6
|
-
x-data="tabs"
|
7
|
-
class="min-w-0 -mb-px"
|
8
|
-
x-effect="$store.inspector.drawer.visibleTabCount = visibleTabCount"
|
9
|
-
>
|
10
|
-
<nav x-ref="tabs" class="flex h-10 space-x-8 flex-grow pr-8">
|
11
|
-
<% panels.each.with_index(1) do |(key,props),i| %>
|
12
|
-
<a
|
13
|
-
id="inspector-tab-<%= key %>-<%= example.id %>"
|
14
|
-
href="#inspector-panel-<%= key %>"
|
15
|
-
class="whitespace-nowrap pt-2.5 pb-1.5 px-1 border-b-2 cursor-pointer <%= "!text-gray-300" if props[:disabled] %>"
|
16
|
-
:class="{
|
17
|
-
'border-indigo-400': isActiveDrawerPanel('<%= key %>'),
|
18
|
-
'border-transparent text-gray-500 hover:text-gray-700': !isActiveDrawerPanel('<%= key %>'),
|
19
|
-
'invisible': (<%= i %> > visibleTabCount)
|
20
|
-
}"
|
21
|
-
@click.stop.prevent="switchDrawerPanel('<%= key %>')"
|
22
|
-
<% if props[:hotkey] %>data-hotkey="<%= props[:hotkey] %>"<% end %>
|
23
|
-
>
|
24
|
-
<%== props[:label] %>
|
25
|
-
</a>
|
26
|
-
<% end %>
|
27
|
-
<div
|
28
|
-
x-ref="toggle"
|
29
|
-
x-show="visibleTabCount !== tabs.length"
|
30
|
-
class="flex-none absolute top-[9px]"
|
31
|
-
:style="`left: ${tabsWidth - 48}px`"
|
32
|
-
>
|
33
|
-
<button class="py-1 px-2 text-gray-500 hover:text-indigo-800">
|
34
|
-
<%= icon "chevrons-right", size: 3.5 %>
|
35
|
-
</button>
|
36
|
-
</div>
|
37
|
-
</nav>
|
38
|
-
<nav class="hidden">
|
39
|
-
<div x-ref="dropdown" class="min-w-[120px]">
|
40
|
-
<% panels.each.with_index(1) do |(key,props),i| %>
|
41
|
-
<template id="inspector-dropdown-tab-<%= key %>-<%= example.id %>" x-if="<%= i %> > $store.inspector.drawer.visibleTabCount">
|
42
|
-
<div :class="{'border-t border-gray-300': (<%= i %> > $store.inspector.drawer.visibleTabCount + 1)}">
|
43
|
-
<a
|
44
|
-
href="#inspector-panel-<%= key %>"
|
45
|
-
class="block whitespace-nowrap py-2 px-4 border-l-2 cursor-pointer <%= "!text-gray-300" if props[:disabled] %>"
|
46
|
-
:class="{
|
47
|
-
'border-indigo-400': $store.inspector.drawer.panel === '<%= key %>',
|
48
|
-
'border-transparent text-gray-500 hover:text-gray-700': $store.inspector.drawer.panel !== '<%= key %>',
|
49
|
-
}"
|
50
|
-
@click.stop.prevent=" hideDropdown(); switchDrawerPanel('<%= key %>')"
|
51
|
-
>
|
52
|
-
<%== props[:label] %>
|
53
|
-
</a>
|
54
|
-
</div>
|
55
|
-
</template>
|
56
|
-
<% end %>
|
57
|
-
</div>
|
58
|
-
</nav>
|
59
|
-
</div>
|
60
|
-
<div class="flex items-center bg-white border-l border-gray-200 ml-auto space-x-3 px-3">
|
61
|
-
<div>
|
62
|
-
<% panels.each do |key, props| %>
|
63
|
-
<div
|
64
|
-
ref="<%= "inspector-panel-#{example.id}-#{key}-copy" %>"
|
65
|
-
class="flex items-center"
|
66
|
-
:class="{'pointer-events-none opacity-30': <%= !props[:copy].present? %>}"
|
67
|
-
x-show="isActiveDrawerPanel('<%= key %>')"
|
68
|
-
x-cloak>
|
69
|
-
<%= component "copy-button",
|
70
|
-
target: "inspector-panel-#{example.id}-#{key}-clipboard",
|
71
|
-
disabled: !props[:copy].present? %>
|
72
|
-
</div>
|
73
|
-
<% end %>
|
74
|
-
</div>
|
75
|
-
<button
|
76
|
-
x-tooltip.theme.lookbook="`${horizontal ? 'pin drawer on right' : 'pin drawer on bottom'}`"
|
77
|
-
@click="toggleOrientation"
|
78
|
-
:class="{'pointer-events-none opacity-30': !canBeVertical}"
|
79
|
-
>
|
80
|
-
<%= icon "${horizontal ? 'sidebar' : 'credit-card'}",
|
81
|
-
size: 4,
|
82
|
-
class: "scale-[-1] text-gray-400 hover:text-indigo-800" %>
|
83
|
-
</button>
|
84
|
-
<button
|
85
|
-
x-tooltip.theme.lookbook="`hide drawer`"
|
86
|
-
@click="toggleDrawer"
|
87
|
-
>
|
88
|
-
<%= icon "x-circle",
|
89
|
-
size: 4,
|
90
|
-
class: "text-gray-400 hover:text-indigo-800" %>
|
91
|
-
</button>
|
92
|
-
</div>
|
93
|
-
</div>
|
94
|
-
</div>
|
95
|
-
<div class="bg-white relative flex-grow">
|
96
|
-
<% panels.each do |key, props| %>
|
97
|
-
<div
|
98
|
-
class="h-full w-full absolute inset-0"
|
99
|
-
x-show="isActiveDrawerPanel('<%= key %>')"
|
100
|
-
x-cloak
|
101
|
-
>
|
102
|
-
<div id="inspector-panel-<%= example.id %>-<%= key %>" class="h-full">
|
103
|
-
<%= render props[:template],
|
104
|
-
key: key,
|
105
|
-
examples: examples,
|
106
|
-
clipboard_id: "inspector-panel-#{example.id}-#{key}-clipboard",
|
107
|
-
**props %>
|
108
|
-
</div>
|
109
|
-
</div>
|
110
|
-
<% end %>
|
111
|
-
</div>
|
112
|
-
</div>
|
@@ -1,39 +0,0 @@
|
|
1
|
-
<div id="<%= id %>" x-data="embed" class="not-prose embed border border-gray-300 rounded-md overflow-hidden" @page:morphed.window="recaclulateIframeHeight">
|
2
|
-
<header class="px-3 py-2 flex items-center text-xs text-gray-400 bg-white border-b border-gray-300">
|
3
|
-
<div class="text-gray-500">
|
4
|
-
<%= example.preview.label %> (<%= example.label %>)
|
5
|
-
</div>
|
6
|
-
<div class="ml-auto flex items-center space-x-3">
|
7
|
-
<a href="<%= lookbook.show_path(example.path, params) %>" class="" x-tooltip.theme.lookbook="`View in Inspector`">
|
8
|
-
<%= icon "eye", size: 4, class: "hover:text-indigo-800" %>
|
9
|
-
</a>
|
10
|
-
<a
|
11
|
-
href="<%= lookbook.preview_path(example.path, params) %>"
|
12
|
-
target="_blank"
|
13
|
-
class="-top-px relative"
|
14
|
-
x-tooltip.theme.lookbook="`Open in new window`">
|
15
|
-
<%= icon "external-link", size: 4, class: "hover:text-indigo-800" %>
|
16
|
-
</a>
|
17
|
-
</div>
|
18
|
-
</header>
|
19
|
-
<div class="checked-bg overflow-hidden">
|
20
|
-
<div x-ref="resizer" class="grid bg-white relative grid-cols-[1fr_17px] w-full" :style="`max-width: ${maxWidth}; height: ${height ? `${height}px` : 'auto'}`">
|
21
|
-
<iframe seamless
|
22
|
-
id="<%= id %>-iframe"
|
23
|
-
x-ref="iframe"
|
24
|
-
src="<%= lookbook.preview_path(example.path, params.merge(lookbook_embed: true)) %>"
|
25
|
-
class="min-w-full h-full w-px"
|
26
|
-
:class="{ 'pointer-events-none': reflowing }"
|
27
|
-
@load="recaclulateIframeHeight">
|
28
|
-
</iframe>
|
29
|
-
<div
|
30
|
-
class="resize-handle border-r border-l cursor-[col-resize] relative -right-px"
|
31
|
-
@pointerdown="onResizeWidthStart"
|
32
|
-
@dblclick="toggleFullWidth">
|
33
|
-
<svg class="h-4 w-4 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
34
|
-
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
35
|
-
</svg>
|
36
|
-
</div>
|
37
|
-
</div>
|
38
|
-
</div>
|
39
|
-
</div>
|
@@ -1,13 +0,0 @@
|
|
1
|
-
<div class="bg-red-50 w-full overflow-auto h-full">
|
2
|
-
<ul class="text-sm divide-y divide-red-200">
|
3
|
-
<% errors.each do |error| %>
|
4
|
-
<% error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error) %>
|
5
|
-
<li class="px-4 py-3">
|
6
|
-
<h4 class="break-all leading-tight">
|
7
|
-
<%= error.file_name %><%= ":#{error.line_number}" if error.line_number %>
|
8
|
-
</h4>
|
9
|
-
<pre class="text-red-800 text-xs mt-2 whitespace-pre-wrap opacity-80 font-mono"><%= error.message %></pre>
|
10
|
-
</li>
|
11
|
-
<% end %>
|
12
|
-
</ul>
|
13
|
-
</div>
|
@@ -1,18 +0,0 @@
|
|
1
|
-
<div x-data="filter" class="bg-white rounded-md border border-gray-200 " :class="{'!border-gray-300': focussed}">
|
2
|
-
<input
|
3
|
-
type="text"
|
4
|
-
class="text-sm pl-3 pr-8 w-full border-0 bg-transparent focus:outline-none outline-none focus:ring-0 text-gray-500 placeholder:italic placeholder:text-gray-500"
|
5
|
-
placeholder="Filter by name…"
|
6
|
-
x-ref="input"
|
7
|
-
x-model="$store.filter.raw"
|
8
|
-
x-effect="if (!$store.layout.desktop && $store.sidebar.open) focus()"
|
9
|
-
@keyup.stop="checkEsc"
|
10
|
-
@keyup.f.document="focus"
|
11
|
-
@filter:clear.document="clear"
|
12
|
-
@filter:focus.document="focus"
|
13
|
-
@focus.stop="focussed = true"
|
14
|
-
@blur.stop="focussed = false">
|
15
|
-
<button class="text-gray-400 hover:text-indigo-500 focus:ring-0 focus:outline-none absolute top-1/2 right-5 -translate-y-1/2" @click="clear" :class="{hidden: !$store.filter.active}">
|
16
|
-
<%= icon "x", size: 3, class: "hover:text-indigo-500" %>
|
17
|
-
</button>
|
18
|
-
</div>
|
@@ -1,6 +0,0 @@
|
|
1
|
-
<header class="pl-4 w-full flex-none bg-white border-b border-gray-300 flex items-center h-10 select-none min-w-0">
|
2
|
-
<button class="flex-none mr-6" x-show="!$store.sidebar.open" @click="$store.sidebar.toggle">
|
3
|
-
<%= icon "menu", size: 4, class: "text-gray-400 hover:text-indigo-500 transition" %>
|
4
|
-
</button>
|
5
|
-
<%= yield %>
|
6
|
-
</header>
|
@@ -1,16 +0,0 @@
|
|
1
|
-
<nav id="nav" x-data="nav(<%= filterable %>)">
|
2
|
-
<% if items.any? %>
|
3
|
-
<ul x-ref="items" id="nav-<%= items.class.describe_as %>">
|
4
|
-
<% items.each do |item| %>
|
5
|
-
<%= component "nav_#{item.type}", node: item %>
|
6
|
-
<% end %>
|
7
|
-
</ul>
|
8
|
-
<div class="p-4 text-center" x-show="empty" x-cloak>
|
9
|
-
<em class="text-gray-400 italic">No matching <%= items.class.describe_as %> found.</em>
|
10
|
-
</div>
|
11
|
-
<% else %>
|
12
|
-
<div class="p-4 text-center">
|
13
|
-
<h4 class="text-gray-400 italic">No <%= items.class.describe_as %> found.</h4>
|
14
|
-
</div>
|
15
|
-
<% end %>
|
16
|
-
</nav>
|
@@ -1,14 +0,0 @@
|
|
1
|
-
<li key="nav-group-<%= node.id %>-item" class="<%= classes %>">
|
2
|
-
<div id="nav-group-<%= node.id %>" x-data="navGroup" :class="{hidden}" x-cloak>
|
3
|
-
<div @click="toggle" class="nav-toggle py-[5px]" style="padding-left: calc((<%= node.hierarchy_depth - 1 %> * 12px) + 0.5rem);">
|
4
|
-
<%= icon "${open ? 'chevron-down' : 'chevron-right'}", size: 3, class: "mr-1 text-gray-500" %>
|
5
|
-
<%= icon node.type == :preview ? "layers" : "folder", size: 3.5, class: "mr-1.5 text-indigo-500" %>
|
6
|
-
<div class="nav-label <%= "font-bold" if node.type == :preview %>" <% if node.type == :preview %> @click.stop="toggle(); navigateToFirstChild()"<% end %>>
|
7
|
-
<%= node.label %>
|
8
|
-
</div>
|
9
|
-
</div>
|
10
|
-
<ul x-ref="items" x-show="open" x-cloak>
|
11
|
-
<%= yield %>
|
12
|
-
</ul>
|
13
|
-
</div>
|
14
|
-
</li>
|
@@ -1,24 +0,0 @@
|
|
1
|
-
<%
|
2
|
-
path = show_path(item.lookup_path)
|
3
|
-
display ||= :item
|
4
|
-
label ||= item.label
|
5
|
-
item_icon = display == :node ? "layers" : "eye"
|
6
|
-
%>
|
7
|
-
<li key="nav-item-<%= item.id %>-item">
|
8
|
-
<div id="nav-item-<%= item.id %>" x-data="navItem(<%= item.matchers.to_json %>)" :class="{hidden}" data-path="<%= path %>" x-cloak>
|
9
|
-
<a href="<%= path %>"
|
10
|
-
class="nav-link pr-3 py-[5px] flex items-center w-full group transition hover:bg-gray-200 hover:bg-opacity-50"
|
11
|
-
style="padding-left: calc((<%= depth - 1 %> * 12px) + 0.5rem);"
|
12
|
-
x-ref="link"
|
13
|
-
:class="{'!bg-indigo-100':active}"
|
14
|
-
@click.stop.prevent="navigate"
|
15
|
-
>
|
16
|
-
<div class="relative w-3.5 h-3.5 mr-1.5 <%= "ml-[3px]" if display == :node %> " :class="active ? 'text-gray-900' : 'text-indigo-500'">
|
17
|
-
<%= icon item_icon, size: 3.5, class: "group-hover:text-indigo-800" %>
|
18
|
-
</div>
|
19
|
-
<div class="truncate whitespace-nowrap select-none <%= "font-bold" if display == :node %>">
|
20
|
-
<%= label %>
|
21
|
-
</div>
|
22
|
-
</a>
|
23
|
-
</div>
|
24
|
-
</li>
|
@@ -1,22 +0,0 @@
|
|
1
|
-
<%
|
2
|
-
path = page_path(node.lookup_path)
|
3
|
-
depth = node.hierarchy_depth + 1
|
4
|
-
%>
|
5
|
-
<li key="nav-page-<%= node.id %>-item">
|
6
|
-
<div id="nav-page-<%= node.id %>" x-data="navItem(<%= node.matchers.to_json %>)" :class="{hidden}" data-path="<%= path %>" x-cloak>
|
7
|
-
<a href="<%= path %>"
|
8
|
-
class="nav-link pr-3 py-[5px] flex items-center w-full group transition hover:bg-gray-200 hover:bg-opacity-50"
|
9
|
-
style="padding-left: calc((<%= depth - 1 %> * 12px) + 0.5rem);"
|
10
|
-
x-ref="link"
|
11
|
-
:class="{'!bg-indigo-100':active}"
|
12
|
-
@click.stop.prevent="navigate"
|
13
|
-
>
|
14
|
-
<div class="relative w-3.5 h-3.5 mr-1.5 ml-[3px]" :class="active ? 'text-gray-900' : 'text-indigo-500'">
|
15
|
-
<%= icon "file", size: 3.5, class: "group-hover:text-indigo-800" %>
|
16
|
-
</div>
|
17
|
-
<div class="truncate whitespace-nowrap select-none">
|
18
|
-
<%= node.label %>
|
19
|
-
</div>
|
20
|
-
</a>
|
21
|
-
</div>
|
22
|
-
</li>
|
@@ -1,13 +0,0 @@
|
|
1
|
-
<% examples = node.examples.reject(&:hidden?) %>
|
2
|
-
<% if examples.many? %>
|
3
|
-
<%= component "nav_group", node: node, path: show_path(examples.first.path) do %>
|
4
|
-
<% examples.each do |example| %>
|
5
|
-
<%= component "nav_item", item: example, depth: example.hierarchy_depth + 1 %>
|
6
|
-
<% end %>
|
7
|
-
<% end %>
|
8
|
-
<% else %>
|
9
|
-
<% if examples.any? %>
|
10
|
-
<% example = examples.first %>
|
11
|
-
<%= component "nav_item", item: example, depth: example.hierarchy_depth, label: node.label, display: :node %>
|
12
|
-
<% end %>
|
13
|
-
<% end %>
|
@@ -1,11 +0,0 @@
|
|
1
|
-
<div class="bg-white flex flex-col items-center justify-center border-2 border-dashed border-gray-200 p-6 rounded-md not-prose">
|
2
|
-
<div class="px-4 text-center">
|
3
|
-
<%= icon "alert-triangle", size: 6, class: "text-red-300 mx-auto" %>
|
4
|
-
<div class="mt-2 text-gray-700 max-w-xs">
|
5
|
-
<h5 class="text-base"><%= title %></h5>
|
6
|
-
<p class="mt-1 text-gray-400 text-sm">
|
7
|
-
<%== text %>
|
8
|
-
</p>
|
9
|
-
</div>
|
10
|
-
</div>
|
11
|
-
</div>
|
@@ -1,21 +0,0 @@
|
|
1
|
-
<%
|
2
|
-
value = params.key?(param[:name]) ? params[param[:name]] : param[:default]
|
3
|
-
%>
|
4
|
-
<div
|
5
|
-
ref="<%= @example.id %>-param-<%= param[:name] %>-input"
|
6
|
-
class="px-4 py-3"
|
7
|
-
>
|
8
|
-
<div class="flex items-start max-w-[800px]">
|
9
|
-
<div class="flex-none py-2" :style="`width: ${horizontal ? '200' : '120' }px`">
|
10
|
-
<label for="param-<%= param[:name] %>" class="font-bold">
|
11
|
-
<%= param[:name].titleize %>
|
12
|
-
</label>
|
13
|
-
</div>
|
14
|
-
<div class="flex-grow">
|
15
|
-
<%= render "lookbook/previews/inputs/#{param[:input]}",
|
16
|
-
**param,
|
17
|
-
value: value
|
18
|
-
%>
|
19
|
-
</div>
|
20
|
-
</div>
|
21
|
-
</div>
|
@@ -1,77 +0,0 @@
|
|
1
|
-
<div id="preview" class="grid grid-rows-[40px_1fr]">
|
2
|
-
<%= component "header" do %>
|
3
|
-
<div
|
4
|
-
id="preview-tabs-<%= @example.id %>" class="min-w-0 -mb-px">
|
5
|
-
<nav class="flex h-10 space-x-8 flex-grow pr-8">
|
6
|
-
<% panels.each do |key, props| %>
|
7
|
-
<a
|
8
|
-
id="preview-tab-<%= key %>-<%= @example.id %>"
|
9
|
-
href="#preview-panel-<%= key %>"
|
10
|
-
class="whitespace-nowrap pt-2.5 pb-1.5 px-1 border-b-2 cursor-pointer"
|
11
|
-
:class="{
|
12
|
-
'border-indigo-400': isActivePreviewPanel('<%= key %>'),
|
13
|
-
'border-transparent text-gray-500 hover:text-gray-700': !isActivePreviewPanel('<%= key %>'),
|
14
|
-
}"
|
15
|
-
@click.stop.prevent="switchPreviewPanel('<%= key %>')"
|
16
|
-
<% if props[:hotkey] %>data-hotkey="<%= props[:hotkey] %>"<% end %>
|
17
|
-
>
|
18
|
-
<%== props[:label] %>
|
19
|
-
</a>
|
20
|
-
<% end %>
|
21
|
-
</nav>
|
22
|
-
</div>
|
23
|
-
<div class="flex items-stretch h-full ml-auto space-x-3">
|
24
|
-
<div
|
25
|
-
class="flex items-center text-xs font-mono text-gray-700 space-x-1 opacity-50 hover:opacity-100 transition"
|
26
|
-
:class="{'opacity-100': $store.inspector.preview.resizing}"
|
27
|
-
x-show="isActivePreviewPanel('preview')">
|
28
|
-
<span x-text="`${preview.width}px`"></span>
|
29
|
-
<span class="text-gray-500">x</span>
|
30
|
-
<span x-text="`${preview.height}px`"></span>
|
31
|
-
</div>
|
32
|
-
<div class="flex items-center bg-white border-l border-gray-200 space-x-3 text-gray-400 divide-x divide-gray-300 px-3">
|
33
|
-
<div class="flex items-center space-x-3">
|
34
|
-
<% if feature_enabled? :pages %>
|
35
|
-
<%= component "copy-button",
|
36
|
-
icon: :code,
|
37
|
-
target: "pages-embed-code",
|
38
|
-
tooltip: "Copy page embed code" %>
|
39
|
-
<div id="pages-embed-code" class="hidden">
|
40
|
-
<%= embed <%= @preview.preview_class %>, :<%= @example.name %>, params: <%= request.query_parameters.deep_symbolize_keys.to_s %> %>
|
41
|
-
</div>
|
42
|
-
<% end %>
|
43
|
-
<button
|
44
|
-
x-tooltip.theme.lookbook="`Refresh preview`"
|
45
|
-
@click.prevent.stop="refresh"
|
46
|
-
data-hotkey="r">
|
47
|
-
<%= icon "refresh-cw", size: 3.5, class: "hover:text-indigo-800" %>
|
48
|
-
</button>
|
49
|
-
<a
|
50
|
-
href="<%= preview_path %>"
|
51
|
-
target="_blank"
|
52
|
-
x-tooltip.theme.lookbook="`Open in new window`"
|
53
|
-
data-hotkey="w">
|
54
|
-
<%= icon "external-link", size: 4, class: "hover:text-indigo-800" %>
|
55
|
-
</a>
|
56
|
-
<button
|
57
|
-
x-tooltip.theme.lookbook="`${drawerHidden ? 'show' : 'hide'} drawer`"
|
58
|
-
@click="toggleDrawer"
|
59
|
-
x-show="drawerHidden"
|
60
|
-
data-hotkey="i">
|
61
|
-
<%= icon "${horizontal ? 'credit-card' : 'sidebar'}", size: 4, class: "hover:text-indigo-800 scale-[-1]" %>
|
62
|
-
</button>
|
63
|
-
</div>
|
64
|
-
|
65
|
-
</div>
|
66
|
-
</div>
|
67
|
-
<% end %>
|
68
|
-
<div class="bg-white relative flex-grow">
|
69
|
-
<% panels.each do |key, props| %>
|
70
|
-
<div class="h-full w-full absolute inset-0" x-show="isActivePreviewPanel('<%= key %>')" x-cloak>
|
71
|
-
<div id="preview-panel-<%= example.id %>-<%= key %>" class="h-full">
|
72
|
-
<%= render props[:template], key: key, examples: examples, **props %>
|
73
|
-
</div>
|
74
|
-
</div>
|
75
|
-
<% end %>
|
76
|
-
</div>
|
77
|
-
</div>
|
@@ -1,69 +0,0 @@
|
|
1
|
-
<div
|
2
|
-
x-data="sidebar"
|
3
|
-
@page:morphed.window="setActiveNavItem"
|
4
|
-
class="h-full bg-gray-100 overflow-hidden flex flex-col relative"
|
5
|
-
x-show="$store.sidebar.open"
|
6
|
-
x-cloak>
|
7
|
-
|
8
|
-
<div class="bg-white h-10 border-b border-gray-300 flex flex-none items-center relative pl-4 pr-4">
|
9
|
-
<%= component "branding" %>
|
10
|
-
<button class="flex-none flex items-center ml-auto" @click="$store.sidebar.toggle">
|
11
|
-
<%= icon "menu", size: 4, class: "text-indigo-500 transition" %>
|
12
|
-
</button>
|
13
|
-
</div>
|
14
|
-
|
15
|
-
<% if feature_enabled?(:pages) && Lookbook.pages.any? %>
|
16
|
-
<div
|
17
|
-
class="grid overflow-hidden flex-grow"
|
18
|
-
:style="`grid-template-rows: ${$store.sidebar.panelSplits[0] || 1}fr 1px ${$store.sidebar.panelSplits[1] || 1}fr;`"
|
19
|
-
x-ref="sidebarPanels">
|
20
|
-
<div class="flex flex-col overflow-hidden">
|
21
|
-
<div class="flex items-center flex-none border-b border-gray-300 h-10 bg-white relative px-4">
|
22
|
-
<h2 class="whitespace-nowrap relative">Previews</h2>
|
23
|
-
</div>
|
24
|
-
<div x-ref="filter" class="px-2 py-2 relative" x-cloak>
|
25
|
-
<%= component "filter" %>
|
26
|
-
</div>
|
27
|
-
<div class="flex-grow pb-3 overflow-auto">
|
28
|
-
<%= component "nav", items: Lookbook.previews.as_tree, filterable: true %>
|
29
|
-
</div>
|
30
|
-
</div>
|
31
|
-
<div
|
32
|
-
x-data="splitter('horizontal', {minSize: 40})"
|
33
|
-
class="w-full gutter border-t border-gray-300 relative"
|
34
|
-
x-effect="setSplits(splits)">
|
35
|
-
<div class="h-[11px] w-full bg-transparent hover:bg-indigo-100 hover:bg-opacity-20 transition absolute left-0 right-0 -translate-y-1/2 cursor-[row-resize]"></div>
|
36
|
-
</div>
|
37
|
-
<div class="flex flex-col overflow-hidden">
|
38
|
-
<div class="flex items-center flex-none border-b border-gray-300 h-10 bg-white relative px-4">
|
39
|
-
<h2 class="whitespace-nowrap relative">Pages</h2>
|
40
|
-
</div>
|
41
|
-
<div class="flex-grow pt-2 pb-3 overflow-auto">
|
42
|
-
<%= component "nav", items: Lookbook.pages.as_tree, filterable: false %>
|
43
|
-
</div>
|
44
|
-
</div>
|
45
|
-
</div>
|
46
|
-
<% else %>
|
47
|
-
<div x-ref="filter" class="px-2 py-2 relative" x-cloak>
|
48
|
-
<%= component "filter" %>
|
49
|
-
</div>
|
50
|
-
<div class="flex-grow overflow-y-auto unsectioned">
|
51
|
-
<%= component "nav", items: Lookbook.previews.as_tree, filterable: true %>
|
52
|
-
</div>
|
53
|
-
<% end %>
|
54
|
-
|
55
|
-
<% if Lookbook::Preview.errors.any? %>
|
56
|
-
<div class="flex-none" x-ref="preview-errors" id="preview-errors">
|
57
|
-
<div class="flex items-center border-b border-t border-gray-300 h-10 bg-white px-4">
|
58
|
-
<h2 class="flex items-center flex-none">
|
59
|
-
<%= icon "alert-triangle", size: 4, class: "text-red-700" %>
|
60
|
-
<span class="ml-2">Preview load errors</span>
|
61
|
-
</h2>
|
62
|
-
</div>
|
63
|
-
<div class="h-full max-h-[300px] overflow-hidden">
|
64
|
-
<%= component "errors", errors: Lookbook::Preview.errors %>
|
65
|
-
</div>
|
66
|
-
</div>
|
67
|
-
<% end %>
|
68
|
-
|
69
|
-
</div>
|
@@ -1,15 +0,0 @@
|
|
1
|
-
<div id="page-not-found" class="bg-white flex flex-col items-center justify-center h-screen w-full">
|
2
|
-
<div class="p-4 text-center">
|
3
|
-
<%= icon "alert-triangle", size: 10, class: "text-red-300 mx-auto" %>
|
4
|
-
<div class="mt-3 text-gray-700 max-w-xs">
|
5
|
-
<div data-role="page-not-found">
|
6
|
-
<h5 class="text-base">Page not found</h5>
|
7
|
-
<% if params[:path].present? %>
|
8
|
-
<p class="mt-2 text-gray-400 text-sm">
|
9
|
-
The page "<span class="text-gray-500"><%= params[:path] %></span>" does not exist.
|
10
|
-
</p>
|
11
|
-
<% end %>
|
12
|
-
</div>
|
13
|
-
</div>
|
14
|
-
</div>
|
15
|
-
</div>
|
@@ -1 +0,0 @@
|
|
1
|
-
<iframe id="error-iframe" src="<%= url_for lookbook.preview_path %>" frameborder="0" class=" h-screen w-full" seamless></iframe>
|
@@ -1,13 +0,0 @@
|
|
1
|
-
<div x-data="param('<%= name %>', <%= value %>)" data-morph-strategy="replace">
|
2
|
-
<button type="button"
|
3
|
-
class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-400"
|
4
|
-
:class="{'bg-indigo-500': value, 'bg-gray-300': !value}"
|
5
|
-
role="switch"
|
6
|
-
@click.stop="value = !value;">
|
7
|
-
<span
|
8
|
-
aria-hidden="true"
|
9
|
-
class="pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200"
|
10
|
-
:class="{'translate-x-5': value, 'translate-x-0': !value}"
|
11
|
-
></span>
|
12
|
-
</button>
|
13
|
-
</div>
|
@@ -1,23 +0,0 @@
|
|
1
|
-
<div id="not-found" class="bg-white flex flex-col items-center justify-center h-screen w-full">
|
2
|
-
<div class="px-4 text-center">
|
3
|
-
<%= icon "alert-triangle", size: 10, class: "text-red-300 mx-auto" %>
|
4
|
-
<div class="mt-3 text-gray-700 max-w-xs">
|
5
|
-
<% if @preview %>
|
6
|
-
<div data-role="example-not-found">
|
7
|
-
<h5 class="text-base">Not found</h5>
|
8
|
-
<p class="mt-2 text-gray-400 text-sm">
|
9
|
-
The "<span class="text-gray-500"><%= @preview.label %></span>" preview does not have an example named "<span class="text-gray-500"><%= @example_name %></span>".
|
10
|
-
</p>
|
11
|
-
</div>
|
12
|
-
<% else %>
|
13
|
-
<div data-role="preview-not-found">
|
14
|
-
<h5 class="text-base">Preview not found</h5>
|
15
|
-
<p class="mt-2 text-gray-400 text-sm">
|
16
|
-
Looked for "<span class="text-gray-500"><%= params[:path] %></span>".<br>
|
17
|
-
The preview may have been renamed or deleted.
|
18
|
-
</p>
|
19
|
-
</div>
|
20
|
-
<% end %>
|
21
|
-
</div>
|
22
|
-
</div>
|
23
|
-
</div>
|