.eslintignore

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

.eslintrc.json

@@ -15,7 +15,7 @@
       "rules": {
         "react/jsx-props-no-spreading": "off"
       }      
-    }
+    },
   ],
     "settings": {
     "react": {
@@ -58,17 +58,6 @@
     "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,9 +87,6 @@ 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,19 +1,21 @@
+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";
 import type { Meta } from "@storybook/react";
 import { useRef } from "react";
 
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta = {
   title: "general/Button",
 };
 
 export default meta;
 
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary: Story = {
   argTypes: {
     "vm.props.isDisable": {
@@ -28,38 +30,23 @@ 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.
+    const vm = getArgVM(globalData.parsedProps.vm)// You can use parsed props to access your vm properties.
-    return <Button vm={vm} memoizedByVM={false} />;
+    return <Button vm={vm} memoizedByVM={false} /> 
-  },
+  }
 };
 
 export const WithVM: Story = {
   decorators: [
     (Story) => {
-      const di = mockedModuleDi([
+      return <Story />
-        {
+    }
-          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) => {
+  render: () => {
-    function Child() {
+    const Child = () => {
       const di = useDI();
       const vm = useRef(di.resolve(CreateRandomInvoiceButtonVM));
-      return <Button vm={vm.current} memoizedByVM={false} />;
+      return <Button vm={vm.current} memoizedByVM={false} />
     }
-    return (
+    return (<DiContext.Provider value={dashboardAppModule()}> <Child /> </ DiContext.Provider>)
-      <DiContext.Provider value={globalProps.di}>
+  }
-        <Child />
+}
-      </DiContext.Provider>
-    );
-  },
-};

src/app/globals.css

@@ -34,7 +34,7 @@ body {
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
   }
-  :root[class~="dark"] {
+  .dark {
     --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
     --card: 240 10% 3.9%;

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

@@ -1,33 +0,0 @@
-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,8 +1 @@
-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<number>();
+  const lastRun = useRef(Date.now());
 
   // eslint-disable-next-line func-names
   return function () {
-    if (lastRun.current && Date.now() - lastRun.current <= time) return;
+    if (Date.now() - lastRun.current <= time) return;
     lastRun.current = Date.now();
     callback();
   };

tailwind.config.ts

@@ -11,53 +11,53 @@ const config: Config = {
   theme: {
   	extend: {
   		colors: {
-        background: "hsl(var(--background))",
+  			background: 'hsl(var(--background))',
-        foreground: "hsl(var(--foreground))",
+  			foreground: 'hsl(var(--foreground))',
   			card: {
-          DEFAULT: "hsl(var(--card))",
+  				DEFAULT: 'hsl(var(--card))',
-          foreground: "hsl(var(--card-foreground))",
+  				foreground: 'hsl(var(--card-foreground))'
   			},
   			popover: {
-          DEFAULT: "hsl(var(--popover))",
+  				DEFAULT: 'hsl(var(--popover))',
-          foreground: "hsl(var(--popover-foreground))",
+  				foreground: 'hsl(var(--popover-foreground))'
   			},
   			primary: {
-          DEFAULT: "hsl(var(--primary))",
+  				DEFAULT: 'hsl(var(--primary))',
-          foreground: "hsl(var(--primary-foreground))",
+  				foreground: 'hsl(var(--primary-foreground))'
   			},
   			secondary: {
-          DEFAULT: "hsl(var(--secondary))",
+  				DEFAULT: 'hsl(var(--secondary))',
-          foreground: "hsl(var(--secondary-foreground))",
+  				foreground: 'hsl(var(--secondary-foreground))'
   			},
   			muted: {
-          DEFAULT: "hsl(var(--muted))",
+  				DEFAULT: 'hsl(var(--muted))',
-          foreground: "hsl(var(--muted-foreground))",
+  				foreground: 'hsl(var(--muted-foreground))'
   			},
   			accent: {
-          DEFAULT: "hsl(var(--accent))",
+  				DEFAULT: 'hsl(var(--accent))',
-          foreground: "hsl(var(--accent-foreground))",
+  				foreground: 'hsl(var(--accent-foreground))'
   			},
   			destructive: {
-          DEFAULT: "hsl(var(--destructive))",
+  				DEFAULT: 'hsl(var(--destructive))',
-          foreground: "hsl(var(--destructive-foreground))",
+  				foreground: 'hsl(var(--destructive-foreground))'
   			},
-        border: "hsl(var(--border))",
+  			border: 'hsl(var(--border))',
-        input: "hsl(var(--input))",
+  			input: 'hsl(var(--input))',
-        ring: "hsl(var(--ring))",
+  			ring: 'hsl(var(--ring))',
   			chart: {
-          "1": "hsl(var(--chart-1))",
+  				'1': 'hsl(var(--chart-1))',
-          "2": "hsl(var(--chart-2))",
+  				'2': 'hsl(var(--chart-2))',
-          "3": "hsl(var(--chart-3))",
+  				'3': 'hsl(var(--chart-3))',
-          "4": "hsl(var(--chart-4))",
+  				'4': 'hsl(var(--chart-4))',
-          "5": "hsl(var(--chart-5))",
+  				'5': 'hsl(var(--chart-5))'
-        },
+  			}
   		},
   		borderRadius: {
-        lg: "var(--radius)",
+  			lg: 'var(--radius)',
-        md: "calc(var(--radius) - 2px)",
+  			md: 'calc(var(--radius) - 2px)',
-        sm: "calc(var(--radius) - 4px)",
+  			sm: 'calc(var(--radius) - 4px)'
-      },
+  		}
-    },
+  	}
   },
   plugins: [require("tailwindcss-animate")],
 };