chore(storybook): upgrade to 5.3 - INNO-2075

package.json

@@ -48,10 +48,10 @@
     "eslint-plugin-react-hooks": "2.3.0",
     "eslint-plugin-unicorn": "15.0.1",
     "glob": "7.1.6",
-    "husky": "4.2.0",
+    "husky": "4.2.1",
     "lerna": "3.20.2",
     "lerna-changelog": "1.0.0",
-    "lint-staged": "10.0.1",
+    "lint-staged": "10.0.2",
     "netlify-cli": "2.30.0",
     "node-fetch": "2.6.0",
     "npm-run-all": "4.1.5",
@@ -78,9 +78,17 @@
     "yarn": "^1.10.1"
   },
   "lint-staged": {
-    "*.{md,mdx,html,json,yml}": [ "prettier --write" ],
-    "*.{js,jsx}": [ "prettier --write", "eslint" ],
-    "*.scss": [ "prettier --write", "stylelint" ]
+    "*.{md,mdx,html,json,yml}": [
+      "prettier --write"
+    ],
+    "*.{js,jsx}": [
+      "prettier --write",
+      "eslint"
+    ],
+    "*.scss": [
+      "prettier --write",
+      "stylelint"
+    ]
   },
   "workspaces": [
     "examples/*",

src/systems/ec/implementations/react/components/card/stories/Index.jsx

@@ -6,7 +6,7 @@ import { withKnobs, text, array } from '@storybook/addon-knobs';
 import demoContentCard from '@ecl/ec-specs-card/demo/data--card';
 import demoContentTile from '@ecl/ec-specs-card/demo/data--tile';
 
-import template from './Template';
+import { Template as template } from './Template';
 
 import Card from '../src/Card';
 

src/systems/ec/implementations/react/components/card/stories/Template.jsx

@@ -6,7 +6,9 @@ import demoContentTile from '@ecl/ec-specs-card/demo/data--tile';
 
 import Card from '../src/Card';
 
-const Template = () => {
+// Storybook issues with modules' resolutions https://github.com/storybookjs/storybook/issues/9621
+/* eslint-disable-next-line import/prefer-default-export */
+export const Template = () => {
   const image1 = {
     alt: demoContentCard.image.alt,
     src: demoContentCard.image.src,
@@ -97,5 +99,3 @@ const Template = () => {
     </div>
   );
 };
-
-export default Template;

src/systems/ec/implementations/react/storybook/.storybook/main.js

@@ -0,0 +1,36 @@
+const path = require('path');
+
+const stories = [
+  '../../templates/**/*/stories/*.jsx',
+  '../../page-structure/**/*/stories/*.jsx',
+  '../../layout/**/*/stories/*.jsx',
+  '../../components/**/*/stories/*.jsx',
+  '../../utilities/**/*/stories/*.jsx',
+  '../../deprecated/**/*/stories/*.jsx',
+];
+
+const addons = [
+  '@storybook/addon-options',
+  '@storybook/addon-knobs',
+  '@storybook/addon-viewport',
+  '@storybook/addon-a11y',
+  '@storybook/addon-cssresources',
+];
+
+const managerEntries = [
+  '../../../../../../src/tools/storybook-addon-code/register',
+];
+
+const managerWebpack = async baseConfig => {
+  // Babel loader: include "src"
+  baseConfig.module.rules[0].include.push(
+    path.resolve(__dirname, '../../../../../..')
+  );
+
+  // Exclude node_modules
+  baseConfig.module.rules[0].exclude = /node_modules/;
+
+  return baseConfig;
+};
+
+module.exports = { stories, addons, managerEntries, managerWebpack };

src/systems/ec/implementations/react/storybook/.storybook/manager.js

@@ -1,14 +1,36 @@
-const path = require('path');
+import { addons } from '@storybook/addons';
+import { create } from '@storybook/theming/create';
 
-// Provide a custom webpack config for the manager
-module.exports.managerWebpack = async (baseConfig, options) => {
-  // Babel loader: include "src"
-  baseConfig.module.rules[0].include.push(
-    path.resolve(__dirname, '../../../../../..')
-  );
+const theme = create({
+  base: 'light',
+  colorSecondary: '#004494',
+  appBorderRadius: 0,
+  inputBorderRadius: 0,
+  brandTitle: 'ECL v2 - EC',
+  brandUrl: 'https://github.com/ec-europa/europa-component-library',
+  brandImage: null,
+});
 
-  // Exclude node_modules
-  baseConfig.module.rules[0].exclude = /node_modules/;
+const storySort = (a, b) => {
+  const aParentKind = a[1].kind.split('|').shift();
+  const aKind = a[1].kind
+    .split('|')
+    .slice(1)
+    .join('|');
+  const bParentKind = b[1].kind.split('|').shift();
+  const bKind = b[1].kind
+    .split('|')
+    .slice(1)
+    .join('|');
 
-  return baseConfig;
+  return aParentKind !== bParentKind
+    ? 0
+    : aKind.localeCompare(bKind, { numeric: true });
 };
+
+addons.setConfig({
+  theme,
+  storySort,
+  sidebarAnimations: false,
+  panelPosition: 'right',
+});

src/systems/ec/implementations/react/storybook/.storybook/config.js → src/systems/ec/implementations/react/storybook/.storybook/preview.js

@@ -1,6 +1,4 @@
-import { configure, addDecorator, addParameters } from '@storybook/react';
-import { withOptions } from '@storybook/addon-options';
-import { create } from '@storybook/theming';
+import { addDecorator, addParameters } from '@storybook/react';
 import { withA11y } from '@storybook/addon-a11y';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { withCssResources } from '@storybook/addon-cssresources';
@@ -51,35 +49,6 @@ html {
       picked: false,
     },
   ],
-  options: {
-    theme: create({
-      base: 'light',
-      colorSecondary: '#004494',
-      appBorderRadius: 0,
-      inputBorderRadius: 0,
-      brandTitle: 'ECL v2 - EC',
-      brandUrl: 'https://github.com/ec-europa/europa-component-library',
-      brandImage: null,
-    }),
-    sidebarAnimations: false,
-    panelPosition: 'right',
-    storySort: (a, b) => {
-      const aParentKind = a[1].kind.split('|').shift();
-      const aKind = a[1].kind
-        .split('|')
-        .slice(1)
-        .join('|');
-      const bParentKind = b[1].kind.split('|').shift();
-      const bKind = b[1].kind
-        .split('|')
-        .slice(1)
-        .join('|');
-
-      return aParentKind !== bParentKind
-        ? 0
-        : aKind.localeCompare(bKind, { numeric: true });
-    },
-  },
   viewport: {
     defaultViewport: 'iphone6',
     viewports: {
@@ -115,21 +84,3 @@ html {
     },
   },
 });
-
-const contexts = [
-  require.context('../../templates', true, /stories.*\.jsx?$/),
-  require.context('../../page-structure', true, /stories.*\.jsx?$/),
-  require.context('../../layout', true, /stories.*\.jsx?$/),
-  require.context('../../components', true, /stories.*\.jsx?$/),
-  require.context('../../utilities', true, /stories.*\.jsx?$/),
-  require.context('../../deprecated', true, /stories.*\.jsx?$/),
-];
-
-configure(() => {
-  contexts.forEach(context => {
-    context
-      .keys()
-      .filter(key => !key.includes('node_modules'))
-      .forEach(context);
-  });
-}, module);

src/systems/ec/implementations/react/storybook/.storybook/webpack.config.js

@@ -1,4 +1,11 @@
+const path = require('path');
+
 module.exports = ({ config: defaultConfig }) => {
+  // Babel loader: include "src"
+  defaultConfig.module.rules[0].include.push(
+    path.resolve(__dirname, '../../../../../..')
+  );
+
   defaultConfig.module.rules[0].exclude.push(/node_modules/);
 
   // Change media dist folder

src/systems/ec/implementations/react/storybook/package.json

@@ -15,14 +15,14 @@
     "@babel/plugin-proposal-export-namespace-from": "7.8.3",
     "@babel/runtime": "7.8.3",
     "@ecl/story-wrapper": "^2.22.0",
-    "@storybook/addon-a11y": "5.2.8",
-    "@storybook/addon-cssresources": "5.2.8",
-    "@storybook/addon-knobs": "5.2.8",
-    "@storybook/addon-options": "5.2.8",
-    "@storybook/addon-viewport": "5.2.8",
-    "@storybook/addons": "5.2.8",
-    "@storybook/react": "5.2.8",
-    "@storybook/theming": "5.2.8",
+    "@storybook/addon-a11y": "5.3.9",
+    "@storybook/addon-cssresources": "5.3.9",
+    "@storybook/addon-knobs": "5.3.9",
+    "@storybook/addon-options": "5.3.9",
+    "@storybook/addon-viewport": "5.3.9",
+    "@storybook/addons": "5.3.9",
+    "@storybook/react": "5.3.9",
+    "@storybook/theming": "5.3.9",
     "babel-core": "^7.0.0-bridge.0",
     "babel-loader": "8.0.6",
     "core-js": "3.6.4",

src/systems/eu/implementations/react/components/card/stories/Index.jsx

@@ -6,7 +6,7 @@ import { withKnobs, text, array } from '@storybook/addon-knobs';
 import demoContentCard from '@ecl/eu-specs-card/demo/data--card';
 import demoContentTile from '@ecl/eu-specs-card/demo/data--tile';
 
-import template from './Template';
+import { Template as template } from './Template';
 
 import Card from '../src/Card';
 

src/systems/eu/implementations/react/components/card/stories/Template.jsx

@@ -6,7 +6,9 @@ import demoContentTile from '@ecl/eu-specs-card/demo/data--tile';
 
 import Card from '../src/Card';
 
-const Template = () => {
+// Storybook issues with modules' resolutions https://github.com/storybookjs/storybook/issues/9621
+/* eslint-disable-next-line import/prefer-default-export */
+export const Template = () => {
   const image1 = {
     alt: demoContentCard.image.alt,
     src: demoContentCard.image.src,
@@ -97,5 +99,3 @@ const Template = () => {
     </div>
   );
 };
-
-export default Template;

src/systems/eu/implementations/react/storybook/.storybook/main.js

@@ -0,0 +1,35 @@
+const path = require('path');
+
+const stories = [
+  '../../templates/**/*/stories/*.jsx',
+  '../../page-structure/**/*/stories/*.jsx',
+  '../../layout/**/*/stories/*.jsx',
+  '../../components/**/*/stories/*.jsx',
+  '../../utilities/**/*/stories/*.jsx',
+];
+
+const addons = [
+  '@storybook/addon-options',
+  '@storybook/addon-knobs',
+  '@storybook/addon-viewport',
+  '@storybook/addon-a11y',
+  '@storybook/addon-cssresources',
+];
+
+const managerEntries = [
+  '../../../../../../src/tools/storybook-addon-code/register',
+];
+
+const managerWebpack = async baseConfig => {
+  // Babel loader: include "src"
+  baseConfig.module.rules[0].include.push(
+    path.resolve(__dirname, '../../../../../..')
+  );
+
+  // Exclude node_modules
+  baseConfig.module.rules[0].exclude = /node_modules/;
+
+  return baseConfig;
+};
+
+module.exports = { stories, addons, managerEntries, managerWebpack };

src/systems/eu/implementations/react/storybook/.storybook/manager-head.html

@@ -30,7 +30,10 @@
             x: window.innerWidth - rightPanelWidth,
             y: 0,
           },
-          resizerNav: { x: leftPanelWidth, y: 0 },
+          resizerNav: {
+            x: leftPanelWidth,
+            y: 0,
+          },
         })
       );
     }

