Question: including Stimulus Controller code?

[tripptuttle]

Sorry, not sure where else to ask, because I am the only one of my team rolling this. I'm highly scoping my javascript using Stimulus Controllers specific to a ViewComponent and loving this approach. And, I am really loving Lookbook - as I build a component its like I get a lovely little reward seeing it rendered in the Lookbook!

But, I'd love to be able to provide my colleagues with a way to view the stimulus controller code that is scoped to a particular ViewComponent, along with my comments. Since populating the notes happens in commented Ruby code, I haven't found a great way to include it. Before I go about hacking something together, just wanted to see if anyone using Lookbook has already implemented something or thought about a good way to do this?

[allmarkedup]

Hey @tripptuttle - sorry for the slow reply! It's great to hear that you are enjoying Lookbook. However I'm afraid that right now there is not really any good way to do what you want :-(

As part of the 1.0 beta I am hoping to add the ability to make the panels (source/notes/params) more configurable, including supporting the ability to add custom panels (which I think could could work for your scenario to display the code of a supporting file?). I've got some experimental code working but nothing ready to share just yet - if it sounds useful I'll update you as soon as I have something to play with.

Sorry there is not a better solution just now!

[tripptuttle]

Yes! That sounds exactly like what I am after, thanks for keeping me in the loop. And no apologies, just was curious if there was something like that already out there.

[allmarkedup]

Hey @tripptuttle I just wanted to get back to you on this as I released Lookbook v1.0 yesterday and it includes new APIs for defining your own custom panels, as I mentioned above.

Taking some inspiration from your question I've added a quick example of how an 'assets' panel might work to the demo - you can see it in action on the button component here.

That code to create that panel looks like this:

# config/application.rb
Lookbook.define_panel(:assets, {
  label: "Assets",
  partial: "lookbook/panels/assets",
  locals: lambda do |data|
    assets = data.preview.components.map do |component|
      # Look for assets with the same name/path as the component file but with a .js or .css extension
      # For example `app/components/elements/button.rb` -> `app/components/elements/button.js`
      asset_files = Dir["#{component.full_path.chomp(".rb")}.{css,js}"]
      asset_files.map { |path| Pathname.new path }
    end.flatten.compact
    { assets: assets }
  end
})

<!-- app/views/lookbook/panels/_assets.html.erb -->
<style type="text/css">
  .asset-preview + .asset-preview {
    margin-top: 30px;
  }
  .asset-header {
    display: flex;
    align-items: center;
    padding-left: 4px;
    padding-right: 4px;
    margin-bottom: 6px;
  }
  .asset-icon {
    margin-right: 6px;
    color: var(--lookbook-accent-500);
  }
  .asset-title {
    font-size: 12px;
    opacity: 0.75;
  }
  .asset-contents {
    background: #fff;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid var(--lookbook-divider);
  }
</style>

<div class="lookbook-panel">
  <% if assets.any? %>
    <% assets.each do |asset| %>
      <div class="asset-preview">
        <header class="asset-header">
          <%= icon :file, size: 3.5, class: "asset-icon" %>
          <h4 class="asset-title font-mono"><%= asset.basename %></h4>
        </header>
        <div class="asset-contents">
          <%= code language: :ruby, line_numbers: true do %><%== File.read(asset) %><% end %>
        </div>
      </div>
    <% end %>
  <% else %>
    <p>No assets to display.</p>
  <% end %>
</div>

The documentation on creating custom panels is here. Obviously the above example would probably need some tweaking to fit your needs but can hopefully serve as a good starting point for building something to fit your needs as/when you upgrade to Lookbook v1.0.

I hope that is useful - I'm going to go ahead and close this issue down now but if you need any help or have any questions just let me know.