lookbook 0.4.5 → 0.5.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 +8 -4
- data/app/assets/lookbook/css/app.css +63 -5
- data/app/assets/lookbook/css/tooltip_theme.css +28 -0
- data/app/assets/lookbook/js/app.js +40 -54
- data/app/assets/lookbook/js/components/copy.js +16 -0
- data/app/assets/lookbook/js/components/filter.js +24 -0
- data/app/assets/lookbook/js/components/inspector.js +58 -0
- data/app/assets/lookbook/js/{nav/node.js → components/nav-group.js} +17 -16
- data/app/assets/lookbook/js/components/nav-item.js +27 -0
- data/app/assets/lookbook/js/components/nav.js +35 -0
- data/app/assets/lookbook/js/components/page.js +45 -0
- data/app/assets/lookbook/js/components/param.js +32 -0
- data/app/assets/lookbook/js/components/preview-window.js +107 -0
- data/app/assets/lookbook/js/components/sidebar.js +3 -0
- data/app/assets/lookbook/js/components/sizes.js +16 -0
- data/app/assets/lookbook/js/components/splitter.js +25 -0
- data/app/assets/lookbook/js/components/tabs.js +50 -0
- data/app/assets/lookbook/js/config.js +20 -0
- data/app/assets/lookbook/js/{utils/reloader.js → lib/socket.js} +7 -12
- data/app/assets/lookbook/js/lib/split.js +21 -0
- data/app/assets/lookbook/js/lib/utils.js +3 -0
- data/app/assets/lookbook/js/stores/filter.js +11 -0
- data/app/assets/lookbook/js/stores/inspector.js +24 -0
- data/app/assets/lookbook/js/stores/layout.js +12 -0
- data/app/assets/lookbook/js/stores/nav.js +21 -0
- data/app/assets/lookbook/js/stores/sidebar.js +14 -0
- data/app/controllers/lookbook/app_controller.rb +71 -96
- data/app/helpers/lookbook/application_helper.rb +48 -4
- data/app/views/layouts/lookbook/app.html.erb +58 -0
- data/app/views/layouts/lookbook/preview.html.erb +12 -0
- data/app/views/lookbook/components/_code.html.erb +8 -0
- data/app/views/lookbook/components/_copy.html.erb +14 -0
- data/app/views/lookbook/components/_drawer.html.erb +121 -0
- data/app/views/lookbook/components/_filter.html.erb +15 -0
- data/app/views/lookbook/{shared → components}/_header.html.erb +3 -3
- data/app/views/lookbook/components/_icon.html.erb +5 -0
- data/app/views/lookbook/components/_nav.html.erb +17 -0
- data/app/views/lookbook/components/_nav_collection.html.erb +5 -0
- data/app/views/lookbook/components/_nav_group.html.erb +14 -0
- data/app/views/lookbook/components/_nav_item.html.erb +23 -0
- data/app/views/lookbook/components/_nav_preview.html.erb +11 -0
- data/app/views/lookbook/components/_param.html.erb +24 -0
- data/app/views/lookbook/components/_preview.html.erb +52 -0
- data/app/views/lookbook/{app/error.html.erb → error.html.erb} +0 -0
- data/app/views/lookbook/index.html.erb +9 -0
- data/app/views/lookbook/{workbench/inspector/params → inputs}/_select.html.erb +2 -2
- data/app/views/lookbook/{workbench/inspector/params → inputs}/_text.html.erb +3 -2
- data/app/views/lookbook/inputs/_textarea.html.erb +9 -0
- data/app/views/lookbook/{workbench/inspector/params → inputs}/_toggle.html.erb +5 -5
- data/app/views/lookbook/{app/not_found.html.erb → not_found.html.erb} +2 -4
- data/app/views/lookbook/panels/_notes.html.erb +25 -0
- data/app/views/lookbook/panels/_output.html.erb +18 -0
- data/app/views/lookbook/panels/_params.html.erb +17 -0
- data/app/views/lookbook/panels/_source.html.erb +20 -0
- data/app/views/lookbook/show.html.erb +73 -0
- data/lib/lookbook/code_formatter.rb +20 -0
- data/lib/lookbook/engine.rb +8 -1
- data/lib/lookbook/lang.rb +10 -5
- data/lib/lookbook/preview.rb +1 -1
- data/lib/lookbook/preview_controller.rb +1 -1
- data/lib/lookbook/preview_group.rb +5 -1
- data/lib/lookbook/version.rb +1 -1
- data/lib/lookbook.rb +2 -0
- data/public/lookbook-assets/css/app.css +4 -0
- data/public/lookbook-assets/css/app.css.map +1 -0
- data/public/lookbook-assets/js/app.js +2 -0
- data/public/lookbook-assets/js/app.js.map +1 -0
- metadata +58 -45
- data/app/assets/lookbook/js/nav/leaf.js +0 -20
- data/app/assets/lookbook/js/nav.js +0 -38
- data/app/assets/lookbook/js/page.js +0 -38
- data/app/assets/lookbook/js/utils/clipboard.js +0 -13
- data/app/assets/lookbook/js/utils/morph.js +0 -19
- data/app/assets/lookbook/js/utils/screen.js +0 -44
- data/app/assets/lookbook/js/utils/size_observer.js +0 -16
- data/app/assets/lookbook/js/utils/split.js +0 -26
- data/app/assets/lookbook/js/workbench/inspector.js +0 -11
- data/app/assets/lookbook/js/workbench/param.js +0 -19
- data/app/assets/lookbook/js/workbench/preview.js +0 -39
- data/app/assets/lookbook/js/workbench.js +0 -14
- data/app/views/lookbook/app/index.html.erb +0 -11
- data/app/views/lookbook/app/show.html.erb +0 -1
- data/app/views/lookbook/layouts/app.html.erb +0 -41
- data/app/views/lookbook/nav/_collection.html.erb +0 -5
- data/app/views/lookbook/nav/_leaf.html.erb +0 -22
- data/app/views/lookbook/nav/_node.html.erb +0 -19
- data/app/views/lookbook/nav/_preview.html.erb +0 -11
- data/app/views/lookbook/preview/group.html.erb +0 -8
- data/app/views/lookbook/shared/_clipboard.html.erb +0 -11
- data/app/views/lookbook/shared/_sidebar.html.erb +0 -45
- data/app/views/lookbook/shared/_workbench.html.erb +0 -12
- data/app/views/lookbook/workbench/_header.html.erb +0 -39
- data/app/views/lookbook/workbench/_inspector.html.erb +0 -38
- data/app/views/lookbook/workbench/_preview.html.erb +0 -24
- data/app/views/lookbook/workbench/inspector/_code.html.erb +0 -3
- data/app/views/lookbook/workbench/inspector/_notes.html.erb +0 -24
- data/app/views/lookbook/workbench/inspector/_params.html.erb +0 -28
- data/app/views/lookbook/workbench/inspector/_plain.html.erb +0 -3
- data/app/views/lookbook/workbench/inspector/params/_textarea.html.erb +0 -8
- data/public/lookbook-assets/app.css +0 -2626
- data/public/lookbook-assets/app.js +0 -8718
@@ -1,12 +0,0 @@
|
|
1
|
-
<div id="workbench" class="bg-gray-50 h-screen flex flex-col" x-data="workbench">
|
2
|
-
<%= render "workbench/header" %>
|
3
|
-
<div class="md:grid flex-grow" :style="`grid-template-rows: 1fr 1px ${$store.inspector.height}px`">
|
4
|
-
<%= render "workbench/preview" %>
|
5
|
-
<div class="w-full gutter border-t border-gray-300 relative" x-data="split(splitProps)" x-show="$screen('md')">
|
6
|
-
<div class="h-[11px] w-full bg-transparent hover:bg-indigo-100 hover:bg-opacity-20 transition absolute left-0 right-0 transform -translate-y-1/2 cursor-[row-resize]"></div>
|
7
|
-
</div>
|
8
|
-
<% if @inspector %>
|
9
|
-
<%= render "workbench/inspector", **@inspector %>
|
10
|
-
<% end %>
|
11
|
-
</div>
|
12
|
-
</div>
|
@@ -1,39 +0,0 @@
|
|
1
|
-
<%= render "shared/header" do %>
|
2
|
-
<div class="flex items-center">
|
3
|
-
<div class="flex items-center space-x-1">
|
4
|
-
<strong class="whitespace-nowrap truncate"><%= @preview.label %></strong>
|
5
|
-
<% if @preview.get_examples.many? %>
|
6
|
-
<span>/</span>
|
7
|
-
<span class="whitespace-nowrap truncate"><%= @example.label %></span>
|
8
|
-
<% end %>
|
9
|
-
</div>
|
10
|
-
</div>
|
11
|
-
<div class="flex text-xs ml-auto font-monospace text-gray-700 space-x-1" x-show="$screen('md')">
|
12
|
-
<span x-text="`${previewViewportWidth}px`"></span>
|
13
|
-
<span class="text-gray-500">x</span>
|
14
|
-
<span x-text="`${previewViewportHeight}px`"></span>
|
15
|
-
</div>
|
16
|
-
<div class="flex items-center ml-auto md:ml-3 md:pl-3 space-x-3 md:border-l border-gray-300 text-gray-400">
|
17
|
-
<a
|
18
|
-
href="<%= url_for %>"
|
19
|
-
class="block transition hover:text-indigo-800"
|
20
|
-
x-tooltip.theme.lookbook="`Refresh preview`"
|
21
|
-
@click.prevent.stop="$dispatch('navigate')"
|
22
|
-
data-hotkey="r"
|
23
|
-
>
|
24
|
-
<svg class="feather w-4 h-4">
|
25
|
-
<use xlink:href="/lookbook-assets/feather-sprite.svg#refresh-cw" />
|
26
|
-
</svg>
|
27
|
-
</a>
|
28
|
-
<a
|
29
|
-
href="<%= preview_path %>"
|
30
|
-
class="block transition hover:text-indigo-800" target="_blank"
|
31
|
-
x-tooltip.theme.lookbook="`Open in new window`"
|
32
|
-
data-hotkey="w"
|
33
|
-
>
|
34
|
-
<svg class="feather w-4 h-4">
|
35
|
-
<use xlink:href="/lookbook-assets/feather-sprite.svg#external-link" />
|
36
|
-
</svg>
|
37
|
-
</a>
|
38
|
-
</div>
|
39
|
-
<% end %>
|
@@ -1,38 +0,0 @@
|
|
1
|
-
<div id="inspector" class="bg-white w-full overflow-hidden flex flex-col" x-data="inspector" x-show="$screen('md')">
|
2
|
-
<div class="px-4 border-b border-gray-200 flex items-center flex-none select-none">
|
3
|
-
<nav class="-mb-px flex space-x-8 cursor-auto">
|
4
|
-
<% panes.each do |key, props| %>
|
5
|
-
<a
|
6
|
-
id="inspector-tab-<%= key %>"
|
7
|
-
href="#<%= key %>"
|
8
|
-
class="whitespace-nowrap py-2 px-1 border-b-2 cursor-pointer <%= "!text-gray-300" if props[:disabled] %>"
|
9
|
-
:class="{
|
10
|
-
'border-indigo-400': active('<%= key %>'),
|
11
|
-
'border-transparent text-gray-500 hover:text-gray-700': !active('<%= key %>')
|
12
|
-
}"
|
13
|
-
@click.stop.prevent="switchTo('<%= key %>')"
|
14
|
-
<% if props[:hotkey] %>data-hotkey="<%= props[:hotkey] %>"<% end %>
|
15
|
-
>
|
16
|
-
<%== props[:label] %>
|
17
|
-
</a>
|
18
|
-
<% end %>
|
19
|
-
</nav>
|
20
|
-
</div>
|
21
|
-
<div class="flex-auto overflow-auto bg-gray-50">
|
22
|
-
<% panes.each do |key, props| %>
|
23
|
-
<div class="flex flex-col h-full relative" x-show="active('<%= key %>')" x-effect="
|
24
|
-
if ($store.inspector.active === '<%= key %>') {
|
25
|
-
const input = $el.querySelector('[data-param-input]');
|
26
|
-
if (input) setTimeout(() => input.focus(), 0)
|
27
|
-
}
|
28
|
-
" x-cloak>
|
29
|
-
<% if props[:clipboard].present? %>
|
30
|
-
<%= render "shared/clipboard" do %><%= h props[:clipboard].strip %><% end %>
|
31
|
-
<% end %>
|
32
|
-
<div id="inspector-content-<%= key %>" class="flex flex-col h-full overflow-auto">
|
33
|
-
<%= render "workbench/inspector/#{props[:template]}", key: key, **props %>
|
34
|
-
</div>
|
35
|
-
</div>
|
36
|
-
<% end %>
|
37
|
-
</div>
|
38
|
-
</div>
|
@@ -1,24 +0,0 @@
|
|
1
|
-
<div id="preview" class="h-full md:h-auto md:min-h-0 flex w-full bg-gray-50">
|
2
|
-
<div class="relative mx-auto bg-white" x-data="preview" :style="`width: ${$screen('md') ? $store.preview.width : '100%'}`">
|
3
|
-
<iframe seamless
|
4
|
-
class="absolute h-full inset-0 w-full border-l border-gray-300 md:pr-4 md:-mx-px"
|
5
|
-
src="<%= url_for lookbook.preview_path %>"
|
6
|
-
<% if config.preview_srcdoc %>srcdoc="<%== @rendered_example %>"<% end %>
|
7
|
-
frameborder="0"
|
8
|
-
x-data="sizeObserver"
|
9
|
-
x-effect="previewViewportWidth = observedWidth; previewViewportHeight = observedHeight;"
|
10
|
-
></iframe>
|
11
|
-
<div class="absolute opacity-0 inset-0 pointer-events-none" :class="{ 'pointer-events-none': !$store.page.reflowing }"></div>
|
12
|
-
<div
|
13
|
-
class="border-l border-r border-gray-300 bg-white hover:bg-indigo-100 hover:bg-opacity-20 transition absolute right-0 inset-y-0 flex items-center w-4 cursor-[col-resize] select-none"
|
14
|
-
style="touch-action: none"
|
15
|
-
@pointerdown="onResizeStart"
|
16
|
-
@dblclick="toggleFullWidth"
|
17
|
-
x-show="$screen('md')"
|
18
|
-
>
|
19
|
-
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
|
20
|
-
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
|
21
|
-
</svg>
|
22
|
-
</div>
|
23
|
-
</div>
|
24
|
-
</div>
|
@@ -1,24 +0,0 @@
|
|
1
|
-
<div class="text-gray-600">
|
2
|
-
<% if items.many? %>
|
3
|
-
<div class="divide-y divide-gray-300">
|
4
|
-
<% items.each do |item| %>
|
5
|
-
<div class="px-4 pt-10 pb-8 relative">
|
6
|
-
<div class="prose prose-sm">
|
7
|
-
<%= markdown(item[:content]) %>
|
8
|
-
</div>
|
9
|
-
<h6 class="text-[11px] text-gray-600 inline-block px-2 py-0.25 bg-gray-100 border border-t-0 border-gray-300 absolute top-0 left-4 rounded-b">
|
10
|
-
<%= item[:label] %>
|
11
|
-
</h6>
|
12
|
-
</div>
|
13
|
-
<% end %>
|
14
|
-
</div>
|
15
|
-
<% else %>
|
16
|
-
<div class="p-4 prose prose-sm">
|
17
|
-
<% if items.any? %>
|
18
|
-
<%= markdown(items[0][:content]) %>
|
19
|
-
<% else %>
|
20
|
-
<em class='opacity-50'>No notes provided.</em>
|
21
|
-
<% end %>
|
22
|
-
</div>
|
23
|
-
<% end %>
|
24
|
-
</div>
|
@@ -1,28 +0,0 @@
|
|
1
|
-
<% if @example.type == :group %>
|
2
|
-
<div class="p-4 prose prose-sm">
|
3
|
-
<em class='opacity-50'>Params are not supported for grouped previews.</em>
|
4
|
-
</div>
|
5
|
-
<% elsif items.none? %>
|
6
|
-
<div class="p-4 prose prose-sm">
|
7
|
-
<em class='opacity-50'>No params configured.</em>
|
8
|
-
</div>
|
9
|
-
<% else %>
|
10
|
-
<div class="py-3">
|
11
|
-
<% items.each do |param| %>
|
12
|
-
<div class="px-4 py-3" x-data="param" @document:patched="setFocus">
|
13
|
-
<div class="flex items-start max-w-[800px]">
|
14
|
-
<div class="w-[200px] flex-none py-2">
|
15
|
-
<label for="param-<%= param[:name] %>" class="font-bold"><%= param[:name].titleize %></label>
|
16
|
-
</div>
|
17
|
-
<div class="flex-grow" @focus="focussed = true" @blur="focussed = false">
|
18
|
-
<%= render "workbench/inspector/params/#{param[:input]}",
|
19
|
-
**param,
|
20
|
-
value: params.key?(param[:name]) ? params[param[:name]] : param[:default],
|
21
|
-
id: "#{@example.id}-param-#{param[:name]}"
|
22
|
-
%>
|
23
|
-
</div>
|
24
|
-
</div>
|
25
|
-
</div>
|
26
|
-
<% end %>
|
27
|
-
</div>
|
28
|
-
<% end %>
|