Fixed storybook with migration to WP5

.eslintrc.js

@@ -1,5 +1,6 @@
 module.exports = {
     root: true,
+
     ignorePatterns: [
         'projects/**/*',
         '**/node_modules/**/*',
@@ -10,7 +11,9 @@ module.exports = {
         '**/scripts',
         '**/docs'
     ],
+
     plugins: ['@nrwl/nx'],
+
     overrides: [
         {
             files: ['*.ts'],
@@ -196,5 +199,7 @@ module.exports = {
             extends: ['plugin:@angular-eslint/template/process-inline-templates'],
             excludedFiles: ['*.spec.ts']
         }
-    ]
+    ],
+
+    extends: ['plugin:storybook/recommended']
 };

.storybook/main.js

@@ -1,5 +1,12 @@
 module.exports = {
-    framework: '@storybook/angular',
+    framework: {
+        name: '@storybook/angular',
+        options: {}
+    },
     staticDirs: [{ from: '../../../demo-shell/src/app.config.json', to: 'app.config.json' }],
-    core: { builder: 'webpack5' }
+    docs: {
+        autodocs: true
+    },
+    stories: [],
+    addons:[],
 };

demo-shell/src/custom-style-dev.scss

@@ -1,16 +1,6 @@
 @use '@angular/material' as mat;
 @import '../../lib/core/src/lib/styles/index';
 @import '../../lib/core/src/lib/styles/typography';
-
-// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
-//  The following line adds:
-//    1. Default typography styles for all components
-//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
-//  If you specify typography styles for the components you use elsewhere, you should delete this line.
-//  If you don't need the default component typographies but still want the hierarchy styles,
-//  you can delete this line and instead use:
-//    `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
-
 @include mat.all-component-typographies;
 @include mat.core;
 

demo-shell/src/custom-style.scss

@@ -1,15 +1,5 @@
 @use '@angular/material' as mat;
 @import '~@alfresco/adf-core/theming';
-
-// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
-//  The following line adds:
-//    1. Default typography styles for all components
-//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
-//  If you specify typography styles for the components you use elsewhere, you should delete this line.
-//  If you don't need the default component typographies but still want the hierarchy styles,
-//  you can delete this line and instead use:
-//    `@include mat.legacy-typography-hierarchy($alfresco-typography);`
-
 @include mat.all-component-typographies($alfresco-typography);
 @include mat.core;
 

lib/content-services/.storybook/main.js

@@ -1,9 +1,27 @@
-const rootMain = require('../../../.storybook/main');
+var rootPath = require('../../../.storybook/main');
 
 module.exports = {
-    ...rootMain,
-    core: { ...rootMain.core, builder: 'webpack5' },
-    stories: [...rootMain.stories, '../**/*.stories.@(js|jsx|ts|tsx)'],
-    staticDirs: [...rootMain.staticDirs, { from: __dirname + '/../src/lib/i18n', to: 'assets/adf-content-services/i18n' }],
-    addons: ['@storybook/addon-essentials', ...rootMain.addons]
+    rootMain: rootPath,
+    stories: [...rootPath.stories, '../**/*.stories.@(js|jsx|ts|tsx)'],
+
+    staticDirs: [
+        ...rootPath.staticDirs,
+        { from: __dirname + '/../src/lib/i18n', to: 'assets/adf-core/i18n' },
+        { from: __dirname + '/../src/lib/assets/images', to: 'assets/images' }
+    ],
+
+    addons: ['@storybook/addon-essentials', ...rootPath.addons],
+
+    framework: {
+        name: '@storybook/angular',
+        options: {}
+    },
+
+    docs: {
+        autodocs: true
+    },
+
+    core: {
+        builder: '@storybook/builder-webpack5'
+    }
 };

lib/process-services-cloud/.storybook/main.js

@@ -1,13 +1,27 @@
-const rootMain = require('../../../.storybook/main');
+var rootPath = require('../../../.storybook/main');
 
 module.exports = {
-    ...rootMain,
-    core: { ...rootMain.core, builder: 'webpack5' },
-    stories: [...rootMain.stories, '../src/lib/**/*.stories.@(js|jsx|ts|tsx)'],
+    rootMain: rootPath,
+    stories: [...rootPath.stories, '../src/lib/**/*.stories.@(js|jsx|ts|tsx)'],
+
     staticDirs: [
-        ...rootMain.staticDirs,
+        ...rootPath.staticDirs,
         { from: '../../core/src/lib/i18n', to: 'assets/adf-core/i18n' },
         { from: __dirname + '/../src/lib/i18n', to: 'assets/adf-process-services-cloud/i18n' }
     ],
-    addons: ['@storybook/addon-essentials', ...rootMain.addons]
+
+    addons: ['@storybook/addon-essentials', ...rootPath.addons],
+
+    framework: {
+        name: '@storybook/angular',
+        options: {}
+    },
+
+    docs: {
+        autodocs: true
+    },
+
+    core: {
+        builder: '@storybook/builder-webpack5'
+    }
 };

package.json

@@ -124,7 +124,7 @@
     "@schematics/angular": "15.2.10",
     "@storybook/addon-essentials": "6.5.16",
     "@storybook/angular": "6.5.16",
-    "@storybook/builder-webpack5": "6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
     "@storybook/core-server": "6.5.16",
     "@storybook/manager-webpack5": "6.5.16",
     "@types/ejs": "^3.1.5",
@@ -191,6 +191,8 @@
     "protractor-retry-angular-cli": "^2.0.3",
     "protractor-screenshoter-plugin": "0.10.3",
     "protractor-smartrunner": "^2.0.0-beta6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
     "sass-loader": "13.3.2",
     "selenium-webdriver": "^4.14.0",