lookbook 2.0.0.beta.7 → 2.0.0.beta.9

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 (44) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +7 -0
  3. data/app/components/lookbook/page_tabs/component.html.erb +2 -2
  4. data/app/components/lookbook/params/field/component.rb +1 -1
  5. data/app/components/lookbook/prose/component.css +3 -1
  6. data/app/components/lookbook/prose/component.html.erb +1 -0
  7. data/app/components/lookbook/split_layout/component.html.erb +3 -3
  8. data/app/controllers/concerns/lookbook/targetable_concern.rb +1 -1
  9. data/app/helpers/lookbook/application_helper.rb +1 -1
  10. data/app/views/lookbook/errors/default.html.erb +1 -1
  11. data/app/views/lookbook/inspector/panels/_preview.html.erb +1 -1
  12. data/app/views/lookbook/inspector/show.html.erb +1 -0
  13. data/app/views/lookbook/pages/show.html.erb +65 -58
  14. data/assets/css/lookbook.css +5 -1
  15. data/assets/css/themes/blue.css +3 -0
  16. data/assets/css/themes/green.css +3 -0
  17. data/assets/css/themes/indigo.css +3 -0
  18. data/assets/css/themes/rose.css +3 -0
  19. data/assets/css/themes/zinc.css +3 -0
  20. data/config/tags.yml +4 -0
  21. data/lib/lookbook/engine.rb +16 -2
  22. data/lib/lookbook/entities/preview_entity.rb +6 -1
  23. data/lib/lookbook/entities/scenario_entity.rb +5 -0
  24. data/lib/lookbook/preview.rb +1 -0
  25. data/lib/lookbook/preview_after_render.rb +13 -0
  26. data/lib/lookbook/preview_controller_actions.rb +18 -3
  27. data/lib/lookbook/tags/after_render_tag.rb +7 -0
  28. data/lib/lookbook/tags/param_tag.rb +1 -1
  29. data/lib/lookbook/version.rb +1 -1
  30. data/public/lookbook-assets/css/lookbook.css +85 -11
  31. data/public/lookbook-assets/css/lookbook.css.map +1 -1
  32. data/public/lookbook-assets/css/themes/blue.css +3 -0
  33. data/public/lookbook-assets/css/themes/blue.css.map +1 -1
  34. data/public/lookbook-assets/css/themes/green.css +3 -0
  35. data/public/lookbook-assets/css/themes/green.css.map +1 -1
  36. data/public/lookbook-assets/css/themes/indigo.css +3 -0
  37. data/public/lookbook-assets/css/themes/indigo.css.map +1 -1
  38. data/public/lookbook-assets/css/themes/rose.css +3 -0
  39. data/public/lookbook-assets/css/themes/rose.css.map +1 -1
  40. data/public/lookbook-assets/css/themes/zinc.css +3 -0
  41. data/public/lookbook-assets/css/themes/zinc.css.map +1 -1
  42. data/public/lookbook-assets/js/index.js +143 -143
  43. data/public/lookbook-assets/js/index.js.map +1 -1
  44. metadata +4 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 2aeae40db8c7d4b78350a2de8a0b95cdf2728e539bd7875a9c7562116db2bca4
4
- data.tar.gz: a9167271b7ba9af1942b13ef871b045f76c5a71ff7dc6e1771c5fae94934abc0
3
+ metadata.gz: c56294755ec1cadc843570567334d0b03ca5c2f462a8b2f78a8732b8829b63d8
4
+ data.tar.gz: 7acecdcc7dee2ba4a1110da91f204d75a05a04c28c7578c425c9bcc00e946623
5
5
  SHA512:
6
- metadata.gz: 858c8effb4094dbd6aba5cb125b0e241e6c8f49959fb7437ce96bd1925afb9994d8d11cda03ef456823627f6af2732cfddbdf96e897e3bdb3fecc0081755e356
7
- data.tar.gz: 66680a4c10c8be27d25a4cf790d3833a2d93b6ffcef1ca9c965f27f350962d4d000c668820b59ac02326b783db25c5f9499ca4994afe2fde0340e5c8d3df89bf
6
+ metadata.gz: 6c1aec7589afd938ef941d112c478756a0d2838458245752e0605333a2c68d94efea2a7dda06a60951b7a760850f62c69efe2d393a17773632e5fcbfd707b2d0
7
+ data.tar.gz: f5cd4fbf4ad04f6dc8d99038cd6f5d8058e4463e0ec7844d89bef51c2200412890ef3be51315d42a01141fb8b46be895ecd4b5b6059c0723cc7de72398859421
data/README.md CHANGED
@@ -54,6 +54,13 @@ Tests can be run using the `rake spec` or `bundle exec rspec` commands.
54
54
 
