lookbook 0.6.1 → 0.7.2.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 +233 -5
- data/app/assets/lookbook/css/app.css +15 -3
- data/app/assets/lookbook/js/app.js +8 -0
- data/app/assets/lookbook/js/components/app.js +55 -0
- data/app/assets/lookbook/js/components/embed.js +89 -0
- data/app/assets/lookbook/js/components/filter.js +13 -2
- data/app/assets/lookbook/js/components/nav-group.js +3 -6
- data/app/assets/lookbook/js/components/nav-item.js +3 -1
- data/app/assets/lookbook/js/components/nav.js +8 -15
- data/app/assets/lookbook/js/components/page.js +19 -41
- data/app/assets/lookbook/js/components/sidebar.js +16 -1
- data/app/assets/lookbook/js/components/splitter.js +1 -1
- data/app/assets/lookbook/js/components/tabs.js +3 -1
- data/app/assets/lookbook/js/embed.js +1 -0
- data/app/assets/lookbook/js/lib/split.js +0 -6
- data/app/assets/lookbook/js/stores/layout.js +3 -0
- data/app/assets/lookbook/js/stores/pages.js +5 -0
- data/app/assets/lookbook/js/stores/sidebar.js +2 -1
- data/app/controllers/lookbook/application_controller.rb +28 -0
- data/app/controllers/lookbook/page_controller.rb +20 -0
- data/app/controllers/lookbook/pages_controller.rb +47 -0
- data/app/controllers/lookbook/{app_controller.rb → previews_controller.rb} +39 -70
- data/app/helpers/lookbook/application_helper.rb +8 -61
- data/app/helpers/lookbook/component_helper.rb +40 -0
- data/app/helpers/lookbook/output_helper.rb +15 -0
- data/app/helpers/lookbook/page_helper.rb +46 -0
- data/app/helpers/lookbook/preview_helper.rb +1 -1
- data/app/views/layouts/lookbook/application.html.erb +30 -0
- data/app/views/layouts/lookbook/basic.html.erb +7 -0
- data/app/views/layouts/lookbook/preview.html.erb +5 -1
- data/app/views/layouts/lookbook/skeleton.html.erb +28 -0
- data/app/views/lookbook/components/_branding.html.erb +8 -0
- data/app/views/lookbook/components/_code.html.erb +2 -2
- data/app/views/lookbook/components/_copy_button.html.erb +11 -0
- data/app/views/lookbook/components/_drawer.html.erb +4 -16
- data/app/views/lookbook/components/_embed.html.erb +39 -0
- data/app/views/lookbook/components/_errors.html.erb +13 -0
- data/app/views/lookbook/components/_filter.html.erb +8 -5
- data/app/views/lookbook/components/_header.html.erb +2 -4
- data/app/views/lookbook/components/_icon.html.erb +2 -2
- data/app/views/lookbook/components/_nav.html.erb +7 -8
- data/app/views/lookbook/components/_nav_group.html.erb +1 -1
- data/app/views/lookbook/components/_nav_item.html.erb +4 -3
- data/app/views/lookbook/components/_nav_page.html.erb +22 -0
- data/app/views/lookbook/components/_nav_preview.html.erb +1 -1
- data/app/views/lookbook/components/_not_found.html.erb +11 -0
- data/app/views/lookbook/components/_param.html.erb +1 -1
- data/app/views/lookbook/components/_preview.html.erb +17 -11
- data/app/views/lookbook/components/_sidebar.html.erb +69 -0
- data/app/views/lookbook/error.html.erb +31 -1
- data/app/views/lookbook/pages/not_found.html.erb +15 -0
- data/app/views/lookbook/pages/show.html.erb +71 -0
- data/app/views/lookbook/previews/error.html.erb +1 -0
- data/app/views/lookbook/{inputs → previews/inputs}/_select.html.erb +0 -0
- data/app/views/lookbook/{inputs → previews/inputs}/_text.html.erb +0 -0
- data/app/views/lookbook/{inputs → previews/inputs}/_textarea.html.erb +0 -0
- data/app/views/lookbook/{inputs → previews/inputs}/_toggle.html.erb +0 -0
- data/app/views/lookbook/{not_found.html.erb → previews/not_found.html.erb} +2 -2
- data/app/views/lookbook/{panels → previews/panels}/_notes.html.erb +2 -2
- data/app/views/lookbook/{panels → previews/panels}/_output.html.erb +0 -0
- data/app/views/lookbook/{panels → previews/panels}/_params.html.erb +0 -0
- data/app/views/lookbook/{panels → previews/panels}/_preview.html.erb +0 -0
- data/app/views/lookbook/{panels → previews/panels}/_source.html.erb +0 -0
- data/app/views/lookbook/{show.html.erb → previews/show.html.erb} +0 -0
- data/config/routes.rb +9 -4
- data/lib/lookbook/code_formatter.rb +22 -1
- data/lib/lookbook/code_inspector.rb +73 -0
- data/lib/lookbook/collection.rb +110 -8
- data/lib/lookbook/engine.rb +63 -37
- data/lib/lookbook/error.rb +52 -0
- data/lib/lookbook/features.rb +1 -1
- data/lib/lookbook/markdown.rb +31 -0
- data/lib/lookbook/page.rb +158 -0
- data/lib/lookbook/page_collection.rb +11 -0
- data/lib/lookbook/parser.rb +2 -0
- data/lib/lookbook/preview.rb +111 -57
- data/lib/lookbook/preview_collection.rb +15 -0
- data/lib/lookbook/preview_example.rb +27 -29
- data/lib/lookbook/preview_group.rb +12 -6
- data/lib/lookbook/utils.rb +74 -0
- data/lib/lookbook/version.rb +1 -1
- data/lib/lookbook.rb +19 -1
- data/public/lookbook-assets/css/app.css +1 -1
- data/public/lookbook-assets/css/app.css.map +1 -1
- data/public/lookbook-assets/js/app.js +1 -1
- data/public/lookbook-assets/js/app.js.map +1 -1
- data/public/lookbook-assets/js/embed.js +2 -0
- data/public/lookbook-assets/js/embed.js.map +1 -0
- metadata +48 -19
- data/app/assets/lookbook/js/lib/utils.js +0 -3
- data/app/views/layouts/lookbook/app.html.erb +0 -60
- data/lib/lookbook/taggable.rb +0 -46
@@ -0,0 +1,30 @@
|
|
1
|
+
<%= content_for :body do %>
|
2
|
+
<div
|
3
|
+
id="app"
|
4
|
+
x-data="app"
|
5
|
+
:style="`grid-template-columns: ${$store.sidebar.width}px 1px 1fr;`"
|
6
|
+
:class="{'grid': $store.sidebar.open && $store.layout.desktop}"
|
7
|
+
@popstate.window="await update(); $dispatch('page:changed')"
|
8
|
+
@refresh.window="update"
|
9
|
+
@resize.window="$store.layout.desktop = window.innerWidth >= $store.layout.desktopWidth"
|
10
|
+
class="w-screen h-screen">
|
11
|
+
<%= component "sidebar" %>
|
12
|
+
<div
|
13
|
+
x-data="splitter('vertical', {minSize: $store.sidebar.minWidth})"
|
14
|
+
class="h-full gutter border-r border-gray-300 relative"
|
15
|
+
x-show="$store.sidebar.open && $store.layout.desktop"
|
16
|
+
x-effect="$store.sidebar.width = Math.min(splits[0] || $store.sidebar.width, $store.sidebar.maxWidth)"
|
17
|
+
x-cloak>
|
18
|
+
<div class="w-[9px] h-full bg-transparent hover:bg-indigo-100 hover:bg-opacity-20 transition absolute top-0 bottom-0 -translate-x-1/2 cursor-[col-resize] z-10"></div>
|
19
|
+
</div>
|
20
|
+
<main
|
21
|
+
id="main"
|
22
|
+
class="h-full overflow-hidden w-full"
|
23
|
+
x-show="$store.layout.desktop || ($store.layout.mobile && !$store.sidebar.open)"
|
24
|
+
x-cloak>
|
25
|
+
<%= yield %>
|
26
|
+
</main>
|
27
|
+
</div>
|
28
|
+
<% end %>
|
29
|
+
|
30
|
+
<%= render template: "layouts/lookbook/skeleton" %>
|
@@ -0,0 +1,28 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html lang="en" class="h-screen">
|
3
|
+
<head>
|
4
|
+
<meta charset="UTF-8">
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
7
|
+
|
8
|
+
<link href="/lookbook-assets/css/app.css?v=<%= Lookbook::VERSION %>" rel="stylesheet">
|
9
|
+
<% if config.ui_favicon != false %>
|
10
|
+
<link rel="icon" href="<%= config.ui_favicon || "data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👀</text></svg>" %>">
|
11
|
+
<% end %>
|
12
|
+
|
13
|
+
<% if Lookbook::Engine.websocket %>
|
14
|
+
<script>
|
15
|
+
window.SOCKET_PATH = "<%= Lookbook::Engine.websocket_mount_path %>";
|
16
|
+
</script>
|
17
|
+
<% end %>
|
18
|
+
<script src="/lookbook-assets/js/app.js?v=<%= Lookbook.version %>" defer></script>
|
19
|
+
<% if params[:lookbook_embed] %>
|
20
|
+
<script src="/lookbook-assets/js/embed.js?v=<%= Lookbook.version %>" defer></script>
|
21
|
+
<% end %>
|
22
|
+
|
23
|
+
<title><%= [@title, config.project_name || "Lookbook"].compact.join(" :: ") %></title>
|
24
|
+
</head>
|
25
|
+
<body class="text-gray-800 font-sans text-sm antialiased overflow-hidden">
|
26
|
+
<%= yield :body %>
|
27
|
+
</body>
|
28
|
+
</html>
|
@@ -3,8 +3,8 @@ line_numbers ||= false
|
|
3
3
|
language ||= "html"
|
4
4
|
wrap ||= nil;
|
5
5
|
%>
|
6
|
-
<% code
|
7
|
-
<div class="code <%= "numbered" if line_numbers %> <%= classes %>"
|
6
|
+
<% code ||= capture do %><%= yield %><% end %>
|
7
|
+
<div class="code not-prose <%= "numbered" if line_numbers %> <%= classes ||= "" %>"
|
8
8
|
x-data="code"
|
9
9
|
:class="{'wrapped': wrap}"
|
10
10
|
<% if wrap.present? %>x-effect="wrap = <%= wrap %>"<% end %>
|
@@ -0,0 +1,11 @@
|
|
1
|
+
<%= tag.button disabled: disabled ||= false,
|
2
|
+
"x-data": "copy",
|
3
|
+
"x-tooltip.theme.lookbook": "done ? 'copied!' : '#{tooltip ||= "copy to clipboard"}'",
|
4
|
+
"@click": "save",
|
5
|
+
":class": "{ '!text-green-600 hover:text-green-600': done, 'hover:text-indigo-500': !done}",
|
6
|
+
"x-cloak": true,
|
7
|
+
class: "text-gray-400 transition",
|
8
|
+
data: { target: target },
|
9
|
+
**(attrs ||= {}) do %>
|
10
|
+
<%= icon "${done ? 'check' : '#{icon ||= "clipboard"}'}", size: 4 %>
|
11
|
+
<% end %>
|
@@ -65,22 +65,10 @@
|
|
65
65
|
class="flex items-center"
|
66
66
|
:class="{'pointer-events-none opacity-30': <%= !props[:copy].present? %>}"
|
67
67
|
x-show="isActiveDrawerPanel('<%= key %>')"
|
68
|
-
x-cloak
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
class="text-gray-400 transition"
|
73
|
-
x-data="copy"
|
74
|
-
x-tooltip.theme.lookbook="done ? 'copied!' : 'copy to clipboard'"
|
75
|
-
@click="save"
|
76
|
-
:class="{
|
77
|
-
'!text-green-600 hover:text-green-600': done,
|
78
|
-
'hover:text-indigo-500': !done}"
|
79
|
-
x-cloak
|
80
|
-
<% unless props[:copy].present? %>disabled<% end %>
|
81
|
-
>
|
82
|
-
<%= icon "${done ? 'check' : 'clipboard'}", size: 4 %>
|
83
|
-
</button>
|
68
|
+
x-cloak>
|
69
|
+
<%= component "copy-button",
|
70
|
+
target: "inspector-panel-#{example.id}-#{key}-clipboard",
|
71
|
+
disabled: !props[:copy].present? %>
|
84
72
|
</div>
|
85
73
|
<% end %>
|
86
74
|
</div>
|
@@ -0,0 +1,39 @@
|
|
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>
|
@@ -0,0 +1,13 @@
|
|
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,15 +1,18 @@
|
|
1
|
-
<div x-data="filter" class="
|
1
|
+
<div x-data="filter" class="bg-white rounded-md border border-gray-200 " :class="{'!border-gray-300': focussed}">
|
2
2
|
<input
|
3
3
|
type="text"
|
4
|
-
class="text-sm
|
5
|
-
placeholder="Filter
|
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
6
|
x-ref="input"
|
7
7
|
x-model="$store.filter.raw"
|
8
8
|
x-effect="if (!$store.layout.desktop && $store.sidebar.open) focus()"
|
9
9
|
@keyup.stop="checkEsc"
|
10
10
|
@keyup.f.document="focus"
|
11
|
-
|
12
|
-
|
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}">
|
13
16
|
<%= icon "x", size: 3, class: "hover:text-indigo-500" %>
|
14
17
|
</button>
|
15
18
|
</div>
|
@@ -1,8 +1,6 @@
|
|
1
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.
|
3
|
-
|
4
|
-
<use xlink:href="/lookbook-assets/feather-sprite.svg#menu" />
|
5
|
-
</svg>
|
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" %>
|
6
4
|
</button>
|
7
5
|
<%= yield %>
|
8
6
|
</header>
|
@@ -1,5 +1,5 @@
|
|
1
|
-
<i class="transition block flex-none leading-none w-<%= size %> h-<%= size %> <%= classes %>">
|
1
|
+
<i class="transition block flex-none leading-none w-<%= size %> h-<%= size %> <%= classes ||= "" %>">
|
2
2
|
<svg class="feather w-full h-full">
|
3
|
-
<use :href="`/lookbook-assets/feather-sprite.svg#<%= name %>`" x-cloak />
|
3
|
+
<use :href="`/lookbook-assets/feather-sprite.svg#<%= name.to_s %>`" x-cloak />
|
4
4
|
</svg>
|
5
5
|
</i>
|
@@ -1,17 +1,16 @@
|
|
1
|
-
<nav id="nav" x-data="nav
|
1
|
+
<nav id="nav" x-data="nav(<%= filterable %>)">
|
2
2
|
<% if items.any? %>
|
3
|
-
<ul x-ref="items">
|
4
|
-
<% items.each do |
|
5
|
-
<%= component "nav_#{
|
3
|
+
<ul x-ref="items" id="nav-<%= items.class.describe_as %>">
|
4
|
+
<% items.each do |item| %>
|
5
|
+
<%= component "nav_#{item.type}", node: item %>
|
6
6
|
<% end %>
|
7
7
|
</ul>
|
8
8
|
<div class="p-4 text-center" x-show="empty" x-cloak>
|
9
|
-
<em class="text-gray-400">No matching
|
9
|
+
<em class="text-gray-400 italic">No matching <%= items.class.describe_as %> found.</em>
|
10
10
|
</div>
|
11
11
|
<% else %>
|
12
|
-
<div class="p-4">
|
13
|
-
<h4 class="text-gray-
|
14
|
-
<p class="text-gray-400 text-xs">Have you set your <a class="underline" href="https://viewcomponent.org/api.html#preview_paths">preview paths</a> config correctly?</p>
|
12
|
+
<div class="p-4 text-center">
|
13
|
+
<h4 class="text-gray-400 italic">No <%= items.class.describe_as %> found.</h4>
|
15
14
|
</div>
|
16
15
|
<% end %>
|
17
16
|
</nav>
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<li key="
|
1
|
+
<li key="nav-group-<%= node.id %>-item" class="<%= classes %>">
|
2
2
|
<div id="nav-group-<%= node.id %>" x-data="navGroup" :class="{hidden}" x-cloak>
|
3
3
|
<div @click="toggle" class="nav-toggle py-[5px]" style="padding-left: calc((<%= node.hierarchy_depth - 1 %> * 12px) + 0.5rem);">
|
4
4
|
<%= icon "${open ? 'chevron-down' : 'chevron-right'}", size: 3, class: "mr-1 text-gray-500" %>
|
@@ -1,9 +1,10 @@
|
|
1
1
|
<%
|
2
|
-
path = show_path
|
2
|
+
path = show_path(item.lookup_path)
|
3
3
|
display ||= :item
|
4
4
|
label ||= item.label
|
5
|
+
item_icon = display == :node ? "layers" : "eye"
|
5
6
|
%>
|
6
|
-
<li key="
|
7
|
+
<li key="nav-item-<%= item.id %>-item">
|
7
8
|
<div id="nav-item-<%= item.id %>" x-data="navItem(<%= item.matchers.to_json %>)" :class="{hidden}" data-path="<%= path %>" x-cloak>
|
8
9
|
<a href="<%= path %>"
|
9
10
|
class="nav-link pr-3 py-[5px] flex items-center w-full group transition hover:bg-gray-200 hover:bg-opacity-50"
|
@@ -13,7 +14,7 @@ label ||= item.label
|
|
13
14
|
@click.stop.prevent="navigate"
|
14
15
|
>
|
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'">
|
16
|
-
<%= icon
|
17
|
+
<%= icon item_icon, size: 3.5, class: "group-hover:text-indigo-800" %>
|
17
18
|
</div>
|
18
19
|
<div class="truncate whitespace-nowrap select-none <%= "font-bold" if display == :node %>">
|
19
20
|
<%= label %>
|
@@ -0,0 +1,22 @@
|
|
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>
|
@@ -0,0 +1,11 @@
|
|
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>
|
@@ -12,7 +12,7 @@ value = params.key?(param[:name]) ? params[param[:name]] : param[:default]
|
|
12
12
|
</label>
|
13
13
|
</div>
|
14
14
|
<div class="flex-grow">
|
15
|
-
<%= render "lookbook/inputs/#{param[:input]}",
|
15
|
+
<%= render "lookbook/previews/inputs/#{param[:input]}",
|
16
16
|
**param,
|
17
17
|
value: value
|
18
18
|
%>
|
@@ -22,7 +22,7 @@
|
|
22
22
|
</div>
|
23
23
|
<div class="flex items-stretch h-full ml-auto space-x-3">
|
24
24
|
<div
|
25
|
-
class="flex items-center text-xs font-
|
25
|
+
class="flex items-center text-xs font-mono text-gray-700 space-x-1 opacity-50 hover:opacity-100 transition"
|
26
26
|
:class="{'opacity-100': $store.inspector.preview.resizing}"
|
27
27
|
x-show="isActivePreviewPanel('preview')">
|
28
28
|
<span x-text="`${preview.width}px`"></span>
|
@@ -31,28 +31,34 @@
|
|
31
31
|
</div>
|
32
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
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 %>
|
34
43
|
<button
|
35
44
|
x-tooltip.theme.lookbook="`Refresh preview`"
|
36
45
|
@click.prevent.stop="refresh"
|
37
|
-
data-hotkey="r"
|
38
|
-
|
39
|
-
<%= icon "refresh-cw", size: 4, class: "hover:text-indigo-800" %>
|
46
|
+
data-hotkey="r">
|
47
|
+
<%= icon "refresh-cw", size: 3.5, class: "hover:text-indigo-800" %>
|
40
48
|
</button>
|
41
49
|
<a
|
42
50
|
href="<%= preview_path %>"
|
43
51
|
target="_blank"
|
44
52
|
x-tooltip.theme.lookbook="`Open in new window`"
|
45
|
-
data-hotkey="w"
|
46
|
-
|
47
|
-
<%= icon "external-link", size: 4, class: "hover:text-indigo-800" %>
|
53
|
+
data-hotkey="w">
|
54
|
+
<%= icon "external-link", size: 4, class: "hover:text-indigo-800" %>
|
48
55
|
</a>
|
49
56
|
<button
|
50
57
|
x-tooltip.theme.lookbook="`${drawerHidden ? 'show' : 'hide'} drawer`"
|
51
58
|
@click="toggleDrawer"
|
52
|
-
|
53
|
-
data-hotkey="i"
|
54
|
-
|
55
|
-
<%= icon "${horizontal ? 'credit-card' : 'sidebar'}", size: 4, class: "hover:text-indigo-800 scale-[-1]" %>
|
59
|
+
x-show="drawerHidden"
|
60
|
+
data-hotkey="i">
|
61
|
+
<%= icon "${horizontal ? 'credit-card' : 'sidebar'}", size: 4, class: "hover:text-indigo-800 scale-[-1]" %>
|
56
62
|
</button>
|
57
63
|
</div>
|
58
64
|
|
@@ -0,0 +1,69 @@
|
|
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 +1,31 @@
|
|
1
|
-
|
1
|
+
<%
|
2
|
+
error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error)
|
3
|
+
@title = error.title
|
4
|
+
disable_header ||= false
|
5
|
+
%>
|
6
|
+
<%= component "header" unless disable_header %>
|
7
|
+
<div class="h-full w-full bg-red-50 flex flex-col border-red-300">
|
8
|
+
<header class="flex-none px-8 py-8">
|
9
|
+
<h2 class="text-xl font-bold text-red-700"><%= error.title %></h2>
|
10
|
+
</header>
|
11
|
+
|
12
|
+
<div class="flex-none px-8 py-6 border-t border-b border-red-200 bg-red-100 text-base font-mono leading-relaxed">
|
13
|
+
<% if error.file_name %>
|
14
|
+
<div class="mb-2 text-gray-500">
|
15
|
+
<%= error.file_name %><%= ":#{error.line_number}" if error.line_number %>
|
16
|
+
</div>
|
17
|
+
<% end %>
|
18
|
+
<pre class="whitespace-pre-wrap"><%= error.message %></pre>
|
19
|
+
</div>
|
20
|
+
|
21
|
+
<h3 class="font-bold mt-6 mb-4 px-8 flex-none">Full stack trace</h3>
|
22
|
+
<div class="text-xs font-mono flex-grow h-full overflow-hidden">
|
23
|
+
<div class="h-full overflow-auto px-8 pb-10 text-gray-400">
|
24
|
+
<% error.backtrace.each do |line| %>
|
25
|
+
<div class="py-1 hover:text-gray-900 transition-colors duration-100">
|
26
|
+
<%= line %>
|
27
|
+
</div>
|
28
|
+
<% end %>
|
29
|
+
</div>
|
30
|
+
</div>
|
31
|
+
</div>
|
@@ -0,0 +1,15 @@
|
|
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>
|
@@ -0,0 +1,71 @@
|
|
1
|
+
<div
|
2
|
+
id="page"
|
3
|
+
class="grid grid-rows-[40px_1fr] bg-gray-50 h-full"
|
4
|
+
x-data="page"
|
5
|
+
@click="checkForNavigation"
|
6
|
+
@page:changed.window="scrollToTop">
|
7
|
+
<%= component "header" do %>
|
8
|
+
<div id="page-banner-<%= @page.id %>" class="flex items-center ml-auto pr-2">
|
9
|
+
<% if @previous_page %>
|
10
|
+
<a ref="header-previous-page"
|
11
|
+
href="<%= page_path @previous_page.lookup_path %>"
|
12
|
+
x-tooltip.theme.lookbook="`Previous page`"
|
13
|
+
class="flex-none p-1">
|
14
|
+
<%= icon "chevron-left", size: 4, class: "hover:text-indigo-800" %>
|
15
|
+
</a>
|
16
|
+
<% else %>
|
17
|
+
<span ref="header-previous-page" class="flex-none p-1">
|
18
|
+
<%= icon "chevron-left", size: 4, class: "opacity-20" %>
|
19
|
+
</span>
|
20
|
+
<% end %>
|
21
|
+
|
22
|
+
<% if @next_page %>
|
23
|
+
<a ref="header-next-page"
|
24
|
+
href="<%= page_path @next_page.lookup_path %>"
|
25
|
+
x-tooltip.theme.lookbook="`Next page`"
|
26
|
+
class="flex-none p-1">
|
27
|
+
<%= icon "chevron-right", size: 4, class: "hover:text-indigo-800" %>
|
28
|
+
</a>
|
29
|
+
<% else %>
|
30
|
+
<span ref="header-next-page" class="flex-none p-1">
|
31
|
+
<%= icon "chevron-right", size: 4, class: "opacity-20" %>
|
32
|
+
</span>
|
33
|
+
<% end %>
|
34
|
+
</div>
|
35
|
+
<% end %>
|
36
|
+
<div class="px-4 md:px-10 w-full pt-8 md:pt-12 overflow-auto pb-10 scroll-smooth" x-ref="scroller">
|
37
|
+
<div class="w-full max-w-3xl mx-auto text-gray-600">
|
38
|
+
<% if @page.header? %>
|
39
|
+
<header id="page-header-<%= @page.id %>" class="mb-10 prose max-w-none">
|
40
|
+
<h1><%= @page.title %></h1>
|
41
|
+
</header>
|
42
|
+
<% end %>
|
43
|
+
<div id="page-main-<%= @page.id %>" data-morph-strategy="replace">
|
44
|
+
<div class="prose max-w-none prose-a:text-indigo-900">
|
45
|
+
<%= @page_content %>
|
46
|
+
</div>
|
47
|
+
</div>
|
48
|
+
<% if @page.footer? %>
|
49
|
+
<footer id="page-footer-<%= @page.id %>" class="flex items-center justify-between border-t border-gray-300 mt-12 pt-8">
|
50
|
+
<% if @previous_page %>
|
51
|
+
<a ref="footer-previous-page"
|
52
|
+
href="<%= page_path @previous_page.lookup_path %>"
|
53
|
+
class="flex items-center flex-none">
|
54
|
+
<%= icon "arrow-left", size: 4, class: "hover:text-indigo-800" %>
|
55
|
+
<span class="ml-2 underline"><%= @previous_page.title %></span>
|
56
|
+
</a>
|
57
|
+
<% end %>
|
58
|
+
|
59
|
+
<% if @next_page %>
|
60
|
+
<a ref="footer-next-page"
|
61
|
+
href="<%= page_path @next_page.lookup_path %>"
|
62
|
+
class="flex items-center flex-none ml-auto">
|
63
|
+
<span class="mr-2 underline"><%= @next_page.title %></span>
|
64
|
+
<%= icon "arrow-right", size: 4, class: "hover:text-indigo-800" %>
|
65
|
+
</a>
|
66
|
+
<% end %>
|
67
|
+
</footer>
|
68
|
+
<% end %>
|
69
|
+
</div>
|
70
|
+
</div>
|
71
|
+
</div>
|
@@ -0,0 +1 @@
|
|
1
|
+
<iframe id="error-iframe" src="<%= url_for lookbook.preview_path %>" frameborder="0" class=" h-screen w-full" seamless></iframe>
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
@@ -1,5 +1,5 @@
|
|
1
|
-
<div class="bg-white flex flex-col items-center justify-center h-screen w-full">
|
2
|
-
<div class="
|
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
3
|
<%= icon "alert-triangle", size: 10, class: "text-red-300 mx-auto" %>
|
4
4
|
<div class="mt-3 text-gray-700 max-w-xs">
|
5
5
|
<% if @preview %>
|