Code refactoring

Author: onesine

.eslintrc.json

@@ -10,7 +10,8 @@
         "plugin:react/recommended",
         "plugin:@typescript-eslint/recommended",
         "plugin:prettier/recommended",
-        "plugin:react-hooks/recommended"
+        "plugin:react-hooks/recommended",
+        "next/core-web-vitals"
     ],
     "overrides": [],
     "parser": "@typescript-eslint/parser",
@@ -26,7 +27,7 @@
             "version": "detect"
         }
     },
-    "plugins": ["react", "@typescript-eslint", "import", "prettier"],
+    "plugins": ["react", "@typescript-eslint", "import", "prettier", "@next/eslint-plugin-next"],
     "rules": {
         "indent": "off",
         "linebreak-style": ["error", "unix"],

package.json

@@ -73,10 +73,11 @@
     },
     "lint-staged": {
         "*.{ts,tsx}": [
-            "npm run lint"
+            "eslint",
+            "prettier --write"
         ],
-        "*.{ts,tsx,css,scss,md}": [
-            "npm run pret:fix"
+        "*.{css,scss,json,md}": [
+            "prettier --write"
         ]
     }
 }

src/components/Calendar/Days.tsx

@@ -23,12 +23,10 @@ interface Props {
     onClickNextDays: (day: number) => void;
 }
 