55
55
  The dummy app that the tests are being run against can be viewed by running the `bin/dummy` command and then browsing to http://localhost:9292/lookbook
56
56
 
57
+ ### Releases
58
+
59
+ Lookbook uses [Release It!](https://github.com/release-it/release-it) to automate the release process.
60
+
61
+ Running `npm run release` will start the process of publishing a new release and walks though all the steps from picking a version number to publishing the updated gem.
62
+
63
+ Publishing a release requires write permissions for this repository (ViewComponent/lookbook) and 2FA publish permissions for Lookbook on RubyGems.
57
64
 
58
65
  ## Contributing
59
66
 
@@ -1,5 +1,5 @@
1
1
  <%= render_component_tag "x-data": "{ activeTab: null }" do %>
2
- <div class="flex w-full border-b border-lookbook-divider mb-6">
2
+ <div class="flex w-full border-b border-lookbook-divider mb-6 lg:mb-8">
3
3
  <%= lookbook_render :tabs, theme: :page do |t| %>
4
4
  <% @tabs.each do |props| %>
5
5
  <%= t.with_tab **props %>
@@ -9,7 +9,7 @@
9
9
  <%= lookbook_render :tab_panels do |t| %>
10
10
  <% @tabs.each do |props| %>
11
11
  <% t.with_panel name: props[:name] do %>
12
- <%= lookbook_render :prose, markdown: props[:markdown], class: "max-w-none flex-none" do %>
12
+ <%= lookbook_render :prose, size: :md, markdown: props[:markdown], class: "max-w-none flex-none" do %>
13
13
  <%== props[:tab_content] %>
14
14
  <% end %>
15
15
  <% end %>
@@ -17,7 +17,7 @@ module Lookbook
17
17
  escaped_value = json_escape(param.value.to_s)
18
18
  wrapper_attrs = {
19
19
  data: {"param-input": param.input},
20
- "x-data": "paramsInputComponent({name: '#{param.name}', value: '#{escaped_value}'})"
20
+ "x-data": "paramsInputComponent({name: \"#{param.name}\", value: \"#{escaped_value}\"})"
21
21
  }
22
22
  @rendered_input = tag.div(**wrapper_attrs) { html.html_safe }
23
23
  end
@@ -1,6 +1,8 @@
1
1
  @layer components {
2
2
  [data-component="prose"] {
3
- letter-spacing: -0.015em !important;
3
+ @apply font-prose;
4
+
5
+ /* letter-spacing: -0.015em !important; */
4
6
 
5
7
  [data-component="code"] {
6
8
  @apply border border-lookbook-divider rounded-md;
@@ -3,6 +3,7 @@
3
3
  text-lookbook-prose-text bg-lookbook-prose-bg prose-a:text-lookbook-prose-link
4
4
  prose-headings:font-semibold
5
5
  prose-h1:font-bold
6
+ prose-h2:border-b prose-h2:border-lookbook-divider prose-h2:pb-3
6
7
  " do %>
7
8
  <%== rendered_content %>
8
9
  <% end %>
@@ -2,10 +2,10 @@
2
2
  <% panes.each.with_index(1) do |pane, i| %>
3
3
  <%= pane %>
4
4
  <% if i < panes.size %>
5
- <div class="bg-lookbook-divider relative z-50" x-init="registerGutter">
5
+ <div class="split-layout-gutter bg-lookbook-divider relative z-50" x-init="registerGutter">
6
6
  <div class="absolute z-10 bg-transparent hover:bg-lookbook-draggable-hint transition-all" :class="{
7
- 'w-[9px] h-full -translate-x-1/2 cursor-[col-resize]': vertical,
8
- 'h-[9px] w-full -translate-y-1/2 cursor-[row-resize]': horizontal
7
+ 'w-[9px] h-full -translate-x-1/2 cursor-[col-resize] split-layout-gutter-vertical': vertical,
8
+ 'h-[9px] w-full -translate-y-1/2 cursor-[row-resize] split-layout-gutter-horizontal': horizontal
9
9
  }"></div>
10
10
  </div>
11
11
  <% end %>
@@ -96,7 +96,7 @@ module Lookbook
96
96
 
97
97
  scenarios = @target ? @target.scenarios : []
98
98
  rendered_scenarios = scenarios.map do |scenario|
99
- output = preview_controller.process(:render_scenario_to_string, @preview, scenario.name)
99
+ output = preview_controller.process(:render_scenario_to_string, @preview, scenario)
100
100
  RenderedScenarioEntity.new(scenario, output, preview_controller.params)
101
101
  end
102
102
 
@@ -1,7 +1,7 @@
1
1
  module Lookbook
2
2
  module ApplicationHelper
3
3
  def lookbook_asset_path(file, version: true)
4
- path = "/lookbook-assets/#{file}".gsub("//", "/")
4
+ path = "#{Engine.host_config.relative_url_root}/lookbook-assets/#{file}".gsub("//", "/")
5
5
  version ? "#{path}?v=#{Lookbook::VERSION}" : path
6
6
  end
7
7
 
@@ -5,7 +5,7 @@
5
5
  </header>
6
6
 
7
7
  <div class="px-8 py-6 mb-8 border-t border-b border-red-200 bg-red-100 text-base leading-relaxed">
8
- <pre class="whitespace-pre-wrap font-sans leading-tight text-red-900"><%= @error.message %></pre>
8
+ <pre class="whitespace-pre-wrap font-ui leading-tight text-red-900"><%= @error.message %></pre>
9
9
  </div>
10
10
 
11
11
  <% if @error.file_path %>
@@ -1,6 +1,6 @@
1
1
  <div class="overflow-hidden h-full w-full">
2
2
  <%= lookbook_render :viewport,
3
- key: (lookbook_preview_path(request.query_parameters).parameterize unless Rails.env.test?),
3
+ key: (lookbook_preview_path(request.query_parameters).force_encoding('UTF-8').parameterize unless Rails.env.test?),
4
4
  iframe_id: "preview-iframe",
5
5
  src: lookbook_preview_path(request.query_parameters.merge(lookbook_timestamp: Time.now)),
6
6
  alpine_data: "$store.inspector.main",
@@ -1,5 +1,6 @@
1
1
  <main class="h-[calc(100vh_-_2.5rem)]">
2
2
  <%= lookbook_render :split_layout,
3
+ id: "inspector",
3
4
  alpine_data: "$store.layout.inspector",
4
5
  ":class": "($store.inspector.drawer.hidden || #{@drawer_panels.none?}) && '!grid-rows-[1fr] !grid-cols-[1fr]'",
5
6
  data: {
@@ -3,86 +3,93 @@
3
3
  x-data="{}"
4
4
  @navigation:complete.window="$refs.scroller.scrollTop = 0">
5
5
  <div class="h-full bg-lookbook-page-bg relative">
6
- <% unless @error %>
7
-
8
- <div class="absolute top-0 right-0 pt-1 pr-0 pl-1 pb-1 rounded-bl-md">
9
- <div class="bg-lookbook-page-bg opacity-90 absolute inset-0 w-full h-full z-0"></div>
10
- <div class="relative z-10 flex items-center">
6
+ <div class="overflow-auto scroll-smooth w-full max-h-full pb-12" x-ref="scroller">
7
+ <div class="h-full flex flex-col">
8
+ <% if @page.header? %>
9
+ <header id="page-header"
10
+ class="px-4 md:px-10 mb-8 pt-8 md:pt-10 lg:pt-12 pb-6 lg:pb-8 lg:mb-9 bg-lookbook-page-header-bg border-b border-lookbook-page-header-border relative">
11
+ <div class="w-full max-w-screen-lg mx-auto">
12
+ <%= lookbook_render :prose, size: :md, markdown: false, class: "bg-transparent max-w-none flex-none" do %>
13
+ <h1 class="text-lookbook-page-header-text"><%= @page.title %></h1>
14
+ <% end %>
15
+ </div>
16
+ <% unless @error %>
17
+ <div class="absolute top-0 right-0 pt-1 pr-0 pl-1 pb-1 rounded-bl-md">
18
+ <div class="bg-transparent opacity-90 absolute inset-0 w-full h-full z-0"></div>
19
+ <div class="relative z-10 flex items-center scale-75 -mt-1 -mr-1.5 md:scale-100 md:mt-0 md:-mr-[2px]">
11
20
 
12
- <% if @previous_page %>
13
- <%= lookbook_render :icon_button,
14
- size: :lg,
15
- icon: :chevron_left,
16
- tooltip: "Previous page",
17
- href: lookbook_page_path(@previous_page.lookup_path),
18
- class: "pr-0.5 bg-transparent" %>
19
- <% else %>
20
- <%= lookbook_render :icon_button,
21
- size: :lg,
22
- icon: :chevron_left,
23
- disabled: true,
24
- class: "opacity-50 !cursor-default pr-0.5 bg-transparent" %>
25
- <% end %>
21
+ <% if @previous_page %>
22
+ <%= lookbook_render :icon_button,
23
+ size: :lg,
24
+ icon: :chevron_left,
25
+ tooltip: "Previous page",
26
+ href: lookbook_page_path(@previous_page.lookup_path),
27
+ class: "pr-0.5 bg-transparent" %>
28
+ <% else %>
29
+ <%= lookbook_render :icon_button,
30
+ size: :lg,
31
+ icon: :chevron_left,
32
+ disabled: true,
33
+ class: "opacity-50 !cursor-default pr-0.5 bg-transparent" %>
34
+ <% end %>
26
35
 
27
- <% if @next_page %>
28
- <%= lookbook_render :icon_button,
29
- size: :lg,
30
- icon: :chevron_right,
31
- tooltip: "Next page",
32
- href: lookbook_page_path(@next_page.lookup_path),
33
- class: "pl-0.5 bg-transparent" %>
34
- <% else %>
35
- <%= lookbook_render :icon_button,
36
- size: :lg,
37
- icon: :chevron_right,
38
- disabled: true,
39
- class: "opacity-50 !cursor-default pl-0.5 bg-transparent" %>
40
- <% end %>
41
- </div>
42
- </div>
43
- <% end %>
44
-
45
- <div class="px-4 md:px-10 pt-8 md:pt-10 overflow-auto scroll-smooth w-full max-h-full pb-12" x-ref="scroller">
46
- <div class="w-full max-w-screen-lg mx-auto h-full flex flex-col">
47
- <% if @page.header? %>
48
- <header id="page-header" class="mb-7 pb-6 lg:mb-9 lg:pb-8 border-b border-lookbook-divider">
49
- <%= lookbook_render :prose, size: :md, markdown: false, class: "max-w-none flex-none" do %>
50
- <h1><%= @page.title %></h1>
36
+ <% if @next_page %>
37
+ <%= lookbook_render :icon_button,
38
+ size: :lg,
39
+ icon: :chevron_right,
40
+ tooltip: "Next page",
41
+ href: lookbook_page_path(@next_page.lookup_path),
42
+ class: "pl-0.5 bg-transparent" %>
43
+ <% else %>
44
+ <%= lookbook_render :icon_button,
45
+ size: :lg,
46
+ icon: :chevron_right,
47
+ disabled: true,
48
+ class: "opacity-50 !cursor-default pl-0.5 bg-transparent" %>
49
+ <% end %>
50
+ </div>
51
+ </div>
51
52
  <% end %>
52
53
  </header>
53
54
  <% end %>
54
55
 
55
- <%= lookbook_render :prose, size: :md, id: "page-content", markdown: false, class: "max-w-none flex-none min-h-[50vh]" do %>
56
- <%= @page_content %>
57
- <% end %>
56
+ <div class="px-4 md:px-10 min-h-[calc(100vh_-_400px)]">
57
+ <div class="w-full max-w-screen-lg mx-auto">
58
+ <%= lookbook_render :prose, size: :md, id: "page-content", markdown: false, class: "max-w-none flex-none" do %>
59
+ <%= @page_content %>
60
+ <% end %>
58
61
 
59
- <% if @page.sections.any? %>
60
- <%= lookbook_render :page_tabs, id: "page-tabbed-sections", markdown: false, class: "mt-6" do |page_tabs| %>
61
- <% @page.sections.each do |section| %>
62
- <% page_tabs.with_tab name: "page-section-#{section.name}", label: section.label do %>
63
- <%= page_controller.render_page(section) %>
62
+ <% if @page.sections.any? %>
63
+ <%= lookbook_render :page_tabs, id: "page-tabbed-sections", markdown: false, class: "mt-6 lg:mt-8" do |page_tabs| %>
64
+ <% @page.sections.each do |section| %>
65
+ <% page_tabs.with_tab name: "page-section-#{section.name}", label: section.label do %>
66
+ <%= page_controller.render_page(section) %>
67
+ <% end %>
68
+ <% end %>
64
69
  <% end %>
65
70
  <% end %>
66
- <% end %>
67
- <% end %>
71
+ </div>
72
+ </div>
68
73
 
69
74
  <% if @page.footer? && @pages.many? %>
70
- <footer id="page-footer" class="flex items-center justify-between border-t border-gray-300 mt-12 pt-8 pb-10 ">
75
+ <footer id="page-footer" class="mt-12 lg:mt-16 px-4 md:px-10">
76
+ <div class=" border-t border-gray-300 w-full max-w-screen-lg mx-auto pt-8 pb-10 flex items-center justify-between ">
71
77
  <% if @previous_page %>
72
78
  <a href="<%= lookbook_page_path @previous_page.lookup_path %>"
73
- class="flex items-center flex-none">
79
+ class="flex items-center flex-none max-w-[40%] overflow-hidden">
74
80
  <%= icon :arrow_left, size: 4, class: "hover:text-indigo-800" %>
75
- <span class="ml-2 underline"><%= @previous_page.title %></span>
81
+ <span class="ml-2 underline truncate"><%= @previous_page.title %></span>
76
82
  </a>
77
83
  <% end %>
78
84
 
79
85
  <% if @next_page %>
80
86
  <a href="<%= lookbook_page_path @next_page.lookup_path %>"
81
- class="flex items-center flex-none ml-auto">
82
- <span class="mr-2 underline"><%= @next_page.title %></span>
87
+ class="flex items-center flex-none ml-auto max-w-[40%] overflow-hidden">
88
+ <span class="mr-2 underline truncate"><%= @next_page.title %></span>
83
89
  <%= icon :arrow_right, size: 4, class: "hover:text-indigo-800" %>
84
90
  </a>
85
91
  <% end %>
92
+ </div>
86
93
  </footer>
87
94
  <% end %>
88
95
  </div>
@@ -19,7 +19,7 @@
19
19
  }
20
20
 
21
21
  body {
22
- @apply text-lookbook-text font-sans text-sm antialiased overflow-hidden;
22
+ @apply text-lookbook-text font-ui text-sm overflow-hidden;
23
23
  }
24
24
 
25
25
  [x-cloak] {
@@ -142,4 +142,8 @@
142
142
  background-size: 1.2em 1.2em;
143
143
  background-position: right 0.4rem center;
144
144
  }
145
+
146
+ #inspector .split-layout-gutter-horizontal {
147
+ top: 4px;
148
+ }
145
149
  }
@@ -71,6 +71,9 @@
71
71
  --lookbook-message-border: var(--lookbook-divider);
72
72
  --lookbook-message-title: var(--lookbook-base-600);
73
73
  --lookbook-message-text: var(--lookbook-text);
74
+ --lookbook-page-header-bg: var(--lookbook-base-50);
75
+ --lookbook-page-header-text: var(--lookbook-text);
76
+ --lookbook-page-header-border: var(--lookbook-divider);
74
77
  --lookbook-embed-title: var(--lookbook-text);
75
78
  --lookbook-branding-text: var(--lookbook-header-text);
76
79
  }
