lookbook 1.0.0.beta.1 → 1.0.0.beta.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5efc30f722f9fff6377285d5b4e06a5f62e20e0a202eb19966ab6a7701999db2
-  data.tar.gz: 4987e68865cf8ddfdc68838bfc1497c71118898c0607d0c5dd9701ccc754d406
+  metadata.gz: d5ea17315afaadd8b53a97bd7e3a5cb41c9c1098f5f4a67984d702386b1033b3
+  data.tar.gz: 3d2c07669fc5b7bd812429c010d2e79bc3bf0d6de4edc27c8f3da978d3780d7f
 SHA512:
-  metadata.gz: 27b85921801c7e88510e69ae88a0b6b093f9da9252910130b5ee7edbc89ecb9149a8b7d0a6c60b6993904e73448e64150a2756a936eeb1e3f61a4ab7d2acc40b
-  data.tar.gz: 68d236bd6baba5c456cc090cd2faed45ef02300ba2d0913eae9d2087b0572d140653df035a65a28d29baf435459f67ea86aa1cb7142634c5154324540ac56e1f
+  metadata.gz: e9b2b50f8b9054c4e3ee9bff900c7326062721cad676b3708b2ff42e79e8a2178f35314284a01339faeca6a9350258bfe490fc75b058a7294875c30d5c103aae
+  data.tar.gz: 331ca602732e745d03a883a62e4e5e7ee0eacce7d55fc2fce74c47ea7661aaf2b42ef0b486e3a7b9ddc44b85192dcedbc2d7b4e30b9cd32ca4ec11e0a87b811e

data/README.md

@@ -11,6 +11,7 @@ The main goals of the v1.0 release are:
 - [x] Rebuild app UI using ViewComponent components
 - [x] Improve usability of the small screen/mobile layout
 - [x] Add support for some limited UI color theme customisation
