lookbook 0.4.6 → 0.4.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (92) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/lookbook/css/app.css +55 -5
  3. data/app/assets/lookbook/js/app.js +38 -54
  4. data/app/assets/lookbook/js/components/copy.js +16 -0
  5. data/app/assets/lookbook/js/components/filter.js +24 -0
  6. data/app/assets/lookbook/js/components/inspector.js +21 -0
  7. data/app/assets/lookbook/js/{nav/node.js → components/nav-group.js} +16 -15
  8. data/app/assets/lookbook/js/components/nav-item.js +26 -0
  9. data/app/assets/lookbook/js/components/nav.js +35 -0
  10. data/app/assets/lookbook/js/components/page.js +33 -0
  11. data/app/assets/lookbook/js/{workbench → components}/param.js +3 -4
  12. data/app/assets/lookbook/js/{workbench/preview.js → components/preview-window.js} +9 -10
  13. data/app/assets/lookbook/js/components/sidebar.js +3 -0
  14. data/app/assets/lookbook/js/components/sizes.js +16 -0
  15. data/app/assets/lookbook/js/components/splitter.js +25 -0
  16. data/app/assets/lookbook/js/config.js +14 -0
  17. data/app/assets/lookbook/js/{utils/reloader.js → lib/socket.js} +7 -12
  18. data/app/assets/lookbook/js/lib/split.js +21 -0
  19. data/app/assets/lookbook/js/lib/utils.js +3 -0
  20. data/app/assets/lookbook/js/stores/filter.js +11 -0
  21. data/app/assets/lookbook/js/stores/inspector.js +17 -0
  22. data/app/assets/lookbook/js/stores/layout.js +12 -0
  23. data/app/assets/lookbook/js/stores/nav.js +21 -0
  24. data/app/assets/lookbook/js/stores/sidebar.js +14 -0
  25. data/app/controllers/lookbook/app_controller.rb +70 -97
  26. data/app/helpers/lookbook/application_helper.rb +48 -4
  27. data/app/views/layouts/lookbook/app.html.erb +54 -0
  28. data/app/views/layouts/lookbook/preview.html.erb +12 -0
  29. data/app/views/lookbook/components/_code.html.erb +8 -0
  30. data/app/views/lookbook/{shared/_clipboard.html.erb → components/_copy.html.erb} +4 -5
  31. data/app/views/lookbook/components/_filter.html.erb +15 -0
  32. data/app/views/lookbook/{shared → components}/_header.html.erb +3 -3
  33. data/app/views/lookbook/components/_icon.html.erb +5 -0
  34. data/app/views/lookbook/components/_nav.html.erb +17 -0
  35. data/app/views/lookbook/components/_nav_collection.html.erb +5 -0
  36. data/app/views/lookbook/components/_nav_group.html.erb +17 -0
  37. data/app/views/lookbook/components/_nav_item.html.erb +21 -0
  38. data/app/views/lookbook/components/_nav_preview.html.erb +11 -0
  39. data/app/views/lookbook/components/_param.html.erb +20 -0
  40. data/app/views/lookbook/{workbench → components}/_preview.html.erb +8 -8
  41. data/app/views/lookbook/{app/error.html.erb → error.html.erb} +0 -0
  42. data/app/views/lookbook/index.html.erb +9 -0
  43. data/app/views/lookbook/{workbench/inspector/params → inputs}/_select.html.erb +1 -1
  44. data/app/views/lookbook/{workbench/inspector/params → inputs}/_text.html.erb +1 -1
  45. data/app/views/lookbook/{workbench/inspector/params → inputs}/_textarea.html.erb +1 -1
  46. data/app/views/lookbook/{workbench/inspector/params → inputs}/_toggle.html.erb +1 -1
  47. data/app/views/lookbook/{app/not_found.html.erb → not_found.html.erb} +2 -4
  48. data/app/views/lookbook/panels/_notes.html.erb +25 -0
  49. data/app/views/lookbook/panels/_output.html.erb +18 -0
  50. data/app/views/lookbook/panels/_params.html.erb +17 -0
  51. data/app/views/lookbook/panels/_source.html.erb +20 -0
  52. data/app/views/lookbook/show.html.erb +90 -0
  53. data/lib/lookbook/code_formatter.rb +20 -0
  54. data/lib/lookbook/engine.rb +4 -1
  55. data/lib/lookbook/lang.rb +10 -5
  56. data/lib/lookbook/preview_controller.rb +1 -1
  57. data/lib/lookbook/preview_group.rb +5 -1
  58. data/lib/lookbook/version.rb +1 -1
  59. data/lib/lookbook.rb +1 -0
  60. data/public/lookbook-assets/css/app.css +2 -0
  61. data/public/lookbook-assets/css/app.css.map +1 -0
  62. data/public/lookbook-assets/js/app.js +2 -0
  63. data/public/lookbook-assets/js/app.js.map +1 -0
  64. metadata +54 -43
  65. data/app/assets/lookbook/js/nav/leaf.js +0 -20
  66. data/app/assets/lookbook/js/nav.js +0 -38
  67. data/app/assets/lookbook/js/page.js +0 -38
  68. data/app/assets/lookbook/js/utils/clipboard.js +0 -13
  69. data/app/assets/lookbook/js/utils/morph.js +0 -19
  70. data/app/assets/lookbook/js/utils/screen.js +0 -44
  71. data/app/assets/lookbook/js/utils/size_observer.js +0 -16
  72. data/app/assets/lookbook/js/utils/split.js +0 -26
  73. data/app/assets/lookbook/js/workbench/inspector.js +0 -11
  74. data/app/assets/lookbook/js/workbench.js +0 -14
  75. data/app/views/lookbook/app/index.html.erb +0 -11
  76. data/app/views/lookbook/app/show.html.erb +0 -1
  77. data/app/views/lookbook/layouts/app.html.erb +0 -41
  78. data/app/views/lookbook/nav/_collection.html.erb +0 -5
  79. data/app/views/lookbook/nav/_leaf.html.erb +0 -22
  80. data/app/views/lookbook/nav/_node.html.erb +0 -19
  81. data/app/views/lookbook/nav/_preview.html.erb +0 -11
  82. data/app/views/lookbook/preview/group.html.erb +0 -8
  83. data/app/views/lookbook/shared/_sidebar.html.erb +0 -45
  84. data/app/views/lookbook/shared/_workbench.html.erb +0 -12
  85. data/app/views/lookbook/workbench/_header.html.erb +0 -39
  86. data/app/views/lookbook/workbench/_inspector.html.erb +0 -38
  87. data/app/views/lookbook/workbench/inspector/_code.html.erb +0 -3
  88. data/app/views/lookbook/workbench/inspector/_notes.html.erb +0 -24
  89. data/app/views/lookbook/workbench/inspector/_params.html.erb +0 -28
  90. data/app/views/lookbook/workbench/inspector/_plain.html.erb +0 -3
  91. data/public/lookbook-assets/app.css +0 -2626
  92. 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,3 +0,0 @@
1
- <pre class="h-full"><code class="h-full p-4 block highlight font-monospace" style="background-image: none"><% items.each do |item| %><%== highlight( "#{items.many? ? item[:label] + "\n" : ""}#{item[:content].strip}", item[:lang][:name]) %>
2
-
3
- <% end %></code></pre>
@@ -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 %>
@@ -1,3 +0,0 @@
1
- <div class="p-4">
2
- <%= content %>
3
- </div>