Split hooks into context and provider files

docs/seo/README.md

@@ -0,0 +1,9 @@
+[← Back](../README.md)
+
+# SEO
+
+## Tools
+
+### [ICO converter](https://www.icoconverter.com/)
+
+Convert an image into an ICO file with multiple resolutions.

eslint.config.js

@@ -3,6 +3,7 @@
 import eslint from "@eslint/js";
 import tseslint from "typescript-eslint";
 import react from "eslint-plugin-react";
+import reactRefresh from "eslint-plugin-react-refresh";
 
 export default tseslint.config(
 	eslint.configs.recommended,
@@ -19,7 +20,8 @@ export default tseslint.config(
 			"eslint.config.js",
 		],
 		plugins: {
-			react
+			react,
+			"react-refresh": reactRefresh
 		},
 		rules: {
 			"quotes": "off",
@@ -59,6 +61,10 @@ export default tseslint.config(
 				{
 					"argsIgnorePattern": "^_"
 				}
+			],
+			"react-refresh/only-export-components": [
+				"warn",
+				{ "allowConstantExport": true }
 			]
 		},
 	}

package.json

@@ -18,12 +18,6 @@
 		"@fortawesome/free-regular-svg-icons": "^6.4.0",
 		"@fortawesome/free-solid-svg-icons": "^6.4.0",
 		"@fortawesome/react-fontawesome": "^0.2.0",
-		"@testing-library/jest-dom": "^5.16.5",
-		"@testing-library/react": "^13.4.0",
-		"@testing-library/user-event": "^13.5.0",
-		"@types/node": "^20.12.8",
-		"@types/react": "^18.3.1",
-		"@types/react-dom": "^18.3.0",
 		"@vitejs/plugin-react-swc": "^3.7.0",
 		"anser": "^2.1.1",
 		"core-js": "^3.37.0",
@@ -39,22 +33,25 @@
 		"react-tabs": "^6.0.2",
 		"vite": "^5.2.12",
 		"vite-plugin-svgr": "^4.2.0",
