lookbook 1.0.0.beta.2 → 1.0.0.beta.5

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.
Files changed (73) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +180 -40
  3. data/app/components/lookbook/{component.rb → base_component.rb} +7 -5
  4. data/app/components/lookbook/button/component.rb +1 -1
  5. data/app/components/lookbook/button_group/component.rb +1 -1
  6. data/app/components/lookbook/code/component.rb +1 -1
  7. data/app/components/lookbook/copy_button/component.html.erb +3 -3
  8. data/app/components/lookbook/copy_button/component.rb +1 -1
  9. data/app/components/lookbook/dimensions_display/component.rb +1 -1
  10. data/app/components/lookbook/embed/component.html.erb +34 -33
  11. data/app/components/lookbook/embed/component.rb +1 -1
  12. data/app/components/lookbook/filter/component.html.erb +1 -1
  13. data/app/components/lookbook/filter/component.rb +1 -1
  14. data/app/components/lookbook/header/component.html.erb +8 -13
  15. data/app/components/lookbook/header/component.rb +6 -1
  16. data/app/components/lookbook/icon/component.rb +1 -1
  17. data/app/components/lookbook/nav/component.html.erb +4 -8
  18. data/app/components/lookbook/nav/component.rb +6 -8
  19. data/app/components/lookbook/nav/item/component.html.erb +12 -6
  20. data/app/components/lookbook/nav/item/component.rb +10 -3
  21. data/app/components/lookbook/page_tabs/component.html.erb +1 -1
  22. data/app/components/lookbook/page_tabs/component.rb +1 -1
  23. data/app/components/lookbook/params_editor/component.rb +1 -1
  24. data/app/components/lookbook/params_editor/field/component.rb +1 -1
  25. data/app/components/lookbook/prose/component.rb +1 -1
  26. data/app/components/lookbook/split_layout/component.html.erb +1 -1
  27. data/app/components/lookbook/split_layout/component.rb +1 -1
  28. data/app/components/lookbook/tab_panels/component.rb +1 -1
  29. data/app/components/lookbook/tab_panels/panel/component.html.erb +2 -2
  30. data/app/components/lookbook/tab_panels/panel/component.rb +2 -2
  31. data/app/components/lookbook/tabs/component.html.erb +2 -2
  32. data/app/components/lookbook/tabs/component.js +6 -6
  33. data/app/components/lookbook/tabs/component.rb +1 -1
  34. data/app/components/lookbook/tabs/dropdown_tab/component.html.erb +1 -1
  35. data/app/components/lookbook/tabs/dropdown_tab/component.rb +1 -1
  36. data/app/components/lookbook/tabs/tab/component.html.erb +1 -1
  37. data/app/components/lookbook/tabs/tab/component.rb +1 -1
  38. data/app/components/lookbook/tag_component.rb +5 -10
  39. data/app/components/lookbook/toolbar/component.rb +1 -1
  40. data/app/components/lookbook/viewport/component.rb +1 -1
  41. data/app/controllers/lookbook/application_controller.rb +1 -1
  42. data/app/controllers/lookbook/previews_controller.rb +24 -29
  43. data/app/helpers/lookbook/application_helper.rb +6 -0
  44. data/app/helpers/lookbook/component_helper.rb +4 -0
  45. data/app/helpers/lookbook/page_helper.rb +1 -1
  46. data/app/views/layouts/lookbook/application.html.erb +76 -58
  47. data/app/views/layouts/lookbook/page.html.erb +35 -35
  48. data/app/views/layouts/lookbook/shell.html.erb +2 -48
  49. data/app/views/layouts/lookbook/skeleton.html.erb +7 -1
  50. data/app/views/lookbook/404.html.erb +1 -1
  51. data/app/views/lookbook/index.html.erb +24 -11
  52. data/app/views/lookbook/pages/show.html.erb +7 -7
  53. data/app/views/lookbook/previews/panels/_notes.html.erb +1 -1
  54. data/app/views/lookbook/previews/show.html.erb +10 -10
  55. data/lib/lookbook/collection.rb +1 -1
  56. data/lib/lookbook/component.rb +31 -0
  57. data/lib/lookbook/config.rb +101 -40
  58. data/lib/lookbook/engine.rb +88 -18
  59. data/lib/lookbook/markdown.rb +3 -1
  60. data/lib/lookbook/page.rb +6 -2
  61. data/lib/lookbook/parser.rb +1 -4
  62. data/lib/lookbook/preview.rb +59 -12
  63. data/lib/lookbook/preview_example.rb +1 -1
  64. data/lib/lookbook/source_inspector.rb +10 -0
  65. data/lib/lookbook/utils.rb +2 -2
  66. data/lib/lookbook/version.rb +1 -1
  67. data/lib/lookbook.rb +1 -12
  68. data/lib/tasks/lookbook_tasks.rake +1 -1
  69. data/public/lookbook-assets/css/lookbook.css +34 -38
  70. data/public/lookbook-assets/css/lookbook.css.map +1 -1
  71. data/public/lookbook-assets/js/lookbook.js +79 -78
  72. data/public/lookbook-assets/js/lookbook.js.map +1 -1
  73. metadata +4 -3