src/systems/eu/implementations/react/storybook/.storybook/manager.js

@@ -1,14 +1,36 @@
-const path = require('path');
+import { addons } from '@storybook/addons';
+import { create } from '@storybook/theming/create';
 
-// Provide a custom webpack config for the manager
-module.exports.managerWebpack = async (baseConfig, options) => {
-  // Babel loader: include "src"
-  baseConfig.module.rules[0].include.push(
-    path.resolve(__dirname, '../../../../../..')
-  );
+const theme = create({
+  base: 'light',
+  colorSecondary: '#004494',
+  appBorderRadius: 0,
+  inputBorderRadius: 0,
+  brandTitle: 'ECL v2 - EU',
+  brandUrl: 'https://github.com/ec-europa/europa-component-library',
+  brandImage: null,
+});
 
-  // Exclude node_modules
-  baseConfig.module.rules[0].exclude = /node_modules/;
+const storySort = (a, b) => {
+  const aParentKind = a[1].kind.split('|').shift();
+  const aKind = a[1].kind
+    .split('|')
+    .slice(1)
+    .join('|');
+  const bParentKind = b[1].kind.split('|').shift();
+  const bKind = b[1].kind
+    .split('|')
+    .slice(1)
+    .join('|');
 
-  return baseConfig;
+  return aParentKind !== bParentKind
+    ? 0
+    : aKind.localeCompare(bKind, { numeric: true });
 };
+
+addons.setConfig({
+  theme,
+  storySort,
+  sidebarAnimations: false,
+  panelPosition: 'right',
+});