@@ -71,6 +71,9 @@
71
71
  --lookbook-message-border: var(--lookbook-divider);
72
72
  --lookbook-message-title: var(--lookbook-base-600);
73
73
  --lookbook-message-text: var(--lookbook-text);
74
+ --lookbook-page-header-bg: var(--lookbook-base-50);
75
+ --lookbook-page-header-text: var(--lookbook-text);
76
+ --lookbook-page-header-border: var(--lookbook-divider);
74
77
  --lookbook-embed-title: var(--lookbook-text);
75
78
  --lookbook-branding-text: var(--lookbook-header-text);
76
79
  }
@@ -71,6 +71,9 @@
71
71
  --lookbook-message-border: var(--lookbook-divider);
72
72
  --lookbook-message-title: var(--lookbook-base-600);
73
73
  --lookbook-message-text: var(--lookbook-text);
74
+ --lookbook-page-header-bg: var(--lookbook-base-50);
75
+ --lookbook-page-header-text: var(--lookbook-text);
76
+ --lookbook-page-header-border: var(--lookbook-divider);
74
77
  --lookbook-embed-title: var(--lookbook-text);
75
78
  --lookbook-branding-text: var(--lookbook-header-text);
76
79
  }
@@ -71,6 +71,9 @@
71
71
  --lookbook-message-border: var(--lookbook-divider);