-		"vite-tsconfig-paths": "^4.3.2",
-		"web-vitals": "^2.1.4"
+		"vite-tsconfig-paths": "^4.3.2"
 	},
 	"devDependencies": {
 		"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
 		"@eslint/js": "^9.2.0",
+		"@types/node": "^20.12.8",
+		"@types/react": "^18.3.1",
+		"@types/react-dom": "^18.3.0",
 		"@types/react-syntax-highlighter": "^15.5.13",
 		"@types/webpack-env": "^1.18.4",
 		"@typescript-eslint/eslint-plugin": "^7.8.0",
 		"@typescript-eslint/parser": "^7.8.0",
 		"eslint": "^8.57.0",
-		"eslint-plugin-jsdoc": "^46.4.6",
 		"eslint-plugin-react": "^7.34.1",
+		"eslint-plugin-react-refresh": "^0.4.7",
 		"gh-pages": "^5.0.0",
 		"typescript": "^5.4.5",
-		"typescript-eslint": "^7.8.0"
+		"typescript-eslint": "^7.8.0",
+		"web-vitals": "^4.0.1"
 	},
 	"browserslist": {
 		"production": [

src/App.tsx

@@ -1,15 +1,15 @@
 import styles from "./App.module.css";
 import { Taskbar } from "./components/taskbar/Taskbar";
-import { WindowsManagerProvider } from "./hooks/windows/windowsManagerContext";
 import { WindowsView } from "./components/windows/WindowsView";
-import { VirtualRootProvider } from "./hooks/virtual-drive/virtualRootContext";
 import { Desktop } from "./components/desktop/Desktop";
-import { SettingsManagerProvider } from "./hooks/settings/settingsManagerContext";
 import { ModalsView } from "./components/modals/ModalsView";
 import { ReactElement, useEffect } from "react";
-import { ZIndexManagerProvider } from "./hooks/z-index/zIndexManagerContext";
-import { ModalsManagerProvider } from "./hooks/modals/modalsManagerContext";
+import { ZIndexManagerProvider } from "./hooks/z-index/zIndexManagerProvider";
 import { ThemeProvider } from "./hooks/themes/themes";
+import { VirtualRootProvider } from "./hooks/virtual-drive/virtualRootProvider";
+import { WindowsManagerProvider } from "./hooks/windows/windowsManagerProvider";
+import { ModalsManagerProvider } from "./hooks/modals/modalsManagerProvider";
+import { SettingsManagerProvider } from "./hooks/settings/settingsManagerProvider";
 
 export default function App(): ReactElement {
 	useEffect(() => {

src/components/apps/logic-sim/CircuitView.module.css

@@ -6,4 +6,5 @@
 
 .Canvas {
 	flex: 1;
+	width: 100%;
 }

src/components/apps/settings/Settings.tsx

@@ -9,13 +9,6 @@ import { StorageTab } from "./tabs/StorageSettings";
 import { AppsSettings } from "./tabs/AppsSettings";
 import { WindowProps } from "../../windows/WindowView";
 
-export const TABS = {
-	APPS: 0,
-	APPEARANCE: 1,
-	STORAGE: 2,
-	ABOUT: 3,
-};
-
 interface SettingsProps extends WindowProps {
 	tab?: number;
 }

src/components/apps/settings/tabs/AppearanceSettings.tsx

@@ -13,7 +13,7 @@ import { DEFAULT_FILE_SELECTOR_SIZE } from "../../../../config/modals.config";
 import { IMAGE_FORMATS } from "../../../../config/apps/mediaViewer.config";
 import { VirtualFile } from "../../../../features/virtual-drive/file/virtualFile";
 import { VirtualFolder } from "../../../../features/virtual-drive/folder/virtualFolder";
-import { THEMES } from "../../../../hooks/themes/themes";
+import { THEMES } from "../../../../config/themes.config";
 
 export function AppearanceSettings() {
 	const virtualRoot = useVirtualRoot();

src/components/desktop/Desktop.tsx

@@ -25,7 +25,7 @@ import ModalsManager from "../../features/modals/modalsManager";
 import { VirtualFolder } from "../../features/virtual-drive/folder/virtualFolder";
 import { VirtualFolderLink } from "../../features/virtual-drive/folder/virtualFolderLink";
 import { VirtualFile } from "../../features/virtual-drive/file/virtualFile";
-import { TABS } from "../apps/settings/Settings";
+import { TABS } from "../../config/apps/settings.config";
 
 export const Desktop = memo(() => {
 	const settingsManager = useSettingsManager();

src/components/windows/WindowsView.tsx

@@ -25,7 +25,7 @@ export const WindowsView: FC = memo(() => {
 	useEffect(() => {
 		const resetViewportTitleAndIcon = () => {
 			setViewportTitle(`${NAME} | ${TAG_LINE}`);
-			setViewportIcon(`/favicon.ico`);
+			setViewportIcon("/favicon.ico");
 		};
 
 		if (sortedWindows.length === 0 || sortedWindows[sortedWindows.length - 1].minimized)

src/config/apps/settings.config.ts

@@ -1 +1,8 @@
+export const TABS = {
+	APPS: 0,
+	APPEARANCE: 1,
+	STORAGE: 2,
+	ABOUT: 3,
+};
+
 export const WALLPAPERS_PATH = "~/Pictures/Wallpapers";

src/config/themes.config.ts

@@ -0,0 +1,8 @@
+export const THEMES = {
+	0: "Dark",
+	1: "Light",
+	2: "Cherry",
+	3: "Mango",
+	5: "Aqua",
+	6: "Grape"
+};

src/hooks/modals/modalsContext.ts

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+import Modal from "../../features/modals/modal";
+
+export type ModalsState = Modal[] | undefined;
+
+export const ModalsContext = createContext<ModalsState>(undefined);
+
+export function useModals(): ModalsState {
+	return useContext(ModalsContext);
+}

src/hooks/modals/modalsManagerContext.ts

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+import ModalsManager from "../../features/modals/modalsManager";
+
+type ModalsManagerState = ModalsManager | undefined;
+
+export const modalsManagerContext = createContext<ModalsManagerState>(undefined);
+
+export function useModalsManager(): ModalsManagerState {
+	return useContext(modalsManagerContext);
+}

src/hooks/modals/modalsManagerProvider.tsx

@@ -1,10 +1,7 @@
-import { createContext, FC, ReactNode, useContext } from "react";
+import { FC, ReactNode } from "react";
 import ModalsManager from "../../features/modals/modalsManager";
-import { ModalsProvider } from "./modalsContext";
-
-type ModalsManagerState = ModalsManager | undefined;
-
-const modalsManagerContext = createContext<ModalsManagerState>(undefined);
+import { ModalsProvider } from "./modalsProvider";
+import { modalsManagerContext } from "./modalsManagerContext";
 
 export const ModalsManagerProvider: FC<{ children: ReactNode }> = ({ children }) => {
 	const modalsManager = new ModalsManager();
@@ -16,8 +13,4 @@ export const ModalsManagerProvider: FC<{ children: ReactNode }> = ({ children })
 			</ModalsProvider>
 		</modalsManagerContext.Provider>
 	);
-};
-
-export function useModalsManager(): ModalsManagerState {
-	return useContext(modalsManagerContext);
-}
+};

src/hooks/modals/modalsProvider.tsx

@@ -1,10 +1,7 @@
-import { createContext, FC, ReactNode, useCallback, useContext, useState } from "react";
-import Modal from "../../features/modals/modal";
+import { FC, ReactNode, useCallback, useState } from "react";
 import ModalsManager from "../../features/modals/modalsManager";
-
-type ModalsState = Modal[] | undefined;
-
-const ModalsContext = createContext<ModalsState>(undefined);
+import { ModalsContext, ModalsState } from "./modalsContext";
+import Modal from "../../features/modals/modal";
 
 export const ModalsProvider: FC<{ children: ReactNode, modalsManager: ModalsManager }> = ({ children, modalsManager }) => {
 	const [modals, setModals] = useState<ModalsState>([]);
@@ -20,8 +17,4 @@ export const ModalsProvider: FC<{ children: ReactNode, modalsManager: ModalsMana
 			{children}
 		</ModalsContext.Provider>
 	);
-};
-
-export function useModals(): ModalsState {
-	return useContext(ModalsContext);
-}
+};

src/hooks/settings/settingsManagerContext.ts

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+import { SettingsManager } from "../../features/settings/settingsManager";
+
+type SettingsManagerState = SettingsManager | undefined;
+
+export const SettingsManagerContext = createContext<SettingsManagerState>(undefined);
+
+export function useSettingsManager(): SettingsManagerState {
+	return useContext(SettingsManagerContext);
+}

src/hooks/settings/settingsManagerProvider.tsx

@@ -1,10 +1,7 @@
-import { createContext, FC, ReactNode, useContext } from "react";
-import { SettingsManager } from "../../features/settings/settingsManager";
+import { FC, ReactNode } from "react";
 import { useVirtualRoot } from "../virtual-drive/virtualRootContext";
-
-type SettingsManagerState = SettingsManager | undefined;
-
-const SettingsManagerContext = createContext<SettingsManagerState>(undefined);
+import { SettingsManager } from "../../features/settings/settingsManager";
+import { SettingsManagerContext } from "./settingsManagerContext";
 
 /**
  * Note: needs to be inside a virtual root provider
@@ -18,8 +15,4 @@ export const SettingsManagerProvider: FC<{ children: ReactNode }> = ({ children
 			{children}
 		</SettingsManagerContext.Provider>
 	);
-};
-
-export function useSettingsManager(): SettingsManagerState {
-	return useContext(SettingsManagerContext);
-}
+};

src/hooks/themes/themes.tsx

@@ -1,15 +1,7 @@
 import { ReactElement, useEffect, useState } from "react";
 import { useSettingsManager } from "../settings/settingsManagerContext";
 import { SettingsManager } from "../../features/settings/settingsManager";
-
-export const THEMES = {
-	0: "Dark",
-	1: "Light",
-	2: "Cherry",
-	3: "Mango",
-	5: "Aqua",
-	6: "Grape"
-};
+import { THEMES } from "../../config/themes.config";
 
 interface ThemeProviderProps {
 	children: ReactElement;

src/hooks/virtual-drive/virtualRootContext.ts

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+import { VirtualRoot } from "../../features/virtual-drive/root/virtualRoot";
+
+export const VirtualRootContext = createContext<VirtualRoot | undefined>(undefined);
+
+export function useVirtualRoot(): VirtualRoot {
+	return useContext(VirtualRootContext);
+}

src/hooks/virtual-drive/virtualRootProvider.tsx

@@ -1,7 +1,6 @@
-import { createContext, useContext, FC, ReactNode } from "react";
+import { FC, ReactNode } from "react";
 import { VirtualRoot } from "../../features/virtual-drive/root/virtualRoot";
-
-const VirtualRootContext = createContext<VirtualRoot | undefined>(undefined);
+import { VirtualRootContext } from "./virtualRootContext";
 
 export const VirtualRootProvider: FC<{ children: ReactNode }> = ({ children }) =>  {
 	const virtualRoot = new VirtualRoot().init();
@@ -9,8 +8,4 @@ export const VirtualRootProvider: FC<{ children: ReactNode }> = ({ children }) =
 	return <VirtualRootContext.Provider value={virtualRoot}>
 		{children}
 	</VirtualRootContext.Provider>;
-};
-
-export function useVirtualRoot(): VirtualRoot {
-	return useContext(VirtualRootContext);
-}
+};

src/hooks/windows/windowsContext.ts

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+import { WindowProps } from "../../components/windows/WindowView";
+
+export type WindowsState = WindowProps[] | undefined;
+
+export const WindowsContext = createContext<WindowsState>(undefined);
+
+export function useWindows(): WindowsState {
+	return useContext(WindowsContext);
+}

src/hooks/windows/windowsManagerContext.ts

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+import WindowsManager from "../../features/windows/windowsManager";
+
+type WindowsManagerState = WindowsManager | undefined;
+
+export const WindowsManagerContext = createContext<WindowsManagerState>(undefined);
+
+export function useWindowsManager(): WindowsManagerState {
+	return useContext(WindowsManagerContext);
+}

src/hooks/windows/windowsManagerProvider.tsx

@@ -1,10 +1,7 @@
-import { createContext, FC, ReactNode, useContext } from "react";
+import { FC, ReactNode } from "react";
 import WindowsManager from "../../features/windows/windowsManager";
-import { WindowsProvider } from "./windowsContext";
-
-type WindowsManagerState = WindowsManager | undefined;
-
-const WindowsManagerContext = createContext<WindowsManagerState>(undefined);
+import { WindowsManagerContext } from "./windowsManagerContext";
+import { WindowsProvider } from "./windowsProvider";
 
 export const WindowsManagerProvider: FC<{ children: ReactNode }> = ({ children }) => {
 	const windowsManager = new WindowsManager();
@@ -16,8 +13,4 @@ export const WindowsManagerProvider: FC<{ children: ReactNode }> = ({ children }
 			</WindowsProvider>
 		</WindowsManagerContext.Provider>
 	);
-};
-
-export function useWindowsManager(): WindowsManagerState {
-	return useContext(WindowsManagerContext);
-}
+};

src/hooks/windows/windowsProvider.tsx

@@ -1,11 +1,8 @@
-import { createContext, FC, ReactNode, useCallback, useContext, useState } from "react";
+import { FC, ReactNode, useCallback, useState } from "react";
 import WindowsManager from "../../features/windows/windowsManager";
+import { WindowsContext, WindowsState } from "./windowsContext";
 import { WindowProps } from "../../components/windows/WindowView";
 
-type WindowsState = WindowProps[] | undefined;
-
-const WindowsContext = createContext<WindowsState>(undefined);
-
 export const WindowsProvider: FC<{ children: ReactNode, windowsManager: WindowsManager }> = ({ children, windowsManager }) => {
 	const [windows, setWindows] = useState<WindowsState>([]);
 
@@ -20,8 +17,4 @@ export const WindowsProvider: FC<{ children: ReactNode, windowsManager: WindowsM
 			{children}
 		</WindowsContext.Provider>
 	);
-};
-
-export function useWindows(): WindowsState {
-	return useContext(WindowsContext);
-}
+};

src/hooks/z-index/zIndexManagerContext.ts

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+import { ZIndexManager } from "../../features/z-index/zIndexManager";
+
+type ZIndexManagerState = ZIndexManager | undefined;
+
+export const ZIndexManagerContext = createContext<ZIndexManagerState>(undefined);
+
+export function useZIndexManager(): ZIndexManagerState  {
+	return useContext(ZIndexManagerContext);
+}

src/hooks/z-index/zIndexManagerProvider.tsx

@@ -1,9 +1,6 @@
-import { createContext, FC, ReactNode, useContext } from "react";
+import { FC, ReactNode } from "react";
 import { ZIndexManager } from "../../features/z-index/zIndexManager";
-
-type ZIndexManagerState = ZIndexManager | undefined;
-
-const ZIndexManagerContext = createContext<ZIndexManagerState>(undefined);
+import { ZIndexManagerContext } from "./zIndexManagerContext";
 
 export const ZIndexManagerProvider: FC<{ children: ReactNode }> = ({ children }) => {
 	const zIndexManager = new ZIndexManager();
@@ -11,8 +8,4 @@ export const ZIndexManagerProvider: FC<{ children: ReactNode }> = ({ children })
 	return <ZIndexManagerContext.Provider value={zIndexManager}>
 		{children}
 	</ZIndexManagerContext.Provider>;
-};
-
-export function useZIndexManager(): ZIndexManagerState  {
-	return useContext(ZIndexManagerContext);
-}
+};