Refactor theme management and update dependencies; add ESLint configuration and Prettier settings

Author: Ali-Sdg90

cs-queue-calendar/package-lock.json

@@ -5,6 +5,7 @@
   "private": true,
   "dependencies": {
     "antd": "^5.23.0",
+    "caniuse-lite": "^1.0.30001741",
     "cra-template": "1.2.0",
     "crypto-js": "^4.2.0",
     "date-fns": "^4.1.0",
@@ -27,7 +28,9 @@
     "deploy": "gh-pages -d build",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint src --ext .js,.jsx --format stylish --max-warnings=0",
+    "lint:fix": "eslint src --ext .js,.jsx --format stylish --max-warnings=0 --fix"
   },
   "eslintConfig": {
     "extends": [
@@ -48,6 +51,12 @@
     ]
   },
   "devDependencies": {
-    "cross-env": "^7.0.3"
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@eslint/js": "^9.35.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.57.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.4.0"
   }
 }

cs-queue-calendar/package.json

@@ -0,0 +1,34 @@
+# Dependencies
+node_modules
+package.json
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+# Build / output folders
+build
+dist
+.next
+out
+coverage
+
+# Logs and system files
+*.log
+.DS_Store
+
+# IDE / editor settings
+.vscode
+.idea
+
+# Auto-generated / compiled files
+*.min.js
+*.min.css
+*.bundle.js
+*.map
+
+# Test snapshots
+*.snap
+
+# Static assets
+public/*
+!public/index.html

cs-queue-calendar/src/.prettierignore

@@ -0,0 +1,7 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": false,
+    "endOfLine": "lf"
+}

cs-queue-calendar/src/.prettierrc

@@ -1,17 +1,17 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useState } from "react";
 import { ConfigProvider, theme } from "antd";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 import CSCalendar from "./components/CSCalendar";
-import { ThemeContext } from "./store/ThemeContext";
 import FloatButtonSection from "./components/FloatButtonSection";
 import AnnouncementModule from "./components/AnnouncementModule";
 import Toastify from "./components/Toastify";
+import { ThemeContext } from "./store/Theme/ThemeContext";
 
 const App = () => {
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [toastifyObj, setToastifyObj] = useState("");
-    
+
     const [addToCurrentWeek, setAddToCurrentWeek] = useState(0);
     const [announcementData, setAnnouncementData] = useState({
         startWeekDate: "",
@@ -34,12 +34,16 @@ const App = () => {
             }}
         >
             <Toastify toastifyObj={toastifyObj} />
+
             <Header />
+
             <CSCalendar
                 setAnnouncementData={setAnnouncementData}
                 addToCurrentWeek={addToCurrentWeek}
             />
+
             <Footer />
+
             <FloatButtonSection setIsModalOpen={setIsModalOpen} />
             <ConfigProvider direction={"rtl"}>
                 <AnnouncementModule

cs-queue-calendar/src/App.jsx

@@ -1,8 +1,8 @@
-@import "theme";
-@import "media";
-@import "header";
-@import "footer";
-@import "toastify";
-@import "cs-calendar";
-@import "announcement-module";
-@import "float-button-section";
+@use "theme";
+@use "media";
+@use "header";
+@use "footer";
+@use "toastify";
+@use "cs-calendar";
+@use "announcement-module";
+@use "float-button-section";

cs-queue-calendar/src/assets/scss/components/_all.scss

@@ -1,5 +1,10 @@
+.calendar-section{
+    height: calc(100vh - 128px);
+}
+
 .ant-badge.ant-badge-status {
     direction: rtl;
+    width: 100%;
 }
 
 .ant-picker-calendar-date-content::-webkit-scrollbar {
@@ -32,6 +37,10 @@ thead {
     border-bottom: 1px solid var(--calendar-border-color) !important;
     height: 50px;
     padding: 0 9px;
+
+    .month-select {
+        width: 100px !important;
+    }
 }
 
 .ant-picker-calendar {

cs-queue-calendar/src/assets/scss/components/_cs-calendar.scss

@@ -4,6 +4,10 @@
         min-width: 400px !important;
     }
 
+    .calendar-section {
+        height: unset !important;
+    }
+
     .ant-picker-calendar {
         margin: 0 10px !important;
     }
@@ -67,7 +71,7 @@
     }
 }
 
-@media (max-width: 440px) {
+@media (max-width: 458px) {
     .calendar-header {
         display: flex;
         flex-flow: column-reverse;