docs(storybook): fix code tab

kabaros commented 1 month ago

fixes LIBS-672 - you can verify the working code tabs on the preview link: https://pr-1607--dhis2-ui.netlify.app/demo

My first attempt to fix this was to get the official addons/storysource to work but failed to. From what I see in its code, I think it would require that we manually add a storySource attribute to the components which we could probably use a library like react-to-jsx to automate but it's still a significant change.

I can't imagine that this is the default way for displaying components source code so should investigate more. (the other likely cause is our webpack config and the way we load stories - few discussions online point to that direction) but I tried different changes there and didn't manage to get the addon working.
My second attempt was to update storybook-addon-jsx which we used previously before updating StoryBook. That addon was not updated for storybook@7 or 8 and it breaks as it requires an internal API no longer available. I found a thread here where someone created an alternative package. It's not a widely used package but it does the job of the previous addon.

So maybe we can use it as a stopgap until we figure how to get StorySource working.

❓ Another approach we could consider, is to embed the source code with the docs, like this one here - we could then maybe get rid of /demo entirely? @Topener

dhis2-bot commented 1 month ago

🚀 Deployed on https://pr-1607--dhis2-ui.netlify.app

dhis2-bot commented 1 month ago

:tada: This PR is included in version 9.11.5 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

dhis2 / ui

docs(storybook): fix code tab #1607