lookbook 1.5.2 → 2.3.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d6dfc00bd48155e8ce1a32cd2ad27668bb1b86a179ecbcce6236ea29f7cd4ef3
-  data.tar.gz: 30abb627e57ba885312e2b9c4a70f7cfc2a8a27dc6d5fbb6fa721dca38ae913f
+  metadata.gz: d32ce1185c6e1b4bb8558b3be2189658a6d3d53e1c1e877aa4f0d20479ac1e4c
+  data.tar.gz: 644d7744ec1e423171543857e168bfea53ec1398f9f01332788091fb6dbedd62
 SHA512:
-  metadata.gz: b6634bc5a89fe0b43c389bfeeaf521563d8de55fa2cf8a5778f7471a62bd69949ed79bbbc07a539b87882a0a4802515718a08e5fe7a6637f389c93b8e3bb961f
-  data.tar.gz: 89e1af478c55cc5f62c532715432f958d8be1651531917828669104ac3b1aa74177fd14162353e583adc9632cb58529c3fa690ac8220b08006b0c568c3e8381d
+  metadata.gz: b23539320c7e73e54803315ccc523036d6b0f8dd1f74d368a6a4b34b43f77333e4b0b4a13fa69e94dd3d9310134396fd639531b1e3cf83def1e862c289f151e0
+  data.tar.gz: 32e5466b1a6be8237e617040abcf93ea6041803fca1e209bc984f0bc104b4a80eb733112f98d3ca3eca86372e6d0e4f2f2aeeda14fc966a1e34bb8c8fbb717ad

data/README.md

@@ -1,27 +1,30 @@
+<div align="center">
 <br>
-<img alt="Lookbook Logo" src=".github/assets/lookbook_logo.svg" width="180"> 
+<p><a href="https://lookbook.build"><img src=".github/assets/lookbook_logo.svg" width="240"></a></p>
 