72
72
  --lookbook-message-title: var(--lookbook-base-600);
73
73
  --lookbook-message-text: var(--lookbook-text);
74
+ --lookbook-page-header-bg: var(--lookbook-base-50);
75
+ --lookbook-page-header-text: var(--lookbook-text);
76
+ --lookbook-page-header-border: var(--lookbook-divider);
74
77
  --lookbook-embed-title: var(--lookbook-text);
75
78
  --lookbook-branding-text: var(--lookbook-header-text);
76
79
  }
@@ -71,6 +71,9 @@
71
71
  --lookbook-message-border: var(--lookbook-divider);
72
72
  --lookbook-message-title: var(--lookbook-base-600);
73
73
  --lookbook-message-text: var(--lookbook-text);
74
+ --lookbook-page-header-bg: var(--lookbook-base-50);
75
+ --lookbook-page-header-text: var(--lookbook-text);
76
+ --lookbook-page-header-border: var(--lookbook-divider);
74
77
  --lookbook-embed-title: var(--lookbook-text);
75
78
  --lookbook-branding-text: var(--lookbook-header-text);
76
79
  }
data/config/tags.yml CHANGED
@@ -38,3 +38,7 @@ shared:
38
38
  source:
39
39
  label: Source file
40
40
  opts: {}
