lookbook 0.4.6 → 0.4.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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 %>
|