Update storybook

.storybook/main.js

@@ -1,26 +1,21 @@
 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
-	}
+
+    docs: {},
+
+    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"];

.storybook/tsconfig.json

@@ -7,9 +7,7 @@
 		"allowSyntheticDefaultImports": true,
 	},
 	"include": [
-		"**/*.stories.ts",
-		"../src/**/*",
-		"../projects/**/*"
+		"../**/*.stories.ts",
 	],
-	"exclude": [],
+	"exclude": ["../src/**/*.spec.ts"],
 }

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'],
 );