Adding 3rd-party libraries

Global Libraries (e.g. jQuery)
There are some instances in which a library should be available to all components, i.e. "global."
jQuery
Use the following steps to make jQuery available to your component javascript files and to use additional libraries that require jQuery.
Add jQuery Library
1
yarn add jquery
Copied!
Add jQuery to Storybook Config
Create a /.storybook/jquery-global.js file and add the following:
1
import jquery from 'jquery';
2
global.jQuery = jquery;
3
global.$ = jquery;
Copied!
Import this file in ./storybook/preview.js:
1
   ...
2
   import './_drupal.js';
3
+  import './jquery-global.js';
Copied!
This ensures that jQuery is loaded before other libraries. See this explanation for details.
Add jQuery as a Global in Webpack
Add the following to /.storybook/webpack.config.js:
1
   loader: 'eslint-loader',
2
   options: {
3
     cache: true,
4
+      globals: [
5
+        'jQuery'
6
+      ],
7
   },
Copied!
Add jQuery as a Global to ESLint config
Add the following to .eslintrc.yml:
1
    describe: true
2
    Drupal: true
3
+   jQuery: true
4
  parser: babel-eslint
Copied!
Example: Use jQuery in a Component
The following example will cause the error status message to blink.
Create JS file
Create components/02-molecules/status/status.js and add the following:
1
($ => {
2
  Drupal.behaviors.status = {
3
    attach() {
4
      setInterval(() => {
5
        $('.status--error').fadeToggle();
6
      }, 500);
7
    },
8
  };
9
})(jQuery);
Copied!
Update the Status Story
Add the new JS file to the components/02-molecules/status/status.stories.js and include the DrupalBehaviors effect:
1
  import React from 'react';
2
+ import { useEffect } from '@storybook/client-api';
3
​
4
  import status from './status.twig';
5
​
6
  import statusData from './status.yml';
7
​
8
+ import './status';
9
+
10
  /**
11
   * Storybook Definition.
12
   */
13
  export default { title: 'Molecules/Status' };
14
​
15
- export const statusExamples = () => (
16
-   <div dangerouslySetInnerHTML={{ __html: status(statusData) }} />
17
- );
18
+ export const statusExamples = () => {
19
+   useEffect(() => Drupal.attachBehaviors(), []);
20
+   return <div dangerouslySetInnerHTML={{ __html: status(statusData) }} />;
21
+ };
Copied!
Now if you run the storybook yarn develop you should see a blinking error message in the status molecule.
Add JS File to Theme Library and Load in the Template
Add the JS file to the theme library by editing MY_THEME.libraries.yml:
1
+
2
+ status:
3
+   js:
4
+     dist/js/02-molecules/status/status.js: {}
5
+   dependencies:
6
+     - core/drupal
7
+     - core/jquery
Copied!
Make sure to include the drupal and jquery core libraries as dependencies. They will both be loaded before your JS file in Drupal.
The library then needs to be loaded in the component twig template. In this case edit components/02-molecules/status/status.stories.twig and add:
1
+ {{ attach_library('THEME_NAME/status') }}
Copied!
Add jQuery Once
To include jQuery once() add it to your project:
1
yarn add jquery-once
Copied!
Add add it to your the /.storybook/config.js file:
1
  import './jquery-global.js';
2
+ import once from 'jquery-once';
Copied!
Libraries for Individual Components
There are a couple of strategies for loading individual libraries.
Add with Yarn
Add an external library using yarn by adding it to your project yarn add LIBRARY and then importing where needed.
Load Library from an External URL
External libraries, for example from a CDN, can be loaded with Storybook External Links. Install, yarn add storybook-external-links and add to the /.storybook/config.js or an individual story file:
1
+ import withExternalLinks from 'storybook-external-links';
2
+ const url = '//[URL TO LIBRARY]';
3
+ const externalLinkDecorator = withExternalLinks(url);
4
+ addDecorator(externalLinkDecorator);
Copied!

Accessibility Testing

Hot Reload Drupal

Last modified 2mo ago

Copy link

Contents

Global Libraries (e.g. jQuery)

jQuery

Add jQuery to Storybook Config

Add jQuery as a Global in Webpack

Add jQuery as a Global to ESLint config

Example: Use jQuery in a Component

Libraries for Individual Components

Add with Yarn

Load Library from an External URL