Migration to TypeScript - Stage 3

Added typescript linting

docs/README.md

@@ -46,7 +46,7 @@ See [docs/configuration](configuration/README.md) for more information.
 
 - [src](../src) directory
 	
-	Contains all code for the application, including CSS, JS and HTML files. This directory makes use of a feature-based folder structure.
+	Contains all code for the application, including CSS, JS and HTML files. This directory makes use of a feature-based folder structure. Utility files are often separated into their own subdirectory, called `_utils`, inside of their respective directory.
 
 - [public](../public) directory
 
@@ -65,8 +65,8 @@ See [docs/configuration](configuration/README.md) for more information.
 Type | Case | Example
 --- | --- | ---
 Folders | kebab-case | `virtual-drive`
-`.js` files | camelCase | `virtualRoot.js`
+`.ts` files | camelCase | `virtualRoot.ts`
-`.jsx` files | PascalCase | `Desktop.jsx`
+`.tsx` files | PascalCase | `Desktop.tsx`
 `.css` files & files in `public` dir | kebab-case | `global.css`
 Local `.module.css` files | PascalCase | `Desktop.module.css`
 Global `.module.css` files | kebab-case | `utils.module.css`

docs/features/actions/README.md

@@ -6,7 +6,7 @@ A React component used to group and display actions together. This is used in th
 
 ## Example
 
-```jsx
+```tsx
 <Actions className={STYLES.SHORTCUTS_LISTENER}>
 	<ClickAction
 		label="Reload"
@@ -26,3 +26,13 @@ A React component used to group and display actions together. This is used in th
 	/>
 </Actions>
 ```
+
+## Action types
+
+Name | HTML equivalent
+--- | --
+Click action | \<button/>
+Dropdown action | N/A
+Radio action | \<input type="radio"> 
+Toggle action | \<input type="checkbox">
+Divider | \<hr/>

docs/features/apps/README.md

@@ -24,8 +24,8 @@ The header menu is a useful component that can be added to app windows for quick
 
 #### Example
 
-```js
+```tsx
-// components/apps/_common/HeaderMenu.jsx
+// components/apps/_common/HeaderMenu.tsx
 
 <HeaderMenu
 	options={{
@@ -59,8 +59,8 @@ The webview template can be used to turn a webpage into an application by simply
 
 #### Example
 
-```js
+```ts
-// features/apps/apps.js
+// features/apps/apps.ts
 
 import { WebView } from "../../components/apps/templates/WebView";
 
@@ -78,8 +78,8 @@ export default class AppsManager {
 
 ### Adding a new app
 
-```js
+```tsx
-// components/apps/example/Example.jsx
+// components/apps/example/Example.tsx
 
 export function Example() {
 	return (
@@ -88,8 +88,8 @@ export function Example() {
 }
 ```
 
-```js
+```ts
-// features/apps/apps.js
+// features/apps/apps.ts
 
 import { Example } from "../../components/apps/example/Example";
 

docs/features/apps/terminal/README.md

@@ -10,22 +10,22 @@ A command line tool.
 
 ## Commands
 
-See [features/apps/terminal/commands.js](../../../../src/features/apps/terminal/commands.js) for a list of commands. You can edit this file to add/remove/edit commands.
+See [features/apps/terminal/commands](../../../../src/features/apps/terminal/commands) for a list of commands. You can add files to this folder to add commands or edit existing files to modify commands.
 
 ## Examples
 
 ### Touch command
 
