fix(deps): Fix TS2786 ResizableBox JSX element type error

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Yarn
+.yarn/install-state.gz

CLAUDE.md

@@ -5,6 +5,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 ## Development Commands
 
 ### Common Scripts
+
 - `yarn start` or `npm start` - Start the development server using Craco
 - `yarn build` or `npm run build` - Build the production version
 - `yarn test` or `npm test` - Run all tests with Jest
@@ -20,11 +21,13 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 - `yarn run-pushed-files-tests` or `npm run run-pushed-files-tests` - Run tests for pushed files
 
 ### Makefile Commands
+
 - `make coverage` - Run coverage tests and open the report in Chrome
 - `make branch-clean` - Delete local branches that have been removed from remote
 - `make commit` - Interactive commit helper that guides you through conventional commits
 
 ### Recommended Commit Workflow
+
 1. Create a feature branch: `git checkout -b amitraikwar/{about-changes}`
 2. Stage your changes: `git add <files>`
 3. Create initial commit: `make commit` (opens interactive conventional commit prompt)
@@ -33,7 +36,9 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 ## Project Architecture
 
 ### High-Level Structure
+
 This is a React single-page application styled after Apple's macOS interface, using:
+
 - **React 18** with TypeScript for the UI framework
 - **Zustand** for state management (centralized store in `/src/store/`)
 - **React Router DOM v6** for client-side routing
@@ -42,6 +47,7 @@ This is a React single-page application styled after Apple's macOS interface, us
 - **Craco** (Create React App Configuration Override) for extending CRA without ejecting
 
 ### Key Directories
+
 - `/src/assets/` - Static assets including icons and macOS-themed elements
 - `/src/components/` - Reusable UI components (buttons, menus, modals, windows, wallpaper)
 - `/src/hooks/` - Custom React hooks (e.g., useWindowDimension)
@@ -53,12 +59,14 @@ This is a React single-page application styled after Apple's macOS interface, us
 - `/src/localization/` - Internationalization configuration (i18next)
 
 ### State Management
+
 - Uses **Zustand** with Immer middleware for immutable state updates
 - Centralized store at `/src/store/uiStore/uiStore.ts`
 - Features are sliced (Modal slice for UI state, DateTime slice for time-related state)
 - Access store hooks via `uiStore(selector)` pattern throughout components
 
 ### Routing Strategy
+
 - Implements **code-splitting** with React.lazy and Suspense for performance
 - **LazyProvider** wraps route components for fallback handling
 - Separate routers for:
@@ -67,6 +75,7 @@ This is a React single-page application styled after Apple's macOS interface, us
 - Route components are dynamically imported to reduce initial bundle size
 
 ### Component Architecture
+
 - **Atomic design approach** with small, focused components
 - **MacOS simulation** elements:
   - Window controls (minimize, maximize, close)
@@ -77,26 +86,30 @@ This is a React single-page application styled after Apple's macOS interface, us
 - **Icon system** in `/src/assets/icons/` with individual TSX files for each icon
 
 ### Styling Approach
+
 - **Chakra UI** as the primary styling system
 - Custom CSS in `/src/index.css` for global styles
 - Component-specific styling using Chakra's props-based API
 - Responsive design considerations throughout
 
 ### Testing Strategy
+
 - **Jest** with **React Testing Library** for unit and integration tests
 - **Cypress** for end-to-end testing
-- Test files co-located with components (__tests__ directories)
+- Test files co-located with components (**tests** directories)
 - Mocks in `/__mocks__/` for external libraries (zustand mock)
 - Coverage reporting configured via jest.config.js
 
 ### Development Practices
+
 - **ESLint** with React App configuration and Prettier integration
 - **Husky** pre-commit hooks for linting staged files
 - **Conventional commits** via make commit command
 - Environment variables handled through standard CRA mechanisms
 - Environment-specific configuration in `.env` files (not committed)
 
 ### Internationalization
+
 - Configured with **i18next** and browser language detection
 - Localization files in `/src/localization/`
-- Language switching capability built into the system
+- Language switching capability built into the system

README.md

@@ -32,22 +32,26 @@ This project is built using modern web development tools and best practices:
 ## 🚀 Getting Started
 
 ### Prerequisites
+
 Make sure you have Node.js (v18 or higher) and Yarn installed.
 
 ### Installation
 
 1. Clone the repository:
+
    ```bash
    git clone git@github.com:onemanfighter/ARMacPortfolio.git
    cd ARMacPortfolio
    ```
 
 2. Install dependencies:
+
    ```bash
    yarn install
    ```
 
 3. Start the development server:
+
    ```bash
    yarn start
    ```
@@ -57,14 +61,17 @@ Make sure you have Node.js (v18 or higher) and Yarn installed.
 ## 🧪 Testing
 
 Run unit tests and generate coverage reports:
+
 ```bash
 yarn test:cov
 ```
 
 Run Cypress end-to-end tests:
+
 ```bash
 yarn cy:open
 ```
 
 ## 📜 License
+
 This project is licensed under the MIT License.

jest.js

