Contrib.social

Sub-theme storybook javascript breaks unexpectedly

Open on Drupal.org →
Created on 26 September 2024, 7 months ago

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)

🐛 Bug report
Status

Active

Version

1.8

Component

Code

Created by

🇦🇺Australia RichardGaunt Melbourne

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024