chore: update storybook to v9

Author: tom-wegener

.storybook/main.js

@@ -1,19 +1,21 @@
 const path = require('path');
 module.exports = {
-	staticDirs: ["public"],
-	stories: ['../src/**/*.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: {}
+
+    docs: {},
+
+    features: {
+      backgrounds: false
+    }
 };

.storybook/manager.js

@@ -1,5 +1,5 @@
-import { addons } from '@storybook/manager-api';
-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,10 +83,14 @@ export const parameters = {
 			},
 		},
 	},
+
 	controls: {
 		expanded: true
+	},
+
+	docs: {
+		codePanel: true
 	}
 };
 
 export const tags = ["autodocs"];
-

eslint.config.js

@@ -1,8 +1,11 @@
-const eslint = require("@eslint/js");
-const tseslint = require("typescript-eslint");
-const angular = require("angular-eslint");
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
 
-module.exports = tseslint.config({
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+import angular from "angular-eslint";
+
+export default tseslint.config({
 	files: ["src/**/*.ts"],
 	extends: [
 		eslint.configs.recommended,
@@ -141,5 +144,6 @@ module.exports = tseslint.config({
 			"@angular-eslint/template/role-has-required-aria": "warn",
 			"@angular-eslint/template/alt-text": "warn"
 		},
-	}
+	},
+	storybook.configs['flat/recommended'],
 );