chore: upgrade Storybook to v8

packages/dnb-eufemia/.storybook/main.ts

@@ -0,0 +1,33 @@
+import { join, dirname } from 'path'
+import type { StorybookConfig } from '@storybook/react-webpack5'
+
+const config: StorybookConfig = {
+  // stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['../src/**/*.stories.tsx'],
+  addons: [
+    getAbsolutePath('@storybook/preset-scss'),
+    getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
+    // getAbsolutePath('@storybook/addon-onboarding'),
+    // getAbsolutePath('@storybook/addon-essentials'),
+    // getAbsolutePath('@chromatic-com/storybook'),
+    // getAbsolutePath('@storybook/addon-interactions'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-webpack5'),
+    options: {},
+  },
+  core: {
+    disableTelemetry: true,
+    disableWhatsNewNotifications: true,
+    enableCrashReports: false,
+  },
+}
+export default config
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')))
+}

packages/dnb-eufemia/.storybook/preview.ts

@@ -0,0 +1,24 @@
+import type { Preview } from '@storybook/react'
+
+import '@dnb/eufemia/src/style/dnb-ui-core.scss'
+
+// Default theme
+import '@dnb/eufemia/src/style/themes/theme-ui/ui-theme-components.scss'
+import '@dnb/eufemia/src/style/themes/theme-ui/ui-theme-basis.scss'
+
+// Sbanken styles
+// import '@dnb/eufemia/src/style/themes/theme-sbanken/sbanken-theme-components.scss'
+// import '@dnb/eufemia/src/style/themes/theme-sbanken/sbanken-theme-basis.scss'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+}
+
+export default preview

packages/dnb-eufemia/package.json

@@ -74,7 +74,7 @@
     "publish:prepare": "./scripts/postbuild/publish-prepare.sh",
     "reset": "rm -rf ./node_modules ./build",
     "skeleton:font": "nodemon --exec 'babel-node --extensions .js,.ts,.tsx ./scripts/tools/createSkeletonFont.js'",
-    "start": "storybook dev -s / -p 8002 --ci --no-version-updates --disable-telemetry",
+    "start": "storybook dev / -p 8002 --no-open --ci --no-version-updates --disable-telemetry",
     "test": "yarn jest",
     "test:auto-generated-types": "yarn jest ./postTypeGeneration.test.ts --ci --testPathIgnorePatterns=[]",
     "test:ci": "yarn jest --ci",
@@ -165,7 +165,9 @@
     "@semantic-release/github": "8.0.7",
     "@semantic-release/npm": "9.0.2",
     "@semantic-release/release-notes-generator": "10.0.3",
-    "@storybook/addons": "7.6.17",
+    "@storybook/addon-essentials": "8.5.3",
+    "@storybook/addon-interactions": "8.5.3",
+    "@storybook/addon-webpack5-compiler-swc": "2.0.0",
     "@storybook/preset-scss": "1.0.3",
     "@storybook/react": "8.5.3",
     "@storybook/react-webpack5": "8.5.3",
@@ -212,6 +214,7 @@
     "eslint-plugin-react": "7.30.0",
     "eslint-plugin-react-hooks": "4.5.0",
     "eslint-plugin-security": "1.5.0",
+    "eslint-plugin-storybook": "0.11.2",
     "figma-js": "1.14.0",
     "fontmin": "0.9.9",
     "fs-extra": "10.0.0",
@@ -399,5 +402,10 @@
   },
   "volta": {
     "extends": "../../package.json"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
   }
 }