@@ -1,16 +1,22 @@
1
- <%= render_component_tag :li, id: @item.id, class: "list-none", "x-show": "!filteredOut", cloak: true do %>
2
-
1
+ <%= render_component_tag :li,
2
+ id: id,
3
+ class: "list-none",
4
+ "x-show": "!filteredOut",
5
+ data: {
6
+ "entity-type": item.type
7
+ },
8
+ cloak: true do %>
3
9
  <%= render_tag href.present? ? :a : :div,
4
10
  href: href,
5
11
  class: "flex items-center py-1 select-none cursor-pointer text-lookbook-nav-text hover:bg-lookbook-nav-item-hover",
6
12
  style: "padding-left: #{left_pad}px",
7
- x_bind: "bindings.#{href.present? ? "link" : "toggle"}" do %>
13
+ "x-bind": "bindings.#{href.present? ? "link" : "toggle"}" do %>
8
14
  <div class="relative flex items-center">
9
- <%= render_component :icon, name: nil,
15
+ <%= icon nil,
10
16
  size: 3,
11
17
  class: "mr-1 text-lookbook-nav-toggle absolute -left-4",
12
- x_effect: "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
13
- <%= render_component :icon, name: nav_icon(@item), size: 3.5, class: "mr-1.5 text-lookbook-nav-icon" %>
18
+ "x-effect": "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
19
+ <%= icon nav_icon, size: 3.5, class: "mr-1.5 text-lookbook-nav-icon" %>
14
20
  <span><%= label %></span>
15
21
  </div>
16
22
  <% end %>
@@ -1,5 +1,5 @@
1
1
  module Lookbook