-```js
+```ts
-// features/apps/terminal/commands/touch.js
+// features/apps/terminal/commands/touch.ts
 
 export const touch = new Command()
 	.setRequireArgs(true)
 	.setManual({
 		purpose: "Change file timestamps",
-		usage: "touch [OPTION]... FILE...",
+		usage: "touch [options] files",
 		description: "Update the access and modification times of each FILE to the current time.\n\n"
-			+ "A FILE argument that does not exist is created empty."
+			+ "A file argument that does not exist is created empty."
 	})
 	.setExecute(function(args, { currentDirectory }) {
 		const { name, extension } = VirtualFile.convertId(args[0]);

docs/features/settings/README.md

@@ -23,8 +23,8 @@ Each group of settings is controlled by a separate xml file. The virtual directo
 
 ### Example of component reading settings
 
-```js
+```tsx
-// components/desktop/Desktop.jsx
+// components/desktop/Desktop.tsx
 
 export function Desktop() {
 	const settingsManager = useSettingsManager();

docs/features/virtual-drive/README.md

@@ -10,8 +10,8 @@ The virtual drive is a virtual file and directory system. The root directory is
 
 ### Component interacting with virtual drive
 
-```js
+```tsx
-// components/apps/example/Example.jsx
+// components/apps/example/Example.tsx
 
 export function Example() {
 	const virtualRoot = useVirtualRoot();

docs/roadmap/README.md

@@ -10,10 +10,6 @@ For more detailed information, check the [task board](https://prozilla.notion.si
 
 A fully functional VSC clone called Code Editor.
 
-### Calculator App
-
-Simple calculator that can do basic equations.
-
 ### App centre
 
 Allows user to download additional apps

eslint.config.js

@@ -0,0 +1,59 @@
+// @ts-check
+
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+import react from "eslint-plugin-react";
+
+export default tseslint.config(
+	eslint.configs.recommended,
+	// ...tseslint.configs.recommendedTypeChecked,
+	{
+		languageOptions: {
+			parserOptions: {
+				project: "./tsconfig.json",
+				tsconfigRootDir: import.meta.dirname,
+				allowAutomaticSingleRunInference: true,
+			},
+		},
+		ignores: [
+			"eslint.config.js",
+		],
+		plugins: {
+			react
+		},
+		rules: {
+			"quotes": "off",
+   			"@typescript-eslint/quotes": ["error", "double"],
+			"no-unused-vars": "off",
+			"@typescript-eslint/ban-types": "off",
+			"indent": "off",
+			"@typescript-eslint/indent": [
+				"error",
+				"tab",
+				{
+					"SwitchCase": 1
+				}
+			],
+			"@typescript-eslint/semi": "error",
+			"no-var": "error",
+			"prefer-const": "error",
+			"object-curly-spacing": "off",
+			"@typescript-eslint/object-curly-spacing": [
+				"warn",
+				"always"
+			],
+			"default-case": "off",
+			"arrow-parens": "error",
+			"space-infix-ops": "off",
+			"@typescript-eslint/space-infix-ops": "warn",
+			"react/no-multi-comp": [
+				"error",
+				{
+					"ignoreStateless": true
+				}
+			],
+			"comma-spacing": "off",
+    		"@typescript-eslint/comma-spacing": "error"
+		},
+	}
+);

package.json

@@ -5,6 +5,7 @@
 	"author": "Prozilla",
 	"homepage": "https://os.prozilla.dev/",
 	"repository": "https://github.com/Prozilla/Prozilla-OS",
+	"type": "module",
 	"scripts": {
 		"start": "react-scripts start",
 		"build": "react-scripts build",
@@ -25,7 +26,7 @@
 		"@types/react": "^18.3.1",
 		"@types/react-dom": "^18.3.0",
 		"anser": "^2.1.1",
-		"core-js": "^3.31.1",
+		"core-js": "^3.37.0",
 		"escape-carriage": "^1.3.1",
 		"markdown-to-jsx": "^7.2.1",
 		"react": "^18.2.0",
@@ -37,80 +38,20 @@
 		"react-svg": "^16.1.18",
 		"react-syntax-highlighter": "^15.5.0",
 		"react-tabs": "^6.0.2",
-		"typescript": "^5.4.5",
 		"web-vitals": "^2.1.4"
 	},
 	"devDependencies": {
 		"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+		"@eslint/js": "^9.2.0",
 		"@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",
-		"gh-pages": "^5.0.0"
+		"gh-pages": "^5.0.0",
-	},
+		"typescript": "^4.9.5",
-	"eslintConfig": {
+		"typescript-eslint": "^7.8.0"
-		"parser": "@typescript-eslint/parser",
-		"extends": [
-			"react-app",
-			"react-app/jest"
-		],
-		"plugins": [
-			"react",
-			"jsdoc"
-		],
-		"rules": {
-			"indent": [
-				"error",
-				"tab",
-				{
-					"SwitchCase": 1
-				}
-			],
-			"semi": "error",
-			"no-var": "error",
-			"prefer-const": "error",
-			"quotes": [
-				"error",
-				"double"
-			],
-			"object-curly-spacing": [
-				"warn",
-				"always"
-			],
-			"default-case": "off",
-			"arrow-parens": "error",
-			"space-infix-ops": "warn",
-			"react/no-multi-comp": [
-				"error",
-				{
-					"ignoreStateless": true
-				}
-			],
-			"jsdoc/no-undefined-types": "warn",
-			"jsdoc/check-tag-names": "warn",
-			"jsdoc/check-types": [
-				"warn",
-				{}
-			],
-			"jsdoc/check-values": "warn",
-			"jsdoc/empty-tags": "warn",
-			"jsdoc/check-access": "warn",
-			"jsdoc/check-alignment": "warn",
-			"jsdoc/multiline-blocks": "warn",
-			"jsdoc/no-blank-block-descriptions": "warn",
-			"jsdoc/require-hyphen-before-param-description": "warn"
-		},
-		"settings": {
-			"jsdoc": {
-				"preferredTypes": {
-					"Object": "object",
-					"object.<>": "Object<>",
-					"Object.<>": "Object<>",
-					"object<>": "Object<>"
-				}
-			}
-		}
 	},
 	"browserslist": {
 		"production": [

src/components/actions/Actions.tsx

@@ -1,4 +1,4 @@
-import { Children, cloneElement, isValidElement, ReactNode } from "react";
+import { Children, cloneElement, isValidElement, ReactElement, ReactNode } from "react";
 import { useShortcuts } from "../../hooks/_utils/keyboard";
 import styles from "./Actions.module.css";
 import { useScreenBounds } from "../../hooks/_utils/screen";
@@ -36,7 +36,7 @@ export interface ActionsProps {
  * 	}}
  * />
  */
-export function Actions({ children, className, onAnyTrigger, triggerParams, avoidTaskbar = true }: ActionsProps): ReactNode {
+export function Actions({ children, className, onAnyTrigger, triggerParams, avoidTaskbar = true }: ActionsProps): ReactElement {
 	const isListener = (className === STYLES.SHORTCUTS_LISTENER);
 
 	const { ref, initiated, alignLeft, alignTop } = useScreenBounds({ avoidTaskbar });

src/components/actions/actions/DropdownAction.tsx

@@ -1,10 +1,10 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import styles from "../Actions.module.css";
 import { faCaretRight, IconDefinition } from "@fortawesome/free-solid-svg-icons";
-import { ReactNode, useState } from "react";
+import { ReactElement, useState } from "react";
 import { ActionProps } from "../Actions";
 
-export function DropdownAction({ label, icon, children }: ActionProps): ReactNode {
+export function DropdownAction({ label, icon, children }: ActionProps): ReactElement {
 	const [showContent, setShowContent] = useState(false);
 
 	const classNames = [styles.Dropdown];

src/components/actions/actions/RadioAction.tsx

@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { formatShortcut } from "../../../features/_utils/string.utils";
 import styles from "../Actions.module.css";
 import { faCircleDot } from "@fortawesome/free-solid-svg-icons";
-import { ReactNode, useState } from "react";
+import { ReactElement, useState } from "react";
 import { faCircle } from "@fortawesome/free-regular-svg-icons";
 import { ActionProps } from "../Actions";
 
@@ -25,7 +25,7 @@ interface RadioActionProps extends ActionProps {
 	initialIndex: number;
 }
 
-export function RadioAction({ actionId, options, initialIndex, onTrigger }: RadioActionProps): ReactNode {
+export function RadioAction({ actionId, options, initialIndex, onTrigger }: RadioActionProps): ReactElement {
 	const [activeIndex, setActiveIndex] = useState(initialIndex ?? 0);
 
 	return (<div key={actionId}>

src/components/actions/actions/ToggleAction.tsx

@@ -1,7 +1,7 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { formatShortcut } from "../../../features/_utils/string.utils";
 import styles from "../Actions.module.css";
-import { ReactNode, useState } from "react";
+import { ReactElement, useState } from "react";
 import { faSquare } from "@fortawesome/free-regular-svg-icons";
 import { faSquareCheck } from "@fortawesome/free-solid-svg-icons";
 import { ActionProps } from "../Actions";
@@ -10,7 +10,7 @@ interface ToggleActionProps extends ActionProps {
 	initialValue: boolean;
 }
 
-export function ToggleAction({ actionId, label, shortcut, initialValue, onTrigger }: ToggleActionProps): ReactNode {
+export function ToggleAction({ actionId, label, shortcut, initialValue, onTrigger }: ToggleActionProps): ReactElement {
 	const [active, setActive] = useState(initialValue ?? false);
 
 	return (<button key={actionId} className={styles.Button} tabIndex={0} onClick={(event) => {

src/components/apps/browser/Browser.tsx

@@ -6,9 +6,13 @@ import { faCaretLeft, faCaretRight, faHome, faRotateRight } from "@fortawesome/f
 import { HOME_URL, SEARCH_URL } from "../../../config/apps/browser.config";
 import { isValidUrl } from "../../../features/_utils/browser.utils";
 import { useHistory } from "../../../hooks/_utils/history";
+import { WindowProps } from "../../windows/WindowView";
 
-/** @type {import("../../windows/WindowView.jsx").windowProps} */
+interface BrowserProps extends WindowProps {
-export function Browser({ startUrl, focus }) {
+	startUrl?: string;
+}
+
+export function Browser({ startUrl, focus }: BrowserProps) {
 	const initialUrl = startUrl ?? HOME_URL;
 
 	const [url, setUrl] = useState(initialUrl);

src/components/apps/calculator/Calculator.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useState } from "react";
 import { Button } from "../../_utils/button/Button";
 import styles from "./Calculator.module.css";
+import { WindowProps } from "../../windows/WindowView";
 
-/** @type {import("../../windows/WindowView.jsx").windowProps} */
+export function Calculator({ active }: WindowProps) {
-export function Calculator({ active }) {
 	const [input, setInput] = useState("0");
 	const [firstNumber, setFirstNumber] = useState(null);
 	const [secondNumber, setSecondNumber] = useState(null);

src/components/apps/file-explorer/directory-list/DirectoryList.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useRef, useState } from "react";
+import { ReactElement, useEffect, useRef, useState } from "react";
 import { VirtualFile } from "../../../../features/virtual-drive/file/virtualFile";
 import { VirtualFolder } from "../../../../features/virtual-drive/folder/virtualFolder";
 import { Interactable } from "../../../_utils/interactable/Interactable";
@@ -30,7 +30,7 @@ interface DirectoryListProps {
 }
 
 export function DirectoryList({ directory, showHidden = false, folderClassName, fileClassName, className,
-	onContextMenuFile, onContextMenuFolder, onOpenFile, onOpenFolder, allowMultiSelect = true, onSelectionChange, ...props }: DirectoryListProps): ReactNode {
+	onContextMenuFile, onContextMenuFolder, onOpenFile, onOpenFolder, allowMultiSelect = true, onSelectionChange, ...props }: DirectoryListProps): ReactElement {
 	const [selectedFolders, setSelectedFolders] = useState([]);
 	const [selectedFiles, setSelectedFiles] = useState([]);
 

src/components/apps/media-viewer/MediaViewer.tsx

@@ -4,11 +4,14 @@ import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext"
 import styles from "./MediaViewer.module.css";
 import { APPS } from "../../../config/apps.config";
 import { IMAGE_FORMATS } from "../../../config/apps/mediaViewer.config";
+import { VirtualFile } from "../../../features/virtual-drive/file/virtualFile";
+import { WindowProps } from "../../windows/WindowView";
 
-/**
+interface MediaViewerProps extends WindowProps {
- * @param {import("../../windows/WindowView.jsx").windowProps} props 
+	file?: VirtualFile;
- */
+}
-export function MediaViewer({ file, close, setTitle }) {
+
+export function MediaViewer({ file, close, setTitle }: MediaViewerProps) {
 	const windowsManager = useWindowsManager();
 
 	useEffect(() => {

src/components/apps/settings/Settings.tsx

@@ -7,11 +7,13 @@ import { AppearanceSettings } from "./tabs/AppearanceSettings";
 import { AboutSettings } from "./tabs/AboutSettings";
 import { StorageTab } from "./tabs/StorageSettings";
 import { AppsSettings } from "./tabs/AppsSettings";
+import { WindowProps } from "../../windows/WindowView";
 
-/**
+interface SettingsProps extends WindowProps {
- * @param {import("../../windows/WindowView.jsx").windowProps} props 
+	tab?: number;
- */
+}
-export function Settings({ tab, modalsManager }) {
+
+export function Settings({ tab }: SettingsProps) {
 	return (
 		<Tabs
 			defaultIndex={tab ?? 0}

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

@@ -52,7 +52,7 @@ export function AppearanceSettings() {
 				Browse
 			</Button>
 			<div className={styles["Input"]}>
-				{(virtualRoot.navigate(WALLPAPERS_PATH) as VirtualFolder)?.getFiles()?.toReversed().map(({ id, source }) =>
+				{(virtualRoot.navigate(WALLPAPERS_PATH) as VirtualFolder)?.getFiles()?.reverse().map(({ id, source }) =>
 					<label className={styles["Image-select"]} key={id}>
 						<input
 							type="radio"

src/components/apps/text-editor/TextEditor.tsx

@@ -13,16 +13,19 @@ import { useWindowedModal } from "../../../hooks/modals/windowedModal";
 import { DEFAULT_FILE_SELECTOR_SIZE } from "../../../config/modals.config";
 import { FileSelector } from "../../modals/file-selector/FileSelector";
 import { SELECTOR_MODE } from "../../../config/apps/fileExplorer.config";
+import { VirtualFile } from "../../../features/virtual-drive/file/virtualFile";
+import { WindowProps } from "../../windows/WindowView";
 
 const OVERRIDES = {
 	a: MarkdownLink,
 	img: MarkdownImage,
 };
 
-/**
+interface TextEditorProps extends WindowProps {
- * @param {import("../../windows/WindowView.jsx").windowProps} props 
+	file?: VirtualFile;
- */
+}
-export function TextEditor({ file, setTitle, setIconUrl, close, mode, app, modalsManager }) {
+
+export function TextEditor({ file, setTitle, setIconUrl, close, mode, app, modalsManager }: TextEditorProps) {
 	const ref = useRef();
 	const windowsManager = useWindowsManager();
 	const [currentFile, setCurrentFile] = useState(file);
@@ -131,7 +134,7 @@ export function TextEditor({ file, setTitle, setIconUrl, close, mode, app, modal
 								size: DEFAULT_FILE_SELECTOR_SIZE,
 								Modal: (props) => <FileSelector
 									type={SELECTOR_MODE.SINGLE}
-									onFinish={(file) => {
+									onFinish={(file: VirtualFile) => {
 										setCurrentFile(file);
 										setUnsavedChanges(false);
 									}}

src/components/modals/ModalView.tsx

@@ -4,18 +4,11 @@ import OutsideClickListener from "../../hooks/_utils/outsideClick";
 import styles from "./ModalView.module.css";
 import { useEffect } from "react";
 
-/**
- * @typedef {object} modalProps
- * @param {object} props 
- * @param {Modal} props.modal 
- * @param {*} props.params
- * @param {Function} props.onFinish
- */
-
 export interface ModalProps {
 	modal: Modal;
 	params?: Record<string, any>;
 	children?: ReactNode;
+	onFinish?: Function;
 	[key: string]: any;
 }
 

src/components/modals/file-properties/FileProperties.tsx

@@ -5,7 +5,7 @@ import utilStyles from "../../../styles/utils.module.css";
 import { StorageManager } from "../../../features/storage/storageManager";
 import AppsManager from "../../../features/apps/appsManager";
 import { ModalProps } from "../ModalView.js";
-import { VirtualFile } from "../../../features/virtual-drive/file/virtualFile.js";
+import { VirtualFile } from "../../../features/virtual-drive/file/virtualFile";
 
 interface FilePropetiesProps extends ModalProps {
 	file: VirtualFile;

src/components/modals/share/Share.tsx

@@ -11,6 +11,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSquare } from "@fortawesome/free-regular-svg-icons";
 import { faSquareCheck } from "@fortawesome/free-solid-svg-icons";
 import { useAlert } from "../../../hooks/modals/alert";
+import { ModalProps } from "../ModalView";
 
 const APP_OPTIONS = {
 	"terminal": [
@@ -33,8 +34,7 @@ const APP_OPTIONS = {
 	]
 };
 
-/** @type {import("../ModalView.jsx").modalProps} */
+export function Share({ modal, params, ...props }: ModalProps) {
-export function Share({ modal, params, ...props }) {
 	const [appId, setAppId] = useState(params.appId ?? "");
 	const [fullscreen, setFullscreen] = useState(params.fullscreen ?? false);
 	const [options, setOptions] = useState({});

src/components/windows/WindowFallbackView.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useState } from "react";
+import { ReactElement, useEffect, useState } from "react";
 import { useAlert } from "../../hooks/modals/alert";
 import AppsManager from "../../features/apps/appsManager";
 import Vector2 from "../../features/math/vector2";
@@ -12,7 +12,7 @@ export interface WindowFallbackViewProps {
 }
 
 // I don't know why this component's type needs to be ReactNode instead of FC, it has something to do with the way it's implemented
-export default function WindowFallbackView({ error, resetErrorBoundary, app, closeWindow }: WindowFallbackViewProps): ReactNode {
+export default function WindowFallbackView({ error, resetErrorBoundary, app, closeWindow }: WindowFallbackViewProps): ReactElement {
 	const { alert } = useAlert();
 	const [alerted, setAlerted] = useState(false);
 

src/config/apps/textEditor.config.ts

@@ -3,6 +3,8 @@ export const ZOOM_FACTOR = 4;
 export const CODE_FORMATS = [
 	"js",
 	"jsx",
+	"ts",
+	"tsx",
 	"json",
 	"css",
 	"html",
@@ -13,5 +15,7 @@ export const CODE_FORMATS = [
 export const EXTENSION_TO_LANGUAGE = {
 	"js": "javascript",
 	"jsx": "javascript",
+	"ts": "typescript",
+	"tsx": "typescript",
 	"yml": "yaml",
 };

src/features/apps/app.tsx

@@ -1,6 +1,6 @@
-import React from "react";
 import Vector2 from "../math/vector2";
 import { WindowProps } from "../../components/windows/WindowView";
+import { FC } from "react";
 
 export default class App {
 	name: string;
@@ -14,14 +14,14 @@ export default class App {
 	/**
 	 * @param windowOptions - Default window options
 	 */
-	constructor(name: string, id: string, windowContent: React.FC, windowOptions?: object | null) {
+	constructor(name: string, id: string, windowContent: FC, windowOptions?: object | null) {
 		Object.assign(this, { name, id, windowContent, windowOptions });
 
 		if (this.windowContent == null)
 			console.warn(`App (${this.id}) is missing the windowContent property.`);
 	}
 
-	WindowContent = (props: React.JSX.IntrinsicAttributes & WindowProps) => {
+	WindowContent = (props: JSX.IntrinsicAttributes & WindowProps) => {
 		props = { ...props, ...this.windowOptions };
 
 		if (this.windowContent == null) {

src/features/virtual-drive/file/virtualFile.ts

@@ -131,6 +131,8 @@ export class VirtualFile extends VirtualBase {
 			case "js":
 			case "json":
 			case "jsx":
+			case "ts":
+			case "tsx":
 			case "css":
 			case "html":
 			case "yml":

src/features/virtual-drive/root/defaultData.ts

@@ -155,9 +155,9 @@ export function loadDefaultData(virtualRoot: VirtualRoot) {
 			.createFolder("features")
 			.createFolder("hooks")
 			.createFolder("styles")
-			.createFile("App", "jsx", (file) => {
+			.createFile("App", "tsx", (file) => {
-				file.setSource("https://raw.githubusercontent.com/Prozilla/Prozilla-OS/main/src/App.jsx");
+				file.setSource("https://raw.githubusercontent.com/Prozilla/Prozilla-OS/main/src/App.tsx");
-			}).createFile("index", "js", (file) => {
+			}).createFile("index", "tsx", (file) => {
 				file.setSource("https://raw.githubusercontent.com/Prozilla/Prozilla-OS/main/src/index");
 			});
 	});
@@ -172,5 +172,9 @@ export function loadDefaultData(virtualRoot: VirtualRoot) {
 		file.setSource("https://raw.githubusercontent.com/Prozilla/Prozilla-OS/main/README.md");
 	}).createFile("package", "json", (file) => {
 		file.setSource("https://raw.githubusercontent.com/Prozilla/Prozilla-OS/main/package.json");
+	}).createFile("deploy", "sh", (file) => {
+		file.setSource("https://raw.githubusercontent.com/Prozilla/Prozilla-OS/main/deploy.sh");
+	}).createFile("tsconfig", "json", (file) => {
+		file.setSource("https://raw.githubusercontent.com/Prozilla/Prozilla-OS/main/tsconfig.json");
 	});
 }

src/hooks/modals/contextMenu.tsx

@@ -5,22 +5,6 @@ import { ActionsProps, STYLES } from "../../components/actions/Actions";
 import { useModalsManager } from "./modalsManagerContext";
 import { ModalProps } from "../../components/modals/ModalView";
 
-/**
- * @callback onContextMenuType
- * @param {object} event
- * @param {object} params
- * @returns {Modal}
- */
-
-/**
- * @param {object} props 
- * @param {import("../../components/actions/Actions.jsx").actionsType} props.Actions
- * @returns {{
- * 	onContextMenu: onContextMenuType,
- * 	ShortcutsListener: import("../../components/actions/Actions.jsx").actionsType
- * }}
- */
-
 interface UseContextMenuParams {
 	Actions: FC<ActionsProps>;
 }

src/index.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./styles/global.css";
 import App from "./App";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import reportWebVitals from "./reportWebVitals";
 import { ASCII_LOGO, NAME } from "./config/branding.config";
 

tsconfig.json

@@ -1,110 +1,30 @@
 {
 	"compilerOptions": {
-		/* Visit https://aka.ms/tsconfig to read more about this file */
-		
-		/* Projects */
-		// "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
-		// "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
-		// "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
-		// "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
-		// "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
-		// "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
-		
 		/* Language and Environment */
-		"target": "ESNext", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+		"target": "ESNext",
-		// "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+		"jsx": "react-jsx",
-		"jsx": "react-jsx", /* Specify what JSX code is generated. */
-		// "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
-		// "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
-		// "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
-		// "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
-		// "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
-		// "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
-		// "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
-		// "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
-		// "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 		
 		/* Modules */
-		"module": "commonjs", /* Specify what module code is generated. */
+		"module": "commonjs",
-		// "rootDir": "./",                                  /* Specify the root folder within your source files. */
+		"moduleResolution": "Node",
-		"moduleResolution": "Node", /* Specify how TypeScript looks up a file from a given module specifier. */
+		"types": ["webpack-env"],
-		// "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+		"allowUmdGlobalAccess": true,
-		// "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+		"resolveJsonModule": true,
-		// "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
-		// "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
-		"types": ["webpack-env"],                                      /* Specify type package names to be included without being referenced in a source file. */
-		"allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
-		// "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
-		// "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
-		// "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
-		// "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
-		// "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
-		"resolveJsonModule": true,                        /* Enable importing .json files. */
-		// "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
-		// "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
 		
 		/* JavaScript Support */
-		"allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+		"allowJs": true,
-		"checkJs": false, /* Enable error reporting in type-checked JavaScript files. */
+		"checkJs": true,
-		// "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
 		
 		/* Emit */
-		// "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+		"noEmit": true,
-		// "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
-		// "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
-		// "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
-		// "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
-		// "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
-		// "outDir": "./",                                   /* Specify an output folder for all emitted files. */
-		// "removeComments": true,                           /* Disable emitting comments. */
-		"noEmit": true,                                   /* Disable emitting files from a compilation. */
-		// "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
-		// "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
-		// "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
-		// "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
-		// "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
-		// "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
-		// "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
-		// "newLine": "crlf",                                /* Set the newline character for emitting files. */
-		// "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
-		// "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
-		// "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
-		// "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
-		// "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
-		// "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
 		
 		/* Interop Constraints */
-		// "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+		"allowSyntheticDefaultImports": true,
-		// "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
+		"esModuleInterop": true,
-		"allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+		"forceConsistentCasingInFileNames": true,
-		"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
-		// "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
-		"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
 		
 		/* Type Checking */
-		"strict": false, /* Enable all strict type-checking options. */
+		"strict": false,
-		// "noImplicitAny": false,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
-		// "strictNullChecks": false,                         /* When type checking, take into account 'null' and 'undefined'. */
-		// "strictFunctionTypes": false,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
-		// "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
-		// "strictPropertyInitialization": false,             /* Check for class properties that are declared but not set in the constructor. */
-		// "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
-		// "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
-		// "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
-		// "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
-		// "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
-		// "exactOptionalPropertyTypes": false,               /* Interpret optional property types as written, rather than adding 'undefined'. */
-		// "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
-		// "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
-		// "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
-		// "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
-		// "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
-		// "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
-		// "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
-		
-		/* Completeness */
-		// "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-		// "skipLibCheck": true /* Skip type checking all .d.ts files. */
 	},
 	"include": [
 		"src/**/*"