SF-3636 Upgrade to Storybook v10 (#3555)

Author: siltomato

src/SIL.XForge.Scripture/ClientApp/.storybook/main.ts

@@ -1,6 +1,8 @@
-module.exports = {
+import type { StorybookConfig } from '@storybook/angular';
+
+const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+  addons: ['@storybook/addon-links', '@storybook/addon-docs'],
   framework: {
     name: '@storybook/angular',
     options: {}
@@ -12,3 +14,5 @@ module.exports = {
     { from: '../src/assets', to: '/assets' }
   ]
 };
+
+export default config;

src/SIL.XForge.Scripture/ClientApp/.storybook/preview.ts

@@ -4,6 +4,7 @@ import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@ang
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { setCompodocJson } from '@storybook/addon-docs/angular';
 import { applicationConfig } from '@storybook/angular';
+import { MINIMAL_VIEWPORTS } from 'storybook/viewport';
 import { I18nStoryDecorator, provideI18nStory } from 'xforge-common/i18n-story';
 import { I18nService } from 'xforge-common/i18n.service';
 import { APP_ROOT_ELEMENT_SELECTOR, InAppRootOverlayContainer } from 'xforge-common/overlay-container';
@@ -21,6 +22,9 @@ export const parameters = {
       color: /(background|color)$/i,
       date: /Date$/
     }
+  },
+  viewport: {
+    options: MINIMAL_VIEWPORTS
   }
 };
 

src/SIL.XForge.Scripture/ClientApp/.storybook/tsconfig.json

@@ -1,7 +1,7 @@
 {
-  "extends": "../src/tsconfig.app.json",
+  "extends": "../tsconfig.json",
   "compilerOptions": {
-    "types": ["node"],
+    "types": ["node", "chai", "react", "react-dom"],
     "allowSyntheticDefaultImports": true
   },
   "exclude": [
@@ -11,6 +11,6 @@
     "../src/xforge-common/test-utils.ts",
     "../src/xforge-common/mock-console.ts"
   ],
-  "include": ["../src/**/*", "./jest-setup.ts", "./preview.ts"],
+  "include": ["../src/**/*", "./**/*"],
   "files": ["./typings.d.ts"]
 }