feat: dependency updates

eslint.config.js

@@ -0,0 +1,85 @@
+// eslint.config.js
+import eslintPluginPrettier from "eslint-plugin-prettier";
+import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
+import eslintPluginReact from "eslint-plugin-react";
+import eslintPluginTypescript from "@typescript-eslint/eslint-plugin";
+import eslintPluginImport from "eslint-plugin-import";
+import eslintPluginReactHooks from "eslint-plugin-react-hooks";
+import parserTypescript from "@typescript-eslint/parser";
+
+export default [
+  {
+    ignores: ["dist"]
+  },
+  {
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      parser: parserTypescript,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true
+        }
+      },
+      globals: {}
+    },
+    linterOptions: {
+      reportUnusedDisableDirectives: true
+    },
+    plugins: {
+      react: eslintPluginReact,
+      "@typescript-eslint": eslintPluginTypescript,
+      import: eslintPluginImport,
+      prettier: eslintPluginPrettier,
+      "react-hooks": eslintPluginReactHooks
+    },
+    rules: {
+      "react/react-in-jsx-scope": "off",
+      eqeqeq: ["error", "always"],
+      "@typescript-eslint/no-empty-function": "off",
+      "import/order": [
+        "error",
+        {
+          groups: ["builtin", "external", "internal", "parent", "sibling"]
+        }
+      ],
+      "prettier/prettier": [
+        "error",
+        {
+          endOfLine: "auto"
+        }
+      ],
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
+      "react/prop-types": "off",
+      semi: [2, "always"],
+      quotes: [
+        2,
+        "double",
+        {
+          avoidEscape: true,
+          allowTemplateLiterals: true
+        }
+      ],
+      "import/no-internal-modules": [
+        "error",
+        {
+          forbid: ["@/components/**"]
+        }
+      ]
+    },
+    settings: {
+      "import/resolver": {
+        typescript: {},
+        node: {
+          extensions: [".js", ".jsx", ".ts", ".tsx"]
+        }
+      },
+      react: {
+        pragma: "React",
+        version: "detect"
+      }
+    }
+  },
+  eslintPluginPrettierRecommended
+];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitnoi.se/react-scheduler",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "lint:fix": "eslint --fix .",
     "format": "prettier --write .",
     "typecheck": "tsc -b",
-    "prepare": "husky install"
+    "prepare": "husky"
   },
   "main": "dist/index.umd.js",
   "modules": "dist/index.js",
@@ -54,41 +54,41 @@
     ]
   },
   "dependencies": {
-    "dayjs": "1.11.7",
+    "dayjs": "1.11.13",
     "lodash.debounce": "4.0.8",
     "path": "0.12.7",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "styled-components": "5.3.8",
-    "styled-normalize": "8.0.7"
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "styled-components": "6.1.17",
+    "styled-normalize": "8.1.1"
   },
   "devDependencies": {
-    "@faker-js/faker": "7.6.0",
-    "@types/datejs": "0.0.32",
-    "@types/lodash.debounce": "4.0.7",
-    "@types/node": "18.15.11",
-    "@types/react": "18.0.27",
-    "@types/react-dom": "18.0.10",
-    "@types/styled-components": "5.1.26",
-    "@typescript-eslint/eslint-plugin": "5.57.1",
-    "@typescript-eslint/parser": "5.57.1",
-    "@vitejs/plugin-react": "3.1.0",
-    "babel-plugin-styled-components": "2.0.7",
-    "eslint": "8.37.0",
-    "eslint-config-prettier": "8.8.0",
-    "eslint-import-resolver-typescript": "3.5.5",
+    "@faker-js/faker": "9.7.0",
+    "@types/datejs": "0.0.36",
+    "@types/lodash.debounce": "4.0.9",
+    "@types/node": "22.15.3",
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2",
+    "@types/styled-components": "5.1.34",
+    "@typescript-eslint/eslint-plugin": "8.31.0",
+    "@typescript-eslint/parser": "8.31.0",
+    "@vitejs/plugin-react": "4.4.1",
+    "babel-plugin-styled-components": "2.1.4",
+    "eslint": "9.25.1",
+    "eslint-config-prettier": "10.1.2",
+    "eslint-import-resolver-typescript": "4.3.4",
     "eslint-plugin-filenames": "1.3.2",
-    "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.32.2",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "husky": "8.0.0",
-    "lint-staged": "13.2.0",
-    "prettier": "2.8.7",
-    "rollup-plugin-visualizer": "5.9.0",
-    "typescript": "4.9.3",
-    "vite": "4.1.0",
-    "vite-plugin-dts": "2.2.0",
-    "vite-plugin-svgr": "2.4.0"
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-prettier": "5.2.6",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "5.2.0",
+    "husky": "9.1.7",
+    "lint-staged": "15.5.1",
+    "prettier": "3.5.3",
+    "rollup-plugin-visualizer": "5.14.0",
+    "typescript": "5.8.3",
+    "vite": "6.3.3",
+    "vite-plugin-dts": "4.5.3",
+    "vite-plugin-svgr": "4.3.0"
   }
 }

