V16: Upgrade Storybook from V8 to V9 (#19640)

* build(deps-dev): bump storybook from v8 to v9

* chore: run storybook v9 migrations

* chore: updates import paths for storybook-webcomponents-vite (migration)

* chore: migrates eslint for storybook config

* fix: updates old link to composed storybook so we reference the latest production uui

* chore: formats eslint config file

* chore: changes import path to build mdx stories

* chore: updates language list to reflect v16

Author: iOvergaard

src/Umbraco.Web.UI.Client/.storybook/main.ts

@@ -4,12 +4,12 @@ import remarkGfm from 'remark-gfm';
 
 const config: StorybookConfig = {
 	stories: ['../@(src|libs|apps|storybook)/**/*.mdx', '../@(src|libs|apps|storybook)/**/*.stories.@(js|jsx|ts|tsx)'],
+
 	addons: [
 		getAbsolutePath('@storybook/addon-links'),
-		getAbsolutePath('@storybook/addon-essentials'),
 		getAbsolutePath('@storybook/addon-a11y'),
 		{
-			name: '@storybook/addon-docs',
+			name: getAbsolutePath('@storybook/addon-docs'),
 			options: {
 				mdxPluginOptions: {
 					mdxCompileOptions: {
@@ -19,10 +19,12 @@ const config: StorybookConfig = {
 			},
 		},
 	],
+
 	framework: {
 		name: getAbsolutePath('@storybook/web-components-vite'),
 		options: {},
 	},
+
 	staticDirs: [
 		'../public-assets',
 		'../public',
@@ -32,23 +34,24 @@ const config: StorybookConfig = {
 			to: 'assets/icons',
 		},
 	],
+
 	typescript: {
 		check: true,
 	},
-	docs: {
-        autodocs: true
-    },
+
 	managerHead(head, { configType }) {
 		const base = process.env.VITE_BASE_PATH || '/';
 		const injections = [
 			`<base href="${base}" />`, // This decide how storybook's main frame visit stories
 		];
 		return configType === 'PRODUCTION' ? `${injections.join('')}${head}` : head;
 	},
+
 	refs: {
 		uui: {
 			title: 'Umbraco UI Library',
-			url: 'https://62189360eeb21b003ab2f4ad-vfnpsanjps.chromatic.com/',
+			url: 'https://uui.umbraco.com/',
+			expanded: false,
 		},
 	},
 };

src/Umbraco.Web.UI.Client/.storybook/manager.ts

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/manager-api';
+import { addons } from 'storybook/manager-api';
 
 addons.setConfig({
 	enableShortcuts: false,

src/Umbraco.Web.UI.Client/.storybook/preview.js

@@ -5,7 +5,7 @@ import 'element-internals-polyfill';
 import '@umbraco-ui/uui';
 
 import { html } from 'lit';
-import { setCustomElements } from '@storybook/web-components';
+import { setCustomElements } from '@storybook/web-components-vite';
 
 import { startMockServiceWorker } from '../src/mocks';
 

src/Umbraco.Web.UI.Client/eslint.config.js

@@ -1,7 +1,10 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+
 import js from '@eslint/js';
 import globals from 'globals';
 import importPlugin from 'eslint-plugin-import';
 import localRules from 'eslint-plugin-local-rules';
+import storybook from 'eslint-plugin-storybook';
 import wcPlugin from 'eslint-plugin-wc';
 import litPlugin from 'eslint-plugin-lit';
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
@@ -13,8 +16,8 @@ export default [
 	js.configs.recommended,
 	...tseslint.configs.recommended,
 	wcPlugin.configs['flat/recommended'],
-	litPlugin.configs['flat/recommended'],
-	jsdoc.configs['flat/recommended'], // We use the non typescript version to allow types to be defined in the jsdoc comments. This will allow js docs as an alternative to typescript types.
+	litPlugin.configs['flat/recommended'], // We use the non typescript version to allow types to be defined in the jsdoc comments. This will allow js docs as an alternative to typescript types.
+	jsdoc.configs['flat/recommended'],
 	localRules.configs.all,
 	eslintPluginPrettierRecommended,
 
@@ -101,4 +104,5 @@ export default [
 			},
 		},
 	},
+	...storybook.configs['flat/recommended'],
 ];