Skip to content

Commit

Permalink
Use with_ prefix for slots
Browse files Browse the repository at this point in the history
  • Loading branch information
@allmarkedup
allmarkedup committed Jan 20, 2023
1 parent daa8c90 commit f3cffec
Show file tree
Hide file tree
Showing 21 changed files with 92 additions and 92 deletions.
2 changes: 1 addition & 1 deletion app/components/lookbook/display_options/editor/component.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<%= render_component_tag class: "px-2" do %>
<% if fields.many? %>
<%= lookbook_render :button, icon: :settings, tooltip: "Display options" do |button| %>
<% button.dropdown do %>
<% button.with_dropdown do %>
<div class="p-3 space-y-3">
<%= safe_join(fields) %>
</div>
Expand Down
8 changes: 4 additions & 4 deletions app/components/lookbook/embed/component.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@
<%= render_component_tag class: "not-prose border-b border-lookbook-divider rounded-sm overflow-hidden", "@navigation:start.window": "cleanup" do %>

<%= lookbook_render :toolbar, class: "border border-b-0 border-lookbook-divider" do |toolbar| %>
<% toolbar.section padded: true do %>
<% toolbar.with_section padded: true do %>
<h3>
<%= @target.preview.label %> (<%= @target.label %>)
</h3>
<% end %>
<% toolbar.section align: :right, divide: :left do %>
<% toolbar.with_section align: :right, divide: :left do %>
<%= lookbook_render :button_group do |group| %>
<% group.button icon: :eye,
<% group.with_button icon: :eye,
href: lookbook_inspect_path(@target.path, @params),
tooltip: "View in Inspector" %>
<% group.button icon: :external_link,
<% group.with_button icon: :external_link,
href: lookbook_preview_path(@target.path, @params),
tooltip: "Open in new window",
target: "_blank" %>
Expand Down
12 changes: 6 additions & 6 deletions app/components/lookbook/header/component.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<%= render_component_tag :header do %>
<%= lookbook_render :toolbar, class: "!bg-lookbook-header-bg !text-lookbook-header-text !border-lookbook-header-border" do |toolbar| %>
<% toolbar.section padded: true do %>
<% toolbar.with_section padded: true do %>
<% if branding.present? %>
<a
<% if landing_path %>href="<%= landing_path %>"<% end %>
Expand All @@ -10,7 +10,7 @@
<% end %>
<% end %>

<% toolbar.section padded: false, align: :right, class: "flex items-center" do %>
<% toolbar.with_section padded: false, align: :right, class: "flex items-center" do %>

<div x-show="loading" x-cloak>
<svg class="animate-spin h-3.5 w-3.5 text-lookbook-header-text opacity-60" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
Expand All @@ -21,23 +21,23 @@

<%= lookbook_render :button_group do |group| %>
<% if @debug_menu %>
<% group.button icon: :help_circle, class: "opacity-50 hover:opacity-100 transition !text-lookbook-header-text", "x-show": "!loading" do |button| %>
<% group.with_button icon: :help_circle, class: "opacity-50 hover:opacity-100 transition !text-lookbook-header-text", "x-show": "!loading" do |button| %>
<% menu = lookbook_render :debug_menu,
version: Lookbook::VERSION,
docs_url: "https://lookbook.build/guide",
repo_url: "https://github.com/ViewComponent/lookbook" do %>
<%= helpers.pretty_json(Lookbook.debug_data) %>
<% end %>
<% button.dropdown({}).with_content(menu) %>
<% button.with_dropdown({}).with_content(menu) %>
<% end %>
<% end %>

<% group.button icon: :menu,
<% group.with_button icon: :menu,
"@click.stop": "toggleSidebar",
"x-show": "$store.layout.mobile && sidebarHidden",
class: "!text-lookbook-header-text" %>

<% group.button icon: :x,
<% group.with_button icon: :x,
"@click.stop": "toggleSidebar",
"x-show": "$store.layout.mobile && !sidebarHidden",
"@keydown.esc.window": "closeMobileSidebar",
Expand Down
2 changes: 1 addition & 1 deletion app/components/lookbook/tabs/component.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ class Tabs::Component < Lookbook::BaseComponent
attrs[:name] ||= "tab-#{@tab_counter}"
attrs[:position] ||= @tab_counter
attrs[:theme] ||= @theme
dropdown_tab(**attrs)
with_dropdown_tab(**attrs)
Lookbook::Tabs::Tab::Component.new(**attrs)
end

