Updated react to v18 (#37)

package.json

@@ -12,7 +12,6 @@
     "build": "npm test && npm run lint && npm run build:prod",
     "build:prod": "webpack --mode=production",
     "start": "webpack --mode=development --watch",
-    "prepare": "husky install",
     "release": "node ./tools/release.js",
     "release:patch": "npm version patch",
     "release:minor": "npm version minor",
@@ -55,20 +54,17 @@
     "@storybook/addon-themes": "^8.4.1",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
     "@storybook/blocks": "^8.4.0",
-    "@storybook/react": "^8.4.0",
+    "@storybook/react": "^8.4.2",
     "@storybook/react-webpack5": "^8.4.0",
     "@storybook/test": "^8.4.0",
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
     "@types/chart.js": "^2.9.41",
-    "@types/chrome": "^0.0.203",
+    "@types/chrome": "0.0.280",
     "@types/debounce": "^1.2.0",
     "@types/jest": "^29.2.3",
-    "@types/react": "^17.0.5",
-    "@types/react-datepicker": "^3.1.8",
-    "@types/react-dom": "^17.0.5",
-    "@types/react-measure": "^2.0.12",
-    "@types/throttle": "^1.0.0",
-    "@types/throttle-debounce": "^2.1.0",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
+    "@types/throttle-debounce": "5.0.2",
     "@typescript-eslint/eslint-plugin": "8.12.2",
     "@typescript-eslint/parser": "8.12.2",
     "autoprefixer": "10.4.20",
@@ -98,9 +94,9 @@
   "dependencies": {
     "chart.js": "^4.4.6",
     "idb": "6.1.2",
-    "react": "17.0.2",
+    "react": "18.3.1",
     "react-chartjs-2": "^5.2.0",
-    "react-dom": "17.0.2",
+    "react-dom": "18.3.1",
     "react-github-contribution-calendar": "2.2.0",
     "react-tooltip": "5.28.0",
     "tailwind-merge": "2.5.4",

src/popup.index.tsx

@@ -1,14 +1,18 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { WAKE_UP_BACKGROUND } from '@shared/messages';
+import { assert } from '@shared/utils/guards';
 
 import { PopupApp } from './popup/App';
 import { initTheme } from './popup/hooks/useTheme';
 
 initTheme();
 
-ReactDOM.render(<PopupApp />, document.querySelector('#app'));
+const appNode = document.querySelector('#app');
+assert(appNode, 'Could not find #app element');
+const root = createRoot(appNode);
+root.render(<PopupApp />);
 
 function tryWakeUpBackground() {
   chrome.runtime.sendMessage({ type: WAKE_UP_BACKGROUND }, (response) => {

src/popup/App.tsx

@@ -21,7 +21,7 @@ enum Pages {
 
 const PAGES_VALUES = Object.values(Pages);
 
-export const PopupApp: React.FC = () => {
+export const PopupApp = () => {
   const [activePage, setPage] = React.useState({
     tab: Pages.Overall,
     params: {} as Record<string, IsoDate>,

src/popup/components/WeekDatePicker.tsx

@@ -20,7 +20,7 @@ export const WeekDatePicker: React.FC<WeekDatePickerProps> = ({
   }, [sundayDate]);
 
   const handleChangeWeekButtonClick = React.useCallback(
-    (direction) => {
+    (direction: 1 | -1) => {
       const newWeekEndDate = new Date(sundayDate);
       newWeekEndDate.setDate(sundayDate.getDate() + direction * 7);
 

src/popup/hooks/PopupContext.tsx

@@ -28,7 +28,7 @@ const PopupContext = React.createContext<PopupContextType>(DEFAULT_CONTEXT);
 
 export const usePopupContext = () => React.useContext(PopupContext);
 
-export const PopupContextProvider: React.FC = ({ children }) => {
+export const PopupContextProvider = ({ children }: React.PropsWithChildren) => {
   const store = useTimeStore();
   const host = useActiveTabHostname();
   const [settings, updateSettings] = useSettings();

src/popup/pages/preferences/components/Backup.tsx

@@ -15,7 +15,7 @@ function getActivityTimelineTimeInSeconds(t: TimelineRecord) {
   );
 }
 
-export const BackupSetting: React.FC = () => {
+export const BackupSetting = () => {
   const { settings } = usePopupContext();
 
   const handleExportCSV = React.useCallback(async () => {

src/popup/pages/preferences/components/DisplayTimeOnBadgeSetting.tsx

@@ -5,7 +5,7 @@ import { i18n } from '@shared/services/i18n';
 
 import { usePopupContext } from '../../../hooks/PopupContext';
 
-export const DisplayTimeOnBadge: React.FC = () => {
+export const DisplayTimeOnBadge = () => {
   const { settings, updateSettings } = usePopupContext();
   const [isDisplayTimeOnIconChecked, setIsDisplayTimeOnIconChecked] =
     React.useState<boolean>(settings.displayTimeOnBadge);

src/popup/pages/preferences/components/IgnoredDomainSetting.tsx

@@ -10,7 +10,7 @@ import { assertIsValidHostname } from '@shared/utils/url';
 
 import { usePopupContext } from '@popup/hooks/PopupContext';
 
-export const IgnoredDomainSetting: React.FC = () => {
+export const IgnoredDomainSetting = () => {
   const { settings, updateSettings } = usePopupContext();
   const [ignoredDomains, setIgnoredDomains] = React.useState<
     Readonly<string[]>

src/popup/pages/preferences/components/LimitsSetting.tsx

@@ -9,7 +9,7 @@ import { assertIsValidHostname } from '@shared/utils/url';
 
 import { usePopupContext } from '@popup/hooks/PopupContext';
 
-export const LimitsSetting: React.FC = () => {
+export const LimitsSetting = () => {
   const { settings, updateSettings } = usePopupContext();
   const [limits, setLimits] = React.useState<Record<string, number>>(
     settings.limits,

src/popup/pages/preferences/components/ThemeSelector.tsx

@@ -6,7 +6,7 @@ import { Icon, IconType } from '@shared/blocks/Icon';
 import { i18n } from '@shared/services/i18n';
 import { ColorScheme, ThemeService } from '@shared/services/theme';
 
-export const ThemeSelector: React.FC = () => {
+export const ThemeSelector = () => {
   const [theme, setTheme] = React.useState(() => ThemeService.getAppTheme());
 
   const handleThemeChange = React.useCallback((theme: ColorScheme) => {

src/shared/blocks/Panel.tsx

@@ -5,10 +5,9 @@ interface PanelComponentClassNameProps {
   className?: string;
 }
 
-export const Panel: React.FC<PanelComponentClassNameProps> = ({
-  children,
-  className,
-}) => {
+export const Panel: React.FC<
+  React.PropsWithChildren<PanelComponentClassNameProps>
+> = ({ children, className }) => {
   return (
     <div
       className={twMerge(
@@ -21,10 +20,9 @@ export const Panel: React.FC<PanelComponentClassNameProps> = ({
   );
 };
 
-export const PanelHeader: React.FC<PanelComponentClassNameProps> = ({
-  children,
-  className,
-}) => {
+export const PanelHeader: React.FC<
+  React.PropsWithChildren<PanelComponentClassNameProps>
+> = ({ children, className }) => {
   return (
     <h2
       className={twMerge(
@@ -37,10 +35,9 @@ export const PanelHeader: React.FC<PanelComponentClassNameProps> = ({
   );
 };
 
-export const PanelBody: React.FC<PanelComponentClassNameProps> = ({
-  children,
-  className,
-}) => {
+export const PanelBody: React.FC<
+  React.PropsWithChildren<PanelComponentClassNameProps>
+> = ({ children, className }) => {
   return (
     <div className={twMerge('dark:text-neutral-200', className)}>
       {children}

src/shared/blocks/_stories/Panel.stories.tsx

@@ -3,9 +3,10 @@ import * as React from 'react';
 
 import { Panel, PanelHeader, PanelBody } from '../Panel';
 
-const meta: Meta = {
+const meta = {
   title: 'Block/Panel',
   component: Panel,
+  // @ts-expect-error -- broken typing for meta type
   subcomponents: { PanelHeader, PanelBody },
   parameters: {
     layout: 'centered',

src/shared/components/ActivityCalendar/index.tsx

@@ -83,7 +83,9 @@ export const ActivityCalendar: React.FC<ActivityCalendarProps> = ({
     debouncedSetCalendarTooltips(calendarRef.current, getTooltip);
   }, [getTooltip]);
 
-  const handleDateClick = React.useCallback(
+  const handleDateClick = React.useCallback<
+    NonNullable<React.ComponentProps<'div'>['onClick']>
+  >(
     (el) => {
       const target = el.target as HTMLElement;
       if (target.nodeName !== 'rect') {