@@ -24,3 +24,6 @@ jest.mock('react-clock', () => {
     return <div aria-label="mock-clock"></div>;
   };
 });
+
+window.HTMLElement.prototype.scrollTo = jest.fn();
+window.Element.prototype.scrollTo = jest.fn();

package.json

@@ -1,16 +1,14 @@
 {
-  "name": "ARMacPortfolio",
+  "name": "MacMock",
   "version": "0.5.0",
-  "description": "This is a mac simulator portfolio website for Amit Raikwar",
+  "description": "Mac OS Simulator",
   "main": "index.tsx",
   "dependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@types/node": "^16.18.91",
-    "@types/react": "^18.2.69",
-    "@types/react-dom": "^18.2.22",
+    "@types/node": "^18.19.0",
     "draft-js": "^0.11.7",
     "framer-motion": "^11.2.6",
     "fuse.js": "^7.0.0",
@@ -30,7 +28,7 @@
     "react-resizable": "^3.0.5",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
-    "typescript": "^4.9.5",
+    "typescript": "^5.4.5",
     "web-vitals": "^2.1.4",
     "zustand": "^4.5.2"
   },
@@ -52,6 +50,10 @@
     "run-staged-tests": "./scripts/run-staged-tests.sh",
     "run-pushed-files-tests": "./scripts/run-staged-tests.sh --pushed"
   },
+  "resolutions": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.3"
+  },
   "eslintConfig": {
     "extends": [
       "react-app",
@@ -102,9 +104,11 @@
     "jest-transform-stub": "^2.0.0",
     "prettier": "3.2.5",
     "react-test-renderer": "^18.3.0",
-    "ts-jest": "^29.1.2"
+    "ts-jest": "^29.1.2",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.3"
   },
-  "repository": "git@github.com:onemanfighter/ARMacPortfolio.git",
+  "repository": "git@github.com:AmitRaikwar-in/MacMock.git",
   "author": "Amit Raikwar",
   "license": "MIT"
 }

src/App.tsx

@@ -15,10 +15,10 @@ function App() {
         try {
           const promise = handle.enter();
           if (promise && promise.catch) {
-            promise.catch((err: any) => console.warn('Fullscreen error:', err));
+            promise.catch(() => {});
           }
         } catch (err) {
-          console.warn('Fullscreen error:', err);
+          // ignore
         }
       } else if (event.key === 'Escape') {
         handle.exit();
@@ -33,10 +33,10 @@ function App() {
         try {
           const promise = handle.enter();
           if (promise && promise.catch) {
-            promise.catch((err: any) => console.warn('Fullscreen error:', err));
+            promise.catch(() => {});
           }
         } catch (err) {
-          console.warn('Fullscreen error:', err);
+          // ignore
         }
       }
     };

src/components/MenuList/__tests__/__snapshots__/MenuListComponent.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`MenuList component should render for default values 1`] = `
       class="chakra-menu__menu-list css-f6jf1x"
       id="menu-list-:r1:"
       role="menu"
-      style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0);"
+      style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8);"
       tabindex="-1"
     >
       <div>

src/components/Modal/Modals/Search/__tests__/__snapshots__/SearchModal.test.tsx.snap

@@ -27,7 +27,7 @@ exports[`SearchModal should not render component if isOpen is false 1`] = `
       </div>
       <input
         aria-label="search-input"
-        class="chakra-input css-139ybwu"
+        class="chakra-input css-o5p52h"
         placeholder="Search..."
         type="text"
         value="the"
@@ -139,7 +139,7 @@ exports[`SearchModal should render correctly 1`] = `
       </div>
       <input
         aria-label="search-input"
-        class="chakra-input css-139ybwu"
+        class="chakra-input css-o5p52h"
         placeholder="Search..."
         type="text"
         value=""

src/providers/draggable/__tests__/__snapshots__/DraggableProvider.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Draggable provider should render correctly 1`] = `
 <div>
   <div
-    class="react-draggable css-0"
+    class="react-draggable css-1bvz7hg"
     style="transform: translate(0px, 28px)translate(0px,0px);"
   >
     test
@@ -14,7 +14,7 @@ exports[`Draggable provider should render correctly 1`] = `
 exports[`Draggable provider should render correctly on dragging 1`] = `
 <div>
   <div
-    class="react-draggable css-0"
+    class="react-draggable css-1bvz7hg"
     style="transform: translate(0px, 28px)translate(0px,0px);"
   >
     test
@@ -25,7 +25,7 @@ exports[`Draggable provider should render correctly on dragging 1`] = `
 exports[`Draggable provider should render correctly with custom position 1`] = `
 <div>
   <div
-    class="react-draggable css-0"
+    class="react-draggable css-1bvz7hg"
     style="transform: translate(0px, 28px)translate(10px,10px);"
   >
     test
@@ -36,7 +36,7 @@ exports[`Draggable provider should render correctly with custom position 1`] = `
 exports[`Draggable provider should render correctly with custom position for maximized 1`] = `
 <div>
   <div
-    class="react-draggable css-0"
+    class="react-draggable css-1bvz7hg"
     style="transform: translate(0px, 28px)translate(0px,0px);"
   >
     test