Expand Down
26 changes: 13 additions & 13 deletions app/views/layouts/lookbook/application.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
alpine_data: "$store.layout.main",
":class": "$store.layout.mobile && '!block'" do |layout| %>

<% layout.pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar-bg relative translate-x-0",
<% layout.with_pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar-bg relative translate-x-0",
":class": "{
'transition': $store.layout.mobile,
'translate-x-full': $store.layout.mobile && sidebarHidden,
Expand All @@ -19,41 +19,41 @@
style: "height: calc(100vh - 2.5rem);" do |layout| %>

<% if @previews.any? %>
<% layout.pane class: "overflow-hidden" do %>
<% layout.with_pane class: "overflow-hidden" do %>
<%= lookbook_render :nav,
id: "previews-nav",
tree: @previews.to_tree,
alpine_data: "$store.nav.previews" do |nav| %>
<%= nav.toolbar do |toolbar| %>
<% toolbar.section padded: true do %>
<%= nav.with_toolbar do |toolbar| %>
<% toolbar.with_section padded: true do %>
<h4 class="pt-1">Previews</h4>
<% end %>
<% toolbar.section align: :right, padded: false do %>
<% toolbar.with_section align: :right, padded: false do %>
<%= lookbook_render :button_group, size: :xs do |group| %>
<% group.button icon: :minus_square,
<% group.with_button icon: :minus_square,
tooltip: "Collapse all",
"@click": "closeAll" %>
<% end %>
<% end %>
<% end %>
<% nav.filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
<% nav.with_filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
<% end %>
<% end %>
<% end %>

<% if @pages.any? %>
<% layout.pane class: "overflow-hidden" do %>
<% layout.with_pane class: "overflow-hidden" do %>
<%= lookbook_render :nav,
id: "pages-nav",
tree: @pages.to_tree,
alpine_data: "$store.nav.pages" do |nav| %>
<%= nav.toolbar do |toolbar| %>
<% toolbar.section padded: true do %>
<%= nav.with_toolbar do |toolbar| %>
<% toolbar.with_section padded: true do %>
<h4 class="pt-1">Pages</h4>
<% end %>
<% toolbar.section align: :right, padded: false do %>
<% toolbar.with_section align: :right, padded: false do %>
<%= lookbook_render :button_group, size: :xs do |group| %>
<% group.button icon: :minus_square,
<% group.with_button icon: :minus_square,
tooltip: "Collapse all",
"@click": "closeAll" %>
<% end %>
Expand All @@ -66,7 +66,7 @@
<% end %>
<% end %>

<% layout.pane id: "app-main", class: "overflow-hidden h-full", ":class": "$store.layout.mobile && 'w-screen'" do %>
<% layout.with_pane id: "app-main", class: "overflow-hidden h-full", ":class": "$store.layout.mobile && 'w-screen'" do %>
<%= content_for?(:main) ? yield(:main) : yield %>
<% end %>
<% end %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/layouts/lookbook/shell.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<% end %>

<%= lookbook_render :header, id: "app-header", debug_menu: @config.debug_menu do |header| %>
<% header.branding { @config.project_name } %>
<% header.with_branding { @config.project_name } %>
<% end %>

<%= content_for?(:shell) ? yield(:shell) : yield %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/lookbook/inspector/panels/_params.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<div class="p-4 w-full h-full overflow-x-hidden" id="params-editor-<%= @target.id %>">
<%= lookbook_render "params/editor" do |editor| %>
<% @params.each do |param| %>
<% editor.field param: param %>
<% editor.with_field param: param %>
<% end %>
<% end %>
</div>
Expand Down
46 changes: 23 additions & 23 deletions app/views/lookbook/inspector/show.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,57 +5,57 @@
"preview-target": @target.id
} do |layout| %>

<%= layout.pane class: "flex flex-col h-full overflow-hidden",
<%= layout.with_pane class: "flex flex-col h-full overflow-hidden",
"x-effect": "forceOrientation = (layoutWidth < $store.inspector.minVerticalSplitWidth) ? 'horizontal' : null" do %>

<%= lookbook_render :toolbar, id: "main-toolbar" do |toolbar| %>
<% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
<% toolbar.with_section ":class": "layoutResizing && 'overflow-hidden'" do %>
<%= lookbook_render :tabs, alpine_data: "$store.inspector.main", id: "inspector-tabs-main" do |tabs| %>
<%= @main_panels.each do |panel| %>
<% tabs.tab name: panel.name,
<% tabs.with_tab name: panel.name,
label: panel.label,
hotkey: panel.hotkey,
disabled: panel.disabled %>
<% end %>
<% end %>
<% end %>

