.eslintignore

@@ -0,0 +1 @@
+tailwind.config.ts

.eslintrc.json

@@ -15,7 +15,7 @@
       "rules": {
         "react/jsx-props-no-spreading": "off"
       }      
-    },
+    }
   ],
     "settings": {
     "react": {
@@ -58,6 +58,17 @@
     "no-promise-executor-return": "off",
     "@typescript-eslint/no-shadow": "off",
     "react/require-default-props": "off",
+    "import/order": [
+      "error",
+      {
+        "pathGroups": [
+          {
+            "pattern": "@/**",
+            "group": "external"
+          }
+        ]
+      } 
+    ],
     "no-shadow": "off",
     "prettier/prettier": [
       "warn",

.storybook/preview.tsx

@@ -87,6 +87,9 @@ const preview = {
     light: { ...themes.normal, appBg: 'red' },
   },
   parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,

src/app/components/button/stories/Button.stories.tsx

@@ -1,7 +1,7 @@
-import dashboardAppModule from "@/app/[lang]/dashboard/module/dashboard-app-module";
 import CreateRandomInvoiceButtonVM from "@/app/[lang]/dashboard/vm/create-random-invoice-button-vm";
 import Button from "@/app/components/button/button";
 import { DiContext, useDI } from "@/bootstrap/di/di-context";
+import mockedModuleDi from "@/bootstrap/di/mocked-module-di";
 import Story from "@/bootstrap/helpers/view/storybook-base-template-type";
 import getArgVM from "@/bootstrap/helpers/view/storybook-with-arg-vm";
 import createInvoiceUsecase from "@/feature/core/invoice/domain/usecase/create-invoice-usecase";
@@ -28,23 +28,38 @@ export const Primary: Story = {
     "vm.props.isDisable": false,
   },
   render: (_props, globalData) => {
-    const vm = getArgVM(globalData.parsedProps.vm)// You can use parsed props to access your vm properties.
-    return <Button vm={vm} memoizedByVM={false} /> 
-  }
+    const vm = getArgVM(globalData.parsedProps.vm); // You can use parsed props to access your vm properties.
+    return <Button vm={vm} memoizedByVM={false} />;
+  },
 };
 
-// export const WithVM: Story = {
-//   decorators: [
-//     (Story) => {
-//       return <Story />
-//     }
-//   ],
-//   render: () => {
-//     const Child = () => {
-//       const di = useDI();
-//       const vm = useRef(di.resolve(CreateRandomInvoiceButtonVM));
-//       return <Button vm={vm.current} memoizedByVM={false} />
-//     }
-//     return (<DiContext.Provider value={dashboardAppModule()}> <Child /> </ DiContext.Provider>)
-//   }
-// }
+export const WithVM: Story = {
+  decorators: [
+    (Story) => {
+      const di = mockedModuleDi([
+        {
+          token: CreateRandomInvoiceButtonVM,
+          provider: CreateRandomInvoiceButtonVM,
+        },
+        {
+          token: createInvoiceUsecase.name,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any, no-console
+          provider: (args: any) => console.log("clicked", args),
+        },
+      ]);
+      return <Story di={di} />;
+    },
+  ],
+  render: (_, globalProps) => {
+    function Child() {
+      const di = useDI();
+      const vm = useRef(di.resolve(CreateRandomInvoiceButtonVM));
+      return <Button vm={vm.current} memoizedByVM={false} />;
+    }
+    return (
+      <DiContext.Provider value={globalProps.di}>
+        <Child />
+      </DiContext.Provider>
+    );
+  },
+};

src/bootstrap/di/mocked-module-di.ts

@@ -0,0 +1,33 @@
+import { container, DependencyContainer } from "tsyringe";
+import { InjectionToken } from "tsyringe/dist/typings/providers";
+import constructor from "tsyringe/dist/typings/types/constructor";
+import { isClass } from "../helpers/global-helpers";
+
+/**
+ * Provides mocked di for test cases and using instead of real di
+ * @param providers List of providers
+ * @returns Mocked di with registered providers
+ */
+const mockedModuleDi = (
+  providers: {
+    token: InjectionToken<unknown>;
+    provider: unknown | constructor<unknown>;
+  }[],
+): DependencyContainer => {
+  const di = container.createChildContainer();
+
+  providers.forEach((provider) => {
+    if (isClass(provider.provider)) {
+      di.register(provider.token, provider.provider);
+      return;
+    }
+
+    di.register(provider.token, {
+      useValue: provider.provider,
+    });
+  });
+
+  return di;
+};
+
+export default mockedModuleDi;

src/bootstrap/helpers/global-helpers.ts

@@ -1 +1,8 @@
+import { constructor } from "tsyringe/dist/typings/types";
+
 export const isServer = typeof window === "undefined";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isClass(fn: any): fn is constructor<unknown> {
+  return typeof fn === "function" && /^(class|function [A-Z])/.test(fn);
+}

src/bootstrap/helpers/hooks/use-throttle.ts

@@ -11,11 +11,11 @@ export default function useThrottle<T extends () => unknown>(
   callback: T,
   time: number = 2000,
 ) {
-  const lastRun = useRef(Date.now());
+  const lastRun = useRef<number>();
 
   // eslint-disable-next-line func-names
   return function () {
-    if (Date.now() - lastRun.current <= time) return;
+    if (lastRun.current && Date.now() - lastRun.current <= time) return;
     lastRun.current = Date.now();
     callback();
   };

tailwind.config.ts

@@ -2,62 +2,62 @@
 import type { Config } from "tailwindcss";
 
 const config: Config = {
-	darkMode: ["class"],
-	content: [
+  darkMode: ["class"],
+  content: [
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
-  	extend: {
-  		colors: {
-  			background: 'hsl(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			},
-  			popover: {
-  				DEFAULT: 'hsl(var(--popover))',
-  				foreground: 'hsl(var(--popover-foreground))'
-  			},
-  			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
-  			},
-  			secondary: {
-  				DEFAULT: 'hsl(var(--secondary))',
-  				foreground: 'hsl(var(--secondary-foreground))'
-  			},
-  			muted: {
-  				DEFAULT: 'hsl(var(--muted))',
-  				foreground: 'hsl(var(--muted-foreground))'
-  			},
-  			accent: {
-  				DEFAULT: 'hsl(var(--accent))',
-  				foreground: 'hsl(var(--accent-foreground))'
-  			},
-  			destructive: {
-  				DEFAULT: 'hsl(var(--destructive))',
-  				foreground: 'hsl(var(--destructive-foreground))'
-  			},
-  			border: 'hsl(var(--border))',
-  			input: 'hsl(var(--input))',
-  			ring: 'hsl(var(--ring))',
-  			chart: {
-  				'1': 'hsl(var(--chart-1))',
-  				'2': 'hsl(var(--chart-2))',
-  				'3': 'hsl(var(--chart-3))',
-  				'4': 'hsl(var(--chart-4))',
-  				'5': 'hsl(var(--chart-5))'
-  			}
-  		},
-  		borderRadius: {
-  			lg: 'var(--radius)',
-  			md: 'calc(var(--radius) - 2px)',
-  			sm: 'calc(var(--radius) - 4px)'
-  		}
-  	}
+    extend: {
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        chart: {
+          "1": "hsl(var(--chart-1))",
+          "2": "hsl(var(--chart-2))",
+          "3": "hsl(var(--chart-3))",
+          "4": "hsl(var(--chart-4))",
+          "5": "hsl(var(--chart-5))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
   },
   plugins: [require("tailwindcss-animate")],
 };