Merge branch 'main' of https://github.com/Chetan-KK/Windows-10-Clone

.babelrc

@@ -0,0 +1,11 @@
+{
+    "presets": [
+        "@babel/preset-env",
+        [
+            "@babel/preset-react",
+            {
+                "runtime": "automatic"
+            }
+        ]
+    ]
+}

.eslintrc.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+    extends: ["react-app", "react-app/jest"],
+};

README.md

@@ -56,6 +56,7 @@ A fun practice project to clone the Windows 10 interface using React.js.
 ## Contributing
 
 **If you're interested in contributing to this project, please open an issue or create a pull request.**
+- make sure to make changes on new branch
 
 ## License
 

package.json

@@ -5,21 +5,45 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "predeploy":"npm run build",
-    "deploy":"gh-pages -d build",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "jest",
+    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0"
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-loader-spinner": "^5.3.4"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.22.10",
+    "@babel/preset-react": "^7.22.5",
+    "@testing-library/dom": "^9.3.1",
+    "@testing-library/jest-dom": "^6.0.1",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^3.0.0",
     "gh-pages": "^4.0.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.6.2",
+    "jest-environment-jsdom": "^29.6.2",
+    "jest-svg-transformer": "^1.0.0",
+    "react-test-renderer": "^18.2.0",
     "vite": "^4.0.0"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "moduleNameMapper": {
+      "^.+\\.svg$": "jest-svg-transformer",
+      "^.+\\.(css|less|scss)$": "identity-obj-proxy"
+    },
+    "setupFilesAfterEnv": [
+      "<rootDir>/setupTests.js"
+    ]
   }
-}
+}

setupTests.js

@@ -0,0 +1,2 @@
+import "@testing-library/jest-dom";
+// import "@testing-library/jest-dom/extend-expect";

src/App.test.js

@@ -0,0 +1,63 @@
+import React from "react";
+import { screen, render, waitFor } from "@testing-library/react";
+import App from "./Components/App";
+import userEvent from "@testing-library/user-event";
+import Quit from "./Components/Quit";
+
+
+test("Initial test", () => {
+    render(<App />)
+    expect(true).toBe(true)
+})
+
+test("the loading screen is loading properly", async () => {
+    render(<App />)
+    let loadingScreen = screen.getByText(/please wait/i)
+    expect(loadingScreen).toBeInTheDocument()
+
+    await waitFor(() => {
+        expect(screen.getByText(/eng/i)).toBeInTheDocument()
+        expect(loadingScreen).not.toBeInTheDocument()
+    }, { timeout: 3000 })
+})
+
+test("The Start button is functioning properly", async () => {
+    render(<App />)
+
+    await waitFor(async () => {
+        const startButton = screen.getByTestId("startButton")
+        expect(startButton).toBeInTheDocument()
+
+        // const user = userEvent.setup()
+        const startDiv = screen.getByTestId("startMenuDiv")
+        expect(startDiv).not.toHaveFocus()
+        await userEvent.click(startButton)
+        const chrome = screen.getByText(/chrome/i)
+        const vsCode = screen.getByText(/vs code/i)
+        expect(chrome).toBeVisible()
+        expect(vsCode).toBeVisible()
+
+        expect(startDiv).toHaveFocus()
+
+    }, { timeout: 5000 })
+
+})
+
+test("Start button closing and losing focus when other areas are clicke", async () => {
+    render(<App />)
+    await waitFor(async () => {
+        const startButton = screen.getByTestId("startButton")
+        const backgroundImage = screen.getByAltText(/windowsBackGroundImage/i)
+        const startDiv = screen.getByTestId("startMenuDiv")
+
+        await userEvent.click(startButton)
+        expect(startDiv).toHaveFocus()
+
+        await userEvent.click(backgroundImage)
+
+        expect(startDiv).not.toHaveFocus()
+
+    }, { timeout: 5000 })
+})
+
+

src/Components/App.jsx

@@ -1,10 +1,16 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import './css/App.css'
 import Taskbar from './Taskbar'
+import Loading from './Loading';
+import { AppContext } from '../context/AppContext';
+import SleepScreen from './Sceens/SleepScreen';
+import RestartScreen from './Sceens/RestartScreen';
+import ShutDown from './Sceens/ShutDown';
+import PowerOnScreen from './Sceens/PowerOnScreen';
 
 // import defaultWallpaper from './assets/default-wallpaper.jpg'
 
