refactor: Storybook Config to make absolute paths work

.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from "@storybook/react-webpack5";
+import path from "path";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -21,5 +22,17 @@ const config: StorybookConfig = {
     autodocs: true,
   },
   staticDirs: ["../public"],
+
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        theme: path.resolve(__dirname, "../src/theme"),
+        assets: path.resolve(__dirname, "../src/assets"),
+        app: path.resolve(__dirname, "../src/app"),
+      };
+    }
+    return config;
+  },
 };
 export default config;

src/components/Buttons/ZDSButton.stories.tsx

@@ -1,12 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
-<<<<<<< Updated upstream:src/components/Buttons/ZDSButton.stories.tsx
 import Button from "./ZDSButton";
-import { ReactComponent as GoogleIcon } from "../../assets/AIDA/vectors/HeaderSignInViewGoogle.svg";
-=======
-import Button from "./myButton";
-import { ReactComponent as GoogleIcon } from "assets/vectors/jsx/HeaderSignInViewGoogle.svg";
->>>>>>> Stashed changes:src/components/Buttons/myButton.stories.tsx
+import { ReactComponent as GoogleIcon } from "assets/AIDA/vectors/HeaderSignInViewGoogle.svg";
 import ExpandMore from "@mui/icons-material/ExpandMore";
 import ExpandLess from "@mui/icons-material/ExpandLess";
 import colors from "../../theme/colors";

src/components/Buttons/cta-common-btn/ZDSAidaCtaCommonBtn.stories.tsx

@@ -1,13 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-<<<<<<< Updated upstream:src/components/Buttons/cta-common-btn/ZDSAidaCtaCommonBtn.stories.tsx
-import { ExplorerLargeCtaIcon } from "../../../assets/AIDA/jsx/ExplorerLargeCtaIcon";
-
+import { ExplorerLargeCtaIcon } from "assets/AIDA/jsx/ExplorerLargeCtaIcon";
 import { ZDSAidaCtaCommonBtn } from ".";
-=======
-import { ExplorerLargeCtaIcon } from "assets/vectors/jsx/ExplorerLargeCtaIcon";
-import { CtaCommonBtn } from ".";
->>>>>>> Stashed changes:src/components/buttons/cta-common-btn/CtaCommonBtn.stories.tsx
 import { withRouter } from "storybook-addon-remix-react-router";
 
 const meta = {

src/components/Grids/ZDSGrantCard.stories.tsx

@@ -1,20 +1,10 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-<<<<<<< Updated upstream:src/components/Grids/ZDSGrantCard.stories.tsx
-// import { withRouter } from "storybook-addon-remix-react-router";
 import { ZDSGrantCard } from "./ZDSGrantCard";
 
 const meta = {
   title: "Example/Grid",
   component: ZDSGrantCard,
-  // decorators: [withRouter],
-=======
-import { GrantCard } from "./GrantCard";
-
-const meta = {
-  title: "Example/Grid",
-  component: GrantCard,
->>>>>>> Stashed changes:src/components/grids/GrantCard.stories.tsx
   parameters: {
     layout: "fullscreen",
   },

src/components/Grids/ZDSGrantCard.tsx

@@ -3,11 +3,7 @@ import Box from "@mui/material/Box";
 import Divider from "@mui/material/Divider";
 import Typography from "@mui/material/Typography";
 import LocationIcon from "@mui/icons-material/LocationOn";
-<<<<<<< Updated upstream:src/components/Grids/ZDSGrantCard.tsx
-import { GrantCardProps } from "./data"; // Ensure this path is correct and the file exists
-=======
 import { GrantCardProps } from "./data";
->>>>>>> Stashed changes:src/components/grids/GrantCard.tsx
 
 export const ZDSGrantCard: React.FC<GrantCardProps> = (
   props: GrantCardProps

src/components/Menu/MuiMenu/ZDSDropdown.stories.tsx

@@ -1,12 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-<<<<<<< Updated upstream:src/components/Menu/MuiMenu/ZDSDropdown.stories.tsx
 import MyDropdown from "./ZDSDropdown";
-import { colors } from "../../../theme";
-=======
-import MyDropdown from "./myDropdown";
 import { colors } from "theme";
->>>>>>> Stashed changes:src/components/Menu/MuiMenu/mydropdown.stories.tsx
 import IconButton from "@mui/material/IconButton";
 import MenuRounded from "@mui/icons-material/MenuRounded";
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";

src/components/SearchInput/ZDSSearchInput.stories.tsx

@@ -1,14 +1,8 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-<<<<<<< Updated upstream:src/components/SearchInput/ZDSSearchInput.stories.tsx
 import { ZDSSearchInput } from "./ZDSSearchInput";
 import { ReactComponent as ExplorerSearchIcon } from "../../assets/OpenAid/vectors/ExplorerSearchIcon.svg";
 import colors from "../../theme/colorsSeaerchInput";
-=======
-import { mySearchInput } from "./mySearchInput";
-import { ReactComponent as ExplorerSearchIcon } from "assets/vectors/ExplorerSearchIcon.svg";
-import colors from "theme/colorsSeaerchInput";
->>>>>>> Stashed changes:src/components/SearchInput/mySearchInput.stories.tsx
 import { Box } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import ClearIcon from "@mui/icons-material/Clear";

src/components/Tables/TabulatorTables/data.ts

@@ -1,20 +1,9 @@
-<<<<<<< Updated upstream
-import { appColors } from "./../../../app/theme/index";
-import { formatLocale } from "./../../../app/utils/formatLocale";
-import {
-  CellComponent,
-  ColumnDefinition,
-  TabulatorFull as Tabulator,
-} from "tabulator-tables";
-import { TableDataItem } from "./ZDSTabulatorTable";
-=======
 import { appColors } from "app/theme/index";
 import { formatLocale } from "app/utils/formatLocale";
 import { CellComponent } from "tabulator-tables";
 import { ColumnDefinition } from "tabulator-tables";
 import { TabulatorFull as Tabulator } from "tabulator-tables";
-import { TableDataItem } from "./myTabulatorTable";
->>>>>>> Stashed changes
+import { TableDataItem } from "./ZDSTabulatorTable";
 
 export const TABULATOR_BORDER_STYLES = {
   BLUE: "2px solid blue",

src/components/buttons/cta-common-btn/index.tsx

@@ -5,13 +5,8 @@ import { useNavigate } from "react-router-dom";
 import ButtonBase from "@mui/material/ButtonBase";
 import Typography from "@mui/material/Typography";
 import ArrowOutward from "@mui/icons-material/ArrowOutward";
-<<<<<<< Updated upstream
-import { CtaCommonBtnProps, ZDSAidaCtaCommonBtnVariantStyles } from "./data";
-import { Color } from "@mui/material";
-=======
-import { CtaCommonBtnVariantStyles } from "./data";
+import { ZDSAidaCtaCommonBtnVariantStyles } from "./data";
 import { CtaCommonBtnProps } from "./data";
->>>>>>> Stashed changes
 
 export const ZDSAidaCtaCommonBtn: React.FC<CtaCommonBtnProps> = (
   props: CtaCommonBtnProps

tsconfig.json

@@ -5,6 +5,9 @@
     "outDir": "dist",
     "declarationDir": "dist/types",
     "baseUrl": "./src",
+    "paths": {
+      "theme/*": ["theme/*"]
+    },
     "lib": [
       "dom",
       "dom.iterable",