[Feature] Support new @drupal/once library in Storybooks

[HeikkiYlipaavalniemi]

Is your feature request related to a problem? Please describe. We have a component in our Drupal project which is using the new drupal/once library instead of jQuery/once.

This works fine when added as a dependency in the Drupal theme but we have trouble getting the code to work in the Storybook.

What would be the best solution to include https://www.npmjs.com/package/drupal/once in the Storybooks and be able to use the new JS functions in Storybooks?

Describe the solution you'd like I would like to be able to include the drupal/once library in the Storybook components and use the JS function for example in accordion.js to make sure the element is triggered only once.

Probably something like the usual Drupal.behaviors might work but there is of course the NPM package for drupal/once available so it could even be a more robust solution to support the functionality in the storybook js file.

[amazingrando]

@HeikkiYlipaavalniemi We are working on getting this into the documentation and etc. Until then, we sorted this out in the Drupal Slack.

[HeikkiYlipaavalniemi]

For others looking and without Drupal Slack access.

We solved the problem by first installing the required NPM module with

npm install @drupal/once -D

Then we created a once.global.js file under the .storybook folder.

The content of the file is following:

import once from '@drupal/once';
global.once = once;

And the final step was to import the new global file in preview.js after the _drupal.js import:

// If in a Drupal project, it's recommended to import a symlinked version of drupal.js.
import './_drupal.js';
import './once.global';