fix storybook builds

.storybook/main.ts

@@ -1,5 +1,6 @@
 const svgoConfig = require('../common/config/svgo');
 import type { StorybookConfig } from '@storybook/nextjs';
+import path from 'path';
 
 const config: StorybookConfig = {
   stories: [
@@ -16,6 +17,10 @@ const config: StorybookConfig = {
     },
   ],
   webpackFinal: async config => {
+    if (config.resolve?.alias) {
+      config.resolve.alias['@'] = path.resolve(__dirname, '../');
+    }
+
     // Find the Storybook Webpack rule relevant to SVG files.
     // @ts-expect-error => 'config.module' is possibly 'undefined'.ts(18048)
     const imageRule = config.module.rules.find(rule => {

components/Badge/__stories__/Badge.stories.tsx

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { GithubIcon } from 'public/static/images/icons/github_logo.svg';
-import { TwitterIcon } from 'public/static/images/icons/twitter_logo.svg';
-import { PinterestIcon } from 'public/static/images/icons/pinterest_logo.svg';
 import { Badge } from '../Badge';
+import GithubIcon from '@/public/static/images/icons/github_logo.svg';
+import TwitterIcon from '@/public/static/images/icons/twitter_logo.svg';
+import PinterestIcon from '@/public/static/images/icons/pinterest_logo.svg';
 
 const icons = {
   github: <GithubIcon />,

package.json

@@ -18,7 +18,7 @@
     "postbuild": "next-sitemap",
     "start": "next start -p 3000",
     "storybook": "storybook dev -p 9001 -c .storybook",
-    "storybook:build": "storybook build -c .storybook -o .storybook-dist",
+    "storybook:build": "storybook build -c .storybook -o .storybook-dist --disable-telemetry",
     "test:e2e": "cypress open",
     "test:e2e:headless": "cypress run --browser chrome",
     "test:e2e:update-snaps": "cypress run --browser chrome --env updateSnapshots=true",
@@ -46,7 +46,7 @@
     "@radix-ui/react-dialog": "1.0.0",
     "@radix-ui/react-tabs": "0.1.1",
     "@sentry/nextjs": "^7.77.0",
-    "@storybook/blocks": "^7.4.1",
+    "@storybook/blocks": "^7.4.3",
     "axios": "^1.7.2",
     "classnames": "^2.5.1",
     "date-fns": "^2.29.3",
@@ -90,15 +90,15 @@
     "@cypress/code-coverage": "^3.10.0",
     "@cypress/webpack-preprocessor": "^5.12.0",
     "@operation_code/eslint-plugin-custom-rules": "^1.0.1",
-    "@storybook/addon-actions": "^7.4.1",
-    "@storybook/addon-essentials": "^7.4.1",
-    "@storybook/addon-links": "^7.4.1",
+    "@storybook/addon-actions": "^7.4.3",
+    "@storybook/addon-essentials": "^7.4.3",
+    "@storybook/addon-links": "^7.4.3",
     "@storybook/addon-postcss": "^2.0.0",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/addons": "^7.4.1",
-    "@storybook/nextjs": "^7.4.1",
-    "@storybook/react": "^7.4.1",
-    "@storybook/theming": "^7.4.1",
+    "@storybook/addons": "^7.4.3",
+    "@storybook/nextjs": "^7.4.3",
+    "@storybook/react": "^7.4.3",
+    "@storybook/theming": "^7.4.3",
     "@svgr/webpack": "^6.3.1",
     "@testing-library/cypress": "^8.0.3",
     "@testing-library/jest-dom": "^6.4.6",
@@ -162,7 +162,7 @@
     "react-test-renderer": "^18.3.1",
     "require-context.macro": "^1.2.2",
     "start-server-and-test": "^1.14.0",
-    "storybook": "^7.4.1",
+    "storybook": "^7.4.3",
     "style-loader": "^3.3.1",
     "stylelint": "^14.9.1",
     "stylelint-config-prettier": "^9.0.3",

tsconfig.json

@@ -23,9 +23,18 @@
     "jsxFragmentFactory": "React.Fragment",
     "noEmit": true,
     "noEmitOnError": true,
-    "paths": { "@/*": ["./*"] },
-    "types": ["vitest/globals", "@testing-library/jest-dom"]
+    "paths": { "@/*": ["./*"] }
   },
-  "include": ["next-env.d.ts", "**/*.js", "**/*.ts", "**/*.tsx", "vitest.config.mts"],
+  "include": [
+    "types/files.d.ts",
+    "next-env.d.ts",
+    "types/index.d.ts",
+    "./**/*.js",
+    "./**/*.ts",
+    "./**/*.tsx",
+    "vitest.config.mts",
+    "vitest/globals",
+    "@testing-library/jest-dom"
+  ],
   "exclude": ["node_modules"]
 }

types/files.d.ts

@@ -0,0 +1,10 @@
+declare module '*.svg' {
+  import { SVGProps, ReactSVGElement } from 'react';
+
+  export const ReactComponent: (props?: SVGProps<SVGElement>) => ReactSVGElement;
+
+  const filePath: string;
+
+  // eslint-disable-next-line import/no-default-export
+  export default filePath;
+}

vitest.config.mts

@@ -5,6 +5,7 @@ import tsconfigPaths from 'vite-tsconfig-paths';
 import react from '@vitejs/plugin-react';
 import magicalSvg from 'vite-plugin-magical-svg';
 
+// eslint-disable-next-line import/no-default-export
 export default defineConfig({
   plugins: [tsconfigPaths(), magicalSvg({ target: 'react' }), react()],
   // use tsx loader for js using jsx
@@ -30,9 +31,9 @@ export default defineConfig({
     coverage: {
       reportsDirectory: './vitest-coverage',
       include: [
-        '@/common/**/*.{js,ts,tsx}',
-        '@/components/**/*.{js,ts,tsx}',
-        '@/decorators/**/*.{js,ts,tsx}',
+        'common/**/*.{js,ts,tsx}',
+        'components/**/*.{js,ts,tsx}',
+        'decorators/**/*.{js,ts,tsx}',
       ],
       exclude: [
         // Irrelevant configs and local-only scripts
@@ -45,8 +46,8 @@ export default defineConfig({
         '{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*',
         'vitest.{workspace,projects}.[jt]s?(on)',
         '.{eslint,mocha,prettier}rc.{?(c|m)js,yml}',
-        '@/scripts/**',
-        '@/test-utils/**',
+        'scripts/**',
+        'test-utils/**',
 
         // Folders covered by integration tests
         'node_modules/**',