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'],
@@ -184,5 +187,7 @@ module.exports = {
             extends: ['plugin:@angular-eslint/template/recommended'],
             rules: {}
         }
-    ]
+    ],
+
+    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/app/components/cloud/cloud-layout.component.scss

@@ -2,8 +2,7 @@
     overflow: auto;
 }
 
-/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+.app-cloud-layout-tab-body .mat-mdc-tab-body-content {
-.app-cloud-layout-tab-body .mat-tab-body-wrapper {
     height: 100%;
 }
 

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,
+    rootMain: rootPath,
-    core: { ...rootMain.core, builder: 'webpack5' },
+    stories: [...rootPath.stories, '../**/*.stories.@(js|jsx|ts|tsx)'],
-    stories: [...rootMain.stories, '../**/*.stories.@(js|jsx|ts|tsx)'],
+
-    staticDirs: [...rootMain.staticDirs, { from: __dirname + '/../src/lib/i18n', to: 'assets/adf-content-services/i18n' }],
+    staticDirs: [
-    addons: ['@storybook/addon-essentials', ...rootMain.addons]
+        ...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/content-services/src/lib/category/categories-management/categories-management.component.scss

@@ -40,7 +40,7 @@
     padding-bottom: 10px;
 
     .mat-mdc-list-base .mat-mdc-list-item,
-    .mat-list-base .mat-list-option {
+    .mat-mdc-list-base .mat-mdc-list-option {
         display: flex;
         height: 100%;
         overflow-wrap: anywhere;

lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss

@@ -12,7 +12,7 @@ adf-search-facet-chip-tabbed {
 
 adf-search-filter-tabbed {
     /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
-    .mat-tab-body-wrapper {
+    .mat-mdc-tab-body-content {
         margin-top: 16px;
     }
 }

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

@@ -1,13 +1,27 @@
-const rootMain = require('../../../.storybook/main');
+var rootPath = require('../../../.storybook/main');
 
 module.exports = {
-    ...rootMain,
+    rootMain: rootPath,
-    core: { ...rootMain.core, builder: 'webpack5' },
+    stories: [...rootPath.stories, '../src/lib/**/*.stories.@(js|jsx|ts|tsx)'],
-    stories: [...rootMain.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

@@ -129,7 +129,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",
@@ -196,6 +196,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.1.0",