2
- class Nav::Item::Component < Lookbook::Component
2
+ class Nav::Item::Component < Lookbook::BaseComponent
3
3
  ICONS = {
4
4
  page: :file,
5
5
  page_collection: :folder,
@@ -14,16 +14,22 @@ module Lookbook
14
14
 
15
15
  def initialize(
16
16
  item,
17
+ nav_id:,
17
18
  depth: 1,
18
19
  collapse_singles: false,
19
20
  **html_attrs
20
21
  )
22
+ @nav_id = nav_id
21
23
  @item = item
22
24
  @depth = depth
23
25
  @collapse_singles = collapse_singles
24
26
  super(**html_attrs)
25
27
  end
26
28
 
29
+ def id
30
+ "#{@nav_id}-#{@item.id}"
31
+ end
32
+
27
33
  def left_pad
28
34
  ((@depth - 1) * 12) + 24
29
35
  end
@@ -40,6 +46,7 @@ module Lookbook
40
46
  @children ||= if collection? && !collapsed?
41
47
  item.non_empty_items.map do |item|
42
48
  render Lookbook::Nav::Item::Component.new item,
49
+ nav_id: @nav_id,
43
50
  depth: (@depth + 1),
44
51
  collapse_singles: @collapse_singles
45
52
  end
@@ -52,8 +59,8 @@ module Lookbook
52
59
  collapsed? ? @item.first : @item
53
60
  end
54
61
 
55
- def nav_icon(entity)
56
- ICONS[entity.type] || :file
62
+ def nav_icon
63
+ ICONS[@item.type] || :file
57
64
  end
58
65
 
59
66
  def collection?
@@ -1,4 +1,4 @@
1
- <%= render_component_tag x_data: "{ activeTab: null }" do %>
1
+ <%= render_component_tag "x-data": "{ activeTab: null }" do %>
2
2
  <div class="flex w-full border-b border-lookbook-divider mb-6">
3
3
  <%= render_component :tabs, theme: :page do |t| %>
4
4
  <% @tabs.each do |props| %>
@@ -1,5 +1,5 @@
1
1
  module Lookbook
2
- class PageTabs::Component < Lookbook::Component
2
+ class PageTabs::Component < Lookbook::BaseComponent
3
3
  renders_many :tabs, ->(**attrs, &block) do
4
4
  @tabs ||= []
5
5
  attrs[:content] = capture(&block)
@@ -1,5 +1,5 @@
1
1
  module Lookbook
2
- class ParamsEditor::Component < Lookbook::Component
2
+ class ParamsEditor::Component < Lookbook::BaseComponent
3
3
  renders_many :fields, Lookbook::ParamsEditor::Field::Component
4
4
 
5
5
  protected
@@ -1,5 +1,5 @@
1
1
  module Lookbook
2
- class ParamsEditor::Field::Component < Lookbook::Component
2
+ class ParamsEditor::Field::Component < Lookbook::BaseComponent
3
3
  def initialize(input:, name:, default: nil, value: nil, input_type: nil, type: nil, options: nil, **html_attrs)
4
4
  @input = input
5
5
  @name = name
@@ -1,5 +1,5 @@
1
1
  module Lookbook
2
- class Prose::Component < Lookbook::Component
2
+ class Prose::Component < Lookbook::BaseComponent
3
3
  include Lookbook::OutputHelper
4
4
 
5
5
  def initialize(size: :md, markdown: true, **html_attrs)
@@ -1,4 +1,4 @@
1
- <%= render_component_tag class: "grid h-full w-full", x_bind: "bindings.root", x_effect: "initSplit" do %>
1
+ <%= render_component_tag class: "grid h-full w-full", "x-bind": "bindings.root", "x-effect": "initSplit" do %>
2
2
  <% panes.each.with_index(1) do |pane, i| %>
3
3
  <%= pane %>
4
4
  <% if i < panes.size %>
@@ -1,5 +1,5 @@
1
1
  module Lookbook
2
- class SplitLayout::Component < Lookbook::Component
2
+ class SplitLayout::Component < Lookbook::BaseComponent
3
3
  renders_many :panes, Lookbook::TagComponent
4
4
 
5
5
  protected
@@ -1,5 +1,5 @@
1
1
  module Lookbook
2
- class TabPanels::Component < Lookbook::Component
2
+ class TabPanels::Component < Lookbook::BaseComponent
3
3
  renders_many :panels, ->(**attrs) do
4
4
  @panel_counter += 1
5
5
  attrs[:name] ||= "tab-#{@panel_counter}"
@@ -1,7 +1,7 @@
1
1
  <%= render_component_tag :section,
2
2
  id: @id,
3
- x_ref: @name,
4
- x_cloak: true,
3
+ "x-ref": @name,
4
+ cloak: true,
5
5
  class: "h-full",
6
6
  ":class": "{ hidden: !isActive($el) }" do %>
7
7
  <%== content %>
@@ -1,8 +1,8 @@
1
1
  module Lookbook
2
- class TabPanels::Panel::Component < Lookbook::Component
2
+ class TabPanels::Panel::Component < Lookbook::BaseComponent
3
3
  def initialize(name:, id: nil, **html_attrs)
4
4
  @name = name
5
- @id = id || name
5
+ @id = "#{id || "panel-#{name}"}"
6
6
  super(**html_attrs)
7
7
  end
8
8
  end
@@ -9,8 +9,8 @@
9
9
  <%= safe_join(tabs) %>
10
10
  </div>
11
11
  <div x-ref="dropdownTrigger" class="absolute" x-show="hasHiddenTabs" :style="{left: `${triggerLeft}px`}">
12
- <%= render_component :button, icon: :chevrons_right, x_show: "visibleTabsCount > 0" %>
13
- <%= render_component :button, icon: :menu, class: "-ml-3", x_show: "visibleTabsCount === 0" %>
12
+ <%= render_component :button, icon: :chevrons_right, "x-show": "visibleTabsCount > 0" %>
13
+ <%= render_component :button, icon: :menu, class: "-ml-3", "x-show": "visibleTabsCount === 0" %>
14
14
  </div>
15
15
  <div class="hidden">
16
16
  <div x-ref="tabsDropdown" data-cloak>
@@ -16,7 +16,7 @@ export default function tabsComponent(store) {
16
16
  },
17
17
 
18
18
  get tabs() {
19
- return Array.from(this.$refs.tabs.children);
19
+ return this.$refs.tabs ? Array.from(this.$refs.tabs.children) : [];
20
20
  },
21
21
 
22
22
  get dropdownTabs() {
@@ -45,7 +45,7 @@ export default function tabsComponent(store) {
45
45
  const initialTab = initial
46
46
  ? this.tabs.find((t) => this._getRef(t) === initial)
47
47
  : this.tabs[0];
48
- this.selectTab(initialTab);
48
+ this.selectTab(initialTab, true);
49
49
 
50
50
  this.parentObserver = observeSize(
51
51
  this.$root.parentElement,
@@ -64,13 +64,10 @@ export default function tabsComponent(store) {
64
64
  }
65
65
 
66
66
  if (width === this.$root.offsetWidth) {
67
- console.log("uep");
68
67
  this.visibleTabsCount = this.tabs.length;
69
68
  return;
70
69
  }
71
70
 
72
- console.log(width);
73
-
74
71
  let sumTabWidths = 60;
75
72
  let triggerLeft = 20;
76
73
  let visibleTabsCount = 0;
@@ -87,9 +84,12 @@ export default function tabsComponent(store) {
87
84
  this._lastMeasuredWidth = width;
88
85
  },
89
86
 
90
- selectTab(el) {
87
+ selectTab(el, initial = false) {
91
88
  this.store.activeTab = this._getRef(el);
92
89
  dropdown.hide();
90
+ if (!initial) {
91
+ this.$dispatch("tabs:change", { tabs: this });
92
+ }
93
93
  },
94
94
 
95
95
  isSelected(el) {
@@ -1,5 +1,5 @@
1
1
  module Lookbook
2
- class Tabs::Component < Lookbook::Component
2
+ class Tabs::Component < Lookbook::BaseComponent
3
3
  renders_many :tabs, ->(**attrs) do
4
4
  @tab_counter += 1
5
5
  attrs[:name] ||= "tab-#{@tab_counter}"
@@ -1,5 +1,5 @@
1
1
  <%= render_component_tag :button,
2
- x_ref: @name,
2
+ "x-ref": @name,
3
3
  class: [
4
4
  "whitespace-nowrap px-4 border-l-2 cursor-pointer block w-full text-left",
5
5
  {
@@ -1,5 +1,5 @@
1
1
  module Lookbook
2
- class Tabs::DropdownTab::Component < Lookbook::Component
2
+ class Tabs::DropdownTab::Component < Lookbook::BaseComponent
3
3
  def initialize(name:, label: nil, hotkey: nil, disabled: nil, position: 0, theme: :toolbar, **html_attrs)
4
4
  @name = name
5
5
  @label = label
@@ -1,6 +1,6 @@
1
1
  <%= render_component_tag :button,
2
2
  id: @id,
3
- x_ref: @name,
3
+ "x-ref": @name,
4
4
  class: [
5
5
  "whitespace-nowrap cursor-pointer pt-2.5 pb-1.5 border-b-2",
6
6
  {
@@ -1,5 +1,5 @@
1
1
  module Lookbook
2
- class Tabs::Tab::Component < Lookbook::Component
2
+ class Tabs::Tab::Component < Lookbook::BaseComponent
3
3
  def initialize(name:, label: nil, hotkey: nil, disabled: nil, position: 0, theme: :toolbar, **html_attrs)
4
4
  @name = name
5
5
  @label = label
@@ -4,26 +4,21 @@ module Lookbook
4
4
 
5
5
  def initialize(tag: :div, name: nil, cloak: false, **html_attrs)
6
6
  @tag = tag
7
- html_attrs[:class] = class_names(html_attrs[:class]) if html_attrs[:class]
8
7
  html_attrs[:data] ||= {}
9
8
  html_attrs[:data][:component] = name if name.present?
10
- html_attrs[:x_cloak] = true if cloak == true
11
- @html_attrs = convert_attrs(html_attrs)
9
+ html_attrs["x-cloak"] = true if cloak == true
10
+ html_attrs[self.class.escape_attribute_key] = false
11
+ @html_attrs = html_attrs
12
12
  end
13
13
 
14
14
  def call
15
- @html_attrs[Rails.version.to_f < 7.0 ? :escape_attributes : :escape] = false
16
15
  tag.public_send(@tag, **@html_attrs) do
17
16
  content
18
17
  end
19
18
  end
20
19
 
21
- protected
22
-
23
- def convert_attrs(html_attrs)
24
- html_attrs.map do |name, value|
25
- [name.to_s.tr("_", "-"), value]
26
- end.to_h
20
+ def self.escape_attribute_key
21
+ @escape_attribute_key ||= Gem::Version.new(Rails.version) < Gem::Version.new('6.1.5.1') ? :escape_attributes : :escape
27
22
  end
28
23
  end
29
24
  end
@@ -1,5 +1,5 @@
1
1
  module Lookbook
2
- class Toolbar::Component < Lookbook::Component
2
+ class Toolbar::Component < Lookbook::BaseComponent
3
3
  DIVIDE_CLASSES = {
4
4
  left: "border-l",
5
5
  right: "border-r"
@@ -1,5 +1,5 @@
1
1
  module Lookbook
2
- class Viewport::Component < Lookbook::Component
2
+ class Viewport::Component < Lookbook::BaseComponent
3
3
  def initialize(src:, resize_height: true, resize_width: true, max_height: nil, **html_attrs)
4
4
  @src = src
5
5
  @resize_height = resize_height
@@ -17,7 +17,7 @@ module Lookbook
17
17
  if landing.present?
18
18
  redirect_to lookbook_page_path(landing.lookup_path)
19
19
  else
20
- render "lookbook/index", layout: Lookbook.previews.any? ? "lookbook/application" : "lookbook/shell"
20
+ render "lookbook/index"
21
21
  end
22
22
  end
23
23
 
@@ -117,41 +117,36 @@ module Lookbook
117
117
  def inspector_data
118
118
  return @inspector_data if @inspector_data.present?
119
119
 
120
- request_data = {
120
+ context_data = {
121
121
  preview_params: preview_params,
122
122
  path: params[:path],
123
- query_parameters: request.query_parameters,
124
- original: request
125
123
  }
126
124
 
127
- preview_data = {
128
- relative_path: @preview.full_path.relative_path_from(Rails.root.to_s),
129
- full_path: @preview.full_path,
130
- example_label: @example.label,
131
- params: @example.params,
132
- }
133
- [:id, :label, :notes, :lookup_path, :full_path].each do |prop|
134
- preview_data[prop] = @preview.public_send(prop)
135
- end
125
+ example = @example
126
+ preview = @preview
127
+ preview.define_singleton_method(:params, proc {
128
+ example.params
129
+ })
136
130
 
137
- examples_data = target_examples.map do |example|
131
+ examples = target_examples.map do |example|
138
132
  render_args = @preview.render_args(example.name, params: preview_controller.params)
139
133
  has_template = render_args[:template] != "view_components/preview"
140
- example_data = Lookbook::Store.new({
141
- output: preview_controller.process(:render_example_to_string, @preview, example.name),
142
- source: has_template ? example.template_source(render_args[:template]) : example.method_source,
143
- source_lang: has_template ? example.template_lang(render_args[:template]) : example.source_lang,
144
- })
145
- [:id, :label, :notes, :lookup_path, :params, :display_params].each do |prop|
146
- example_data[prop] = example.public_send(prop)
147
- end
148
- example_data
134
+ output = preview_controller.process(:render_example_to_string, @preview, example.name)
135
+ source = has_template ? example.template_source(render_args[:template]) : example.method_source
136
+ source_lang = has_template ? example.template_lang(render_args[:template]) : example.lang
137
+
138
+ example.define_singleton_method(:output, proc { output })
139
+ example.define_singleton_method(:source, proc { source })
140
+ example.define_singleton_method(:source_lang, proc { source_lang })
141
+ example
149
142
  end
150
143
 
151
144
  @inspector_data ||= Lookbook::Store.new({
152
- request: request_data,
153
- preview: preview_data,
154
- examples: examples_data
145
+ context: context_data,
146
+ preview: preview,
147
+ examples: examples,
148
+ components: preview.components,
149
+ app: Lookbook
155
150
  })
156
151
  end
157
152
 
@@ -163,7 +158,7 @@ module Lookbook
163
158
 
164
159
  callable_data = {
165
160
  name: name.to_s,
166
- index_position: (@panels.filter { |p| p.pane == config.pane }.size + 1),
161
+ index_position: (@panels.select { |p| p.pane == config.pane }.size + 1),
167
162
  **inspector_data
168
163
  }
169
164
 
@@ -175,15 +170,15 @@ module Lookbook
175
170
  @panels << Lookbook::Store.new(resolved_config, deep: false)
176
171
  end
177
172
 
178
- @panels.filter(&:show).sort_by { |p| [p.position, p.label] }
173
+ @panels = @panels.select(&:show).sort_by { |p| [p.position, p.label] }
179
174
  end
180
175
 
181
176
  def main_panels
182
- panels.filter { |panel| panel.pane == :main }
177
+ panels.select { |panel| panel.pane == :main }
183
178
  end
184
179
 
185
180
  def drawer_panels
186
- panels.filter { |panel| panel.pane == :drawer }
181
+ panels.select { |panel| panel.pane == :drawer }
187
182
  end
188
183
 
189
184
  def preview_controller
@@ -20,5 +20,11 @@ module Lookbook
20
20
  def generate_id(*args)
21
21
  args.map { |args| args.delete_prefix("/").tr("&?=/_\-", "-") }.join("-")
22
22
  end
23
+
24
+ def append_styles(&block)
25
+ content_for :styles do
26
+ capture(&block)
27
+ end
28
+ end
23
29
  end
24
30
  end
@@ -2,6 +2,10 @@ module Lookbook
2
2
  module ComponentHelper
3
3
  COMPONENT_CLASSES = {} # cache for constantized references
4
4
 
5
+ def icon(name, **attrs)
6
+ render Lookbook::Icon::Component.new(name: name, **attrs)
7
+ end
8
+
5
9
  def render_component(ref, **attrs, &block)
6
10
  klass = component_class(ref)
7
11
  comp = attrs.key?(:content) ? klass.new(**attrs.except(:content)).with_content(attrs[:content]) : klass.new(**attrs)
@@ -16,7 +16,7 @@ module Lookbook
16
16
 
17
17
  @embed_counter ||= 0
18
18
 
19
- preview_lookup = args.first.is_a?(Symbol) ? args.first : preview_class_name(args.first)
19
+ preview_lookup = args.first.is_a?(Symbol) ? args.first : preview_class_path(args.first)
20
20
  preview = Lookbook.previews.find(preview_lookup)
21
21
  example = args[1] ? preview&.example(args[1]) : preview&.default_example
22
22
 
@@ -1,76 +1,94 @@
1
1
  <% content_for :shell do %>
2
- <%= render_component :split_layout,
3
- alpine_data: "$store.layout.main",
4
- ":class": "$store.layout.mobile && '!block'" do |layout| %>
2
+ <% if Lookbook.previews? || Lookbook.pages? %>
3
+ <%= render_component :split_layout,
4
+ alpine_data: "$store.layout.main",
5
+ ":class": "$store.layout.mobile && '!block'" do |layout| %>
5
6
 
6
- <% layout.pane class: "flex flex-col bg-lookbook-sidebar relative translate-x-0",
7
- ":class": "{
8
- 'transition': $store.layout.mobile,
9
- 'translate-x-full': $store.layout.mobile && sidebarHidden,
10
- '!absolute right-0 bottom-0 top-[40px] h-[calc(100%_-_40px)] w-full max-w-[420px] z-50 border-l border-lookbook-divider': $store.layout.mobile
11
- }",
12
- "@click.outside": "closeMobileSidebar",
13
- x_cloak: true do %>
7
+ <% layout.pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar relative translate-x-0",
8
+ ":class": "{
9
+ 'transition': $store.layout.mobile,
10
+ 'translate-x-full': $store.layout.mobile && sidebarHidden,
11
+ '!absolute right-0 bottom-0 top-[40px] h-[calc(100%_-_40px)] w-full max-w-[420px] z-50 border-l border-lookbook-divider': $store.layout.mobile
12
+ }",
13
+ "@click.outside": "closeMobileSidebar",
14
+ cloak: true do %>
14
15
 
15
- <%= render_component :split_layout,
16
- alpine_data: "$store.layout.#{Lookbook.pages.any? ? "sidebar" : "singleSectionSidebar"}",
17
- style: "height: calc(100vh - 2.5rem);" do |layout| %>
18
- <% layout.pane class: "overflow-hidden" do %>
19
- <%= render_component :nav,
20
- collection: Lookbook.previews,
21
- alpine_data: "$store.nav.previews",
22
- label: "Previews",
23
- collapse_singles: true do |nav| %>
24
- <% nav.filter store: "$store.nav.previews.filter", placeholder: "Filter by preview name&hellip;" %>
16
+ <%= render_component :split_layout,
17
+ alpine_data: "$store.layout.#{Lookbook.pages? && Lookbook.previews? ? "sidebar" : "singleSectionSidebar"}",
18
+ style: "height: calc(100vh - 2.5rem);" do |layout| %>
19
+
20
+ <% if Lookbook.previews? %>
21
+ <% layout.pane class: "overflow-hidden" do %>
22
+ <%= render_component :nav,
23
+ id: "previews-nav",
24
+ collection: Lookbook.previews,
25
+ alpine_data: "$store.nav.previews",
26
+ collapse_singles: true do |nav| %>
27
+ <%= nav.toolbar do |toolbar| %>
28
+ <% toolbar.section padded: true do %>
29
+ <h4 class="pt-1">Previews</h4>
30
+ <% end %>
31
+ <% end %>
32
+ <% nav.filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
33
+ <% end %>
34
+ <% end %>
25
35
  <% end %>
26
- <% end %>
27
36
 
28
- <% if Lookbook.pages.any? %>
29
- <% layout.pane class: "overflow-hidden" do %>
30
- <%= render_component :nav,
31
- collection: Lookbook.pages,
32
- alpine_data: "$store.nav.pages",
33
- label: "Pages" %>
37
+ <% if Lookbook.pages? %>
38
+ <% layout.pane class: "overflow-hidden" do %>
39
+ <%= render_component :nav,
40
+ id: "pages-nav",
41
+ collection: Lookbook.pages,
42
+ alpine_data: "$store.nav.pages" do |nav| %>
43
+ <%= nav.toolbar do |toolbar| %>
44
+ <% toolbar.section padded: true do %>
45
+ <h4 class="pt-1">Pages</h4>
46
+ <% end %>
47
+ <% end %>
48
+ <% end %>
49
+ <% end %>
34
50
  <% end %>
35
51
  <% end %>
36
52
 
37
- <% end %>
38
-
39
- <% if Lookbook::Preview.errors.any? %>
40
- <div x-data="{hidden: false}" class="flex-none border-t border-lookbook-divider absolute bottom-0 left-0 right-0" x-show="!hidden">
41
- <%= render_component :toolbar do |toolbar| %>
42
- <% toolbar.section padded: true, class: "flex items-center" do %>
43
- <%= render_component :icon, name: :alert_triangle, size: 4, class: "text-red-700" %>
44
- <span class="ml-2">Preview load errors</span>
45
- <% end %>
46
- <% toolbar.section align: :right do %>
47
- <% render_component :button, icon: :x, "@click": "hidden = !hidden" %>
53
+ <% if Lookbook::Preview.errors.any? %>
54
+ <div x-data="{hidden: false}" class="flex-none border-t border-lookbook-divider absolute bottom-0 left-0 right-0" x-show="!hidden">
55
+ <%= render_component :toolbar do |toolbar| %>
56
+ <% toolbar.section padded: true, class: "flex items-center" do %>
57
+ <%= icon :alert_triangle, size: 4, class: "text-red-700" %>
58
+ <span class="ml-2">Preview load errors</span>
59
+ <% end %>
60
+ <% toolbar.section align: :right do %>
61
+ <% render_component :button, icon: :x, "@click": "hidden = !hidden" %>
62
+ <% end %>
48
63
  <% end %>
49
- <% end %>
50
64
 
51
- <div class="h-full max-h-[300px] overflow-hidden">
52
- <div class="bg-red-50 w-full overflow-auto h-full">
53
- <ul class="text-sm divide-y divide-red-200">
54
- <% Lookbook::Preview.errors.each do |error| %>
55
- <% error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error) %>
56
- <li class="px-4 py-3">
57
- <h4 class="break-all leading-tight text-xs ">
58
- <%= error.file_name %><%= ":#{error.line_number}" if error.line_number %>
59
- </h4>
60
- <pre class="text-red-800 text-xs mt-2 whitespace-pre-wrap opacity-80 font-mono"><%= error.message %></pre>
61
- </li>
62
- <% end %>
63
- </ul>
65
+ <div class="h-full max-h-[300px] overflow-hidden">
66
+ <div class="bg-red-50 w-full overflow-auto h-full">
67
+ <ul class="text-sm divide-y divide-red-200">
68
+ <% Lookbook::Preview.errors.each do |error| %>
69
+ <% error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error) %>
70
+ <li class="px-4 py-3">
71
+ <h4 class="break-all leading-tight text-xs ">
72
+ <%= error.file_name %><%= ":#{error.line_number}" if error.line_number %>
73
+ </h4>
74
+ <pre class="text-red-800 text-xs mt-2 whitespace-pre-wrap opacity-80 font-mono"><%= error.message %></pre>
75
+ </li>
76
+ <% end %>
77
+ </ul>
78
+ </div>
64
79
  </div>
65
80
  </div>
66
- </div>
81
+ <% end %>
67
82
  <% end %>
68
- <% end %>
69
83
 
70
- <% layout.pane class: "overflow-hidden", ":class": "$store.layout.mobile && 'w-screen'" do %>
71
- <%= content_for?(:main) ? yield(:main) : yield %>
84
+ <% layout.pane id: "app-main", class: "overflow-hidden h-full", ":class": "$store.layout.mobile && 'w-screen'" do %>
85
+ <%= content_for?(:main) ? yield(:main) : yield %>
86
+ <% end %>
72
87
  <% end %>
73
-
88
+ <% else %>
89
+ <div id="app-main" class="w-screen h-full overflow-hidden">
90
+ <%= content_for?(:main) ? yield(:main) : yield %>
91
+ </div>
74
92
  <% end %>
75
93
  <div class="absolute opacity-0 bg-black inset-0 top-[39px] z-[-1] transition-opacity" :class="($store.layout.mobile && !sidebarHidden) && '!opacity-30 !z-40'" data-cloak></div>
76
94
  <% end %>