x-dash
x-dash copied to clipboard
Financial-Times
Features to speed development
Right now, if I make changes to a component I have to stop storybook, rebuild with athloi and then restart storybook (athloi run build --filter 'keywords:"x-audio"' && npm run start-storybook)
This could be speeded up by adding watch and hot reloading
Yeah, it's not a good experience right now. It used to be better, and I don't know what happened (maybe something we lost in the move to Athloi?).
FWIW, Storybook does hot reload, but the components don't build. Some components (e.g. x-teaser) have a watch or start script, but you have to run it separately, manually, and it's not done in a standardised way, and it's not documented anywhere.
Unfortunately this is a symptom of Storybook not being installed at the repository root, details in #177.
Storybook can only watch files which are descendants of the working directory
We "fixed" this in Anvil by moving Storybook to the top-level and ensuring stories load component source files rather than the package for distribution.
We will hopefully port what learned with Anvil into x-dash in the near future.
See also #198. At one point we had watching/hot reloading working without toplevel Storybook by having a single command to start Storybook and the watch builds of every component; I'm not sure when we lost that. I tried toplevel Storybook in #203 and it worked, but slowly, using require.context. I see you've taken a different approach in Anvil.
Now that the docs are using Storybook's generated iframe.html files (#155) I think we can step away from the abstract story format which was only there so Gatsby could generically consume stories without using Storybook's API.
Given that, it's likely feasible to use storiesOf directly in stories and use them as multiple Webpack entry points instead of using require.context or templates.
Yes, I definitely agree. The details are lost to me now, but as you say we are no longer attempting to do what we originally tried to do with Storybook.
Moving away from the custom config sounds like a good plan.
I've made some further changes in #336 which enable component stories to be authored in the regular manner documented by Storybook and import components directly from source.