Storybook generator fix

[matthieuchabert]

When I use mix phx.gen.storybook it crash when I go to storybook/components/my_component.

Request: GET /storybook/components/my_component
** (exit) an exception was raised:
    ** (Phoenix.LiveView.HTMLTokenizer.ParseError) nofile:1:12: expected attribute name
        (phoenix_live_view 0.18.0) lib/phoenix_live_view/html_tokenizer.ex:339: Phoenix.LiveView.HTMLTokenizer.handle_attribute/5
        (phoenix_live_view 0.18.0) lib/phoenix_live_view/html_engine.ex:231: Phoenix.LiveView.HTMLEngine.handle_text/3
        (eex 1.14.0) lib/eex/compiler.ex:311: EEx.Compiler.generate_buffer/4
        (phx_live_storybook 0.4.0) lib/phx_live_storybook/rendering/component_renderer.ex:261: PhxLiveStorybook.Rendering.ComponentRenderer.render_component_heex/3
        (phx_live_storybook 0.4.0) lib/phx_live_storybook/live/story_live.ex:317: anonymous fn/5 in PhxLiveStorybook.StoryLive.render_content/3
...

It looks like it expects a named function.

I replaced the anonymous function by a named function in the generated component template and it solved the issue.

[codecov]

Codecov Report

Merging #116 (7c159d4) into main (a4cc91d) will not change coverage.
The diff coverage is n/a.

❗ Current head 7c159d4 differs from pull request most recent head ebb0a5c. Consider uploading reports for the commit ebb0a5c to get more accurate results

@@           Coverage Diff           @@
##             main     #116   +/-   ##
=======================================
  Coverage   96.58%   96.58%           
=======================================
  Files          34       34           
  Lines        1668     1668           
=======================================
  Hits         1611     1611           
  Misses         57       57           

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[matthieuchabert]

There is also two warnings:

[warning] cannot load attributes for component #Function<0.4875193/1 in Storybook.Components.MyComponent.my_component>

[warning] cannot load slots for component #Function<0.4875193/1 in Storybook.Components.MyComponent.my_component>

Not sure if it's introduced by this fix.

[cblavier]

Yes the warnings are due to this change.

I think the best option would be that the generated story use storybook's own icon component: PhxLiveStorybook.Components.Icon.hero_icon/1

Could you make this change and put a few Variation / VariationGroup in it as well?

[matthieuchabert]

I replaced the named function by a call to the Icon function, no more warnings 👌