Started migration to TypeScript
This commit is contained in:
parent
3b5f205b92
commit
f449e6cb68
73 changed files with 1741 additions and 785 deletions
1654
package-lock.json
generated
1654
package-lock.json
generated
File diff suppressed because it is too large
Load diff
10
package.json
10
package.json
|
|
@ -21,6 +21,9 @@
|
|||
"@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",
|
||||
"anser": "^2.1.1",
|
||||
"core-js": "^3.31.1",
|
||||
"escape-carriage": "^1.3.1",
|
||||
|
|
@ -34,14 +37,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",
|
||||
"@types/webpack-env": "^1.18.4",
|
||||
"@typescript-eslint/eslint-plugin": "^7.8.0",
|
||||
"@typescript-eslint/parser": "^7.8.0",
|
||||
"eslint-plugin-jsdoc": "^46.4.6",
|
||||
"eslint-plugin-react": "^7.34.1",
|
||||
"gh-pages": "^5.0.0"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
|
|
@ -79,7 +88,6 @@
|
|||
}
|
||||
],
|
||||
"jsdoc/no-undefined-types": "warn",
|
||||
"jsdoc/require-param": "warn",
|
||||
"jsdoc/check-tag-names": "warn",
|
||||
"jsdoc/check-types": [
|
||||
"warn",
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
import styles from "./App.module.css";
|
||||
import { Taskbar } from "./components/taskbar/Taskbar.jsx";
|
||||
import { WindowsManagerProvider } from "./hooks/windows/windowsManagerContext.js";
|
||||
import { WindowsManagerProvider } from "./hooks/windows/windowsManagerContext";
|
||||
import { WindowsView } from "./components/windows/WindowsView.jsx";
|
||||
import { VirtualRootProvider } from "./hooks/virtual-drive/virtualRootContext.js";
|
||||
import { VirtualRootProvider } from "./hooks/virtual-drive/virtualRootContext";
|
||||
import { Desktop } from "./components/desktop/Desktop.jsx";
|
||||
import { SettingsManagerProvider } from "./hooks/settings/settingsManagerContext.js";
|
||||
import { SettingsManagerProvider } from "./hooks/settings/settingsManagerContext";
|
||||
import { ModalsView } from "./components/modals/ModalsView.jsx";
|
||||
import { useEffect } from "react";
|
||||
import { ZIndexManagerProvider } from "./hooks/z-index/zIndexManagerContext.js";
|
||||
import React, { FC, useEffect } from "react";
|
||||
import { ZIndexManagerProvider } from "./hooks/z-index/zIndexManagerContext";
|
||||
import { TrackingManager } from "./features/tracking/trackingManager.js";
|
||||
import { ModalsManagerProvider } from "./hooks/modals/modalsManagerContext.js";
|
||||
import { ModalsManagerProvider } from "./hooks/modals/modalsManagerContext";
|
||||
|
||||
TrackingManager.initialize();
|
||||
|
||||
function App() {
|
||||
const App: FC = () => {
|
||||
useEffect(() => {
|
||||
const onContextMenu = (event) => {
|
||||
const onContextMenu = (event: Event) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
|
|
@ -44,6 +44,6 @@ function App() {
|
|||
</ZIndexManagerProvider>
|
||||
</VirtualRootProvider>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default App;
|
||||
export default App;
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useVirtualRoot } from "../../../hooks/virtual-drive/virtualRootContext.js";
|
||||
import { useVirtualRoot } from "../../../hooks/virtual-drive/virtualRootContext";
|
||||
import styles from "./FileExplorer.module.css";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faArrowUp, faCaretLeft, faCaretRight, faCircleInfo, faCog, faDesktop, faFileLines, faHouse, faImage, faPlus, faSearch, faTrash } from "@fortawesome/free-solid-svg-icons";
|
||||
import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext.js";
|
||||
import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext";
|
||||
import { useContextMenu } from "../../../hooks/modals/contextMenu.js";
|
||||
import { QuickAccessButton } from "./QuickAccessButton.jsx";
|
||||
import { useWindowedModal } from "../../../hooks/modals/windowedModal.js";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
import { useEffect } from "react";
|
||||
import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext.js";
|
||||
import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext";
|
||||
import styles from "./MediaViewer.module.css";
|
||||
import { APPS } from "../../../config/apps.config.js";
|
||||
import { IMAGE_FORMATS } from "../../../config/apps/mediaViewer.config.js";
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ import { Button } from "../../../_utils/button/Button.jsx";
|
|||
import styles from "../Settings.module.css";
|
||||
import utilStyles from "../../../../styles/utils.module.css";
|
||||
import Vector2 from "../../../../features/math/vector2.js";
|
||||
import { useWindowsManager } from "../../../../hooks/windows/windowsManagerContext.js";
|
||||
import { useVirtualRoot } from "../../../../hooks/virtual-drive/virtualRootContext.js";
|
||||
import { useWindowsManager } from "../../../../hooks/windows/windowsManagerContext";
|
||||
import { useVirtualRoot } from "../../../../hooks/virtual-drive/virtualRootContext";
|
||||
import { NAME } from "../../../../config/branding.config.js";
|
||||
|
||||
export function AboutSettings() {
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@ import AppsManager from "../../../../features/apps/appsManager.js";
|
|||
import { ImagePreview } from "../../file-explorer/directory-list/ImagePreview.jsx";
|
||||
import styles from "../Settings.module.css";
|
||||
import { faEllipsisVertical, faThumbTack } from "@fortawesome/free-solid-svg-icons";
|
||||
import { useWindowsManager } from "../../../../hooks/windows/windowsManagerContext.js";
|
||||
import { useWindowsManager } from "../../../../hooks/windows/windowsManagerContext";
|
||||
import { useContextMenu } from "../../../../hooks/modals/contextMenu.js";
|
||||
import { Actions } from "../../../actions/Actions.jsx";
|
||||
import { ClickAction } from "../../../actions/actions/ClickAction.jsx";
|
||||
import { removeFromArray } from "../../../../features/_utils/array.utils.js";
|
||||
import { useSettingsManager } from "../../../../hooks/settings/settingsManagerContext.js";
|
||||
import { useSettingsManager } from "../../../../hooks/settings/settingsManagerContext";
|
||||
import { SettingsManager } from "../../../../features/settings/settingsManager.js";
|
||||
|
||||
export function AppOption({ app, pins, setPins }) {
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ import { useEffect, useState } from "react";
|
|||
import { SettingsManager } from "../../../../features/settings/settingsManager.js";
|
||||
import styles from "../Settings.module.css";
|
||||
import utilStyles from "../../../../styles/utils.module.css";
|
||||
import { useVirtualRoot } from "../../../../hooks/virtual-drive/virtualRootContext.js";
|
||||
import { useSettingsManager } from "../../../../hooks/settings/settingsManagerContext.js";
|
||||
import { useVirtualRoot } from "../../../../hooks/virtual-drive/virtualRootContext";
|
||||
import { useSettingsManager } from "../../../../hooks/settings/settingsManagerContext";
|
||||
import { WALLPAPERS_PATH } from "../../../../config/apps/settings.config.js";
|
||||
import { useWindowedModal } from "../../../../hooks/modals/windowedModal.js";
|
||||
import ModalsManager from "../../../../features/modals/modalsManager.js";
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import styles from "../Settings.module.css";
|
||||
import AppsManager from "../../../../features/apps/appsManager.js";
|
||||
import { useSettingsManager } from "../../../../hooks/settings/settingsManagerContext.js";
|
||||
import { useSettingsManager } from "../../../../hooks/settings/settingsManagerContext";
|
||||
import { SettingsManager } from "../../../../features/settings/settingsManager.js";
|
||||
import ModalsManager from "../../../../features/modals/modalsManager.js";
|
||||
import { AppOption } from "./AppOption.jsx";
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import utilStyles from "../../../../styles/utils.module.css";
|
|||
import { round } from "../../../../features/math/round.js";
|
||||
import { ProgressBar } from "../../../_utils/progress-bar/ProgressBar.jsx";
|
||||
import { Button } from "../../../_utils/button/Button.jsx";
|
||||
import { useVirtualRoot } from "../../../../hooks/virtual-drive/virtualRootContext.js";
|
||||
import { useVirtualRoot } from "../../../../hooks/virtual-drive/virtualRootContext";
|
||||
import { StorageManager } from "../../../../features/storage/storageManager.js";
|
||||
|
||||
export function StorageTab() {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { useEffect, useRef, useState } from "react";
|
||||
import styles from "./Terminal.module.css";
|
||||
import { useVirtualRoot } from "../../../hooks/virtual-drive/virtualRootContext.js";
|
||||
import { useVirtualRoot } from "../../../hooks/virtual-drive/virtualRootContext";
|
||||
import { clamp } from "../../../features/math/clamp.js";
|
||||
import { OutputLine } from "./OutputLine.jsx";
|
||||
import { InputLine } from "./InputLine.jsx";
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import AppsManager from "../../../features/apps/appsManager.js";
|
|||
import { TITLE_SEPARATOR } from "../../../config/windows.config.js";
|
||||
import { MarkdownLink } from "./overrides/MarkdownLink.jsx";
|
||||
import { MarkdownImage } from "./overrides/MarkdownImage.jsx";
|
||||
import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext.js";
|
||||
import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext";
|
||||
import SyntaxHighlighter from "react-syntax-highlighter";
|
||||
import { useWindowedModal } from "../../../hooks/modals/windowedModal.js";
|
||||
import { DEFAULT_FILE_SELECTOR_SIZE } from "../../../config/modals.config.js";
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import { memo, useState } from "react";
|
||||
import { SettingsManager } from "../../features/settings/settingsManager.js";
|
||||
import { useSettingsManager } from "../../hooks/settings/settingsManagerContext.js";
|
||||
import { useSettingsManager } from "../../hooks/settings/settingsManagerContext";
|
||||
import styles from "./Desktop.module.css";
|
||||
import { useEffect } from "react";
|
||||
import { useWindowsManager } from "../../hooks/windows/windowsManagerContext.js";
|
||||
import { useWindowsManager } from "../../hooks/windows/windowsManagerContext";
|
||||
import { useContextMenu } from "../../hooks/modals/contextMenu.js";
|
||||
import { FALLBACK_ICON_SIZE, FALLBACK_WALLPAPER } from "../../config/desktop.config.js";
|
||||
import { reloadViewport } from "../../features/_utils/browser.utils.js";
|
||||
import { useVirtualRoot } from "../../hooks/virtual-drive/virtualRootContext.js";
|
||||
import { useVirtualRoot } from "../../hooks/virtual-drive/virtualRootContext";
|
||||
import { DirectoryList } from "../apps/file-explorer/directory-list/DirectoryList.jsx";
|
||||
import { APPS, APP_ICONS, APP_NAMES } from "../../config/apps.config.js";
|
||||
import Vector2 from "../../features/math/vector2.js";
|
||||
|
|
@ -21,8 +21,8 @@ import { Divider } from "../actions/actions/Divider.jsx";
|
|||
import { isValidInteger } from "../../features/_utils/number.utils.js";
|
||||
import { useWindowedModal } from "../../hooks/modals/windowedModal.js";
|
||||
import { Share } from "../modals/share/Share.jsx";
|
||||
import ModalsManager from "../../features/modals/modalsManager.js";
|
||||
import { useModalsManager } from "../../hooks/modals/modalsManagerContext.js";
|
||||
import ModalsManager from "../../features/modals/modalsManager";
|
||||
import { useModalsManager } from "../../hooks/modals/modalsManagerContext";
|
||||
|
||||
export const Desktop = memo(() => {
|
||||
const settingsManager = useSettingsManager();
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { memo, useEffect, useRef, useState } from "react";
|
||||
import { ModalView } from "./ModalView.jsx";
|
||||
import styles from "./ModalsView.module.css";
|
||||
import { useModals } from "../../hooks/modals/modalsContext.js";
|
||||
import { useModalsManager } from "../../hooks/modals/modalsManagerContext.js";
|
||||
import { useModals } from "../../hooks/modals/modalsContext";
|
||||
import { useModalsManager } from "../../hooks/modals/modalsManagerContext";
|
||||
|
||||
export const ModalsView = memo(() => {
|
||||
const ref = useRef(null);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { WindowedModal } from "../_utils/WindowedModal.jsx";
|
|||
import styles from "./FileSelector.module.css";
|
||||
import { VirtualFile } from "../../../features/virtual-drive/file/virtualFile.js";
|
||||
import Modal from "../../../features/modals/modal.js";
|
||||
import { useModalsManager } from "../../../hooks/modals/modalsManagerContext.js";
|
||||
import { useModalsManager } from "../../../hooks/modals/modalsManagerContext";
|
||||
|
||||
/**
|
||||
* @callback onFinish
|
||||
|
|
|
|||
|
|
@ -17,14 +17,14 @@ import { useContextMenu } from "../../hooks/modals/contextMenu.js";
|
|||
import { Actions } from "../actions/Actions.jsx";
|
||||
import { ClickAction } from "../actions/actions/ClickAction.jsx";
|
||||
import { APPS, APP_NAMES } from "../../config/apps.config.js";
|
||||
import { useWindowsManager } from "../../hooks/windows/windowsManagerContext.js";
|
||||
import { useWindowsManager } from "../../hooks/windows/windowsManagerContext";
|
||||
import { TASKBAR_HEIGHT } from "../../config/taskbar.config.js";
|
||||
import { useSettingsManager } from "../../hooks/settings/settingsManagerContext.js";
|
||||
import { useSettingsManager } from "../../hooks/settings/settingsManagerContext";
|
||||
import { SettingsManager } from "../../features/settings/settingsManager.js";
|
||||
import { useWindows } from "../../hooks/windows/windowsContext.js";
|
||||
import { useWindows } from "../../hooks/windows/windowsContext";
|
||||
import { ZIndexManager } from "../../features/z-index/zIndexManager.js";
|
||||
import { useZIndex } from "../../hooks/z-index/zIndex.js";
|
||||
import { useModalsManager } from "../../hooks/modals/modalsManagerContext.js";
|
||||
import { useModalsManager } from "../../hooks/modals/modalsManagerContext";
|
||||
|
||||
export const Taskbar = memo(() => {
|
||||
const ref = useRef(null);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { memo } from "react";
|
|||
import App from "../../../features/apps/app.js";
|
||||
import styles from "./AppIcon.module.css";
|
||||
import { ReactSVG } from "react-svg";
|
||||
import { useSettingsManager } from "../../../hooks/settings/settingsManagerContext.js";
|
||||
import { useSettingsManager } from "../../../hooks/settings/settingsManagerContext";
|
||||
import { useContextMenu } from "../../../hooks/modals/contextMenu.js";
|
||||
import ModalsManager from "../../../features/modals/modalsManager.js";
|
||||
import { Actions } from "../../actions/Actions.jsx";
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|||
import styles from "./HomeMenu.module.css";
|
||||
import appStyles from "./AppList.module.css";
|
||||
import { faCircleInfo, faFileLines, faGear, faImage, faPowerOff } from "@fortawesome/free-solid-svg-icons";
|
||||
import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext.js";
|
||||
import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext";
|
||||
import AppsManager from "../../../features/apps/appsManager.js";
|
||||
import { ReactSVG } from "react-svg";
|
||||
import { closeViewport } from "../../../features/_utils/browser.utils.js";
|
||||
import { useKeyboardListener } from "../../../hooks/_utils/keyboard.js";
|
||||
import { useVirtualRoot } from "../../../hooks/virtual-drive/virtualRootContext.js";
|
||||
import { useVirtualRoot } from "../../../hooks/virtual-drive/virtualRootContext";
|
||||
import { useEffect, useState } from "react";
|
||||
import Vector2 from "../../../features/math/vector2.js";
|
||||
import utilStyles from "../../../styles/utils.module.css";
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import styles from "./SearchMenu.module.css";
|
||||
import appStyles from "./AppList.module.css";
|
||||
import AppsManager from "../../../features/apps/appsManager.js";
|
||||
import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext.js";
|
||||
import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext";
|
||||
import { ReactSVG } from "react-svg";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useKeyboardListener } from "../../../hooks/_utils/keyboard.js";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { useModalsManager } from "../../hooks/modals/modalsManagerContext.js";
|
||||
import { useModalsManager } from "../../hooks/modals/modalsManagerContext";
|
||||
import { useAlert } from "../../hooks/modals/alert.js";
|
||||
import AppsManager from "../../features/apps/appsManager.js";
|
||||
import Vector2 from "../../features/math/vector2.js";
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|||
import styles from "./WindowView.module.css";
|
||||
import { faExpand, faMinus, faWindowMaximize as fasWindowMaximize, faTimes, faXmark } from "@fortawesome/free-solid-svg-icons";
|
||||
import { ReactSVG } from "react-svg";
|
||||
import { useWindowsManager } from "../../hooks/windows/windowsManagerContext.js";
|
||||
import { useWindowsManager } from "../../hooks/windows/windowsManagerContext";
|
||||
import Draggable from "react-draggable";
|
||||
import { memo, useEffect, useRef, useState } from "react";
|
||||
import App from "../../features/apps/app.js";
|
||||
|
|
@ -17,7 +17,7 @@ import { useScreenDimensions } from "../../hooks/_utils/screen.js";
|
|||
import { NAME } from "../../config/branding.config.js";
|
||||
import { setViewportIcon, setViewportTitle } from "../../features/_utils/browser.utils.js";
|
||||
import { ZIndexManager } from "../../features/z-index/zIndexManager.js";
|
||||
import { useZIndex } from "../../hooks/z-index/zIndex.js";
|
||||
import { useZIndex } from "../../hooks/z-index/zIndex";
|
||||
import { useWindowedModal } from "../../hooks/modals/windowedModal.js";
|
||||
import { Divider } from "../actions/actions/Divider.jsx";
|
||||
import ModalsManager from "../../features/modals/modalsManager.js";
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { useWindows } from "../../hooks/windows/windowsContext.js";
|
||||
import { useWindowsManager } from "../../hooks/windows/windowsManagerContext.js";
|
||||
import { useWindows } from "../../hooks/windows/windowsContext";
|
||||
import { useWindowsManager } from "../../hooks/windows/windowsManagerContext";
|
||||
import { memo, useEffect, useState } from "react";
|
||||
import { WindowView } from "./WindowView.jsx";
|
||||
import { useSettingsManager } from "../../hooks/settings/settingsManagerContext.js";
|
||||
import { SettingsManager } from "../../features/settings/settingsManager.js";
|
||||
import { useSettingsManager } from "../../hooks/settings/settingsManagerContext";
|
||||
import { SettingsManager } from "../../features/settings/settingsManager";
|
||||
import { NAME, TAG_LINE } from "../../config/branding.config.js";
|
||||
import { getViewportParams, setViewportIcon, setViewportTitle } from "../../features/_utils/browser.utils.js";
|
||||
import { removeDuplicatesFromArray } from "../../features/_utils/array.utils.js";
|
||||
|
|
@ -17,6 +17,7 @@ export const WindowsView = memo(() => {
|
|||
// Sort windows
|
||||
useEffect(() => {
|
||||
setSortedWindows([...windows].sort((windowA, windowB) =>
|
||||
// @ts-ignore
|
||||
windowA.lastInteraction - windowB.lastInteraction
|
||||
));
|
||||
}, [windows]);
|
||||
|
|
|
|||
|
|
@ -1,115 +0,0 @@
|
|||
import { VirtualFolder } from "../../virtual-drive/folder/virtualFolder.js";
|
||||
import { VirtualRoot } from "../../virtual-drive/root/virtualRoot.js";
|
||||
|
||||
/**
|
||||
* @callback executeType
|
||||
* @param {string[]} args
|
||||
* @param {object} options
|
||||
* @param {Function} options.promptOutput
|
||||
* @param {Function} options.pushHistory
|
||||
* @param {VirtualRoot} options.virtualRoot
|
||||
* @param {VirtualFolder} options.currentDirectory
|
||||
* @param {Function} options.setCurrentDirectory
|
||||
* @param {string} options.username
|
||||
* @param {string} options.hostname
|
||||
* @param {string} options.rawInputValue
|
||||
* @param {string[]} options.options
|
||||
* @param {Function} options.exit
|
||||
* @param {[]} options.inputs
|
||||
* @returns {string|{ blank: boolean }}
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {object} optionType
|
||||
* @property {string} long
|
||||
* @property {string} short
|
||||
* @property {boolean} isInput
|
||||
*/
|
||||
|
||||
export default class Command {
|
||||
/** @type {string} */
|
||||
name;
|
||||
|
||||
/** @type {optionType[]} */
|
||||
options = [];
|
||||
|
||||
/** @type {executeType} */
|
||||
execute = () => {};
|
||||
|
||||
/**
|
||||
* @param {string} name
|
||||
* @returns {Command}
|
||||
*/
|
||||
setName(name) {
|
||||
this.name = name;
|
||||
|
||||
if (!this.manual?.usage) {
|
||||
if (!this.manual)
|
||||
this.manual = {};
|
||||
|
||||
this.manual.usage = name;
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {executeType} execute
|
||||
* @returns {Command}
|
||||
*/
|
||||
setExecute(execute) {
|
||||
this.execute = execute;
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {boolean} value
|
||||
* @returns {Command}
|
||||
*/
|
||||
setRequireArgs(value) {
|
||||
this.requireArgs = value;
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {boolean} value
|
||||
* @returns {Command}
|
||||
*/
|
||||
setRequireOptions(value) {
|
||||
this.requireOptions = value;
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {{ purpose: string, usage: string, description: string, options: object }} manual
|
||||
* @returns {Command}
|
||||
*/
|
||||
setManual({ purpose, usage, description, options }) {
|
||||
this.manual = { purpose, usage, description, options };
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {optionType} option
|
||||
* @returns {Command}
|
||||
*/
|
||||
addOption({ short, long, isInput }) {
|
||||
this.options.push({ short, long, isInput });
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} key
|
||||
* @returns {optionType}
|
||||
*/
|
||||
getOption(key) {
|
||||
let matchingOption = null;
|
||||
|
||||
this.options.forEach((option) => {
|
||||
if (option.short === key || option.long === key)
|
||||
matchingOption = option;
|
||||
});
|
||||
|
||||
return matchingOption;
|
||||
}
|
||||
}
|
||||
88
src/features/apps/terminal/command.ts
Normal file
88
src/features/apps/terminal/command.ts
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
import { VirtualFolder } from "../../virtual-drive/folder/virtualFolder.js";
|
||||
import { VirtualRoot } from "../../virtual-drive/root/virtualRoot.js";
|
||||
|
||||
type Option = {
|
||||
long: string,
|
||||
short: string,
|
||||
isInput: boolean
|
||||
};
|
||||
|
||||
type Execute = (args: string[], options: {
|
||||
promptOutput: void,
|
||||
pushHistory: void,
|
||||
virtualRoot: VirtualRoot,
|
||||
currentDirectory: VirtualFolder,
|
||||
setCurrentDirectory: void,
|
||||
username: string,
|
||||
hostname: string,
|
||||
rawInputValue: string,
|
||||
options: string[],
|
||||
exit: void,
|
||||
inputs: string[]
|
||||
}) => string | { blank: boolean } | void;
|
||||
|
||||
type Manual = {
|
||||
purpose?: string,
|
||||
usage?: string,
|
||||
description?: string,
|
||||
options?: object
|
||||
};
|
||||
|
||||
export default class Command {
|
||||
name: string | undefined;
|
||||
options: Option[] = [];
|
||||
manual: Manual;
|
||||
requireArgs: boolean;
|
||||
requireOptions: boolean;
|
||||
|
||||
execute: Execute = () => {};
|
||||
|
||||
setName(name: string): Command {
|
||||
this.name = name;
|
||||
|
||||
if (!this.manual?.usage) {
|
||||
if (!this.manual)
|
||||
this.manual = {};
|
||||
|
||||
this.manual.usage = name;
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
setExecute(execute: Execute): Command {
|
||||
this.execute = execute;
|
||||
return this;
|
||||
}
|
||||
|
||||
setRequireArgs(value: boolean): Command {
|
||||
this.requireArgs = value;
|
||||
return this;
|
||||
}
|
||||
|
||||
setRequireOptions(value: boolean): Command {
|
||||
this.requireOptions = value;
|
||||
return this;
|
||||
}
|
||||
|
||||
setManual({ purpose, usage, description, options }: Manual): Command {
|
||||
this.manual = { purpose, usage, description, options };
|
||||
return this;
|
||||
}
|
||||
|
||||
addOption({ short, long, isInput }: Option): Command {
|
||||
this.options.push({ short, long, isInput });
|
||||
return this;
|
||||
}
|
||||
|
||||
getOption(key: string): Option {
|
||||
let matchingOption = null;
|
||||
|
||||
this.options.forEach((option) => {
|
||||
if (option.short === key || option.long === key)
|
||||
matchingOption = option;
|
||||
});
|
||||
|
||||
return matchingOption;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import Command from "./command.js";
|
||||
import Command from "./command";
|
||||
|
||||
let commands = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { VirtualFile } from "../../../virtual-drive/file/virtualFile.js";
|
||||
import { formatError } from "../_utils/terminal.utils.js";
|
||||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
|
||||
export const cat = new Command()
|
||||
.setRequireArgs(true)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { formatError } from "../_utils/terminal.utils.js";
|
||||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
|
||||
export const cd = new Command()
|
||||
.setManual({
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
|
||||
export const clear = new Command()
|
||||
.setManual({
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
import CommandsManager from "../commands.js";
|
||||
|
||||
export const compgen = new Command()
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { MAX_WIDTH } from "../../../../config/apps/terminal.config.js";
|
||||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
|
||||
const COW = `
|
||||
\\ ^__^
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
|
||||
export const dir = new Command()
|
||||
.setManual({
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
|
||||
export const echo = new Command()
|
||||
.setManual({
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
|
||||
export const exit = new Command()
|
||||
.setManual({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { randomFromArray } from "../../../_utils/array.utils.js";
|
||||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
|
||||
/**
|
||||
* Source: https://github.com/shlomif/fortune-mod/blob/master/fortune-mod/datfiles/fortunes
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { ANSI } from "../../../../config/apps/terminal.config.js";
|
||||
import { formatError } from "../_utils/terminal.utils.js";
|
||||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
import CommandsManager from "../commands.js";
|
||||
|
||||
export const help = new Command()
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
|
||||
export const hostname = new Command()
|
||||
.setManual({
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { ANSI } from "../../../../config/apps/terminal.config.js";
|
||||
import { removeAnsi } from "../_utils/terminal.utils.js";
|
||||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
|
||||
const COLUMN_WIDTH = 5;
|
||||
const ROW_OFFSET = 2;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { ANSI } from "../../../../config/apps/terminal.config.js";
|
||||
import { formatError } from "../_utils/terminal.utils.js";
|
||||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
|
||||
export const ls = new Command()
|
||||
.setManual({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { formatError } from "../_utils/terminal.utils.js";
|
||||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
|
||||
export const make = new Command()
|
||||
.setRequireArgs(true)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { ANSI } from "../../../../config/apps/terminal.config.js";
|
||||
import { formatError } from "../_utils/terminal.utils.js";
|
||||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
import CommandsManager from "../commands.js";
|
||||
|
||||
const MARGIN = 5;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
|
||||
export const mkdir = new Command()
|
||||
.setManual({
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import { APPS } from "../../../../config/apps.config.js";
|
||||
import { ANSI } from "../../../../config/apps/terminal.config.js";
|
||||
import { ANSI_ASCII_LOGO, ANSI_LOGO_COLOR, NAME } from "../../../../config/branding.config.js";
|
||||
import { START_DATE } from "../../../../index.js";
|
||||
import { START_DATE } from "../../../../index";
|
||||
import { formatRelativeTime } from "../../../_utils/date.utils.js";
|
||||
import AppsManager from "../../appsManager.js";
|
||||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
|
||||
export const neofetch = new Command()
|
||||
.setManual({
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
|
||||
export const pwd = new Command()
|
||||
.setManual({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { reloadViewport } from "../../../_utils/browser.utils.js";
|
||||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
|
||||
export const reboot = new Command()
|
||||
.setManual({
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
import CommandsManager from "../commands.js";
|
||||
|
||||
export const reload = new Command()
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
|
||||
export const rev = new Command()
|
||||
.setManual({
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { VirtualFile } from "../../../virtual-drive/file/virtualFile.js";
|
||||
import { formatError } from "../_utils/terminal.utils.js";
|
||||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
|
||||
export const rm = new Command()
|
||||
.setRequireArgs(true)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { formatError } from "../_utils/terminal.utils.js";
|
||||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
|
||||
export const rmdir = new Command()
|
||||
.setRequireArgs(true)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { formatError } from "../_utils/terminal.utils.js";
|
||||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
import Stream from "../stream.js";
|
||||
|
||||
const ANIMATION_SPEED = 1.25;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { VirtualFile } from "../../../virtual-drive/file/virtualFile.js";
|
||||
import { formatError } from "../_utils/terminal.utils.js";
|
||||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
|
||||
export const touch = new Command()
|
||||
.setRequireArgs(true)
|
||||
.setManual({
|
||||
purpose: "Changes file timestamps",
|
||||
purpose: "Change file timestamps",
|
||||
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."
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { START_DATE } from "../../../../index.js";
|
||||
import { START_DATE } from "../../../../index";
|
||||
import { formatRelativeTime } from "../../../_utils/date.utils.js";
|
||||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
|
||||
|
||||
export const uptime = new Command()
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { ANSI } from "../../../../config/apps/terminal.config.js";
|
||||
import { formatError } from "../_utils/terminal.utils.js";
|
||||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
import CommandsManager from "../commands.js";
|
||||
|
||||
export const whatis = new Command()
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import Command from "../command.js";
|
||||
import Command from "../command";
|
||||
|
||||
export const whoami = new Command()
|
||||
.setManual({
|
||||
|
|
|
|||
4
src/globals.d.ts
vendored
Normal file
4
src/globals.d.ts
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
declare module "*.module.css" {
|
||||
const classes: { [key: string]: string };
|
||||
export default classes;
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@ import { useCallback } from "react";
|
|||
import Vector2 from "../../features/math/vector2.js";
|
||||
import Modal from "../../features/modals/modal.js";
|
||||
import { STYLES } from "../../components/actions/Actions.jsx";
|
||||
import { useModalsManager } from "./modalsManagerContext.js";
|
||||
import { useModalsManager } from "./modalsManagerContext";
|
||||
|
||||
/**
|
||||
* @callback onContextMenuType
|
||||
|
|
|
|||
|
|
@ -1,33 +0,0 @@
|
|||
import { createContext, useCallback, useContext, useState } from "react";
|
||||
import Modal from "../../features/modals/modal.js";
|
||||
|
||||
const ModalsContext = createContext();
|
||||
|
||||
/**
|
||||
* @param props
|
||||
* @param props.children
|
||||
* @param props.modalsManager
|
||||
* @returns {import("react").Provider<any>}
|
||||
*/
|
||||
export function ModalsProvider({ children, modalsManager }) {
|
||||
const [modals, setModals] = useState([]);
|
||||
|
||||
const updateModals = useCallback((updatedModals) => {
|
||||
setModals(Object.values(updatedModals));
|
||||
}, []);
|
||||
|
||||
modalsManager.setUpdateModals(updateModals);
|
||||
|
||||
return (
|
||||
<ModalsContext.Provider value={modals}>
|
||||
{children}
|
||||
</ModalsContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {Modal[]}
|
||||
*/
|
||||
export function useModals() {
|
||||
return useContext(ModalsContext);
|
||||
}
|
||||
27
src/hooks/modals/modalsContext.tsx
Normal file
27
src/hooks/modals/modalsContext.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import React, { createContext, FC, ReactNode, useCallback, useContext, useState } from "react";
|
||||
import Modal from "../../features/modals/modal.js";
|
||||
import ModalsManager from "../../features/modals/modalsManager.js";
|
||||
|
||||
type ModalsState = Modal[] | undefined;
|
||||
|
||||
const ModalsContext = createContext<ModalsState>(undefined);
|
||||
|
||||
export const ModalsProvider: FC<{ children: ReactNode, modalsManager: ModalsManager }> = ({ children, modalsManager }) => {
|
||||
const [modals, setModals] = useState<ModalsState>([]);
|
||||
|
||||
const updateModals = useCallback((updatedModals: Record<string, Modal>) => {
|
||||
setModals(Object.values(updatedModals));
|
||||
}, []);
|
||||
|
||||
modalsManager.setUpdateModals(updateModals);
|
||||
|
||||
return (
|
||||
<ModalsContext.Provider value={modals}>
|
||||
{children}
|
||||
</ModalsContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export function useModals(): ModalsState {
|
||||
return useContext(ModalsContext);
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import { createContext, useContext } from "react";
|
||||
import ModalsManager from "../../features/modals/modalsManager.js";
|
||||
import { ModalsProvider } from "./modalsContext.js";
|
||||
|
||||
const modalsManagerContext = createContext();
|
||||
|
||||
/**
|
||||
* @param {object} props
|
||||
* @param {import("react").ElementType} props.children
|
||||
* @returns {import("react").Provider<any>}
|
||||
*/
|
||||
export function ModalsManagerProvider({ children }) {
|
||||
const modalsManager = new ModalsManager();
|
||||
|
||||
return (
|
||||
<modalsManagerContext.Provider value={modalsManager}>
|
||||
<ModalsProvider modalsManager={modalsManager}>
|
||||
{children}
|
||||
</ModalsProvider>
|
||||
</modalsManagerContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {ModalsManager}
|
||||
*/
|
||||
export function useModalsManager() {
|
||||
return useContext(modalsManagerContext);
|
||||
}
|
||||
23
src/hooks/modals/modalsManagerContext.tsx
Normal file
23
src/hooks/modals/modalsManagerContext.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import React, { createContext, FC, ReactNode, useContext } from "react";
|
||||
import ModalsManager from "../../features/modals/modalsManager.js";
|
||||
import { ModalsProvider } from "./modalsContext";
|
||||
|
||||
type ModalsManagerState = ModalsManager | undefined;
|
||||
|
||||
const modalsManagerContext = createContext<ModalsManagerState>(undefined);
|
||||
|
||||
export const ModalsManagerProvider: FC<{ children: ReactNode }> = ({ children }) => {
|
||||
const modalsManager = new ModalsManager();
|
||||
|
||||
return (
|
||||
<modalsManagerContext.Provider value={modalsManager}>
|
||||
<ModalsProvider modalsManager={modalsManager}>
|
||||
{children}
|
||||
</ModalsProvider>
|
||||
</modalsManagerContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export function useModalsManager(): ModalsManagerState {
|
||||
return useContext(modalsManagerContext);
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@ import { useCallback } from "react";
|
|||
import Modal from "../../features/modals/modal.js";
|
||||
import Vector2 from "../../features/math/vector2.js";
|
||||
import { DEFAULT_DIALOG_SIZE } from "../../config/modals.config.js";
|
||||
import { useModalsManager } from "./modalsManagerContext.js";
|
||||
import { useModalsManager } from "./modalsManagerContext";
|
||||
|
||||
/**
|
||||
* @callback windowedModalType
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
import { createContext, useContext } from "react";
|
||||
import { SettingsManager } from "../../features/settings/settingsManager.js";
|
||||
import { useVirtualRoot } from "../virtual-drive/virtualRootContext.js";
|
||||
|
||||
const SettingsContext = createContext();
|
||||
|
||||
/**
|
||||
* Note: needs to be inside a virtual root provider
|
||||
* @param props
|
||||
* @param props.children
|
||||
* @returns {import("react").Provider<SettingsManager>}
|
||||
*/
|
||||
export function SettingsManagerProvider({ children }) {
|
||||
const virtualRoot = useVirtualRoot();
|
||||
const settingsManager = new SettingsManager(virtualRoot);
|
||||
|
||||
return (
|
||||
<SettingsContext.Provider value={settingsManager}>
|
||||
{children}
|
||||
</SettingsContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {SettingsManager}
|
||||
*/
|
||||
export function useSettingsManager() {
|
||||
return useContext(SettingsContext);
|
||||
}
|
||||
26
src/hooks/settings/settingsManagerContext.tsx
Normal file
26
src/hooks/settings/settingsManagerContext.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import React, { createContext, FC, ReactNode, useContext } from "react";
|
||||
import { SettingsManager } from "../../features/settings/settingsManager.js";
|
||||
import { useVirtualRoot } from "../virtual-drive/virtualRootContext";
|
||||
import { VirtualRoot } from "../../features/virtual-drive/root/virtualRoot.js";
|
||||
|
||||
type SettingsManagerState = SettingsManager | undefined;
|
||||
|
||||
const SettingsManagerContext = createContext<SettingsManagerState>(undefined);
|
||||
|
||||
/**
|
||||
* Note: needs to be inside a virtual root provider
|
||||
*/
|
||||
export const SettingsManagerProvider: FC<{ children: ReactNode }> = ({ children }) => {
|
||||
const virtualRoot = useVirtualRoot();
|
||||
const settingsManager = new SettingsManager(virtualRoot as VirtualRoot);
|
||||
|
||||
return (
|
||||
<SettingsManagerContext.Provider value={settingsManager}>
|
||||
{children}
|
||||
</SettingsManagerContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export function useSettingsManager(): SettingsManagerState {
|
||||
return useContext(SettingsManagerContext);
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import { createContext, useContext } from "react";
|
||||
import { VirtualRoot } from "../../features/virtual-drive/root/virtualRoot.js";
|
||||
|
||||
const VirtualRootContext = createContext();
|
||||
|
||||
/**
|
||||
* @param props
|
||||
* @param props.children
|
||||
* @returns {import("react").Provider<VirtualRoot>}
|
||||
*/
|
||||
export function VirtualRootProvider({ children }) {
|
||||
const virtualRoot = new VirtualRoot().init();
|
||||
|
||||
return (
|
||||
<VirtualRootContext.Provider value={virtualRoot}>
|
||||
{children}
|
||||
</VirtualRootContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {VirtualRoot}
|
||||
*/
|
||||
export function useVirtualRoot() {
|
||||
return useContext(VirtualRootContext);
|
||||
}
|
||||
19
src/hooks/virtual-drive/virtualRootContext.tsx
Normal file
19
src/hooks/virtual-drive/virtualRootContext.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import React, { createContext, useContext, FC, ReactNode } from "react";
|
||||
import { VirtualRoot } from "../../features/virtual-drive/root/virtualRoot.js";
|
||||
|
||||
const VirtualRootContext = createContext<VirtualRoot | undefined>(undefined);
|
||||
|
||||
export const VirtualRootProvider: FC<{ children: ReactNode }> = ({ children }) => {
|
||||
const virtualRoot = new VirtualRoot().init();
|
||||
|
||||
return <VirtualRootContext.Provider value={virtualRoot}>
|
||||
{children}
|
||||
</VirtualRootContext.Provider>;
|
||||
};
|
||||
|
||||
/**
|
||||
* @returns {VirtualRoot}
|
||||
*/
|
||||
export function useVirtualRoot() {
|
||||
return useContext(VirtualRootContext);
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import { createContext, useCallback, useContext, useState } from "react";
|
||||
|
||||
const WindowsContext = createContext();
|
||||
|
||||
/**
|
||||
* @param props
|
||||
* @param props.children
|
||||
* @param props.windowsManager
|
||||
* @returns {import("react").Provider<any>}
|
||||
*/
|
||||
export function WindowsProvider({ children, windowsManager }) {
|
||||
const [windows, setWindows] = useState([]);
|
||||
|
||||
const updateWindows = useCallback((updatedWindows) => {
|
||||
setWindows(Object.values(updatedWindows));
|
||||
}, []);
|
||||
|
||||
windowsManager.setUpdateWindows(updateWindows);
|
||||
|
||||
return (
|
||||
<WindowsContext.Provider value={windows}>
|
||||
{children}
|
||||
</WindowsContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {object[]}
|
||||
*/
|
||||
export function useWindows() {
|
||||
return useContext(WindowsContext);
|
||||
}
|
||||
26
src/hooks/windows/windowsContext.tsx
Normal file
26
src/hooks/windows/windowsContext.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import React, { createContext, FC, ReactNode, useCallback, useContext, useState } from "react";
|
||||
import WindowsManager from "../../features/windows/windowsManager";
|
||||
|
||||
type WindowsState = object[] | undefined;
|
||||
|
||||
const WindowsContext = createContext<WindowsState>(undefined);
|
||||
|
||||
export const WindowsProvider: FC<{ children: ReactNode, windowsManager: WindowsManager }> = ({ children, windowsManager }) => {
|
||||
const [windows, setWindows] = useState<WindowsState>([]);
|
||||
|
||||
const updateWindows = useCallback((updatedWindows: Record<string, Window>) => {
|
||||
setWindows(Object.values(updatedWindows));
|
||||
}, []);
|
||||
|
||||
windowsManager.setUpdateWindows(updateWindows);
|
||||
|
||||
return (
|
||||
<WindowsContext.Provider value={windows}>
|
||||
{children}
|
||||
</WindowsContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export function useWindows(): WindowsState {
|
||||
return useContext(WindowsContext);
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import { createContext, useContext } from "react";
|
||||
import WindowsManager from "../../features/windows/windowsManager.js";
|
||||
import { WindowsProvider } from "./windowsContext.js";
|
||||
|
||||
const WindowsManagerContext = createContext();
|
||||
|
||||
/**
|
||||
* @param {object} props
|
||||
* @param {import("react").ElementType} props.children
|
||||
* @returns {import("react").Provider<any>}
|
||||
*/
|
||||
export function WindowsManagerProvider({ children }) {
|
||||
const windowsManager = new WindowsManager();
|
||||
|
||||
return (
|
||||
<WindowsManagerContext.Provider value={windowsManager}>
|
||||
<WindowsProvider windowsManager={windowsManager}>
|
||||
{children}
|
||||
</WindowsProvider>
|
||||
</WindowsManagerContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {WindowsManager}
|
||||
*/
|
||||
export function useWindowsManager() {
|
||||
return useContext(WindowsManagerContext);
|
||||
}
|
||||
23
src/hooks/windows/windowsManagerContext.tsx
Normal file
23
src/hooks/windows/windowsManagerContext.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import React, { createContext, FC, ReactNode, useContext } from "react";
|
||||
import WindowsManager from "../../features/windows/windowsManager.js";
|
||||
import { WindowsProvider } from "./windowsContext";
|
||||
|
||||
type WindowsManagerState = WindowsManager | undefined;
|
||||
|
||||
const WindowsManagerContext = createContext<WindowsManagerState>(undefined);
|
||||
|
||||
export const WindowsManagerProvider: FC<{ children: ReactNode }> = ({ children }) => {
|
||||
const windowsManager = new WindowsManager();
|
||||
|
||||
return (
|
||||
<WindowsManagerContext.Provider value={windowsManager}>
|
||||
<WindowsProvider windowsManager={windowsManager}>
|
||||
{children}
|
||||
</WindowsProvider>
|
||||
</WindowsManagerContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export function useWindowsManager(): WindowsManagerState {
|
||||
return useContext(WindowsManagerContext);
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { useZIndexManager } from "./zIndexManagerContext.js";
|
||||
import { useZIndexManager } from "./zIndexManagerContext";
|
||||
import { ZIndexManager } from "../../features/z-index/zIndexManager.js";
|
||||
|
||||
export function useZIndex({ groupIndex, index }) {
|
||||
|
|
|
|||
|
|
@ -1,24 +0,0 @@
|
|||
import { createContext, useContext } from "react";
|
||||
import { ZIndexManager } from "../../features/z-index/zIndexManager.js";
|
||||
|
||||
const ZIndexManagerContext = createContext();
|
||||
|
||||
/**
|
||||
* @param {object} props
|
||||
* @param {import("react").ElementType} props.children
|
||||
* @returns {import("react").Provider<any>}
|
||||
*/
|
||||
export function ZIndexManagerProvider({ children }) {
|
||||
const zIndexManager = new ZIndexManager();
|
||||
|
||||
return <ZIndexManagerContext.Provider value={zIndexManager}>
|
||||
{children}
|
||||
</ZIndexManagerContext.Provider>;
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {ZIndexManager}
|
||||
*/
|
||||
export function useZIndexManager() {
|
||||
return useContext(ZIndexManagerContext);
|
||||
}
|
||||
18
src/hooks/z-index/zIndexManagerContext.tsx
Normal file
18
src/hooks/z-index/zIndexManagerContext.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import React, { createContext, FC, ReactNode, useContext } from "react";
|
||||
import { ZIndexManager } from "../../features/z-index/zIndexManager.js";
|
||||
|
||||
type ZIndexManagerState = ZIndexManager | undefined;
|
||||
|
||||
const ZIndexManagerContext = createContext<ZIndexManagerState>(undefined);
|
||||
|
||||
export const ZIndexManagerProvider: FC<{ children: ReactNode }> = ({ children }) => {
|
||||
const zIndexManager = new ZIndexManager();
|
||||
|
||||
return <ZIndexManagerContext.Provider value={zIndexManager}>
|
||||
{children}
|
||||
</ZIndexManagerContext.Provider>;
|
||||
};
|
||||
|
||||
export function useZIndexManager(): ZIndexManagerState {
|
||||
return useContext(ZIndexManagerContext);
|
||||
}
|
||||
|
|
@ -8,12 +8,10 @@ import { ASCII_LOGO, NAME } from "./config/branding.config.js";
|
|||
export const START_DATE = new Date();
|
||||
|
||||
// Render app
|
||||
const root = ReactDOM.createRoot(document.getElementById("root"));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App/>
|
||||
</React.StrictMode>
|
||||
);
|
||||
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
|
||||
root.render(<React.StrictMode>
|
||||
<App/>
|
||||
</React.StrictMode>);
|
||||
|
||||
// Log welcome message
|
||||
const asciiLogoWidth = ASCII_LOGO.split("\n")[1].length;
|
||||
118
tsconfig.json
Normal file
118
tsconfig.json
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
{
|
||||
"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. */
|
||||
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
|
||||
"jsx": "react", /* 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. */
|
||||
// "rootDir": "./", /* Specify the root folder within your source files. */
|
||||
"moduleResolution": "Node", /* Specify how TypeScript looks up a file from a given module specifier. */
|
||||
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
|
||||
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
|
||||
// "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. */
|
||||
"checkJs": false, /* Enable error reporting in type-checked JavaScript files. */
|
||||
// "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. */
|
||||
// "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. */
|
||||
// "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. */
|
||||
"allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
|
||||
"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. */
|
||||
// "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/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"./node_modules",
|
||||
"./build",
|
||||
"./dist",
|
||||
"./.vscode"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in a new issue