-A tool to help browse, develop, test & document [ViewComponents](https://viewcomponent.org/) in Ruby on Rails apps.
+<p>A UI development environment for Ruby on Rails applications.</p>
 
-[![Gem version](https://img.shields.io/gem/v/lookbook)](https://rubygems.org/gems/lookbook)
-[![CI status](https://github.com/ViewComponent/lookbook/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/ViewComponent/lookbook/actions/workflows/ci.yml)
-<br>
-
-## Documentation
+<p><strong><a href="https://lookbook.build">Documentation</a> &nbsp;|&nbsp; <a href="http://demo.lookbook.build/lookbook">Demo site</a></strong></p>
 
-✨ **Lookbook guide and API docs**: [lookbook.build](https://lookbook.build)
+<p><a href="https://rubygems.org/gems/lookbook"><img src="https://img.shields.io/gem/v/lookbook" alt="Gem version"></a>
+<a href="https://github.com/lookbook-hq/lookbook/actions/workflows/ci.yml"><img src="https://github.com/lookbook-hq/lookbook/actions/workflows/ci.yml/badge.svg" alt="CI status"></a></p>
 
-> _Looking for pre-v1.0 documentation? [Head over here](https://github.com/ViewComponent/lookbook/tree/0.9.x)._
+</div>
 
+---
 
-## Demo
+<div align="center">
+Lookbook combines a powerful <strong>component browser</strong> and <strong>preview system</strong> with an <strong>integrated documentation engine</strong> to help teams build robust, modular, maintainable user interfaces.<br><br>
+It's compatible with <a href="https://viewcomponent.org/">ViewComponent</a>, <a href="https://www.phlex.fun/">Phlex</a>, ActionView partials and more.
+<br><br>
+<a href="https://lookbook.build"><strong>Read the docs &rarr;</strong></a>
 
-✨ **Online Demo**: [lookbook-demo-app.herokuapp.com/lookbook](https://lookbook-demo-app.herokuapp.com/lookbook)
+</div>
 
-✨ **Demo repo**: [github.com/ViewComponent/lookbook-demo](https://github.com/ViewComponent/lookbook-demo)
 
-[![Lookbook UI](.github/assets/lookbook_screenshot_v1.0_beta.png)](https://lookbook-demo-app.herokuapp.com/lookbook/)
+---
 
+[![Lookbook UI](.github/assets/lookbook_ui.png)](http://lookbook.build/)
 
 ## Development
 
@@ -29,21 +32,9 @@ Lookbook is implemented as an isolated [Rails Engine](https://guides.rubyonrails
 
 This repository contains:
 
-* The Lookbook source code ([`/app`](https://github.com/ViewComponent/lookbook/tree/main/app), [`/lib`](https://github.com/ViewComponent/lookbook/tree/main/lib), [`/config`](https://github.com/ViewComponent/lookbook/tree/main/config), etc)
-* A '[workbench](#workbench)' app used for Lookbook component development ([`/workbench`](https://github.com/ViewComponent/lookbook/tree/main/workbench)).
-* The Lookbook [documentation site](#docs-site) source code and content ([`/docs`](https://github.com/ViewComponent/lookbook/tree/main/docs)).
-* A [test suite](#testing) with a 'runable' dummy app ([`/spec`](https://github.com/ViewComponent/lookbook/tree/main/spec)).
-
-### Workbench
-
-To preview the Lookbook components within a Lookbook instance you can run the included `workbench` app:
-
-1. Clone this repo
-2. Install dependencies: `bundle install & npm install`
-3. Start the app: `bin/workbench`
-4. Visit http://localhost:4545/lookbook to view the Lookbook instance
-
-The `workbench` app will be started in development mode and any changes to Lookbook's views or assets will immediately be reflected in the UI.
+* The Lookbook source code ([`/app`](https://github.com/lookbook-hq/lookbook/tree/main/app), [`/lib`](https://github.com/lookbook-hq/lookbook/tree/main/lib), [`/config`](https://github.com/lookbook-hq/lookbook/tree/main/config), etc)
+* The Lookbook [documentation site](#docs-site) source code and content ([`/docs`](https://github.com/lookbook-hq/lookbook/tree/main/docs)).
+* A [test suite](#testing) with a 'runable' dummy app ([`/spec`](https://github.com/lookbook-hq/lookbook/tree/main/spec)).
 
 ### Documentation site
 
@@ -58,29 +49,36 @@ To preview changes locally you can run a development version of the docs site:
 
 ### Testing
 
-Lookbook uses [RSpec](https://relishapp.com/rspec) for testing.
+Lookbook uses [RSpec](https://relishapp.com/rspec). [Appraisal](https://github.com/thoughtbot/appraisal) is used to run tests against different Ruby and Rails versions.
 
-Tests can be run using the `rake spec` or `bundle exec rspec` commands.
+Tests can be run using the `bundle exec appraisal rspec` command.
 
 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
 
+### Releases
+
+Lookbook uses [Release It!](https://github.com/release-it/release-it) to automate the release process.
+
+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.
+
+Publishing a release requires write permissions for this repository (lookbook-hq/lookbook) and 2FA publish permissions for Lookbook on RubyGems.
 
 ## Contributing
 
 Lookbook is an un-funded open source project and contributions of all types and sizes are most welcome!
 
-Please take the time to read over the [Contributing](./CONTRIBUTING.md) guide before making your first contribution and if anything isn't clear then [start a discussion](https://github.com/ViewComponent/lookbook/discussions) and we will do our best to help you out.
+Please take the time to read over the [Contributing](./CONTRIBUTING.md) guide before making your first contribution and if anything isn't clear then [start a discussion](https://github.com/lookbook-hq/lookbook/discussions) and we will do our best to help you out.
 
 ## Contributors 
 
 Lookbook was created by [Mark Perkins](https://github.com/allmarkedup) and continues to grow
-&amp; improve thanks to the ideas, suggestions and hard work of all of [these excellent humans](https://github.com/ViewComponent/lookbook/graphs/contributors):
+&amp; improve thanks to the ideas, suggestions and hard work of all of [these excellent humans](https://github.com/lookbook-hq/lookbook/graphs/contributors):
 <br>
 <br>
-<a href="https://github.com/ViewComponent/lookbook/graphs/contributors">
-  <img alt="Lookbook contributors" src="https://contrib.rocks/image?repo=ViewComponent/lookbook&columns=14" width="800" />
+<a href="https://github.com/lookbook-hq/lookbook/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=lookbook-hq/lookbook&columns=14" width="800" />
 </a>
 
 ## License
 
-The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/components/lookbook/base_component.rb

@@ -1,6 +1,8 @@
 module Lookbook
   class BaseComponent < ViewComponent::Base
-    include Lookbook::ComponentHelper
+    send(:include, Lookbook::Engine.routes.url_helpers) # YARD parsing workaround: https://github.com/lsegal/yard/issues/546
+    include Lookbook::UiElementsHelper
+    include Lookbook::ClassNamesHelper if Engine.runtime_context.rails_older_than?("6.1.0")
 
     def initialize(alpine_data: [], **html_attrs)
       @alpine_data ||= alpine_data

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

@@ -1,28 +1,17 @@
-<%= render_component_tag tag_name,
-  href: @href,
-  class: [
-    "block text-lookbook-icon-button-stroke focus:outline-none focus-visible:outline-none #{padding}",
-    {
-      "hover:text-lookbook-icon-button-stroke-hover": !@disabled,
-      "cursor-[not-allowed] opacity-50": @disabled
-    }
-  ],
-  disabled: @disabled,
-  "@keydown.esc.stop": "hideDropdown",
-  "@navigation:complete.window": "updateDropdown" do %>
-  <span x-ref="icon">
-    <%= icon || lookbook_render(:icon, name: @icon, size: icon_size, ":class": "{'animate-spin': _spinning}") %>
-  </span>
-  <% if @tooltip %>
-    <label class="hidden" x-ref="tooltip"><%= @tooltip %></label>
-  <% end %>
-  <% if content %>
-    <div x-ref="content"><%== content %></div>
-  <% end %>
-  <% if dropdown? %>
-    <div class="hidden" x-ref="dropdown">
-      <div class="bg-white divide-y divide-lookbook-divider text-left">
-        <%== dropdown %>
+<%= lookbook_render button_component.new(
+  id: id,
+  icon: icon,
+  **button_attrs,
+  "x-on:keydown.esc.stop.document": "hideDropdown",
+  "x-on:navigation:complete.window": "updateDropdown") do %>
+  <%= content %>
+<% end %>
+
+<% if dropdown? %>
+  <% content_for :dropdowns do %>
+    <div data-dropdown-id="<%= id %>">
+      <div class="divide-y divide-lookbook-divider text-left">
+        <%= dropdown %>
       </div>
     </div>
   <% end %>

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

@@ -1,21 +1,26 @@
-import tippy from "~/app/assets/lookbook/js/lib/tippy";
-import { initTooltip } from "~/app/assets/lookbook/js/components/tooltip";
+import tippy from "~/assets/js/lib/tippy";
+import { initTooltip } from "~/assets/js/components/tooltip";
 
 export default function buttonComponent() {
   let tooltip = null;
   let dropdown = null;
 
   return {
+    updateAfterNavigate: true,
+
     init() {
+      this.updateAfterNavigate =
+        this.$el.dataset.updateAfterNavigate !== "false";
+
       if (this.$refs.tooltip) {
         tooltip = initTooltip(this, {
           target: this.$refs.icon,
         });
       }
 
-      if (this.$refs.dropdown) {
+      if (this.dropdownContent) {
         dropdown = tippy(this.$el, {
-          content: this.$refs.dropdown.innerHTML,
+          content: this.dropdownContent,
           trigger: "click",
           theme: "menu",
           triggerTarget: this.$el,
@@ -32,6 +37,16 @@ export default function buttonComponent() {
       }
     },
 
+    get dropdownContent() {
+      if (this.$root && this.$root.id) {
+        const dropdown = document.querySelector(
+          `[data-dropdown-id="${this.$root.id}"]`
+        );
+        return dropdown ? dropdown.innerHTML : null;
+      }
+      return null;
+    },
+
     hideDropdown() {
       if (dropdown) {
         dropdown.hide();
@@ -41,9 +56,11 @@ export default function buttonComponent() {
     updateDropdown() {
       if (dropdown) {
         dropdown.hide();
-        this.$nextTick(() => {
-          dropdown.setContent(this.$refs.dropdown.innerHTML);
-        });
+        if (this.updateAfterNavigate) {
+          this.$nextTick(() => {
+            dropdown.setContent(this.dropdownContent);
+          });
+        }
       }
     },
 

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

@@ -1,44 +1,35 @@
 module Lookbook
   class Button::Component < Lookbook::BaseComponent
-    renders_one :icon, Lookbook::Icon::Component
     renders_one :dropdown
 
-    ICON_SIZES = {
-      xs: 3,
-      sm: 3.5,
-      md: 4,
-      lg: 6
-    }
+    attr_reader :id, :icon, :button_attrs
 
-    def initialize(icon: nil, tooltip: nil, disabled: false, size: :md, href: nil, **html_attrs)
+    def initialize(id: nil, icon: nil, **html_attrs)
+      @id = id
       @icon = icon
-      @tooltip = tooltip
-      @disabled = disabled
-      @size = size
-      @href = href
-      super(**html_attrs)
+      @button_attrs = html_attrs
     end
 
-    def icon_size
-      ICON_SIZES[@size]
+    def dropdown?
+      dropdown.present?
     end
 
-    def padding
-      [:xs, :sm].include?(@size) ? "p-1" : "p-2"
+    def text_button?
+      content.present?
     end
 
-    def tag_name
-      @href.present? ? :a : :button
+    def icon_button?
+      !text_button? && icon
     end
 
-    def dropdown?
-      dropdown.present?
+    def before_render
+      if dropdown? && id.nil?
+        raise "Dropdown buttons must be given an ID"
+      end
     end
 
-    protected
-
-    def alpine_component
-      "buttonComponent"
+    def button_component
+      icon_button? ? IconButton::Component : TextButton::Component
     end
   end
 end

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

@@ -1,7 +1,5 @@
 module Lookbook
   class Code::Component < Lookbook::BaseComponent
-    include Lookbook::OutputHelper
-
     def initialize(
       source: nil,
       language: :html,

data/app/components/lookbook/code/highlight_github.css

@@ -162,14 +162,13 @@
     } /* Comment */
     .err {
       color: var(--hl-error-fg);
-      background-color: var(--hl-error-bg);
     } /* Error */
     .g {
       color: var(--hl-subtle-fg);
     } /* Generic */
     .k {
       color: var(--hl-keyword);
-      font-weight: bold;
+      font-weight: 600;
     } /* Keyword; catches prefixes and css3 */
     .l {
       color: var(--hl-subtle-fg);
@@ -180,7 +179,7 @@
     } /* Name */
     .o {
       color: var(--hl-operator);
-      font-weight: bold;
+      font-weight: 600;
     } /* Operator */
     .x {
       color: var(--hl-subtle-fg);
@@ -194,7 +193,7 @@
     } /* Comment.Multiline */
     .cp {
       color: var(--hl-comment-preproc);
-      font-weight: bold;
+      font-weight: 600;
     } /* Comment.Preproc */
     .c1 {
       color: var(--hl-comment);
@@ -203,7 +202,7 @@
     .cs {
       color: var(--hl-comment-special-fg);
       background-color: var(--hl-comment-special-bg);
-      font-weight: bold;
+      font-weight: 600;
       font-style: italic;
     } /* Comment.Special */
     .gd {
@@ -232,38 +231,38 @@
     } /* Generic.Prompt */
     .gs {
       color: var(--hl-subtle-fg);
-      font-weight: bold;
+      font-weight: 600;
     } /* Generic.Strong */
     .gu {
       color: var(--hl-subheading);
-      font-weight: bold;
+      font-weight: 600;
     } /* Generic.Subheading */
     .gt {
       color: var(--hl-danger);
     } /* Generic.Traceback */
     .kc {
       color: var(--hl-keyword-crude);
-      font-weight: bold;
+      font-weight: 600;
     } /* Keyword.Constant */
     .kd {
       color: var(--hl-keyword-crude);
-      font-weight: bold;
+      font-weight: 600;
     } /* Keyword.Declaration */
     .kn {
       color: var(--hl-keyword-crude);
-      font-weight: bold;
+      font-weight: 600;
     } /* Keyword.Namespace */
     .kp {
       color: var(--hl-keyword-crude);
-      font-weight: bold;
+      font-weight: 600;
     } /* Keyword.Pseudo */
     .kr {
       color: var(--hl-keyword-crude);
-      font-weight: bold;
+      font-weight: 600;
     } /* Keyword.Reserved */
     .kt {
       color: var(--hl-keyword-subtle);
-      font-weight: bold;
+      font-weight: 600;
     } /* Keyword.Type */
     .ld {
       color: var(--hl-subtle-fg);
@@ -282,7 +281,7 @@
     } /* Name.Builtin */
     .nc {
       color: var(--hl-class);
-      font-weight: bold;
+      font-weight: 600;
     } /* Name.Class */
     .no {
       color: var(--hl-variable);
@@ -295,11 +294,11 @@
     } /* Name.Entity */
     .ne {
       color: var(--hl-exception);
-      font-weight: bold;
+      font-weight: 600;
     } /* Name.Exception */
     .nf {
       color: var(--hl-function);
-      font-weight: bold;
+      font-weight: 600;
     } /* Name.Function */
     .nl {
       color: var(--hl-subtle-fg);
@@ -321,7 +320,7 @@
     } /* Name.Variable */
     .ow {
       color: var(--hl-word);
-      font-weight: bold;
+      font-weight: 600;
     } /* Operator.Word */
     .w {
       color: var(--hl-whitespace);

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

@@ -1,10 +1,10 @@
-<%= lookbook_render :button,
+<%= lookbook_render :icon_button,
   name: "copy-button",
-  **@button_attrs,
+  **button_attrs,
   "x-data": prepare_alpine_data,
-  "@click.prevent": "copyToClipboard" do |button| %>
-  <% button.icon name: @icon, size: icon_size, "x-show": "!copied", cloak: true %>
-  <%= icon  :check, size: icon_size, class: "text-green-500", "x-show": "copied", cloak: true  %>
+  "x-on:click.prevent": "copyToClipboard" do |button| %>
+  <% button.with_icon name: icon, size: icon_size, "x-show": "!copied", cloak: true %>
+  <% button.with_icon name: :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.js

@@ -1,4 +1,4 @@
-import { initClipboard } from "~/app/assets/lookbook/js/components/clipboard";
+import { initClipboard } from "~/assets/js/components/clipboard";
 import buttonComponent from "@components/button/component";
 
 export default function copyButtonComponent() {

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

@@ -1,19 +1,22 @@
 module Lookbook
   class CopyButton::Component < Lookbook::BaseComponent
-    def initialize(target: nil, icon: :code, **attrs)
+    attr_reader :icon, :size, :target, :button_attrs
+
+    def initialize(target: nil, icon: :code, size: :md, **attrs)
       @icon = icon
+      @size = size
       @target = target
       @button_attrs = attrs
     end
 
     def icon_size
-      Lookbook::Button::Component::ICON_SIZES[@size]
+      IconButton::Component::ICON_SIZES[size]
     end
 
     protected
 
     def alpine_data
-      content ? nil : alpine_encode(@target)
+      content ? nil : alpine_encode(target)
     end
 
     def alpine_component

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

@@ -6,7 +6,7 @@
           <a href="#"
             class="text-xs flex items-center hover:underline"
             x-data="clipboardComponent"
-            @click.prevent.stop="copyToClipboard('#debug-data')">
+            x-on:click.prevent.stop="copyToClipboard('#debug-data')">
             <span x-show="copied" x-cloak>
               <%= icon :check, size: 2.5, class: "text-green-600" %>
             </span>
@@ -20,13 +20,14 @@
       <li>
         <a href="#"
           class="text-xs flex items-center hover:underline"
-          @click.stop="localStorage.clear(); window.location.reload();">
+          x-on:click.stop="localStorage.clear(); window.location.reload();">
           <%= icon :refresh_cw, size: 2.5 %>
           <span class="ml-2">Reset local storage</span>
         </a>
       </li>
     </ul>
   </div>
+
   <div class="flex items-center text-xs px-3 py-2 bg-zinc-50">
     <span class="opacity-70 mr-1">Lookbook</span>
     <span class="mr-6">v<%= @version %></span>

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

@@ -1,12 +1,23 @@
 module Lookbook
   class DebugMenu::Component < Lookbook::BaseComponent
-    def initialize(version: nil, docs_url: nil, repo_url: nil, **html_attrs)
+    attr_reader :features
+
+    def initialize(version: nil, docs_url: nil, repo_url: nil, features: {}, **html_attrs)
       @version = version
       @docs_url = docs_url
       @repo_url = repo_url
+      @features = features
       super(**html_attrs)
     end
 
+    def auto_refresh_enabled?
+      feature(:auto_refresh, false)
+    end
+
+    def feature(name, fallback = nil)
+      features.fetch(name.to_sym, fallback)
+    end
+
     def debug_data
       content
     end

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

@@ -1,9 +1,9 @@
 <%= render_component_tag class: "flex items-center text-xs font-mono space-x-1 transition",
   ":class":"{'!opacity-100': resizing}",
-  "@viewport:resize-start.window": "resizing = true",
-  "@viewport:resize-complete.window": "resizing = false",
-  "@dom:update-start.window": "tearDown",
-  "@dom:update-complete.window": "createObserver",
+  "x-on:viewport:resize-start.window": "resizing = true",
+  "x-on:viewport:resize-complete.window": "resizing = false",
+  "x-on:dom:update-start.window": "tearDown",
+  "x-on:dom:update-complete.window": "createObserver",
   "x-show": "target" do %>
     <span x-text="`${width}px`"></span>
     <span class="opacity-70">x</span>

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

@@ -18,13 +18,10 @@ export default function dimensionsDisplayComponent(targetSelector) {
 
     createObserver() {
       if (this.target) {
-        this.observer = observeSize(
-          document.querySelector(targetSelector),
-          ({ width, height }) => {
-            this.width = width;
-            this.height = height;
-          }
-        );
+        this.observer = observeSize(this.target, ({ width, height }) => {
+          this.width = width;
+          this.height = height;
+        });
       }
     },
 

data/app/components/lookbook/display_options/editor/component.html.erb

@@ -1,6 +1,6 @@
 <%= render_component_tag class: "px-2" do %>
   <% if fields.many? %>
-    <%= lookbook_render :button, icon: :settings, tooltip: "Display options" do |button| %>
+    <%= lookbook_render :button, id: "display-options-dropdown-button", icon: :settings, tooltip: "Display options", data: {update_after_navigate: false} do |button| %>
       <% button.with_dropdown do %>
         <div class="p-3 space-y-3">
           <%= safe_join(fields) %>

data/app/components/lookbook/display_options/field/component.css

@@ -1,33 +1,7 @@
 @layer components {
   [data-component="display-options-field"] {
-    [type="text"],
-    [type="email"],
-    [type="url"],
-    [type="password"],
-    [type="number"],
-    [type="date"],
-    [type="datetime-local"],
-    [type="month"],
-    [type="search"],
-    [type="tel"],
-    [type="time"],
-    [type="week"],
-    textarea,
-    select {
-      padding: 0.26rem 0.6rem;
-      font-size: 0.8rem;
-      line-height: 1.1rem;
-    }
-
     label {
       @apply text-[0.82rem] text-lookbook-input-text cursor-pointer;
     }
-
-    select {
-      border-radius: 0.375rem;
-      padding-right: 1.5rem;
-      background-size: 1.2em 1.2em;
-      background-position: right 0.4rem center;
-    }
   }
 }

data/app/components/lookbook/display_options/field/component.html.erb

@@ -3,6 +3,6 @@
     <label for="<%= name %>">
       <%= name.to_s.titleize %>:
     </label>
-    <%= select_tag(name, options_for_select(choices, value), "x-model": "value") %>
+    <%= select_tag(name, options_for_select(choices, value), "x-model": "value", class: "compact") %>
   </div>
 <% end %>

data/app/components/lookbook/display_options/field/component.js

@@ -2,7 +2,7 @@ import Cookies from "js-cookie";
 import {
   parseSearchParamValue,
   buildSearchParamValue,
-} from "~/app/assets/lookbook/js/helpers/string";
+} from "~/assets/js/helpers/string";
 
 export default function displayOptionsFieldComponent({ name, value }) {
   return {