Search…
Starters
Systems
Supporting Projects
Style Guide
Adding 3rd-party libraries
How to add libraries like jQuery to your project.
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!
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!
Last modified 7mo ago