lookbook 0.4.6 → 0.4.7
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/lookbook/css/app.css +55 -5
- data/app/assets/lookbook/js/app.js +38 -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 +21 -0
- data/app/assets/lookbook/js/{nav/node.js → components/nav-group.js} +16 -15
- data/app/assets/lookbook/js/components/nav-item.js +26 -0
- data/app/assets/lookbook/js/components/nav.js +35 -0
- data/app/assets/lookbook/js/components/page.js +33 -0
- data/app/assets/lookbook/js/{workbench → components}/param.js +3 -4
- data/app/assets/lookbook/js/{workbench/preview.js → components/preview-window.js} +9 -10
- 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/config.js +14 -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 +17 -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 +70 -97
- data/app/helpers/lookbook/application_helper.rb +48 -4
- data/app/views/layouts/lookbook/app.html.erb +54 -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/{shared/_clipboard.html.erb → components/_copy.html.erb} +4 -5
- 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 +17 -0
- data/app/views/lookbook/components/_nav_item.html.erb +21 -0
- data/app/views/lookbook/components/_nav_preview.html.erb +11 -0
- data/app/views/lookbook/components/_param.html.erb +20 -0
- data/app/views/lookbook/{workbench → components}/_preview.html.erb +8 -8
- 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 +1 -1
- data/app/views/lookbook/{workbench/inspector/params → inputs}/_text.html.erb +1 -1
- data/app/views/lookbook/{workbench/inspector/params → inputs}/_textarea.html.erb +1 -1
- data/app/views/lookbook/{workbench/inspector/params → inputs}/_toggle.html.erb +1 -1
- 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 +90 -0
- data/lib/lookbook/code_formatter.rb +20 -0
- data/lib/lookbook/engine.rb +4 -1
- data/lib/lookbook/lang.rb +10 -5
- 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 +1 -0
- data/public/lookbook-assets/css/app.css +2 -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 +54 -43
- 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.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/_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/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/public/lookbook-assets/app.css +0 -2626
- data/public/lookbook-assets/app.js +0 -8718
@@ -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 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 %>
|