LiveCapture - zero-boilerplate storybook for LiveView components by Waffle creator

Very interesting and an amazing alternative.
Is it possible to capture components from a dependency ?
Or the components must live in the same app where live capture is running
I am working a UI library and I would like to keep a separation between the main library and testing/playground?

Thank you! I built LiveCapture with the UI-library use case in mind.

You can mount the Storybook from any project that uses LiveCapture inside a playground app. For example, here’s how I mounted the Phoenix LiveDashboard Storybook inside the Captures app, which hosts storybooks from other open-source projects and libraries.

If you’d like, you can add your library there as well, and it’ll be available on the Captures website.

P.S. There’s a common pattern libraries use to set up a development playground for local testing. It’s usually a bare-bones Phoenix app defined in dev.exs (note the .exs extension). See LiveCapture’s dev.exs and Phoenix LiveDashboard’s dev.exs for reference.

Let me know if you have any questions or run into any rough edges. I’m happy to fix them.

Presented LiveCapture at Copenhagen Elixir meetup

Thanks for the detailed reply.
So I tried couple of way, but I am bit lost
My goal is to keep the component files as it is without modifying them
Is it possible to capture the components, without adding capture_all() inside the component file.
Here is the library if it helps, I would like to add live capture as a dependency but only in e2e app without modifying the original components

https://github.com/corex-ui/corex

I’ve created a PR with integration example. Feel free to ping me in the linked PR.

Thanks a lot, you are a saver. It works like a charm.
I will keep you updated with some stories

I’ve released a new version which adds component schema generation with component urls. It’s now become possible to use this schema with Playwright for visual regression testing.

Usage

mix live_capture.gen.schema --module MyAppWeb.LiveCapture --url-prefix /storybook path/to/captures.json

Output Format

captures.json

[
  {
    "schema": "MyAppWeb.LiveCapture",
    "breakpoints": [
      {"name": "s", "width": "480px"},
      {"name": "m", "width": "768px"}
    ],
    "captures": [
      {"module": "MyAppWeb.Example", "function": "simple", "variant": null, "url": "/storybook/raw/components/Example/button"},
      {"module": "MyAppWeb.Example", "function": "with_capture_variants", "variant": "main", "url": "/storybook/raw/components/Example/button/main"},
      {"module": "MyAppWeb.Example", "function": "with_capture_variants", "variant": "secondary", "url": "/storybook/raw/components/Example/button/secondary"}
    ]
  }
]

@achempion I hope you are doing great

I have added some Captures on the Live Demo.
I could edit the root layout and it works good.
I have 2 questions you can maybe help with

1.Can we catch the Live View handle events to display them ?

2.Slots with :let
Currently when using slot with :let , I use an internal function but ideally it would render the way the user would write the slot

Instead of this:

trigger: [%{inner_block: &__MODULE__.custom_trigger/2}],

we would do:

trigger: [%{
inner_block: """<.icon name={item.data.meta.icon} />{item.data.trigger}""",
let: item
}],

on the component thant dont require :let it works good and render the full item as the user would create it

<Listbox.listbox
class="listbox"
collection={[...]}>
<:label>
Choose a country
</:label>
<:item_indicator>
<.icon name="hero-check" />
</:item_indicator>
</Listbox.listbox>

Thank you for the feedback, I’ll get back to you in a couple of days.

I’ve released a new version that supports binding local variables for slot templates.

It’s now possible to pass :let bindings inside slot templates.

Example

Table component

slot :column do
  attr :label, :string, required: true
end

attr :rows, :list, default: []

def table(assigns) do
  ~H"""
  <table>
    <tr>
      <th :for={col <- @column}>{col.label}</th>
    </tr>

    <tr :for={row <- @rows}>
      <td :for={col <- @column}>{render_slot(col, row)}</td>
    </tr>
  </table>
  """
end

Capture definition

capture attributes: %{
          rows: [1, 2, 3],
          column: [
            %{inner_block: "row {row_number}", label: "Row number", let: :row_number},
            %{inner_block: "column", label: "Column"},
          ]
        }

See how the local variable is referenced with inner_block: "row {row_number}"