fix breaking changes

Author: MarcusNotheis

.storybook/main.ts

@@ -1,4 +1,3 @@
-import { dirname, join } from 'path';
 import type { StorybookConfig } from '@storybook/react-vite';
 import remarkGfm from 'remark-gfm';
 import type { StoriesEntry } from 'storybook/internal/types';
@@ -52,9 +51,8 @@ const storyList: StoriesEntry[] = isChromatic
 
 const addons = [
   './addons/version-switch',
-  getAbsolutePath('@storybook/react-vite'),
   {
-    name: getAbsolutePath('@storybook/addon-docs'),
+    name: '@storybook/addon-docs',
     options: {
       mdxPluginOptions: {
         mdxCompileOptions: {
@@ -70,7 +68,7 @@ if (isDevMode) {
 
 const config: StorybookConfig = {
   framework: {
-    name: getAbsolutePath('@storybook/react-vite'),
+    name: '@storybook/react-vite',
     options: {},
   },
   stories: storyList,
@@ -88,7 +86,3 @@ const config: StorybookConfig = {
 };
 
 export default config;
-
-function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, 'package.json')));
-}

.storybook/preview.tsx

@@ -133,7 +133,7 @@ const preview: Preview = {
     controls: {
       sort: 'requiredFirst',
     },
-    backgrounds: { disable: true },
+    backgrounds: { disabled: true },
     options: {
       storySort: {
         method: 'alphabetical',

.storybook/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "./../tsconfig.base.json",
   "compilerOptions": {
-    "allowJs": true
+    "allowJs": true,
+    "allowImportingTsExtensions": true
   },
   "include": ["./**/*.js", "./**/*.tsx", "./**/*.ts", "../patterns/selection-assistant"]
 }

.storybook/utils.ts

@@ -1,11 +1,8 @@
-import type * as CEM from '@ui5/webcomponents-tools/lib/cem/types-internal';
+import type * as CEM from '@ui5/webcomponents-tools/lib/cem/types-internal.js';
 import { useEffect, useMemo, useRef, useState, useTransition } from 'react';
-// @ts-expect-error: storybook can handle this
-import cemAi from './custom-element-manifests/ai.json';
-// @ts-expect-error: storybook can handle this
-import cemFiori from './custom-element-manifests/fiori.json';
-// @ts-expect-error: storybook can handle this
-import cemMain from './custom-element-manifests/main.json';
+import cemAi from './custom-element-manifests/ai.json' with { type: 'json' };
+import cemFiori from './custom-element-manifests/fiori.json' with { type: 'json' };
+import cemMain from './custom-element-manifests/main.json' with { type: 'json' };
 
 export const isChromatic = process.env.STORYBOOK_ENV === 'chromatic';