src/assets/icons/index.ts

@@ -1,17 +1,17 @@
-import { ReactComponent as add } from "./svgs/add.svg";
-import { ReactComponent as subtract } from "./svgs/subtract.svg";
-import { ReactComponent as filter } from "./svgs/filter.svg";
-import { ReactComponent as arrowLeft } from "./svgs/arrow-left.svg";
-import { ReactComponent as arrowRight } from "./svgs/arrow-right.svg";
-import { ReactComponent as defaultAvatar } from "./svgs/default-avatar.svg";
-import { ReactComponent as calendarWarning } from "./svgs/calendar-warning.svg";
-import { ReactComponent as calendarFree } from "./svgs/calendar-free.svg";
-import { ReactComponent as arrowUp } from "./svgs/arrow-up.svg";
-import { ReactComponent as arrowDown } from "./svgs/arrow-down.svg";
-import { ReactComponent as search } from "./svgs/search.svg";
-import { ReactComponent as close } from "./svgs/close.svg";
-import { ReactComponent as moon } from "./svgs/moon.svg";
-import { ReactComponent as sun } from "./svgs/sun.svg";
+import add from "./svgs/add.svg?react";
+import subtract from "./svgs/subtract.svg?react";
+import filter from "./svgs/filter.svg?react";
+import arrowLeft from "./svgs/arrow-left.svg?react";
+import arrowRight from "./svgs/arrow-right.svg?react";
+import defaultAvatar from "./svgs/default-avatar.svg?react";
+import calendarWarning from "./svgs/calendar-warning.svg?react";
+import calendarFree from "./svgs/calendar-free.svg?react";
+import arrowUp from "./svgs/arrow-up.svg?react";
+import arrowDown from "./svgs/arrow-down.svg?react";
+import search from "./svgs/search.svg?react";
+import close from "./svgs/close.svg?react";
+import moon from "./svgs/moon.svg?react";
+import sun from "./svgs/sun.svg?react";
 import { Icon, IconsNames } from "./types";
 
 const icons: { [key in IconsNames]: Icon } = {

src/components/Calendar/Grid/Grid.tsx

@@ -80,12 +80,12 @@ const Grid = forwardRef<HTMLDivElement, GridProps>(function Grid(
   return (
     <StyledWrapper id={canvasWrapperId}>
       <StyledInnerWrapper ref={ref}>
-        <StyledSpan position="left" ref={refLeft} />
-        <Loader isLoading={isLoading} position="left" />
+        <StyledSpan $position="left" ref={refLeft} />
+        <Loader isLoading={isLoading} $position="left" />
         <StyledCanvas ref={canvasRef} />
         <Tiles data={data} zoom={zoom} onTileClick={onTileClick} />
-        <StyledSpan ref={refRight} position="right" />
-        <Loader isLoading={isLoading} position="right" />
+        <StyledSpan ref={refRight} $position="right" />
+        <Loader isLoading={isLoading} $position="right" />
       </StyledInnerWrapper>
     </StyledWrapper>
   );

src/components/Calendar/Grid/styles.ts

@@ -17,6 +17,6 @@ export const StyledSpan = styled.span<StyledSpanProps>`
   height: 100%;
   position: absolute;
   top: 0;
-  left: ${({ position }) => (position === "left" ? 0 : "auto")};
-  right: ${({ position }) => (position === "right" ? 0 : "auto")};
+  left: ${({ $position }) => ($position === "left" ? 0 : "auto")};
+  right: ${({ $position }) => ($position === "right" ? 0 : "auto")};
 `;

src/components/Calendar/Grid/types.ts

@@ -8,5 +8,5 @@ export type GridProps = {
 };
 
 export type StyledSpanProps = {
-  position: "left" | "right";
+  $position: "left" | "right";
 };

src/components/Calendar/Header/Topbar/Topbar.tsx

@@ -42,11 +42,12 @@ const Topbar: FC<TopbarProps> = ({ width, showThemeToggle, toggleTheme }) => {
       <Filters>
         {filterButtonState >= 0 && (
           <IconButton
-            variant={filterButtonState ? "filled" : "outlined"}
+            $variant={filterButtonState ? "filled" : "outlined"}
             iconName="filter"
             width="16"
             height="16"
-            onClick={handleFilterData}>
+            onClick={handleFilterData}
+          >
             {topbar.filters}
             {!!filterButtonState && (
               <span onClick={handleClearFilters}>
@@ -74,14 +75,14 @@ const Topbar: FC<TopbarProps> = ({ width, showThemeToggle, toggleTheme }) => {
           <IconButton
             isDisabled={!isPrevZoom}
             onClick={zoomOut}
-            isFullRounded
+            $isFullRounded
             iconName="subtract"
             width="14"
           />
           <IconButton
             isDisabled={!isNextZoom}
             onClick={zoomIn}
-            isFullRounded
+            $isFullRounded
             iconName="add"
             width="14"
           />

src/components/Calendar/types.ts

@@ -9,7 +9,7 @@ export type CalendarProps = {
 };
 
 export type StyledSpanProps = {
-  position: "left" | "right";
+  $position: "left" | "right";
 };
 
 export type ProjectsData = [projectsPerPerson: SchedulerProjectData[][][], rowsPerPerson: number[]];

src/components/ConfigPanel/ConfigPanel.tsx

@@ -42,7 +42,7 @@ const ConfigPanel: FC<ConfigPanelProps> = ({ values, onSubmit }) => {
   };
 
   return (
-    <StyledWrapper onMouseLeave={() => setIsExpanded(false)} isExpanded={isExpanded}>
+    <StyledWrapper onMouseLeave={() => setIsExpanded(false)} $isExpanded={isExpanded}>
       <StyledForm onSubmit={handleSubmit}>
         <StyledInnerWrapper>
           <StyledLabel htmlFor={formFieldsIds.peopleCount}>People count: </StyledLabel>
@@ -88,7 +88,8 @@ const ConfigPanel: FC<ConfigPanelProps> = ({ values, onSubmit }) => {
             value={inputValues.startDate ?? ""}
             type="date"
             onChange={handleDateChange}
-            title="When do you want to start your scheduler? Default: today"></StyledInput>
+            title="When do you want to start your scheduler? Default: today"
+          ></StyledInput>
         </StyledInnerWrapper>
         <StyledInnerWrapper>
           <StyledLabel htmlFor={formFieldsIds.maxRecordsPerPage}>Records/page: </StyledLabel>

src/components/ConfigPanel/styles.ts

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 type WrapperProps = {
-  isExpanded: boolean;
+  $isExpanded: boolean;
 };
 
 export const StyledWrapper = styled.div<WrapperProps>`
@@ -10,7 +10,7 @@ export const StyledWrapper = styled.div<WrapperProps>`
   padding: 0 0.5rem;
   height: 125px;
   position: fixed;
-  top: ${({ isExpanded }) => (isExpanded ? 0 : "-129px")};
+  top: ${({ $isExpanded }) => ($isExpanded ? 0 : "-129px")};
   display: flex;
   flex-direction: column;
   background-color: white;