<% toolbar.section align: :right, class: "flex-none" do %>
<% toolbar.with_section align: :right, class: "flex-none" do %>
<% if @dynamic_display_options.any? %>
<%= lookbook_render "display_options/editor" do |editor| %>
<% @dynamic_display_options.each do |key, opts| %>
<% editor.field name: key, opts: opts, value: @static_display_options[key] %>
<% editor.with_field name: key, opts: opts, value: @static_display_options[key] %>
<% end %>
<% end %>
<% end %>
<% end %>

<% toolbar.section divide: :left, class: "flex-none relative z-10" do %>
<% toolbar.with_section divide: :left, class: "flex-none relative z-10" do %>
<%= lookbook_render :button_group do |group| %>
<% group.button icon: :link,
<% group.with_button icon: :link,
tooltip: "Copy preview URL",
copy: true do %>
<%= lookbook_inspect_url(@target.lookup_path, request.query_parameters) %>
<% end %>

<% if @pages.any? %>
<% group.button icon: :code,
<% group.with_button icon: :code,
tooltip: "Copy page embed code",
copy: true do %>
&lt;%= embed <%= @preview.preview_class_name %>, :<%= @target.name %>, params: <%= request.query_parameters.deep_symbolize_keys.to_s %> %&gt;
<% end %>
<% end %>

<% group.button icon: :refresh_cw,
<% group.with_button icon: :refresh_cw,
tooltip: "Refresh preview",
"@click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>

<% group.button icon: :external_link,
<% group.with_button icon: :external_link,
href: lookbook_preview_path(@target.lookup_path, request.query_parameters),
tooltip: "Open preview in new window",
target: "_blank" %>

<% group.button icon: "vertical ? 'sidebar' : 'credit-card'",
<% group.with_button icon: "vertical ? 'sidebar' : 'credit-card'",
tooltip: "Show drawer",
"@click": "$store.inspector.drawer.hidden = false",
class: "rotate-180",
Expand All @@ -68,7 +68,7 @@
<div class="h-full relative overflow-auto">
<%= lookbook_render :tab_panels, alpine_data: "$store.inspector.main", id: "inspector-panels-main" do |tabs| %>
<% @main_panels.each do |panel| %>
<% tabs.panel name: panel.name do %>
<% tabs.with_panel name: panel.name do %>
<%= lookbook_render :inspector_panel, name: panel.name do %>
<%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
<% end %>
Expand All @@ -78,25 +78,25 @@
</div>
<% end %>

<%= layout.pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer-bg",
<%= layout.with_pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer-bg",
"x-show": "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>

<%= lookbook_render :toolbar, id: "drawer-toolbar" do |toolbar| %>
<% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
<% toolbar.with_section ":class": "layoutResizing && 'overflow-hidden'" do %>
<%= lookbook_render :tabs, alpine_data: "$store.inspector.drawer", id: "inspector-tabs-drawer" do |tabs| %>
<%= @drawer_panels.each do |panel| %>
<% tabs.tab name: panel.name,
<% tabs.with_tab name: panel.name,
label: panel.label,
hotkey: panel.hotkey,
disabled: panel.disabled %>
<% end %>
<% end %>
<% end %>

<% toolbar.section align: :right, class: "flex-none relative z-10" do %>
<% toolbar.with_section align: :right, class: "flex-none relative z-10" do %>
<%= lookbook_render :button_group do |group| %>
<%= @drawer_panels.select { |p| !p.disabled && p.copy }.each do |panel| %>
<% group.button icon: :copy,
<% group.with_button icon: :copy,
tooltip: "Copy panel contents",
copy: !!panel.copy,
"x-show": "$store.inspector.drawer.activeTab === '#{panel.name}'",
Expand All @@ -107,27 +107,27 @@
<% end %>
<% end %>

<% toolbar.section divide: :left, class: "flex-none relative z-10" do %>
<% toolbar.with_section divide: :left, class: "flex-none relative z-10" do %>
<%= lookbook_render :button_group do |group| %>

<% group.button icon: :corner_up_right,
<% group.with_button icon: :corner_up_right,
tooltip: "Move drawer to right",
"@click": "switchOrientation",
"x-show": "horizontal && layoutWidth > $store.inspector.minVerticalSplitWidth",
cloak: true %>

