[Fix] Circular dependency

Author: onesine

package.json

@@ -40,10 +40,11 @@
         "react": "^17.0.2 || ^18.2.0"
     },
     "devDependencies": {
-        "@rollup/plugin-commonjs": "^22.0.1",
-        "@rollup/plugin-node-resolve": "^13.3.0",
-        "@rollup/plugin-typescript": "^9.0.2",
+        "@rollup/plugin-commonjs": "^24.0.1",
+        "@rollup/plugin-node-resolve": "^15.0.1",
+        "@rollup/plugin-typescript": "^11.0.0",
         "@tailwindcss/forms": "^0.5.3",
+        "@types/node": "18.14.5",
         "@types/react": "^18.0.21",
         "@typescript-eslint/eslint-plugin": "^5.45.0",
         "@typescript-eslint/parser": "^5.45.0",

src/components/Shortcuts.tsx

@@ -1,7 +1,8 @@
 import dayjs from "dayjs";
 import React, { useCallback, useContext, useMemo } from "react";
 
-import { DEFAULT_SHORTCUTS, TEXT_COLOR } from "../constants";
+import { TEXT_COLOR } from "../constants";
+import DEFAULT_SHORTCUTS from "../constants/shortcuts";
 import DatepickerContext from "../contexts/DatepickerContext";
 import { Period, ShortcutsItem } from "../types";
 

src/constants/index.ts

@@ -1,9 +1,3 @@
-import dayjs from "dayjs";
-
-import { formatDate, previousMonth } from "../helpers";
-
-import { ShortcutsItem } from "types";
-
 export const COLORS = [
     "blue",
     "orange",
@@ -283,54 +277,3 @@ export const BUTTON_COLOR = {
         rose: "focus:ring-rose-500/50 focus:bg-rose-100/50"
     }
 };
-
-export const DEFAULT_SHORTCUTS: {
-    [key in string]: ShortcutsItem | ShortcutsItem[];
-} = {
-    today: {
-        text: "Today",
-        period: {
-            start: formatDate(dayjs()),
-            end: formatDate(dayjs())
-        }
-    },
-    yesterday: {
-        text: "Yesterday",
-        period: {
-            start: formatDate(dayjs().subtract(1, "d")),
-            end: formatDate(dayjs().subtract(1, "d"))
-        }
-    },
-    past: [
-        {
-            daysNumber: 7,
-            text: "Last 7 days",
-            period: {
-                start: formatDate(dayjs().subtract(7, "d")),
-                end: formatDate(dayjs())
-            }
-        },
-        {
-            daysNumber: 30,
-            text: "Last 30 days",
-            period: {
-                start: formatDate(dayjs().subtract(30, "d")),
-                end: formatDate(dayjs())
-            }
-        }
-    ],
-    currentMonth: {
-        text: "This month",
-        period: {
-            start: formatDate(dayjs().startOf("month")),
-            end: formatDate(dayjs().endOf("month"))
-        }
-    },
-    pastMonth: {
-        text: "Last month",
-        period: {
-            start: formatDate(previousMonth(dayjs()).startOf("month")),
-            end: formatDate(previousMonth(dayjs()).endOf("month"))
-        }
-    }
-};

src/constants/shortcuts.ts

@@ -0,0 +1,57 @@
+import dayjs from "dayjs";
+
+import { formatDate, previousMonth } from "../helpers";
+import { ShortcutsItem } from "../types";
+
+const DEFAULT_SHORTCUTS: {
+    [key in string]: ShortcutsItem | ShortcutsItem[];
+} = {
+    today: {
+        text: "Today",
+        period: {
+            start: formatDate(dayjs()),
+            end: formatDate(dayjs())
+        }
+    },
+    yesterday: {
+        text: "Yesterday",
+        period: {
+            start: formatDate(dayjs().subtract(1, "d")),
+            end: formatDate(dayjs().subtract(1, "d"))
+        }
+    },
+    past: [
+        {
+            daysNumber: 7,
+            text: "Last 7 days",
+            period: {
+                start: formatDate(dayjs().subtract(7, "d")),
+                end: formatDate(dayjs())
+            }
+        },
+        {
+            daysNumber: 30,
+            text: "Last 30 days",
+            period: {
+                start: formatDate(dayjs().subtract(30, "d")),
+                end: formatDate(dayjs())
+            }
+        }
+    ],
+    currentMonth: {
+        text: "This month",
+        period: {
+            start: formatDate(dayjs().startOf("month")),
+            end: formatDate(dayjs().endOf("month"))
+        }
+    },
+    pastMonth: {
+        text: "Last month",
+        period: {
+            start: formatDate(previousMonth(dayjs()).startOf("month")),
+            end: formatDate(previousMonth(dayjs()).endOf("month"))
+        }
+    }
+};
+
+export default DEFAULT_SHORTCUTS;