feat: update storybook to v9

Author: tom-wegener

.storybook/main.js

@@ -1,26 +1,19 @@
 const path = require('path');
 module.exports = {
-	staticDirs: ["public"],
-	stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-	addons: [
-		"@storybook/addon-links",
-		{
-			name: "@storybook/addon-essentials",
-			options: {
-				backgrounds: false
-			}
-		},
-		"@storybook/addon-a11y",
-		"@storybook/addon-storysource"
-	],
-	framework: {
+    staticDirs: ["public"],
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+    addons: ["@storybook/addon-links", "@storybook/addon-a11y", '@storybook/addon-docs'],
+
+    framework: {
 		name: "@storybook/angular",
 		options: {}
 	},
-	core: {
+
+    core: {
 		disableTelemetry: true
 	},
-	docs: {
-		autodocs: true
-	}
+
+    features: {
+      backgrounds: false
+    }
 };

.storybook/manager.js

@@ -1,5 +1,5 @@
-import { addons } from '@storybook/addons';
-import { create } from '@storybook/theming';
+import { addons } from 'storybook/manager-api';
+import { create } from 'storybook/theming';
 
 addons.setConfig({
 	theme: create({

.storybook/preview.js

@@ -4,14 +4,11 @@ import { breakpoints } from '@carbon/layout';
 // Add compodoc
 import { setCompodocJson } from "@storybook/addon-docs/angular";
 import {
-	classes,
-	components,
-	directives,
-	interfaces,
-	miscellaneous,
-	pipes
+	components
 } from "../dist/docs/documentation.json";
 
+import docJson from "../dist/docs/documentation.json";
+
 /**
  * Remove public properties from docs Json for each component.
  * This is to prevent properties like `onTouched = () => {...}` & `propagateChange = () => {}`
@@ -41,12 +38,8 @@ components = components.map(comp => ({
 
 // Integrate compodoc documentation with storybook
 setCompodocJson({
-	classes,
-	components,
-	directives,
-	interfaces,
-	miscellaneous,
-	pipes
+	...docJson,
+	components
 });
 
 // Set carbon viewports options
@@ -90,8 +83,14 @@ export const parameters = {
 			},
 		},
 	},
+
 	controls: {
 		expanded: true
+	},
+
+	docs: {
+		codePanel: true
 	}
 };
 
+export const tags = ["autodocs"];

eslint.config.js

@@ -1,3 +1,6 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
 const eslint = require("@eslint/js");
 const tseslint = require("typescript-eslint");
 const angular = require("angular-eslint");