<% group.button icon: :corner_up_right,
<% group.with_button icon: :corner_up_right,
"x-show": "horizontal && layoutWidth <= $store.inspector.minVerticalSplitWidth",
disabled: true,
cloak: true %>

<% group.button icon: :corner_left_down,
<% group.with_button icon: :corner_left_down,
tooltip: "Move drawer to bottom",
"@click": "switchOrientation",
"x-show": "vertical",
cloak: true %>

<% group.button icon: :x_circle,
<% group.with_button icon: :x_circle,
tooltip: "Hide drawer",
"@click": "$store.inspector.drawer.hidden = true",
cloak: true %>
Expand All @@ -138,7 +138,7 @@
<div class="h-full overflow-auto">
<%= lookbook_render :tab_panels, alpine_data: "$store.inspector.drawer", id: "inspector-panels-drawer" do |tabs| %>
<% @drawer_panels.each do |panel| %>
<% tabs.panel name: panel.name do %>
<% tabs.with_panel name: panel.name do %>
<%= lookbook_render :inspector_panel, name: panel.name do %>
<%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
<% end %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/lookbook/pages/show.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<% if @page.sections.any? %>
<%= lookbook_render :page_tabs, id: "page-tabbed-sections", markdown: false, class: "mt-6" do |page_tabs| %>
<% @page.sections.each do |section| %>
<% page_tabs.tab name: "page-section-#{section.name}", label: section.label do %>
<% page_tabs.with_tab name: "page-section-#{section.name}", label: section.label do %>
<%= page_controller.render_page(section) %>
<% end %>
<% end %>
Expand Down
2 changes: 1 addition & 1 deletion spec/components/button_group_component_spec.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
RSpec.describe Lookbook::ButtonGroup::Component, type: :component do
it "renders the component" do
render_inline(described_class.new) do |group|
group.button icon: :book
group.with_button icon: :book
end

expect(page).to have_css("[data-component='button-group']")
Expand Down
10 changes: 5 additions & 5 deletions spec/components/page_tabs_component_spec.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
RSpec.describe Lookbook::PageTabs::Component, type: :component do
it "renders the component" do
render_inline(described_class.new) do |tabs|
tabs.tab label: "First tab" do
tabs.with_tab label: "First tab" do
"First"
end
tabs.tab label: "Second tab" do
tabs.with_tab label: "Second tab" do
"Second"
end
end
Expand All @@ -16,13 +16,13 @@

it "includes all the tabs" do
render_inline(described_class.new) do |tabs|
tabs.tab label: "First tab" do
tabs.with_tab label: "First tab" do
"First"
end
tabs.tab label: "Second tab" do
tabs.with_tab label: "Second tab" do
"Second"
end
tabs.tab label: "Third tab" do
tabs.with_tab label: "Third tab" do
"Third"
end
end
Expand Down
4 changes: 2 additions & 2 deletions spec/components/split_pane_component_spec.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
RSpec.describe Lookbook::SplitLayout::Component, type: :component do
it "renders the component" do
render_inline(described_class.new(alpine_data: "$store.namespace.layoutStoreObject")) do |layout|
layout.pane { "First pane" }
layout.pane { "Second pane" }
layout.with_pane { "First pane" }
layout.with_pane { "Second pane" }
end

expect(page).to have_css("[data-component=split-layout]")
Expand Down
Loading

3 comments on commit f3cffec

@Spone
Copy link
Contributor

@Spone Spone commented on f3cffec Feb 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@allmarkedup just a quick question: did you find a trick to add all these with_, apart from changing them one by one? I'm trying to document this, given that it's probably the most "annoying" breaking change of v3.

@allmarkedup
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @Spone, no I didn't, I just did these manually which is not ideal as I missed a few and it can cause some really subtle bugs unfortunately 😕. It would be okay if it caused errors to be thrown but often it just fails silently in places where the old syntax is still being used when running v3.

I have a big job at work to convert all our templates over, we have literally thousands of slot calls using the old format and I'm not looking forward to it to be honest. I'm hoping that I can monkey patch VC somehow to help alert me to places where I've missed converting old-style slot calls but I haven't looked into it in much detail yet to see if that is even possible.

Any suggestions you might have would be much appreciated as this is definitely a bit of a pain. I understand why the change is needed but it's a blocker to upgrading to v3 for us for sure.

@Spone
Copy link
Contributor

@Spone Spone commented on f3cffec Feb 28, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@allmarkedup Here is a first attempt at automating this: ViewComponent/view_component#1669

Please sign in to comment.