+- [x] Add support for custom inspector panels
 - [x] Remove the `experimental` flag from the [Pages](https://github.com/allmarkedup/lookbook#pages)
 - [x] Improve the development/debugging setup, and allow previewing Lookbook's own components in Lookbook :-)
 - [ ] Improve the test setup and test coverage, switch to RSpec **[in progress]**
@@ -29,25 +30,21 @@ The bulk of the v1.0 'new feature' development work is now mostly complete, alth
 
 **If you are an existing Lookbook user** I'd greatly appreciate if you can kick the tyres on the v1.0 beta and open an issue with any bug reports, suggestions or feedback you might have.
 
-### Main areas/points for testing:
+### Main areas/points for testing/feedback:
 
 - Existing Lookbook setups should continue to work **with no changes required**
-- There have been a number of small UI changes - do any of them negatively affect your experience of using Lookbook?
-- The Pages feature should work without opting in to any experimental features. 
-- It's now possible to pick from one of a small set of pre-defined UI themes (finer-grained customisation coming soon!). [See below](#ui-theming) for details. Any thoughts on this?
+- It's now possible to pick from one of a small set of pre-defined **UI themes** (plus finer-grained customisation coming soon). [See below](#ui-theming) for details.
+- You can now [extend Lookbook](#extending-lookbook) to more closely customise it to your needs - testing and feedback around this area would be a great help!
 
-> However absolutely any thoughts, comments or bug reports (even if unrelated to the specific areas above) would be much appreciated!
+> Any thoughts, comments or bug reports (even if unrelated to the specific areas above) would be much appreciated!
 
-## New features
 
-There are a number of new features that are planned for inclusion in the v1.0 release. They are:
+## UI theming
 
-### UI theming
-
-Lookbook now ships with a small set of pre-defined UI themes, which can be set using the `ui_theme` config option:
+Lookbook v1.0 ships with a small set of pre-defined UI themes, which can be set using the `ui_theme` config option:
 
 ```ruby
-# config/application.rb (or similar)
+# config/application.rb
 config.lookbook.ui_theme = "blue"
 ```
 
@@ -59,25 +56,174 @@ Currently available themes are:
 
 > More themes and finer-grained customisation of theme colours is coming soon!
 
-### Inspector panels customisation
+## Extending Lookbook
+
+> Opening up Lookbook to more in-depth customisation is a work in progress and any feedback or use-case examples would be greatly appreciated!
+
+* [Lifecycle Hooks](#lifecycle-hooks)
+* [Adding inspector panels](#adding-inspector-panels)
+* [Removing inspector panels](#removing-inspector-panels)
+
+### Lifecycle hooks
+
+A number of lifecycle hooks are available for use in triggering actions outside of Lookbook.
+
+All hook callback blocks are yielded a `Lookbook` instance as the first argument. Some hooks additionally supply other arguments, see below for details.
+
+#### `:after_initialize`
+
+This is run once Lookbook has been set up and the initial parsing of files has been completed.
+
+```ruby
+Lookbook.after_initialize do |app|
+  puts "Lookbook version #{app.version} has started"
+  puts "There are #{app.previews.size} previews and #{app.pages.size} pages"
+  # other code here...
+end
+```
+
+#### `:after_change`
+
+Run each time a change is detected to a file that Lookbook is watching, unless listening for changes has been disabled in the config.
+
+Receives a hash as the second argument with `:modified`, `:added`, and `:removed` properties, each of which is an array of affected file paths.
+
+```ruby
+Lookbook.after_change do |app, changes|
+  puts "Modified files: #{changes.modified.join("\n")}"
+  puts "Added files: #{changes.added.join("\n")}"
+  puts "Removed files: #{changes.removed.join("\n")}"
+end
+```
+
+#### `:before_exit`
+
+Run when the current process exits, after Lookbook has stopped any listeners.
+
+```ruby
+Lookbook.after_initialize do |app|
+  puts "Shutting down..."
+end
+```
+
+### Adding inspector panels
+
+It's now possible to add custom inspector panels/tabs to Lookbook using the `:define_panel` method:
+
+```ruby
+Lookbook.define_panel(<name>, <opts>)
+```
+
+* `<name>`: A unique name for the panel
+* `<opts>`: A `Hash` of options (see below for details)
+
+For example, a very simple 'info' panel could be created as follows:
+
+```ruby
+# config/application.rb
+Lookbook.define_panel(:info, {
+  label: "Extra Info",
+  partial: "panels/info"
+})
+```
+
+```erb
+<!-- views/panels/_info.html.erb -->
+<div>
+  <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 <%= examples.size %> examples in this preview<li>
+  </ul>
+</div>
+```
+
+#### Panel templates
+
+The panel partial template will have access to any `locals` defined in the [panel options](#panel-options), plus the following variables:
+
+#### `panel`
+
+The resolved panel options object (see below for details)
+
+```erb
+<h2><%= panel.label =></h2>
+```
+
+#### `preview`
+
+An object representing the current preview:
+
+* `preview.id`
+* `preview.label`
+* `preview.full_path`
+* `preview.url_path`
+* ... 
+
+#### `examples`
+
+An array of objects representing the individual examples being rendered in the current preview. (For non-grouped previews, this array will always only have one item.)
+
+Each example has the following properties:
+
+* `example.output` - the rendered preview example output (String)
+* `example.source` - the example source code (String)
+* `example.source_lang` - a hash of information about the source language (Ruby or HTML/ERB, depending on whether the example uses a preview template)
+* `example.id`
+* `example.label`
+* `example.full_path`
+* `example.url_path`
+* ... 
+
+
+#### `components`
+
+An array of objects representing the components that are rendered in the preview. The components are 'guessed' from the Preview class name but if that doesn't work then they can be manually specified via annotations.
+
+Each component object has the following properties:
 
-It is now possible to add, remove or customise tabbed panels in the preview inspector by editing the `lookbook.inspector_panels` configuration option.
+* `component.name`
+* `component.full_path`
+* `component.dir_path`
+* `component.template_path`
+* `component.inline?`
 
-By default Lookbook comes with **five** panels split between two resizable panes:
+To manually specify one or more components in the preview class, you can use the `@component` tag at the class level:
 
-1. The `main` pane - by default includes the `preview` and `output` (HTML) panels
-2. The `drawer` pane - by default includes the  `source`, `notes` and `params` panels
+```ruby
+# @component Elements::BigDangerButton 
+class ButtonComponentPreview < ViewComponent::Preview
+
+  def default
+    render Elements::BigDangerButton.new do
+      "Click here"
+    end
+  end
+
+end
+```
+
+#### `context`
+
+An object containing data about the request context:
+
+* `context.preview_params`
+* `context.path`
+
+#### `app`
 
-These can be hidden, moved, reordered and/or added to as your project requires.
+The main `Lookbook` app instance.
 
-#### Panel config overview
+* `app.previews` - Array of preview objects
+* `app.pages` - Array of page objects
+* `app.logger` - Logger instance
 
-Panels are defined as a hash with the following properties (all of which are actually optional):
+#### Panel options
 
 ```ruby
 {
   label: "New Panel",
-  pane: :drawer,
   position: 1,
   partial: "path/to/view_partial",
   content: "Some **markdown** content", 
@@ -85,11 +231,11 @@ Panels are defined as a hash with the following properties (all of which are act
   disabled: false,
   show: true,
   copy: "Content to be copied",
+  locals: {}
 }
 ```
 
 * `label`: the text to be displayed in the tab
-* `pane`: the panel location, either `:drawer` or `:main` (`:drawer` is the default)
 * `position`: used for ordering the tabs
 * `partial`: the path to the view template partial used to render the panel
 * `content`: the default partial renders and displays the contents of this (markdown supported)
@@ -99,7 +245,8 @@ Panels are defined as a hash with the following properties (all of which are act
 * `copy`: if present, the panel will display a copy button that copies the value of this property to the clipboard when clicked
 * `locals`: a `Hash` of local variables that will be made available to the partial when rendering the panel
 
-All panel config values can be provided either as a **simple static value** or as a **lambda function** which will receive a hash of data relating to the current preview/example. For example:
+
+All panel option values can be provided either as a **simple static value** or as a **lambda function** which will receive a hash of data relating to the currently active preview/example. For example:
 
 ```ruby
 {
@@ -108,32 +255,25 @@ All panel config values can be provided either as a **simple static value** or a
 }
 ```
 
-> **Work in progress!** There is more documentation to come on the data hash passed to lambdas.
+The `data` hash contains the same set of objects that are passed to the panel partial template:
 
-#### Removing panels
+* `data.preview`
+* `data.examples`
+* `data.components`
+* `data.context`
+* `data.app`
 
-To remove a pane entirely from the UI, just set it's value to false in your `application.rb` (or wherever you do your configuration):
+**See the [panel templates section above]((#panel-templates)) for more details.**
 
-```ruby
-config.lookbook.inspector_panels.notes = false # remove the notes panel
-```
+### Removing inspector panels
 
-#### Customising existing panels
-
-Existing panel configuration can be amended as needed. For example, to change the label on one of the default panels:
+To remove a panel entirely from the UI you can use the `Lookbook.remove_panel` method:
 
 ```ruby
-config.lookbook.inspector_panels.notes.label = "Instructions"
-
-# or use block-style config
-config.lookbook.inspector_panels do |panels|
-  panels.notes.label = "Instructions"
-end
+# config/application.rb
+Lookbook.remove_panel(:notes)
 ```
 
-
-
-
 ## 🛠 Workbench
 
 As of this release, Lookbook's UI is itself built using ViewComponent components. To help with development it is possible to preview these components (in a Lookbook instance!) by running the included 'Workbench" app, as follows:

data/app/components/lookbook/{component.rb → base_component.rb}

@@ -1,5 +1,5 @@
 module Lookbook
-  class Component < ViewComponent::Base
+  class BaseComponent < ViewComponent::Base
     include Lookbook::ComponentHelper
 
     def initialize(alpine_data: [], **html_attrs)

data/app/components/lookbook/button/component.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class Button::Component < Lookbook::Component
+  class Button::Component < Lookbook::BaseComponent
     renders_one :icon, Lookbook::Icon::Component
     renders_one :dropdown
 

data/app/components/lookbook/button_group/component.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class ButtonGroup::Component < Lookbook::Component
+  class ButtonGroup::Component < Lookbook::BaseComponent
     renders_many :buttons, ->(copy: nil, **attrs, &block) do
       attrs[:size] = @size
       instance = if copy.present?

data/app/components/lookbook/code/component.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class Code::Component < Lookbook::Component
+  class Code::Component < Lookbook::BaseComponent
     include Lookbook::OutputHelper
 
     def initialize(

data/app/components/lookbook/copy_button/component.html.erb

@@ -4,7 +4,7 @@
   x_data: prepare_alpine_data,
   "@click.prevent": "copyToClipboard" do |button| %>
   <% button.icon name: @icon, size: icon_size, x_show: "!copied", cloak: true %>
-  <%= render_component :icon, name: :check, size: icon_size, class: "text-green-500", x_show: "copied", cloak: true  %>
+  <%= icon  :check, size: icon_size, class: "text-green-500", x_show: "copied", cloak: true  %>
   <% if content %>
     <div x-ref="copyTarget" class="hidden"><%== content %></div>
   <% end %>

data/app/components/lookbook/copy_button/component.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class CopyButton::Component < Lookbook::Component
+  class CopyButton::Component < Lookbook::BaseComponent
     def initialize(target: nil, icon: :code, **attrs)
       @icon = icon
       @target = target

data/app/components/lookbook/dimensions_display/component.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class DimensionsDisplay::Component < Lookbook::Component
+  class DimensionsDisplay::Component < Lookbook::BaseComponent
     def initialize(target:, **html_attrs)
       @target = target
       super(**html_attrs)

data/app/components/lookbook/embed/component.html.erb

@@ -10,10 +10,10 @@
         <% toolbar.section align: :right, divide: :left do %>
           <%= render_component :button_group do |group| %>
           <% group.button icon: :eye,
-            href: helpers.lookbook.inspect_path(@example.path, @params),
+            href: helpers.lookbook_inspect_path(@example.path, @params),
             tooltip: "View in Inspector" %>
           <% group.button icon: :external_link,
-            href: helpers.lookbook.inspect_path(@example.path, @params),
+            href: helpers.lookbook_inspect_path(@example.path, @params),
             tooltip: "Open in new window",
             target: "_blank" %>
         <% end %>
@@ -25,9 +25,10 @@
       @viewport:loaded="loadResizer"
       @dom:update-complete="loadResizer"
       @viewport:resize-progress="resizeIframe"
-      @viewport:resize-complete="resizeIframe"> 
+      @viewport:resize-complete="resizeIframe"
+      @tabs:change.window="resizeIframe"> 
       <%= render_component :viewport,
-        src: helpers.lookbook.preview_path(@example.path, @params.merge(lookbook_embed: true)),
+        src: helpers.lookbook_preview_path(@example.path, @params.merge(lookbook_embed: true)),
         alpine_data: "store",
         resize_height: false,
         max_height: @max_height,
@@ -38,7 +39,7 @@
 <% else %>
 <%= render_component_tag class: "bg-white flex flex-col items-center justify-center border-2 border-dashed border-gray-200 p-6 rounded-md not-prose" do %>
   <div class="px-4 text-center">
-    <%= render_component :icon, name: :alert_triangle, size: 6, class: "text-red-300 mx-auto" %>
+    <%= icon  :alert_triangle, size: 6, class: "text-red-300 mx-auto" %>
     <div class="mt-2 max-w-xs">
       <h5 class="text-base">Preview not found</h5>
       <p class="mt-1 opacity-50 text-sm">

data/app/components/lookbook/embed/component.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class Embed::Component < Lookbook::Component
+  class Embed::Component < Lookbook::BaseComponent
     def initialize(id:, example:, params: {}, opts: {}, max_height: nil, **html_attrs)
       @id = id
       @example = example

data/app/components/lookbook/filter/component.html.erb

@@ -11,7 +11,7 @@
     @keydown.f.stop.prevent.window="focus"
     @keydown.stop>
     <button class="text-lookbook-button-text hover:text-lookbook-button-text-hover focus:ring-0 focus:outline-none absolute top-1/2 right-3 -translate-y-1/2" @click="clear" :class="{hidden: !active}">
-      <%= render_component :icon, name: :x, size: 3 %>
+      <%= icon  :x, size: 3 %>
     </button>
 </div>
 <% end %>

data/app/components/lookbook/filter/component.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class Filter::Component < Lookbook::Component
+  class Filter::Component < Lookbook::BaseComponent
     def initialize(store: nil, placeholder: "Type to filter&hellip;", **html_attrs)
       @model = store.nil? ? "{}" : "#{store}.raw"
       @placeholder = placeholder

data/app/components/lookbook/header/component.html.erb

@@ -12,7 +12,7 @@
 
     <% toolbar.section padded: false, align: :right, class: "flex items-center" do %>
       <%= render_component :button_group do |group| %>
-        <% if Rails.env.development? %>
+        <% if @debug_menu %>
           <% group.button icon: :help_circle, class: "opacity-50 hover:opacity-100 transition !text-lookbook-header-text" do |button| %>
             <% button.dropdown do %>
               <%= tag.div class: "divide-y divide-lookbook-divider min-w-[180px]" do %>
@@ -24,15 +24,10 @@
                         x-data="clipboardComponent"
                         @click.prevent.stop="copyToClipboard('#debug-data')">
                         <span x-show="copied" x-cloak>
-                          <%= render_component :icon,
-                            name: :check,
-                            size: 2.5,
-                            class: "text-green-600" %>
+                          <%= icon :check, size: 2.5, class: "text-green-600" %>
                         </span>
                         <span x-show="!copied">
-                          <%= render_component :icon,
-                            name: :clipboard,
-                            size: 2.5 %>
+                          <%= icon :clipboard, size: 2.5 %>
                         </span>
                         <span class="ml-2">Copy debug data</span>
                       </a>
@@ -41,7 +36,7 @@
                       <a href="#"
                         class="text-xs flex items-center hover:underline"
                         @click.stop="localStorage.clear(); window.location.reload();">
-                        <%= render_component :icon, name: :refresh_cw, size: 2.5 %>
+                        <%= icon  :refresh_cw, size: 2.5 %>
                         <span class="ml-2">Reset local storage</span>
                       </a>
                     </li>
@@ -52,10 +47,10 @@
                   <span class="mr-6">v<%= Lookbook::VERSION %></span>
                   <div class="flex items-center space-x-2">
                     <!-- a href="https://github.com/allmarkedup/lookbook" target="_blank" class="ml-auto opacity-70" title="Documentation">
-                      <%= render_component :icon, name: :book, size: 3 %>
+                      <%= icon  :book, size: 3 %>
                     </a -->
                     <a href="https://github.com/allmarkedup/lookbook" target="_blank" class="ml-auto opacity-70" title="Github">
-                      <%= render_component :icon, name: :github, size: 3 %>
+                      <%= icon  :github, size: 3 %>
                     </a>
                   </div>
                 </div>

data/app/components/lookbook/header/component.rb

@@ -1,7 +1,12 @@
 module Lookbook
-  class Header::Component < Lookbook::Component
+  class Header::Component < Lookbook::BaseComponent
     renders_one :branding
 
+    def initialize(debug_menu: false, **html_attrs)
+      @debug_menu = debug_menu
+      super(**html_attrs)
+    end
+
     def landing_path
       helpers.landing_path if defined? helpers.landing_path
     end

data/app/components/lookbook/icon/component.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class Icon::Component < Lookbook::Component
+  class Icon::Component < Lookbook::BaseComponent
     def initialize(name:, size: 4, **html_attrs)
       @icon_name = name.is_a?(Symbol) ? name.to_s.tr("_", "-").to_json : name
       @size = size || 4

data/app/components/lookbook/nav/component.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class Nav::Component < Lookbook::Component
+  class Nav::Component < Lookbook::BaseComponent
     renders_one :filter, Lookbook::Filter::Component
 
     def initialize(

data/app/components/lookbook/nav/item/component.html.erb

@@ -6,11 +6,11 @@
     style: "padding-left: #{left_pad}px",
     x_bind: "bindings.#{href.present? ? "link" : "toggle"}" do %>
     <div class="relative flex items-center">
-      <%= render_component :icon, name: nil,
+      <%= icon  nil,
         size: 3,
         class: "mr-1 text-lookbook-nav-toggle absolute -left-4",
         x_effect: "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
-      <%= render_component :icon, name: nav_icon(@item), size: 3.5, class: "mr-1.5 text-lookbook-nav-icon" %>
+      <%= icon  nav_icon(@item), size: 3.5, class: "mr-1.5 text-lookbook-nav-icon" %>
       <span><%= label %></span>
     </div>
   <% end %>

data/app/components/lookbook/nav/item/component.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class Nav::Item::Component < Lookbook::Component
+  class Nav::Item::Component < Lookbook::BaseComponent
     ICONS = {
       page: :file,
       page_collection: :folder,

data/app/components/lookbook/page_tabs/component.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class PageTabs::Component < Lookbook::Component
+  class PageTabs::Component < Lookbook::BaseComponent
     renders_many :tabs, ->(**attrs, &block) do
       @tabs ||= []
       attrs[:content] = capture(&block)

data/app/components/lookbook/params_editor/component.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class ParamsEditor::Component < Lookbook::Component
+  class ParamsEditor::Component < Lookbook::BaseComponent
     renders_many :fields, Lookbook::ParamsEditor::Field::Component
 
     protected

data/app/components/lookbook/params_editor/field/component.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class ParamsEditor::Field::Component < Lookbook::Component
+  class ParamsEditor::Field::Component < Lookbook::BaseComponent
     def initialize(input:, name:, default: nil, value: nil, input_type: nil, type: nil, options: nil, **html_attrs)
       @input = input
       @name = name

data/app/components/lookbook/prose/component.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class Prose::Component < Lookbook::Component
+  class Prose::Component < Lookbook::BaseComponent
     include Lookbook::OutputHelper
 
     def initialize(size: :md, markdown: true, **html_attrs)

data/app/components/lookbook/split_layout/component.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class SplitLayout::Component < Lookbook::Component
+  class SplitLayout::Component < Lookbook::BaseComponent
     renders_many :panes, Lookbook::TagComponent
 
     protected

data/app/components/lookbook/tab_panels/component.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class TabPanels::Component < Lookbook::Component
+  class TabPanels::Component < Lookbook::BaseComponent
     renders_many :panels, ->(**attrs) do
       @panel_counter += 1
       attrs[:name] ||= "tab-#{@panel_counter}"

data/app/components/lookbook/tab_panels/panel/component.rb

@@ -1,8 +1,8 @@
 module Lookbook
-  class TabPanels::Panel::Component < Lookbook::Component
+  class TabPanels::Panel::Component < Lookbook::BaseComponent
     def initialize(name:, id: nil, **html_attrs)
       @name = name 
-      @id = id || name
+      @id = "#{id || "panel-#{name}"}"
       super(**html_attrs)
     end
   end

data/app/components/lookbook/tabs/component.js

@@ -16,7 +16,7 @@ export default function tabsComponent(store) {
     },
 
     get tabs() {
-      return Array.from(this.$refs.tabs.children);
+      return this.$refs.tabs ? Array.from(this.$refs.tabs.children) : [];
     },
 
     get dropdownTabs() {
@@ -45,7 +45,7 @@ export default function tabsComponent(store) {
         const initialTab = initial
           ? this.tabs.find((t) => this._getRef(t) === initial)
           : this.tabs[0];
-        this.selectTab(initialTab);
+        this.selectTab(initialTab, true);
 
         this.parentObserver = observeSize(
           this.$root.parentElement,
@@ -64,13 +64,10 @@ export default function tabsComponent(store) {
       }
 
       if (width === this.$root.offsetWidth) {
-        console.log("uep");
         this.visibleTabsCount = this.tabs.length;
         return;
       }
 
-      console.log(width);
-
       let sumTabWidths = 60;
       let triggerLeft = 20;
       let visibleTabsCount = 0;
@@ -87,9 +84,12 @@ export default function tabsComponent(store) {
       this._lastMeasuredWidth = width;
     },
 
-    selectTab(el) {
+    selectTab(el, initial = false) {
       this.store.activeTab = this._getRef(el);
       dropdown.hide();
+      if (!initial) {
+        this.$dispatch("tabs:change", { tabs: this });
+      }
     },
 
     isSelected(el) {

data/app/components/lookbook/tabs/component.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class Tabs::Component < Lookbook::Component
+  class Tabs::Component < Lookbook::BaseComponent
     renders_many :tabs, ->(**attrs) do
       @tab_counter += 1
       attrs[:name] ||= "tab-#{@tab_counter}"

data/app/components/lookbook/tabs/dropdown_tab/component.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class Tabs::DropdownTab::Component < Lookbook::Component
+  class Tabs::DropdownTab::Component < Lookbook::BaseComponent
     def initialize(name:, label: nil, hotkey: nil, disabled: nil, position: 0, theme: :toolbar, **html_attrs)
       @name = name
       @label = label