docs(storybook): fix code tab #1607
Conversation
|
🚀 Deployed on https://pr-1607--dhis2-ui.netlify.app |
kabaros
force-pushed
the
fix/storybook-code-tab
branch
3 times, most recently
from
8204664 to
a229b01
Compare
kabaros
force-pushed
the
fix/storybook-code-tab
branch
2 times, most recently
from
c40e93b to
ac24f0e
Compare
There was a problem hiding this comment.
LGTM! The code samples even change when changing the controls which is excellent. This is also why I wouldn't want to get rid of the code blocks, as they do not show interactivity that way. Codesandbox or similar would be another possible solution in that case. Let's try to keep Storybook working for now!
| import '@storybook/addon-console' | ||
| const { withJsx } = require('@mihkeleidast/storybook-addon-source') |
There was a problem hiding this comment.
I tried out using an import locally to see if it would work, and it does, but eslint complains:
Unable to resolve path to module '@mihkeleidast/storybook-addon-source'. eslint import/no-unresolved
Is that why this is a require?
It works though! 🙂
There was a problem hiding this comment.
yeah it is .. do you prefer we just disable the rule for that line?
kabaros
force-pushed
the
fix/storybook-code-tab
branch
from
ac24f0e to
7722ebd
Compare
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-jsxto 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-jsxwhich 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