-const Days: React.FC<Props> = ({
-    calendarData,
-    onClickPreviousDays,
-    onClickDay,
-    onClickNextDays
-}) => {
+const Days: React.FC<Props> = props => {
+    // Props
+    const { calendarData, onClickPreviousDays, onClickDay, onClickNextDays } = props;
+
     // Contexts
     const {
         primaryColor,

src/components/Calendar/Years.tsx

@@ -1,9 +1,10 @@
-import DatepickerContext from "contexts/DatepickerContext";
 import React, { useContext } from "react";
 
 import { generateArrayNumber } from "../../helpers";
 import { RoundedButton } from "../utils";
 
+import DatepickerContext from "contexts/DatepickerContext";
+
 interface Props {
     year: number;
     currentYear: number;

src/components/Calendar/index.tsx

@@ -1,6 +1,5 @@
 import dayjs from "dayjs";
 import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { DateType } from "types";
 
 import { CALENDAR_SIZE, DATE_FORMAT } from "../../constants";
 import DatepickerContext from "../../contexts/DatepickerContext";
@@ -28,6 +27,8 @@ import Months from "./Months";
 import Week from "./Week";
 import Years from "./Years";
 
+import { DateType } from "types";
+
 interface Props {
     date: dayjs.Dayjs;
     minDate?: DateType | null;
@@ -38,15 +39,10 @@ interface Props {
     changeYear: (year: number) => void;
 }
 
-const Calendar: React.FC<Props> = ({
-    date,
-    minDate,
-    maxDate,
-    onClickPrevious,
-    onClickNext,
-    changeMonth,
-    changeYear
-}) => {
+const Calendar: React.FC<Props> = props => {
+    // Props
+    const { date, minDate, maxDate, onClickPrevious, onClickNext, changeMonth, changeYear } = props;
+
     // Contexts
     const {
         period,
@@ -66,6 +62,7 @@ const Calendar: React.FC<Props> = ({
     const [showMonths, setShowMonths] = useState(false);
     const [showYears, setShowYears] = useState(false);
     const [year, setYear] = useState(date.year());
+
     // Functions
     const previous = useCallback(() => {
         return getLastDaysInMonth(

src/components/Datepicker.tsx

@@ -13,44 +13,47 @@ import { Period, DatepickerType, ColorKeys } from "../types";
 
 import { Arrow, VerticalDash } from "./utils";
 
-const Datepicker: React.FC<DatepickerType> = ({
-    primaryColor = "blue",
-    value = null,
-    onChange,
-    useRange = true,
-    showFooter = false,
-    showShortcuts = false,
-    configs = undefined,
-    asSingle = false,
-    placeholder = null,
-    separator = "~",
-    startFrom = null,
-    i18n = LANGUAGE,
-    disabled = false,
-    inputClassName = null,
-    containerClassName = null,
-    popupClassName = null,
-    toggleClassName = null,
-    toggleIcon = undefined,
-    displayFormat = DATE_FORMAT,
-    readOnly = false,
-    minDate = null,
-    maxDate = null,
-    dateLooking = "forward",
-    disabledDates = null,
-    inputId,
-    inputName,
-    startWeekOn = "sun",
-    classNames = undefined,
-    popoverDirection = undefined,
-    required = false
-}) => {
-    // Ref
+const Datepicker = (props: DatepickerType) => {
+    // Props
+    const {
+        primaryColor = "blue",
+        value = null,
+        onChange,
+        useRange = true,
+        showFooter = false,
+        showShortcuts = false,
+        configs = undefined,
+        asSingle = false,
+        placeholder = null,
+        separator = "~",
+        startFrom = null,
+        i18n = LANGUAGE,
+        disabled = false,
+        inputClassName = null,
+        containerClassName = null,
+        toggleClassName = null,
+        popupClassName = null,
+        toggleIcon = undefined,
+        displayFormat = DATE_FORMAT,
+        readOnly = false,
+        minDate = null,
+        maxDate = null,
+        dateLooking = "forward",
+        disabledDates = null,
+        inputId,
+        inputName,
+        startWeekOn = "sun",
+        classNames = undefined,
+        popoverDirection = undefined,
+        required = false
+    } = props;
+
+    // Refs
     const containerRef = useRef<HTMLDivElement | null>(null);
     const calendarContainerRef = useRef<HTMLDivElement | null>(null);
     const arrowRef = useRef<HTMLDivElement | null>(null);
 
-    // State
+    // States
     const [firstDate, setFirstDate] = useState<dayjs.Dayjs>(
         startFrom && dayjs(startFrom).isValid() ? dayjs(startFrom) : dayjs()
     );
@@ -246,6 +249,7 @@ const Datepicker: React.FC<DatepickerType> = ({
         }
         return DEFAULT_COLOR;
     }, [primaryColor]);
+
     const contextValues = useMemo(() => {
         return {
             asSingle,
@@ -318,8 +322,8 @@ const Datepicker: React.FC<DatepickerType> = ({
         classNames,
         inputRef,
         popoverDirection,
-        firstGotoDate,
-        required
+        required,
+        firstGotoDate
     ]);
 
     const containerClassNameOverload = useMemo(() => {

src/components/Shortcuts.tsx

@@ -1,13 +1,13 @@
 import dayjs from "dayjs";
-import React, { useCallback, useContext, useMemo } from "react";
+import React, { ReactNode, useCallback, useContext, useMemo } from "react";
 
 import { DATE_FORMAT, TEXT_COLOR } from "../constants";
 import DEFAULT_SHORTCUTS from "../constants/shortcuts";
 import DatepickerContext from "../contexts/DatepickerContext";
 import { Period, ShortcutsItem } from "../types";
 
 interface ItemTemplateProps {
-    children: JSX.Element;
+    children: ReactNode;
     key: number;
     item: ShortcutsItem | ShortcutsItem[];
 }
@@ -26,7 +26,7 @@ const ItemTemplate = React.memo((props: ItemTemplateProps) => {
     } = useContext(DatepickerContext);
 
     // Functions
-    const getClassName: () => string = useCallback(() => {
+    const getClassName = useCallback(() => {
         const textColor = TEXT_COLOR["600"][primaryColor as keyof (typeof TEXT_COLOR)["600"]];
         const textColorHover = TEXT_COLOR.hover[primaryColor as keyof typeof TEXT_COLOR.hover];
         return `whitespace-nowrap w-1/2 md:w-1/3 lg:w-auto transition-all duration-300 hover:bg-gray-100 dark:hover:bg-white/10 p-2 rounded cursor-pointer ${textColor} ${textColorHover}`;
@@ -134,7 +134,7 @@ const Shortcuts: React.FC = () => {
     return shortcutOptions?.length ? (
         <div className="md:border-b mb-3 lg:mb-0 lg:border-r lg:border-b-0 border-gray-300 dark:border-gray-700 pr-1">
             <ul className="w-full tracking-wide flex flex-wrap lg:flex-col pb-1 lg:pb-0">
-                {shortcutOptions.map(([key, item], index: number) =>
+                {shortcutOptions.map(([key, item], index) =>
                     Array.isArray(item) ? (
                         item.map((item, index) => (
                             <ItemTemplate key={index} item={item}>

src/components/utils.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext } from "react";
+import React, { ReactNode, useCallback, useContext } from "react";
 
 import { BG_COLOR, BORDER_COLOR, BUTTON_COLOR, RING_COLOR } from "../constants";
 import DatepickerContext from "../contexts/DatepickerContext";
@@ -8,7 +8,7 @@ interface IconProps {
 }
 
 interface Button {
-    children: JSX.Element | JSX.Element[];
+    children: ReactNode;
     onClick: React.MouseEventHandler<HTMLButtonElement>;
     disabled?: boolean;
     roundedFull?: boolean;

src/types/index.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { ReactNode } from "react";
 
 import { COLORS } from "../constants";
 
@@ -72,7 +72,7 @@ export interface DatepickerType {
     popupClassName?: ((className: string) => string) | string | null;
     inputClassName?: ((className: string) => string) | string | null;
     toggleClassName?: ((className: string) => string) | string | null;
-    toggleIcon?: (open: boolean) => React.ReactNode;
+    toggleIcon?: (open: boolean) => ReactNode;
     inputId?: string;
     inputName?: string;
     displayFormat?: string;

tsconfig.json

@@ -20,7 +20,8 @@
         "skipLibCheck": true,
         "noEmit": true,
         "resolveJsonModule": true,
-        "isolatedModules": true
+        "isolatedModules": true,
+        "incremental": true
     },
     "include": ["src/**/*"],
     "exclude": ["node_modules"]