Merged in feat/SW-3644-storybook-v10 (pull request #3240)

feat(SW-3644): Storybook v10

* Auto update to Storybook v10

* Add scandic theme and logo

* Update yarn.lock

* Update formatting of package.json

* Update vitest config and playwright plugin

* Remove vitest 4 update

* Re-added comment

* Update the Typography component to explicitly return React.ReactNode

* Add an explicit type assertion to the export

* Add an explicit type assertion to the export for Checkbox

* Explicit return type assertion

* Add an explicit type assertion to the export

* Update @types/react and fix ts warnings

* Updated typings


Approved-by: Linus Flood
Approved-by: Matilda Landström

packages/design-system/.storybook/main.ts

@@ -1,20 +1,19 @@
 import type { StorybookConfig } from '@storybook/nextjs-vite'
-import { dirname, join } from 'path'
 import { mergeConfig } from 'vite'
 
 const config: StorybookConfig = {
+  framework: '@storybook/nextjs-vite',
   stories: ['../lib/**/*.mdx', '../lib/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('@storybook/addon-themes'),
-    getAbsolutePath('@storybook/addon-vitest'),
-    getAbsolutePath('@storybook/addon-docs'),
-    getAbsolutePath('@storybook/addon-a11y'),
-    getAbsolutePath('storybook-react-intl'),
+    '@storybook/addon-links',
+    '@storybook/addon-themes',
+    '@storybook/addon-vitest',
+    '@storybook/addon-docs',
+    '@storybook/addon-a11y',
+    'storybook-react-intl',
   ],
-  framework: {
-    name: getAbsolutePath('@storybook/nextjs-vite'),
-    options: {},
+  core: {
+    disableTelemetry: true,
   },
   async viteFinal(config) {
     return mergeConfig(config, {
@@ -48,7 +47,3 @@ const config: StorybookConfig = {
   },
 }
 export default config
-
-function getAbsolutePath(value: string) {
-  return dirname(require.resolve(join(value, 'package.json')))
-}

packages/design-system/.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from 'storybook/manager-api'
+import scandicTheme from './scandic-theme'
+
+addons.setConfig({
+  theme: scandicTheme,
+})

packages/design-system/.storybook/preview.tsx

@@ -47,18 +47,23 @@ const preview: Preview = {
   },
   parameters: {
     reactIntl,
+
     nextjs: {
       appDirectory: true,
     },
+
     docs: {
       toc: true,
     },
+
     controls: { matchers: { color: /(background|color)$/i, date: /Date$/i } },
+
     options: {
       storySort: {
         order: ['Introduction', 'Global', 'Components', 'Compositions', '*'],
       },
     },
+
     backgrounds: {
       options: {
         // 👇 Scandic
@@ -70,6 +75,13 @@ const preview: Preview = {
         storybookLight: { name: 'Storybook Light', value: '#F7F9F2' },
       },
     },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo',
+    },
   },
 
   tags: ['autodocs'],

packages/design-system/.storybook/scandic-theme.ts

@@ -0,0 +1,8 @@
+import { create } from 'storybook/theming'
+
+export default create({
+  base: 'dark',
+  brandTitle: 'Scandic Design System',
+  brandUrl: 'https://www.scandichotels.com/',
+  brandImage: 'http://scandichotels.com/_static/img/scandic-logotype.png',
+})

packages/design-system/.storybook/vitest.setup.ts

@@ -1,4 +1,5 @@
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview'
 import { setProjectAnnotations } from '@storybook/nextjs-vite'
 import * as previewAnnotations from './preview'
 
-setProjectAnnotations([previewAnnotations])
+setProjectAnnotations([a11yAddonAnnotations, previewAnnotations])