lookbook 0.8.3 → 1.0.0.beta.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +90 -795
- 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 +23 -17
- 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 +11 -0
- data/app/components/lookbook/dimensions_display/component.js +37 -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/page_tabs/component.html.erb +18 -0
- data/app/components/lookbook/page_tabs/component.rb +19 -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/tab_panels/component.html.erb +5 -0
- data/app/components/lookbook/tab_panels/component.js +25 -0
- data/app/components/lookbook/tab_panels/component.rb +20 -0
- data/app/components/lookbook/tab_panels/panel/component.html.erb +8 -0
- data/app/components/lookbook/tab_panels/panel/component.rb +9 -0
- data/app/components/lookbook/tabs/component.css +8 -0
- data/app/components/lookbook/tabs/component.html.erb +20 -0
- data/app/components/lookbook/tabs/component.js +115 -0
- data/app/components/lookbook/tabs/component.rb +28 -0
- data/app/components/lookbook/tabs/dropdown_tab/component.html.erb +20 -0
- data/app/components/lookbook/tabs/dropdown_tab/component.rb +17 -0
- data/app/components/lookbook/tabs/tab/component.html.erb +24 -0
- data/app/components/lookbook/tabs/tab/component.rb +17 -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 +19 -8
- data/app/controllers/lookbook/previews_controller.rb +131 -90
- 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 +38 -66
- data/app/views/{layouts/lookbook → lookbook}/preview.html.erb +6 -8
- data/app/views/lookbook/previews/panels/_content.html.erb +13 -0
- 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 +6 -15
- data/app/views/lookbook/previews/show.html.erb +133 -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 +180 -0
- data/lib/lookbook/engine.rb +66 -59
- 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 +52 -20
- data/lib/lookbook/page_collection.rb +8 -0
- data/lib/lookbook/page_section.rb +31 -0
- data/lib/lookbook/params.rb +14 -3
- data/lib/lookbook/preview.rb +16 -7
- 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/store.rb +36 -0
- data/lib/lookbook/theme.rb +29 -0
- data/lib/lookbook/utils.rb +11 -3
- data/lib/lookbook/version.rb +1 -1
- data/lib/lookbook.rb +6 -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 +3069 -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 +13541 -0
- data/public/lookbook-assets/js/lookbook.js.map +1 -0
- metadata +133 -115
- 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,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>
|