Problem/Motivation
Often when using a sub-theme version of storybook the JavaScript running within a story breaks meaning knobs and other functionalities break. This is a long running issue (from the beginning of CivicTheme)
Steps to reproduce
Create a sub-theme, load up the storybook, change between molecules, organisms (stories). Note that the knobs are no longer changing values in the stories.
Proposed resolution
Proposed resolution contributed by @alexskrypnyk
See https://default.civictheme.io/themes/custom/civictheme_demo/storybook-st... - the behaviours are not firing.
This is because UIKit's JS is wrapped into Drupal.behaviours(), which is then called from the Storybook's decorator in preview.js:
addDecorator((storyFn) => {
useEffect(() => Drupal.attachBehaviors(), []);
return storyFn();
});
This decorator uses useEffect() which calls our callback when any of the dependencies, like props, change. The list of these deps is currently [], meaning that whenever a prop is changed by the change of the control, the decorator fires, but the useEffect() does not as those props are not set as deps.
If you just remove the [], this will allow the useEffect() to auto-wire the deps and everything will work correctly.
This change needs to be made in both civictheme and civictheme_starter_kit .storybook/preview.js (edited)