chore: Storybook 8 - FRONT-4292

patches/@storybook+addon-cssresources+6.2.9.patch

@@ -1,18 +1,30 @@
 diff --git a/node_modules/@storybook/addon-cssresources/dist/esm/index.js b/node_modules/@storybook/addon-cssresources/dist/esm/index.js
-index 6811b2b..d8a008a 100644
+index 6811b2b..79f45fc 100644
 --- a/node_modules/@storybook/addon-cssresources/dist/esm/index.js
 +++ b/node_modules/@storybook/addon-cssresources/dist/esm/index.js
 @@ -4,10 +4,12 @@ import "core-js/modules/es.array.for-each.js";
  import "core-js/modules/es.regexp.exec.js";
  import "core-js/modules/es.string.replace.js";
  import "core-js/modules/web.dom-collections.for-each.js";
 -import { document } from 'global';
+-import { addons, makeDecorator } from '@storybook/addons';
 +import { global } from 'global';
- import { addons, makeDecorator } from '@storybook/addons';
++import { addons, makeDecorator } from '@storybook/preview-api';
  import { EVENTS, PARAM_KEY } from './constants';
 
 +const { document } = global;
 +
  var changeMediaAttribute = function changeMediaAttribute(element, enabled) {
    var current = element.getAttribute('media');
 
+diff --git a/node_modules/@storybook/addon-cssresources/dist/esm/register.js b/node_modules/@storybook/addon-cssresources/dist/esm/register.js
+index 974ccc8..be7d0f0 100644
+--- a/node_modules/@storybook/addon-cssresources/dist/esm/register.js
++++ b/node_modules/@storybook/addon-cssresources/dist/esm/register.js
+@@ -1,5 +1,5 @@
+ import * as React from 'react';
+-import { addons, types } from '@storybook/addons';
++import { addons, types } from '@storybook/manager-api';
+ import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
+ import { CssResourcePanel } from './css-resource-panel';
+ addons.register(ADDON_ID, function (api) {

src/playground/addons/storybook-addon-code/HTMLMarkup.jsx

@@ -46,7 +46,7 @@ function HTMLMarkup({ active, channel }) {
         <h1>Live HTML</h1>
         <Button
           type="button"
-          tertiary
+          variant="tertiary"
           onClick={() => {
             const form = document.createElement('form');
             const element1 = document.createElement('input');

src/playground/addons/storybook-addon-code/codepen.js

@@ -4,7 +4,7 @@ const system = getSystem();
 
 const baseUrl =
   ['ec.europa.eu', 'localhost'].indexOf(window.location.hostname) !== -1
-    ? `https://v3--europa-component-library.netlify.app/playground/${system}`
+    ? `https://v4--europa-component-library.netlify.app/playground/${system}`
     : window.location.origin + window.location.pathname;
 
 const replaceLogo = (code) =>

src/playground/addons/storybook-addon-code/index.js

@@ -1,4 +1,4 @@
-import { addons, makeDecorator } from '@storybook/addons';
+import { addons, makeDecorator } from '@storybook/preview-api';
 import { ADD_CODE } from './constants';
 
 const withCode = makeDecorator({

src/playground/addons/storybook-addon-code/package.json

@@ -6,9 +6,10 @@
   "private": true,
   "dependencies": {
     "@ecl/builder": "4.0.2",
-    "@storybook/addons": "7.6.17",
-    "@storybook/components": "7.6.17",
-    "@storybook/theming": "7.6.17",
+    "@storybook/components": "8.0.4",
+    "@storybook/manager-api": "8.0.4",
+    "@storybook/preview-api": "8.0.4",
+    "@storybook/theming": "8.0.4",
     "html-entities": "2.5.2",
     "js-beautify": "1.15.1",
     "prop-types": "15.8.1",

src/playground/addons/storybook-addon-code/register.jsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { addons } from '@storybook/addons';
+import { addons, types } from '@storybook/manager-api';
 import { ADDON_ID, PANEL_ID } from './constants';
 import HTMLMarkup from './HTMLMarkup';
 
 addons.register(ADDON_ID, () => {
-  addons.addPanel(PANEL_ID, {
+  addons.add(PANEL_ID, {
+    type: types.PANEL,
     title: 'HTML',
     render: (props) => <HTMLMarkup channel={addons.getChannel()} {...props} />,
   });

src/playground/addons/storybook-addon-notes/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-param-reassign */
-import { addons, makeDecorator } from '@storybook/addons';
+import { addons, makeDecorator } from '@storybook/preview-api';
 import { marked } from 'marked';
 import Prism from 'prismjs';
 import he from 'he';

src/playground/addons/storybook-addon-notes/package.json

@@ -7,7 +7,8 @@
   "dependencies": {
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.0",
-    "@storybook/addons": "7.6.17",
+    "@storybook/preview-api": "8.0.4",
+    "@storybook/manager-api": "8.0.4",
     "he": "1.2.0",
     "marked": "10.0.0",
     "prismjs": "1.29.0",

src/playground/addons/storybook-addon-notes/register.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { addons } from '@storybook/addons';
+import { addons, types } from '@storybook/manager-api';
 
 import styled from '@emotion/styled';
 
@@ -77,9 +77,10 @@ Notes.propTypes = {
 
 addons.register('ecl/notes', (api) => {
   const channel = addons.getChannel();
-  addons.addPanel('ecl/notes/panel', {
+  addons.add('ecl/notes/panel', {
     title: 'Notes',
     paramKey: 'EclNotes',
+    type: types.PANEL,
     // eslint-disable-next-line react/prop-types
     render: ({ active }) => (
       <Notes channel={channel} api={api} active={active} />

src/playground/addons/storybook-addon-system-switcher/package.json

@@ -9,9 +9,9 @@
   ],
   "dependencies": {
     "@ecl/builder": "4.0.2",
-    "@storybook/addons": "7.6.17",
-    "@storybook/api": "7.6.17",
-    "@storybook/components": "7.6.17",
+    "@storybook/components": "8.0.4",
+    "@storybook/preview-api": "8.0.4",
+    "@storybook/manager-api": "8.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   }

src/playground/addons/storybook-addon-system-switcher/register.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { addons, types } from '@storybook/addons';
+import { addons, types } from '@storybook/manager-api';
 import Switcher from './Switcher';
 
 const ADDON_ID = 'ecl/storybook/system-switcher';
 const TOOL_ID = `${ADDON_ID}/tool`;
 
 addons.register(ADDON_ID, () => {
   addons.add(TOOL_ID, {
+    type: types.TOOL,
     title: 'Switcher',
-    type: types.TOOLEXTRA,
     render: () => <Switcher />,
   });
 });

src/playground/ec/.storybook/main.js

@@ -11,12 +11,12 @@ const addons = [
   '@storybook/addon-cssresources',
   '@ecl/storybook-addon-notes',
   '@ecl/storybook-addon-code',
-  '@ecl/storybook-addon-system-switcher',
   '@storybook/addon-viewport',
   '@storybook/addon-controls',
   '@storybook/addon-a11y',
   'storybook-dark-mode',
   '@storybook/addon-measure',
+  '@ecl/storybook-addon-system-switcher',
 ];
 
 let staticDirs = [

src/playground/ec/.storybook/manager.js

@@ -1,11 +1,8 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import browserUpdate from 'browser-update';
 import { create } from '@storybook/theming';
 
 addons.setConfig({
-  isFullscreen: false,
-  showNav: true,
-  showPanel: true,
   panelPosition: 'bottom',
   sidebarAnimations: true,
   enableShortcuts: true,

src/playground/ec/package.json

@@ -14,22 +14,22 @@
     "@babel/preset-env": "7.24.0",
     "@babel/preset-react": "7.23.3",
     "@babel/runtime": "7.24.0",
-    "@storybook/addon-a11y": "7.6.17",
+    "@storybook/addon-a11y": "8.0.4",
     "@storybook/addon-cssresources": "6.2.9",
-    "@storybook/addon-essentials": "7.6.17",
-    "@storybook/addon-links": "7.6.17",
-    "@storybook/builder-webpack5": "7.6.17",
-    "@storybook/cli": "7.6.17",
-    "@storybook/html": "7.6.17",
-    "@storybook/html-webpack5": "7.6.17",
+    "@storybook/addon-essentials": "8.0.4",
+    "@storybook/addon-links": "8.0.4",
+    "@storybook/builder-webpack5": "8.0.4",
+    "@storybook/cli": "8.0.4",
+    "@storybook/html": "8.0.4",
+    "@storybook/html-webpack5": "8.0.4",
     "babel-loader": "9.1.3",
     "browser-update": "3.3.51",
     "buffer": "6.0.3",
     "core-js": "3.36.0",
     "iframe-resizer": "4.3.9",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "storybook-dark-mode": "3.0.3",
+    "storybook-dark-mode": "4.0.1",
     "twing": "5.2.2",
     "twing-loader": "4.0.1"
   }

src/playground/eu/.storybook/main.js

@@ -11,12 +11,12 @@ const addons = [
   '@storybook/addon-cssresources',
   '@ecl/storybook-addon-notes',
   '@ecl/storybook-addon-code',
-  '@ecl/storybook-addon-system-switcher',
   '@storybook/addon-viewport',
   '@storybook/addon-controls',
   '@storybook/addon-a11y',
   'storybook-dark-mode',
   '@storybook/addon-measure',
+  '@ecl/storybook-addon-system-switcher',
 ];
 
 let staticDirs = [

src/playground/eu/.storybook/manager.js

@@ -1,11 +1,8 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import browserUpdate from 'browser-update';
 import { create } from '@storybook/theming';
 
 addons.setConfig({
-  isFullscreen: false,
-  showNav: true,
-  showPanel: true,
   panelPosition: 'bottom',
   sidebarAnimations: true,
   enableShortcuts: true,

src/playground/eu/package.json

@@ -14,22 +14,22 @@
     "@babel/preset-env": "7.24.0",
     "@babel/preset-react": "7.23.3",
     "@babel/runtime": "7.24.0",
-    "@storybook/addon-a11y": "7.6.17",
+    "@storybook/addon-a11y": "8.0.4",
     "@storybook/addon-cssresources": "6.2.9",
-    "@storybook/addon-essentials": "7.6.17",
-    "@storybook/addon-links": "7.6.17",
-    "@storybook/builder-webpack5": "7.6.17",
-    "@storybook/cli": "7.6.17",
-    "@storybook/html": "7.6.17",
-    "@storybook/html-webpack5": "7.6.17",
+    "@storybook/addon-essentials": "8.0.4",
+    "@storybook/addon-links": "8.0.4",
+    "@storybook/builder-webpack5": "8.0.4",
+    "@storybook/cli": "8.0.4",
+    "@storybook/html": "8.0.4",
+    "@storybook/html-webpack5": "8.0.4",
     "babel-loader": "9.1.3",
     "browser-update": "3.3.51",
     "buffer": "6.0.3",
     "core-js": "3.36.0",
     "iframe-resizer": "4.3.9",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "storybook-dark-mode": "3.0.3",
+    "storybook-dark-mode": "4.0.1",
     "twing": "5.2.2",
     "twing-loader": "4.0.1"
   }