chore: follow-up fixes for storybook vite migration (#31545)

web/app/components/base/icons/icon-gallery.stories.tsx

@@ -1,9 +1,9 @@
+/// <reference types="vite/client" />
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import * as React from 'react'
 
-declare const require: any
-
 type IconComponent = React.ComponentType<Record<string, unknown>>
+type IconModule = { default: IconComponent }
 
 type IconEntry = {
   name: string
@@ -12,18 +12,16 @@ type IconEntry = {
   Component: IconComponent
 }
 
-const iconContext = require.context('./src', true, /\.tsx$/)
+const iconModules: Record<string, IconModule> = import.meta.glob('./src/**/*.tsx', { eager: true })
 
-const iconEntries: IconEntry[] = iconContext
+const iconEntries: IconEntry[] = Object.entries(iconModules)
-  .keys()
+  .filter(([key]) => !key.endsWith('.stories.tsx') && !key.endsWith('.spec.tsx'))
-  .filter((key: string) => !key.endsWith('.stories.tsx') && !key.endsWith('.spec.tsx'))
+  .map(([key, mod]) => {
-  .map((key: string) => {
+    const Component = mod.default
-    const mod = iconContext(key)
-    const Component = mod.default as IconComponent | undefined
     if (!Component)
       return null
 
-    const relativePath = key.replace(/^\.\//, '')
+    const relativePath = key.replace(/^\.\/src\//, '')
     const path = `app/components/base/icons/src/${relativePath}`
     const parts = relativePath.split('/')
     const fileName = parts.pop() || ''

web/eslint-suppressions.json

@@ -1085,11 +1085,6 @@
       "count": 2
     }
   },
-  "app/components/base/icons/icon-gallery.stories.tsx": {
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
   "app/components/base/icons/utils.ts": {
     "ts/no-explicit-any": {
       "count": 3

web/package.json

@@ -48,7 +48,7 @@
     "analyze-component": "node ./scripts/analyze-component.js",
     "refactor-component": "node ./scripts/refactor-component.js",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
+    "storybook:build": "storybook build",
     "preinstall": "npx only-allow pnpm",
     "analyze": "ANALYZE=true pnpm build",
     "knip": "knip"

web/vite.config.ts

@@ -0,0 +1,16 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+export default defineConfig({
+  plugins: [tsconfigPaths(), react()],
+  resolve: {
+    alias: {
+      '~@': __dirname,
+    },
+  },
+})

web/vitest.config.ts

@@ -1,9 +1,7 @@
-import react from '@vitejs/plugin-react'
+import { defineConfig, mergeConfig } from 'vitest/config'
-import tsconfigPaths from 'vite-tsconfig-paths'
+import viteConfig from './vite.config'
-import { defineConfig } from 'vitest/config'
 
-export default defineConfig({
+export default mergeConfig(viteConfig, defineConfig({
-  plugins: [tsconfigPaths(), react()],
   test: {
     environment: 'jsdom',
     globals: true,
@@ -13,4 +11,4 @@ export default defineConfig({
       reporter: ['text', 'json', 'json-summary'],
     },
   },
-})
+}))