fix(.storybook): fix alias paths with tsconfig plugin

Author: TylerAPfledderer

.storybook/main.ts

@@ -1,8 +1,8 @@
-import path from "path"
-
 import type { StorybookConfig } from "@storybook/nextjs"
 import { propNames } from "@chakra-ui/react"
 
+import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin"
+
 /**
  * Note regarding package.json settings related to Storybook:
  *
@@ -37,11 +37,15 @@ const config: StorybookConfig = {
       disable: true,
     },
   },
-  webpackFinal: async (config: any) => {
-    // Add path aliases
-    config.resolve.alias["@"] = path.resolve(__dirname, "../src")
-    config.resolve.alias["@/public"] = path.resolve(__dirname, "../public")
-
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.plugins = [
+        ...(config.resolve.plugins || []),
+        new TsconfigPathsPlugin({
+          extensions: config.resolve.extensions,
+        }),
+      ]
+    }
     return config
   },
   typescript: {

package.json

@@ -91,11 +91,12 @@
     "storybook": "7.6.6",
     "storybook-react-i18next": "^2.0.9",
     "ts-node": "^10.9.1",
+    "tsconfig-paths-webpack-plugin": "4.1.0",
     "typescript": "^5.4.2",
     "unified": "^10.0.0",
     "unist-util-visit": "^5.0.0"
   },
   "resolutions": {
     "jackspeak": "2.1.1"
   }
-}
+}

src/components/Hero/ContentHero/ContentHero.stories.tsx

@@ -3,9 +3,9 @@ import { Meta, StoryObj } from "@storybook/react"
 
 import ContentHeroComponent, { ContentHeroProps } from "."
 
-type ContentHeroType = typeof ContentHeroComponent
+import contentHeroImg from "@/public/mainnet.png"
 
-import contentHeroImg from "../../../../public/mainnet.png"
+type ContentHeroType = typeof ContentHeroComponent
 
 const meta = {
   title: "Organisms / Layouts / Hero",

src/components/Hero/HomeHero/HomeHero.stories.tsx

@@ -22,7 +22,7 @@ const meta = {
 
 export default meta
 
-import homeHeroImg from "../../../../public/home/hero.png"
+import homeHeroImg from "@/public/home/hero.png"
 
 export const HomeHero: StoryObj<typeof meta> = {
   args: {

src/components/Hero/HubHero/HubHero.stories.tsx

@@ -3,8 +3,12 @@ import { useTranslation } from "next-i18next"
 import { Box } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
+import { CommonHeroProps } from "@/lib/types"
+
 import HubHeroComponent from "./"
 
+import learnHubHeroImg from "@/public/heroes/learn-hub-hero.png"
+
 type HubHeroType = typeof HubHeroComponent
 
 const meta = {
@@ -24,10 +28,6 @@ const meta = {
 
 export default meta
 
-import { CommonHeroProps } from "@/lib/types"
-
-import learnHubHeroImg from "../../../../public/heroes/learn-hub-hero.png"
-
 export const HubHero: StoryObj<typeof meta> = {
   args: {
     title: "common:learn-hub",

yarn.lock

@@ -13108,7 +13108,7 @@ ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
-tsconfig-paths-webpack-plugin@^4.0.1:
+tsconfig-paths-webpack-plugin@^4.0.1, tsconfig-paths-webpack-plugin@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-4.1.0.tgz#3c6892c5e7319c146eee1e7302ed9e6f2be4f763"
   integrity sha512-xWFISjviPydmtmgeUAuXp4N1fky+VCtfhOkDUFIv5ea7p4wuTomI4QTrXvFBX2S4jZsmyTSrStQl+E+4w+RzxA==