Phoenix Storybook: a storybook-like UI interface for Phoenix components

cblavier · October 7, 2023, 12:08pm

I had no idea that the storybook’s demo app deployed on Fly was completely broken, but I just fixed it and redeployed it. I’m impressed by how Fly’s deployment experience has improved over the past 6 months.

Anyway, the demo app is here: https://phoenix-storybook-demo.fly.dev/

cblavier · October 9, 2023, 7:09pm

If anyone is knowledgeable about dialyxir, I’d gladly use some help with this issue

github.com/jeremyjh/dialyxir

Dialyxir fails on phoenix_storybook with tons of unknown_function errors

opened 04:48PM - 09 Oct 23 UTC

cblavier

Hey there 👋 I'm the maintainer of the author of the [phoenix_storybook](http…s://github.com/phenixdigital/phoenix_storybook) library, and I used to have dialyxir running well on the project in CI. I had to disable it a few months ago because it stopped working and I just started investigating why. Here is the [branch](https://github.com/phenixdigital/phoenix_storybook/tree/317-dialyzer-is-no-longer-working) I'm using for this specific issue. When running `mix dialyzer` (erlang 26.0.2 / elixir 1.15.6-otp-26) I have the following [output](https://gist.github.com/cblavier/a906b6d44dc919d021db137d1d39c6f6) Any help would be much appreciated 😄 Thanks 🙏 (matching issue on storybook project 👉 [#317](https://github.com/phenixdigital/phoenix_storybook/issues/317))

cblavier · October 11, 2023, 1:57pm

I’m still grooming the project issue backlog and the changelog keeps growing

Still a few bugs to fix and will then start working on 0.6.0 new features:

support for dark / light / system modes
layout alternatives in the story tab
showcase the responsive variations of your components

stay tuned

davidudo · October 27, 2023, 10:36am

Hi, I use ClojureScript instead of JavaScript to add dynamic functionality to my components, e.g dropdown. How can I configure my application to compile my ClojureScript code to Storybook so that the dropdown button’s dynamic functionality works in Storybook?

LostKobrakai · October 27, 2023, 10:50am

Storybook doesn’t compile anything on its own. It only documents how you integrate storybook.js into the default phoenix assets pipeline, so eventually a priv/static/assets/storybook.js file is created. You can do all the customizations you have for app.js handling to storybook.js as well.

davidudo · October 27, 2023, 5:37pm

Okay thank you.

cblavier · February 9, 2024, 12:49pm

storybook 0.7.0 is under work with light/dark modes first-class support!

CleanShot2024-02-09at11.39.18-ezgif.com-optimize

dkuku · May 10, 2024, 9:56pm

is there a way to show the component above the code example intsead side by side ??

cblavier · May 13, 2024, 7:46am

Take a look at the layout option: Component stories — phoenix_storybook v0.6.1

dkuku · May 13, 2024, 8:09am

I was looking to document all the callbacks in the stories module. currently there are only few in the module documentation example.

cblavier · May 13, 2024, 8:37am

please do!

cblavier · November 19, 2024, 4:24pm

Hey there, it’s been a while!

I just shipped 0.7.0 with support for dark mode /

You can read the documentation or play with the demo.

tcoopman · November 19, 2024, 5:27pm

Thank you

cblavier · November 28, 2024, 12:32pm

I’ve listed a few storybooks running in production in the README.

Let me know if you want yours to be added

cblavier · December 3, 2024, 2:26pm

Now working on 0.8.0!

Starting with a contribution from @keatz55 on supporting local icons

This is mostly related to Phoenix preferring heroicons to be referenced as local CSS classes rather than functions from a third-party Elixir package. Read this guide for further details

I will now work on improving component documentation rendering, including markdown support: issue #514, issue #515 and issue #516

tcoopman · December 4, 2024, 12:57pm

Up until this point, I only had storybook enabled in development (via guard in router)

I now enabled the storbyook in production (behind basic auth), but no stories show up in production.
Just an empty page:

What am I doing wrong?

FYI: this is deployed on fly with a dockerfile.

cblavier · December 4, 2024, 1:01pm

Did you copy the storybook resources in your Docker layers?

github.com

phenixdigital/phoenix_storybook_demo/blob/60c775f4c4d7f0dba692cff98717053f4e93ca22/Dockerfile#L52


      
          # copy compile-time config files before we compile dependencies
          # to ensure any relevant config change will trigger the dependencies
          # to be re-compiled.
          COPY config/config.exs config/${MIX_ENV}.exs config/
          RUN mix deps.compile
          
          COPY priv priv
          COPY lib lib
          
          COPY assets assets
          COPY storybook storybook
          
          # compile assets
          RUN mix assets.deploy
          
          # # compile phoenix_storybook assets
          # RUN cd deps/phoenix_storybook && mix deps.get
          # RUN cd deps/phoenix_storybook && npm ci --prefix assets
          # RUN cd deps/phoenix_storybook && MIX_ENV=dev mix assets.build
          
          # Compile the release

cblavier · December 4, 2024, 1:21pm

I noticed the mix phx.gen.storybook task prompts you to add this directive but it is missing from the manual setup guide.

~~I will get it fixed~~
Fixed

tcoopman · December 4, 2024, 1:35pm

That fixes most of it.
What’s not fixed yet is that now storybook.css doesn’t exist, but it’s something like storybook-[some hash].css

cblavier · December 4, 2024, 1:47pm

I’m not sure what is off in your setup.

It would help if you compared it with the demo app repository which is also deploying on Fly with Docker.