Skip to content

Commit 6a588cd

Browse files
authored
Merge pull request #12943 from TylerAPfledderer/fix/storybook-path-aliases
fix(storybook): fix alias paths with tsconfig plugin
2 parents d0cbb0a + 050d81e commit 6a588cd

File tree

6 files changed

+21
-16
lines changed

6 files changed

+21
-16
lines changed

.storybook/main.ts

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import path from "path"
2-
31
import type { StorybookConfig } from "@storybook/nextjs"
42
import { propNames } from "@chakra-ui/react"
53

4+
import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin"
5+
66
/**
77
* Note regarding package.json settings related to Storybook:
88
*
@@ -36,11 +36,15 @@ const config: StorybookConfig = {
3636
disable: true,
3737
},
3838
},
39-
webpackFinal: async (config: any) => {
40-
// Add path aliases
41-
config.resolve.alias["@"] = path.resolve(__dirname, "../src")
42-
config.resolve.alias["@/public"] = path.resolve(__dirname, "../public")
43-
39+
webpackFinal: async (config) => {
40+
if (config.resolve) {
41+
config.resolve.plugins = [
42+
...(config.resolve.plugins || []),
43+
new TsconfigPathsPlugin({
44+
extensions: config.resolve.extensions,
45+
}),
46+
]
47+
}
4448
return config
4549
},
4650
typescript: {

package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,11 +90,12 @@
9090
"storybook": "7.6.6",
9191
"storybook-react-i18next": "^2.0.9",
9292
"ts-node": "^10.9.1",
93+
"tsconfig-paths-webpack-plugin": "4.1.0",
9394
"typescript": "^5.4.2",
9495
"unified": "^10.0.0",
9596
"unist-util-visit": "^5.0.0"
9697
},
9798
"resolutions": {
9899
"jackspeak": "2.1.1"
99100
}
100-
}
101+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { Meta, StoryObj } from "@storybook/react"
33

44
import ContentHeroComponent, { ContentHeroProps } from "."
55

6-
type ContentHeroType = typeof ContentHeroComponent
6+
import contentHeroImg from "@/public/mainnet.png"
77

8-
import contentHeroImg from "../../../../public/mainnet.png"
8+
type ContentHeroType = typeof ContentHeroComponent
99

1010
const meta = {
1111
title: "Organisms / Layouts / Hero",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const meta = {
2222

2323
export default meta
2424

25-
import homeHeroImg from "../../../../public/home/hero.png"
25+
import homeHeroImg from "@/public/home/hero.png"
2626

2727
export const HomeHero: StoryObj<typeof meta> = {
2828
args: {

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,12 @@ import { useTranslation } from "next-i18next"
33
import { Box } from "@chakra-ui/react"
44
import { Meta, StoryObj } from "@storybook/react"
55

6+
import { CommonHeroProps } from "@/lib/types"
7+
68
import HubHeroComponent from "./"
79

10+
import learnHubHeroImg from "@/public/heroes/learn-hub-hero.png"
11+
812
type HubHeroType = typeof HubHeroComponent
913

1014
const meta = {
@@ -24,10 +28,6 @@ const meta = {
2428

2529
export default meta
2630

27-
import { CommonHeroProps } from "@/lib/types"
28-
29-
import learnHubHeroImg from "../../../../public/heroes/learn-hub-hero.png"
30-
3131
export const HubHero: StoryObj<typeof meta> = {
3232
args: {
3333
title: "common:learn-hub",

yarn.lock

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13110,7 +13110,7 @@ ts-pnp@^1.1.6:
1311013110
resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
1311113111
integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
1311213112

13113-
tsconfig-paths-webpack-plugin@^4.0.1:
13113+
tsconfig-paths-webpack-plugin@^4.0.1, tsconfig-paths-webpack-plugin@^4.1.0:
1311413114
version "4.1.0"
1311513115
resolved "https://registry.yarnpkg.com/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-4.1.0.tgz#3c6892c5e7319c146eee1e7302ed9e6f2be4f763"
1311613116
integrity sha512-xWFISjviPydmtmgeUAuXp4N1fky+VCtfhOkDUFIv5ea7p4wuTomI4QTrXvFBX2S4jZsmyTSrStQl+E+4w+RzxA==

0 commit comments

Comments
 (0)