refactor: create import alias for .storybook directory

Author: TylerAPfledderer

.eslintrc.json

@@ -33,8 +33,8 @@
           ["^@/data"],
           // From the `constants` directory.
           ["^@/lib/constants"],
-          // From the `.storybook/utils` file
-          ["^@/storybook-utils"],
+          // `.storybook` directory and utils files`
+          ["^@/storybook","^@/storybook-utils"],
           // Parent imports. Put `..` last.
           ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
           // Other relative imports. Put same-folder imports and `.` last.

.storybook/main.ts

@@ -1,3 +1,5 @@
+import path from "path"
+
 import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin"
 import type { StorybookConfig } from "@storybook/nextjs"
 
@@ -51,6 +53,11 @@ const config: StorybookConfig = {
           extensions: config.resolve.extensions,
         }),
       ]
+
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        "@/storybook/*": path.resolve(__dirname, "./.storybook/"),
+      }
     }
 
     // This modifies the existing image rule to exclude .svg files

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

@@ -1,9 +1,8 @@
 import { Meta, StoryObj } from "@storybook/react"
 
+import { langViewportModes } from "@/storybook/modes"
 import { getTranslation } from "@/storybook-utils"
 
-import { langViewportModes } from "../../../../.storybook/modes"
-
 import ContentHeroComponent, { ContentHeroProps } from "."
 
 const meta = {

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

@@ -1,9 +1,11 @@
 import { Meta, StoryObj } from "@storybook/react"
 
-import { langViewportModes } from "../../../../.storybook/modes"
+import { langViewportModes } from "@/storybook/modes"
 
 import HomeHeroComponent from "."
 
+import homeHeroImg from "@/public/images/home/hero.png"
+
 const meta = {
   title: "Organisms / Layouts / Hero",
   component: HomeHeroComponent,
@@ -26,8 +28,6 @@ const meta = {
 
 export default meta
 
-import homeHeroImg from "@/public/images/home/hero.png"
-
 export const HomeHero: StoryObj<typeof meta> = {
   args: {
     heroImg: homeHeroImg,

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

@@ -3,10 +3,9 @@ import { Meta, StoryObj } from "@storybook/react"
 
 import { screens } from "@/lib/utils/screen"
 
+import { langViewportModes } from "@/storybook/modes"
 import { getTranslation } from "@/storybook-utils"
 
-import { langViewportModes } from "../../../../.storybook/modes"
-
 import HubHeroComponent, { type HubHeroProps } from "./"
 
 import learnHubHeroImg from "@/public/images/heroes/learn-hub-hero.png"

src/components/Hero/MdxHero/MdxHero.stories.tsx

@@ -5,7 +5,7 @@ import { HStack } from "@/components/ui/flex"
 
 import { screens } from "@/lib/utils/screen"
 
-import { langViewportModes } from "../../../../.storybook/modes"
+import { langViewportModes } from "@/storybook/modes"
 
 import MdxHeroComponent from "./"
 

src/components/MdComponents/MdComponents.stories.tsx

@@ -1,7 +1,7 @@
 import pickBy from "lodash/pickBy"
 import type { Meta, StoryObj } from "@storybook/react/*"
 
-import { viewportModes } from "../../../.storybook/modes"
+import { viewportModes } from "@/storybook/modes"
 
 import MdComponentSet from "."
 

src/components/MergeInfographic/MergeInfographic.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react"
 
-import { langViewportModes } from "../../../.storybook/modes"
+import { langViewportModes } from "@/storybook/modes"
 
 import MergeInfographicComponent from "."
 

src/components/Simulator/__stories__/Explanation.stories.tsx

@@ -2,7 +2,8 @@ import pickBy from "lodash/pickBy"
 import type { Meta, StoryObj } from "@storybook/react"
 import { fn } from "@storybook/test"
 
-import { viewportModes } from "../../../../.storybook/modes"
+import { viewportModes } from "@/storybook/modes"
+
 import { Explanation as ExplanationComponent } from "../Explanation"
 import { SendReceiveIcon } from "../icons"
 

src/layouts/stories/BaseLayout.stories.tsx

@@ -2,7 +2,8 @@ import type { Meta, StoryObj } from "@storybook/react"
 
 import { Center } from "@/components/ui/flex"
 
-import { langViewportModes } from "../../../.storybook/modes"
+import { langViewportModes } from "@/storybook/modes"
+
 import { BaseLayout as BaseLayoutComponent } from "../BaseLayout"
 
 const meta = {