-function constructor(){
+function constructor() {
   // console.log(document.documentElement.requestFullscreen)
 }
 constructor();
@@ -13,34 +19,131 @@ constructor();
 
 function App() {
 
-  const [totalApps,setTotalApps] = useState([
+  const [totalApps, setTotalApps] = useState([
     {
-        name:"chrome",
-        icon:"chromeIcon.svg",
-        running:"true",
-        active:"false"
+      name: "chrome",
+      icon: "chromeIcon.svg",
+      running: "true",
+      active: "false"
 
     },
     {
-        name:"explorer",
-        icon:"fileExplorer.png",
-        running:"false",
-        active:"false"
+      name: "explorer",
+      icon: "fileExplorer.png",
+      running: "false",
+      active: "false"
     },
     {
-        name:"visual studio code",
-        icon:"vsCode.png",
-        running:"false",
-        active:"false"
+      name: "visual studio code",
+      icon: "vsCode.png",
+      running: "false",
+      active: "false"
     }
   ])
+  const [showLoadingScreen, setShowLoadingScreen] = useState(true)
+  const [startMenu, setStartMenu] = useState(false)
+  const [isStartButtonActive, setIsStartButtonActive] = useState(false)
+  const [ifBlurByStartMenuPress, setIfBlurByStartMenuPress] = useState(false)
+  const [showApp, setShowApp] = useState(false)
+  const [showSleepScreen, setShowSleepScreen] = useState(false)
+  const [ShowRestartingScreen, setShowRestartingScreen] = useState(false)
+  const [shutDown, setShutDown] = useState(false)
+  const [powerOnScreen, setPowerOnScreen] = useState(false)
+
+  useEffect(() => {
+    initiatePowerOnSequence()
+  }, [])
+
+  useEffect(() => {
+    if (startMenu === false && isStartButtonActive === true) {
+      setIsStartButtonActive(false)
+    }
+  }, [startMenu, isStartButtonActive])
+
+
+  function initiatePowerOnSequence() {
+    setTimeout(() => {
+      setShowLoadingScreen(false)
+      setShowApp(true)
+    }, 2500);
+  }
+
+
+  function handleStartMenu() {
+    changeStartMenuStatus()
+  }
+
+
+
+  // Check docs on handleBlur in StartMenu.jsx to understand how this with combination of that function works
+  function changeStartMenuStatus() {
+    if (startMenu === isStartButtonActive) {
+      setStartMenu(prevState => !prevState)
+      setIsStartButtonActive(prev => !prev)
+    }
+  }
 
   return (
-    <div className="App">
-      <img className='mainWallpaper' src="defaultWallpaper.jpg" alt="" />
-      <Taskbar totalApps={totalApps} />
+    <AppContext.Provider value={{
+      startMenu,
+      setStartMenu,
+      handleStartMenu,
+      isStartButtonActive,
+      setIsStartButtonActive,
+      ifBlurByStartMenuPress,
+      setIfBlurByStartMenuPress,
+      setShowSleepScreen,
+      setShowApp,
+      setShowRestartingScreen,
+      setShowLoadingScreen,
+      setShutDown,
+      setPowerOnScreen,
+      initiatePowerOnSequence,
+    }}
+    >
+      {showLoadingScreen && (
+        <div className="loadingScreen">
+          <Loading message="please wait" />
+        </div>)
+      }
+      {showApp && (
+        <div className="App">
+          <img className='mainWallpaper' src="defaultWallpaper.jpg" alt="windowsBackGroundImage" />
+          <Taskbar totalApps={totalApps} />
+
+        </div>
+      )}
+
+      {/* Sleep Screen */}
+      {
+        showSleepScreen && (
+          <>
+            <SleepScreen />
+          </>
+        )
+      }
+
+      {/* restarting Screen */}
+      {
+        ShowRestartingScreen && (
+          <RestartScreen />
+        )
+      }
+
+      {/* Shut Down Screen */}
+      {shutDown && (
+        <ShutDown />
+      )}
+
+      {/* Power On Screen */}
+      {
+        powerOnScreen && (
+          <PowerOnScreen />
+        )
+      }
+
 
-    </div>
+    </AppContext.Provider>
   )
 }
 

src/Components/Loading.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { Oval } from 'react-loader-spinner'
+import "./css/Loading.css"
+
+function Loading({ message }) {
+    return (
+        <div className='loadingCircle'>
+            <Oval
+                height={80}
+                width={80}
+                color="#ffffff"
+                wrapperStyle={{}}
+                wrapperClass=""
+                visible={true}
+                ariaLabel='oval-loading'
+                secondaryColor="#6b7280"
+                strokeWidth={2}
+                strokeWidthSecondary={3}
+            />
+            {/* <TestLoading /> */}
+            <div
+                style={{
+                    textTransform: " capitalize",
+                    color: "white",
+                    marginTop: 10,
+                    fontSize: 22
+                }}
+            >
+                <p>{message}</p>
+            </div>
+        </div>
+    )
+}
+
+function TestLoading() {
+    return (
+        <div style={{ "--size": "64px", "--dot-size ": "6px", "--dot-count": 6, "--color": "#fff", "--speed": "1s", "--spread": "60deg" }} className="dots">
+            <div style={{ "--i": 0 }} className="dot"></div>
+            <div style={{ "--i": 1 }} className="dot"></div>
+            <div style={{ "--i": 2 }} className="dot"></div>
+            <div style={{ "--i": 3 }} className="dot"></div>
+            <div style={{ "--i": 4 }} className="dot"></div>
+            <div style={{ "--i": 5 }} className="dot"></div>
+        </div>
+    )
+}
+
+
+
+export default Loading