Updating Storybook to handle security vulnerabilities in NPM

[HeikkiYlipaavalniemi]

The current Storybook version has multiple security vulnerabilities which are fixed in the newer Storybook version.

We updated our Storybooks to a newer version and I thought I'd share what we did if someone else finds it useful.

1. We updated all the Storybook components to version 6.4.14.
2. We changed Webpack to version 5 and added packages @storybook/builder-webpack5 and @storybook/manager-webpack5.
3. We changed the default Storybook build command and removed the deprecated -s flag. The static directories are now defined in the .storybook/main.js file with staticDirs: ['../dist', '../images'],. We also added the information for the webpack builder to this file.
4. We removed maintained node versions from the .browserslistrc file to get around a compilation error.
5. In babel.config.js we changed the minify setting to

['minify', {
  builtIns: false,
}],

Also related to #242 we disabled the Imagemin plugin for now and plan to find a better alternative to it.

[tyler36]

Just noticed that Storybook 7 was released 2023-03-31.

There's already some dot releases but should address the multiple security vulnerabilities of earlier releases.
Not sure if this version is on emulsifiers roadmap.

[HeikkiYlipaavalniemi]

I also took a look at updating to Storybook 7.

The biggest issue seems that we are using the addDecorator in Storybook preview.js at https://github.com/emulsify-ds/emulsify-drupal/blob/master/.storybook/preview.js#L12 which was already deprecated and now completely removed from version 7.

I investigated it a little and there are a few options how to migrate them. Here is one example how they might be handled in Storybook 7:

import { addParameters } from '@storybook/react';

addParameters({
  decorators: [
    (Story) => {
      useEffect(() => {
        Drupal.attachBehaviors();
      }, []);

      return <Story />;
    },
  ],
});

But I am 100% how the decorator is supposed to work in our case, ie. how can I verify that existing functionality still works and nothing breaks?

Also there was a second manual migration step where it says that we're using the following addons in versions which are known to be incompatible with Storybook 7: @[email protected]. The Github page for the package is marked as deprecated and the replacement is https://storybook.js.org/addons/@storybook/addon-styling.

Actual migration process went pretty fine and the Storybook did start. I did have some trouble with our custom accordion component which is using the new Drupal core once library (https://www.npmjs.com/package/@drupal/once). This was giving an error for once not being defined when running the Storybook.

I would voting for creating a second issue to update Storybooks to v7.