Overview
You can extend Lookbook’s preview experience to better match your projects requirements by adding custom inspector panels to display data about the current preview.
Adding panels
Custom inspector panels can be added using the Lookbook.add_panel method
when you configure your Lookbook installation:
Lookbook.
add_panel
(name, partial_path, opts = {})
Arguments:
name
|
Symbol,String
|
Unique panel name |
partial_path
|
String
|
Path to the partial template used to render the panel |
opts
|
Hash
|
Set of panel options |
Options:
label
|
String
|
The text to be displayed in the panel tab |
hotkey
|
String
|
Keyboard shortcut used to switch to the panel |
disabled
|
Boolean
|
Disabled tabs are still accessible but are greyed out in the UI |
copy
|
String
|
If present, the panel will display a copy button that copies the value of this property to the clipboard when clicked |
locals
|
Hash
|
A hash of local variables that will be passed to the panel when it is rendered |
For example, a very simple ‘info’ panel could be created as follows:
Lookbook.add_panel(:info, "panels/info", {
label: "Extra Info"
})
<!-- app/views/panels/_info.html.erb -->
<div class="lookbook-panel">
<h2>Some information</h2>
<ul>
<li>You are looking at the '<%= preview.label %>' preview</li>
<li>The preview file path is: '<%= preview.full_path %>'<li>
<li>There are <%= scenarios.size %> scenarios in this preview<li>
</ul>
</div>
Panel partial templates can be located anywhere within your app’s views directory.
Modifying panel properties
You can update the properties of any existing panel using the Lookbook.update_panel
method when you configure your Lookbook installation:
Lookbook.
update_panel
(name, opts)
Arguments:
name
|
Symbol,String
|
Name of target panel |
opts
|
Hash
|
Set of panel options |
Options:
label
|
String
|
The text to be displayed in the panel tab |
hotkey
|
String
|
Keyboard shortcut used to switch to the panel |
disabled
|
Boolean
|
Disabled tabs are still accessible but are greyed out in the UI |
copy
|
String
|
If present, the panel will display a copy button that copies the value of this property to the clipboard when clicked |
locals
|
Hash
|
A hash of local variables that will be passed to the panel when it is rendered |
For example, the following would change the tab label text and hotkey for the notes panel:
Lookbook.update_panel(:notes, {
label: "Usage Info",
hotkey: "u",
})
Removing a panel
It’s unlikely that you will actually want to remove a panel altogether. If you wish to hide a panel from
display then it’s better to use the preview_inspector.drawer_panels configuration option
to specify the panels you wish to include in previews.
If you do with to remove a system panel from Lookbook altogether (and make it unavailable to the preview inspector and preview embeds), use the Lookbook.remove_panel method:
Lookbook.
remove_panel
(name)
Arguments:
name
|
Symbol,String
|
Name of target panel |
For example, to remove the notes panel altogether:
Lookbook.remove_panel(:notes)
Panel options
There are a number of available options when defining a panel:
label
|
String
|
The text to be displayed in the panel tab |
hotkey
|
String
|
Keyboard shortcut used to switch to the panel |
disabled
|
Boolean
|
Disabled tabs are still accessible but are greyed out in the UI |
copy
|
String
|
If present, the panel will display a copy button that copies the value of this property to the clipboard when clicked |
locals
|
Hash
|
A hash of local variables that will be passed to the panel when it is rendered |
Below is an example of adding a new panel with some options set:
Lookbook.add_panel(:info, "path/to/view_partial", {
label: "New Panel",
hotkey: "ctrl.n",
copy: "Content to be copied",
locals: {
last_updated: '2022-03-02'
}
})
All panel option values can be provided either as a simple static value or as a lambda function. Lambdas receive a single object with data relating to the currently active preview/scenario. For example:
{
# Customise the panel tab label:
label: "Params",
# Disable the tab if no params are set for the current preview:
disabled: ->(data) { data.context.params.none? }
}
The data hash provided as the single argument to any lambda functions contains the same objects
as those that are made available as variables to the panel partial template. See the panel template variables docs for full details.