41
+
42
+ after_render:
43
+ label: After render
44
+ opts: {}
@@ -37,14 +37,28 @@ module Lookbook
37
37
  vc_config = Engine.host_config.view_component
38
38
 
39
39
  opts.preview_paths += vc_config.preview_paths
40
- opts.preview_controller = vc_config.preview_controller
41
- opts.preview_layout = vc_config.default_preview_layout
40
+
41
+ # sync preview controller and layout setting between Lookbook and ViewComponent
42
+ if opts.preview_controller == "Lookbook::PreviewController" ||
43
+ vc_config.preview_controller != ViewComponent::Config.defaults.preview_controller
44
+ opts.preview_controller = vc_config.preview_controller
45
+ else
46
+ vc_config.preview_controller = opts.preview_controller
47
+ end
48
+
49
+ if opts.preview_layout.nil? || vc_config.default_preview_layout.present?
50
+ opts.preview_layout = vc_config.default_preview_layout
51
+ else
52
+ vc_config.default_preview_layout = opts.preview_layout
53
+ end
42
54
 
43
55
  vc_config.show_previews = true
44
56
 
45
57
  if vc_config.view_component_path.present?
46
58
  opts.component_paths << vc_config.view_component_path
47
59
  end
60
+
61
+ ViewComponent::Preview.extend(Lookbook::PreviewAfterRender)
48
62
  end
