Updated chartjs and added storybooks for popup components

.storybook/main.ts

@@ -6,6 +6,7 @@ const config: StorybookConfig = {
     '@storybook/addon-webpack5-compiler-swc',
     '@storybook/addon-essentials',
     '@storybook/addon-styling-webpack',
+    '@storybook/addon-themes'
   ],
   framework: {
     name: '@storybook/react-webpack5',

.storybook/preview.ts

@@ -2,6 +2,8 @@ import type { Preview } from '@storybook/react';
 
 import '!style-loader!css-loader!postcss-loader!../src/tailwind.css';
 
+import { withThemeByClassName } from "@storybook/addon-themes";
+
 const preview: Preview = {
   parameters: {
     controls: {
@@ -11,6 +13,15 @@ const preview: Preview = {
       },
     },
   },
+
+  decorators: [withThemeByClassName({
+      themes: {
+          // nameOfTheme: 'classNameForTheme',
+          light: '',
+          dark: 'dark',
+      },
+      defaultTheme: 'light',
+  })]
 };
 
 export default preview;

eslint.config.mjs

@@ -55,8 +55,7 @@ export default [
       'react/prop-types': 'off',
       'react/display-name': 'off',
       'no-unused-vars': 'off',
-      '@typescript-eslint/no-explicit-any': 'off',
-
+      '@typescript-eslint/no-explicit-any': ['warn', { ignoreRestArgs: true }],
       '@typescript-eslint/no-unused-vars': [
         'error',
         {

package.json

@@ -52,6 +52,7 @@
     "@storybook/addon-interactions": "^8.4.0",
     "@storybook/addon-onboarding": "^8.4.0",
     "@storybook/addon-styling-webpack": "^1.0.1",
+    "@storybook/addon-themes": "^8.4.1",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
     "@storybook/blocks": "^8.4.0",
     "@storybook/react": "^8.4.0",
@@ -95,13 +96,13 @@
     "webpack-cli": "5.1.4"
   },
   "dependencies": {
-    "chart.js": "3.2.1",
+    "chart.js": "^4.4.6",
     "idb": "6.1.2",
     "react": "17.0.2",
-    "react-chartjs-2": "3.0.3",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "17.0.2",
     "react-github-contribution-calendar": "2.2.0",
-    "react-tooltip": "4.2.21",
+    "react-tooltip": "5.28.0",
     "tailwind-merge": "2.5.4",
     "throttle-debounce": "5.0.2"
   },

src/background/controller/index.ts

@@ -1,6 +1,7 @@
 import { ActiveTabState, TimelineRecord } from '@shared/db/types';
 import { getSettings } from '@shared/preferences';
 import { setActiveTabRecord } from '@shared/tables/state';
+import { HostName, IsoDate } from '@shared/types';
 import { getIsoDate, getMinutesInMs } from '@shared/utils/date';
 import { isInvalidUrl } from '@shared/utils/url';
 
@@ -96,11 +97,13 @@ async function commitTabActivity(currentTimelineRecord: TimelineRecord | null) {
   // previous day's total time as well.
   // Dates in the array should be different in this case.
   const dates = Array.from(
-    new Set([currentIsoDate, currentTimelineRecord.date]),
+    new Set([currentIsoDate, currentTimelineRecord.date as IsoDate]),
   );
 
   await Promise.all(
-    dates.map((date) => updateTotalTime(date, currentTimelineRecord.hostname)),
+    dates.map((date) =>
+      updateTotalTime(date, currentTimelineRecord.hostname as HostName),
+    ),
   );
 
   await setActiveTabRecord(null);

src/background/controller/overall.ts

@@ -1,9 +1,10 @@
 import { setTotalDailyHostTime } from '@shared/db/sync-storage';
 import { getActivityTimeline } from '@shared/tables/activity-timeline';
+import { HostName, IsoDate } from '@shared/types';
 
 export async function updateTotalTime(
-  currentIsoDate: string,
-  hostname: string,
+  currentIsoDate: IsoDate,
+  hostname: HostName,
 ) {
   const timeline = await getActivityTimeline(currentIsoDate);
   const timeOnRecord = timeline

src/popup/App.css

@@ -24,11 +24,6 @@ body {
   filter: invert(1);
 }
 
-.calendar svg rect {
-  cursor: pointer;
-  rx: 3;
-}
-
 i.fi::before {
   line-height: inherit;
 }