49
63
 
50
64
  opts.reload_on_change = host_config.reload_classes_only_on_change if opts.reload_on_change.nil?
@@ -7,7 +7,7 @@ module Lookbook
7
7
  include LocatableEntity
8
8
  include NavigableEntity
9
9
 
10
- delegate :render_args, to: :preview_class
10
+ delegate :after_render, :render_args, to: :preview_class
11
11
 
12
12
  # @api private
13
13
  attr_reader :preview_class
@@ -158,6 +158,11 @@ module Lookbook
158
158
  global_options.deep_merge(fetch_config(:display_options, {}))
159
159
  end
160
160
 
161
+ # @api private
162
+ def after_render_method
163
+ fetch_config(:after_render)
164
+ end
165
+
161
166
  # @api private
162
167
  def layout
163
168
  preview_class.instance_variable_get(:@layout)
@@ -110,6 +110,11 @@ module Lookbook
110
110
 
111
111
  # @!endgroup
112
112
 
113
+ # @api private
114
+ def after_render_method
115
+ fetch_config(:after_render) || parent.after_render_method
116
+ end
117
+
113
118
  # @api private
114
119
  def scenarios
115
120
  [self]
@@ -2,6 +2,7 @@ module Lookbook
2
2
  class Preview
3
3
  include ActionView::Helpers::TagHelper
4
4
  include ActionView::Helpers::AssetTagHelper
5
+ extend PreviewAfterRender
5
6
 
6
7
  def render(component = nil, **args, &block)
7
8
  if component.nil?
@@ -0,0 +1,13 @@
1
+ module Lookbook
2
+ # Shared module that both Lookbook::Preview and ViewComponent::Preview are extended with
3
+ module PreviewAfterRender
4
+ def after_render(method:, html:, context:)
5
+ instance = new
6
+ if instance.method(method).arity > 1
7
+ instance.send(method, html, context)
8
+ else
9
+ instance.send(method, html)
10
+ end.html_safe
11
+ end
12
+ end
13
+ end
@@ -6,12 +6,12 @@ module Lookbook
6
6
  helper PreviewHelper
7
7
  prepend_view_path Engine.root.join("app/views")
8
8
 
9
- def render_scenario_to_string(preview, scenario_name)
9
+ def render_scenario_to_string(preview, scenario)
10
10
  prepend_application_view_paths
11
11
  prepend_preview_examples_view_path
12
12
 
13
13
  @preview = preview
14
- @scenario_name = scenario_name
14
+ @scenario_name = scenario.name
15
15
  @render_args = @preview.render_args(@scenario_name, params: params.permit!)
16
16
  template = @render_args[:template]
17
17
  locals = @render_args[:locals]
@@ -19,8 +19,19 @@ module Lookbook
19
19
  opts[:layout] = nil
20
20
  opts[:locals] = locals if locals.present?
21
21
 
22
+ rendered = render_to_string(template, **opts)
23
+
24
+ if scenario.after_render_method.present?
25
+ render_context = Store.new({
26
+ preview: preview,
27
+ scenario: scenario,
28
+ params: user_request_parameters
29
+ })
30
+ rendered = @preview.after_render(method: scenario.after_render_method, html: rendered, context: render_context)
31
+ end
32
+
22
33
  with_optional_action_view_annotations do
23
- render html: render_to_string(template, **opts)
34
+ render html: rendered
24
35
  end
25
36
  end
26
37
 
@@ -40,6 +51,10 @@ module Lookbook
40
51
  disable = Lookbook.config.preview_disable_action_view_annotations
41
52
  ActionViewAnnotationsHandler.call(disable_annotations: disable, &block)
42
53
  end
54
+
55
+ def user_request_parameters
56
+ request.query_parameters.to_h.filter { |k, v| !k.start_with?("_") }
57
+ end
43
58
  end
44
59
  end
45
60
  end
@@ -0,0 +1,7 @@
1
+ module Lookbook
2
+ class AfterRenderTag < YardTag
3
+ def value
4
+ text.sub(/\A:/, "")
5
+ end
6
+ end
7
+ end
@@ -28,7 +28,7 @@ module Lookbook
28
28
  def value_default
29
29
  default_value_parts = object.parameters.find { |parts| parts[0].chomp(":") == name }
30
30
  if default_value_parts
31
- object.instance_eval(default_value_parts[1])
31
+ host_class_instance.instance_eval(default_value_parts[1])
32
32
  else
33
33
  raise ParserError.new "Unknown method parameter '#{name}'"
34
34
  end
@@ -1,3 +1,3 @@
1
1
  module Lookbook
2
- VERSION = "2.0.0.beta.7"
2
+ VERSION = "2.0.0.beta.9"
3
3
  end