OSSForks/daedalOS
1
0
Fork 0
mirror of https://github.com/DustinBrett/daedalOS.git synced 2025-12-06 00:20:05 +01:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Remove Prettier custom settings and change all files

Browse Source
This commit is contained in:
Dustin Brett 2021-06-26 23:39:01 -07:00
parent df704f3152
commit ea9c6efb28
118 changed files with 862 additions and 866 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.prettierrc.json
View File

@ -1,4 +0,0 @@
{
"singleQuote": true,
"trailingComma": "none"
}

10
__tests__/pages/index.spec.tsx
View File

@ -1,13 +1,13 @@
import { render, screen } from '@testing-library/react';
import StyledApp from 'components/pages/StyledApp';
import Index from 'pages/index';
import { render, screen } from "@testing-library/react";
import StyledApp from "components/pages/StyledApp";
import Index from "pages/index";
test('renders main role', () => {
test("renders main role", () => {
render(
<StyledApp>
<Index />
</StyledApp>
);
expect(screen.getByRole('main')).toBeInTheDocument();
expect(screen.getByRole("main")).toBeInTheDocument();
});

10
components/apps/FileExplorer.tsx
View File

@ -1,12 +1,12 @@
import type { ComponentProcessProps } from 'components/system/Apps/RenderComponent';
import FileManager from 'components/system/Files/FileManager';
import { useProcesses } from 'contexts/process';
import { useEffect } from 'react';
import type { ComponentProcessProps } from "components/system/Apps/RenderComponent";
import FileManager from "components/system/Files/FileManager";
import { useProcesses } from "contexts/process";
import { useEffect } from "react";
const FileExplorer = ({ id }: ComponentProcessProps): JSX.Element => {
const {
title,
processes: { [id]: { url = '' } = {} }
processes: { [id]: { url = "" } = {} },
} = useProcesses();
useEffect(() => {

2
components/apps/JSDOS/StyledJSDOS.ts
View File

@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled from "styled-components";
const StyledJSDOS = styled.div`
align-items: center;

22
components/apps/JSDOS/config.ts
View File

@ -1,17 +1,17 @@
export const defaultConfig = '/libs/jsdos/dosbox.conf';
export const defaultConfig = "/libs/jsdos/dosbox.conf";
export const libs = ['/libs/jsdos/js-dos.js', '/libs/jsdos/js-dos.css'];
export const libs = ["/libs/jsdos/js-dos.js", "/libs/jsdos/js-dos.css"];
export const pathPrefix = '/libs/jsdos/';
export const pathPrefix = "/libs/jsdos/";
export const zipConfigPath = '.jsdos/dosbox.conf';
export const zipConfigPath = ".jsdos/dosbox.conf";
export const globals = [
'__core-js_shared__',
'compiled',
'core',
'emulatorsUi',
'exports',
'WDOSBOX',
'worker'
"__core-js_shared__",
"compiled",
"core",
"emulatorsUi",
"exports",
"WDOSBOX",
"worker",
];

12
components/apps/JSDOS/index.tsx
View File

@ -1,12 +1,12 @@
import StyledJSDOS from 'components/apps/JSDOS/StyledJSDOS';
import useJSDOS from 'components/apps/JSDOS/useJSDOS';
import type { ComponentProcessProps } from 'components/system/Apps/RenderComponent';
import { useProcesses } from 'contexts/process';
import { useRef } from 'react';
import StyledJSDOS from "components/apps/JSDOS/StyledJSDOS";
import useJSDOS from "components/apps/JSDOS/useJSDOS";
import type { ComponentProcessProps } from "components/system/Apps/RenderComponent";
import { useProcesses } from "contexts/process";
import { useRef } from "react";
const JSDOS = ({ id }: ComponentProcessProps): JSX.Element => {
const {
processes: { [id]: { url = '' } = {} }
processes: { [id]: { url = "" } = {} },
} = useProcesses();
const screenRef = useRef<HTMLDivElement | null>(null);

34
components/apps/JSDOS/useJSDOS.ts
View File

@ -1,20 +1,20 @@
import type { FSModule } from 'browserfs/dist/node/core/FS';
import type { FSModule } from "browserfs/dist/node/core/FS";
import {
defaultConfig,
globals,
libs,
pathPrefix,
zipConfigPath
} from 'components/apps/JSDOS/config';
import type { DosCI } from 'components/apps/JSDOS/types';
import { addFileToZip, isFileInZip } from 'components/apps/JSDOS/zipFunctions';
import { closeWithTransition } from 'components/system/Window/functions';
import useTitle from 'components/system/Window/useTitle';
import useWindowSize from 'components/system/Window/useWindowSize';
import { useFileSystem } from 'contexts/fileSystem';
import { useProcesses } from 'contexts/process';
import { useEffect, useState } from 'react';
import { bufferToUrl, cleanUpBufferUrl, loadFiles } from 'utils/functions';
zipConfigPath,
} from "components/apps/JSDOS/config";
import type { DosCI } from "components/apps/JSDOS/types";
import { addFileToZip, isFileInZip } from "components/apps/JSDOS/zipFunctions";
import { closeWithTransition } from "components/system/Window/functions";
import useTitle from "components/system/Window/useTitle";
import useWindowSize from "components/system/Window/useWindowSize";
import { useFileSystem } from "contexts/fileSystem";
import { useProcesses } from "contexts/process";
import { useEffect, useState } from "react";
import { bufferToUrl, cleanUpBufferUrl, loadFiles } from "utils/functions";
const addJsDosConfig = async (buffer: Buffer, fs: FSModule): Promise<Buffer> =>
(await isFileInZip(buffer, zipConfigPath))
@ -37,7 +37,7 @@ const useJSDOS = (
useEffect(() => {
if (!dos && fs && url) {
fs.readFile(url, (_error, contents = Buffer.from('')) =>
fs.readFile(url, (_error, contents = Buffer.from("")) =>
loadFiles(libs).then(async () => {
const objectURL = bufferToUrl(await addJsDosConfig(contents, fs));
@ -70,12 +70,12 @@ const useJSDOS = (
updateWindowSize(dos.frameHeight, dos.frameWidth);
dos.events().onMessage((_msgType, _eventType, command, message) => {
if (command === 'LOG_EXEC') {
if (command === "LOG_EXEC") {
const [dosCommand] = message
.replace('Parsing command line: ', '')
.split(' ');
.replace("Parsing command line: ", "")
.split(" ");
if (dosCommand.toUpperCase() === 'EXIT') {
if (dosCommand.toUpperCase() === "EXIT") {
closeWithTransition(close, id);
}
}

18
components/apps/JSDOS/zipFunctions.ts
View File

@ -1,16 +1,16 @@
import type { FSModule } from 'browserfs/dist/node/core/FS';
import type { AsyncZippable } from 'fflate';
import { unzip, zip } from 'fflate';
import type { FSModule } from "browserfs/dist/node/core/FS";
import type { AsyncZippable } from "fflate";
import { unzip, zip } from "fflate";
const addFileToZippable = (path: string, file: Buffer): AsyncZippable =>
path.split('/').reduce((zippableData, pathPart, index, { length }) => {
path.split("/").reduce((zippableData, pathPart, index, { length }) => {
const endOfPath = index === length - 1;
const walkedPath = Object.keys(zippableData)[index - 1] || '';
const currentPath = `${walkedPath}${pathPart}${endOfPath ? '' : '/'}`;
const walkedPath = Object.keys(zippableData)[index - 1] || "";
const currentPath = `${walkedPath}${pathPart}${endOfPath ? "" : "/"}`;
return {
...zippableData,
[currentPath]: endOfPath ? [file, { level: 0 }] : new Uint8Array()
[currentPath]: endOfPath ? [file, { level: 0 }] : new Uint8Array(),
};
}, {} as AsyncZippable);
@ -22,11 +22,11 @@ export const addFileToZip = (
): Promise<Buffer> =>
new Promise((resolve) =>
unzip(buffer, (_unzipError, zipData) =>
fs.readFile(filePath, (_readError, contents = Buffer.from('')) =>
fs.readFile(filePath, (_readError, contents = Buffer.from("")) =>
zip(
{
...zipData,
...addFileToZippable(zipFilePath, contents)
...addFileToZippable(zipFilePath, contents),
},
(_zipError, newZipFile) => resolve(newZipFile as Buffer)
)

2
components/apps/V86/StyledV86.ts
View File

@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled from "styled-components";
const StyledV86 = styled.div`
canvas {

14
components/apps/V86/config.ts
View File

@ -5,13 +5,13 @@ export const config = {
autostart: true,
log_level: 0,
filesystem: {
basefs: '/.index/fs.9p.json',
baseurl: '/'
basefs: "/.index/fs.9p.json",
baseurl: "/",
},
network_relay_url: 'wss://relay.widgetry.org/',
wasm_path: '/libs/v86/v86.wasm',
bios: { url: '/libs/v86/bios/seabios.bin' },
vga_bios: { url: '/libs/v86/bios/vgabios.bin' }
network_relay_url: "wss://relay.widgetry.org/",
wasm_path: "/libs/v86/v86.wasm",
bios: { url: "/libs/v86/bios/seabios.bin" },
vga_bios: { url: "/libs/v86/bios/vgabios.bin" },
};
export const libs = ['/libs/v86/libv86.js'];
export const libs = ["/libs/v86/libv86.js"];

16
components/apps/V86/fs2json.js
View File

@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/no-var-requires, no-console */
const { readdir, readlink, stat, writeFile } = require('fs');
const { basename, relative, join, resolve: resolvePath } = require('path');
const { readdir, readlink, stat, writeFile } = require("fs");
const { basename, relative, join, resolve: resolvePath } = require("path");
const VERSION = 3;
@ -16,11 +16,11 @@ const IDX_TARGET = 6;
const args = process.argv.slice(2);
const argPath = resolvePath(args[args.length - 1]);
const excludedPaths = [];
let outputPath = '';
let outputPath = "";
args.forEach((arg, index) => {
if (arg === '--exclude') excludedPaths.push(args[index + 1]);
if (arg === '--out') outputPath = resolvePath(args[index + 1]);
if (arg === "--exclude") excludedPaths.push(args[index + 1]);
if (arg === "--out") outputPath = resolvePath(args[index + 1]);
});
const fs2json = (dir) => {
@ -101,17 +101,17 @@ const fs2json = (dir) => {
});
};
console.info('Creating file tree ...');
console.info("Creating file tree ...");
return walk(dir).then((data) => {
console.info('Creating json ...');
console.info("Creating json ...");
writeFile(
outputPath,
JSON.stringify({
fsroot: data,
version: VERSION,
size: totalSize
size: totalSize,
}),
() => process.exit()
);

6
components/apps/V86/image.ts
View File

@ -6,13 +6,13 @@ type V86Image = {
use_parts?: boolean;
};
type V86ImageType = 'cdrom' | 'fda' | 'hda';
type V86ImageType = "cdrom" | "fda" | "hda";
export type V86ImageConfig = Partial<Record<V86ImageType, V86Image>>;
// https://github.com/copy/v86/blob/master/src/floppy.js#L64
const SUPPORTED_FLOPPY_TYPES = [
160, 180, 200, 320, 360, 400, 720, 1200, 1440, 1722, 2880
160, 180, 200, 320, 360, 400, 720, 1200, 1440, 1722, 2880,
];
// https://github.com/copy/v86/blob/master/src/floppy.js#L83
@ -21,4 +21,4 @@ const isFloppyImage = (size: number): boolean =>
SUPPORTED_FLOPPY_TYPES.includes(size >> 10) && (size & 0x3ff) === 0;
export const getImageType = (size: number): string =>
isFloppyImage(size) ? 'fda' : 'hda';
isFloppyImage(size) ? "fda" : "hda";

14
components/apps/V86/index.tsx
View File

@ -1,13 +1,13 @@
import StyledV86 from 'components/apps/V86/StyledV86';
import useV86 from 'components/apps/V86/useV86';
import useV86ScreenSize from 'components/apps/V86/useV86ScreenSize';
import type { ComponentProcessProps } from 'components/system/Apps/RenderComponent';
import { useProcesses } from 'contexts/process';
import { useRef } from 'react';
import StyledV86 from "components/apps/V86/StyledV86";
import useV86 from "components/apps/V86/useV86";
import useV86ScreenSize from "components/apps/V86/useV86ScreenSize";
import type { ComponentProcessProps } from "components/system/Apps/RenderComponent";
import { useProcesses } from "contexts/process";
import { useRef } from "react";
const V86 = ({ id }: ComponentProcessProps): JSX.Element => {
const {
processes: { [id]: { url = '' } = {} }
processes: { [id]: { url = "" } = {} },
} = useProcesses();
const screenRef = useRef<HTMLDivElement | null>(null);
const { emulator, lockMouse } = useV86(id, url, screenRef);

4
components/apps/V86/types.ts
View File

@ -1,6 +1,6 @@
/* eslint-disable camelcase */
import type { config as v86Config } from 'components/apps/V86/config';
import type { V86ImageConfig } from 'components/apps/V86/image';
import type { config as v86Config } from "components/apps/V86/config";
import type { V86ImageConfig } from "components/apps/V86/image";
export type ModeCallback = (isGraphical: boolean) => void;
export type SizeCallback = (dimensions: number[]) => void;

36
components/apps/V86/useV86.ts
View File

@ -2,16 +2,16 @@ import {
BOOT_CD_FD_HD,
BOOT_FD_CD_HD,
config,
libs
} from 'components/apps/V86/config';
import type { V86ImageConfig } from 'components/apps/V86/image';
import { getImageType } from 'components/apps/V86/image';
import type { V86, V86Starter } from 'components/apps/V86/types';
import useTitle from 'components/system/Window/useTitle';
import { useFileSystem } from 'contexts/fileSystem';
import { extname } from 'path';
import { useEffect, useState } from 'react';
import { bufferToUrl, cleanUpBufferUrl, loadFiles } from 'utils/functions';
libs,
} from "components/apps/V86/config";
import type { V86ImageConfig } from "components/apps/V86/image";
import { getImageType } from "components/apps/V86/image";
import type { V86, V86Starter } from "components/apps/V86/types";
import useTitle from "components/system/Window/useTitle";
import { useFileSystem } from "contexts/fileSystem";
import { extname } from "path";
import { useEffect, useState } from "react";
import { bufferToUrl, cleanUpBufferUrl, loadFiles } from "utils/functions";
const useV86 = (
id: string,
@ -24,20 +24,20 @@ const useV86 = (
useEffect(() => {
if (!emulator && fs && url) {
fs?.readFile(url, (_error, contents = Buffer.from('')) => {
fs?.readFile(url, (_error, contents = Buffer.from("")) => {
loadFiles(libs).then(() => {
if (screenContainer?.current) {
const isISO = extname(url).toLowerCase() === '.iso';
const isISO = extname(url).toLowerCase() === ".iso";
const { deviceMemory = 8 } = navigator;
const memoryRatio = deviceMemory / 8;
const bufferUrl = bufferToUrl(contents);
const v86ImageConfig: V86ImageConfig = {
[isISO ? 'cdrom' : getImageType(contents.length)]: {
[isISO ? "cdrom" : getImageType(contents.length)]: {
async: false,
size: contents.length,
url: bufferUrl,
use_parts: false
}
use_parts: false,
},
};
const v86 = new window.V86Starter({
memory_size: memoryRatio * 1024 * 1024 * 1024,
@ -45,10 +45,10 @@ const useV86 = (
boot_order: isISO ? BOOT_CD_FD_HD : BOOT_FD_CD_HD,
screen_container: screenContainer.current,
...v86ImageConfig,
...config
...config,
});
v86.add_listener('emulator-loaded', () => {
v86.add_listener("emulator-loaded", () => {
appendFileToTitle(url);
cleanUpBufferUrl(bufferUrl);
});
@ -64,7 +64,7 @@ const useV86 = (
return {
emulator,
lockMouse: emulator?.lock_mouse
lockMouse: emulator?.lock_mouse,
};
};

26
components/apps/V86/useV86ScreenSize.ts
View File

@ -1,16 +1,16 @@
import type {
ModeCallback,
SizeCallback,
V86Starter
} from 'components/apps/V86/types';
import useWindowSize from 'components/system/Window/useWindowSize';
import { useEffect, useState } from 'react';
import { useTheme } from 'styled-components';
import { pxToNum } from 'utils/functions';
V86Starter,
} from "components/apps/V86/types";
import useWindowSize from "components/system/Window/useWindowSize";
import { useEffect, useState } from "react";
import { useTheme } from "styled-components";
import { pxToNum } from "utils/functions";
const SET_SCREEN_MODE = 'screen-set-mode';
const SET_SCREEN_GFX = 'screen-set-size-graphical';
const SET_SCREEN_TXT = 'screen-set-size-text';
const SET_SCREEN_MODE = "screen-set-mode";
const SET_SCREEN_GFX = "screen-set-size-graphical";
const SET_SCREEN_TXT = "screen-set-size-text";
const useV86ScreenSize = (
id: string,
@ -18,8 +18,8 @@ const useV86ScreenSize = (
): React.CSSProperties => {
const {
sizes: {
window: { lineHeight }
}
window: { lineHeight },
},
} = useTheme();
const { updateWindowSize } = useWindowSize(id);
const [isGraphical, setIsGraphical] = useState(false);
@ -49,8 +49,8 @@ const useV86ScreenSize = (
return {
font: `${lineHeight} monospace`,
lineHeight,
position: 'relative',
top: isGraphical ? '' : '2px' // Why + 2?
position: "relative",
top: isGraphical ? "" : "2px", // Why + 2?
};
};

4
components/apps/Webamp/StyledWebamp.ts
View File

@ -1,5 +1,5 @@
import { motion } from 'framer-motion';
import styled from 'styled-components';
import { motion } from "framer-motion";
import styled from "styled-components";
const StyledWebamp = styled(motion.div)`
bottom: 0;

54
components/apps/Webamp/functions.ts
View File

@ -1,29 +1,29 @@
import type { Track, WebampCI } from 'components/apps/Webamp/types';
import { centerPosition } from 'components/system/Window/functions';
import type { IAudioMetadata } from 'music-metadata-browser';
import { parseBuffer } from 'music-metadata-browser';
import type { Position } from 'react-rnd';
import { bufferToBlob, cleanUpBufferUrl } from 'utils/functions';
import type { Track, WebampCI } from "components/apps/Webamp/types";
import { centerPosition } from "components/system/Window/functions";
import type { IAudioMetadata } from "music-metadata-browser";
import { parseBuffer } from "music-metadata-browser";
import type { Position } from "react-rnd";
import { bufferToBlob, cleanUpBufferUrl } from "utils/functions";
export const BASE_WEBAMP_OPTIONS = {
availableSkins: [
{ url: '/skins/Aqua_X.wsz', name: 'Aqua X' },
{ url: '/skins/Nucleo_NLog_v102.wsz', name: 'Nucleo NLog v2G' },
{ url: "/skins/Aqua_X.wsz", name: "Aqua X" },
{ url: "/skins/Nucleo_NLog_v102.wsz", name: "Nucleo NLog v2G" },
{
url: '/skins/SpyAMP_Professional_Edition_v5.wsz',
name: 'SpyAMP Professional Edition v5'
}
]
url: "/skins/SpyAMP_Professional_Edition_v5.wsz",
name: "SpyAMP Professional Edition v5",
},
],
};
const BASE_WINDOW_SIZE = {
height: 116,
width: 275
width: 275,
};
export const cleanBufferOnSkinLoad = (
webamp: WebampCI,
url = ''
url = ""
): Promise<void> =>
webamp.skinIsLoaded().then(() => {
if (url) cleanUpBufferUrl(url);
@ -31,12 +31,12 @@ export const cleanBufferOnSkinLoad = (
export const closeEqualizer = (webamp: WebampCI): void =>
webamp.store.dispatch({
type: 'CLOSE_WINDOW',
windowId: 'equalizer'
type: "CLOSE_WINDOW",
windowId: "equalizer",
});
export const getWebampElement = (): HTMLDivElement =>
document.getElementById('webamp') as HTMLDivElement;
document.getElementById("webamp") as HTMLDivElement;
export const updateWebampPosition = (
webamp: WebampCI,
@ -48,37 +48,37 @@ export const updateWebampPosition = (
position || centerPosition({ height: height * 2, width }, taskbarHeight);
webamp.store.dispatch({
type: 'UPDATE_WINDOW_POSITIONS',
type: "UPDATE_WINDOW_POSITIONS",
positions: {
main: { x, y },
playlist: { x, y: height + y }
}
playlist: { x, y: height + y },
},
});
};
export const focusWindow = (webamp: WebampCI, window: string): void =>
webamp.store.dispatch({
type: 'SET_FOCUSED_WINDOW',
window
type: "SET_FOCUSED_WINDOW",
window,
});
export const unFocus = (webamp: WebampCI): void =>
webamp.store.dispatch({
type: 'SET_FOCUSED_WINDOW',
window: ''
type: "SET_FOCUSED_WINDOW",
window: "",
});
export const parseTrack = (file: Buffer, fileName: string): Promise<Track> =>
new Promise((resolve) =>
parseBuffer(file).then(
({
common: { artist = '', title = fileName },
format: { duration = 0 }
common: { artist = "", title = fileName },
format: { duration = 0 },
}: IAudioMetadata) =>
resolve({
blob: bufferToBlob(file),
duration: Math.floor(duration),
metaData: { artist, title }
metaData: { artist, title },
})
)
);

34
components/apps/Webamp/index.tsx
View File

@ -2,30 +2,30 @@ import {
cleanBufferOnSkinLoad,
focusWindow,
parseTrack,
unFocus
} from 'components/apps/Webamp/functions';
import StyledWebamp from 'components/apps/Webamp/StyledWebamp';
import useWebamp from 'components/apps/Webamp/useWebamp';
import type { ComponentProcessProps } from 'components/system/Apps/RenderComponent';
import useFocusable from 'components/system/Window/useFocusable';
import useWindowTransitions from 'components/system/Window/useWindowTransitions';
import { useFileSystem } from 'contexts/fileSystem';
import { useProcesses } from 'contexts/process';
import { basename, extname } from 'path';
import { useEffect, useMemo, useRef, useState } from 'react';
import { bufferToUrl, loadFiles } from 'utils/functions';
unFocus,
} from "components/apps/Webamp/functions";
import StyledWebamp from "components/apps/Webamp/StyledWebamp";
import useWebamp from "components/apps/Webamp/useWebamp";
import type { ComponentProcessProps } from "components/system/Apps/RenderComponent";
import useFocusable from "components/system/Window/useFocusable";
import useWindowTransitions from "components/system/Window/useWindowTransitions";
import { useFileSystem } from "contexts/fileSystem";
import { useProcesses } from "contexts/process";
import { basename, extname } from "path";
import { useEffect, useMemo, useRef, useState } from "react";
import { bufferToUrl, loadFiles } from "utils/functions";
const Webamp = ({ id }: ComponentProcessProps): JSX.Element => {
const containerRef = useRef<HTMLDivElement | null>(null);
const { fs } = useFileSystem();
const { processes: { [id]: { url = '' } = {} } = {} } = useProcesses();
const { processes: { [id]: { url = "" } = {} } = {} } = useProcesses();
const [currentUrl, setCurrentUrl] = useState(url);
const { loadWebamp, webampCI } = useWebamp(id);
const windowTransitions = useWindowTransitions(id, containerRef);
const focusEvents = useMemo(
() => ({
onBlur: () => webampCI && unFocus(webampCI),
onFocus: () => webampCI && focusWindow(webampCI, 'main')
onFocus: () => webampCI && focusWindow(webampCI, "main"),
}),
[webampCI]
);
@ -38,7 +38,7 @@ const Webamp = ({ id }: ComponentProcessProps): JSX.Element => {
useEffect(() => {
if (fs) {
fs?.readFile(url, (_error, contents) => {
loadFiles(['/libs/webamp/webamp.bundle.min.js']).then(() =>
loadFiles(["/libs/webamp/webamp.bundle.min.js"]).then(() =>
loadWebamp(containerRef?.current, url, contents)
);
});
@ -47,8 +47,8 @@ const Webamp = ({ id }: ComponentProcessProps): JSX.Element => {
useEffect(() => {
if (url && url !== currentUrl && webampCI) {
fs?.readFile(url, (_error, contents = Buffer.from('')) => {
if (extname(url) === '.mp3') {
fs?.readFile(url, (_error, contents = Buffer.from("")) => {
if (extname(url) === ".mp3") {
parseTrack(contents, basename(url)).then((track) => {
setCurrentUrl(url);
webampCI?.appendTracks([track]);

2
components/apps/Webamp/types.ts
View File

@ -1,4 +1,4 @@
import type { Position } from 'react-rnd';
import type { Position } from "react-rnd";
type WebampDispatchOptionalProps = {
positions?: {

50
components/apps/Webamp/useWebamp.ts
View File

@ -4,18 +4,18 @@ import {
closeEqualizer,
getWebampElement,
parseTrack,
updateWebampPosition
} from 'components/apps/Webamp/functions';
import type { WebampCI, WebampOptions } from 'components/apps/Webamp/types';
import useWindowActions from 'components/system/Window/Titlebar/useWindowActions';
import { useProcesses } from 'contexts/process';
import type { Process } from 'contexts/process/types';
import { useSession } from 'contexts/session';
import { basename, extname } from 'path';
import { useState } from 'react';
import { useTheme } from 'styled-components';
import { WINDOW_TRANSITION_DURATION_IN_MILLISECONDS } from 'utils/constants';
import { bufferToUrl } from 'utils/functions';
updateWebampPosition,
} from "components/apps/Webamp/functions";
import type { WebampCI, WebampOptions } from "components/apps/Webamp/types";
import useWindowActions from "components/system/Window/Titlebar/useWindowActions";
import { useProcesses } from "contexts/process";
import type { Process } from "contexts/process/types";
import { useSession } from "contexts/session";
import { basename, extname } from "path";
import { useState } from "react";
import { useTheme } from "styled-components";
import { WINDOW_TRANSITION_DURATION_IN_MILLISECONDS } from "utils/constants";
import { bufferToUrl } from "utils/functions";
type Webamp = {
loadWebamp: (
@ -30,16 +30,16 @@ const useWebamp = (id: string): Webamp => {
const { onClose, onMinimize } = useWindowActions(id);
const {
setWindowStates,
windowStates: { [id]: { position = undefined } = {} } = {}
windowStates: { [id]: { position = undefined } = {} } = {},
} = useSession();
const {
sizes: {
taskbar: { height: taskbarHeight }
}
taskbar: { height: taskbarHeight },
},
} = useTheme();
const {
linkElement,
processes: { [id]: windowProcess = {} }
processes: { [id]: windowProcess = {} },
} = useProcesses();
const { componentWindow } = windowProcess as Process;
const [webampCI, setWebampCI] = useState<WebampCI | null>(null);
@ -52,14 +52,14 @@ const useWebamp = (id: string): Webamp => {
const runWebamp = (options?: WebampOptions) => {
const webamp: WebampCI = new window.Webamp({
...BASE_WEBAMP_OPTIONS,
...options
...options,
});
const setupElements = () => {
const webampElement = getWebampElement();
const [main] = webampElement.getElementsByClassName('window');
const [main] = webampElement.getElementsByClassName("window");
if (!componentWindow && main && Object.keys(windowProcess).length) {
linkElement(id, 'componentWindow', main as HTMLElement);
linkElement(id, "componentWindow", main as HTMLElement);
}
containerElement.appendChild(webampElement);
@ -68,15 +68,15 @@ const useWebamp = (id: string): Webamp => {
webamp.onWillClose((cancel) => {
cancel();
const [main] = getWebampElement().getElementsByClassName('window');
const [main] = getWebampElement().getElementsByClassName("window");
const { x, y } = main.getBoundingClientRect();
onClose();
setWindowStates((currentWindowStates) => ({
...currentWindowStates,
[id]: {
position: { x, y }
}
position: { x, y },
},
}));
setTimeout(() => {
@ -84,7 +84,7 @@ const useWebamp = (id: string): Webamp => {
webamp.close();
}, WINDOW_TRANSITION_DURATION_IN_MILLISECONDS);
}),
webamp.onMinimize(() => onMinimize())
webamp.onMinimize(() => onMinimize()),
];
if (options?.initialSkin?.url) {
@ -101,7 +101,7 @@ const useWebamp = (id: string): Webamp => {
};
if (file) {
if (extname(url) === '.mp3') {
if (extname(url) === ".mp3") {
parseTrack(file, basename(url)).then((track) =>
runWebamp({ initialTracks: [track] })
);
@ -116,7 +116,7 @@ const useWebamp = (id: string): Webamp => {
return {
loadWebamp,
webampCI
webampCI,
};
};

4
components/pages/Metadata.tsx
View File

@ -1,5 +1,5 @@
import Head from 'next/head';
import packageJson from 'package.json';
import Head from "next/head";
import packageJson from "package.json";
const { description, name } = packageJson;

8
components/pages/StyledApp.tsx
View File

@ -1,7 +1,7 @@
import { SessionConsumer } from 'contexts/session';
import { ThemeProvider } from 'styled-components';
import GlobalStyle from 'styles/GlobalStyle';
import themes from 'styles/themes';
import { SessionConsumer } from "contexts/session";
import { ThemeProvider } from "styled-components";
import GlobalStyle from "styles/GlobalStyle";
import themes from "styles/themes";
type StyledAppProps = {
children: React.ReactNode;

6
components/system/Apps/AppsLoader.tsx
View File

@ -1,6 +1,6 @@
import RenderComponent from 'components/system/Apps/RenderComponent';
import { ProcessConsumer } from 'contexts/process';
import { AnimatePresence } from 'framer-motion';
import RenderComponent from "components/system/Apps/RenderComponent";
import { ProcessConsumer } from "contexts/process";
import { AnimatePresence } from "framer-motion";
const AppsLoader = (): JSX.Element => (
<ProcessConsumer>

6
components/system/Apps/RenderComponent.tsx
View File

@ -1,6 +1,6 @@
import dynamic from 'next/dynamic';
import dynamic from "next/dynamic";
const Window = dynamic(() => import('components/system/Window'));
const Window = dynamic(() => import("components/system/Window"));
export type ComponentProcessProps = {
id: string;
@ -15,7 +15,7 @@ type RenderComponentProps = {
const RenderComponent = ({
Component,
hasWindow = true,
id
id,
}: RenderComponentProps): JSX.Element =>
hasWindow ? (
<Window id={id}>

2
components/system/Desktop/StyledDesktop.ts
View File

@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled from "styled-components";
const StyledDesktop = styled.main`
background-color: ${({ theme }) => theme.colors.background};

6
components/system/Desktop/index.tsx
View File

@ -1,6 +1,6 @@
import StyledDesktop from 'components/system/Desktop/StyledDesktop';
import useWallpaper from 'components/system/Desktop/wallpapers/useWallpaper';
import { useRef } from 'react';
import StyledDesktop from "components/system/Desktop/StyledDesktop";
import useWallpaper from "components/system/Desktop/wallpapers/useWallpaper";
import { useRef } from "react";
type DesktopProps = {
children: React.ReactNode;

6
components/system/Desktop/wallpapers/colorCycle.ts
View File

@ -1,5 +1,5 @@
import { adjustHue } from 'polished';
import { MILLISECONDS_IN_SECOND } from 'utils/constants';
import { adjustHue } from "polished";
import { MILLISECONDS_IN_SECOND } from "utils/constants";
const fps = 15;
const timePerFrame = MILLISECONDS_IN_SECOND / fps;
@ -26,7 +26,7 @@ const colorCycle = (
callback(
Number(
adjustHue(degree, `#${initialColor.toString(16)}`).replace('#', '0x')
adjustHue(degree, `#${initialColor.toString(16)}`).replace("#", "0x")
)
);
}

4
components/system/Desktop/wallpapers/useWallpaper.ts
View File

@ -1,5 +1,5 @@
import { useEffect } from 'react';
import { useTheme } from 'styled-components';
import { useEffect } from "react";
import { useTheme } from "styled-components";
const useWallpaper = (
desktopRef: React.RefObject<HTMLElement | null>

16
components/system/Desktop/wallpapers/vantaWaves/index.ts
View File

@ -1,22 +1,22 @@
import colorCycle from 'components/system/Desktop/wallpapers/colorCycle';
import type { VantaWavesConfig } from 'components/system/Desktop/wallpapers/vantaWaves/types';
import { loadFiles } from 'utils/functions';
import colorCycle from "components/system/Desktop/wallpapers/colorCycle";
import type { VantaWavesConfig } from "components/system/Desktop/wallpapers/vantaWaves/types";
import { loadFiles } from "utils/functions";
const disableControls = {
mouseControls: false,
touchControls: false
touchControls: false,
};
const isWebGLAvailable = typeof WebGLRenderingContext !== 'undefined';
const isWebGLAvailable = typeof WebGLRenderingContext !== "undefined";
const libs = ['/libs/vanta/three.min.js', '/libs/vanta/vanta.waves.min.js'];
const libs = ["/libs/vanta/three.min.js", "/libs/vanta/vanta.waves.min.js"];
const vantaWaves =
(config: VantaWavesConfig) =>
(el: HTMLElement | null): void => {
loadFiles(libs).then(() => {
const {
VANTA: { current: currentEffect, WAVES }
VANTA: { current: currentEffect, WAVES },
} = window;
currentEffect?.destroy();
@ -25,7 +25,7 @@ const vantaWaves =
? WAVES({
el,
...disableControls,
...config
...config,
})
: undefined;

8
components/system/Files/FileEntry/RenameBox.tsx
View File

@ -1,6 +1,6 @@
import StyledRenameBox from 'components/system/Files/Views/StyledRenameBox';
import { extname } from 'path';
import { useEffect, useRef } from 'react';
import StyledRenameBox from "components/system/Files/Views/StyledRenameBox";
import { extname } from "path";
import { useEffect, useRef } from "react";
type RenameBoxProps = {
name: string;
@ -21,7 +21,7 @@ const RenameBox = ({ name, path, renameFile }: RenameBoxProps): JSX.Element => {
<StyledRenameBox
defaultValue={name}
onBlur={saveRename}
onKeyDown={({ key }) => key === 'Enter' && saveRename()}
onKeyDown={({ key }) => key === "Enter" && saveRename()}
ref={inputRef}
/>
);

42
components/system/Files/FileEntry/functions.ts
View File

@ -6,37 +6,37 @@ type Extensions = {
};
export const extensions: Extensions = {
'.img': {
icon: 'image',
process: ['V86']
".img": {
icon: "image",
process: ["V86"],
},
'.iso': {
icon: 'image',
process: ['FileExplorer', 'V86']
".iso": {
icon: "image",
process: ["FileExplorer", "V86"],
},
'.jsdos': {
icon: 'compressed',
process: ['JSDOS']
".jsdos": {
icon: "compressed",
process: ["JSDOS"],
},
'.mp3': {
icon: 'music',
process: ['Webamp']
".mp3": {
icon: "music",
process: ["Webamp"],
},
'.wsz': {
icon: 'music',
process: ['Webamp']
".wsz": {
icon: "music",
process: ["Webamp"],
},
".zip": {
icon: "compressed",
process: ["FileExplorer", "JSDOS"],
},
'.zip': {
icon: 'compressed',
process: ['FileExplorer', 'JSDOS']
}
};
export const getIconByFileExtension = (extension: string): string =>
`/icons/${extensions[extension]?.icon || 'unknown'}.png`;
`/icons/${extensions[extension]?.icon || "unknown"}.png`;
export const getProcessByFileExtension = (extension: string): string => {
const [defaultProcess = ''] = extensions[extension]?.process || [];
const [defaultProcess = ""] = extensions[extension]?.process || [];
return defaultProcess;
};

24
components/system/Files/FileEntry/index.tsx
View File

@ -1,13 +1,13 @@
import RenameBox from 'components/system/Files/FileEntry/RenameBox';
import useContextMenu from 'components/system/Files/FileEntry/useContextMenu';
import useFile from 'components/system/Files/FileEntry/useFile';
import useFileInfo from 'components/system/Files/FileEntry/useFileInfo';
import { FileEntryIconSize } from 'components/system/Files/Views';
import useDoubleClick from 'components/system/useDoubleClick';
import { useMenu } from 'contexts/menu';
import { useState } from 'react';
import Button from 'styles/common/Button';
import Icon from 'styles/common/Icon';
import RenameBox from "components/system/Files/FileEntry/RenameBox";
import useContextMenu from "components/system/Files/FileEntry/useContextMenu";
import useFile from "components/system/Files/FileEntry/useFile";
import useFileInfo from "components/system/Files/FileEntry/useFileInfo";
import { FileEntryIconSize } from "components/system/Files/Views";
import useDoubleClick from "components/system/useDoubleClick";
import { useMenu } from "contexts/menu";
import { useState } from "react";
import Button from "styles/common/Button";
import Icon from "styles/common/Icon";
type FileEntryProps = {
deleteFile: (path: string) => void;
@ -22,7 +22,7 @@ const FileEntry = ({
name,
path,
renameFile,
view
view,
}: FileEntryProps): JSX.Element => {
const { icon, pid, url } = useFileInfo(path);
const [renaming, setRenaming] = useState(false);
@ -31,7 +31,7 @@ const FileEntry = ({
const deleteEntry = () => deleteFile(path);
const renameEntry = () => setRenaming(true);
const menu = useContextMenu(url, pid, path, deleteEntry, renameEntry);
const singleClick = view === 'list';
const singleClick = view === "list";
return (
<Button

32
components/system/Files/FileEntry/useContextMenu.ts
View File

@ -1,10 +1,10 @@
import { extensions } from 'components/system/Files/FileEntry/functions';
import useFile from 'components/system/Files/FileEntry/useFile';
import type { MenuItem } from 'contexts/menu/useMenuContextState';
import { useProcesses } from 'contexts/process';
import processDirectory from 'contexts/process/directory';
import { dirname, extname } from 'path';
import { SHORTCUT_EXTENSION } from 'utils/constants';
import { extensions } from "components/system/Files/FileEntry/functions";
import useFile from "components/system/Files/FileEntry/useFile";
import type { MenuItem } from "contexts/menu/useMenuContextState";
import { useProcesses } from "contexts/process";
import processDirectory from "contexts/process/directory";
import { dirname, extname } from "path";
import { SHORTCUT_EXTENSION } from "utils/constants";
const useContextMenu = (
url: string,
@ -19,40 +19,40 @@ const useContextMenu = (
const { icon: pidIcon } = processDirectory[pid] || {};
const openFile = useFile(url);
const menuItems: MenuItem[] = [
{ label: 'Delete', action: deleteFile },
{ label: 'Rename', action: renameFile }
{ label: "Delete", action: deleteFile },
{ label: "Rename", action: renameFile },
];
if (pid) {
const isShortcut =
extname(path) === SHORTCUT_EXTENSION && url && url !== '/';
extname(path) === SHORTCUT_EXTENSION && url && url !== "/";
menuItems.unshift({ separator: 1 });
if (openWithFiltered.length) {
menuItems.unshift({
label: 'Open with',
label: "Open with",
menu: openWithFiltered.map((id): MenuItem => {
const { icon, title: label } = processDirectory[id] || {};
const action = () => openFile(id);
return { icon, label, action };
})
}),
});
}
if (isShortcut) {
menuItems.unshift({
label: 'Open file location',
action: () => open('FileExplorer', dirname(url))
label: "Open file location",
action: () => open("FileExplorer", dirname(url)),
});
}
menuItems.unshift({
icon: isShortcut || extname(url) ? pidIcon : undefined,
label: 'Open',
label: "Open",
primary: true,
action: () => openFile(pid)
action: () => openFile(pid),
});
}

6
components/system/Files/FileEntry/useFile.ts
View File

@ -1,6 +1,6 @@
import { useProcesses } from 'contexts/process';
import { createPid } from 'contexts/process/functions';
import { useSession } from 'contexts/session';
import { useProcesses } from "contexts/process";
import { createPid } from "contexts/process/functions";
import { useSession } from "contexts/session";
type UseFile = (pid: string) => void;

52
components/system/Files/FileEntry/useFileInfo.ts
View File

@ -1,14 +1,14 @@
import {
getIconByFileExtension,
getProcessByFileExtension
} from 'components/system/Files/FileEntry/functions';
import { useFileSystem } from 'contexts/fileSystem';
import ini from 'ini';
import { parseBuffer } from 'music-metadata-browser';
import { extname } from 'path';
import { useEffect, useState } from 'react';
import { IMAGE_FILE_EXTENSIONS, SHORTCUT_EXTENSION } from 'utils/constants';
import { bufferToUrl } from 'utils/functions';
getProcessByFileExtension,
} from "components/system/Files/FileEntry/functions";
import { useFileSystem } from "contexts/fileSystem";
import ini from "ini";
import { parseBuffer } from "music-metadata-browser";
import { extname } from "path";
import { useEffect, useState } from "react";
import { IMAGE_FILE_EXTENSIONS, SHORTCUT_EXTENSION } from "utils/constants";
import { bufferToUrl } from "utils/functions";
type FileInfo = {
icon: string;
@ -18,9 +18,9 @@ type FileInfo = {
const useFileInfo = (path: string): FileInfo => {
const [info, setInfo] = useState<FileInfo>({
icon: '',
pid: '',
url: ''
icon: "",
pid: "",
url: "",
});
const { fs } = useFileSystem();
@ -33,9 +33,9 @@ const useFileInfo = (path: string): FileInfo => {
const isDirectory = stats ? stats.isDirectory() : false;
setInfo({
icon: `/icons/${isDirectory ? 'folder.png' : 'unknown.png'}`,
pid: isDirectory ? 'FileExplorer' : '',
url: path
icon: `/icons/${isDirectory ? "folder.png" : "unknown.png"}`,
pid: isDirectory ? "FileExplorer" : "",
url: path,
});
});
} else {
@ -43,39 +43,39 @@ const useFileInfo = (path: string): FileInfo => {
setInfo({
icon: icon || getIconByFileExtension(extension),
pid: getProcessByFileExtension(extension),
url: path
url: path,
});
if (extension === SHORTCUT_EXTENSION) {
fs.readFile(path, (error, contents = Buffer.from('')) => {
fs.readFile(path, (error, contents = Buffer.from("")) => {
if (error) {
getInfoByFileExtension();
} else {
const {
InternetShortcut: {
BaseURL: pid = '',
IconFile: icon = '',
URL: url = ''
}
BaseURL: pid = "",
IconFile: icon = "",
URL: url = "",
},
} = ini.parse(contents.toString());
setInfo({ icon, pid, url });
}
});
} else if (IMAGE_FILE_EXTENSIONS.includes(extension)) {
fs.readFile(path, (error, contents = Buffer.from('')) =>
fs.readFile(path, (error, contents = Buffer.from("")) =>
getInfoByFileExtension(
error ? '/icons/photo.png' : bufferToUrl(contents)
error ? "/icons/photo.png" : bufferToUrl(contents)
)
);
} else if (extension === '.mp3') {
fs.readFile(path, (error, contents = Buffer.from('')) =>
} else if (extension === ".mp3") {
fs.readFile(path, (error, contents = Buffer.from("")) =>
parseBuffer(contents).then(
({ common: { picture: [picture] = [] } = {} }) =>
getInfoByFileExtension(
!error && picture
? bufferToUrl(picture.data)
: '/icons/music.png'
: "/icons/music.png"
)
)
);

18
components/system/Files/FileManager/index.tsx
View File

@ -1,12 +1,12 @@
import FileEntry from 'components/system/Files/FileEntry';
import useFileDrop from 'components/system/Files/FileManager/useFileDrop';
import useFiles from 'components/system/Files/FileManager/useFiles';
import type { FileManagerViewNames } from 'components/system/Files/Views';
import { FileManagerViews } from 'components/system/Files/Views';
import { useFileSystem } from 'contexts/fileSystem';
import { basename, extname, resolve } from 'path';
import { useEffect } from 'react';
import { MOUNTABLE_EXTENSIONS, SHORTCUT_EXTENSION } from 'utils/constants';
import FileEntry from "components/system/Files/FileEntry";
import useFileDrop from "components/system/Files/FileManager/useFileDrop";
import useFiles from "components/system/Files/FileManager/useFiles";
import type { FileManagerViewNames } from "components/system/Files/Views";
import { FileManagerViews } from "components/system/Files/Views";
import { useFileSystem } from "contexts/fileSystem";
import { basename, extname, resolve } from "path";
import { useEffect } from "react";
import { MOUNTABLE_EXTENSIONS, SHORTCUT_EXTENSION } from "utils/constants";
type FileManagerProps = {
url: string;

10
components/system/Files/FileManager/useFileDrop.ts
View File

@ -1,5 +1,5 @@
import { useFileSystem } from 'contexts/fileSystem';
import { basename, dirname, extname } from 'path';
import { useFileSystem } from "contexts/fileSystem";
import { basename, dirname, extname } from "path";
const haltDragEvent = (event: React.DragEvent<HTMLElement>): void => {
event.preventDefault();
@ -35,8 +35,8 @@ const useFileDrop = (
): void => {
const writePath = !iteration ? path : iterateFileName(path, iteration);
fs?.writeFile(writePath, fileBuffer, { flag: 'wx' }, (error) => {
if (error?.code === 'EEXIST') {
fs?.writeFile(writePath, fileBuffer, { flag: "wx" }, (error) => {
if (error?.code === "EEXIST") {
writeUniqueName(path, fileBuffer, iteration + 1);
} else if (!error) {
updateFiles(writePath);
@ -61,7 +61,7 @@ const useFileDrop = (
return {
onDragOver: haltDragEvent,
onDrop
onDrop,
};
};

14
components/system/Files/FileManager/useFiles.ts
View File

@ -1,7 +1,7 @@
import { useFileSystem } from 'contexts/fileSystem';
import { basename } from 'path';
import { useCallback, useEffect, useState } from 'react';
import { SHORTCUT_EXTENSION } from 'utils/constants';
import { useFileSystem } from "contexts/fileSystem";
import { basename } from "path";
import { useCallback, useEffect, useState } from "react";
import { SHORTCUT_EXTENSION } from "utils/constants";
type Files = {
deleteFile: (path: string) => void;
@ -14,7 +14,7 @@ const useFiles = (directory: string): Files => {
const [files, setFiles] = useState<string[]>([]);
const { fs } = useFileSystem();
const updateFiles = useCallback(
(appendFile = '') =>
(appendFile = "") =>
fs?.readdir(directory, (_error, contents = []) =>
setFiles((currentFiles) =>
appendFile ? [...currentFiles, basename(appendFile)] : contents
@ -31,7 +31,7 @@ const useFiles = (directory: string): Files => {
const renameFile = (path: string, name?: string) => {
if (name) {
const newPath = `${directory}/${name}${
path.endsWith(SHORTCUT_EXTENSION) ? SHORTCUT_EXTENSION : ''
path.endsWith(SHORTCUT_EXTENSION) ? SHORTCUT_EXTENSION : ""
}`;
fs?.rename(path, newPath, () =>
@ -50,7 +50,7 @@ const useFiles = (directory: string): Files => {
deleteFile,
files,
renameFile,
updateFiles
updateFiles,
};
};

4
components/system/Files/Views/Icon/StyledFileEntry.ts
View File

@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled from "styled-components";
const StyledFileEntry = styled.li`
display: flex;
@ -13,7 +13,7 @@ const StyledFileEntry = styled.li`
&::before {
bottom: -1px;
content: '';
content: "";
left: -1px;
position: absolute;
right: -1px;

4
components/system/Files/Views/Icon/StyledFileManager.ts
View File

@ -1,5 +1,5 @@
import StyledWindow from 'components/system/Window/StyledWindow';
import styled from 'styled-components';
import StyledWindow from "components/system/Window/StyledWindow";
import styled from "styled-components";
const StyledFileManager = styled.ol`
display: grid;

2
components/system/Files/Views/List/StyledFileEntry.ts
View File

@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled from "styled-components";
const StyledFileEntry = styled.li`
figure {

2
components/system/Files/Views/List/StyledFileManager.ts
View File

@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled from "styled-components";
const StyledFileManager = styled.ol`
margin-left: 7px;

4
components/system/Files/Views/StyledRenameBox.ts
View File

@ -1,8 +1,8 @@
import styled from 'styled-components';
import styled from "styled-components";
const StyledRenameBox = styled.input.attrs({
spellCheck: false,
type: 'text'
type: "text",
})`
border: 1px solid rgb(100, 100, 100);
font-family: inherit;

30
components/system/Files/Views/index.ts
View File

@ -1,34 +1,34 @@
import StyledIconFileEntry from 'components/system/Files/Views/Icon/StyledFileEntry';
import StyledIconFileManager from 'components/system/Files/Views/Icon/StyledFileManager';
import StyledListFileEntry from 'components/system/Files/Views/List/StyledFileEntry';
import StyledListFileManager from 'components/system/Files/Views/List/StyledFileManager';
import type { DefaultTheme, StyledComponent } from 'styled-components';
import type { IconProps } from 'styles/common/Icon';
import StyledIconFileEntry from "components/system/Files/Views/Icon/StyledFileEntry";
import StyledIconFileManager from "components/system/Files/Views/Icon/StyledFileManager";
import StyledListFileEntry from "components/system/Files/Views/List/StyledFileEntry";
import StyledListFileManager from "components/system/Files/Views/List/StyledFileManager";
import type { DefaultTheme, StyledComponent } from "styled-components";
import type { IconProps } from "styles/common/Icon";
type FileManagerView = {
StyledFileEntry: StyledComponent<'li', DefaultTheme>;
StyledFileManager: StyledComponent<'ol', DefaultTheme>;
StyledFileEntry: StyledComponent<"li", DefaultTheme>;
StyledFileManager: StyledComponent<"ol", DefaultTheme>;
};
export type FileManagerViewNames = 'icon' | 'list';
export type FileManagerViewNames = "icon" | "list";
export const FileManagerViews: Record<FileManagerViewNames, FileManagerView> = {
icon: {
StyledFileEntry: StyledIconFileEntry,
StyledFileManager: StyledIconFileManager
StyledFileManager: StyledIconFileManager,
},
list: {
StyledFileEntry: StyledListFileEntry,
StyledFileManager: StyledListFileManager
}
StyledFileManager: StyledListFileManager,
},
};
export const FileEntryIconSize: { [view: string]: IconProps } = {
icon: {
imgSize: 48
imgSize: 48,
},
list: {
displaySize: 24,
imgSize: 48
}
imgSize: 48,
},
};

22
components/system/Menu/MenuItemEntry.tsx
View File

@ -1,10 +1,10 @@
import Menu from 'components/system/Menu';
import { ChevronRight } from 'components/system/Menu/MenuIcons';
import type { MenuItem } from 'contexts/menu/useMenuContextState';
import { useEffect, useRef, useState } from 'react';
import type { Position } from 'react-rnd';
import { useTheme } from 'styled-components';
import Icon from 'styles/common/Icon';
import Menu from "components/system/Menu";
import { ChevronRight } from "components/system/Menu/MenuIcons";
import type { MenuItem } from "contexts/menu/useMenuContextState";
import { useEffect, useRef, useState } from "react";
import type { Position } from "react-rnd";
import { useTheme } from "styled-components";
import Icon from "styles/common/Icon";
type MenuItemEntryProps = MenuItem & {
resetMenu: () => void;
@ -17,7 +17,7 @@ const MenuItemEntry = ({
menu,
primary,
resetMenu,
separator
separator,
}: MenuItemEntryProps): JSX.Element => {
const entryRef = useRef<HTMLLIElement | null>(null);
const [subMenuOffset, setSubMenuOffset] = useState<Position>({ x: 0, y: 0 });
@ -37,7 +37,7 @@ const MenuItemEntry = ({
setSubMenuOffset({
x: width - sizes.contextMenu.subMenuOffset,
y: -height - sizes.contextMenu.subMenuOffset
y: -height - sizes.contextMenu.subMenuOffset,
});
}
}, [menu, sizes.contextMenu.subMenuOffset]);
@ -48,7 +48,7 @@ const MenuItemEntry = ({
<hr />
) : (
<figure
className={showSubMenu ? 'active' : ''}
className={showSubMenu ? "active" : ""}
onClick={() => {
action?.();
resetMenu();
@ -56,7 +56,7 @@ const MenuItemEntry = ({
{...subMenuEvents}
>
{icon && <Icon src={icon} alt={label} imgSize={16} />}
<figcaption className={primary ? 'primary' : ''}>{label}</figcaption>
<figcaption className={primary ? "primary" : ""}>{label}</figcaption>
{menu && <ChevronRight />}
</figure>
)}

2
components/system/Menu/StyledMenu.ts
View File

@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled from "styled-components";
type StyledMenuProps = {
isSubMenu: boolean;

12
components/system/Menu/index.tsx
View File

@ -1,8 +1,8 @@
import MenuItemEntry from 'components/system/Menu/MenuItemEntry';
import StyledMenu from 'components/system/Menu/StyledMenu';
import { useMenu } from 'contexts/menu/index';
import type { MenuState } from 'contexts/menu/useMenuContextState';
import { useEffect, useRef } from 'react';
import MenuItemEntry from "components/system/Menu/MenuItemEntry";
import StyledMenu from "components/system/Menu/StyledMenu";
import { useMenu } from "contexts/menu/index";
import type { MenuState } from "contexts/menu/useMenuContextState";
import { useEffect, useRef } from "react";
type MenuProps = {
subMenu?: MenuState;
@ -13,7 +13,7 @@ const Menu = ({ subMenu }: MenuProps): JSX.Element => {
const { items, x = 0, y = 0 } = subMenu || baseMenu;
const menuRef = useRef<HTMLElement | null>(null);
const resetMenu = ({
relatedTarget
relatedTarget,
}: Partial<FocusEvent | MouseEvent> = {}) => {
if (!menuRef.current?.contains(relatedTarget as HTMLElement)) {
setMenu({});

2
components/system/StartMenu/Sidebar/SidebarIcons.tsx
View File

@ -1,4 +1,4 @@
import { useTheme } from 'styled-components';
import { useTheme } from "styled-components";
export const AllApps = (): JSX.Element => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">

2
components/system/StartMenu/Sidebar/StyledSidebar.ts
View File

@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled from "styled-components";
const StyledSidebar = styled.nav`
display: flex;

6
components/system/StartMenu/Sidebar/StyledSidebarButton.ts
View File

@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled from "styled-components";
type StyledSidebarButtonProps = {
active?: boolean;
@ -14,8 +14,8 @@ const StyledSidebarButton = styled.li<StyledSidebarButtonProps>`
&::before {
border-left: ${({ active, theme }) =>
`4px solid ${active ? theme.colors.highlight : 'transparent'}`};
content: '';
`4px solid ${active ? theme.colors.highlight : "transparent"}`};
content: "";
height: 48px;
position: absolute;
width: 48px;

16
components/system/StartMenu/Sidebar/index.tsx
View File

@ -2,10 +2,10 @@ import {
AllApps,
Documents,
Power,
SideMenu
} from 'components/system/StartMenu/Sidebar/SidebarIcons';
import StyledSidebar from 'components/system/StartMenu/Sidebar/StyledSidebar';
import StyledSidebarButton from 'components/system/StartMenu/Sidebar/StyledSidebarButton';
SideMenu,
} from "components/system/StartMenu/Sidebar/SidebarIcons";
import StyledSidebar from "components/system/StartMenu/Sidebar/StyledSidebar";
import StyledSidebarButton from "components/system/StartMenu/Sidebar/StyledSidebarButton";
type SidebarButtonProps = {
active?: boolean;
@ -14,13 +14,13 @@ type SidebarButtonProps = {
};
const topButtons = [
{ name: 'START', icon: <SideMenu /> },
{ name: 'All apps', icon: <AllApps />, active: true }
{ name: "START", icon: <SideMenu /> },
{ name: "All apps", icon: <AllApps />, active: true },
];
const bottomButtons = [
{ name: 'Documents', icon: <Documents /> },
{ name: 'Power', icon: <Power /> }
{ name: "Documents", icon: <Documents /> },
{ name: "Power", icon: <Power /> },
];
const SidebarButton = ({ active, icon, name }: SidebarButtonProps) => (

2
components/system/StartMenu/StyledStartMenu.ts
View File

@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled from "styled-components";
const StyledStartMenu = styled.nav`
backdrop-filter: blur(12px);

14
components/system/StartMenu/index.tsx
View File

@ -1,21 +1,21 @@
import FileManager from 'components/system/Files/FileManager';
import Sidebar from 'components/system/StartMenu/Sidebar';
import StyledStartMenu from 'components/system/StartMenu/StyledStartMenu';
import { useSession } from 'contexts/session';
import { useEffect, useRef } from 'react';
import FileManager from "components/system/Files/FileManager";
import Sidebar from "components/system/StartMenu/Sidebar";
import StyledStartMenu from "components/system/StartMenu/StyledStartMenu";
import { useSession } from "contexts/session";
import { useEffect, useRef } from "react";
const StartMenu = (): JSX.Element => {
const { toggleStartMenu } = useSession();
const menuRef = useRef<HTMLElement | null>(null);
const maybeCloseMenu: React.FocusEventHandler<HTMLElement> = ({
relatedTarget
relatedTarget,
}) => {
if (!menuRef.current?.contains(relatedTarget as HTMLElement)) {
if (
menuRef.current?.nextSibling &&
![
relatedTarget,
(relatedTarget as HTMLElement)?.parentElement
(relatedTarget as HTMLElement)?.parentElement,
].includes(menuRef.current?.nextSibling)
) {
toggleStartMenu(false);

2
components/system/Taskbar/Clock/StyledClock.ts
View File

@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled from "styled-components";
const StyledClock = styled.time`
color: ${({ theme }) => theme.colors.text};

6
components/system/Taskbar/Clock/index.tsx
View File

@ -1,6 +1,6 @@
import StyledClock from 'components/system/Taskbar/Clock/StyledClock';
import useClock from 'components/system/Taskbar/Clock/useClock';
import useLocaleDateTime from 'components/system/Taskbar/Clock/useLocaleDateTime';
import StyledClock from "components/system/Taskbar/Clock/StyledClock";
import useClock from "components/system/Taskbar/Clock/useClock";
import useLocaleDateTime from "components/system/Taskbar/Clock/useLocaleDateTime";
const Clock = (): JSX.Element => {
const now = useClock();

4
components/system/Taskbar/Clock/useClock.ts
View File

@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
import { MILLISECONDS_IN_SECOND } from 'utils/constants';
import { useEffect, useState } from "react";
import { MILLISECONDS_IN_SECOND } from "utils/constants";
const useClock = (): Date => {
const [now, setNow] = useState(new Date());

6
components/system/Taskbar/Clock/useLocaleDateTime.ts
View File

@ -1,5 +1,5 @@
import { useTheme } from 'styled-components';
import { DEFAULT_LOCALE } from 'utils/constants';
import { useTheme } from "styled-components";
import { DEFAULT_LOCALE } from "utils/constants";
type LocaleTimeDate = {
date: string;
@ -14,7 +14,7 @@ const useLocaleDateTime = (now: Date): LocaleTimeDate => {
formats.date
).format(now);
const day = new Intl.DateTimeFormat(DEFAULT_LOCALE, {
weekday: 'long'
weekday: "long",
}).format(now);
const date = `${formattedDate}\n${day}`;
const time = new Intl.DateTimeFormat(DEFAULT_LOCALE, formats.time).format(

4
components/system/Taskbar/StartButton/StyledStartButton.ts
View File

@ -1,5 +1,5 @@
import styled from 'styled-components';
import Button from 'styles/common/Button';
import styled from "styled-components";
import Button from "styles/common/Button";
type StyledStartButtonProps = {
active: boolean;

6
components/system/Taskbar/StartButton/index.tsx
View File

@ -1,6 +1,6 @@
import StyledStartButton from 'components/system/Taskbar/StartButton/StyledStartButton';
import WindowsIcon from 'components/system/Taskbar/StartButton/WindowsIcon';
import { useSession } from 'contexts/session';
import StyledStartButton from "components/system/Taskbar/StartButton/StyledStartButton";
import WindowsIcon from "components/system/Taskbar/StartButton/WindowsIcon";
import { useSession } from "contexts/session";
const StartButton = (): JSX.Element => {
const { startMenuVisible, toggleStartMenu } = useSession();

2
components/system/Taskbar/StyledTaskbar.ts
View File

@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled from "styled-components";
const StyledTaskbar = styled.nav`
backdrop-filter: ${({ theme }) => `blur(${theme.sizes.taskbar.blur})`};

2
components/system/Taskbar/TaskbarEntries/StyledTaskbarEntries.ts
View File

@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled from "styled-components";
const StyledTaskbarEntries = styled.ol`
column-gap: 1px;

6
components/system/Taskbar/TaskbarEntries/index.tsx
View File

@ -1,6 +1,6 @@
import StyledTaskbarEntries from 'components/system/Taskbar/TaskbarEntries/StyledTaskbarEntries';
import TaskbarEntry from 'components/system/Taskbar/TaskbarEntry';
import { ProcessConsumer } from 'contexts/process';
import StyledTaskbarEntries from "components/system/Taskbar/TaskbarEntries/StyledTaskbarEntries";
import TaskbarEntry from "components/system/Taskbar/TaskbarEntry";
import { ProcessConsumer } from "contexts/process";
const TaskbarEntries = (): JSX.Element => (
<StyledTaskbarEntries>

2
components/system/Taskbar/TaskbarEntry/Peek/StyledPeekWindow.ts
View File

@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled from "styled-components";
const StyledPeekWindow = styled.div`
background-color: ${({ theme }) => theme.colors.taskbar.hover};

30
components/system/Taskbar/TaskbarEntry/Peek/useWindowPeek.tsx
View File

@ -1,11 +1,11 @@
import StyledPeekWindow from 'components/system/Taskbar/TaskbarEntry/Peek/StyledPeekWindow';
import useWindowActions from 'components/system/Window/Titlebar/useWindowActions';
import { CloseIcon } from 'components/system/Window/Titlebar/WindowActionIcons';
import { useProcesses } from 'contexts/process';
import { toPng } from 'html-to-image';
import { useCallback, useEffect, useRef, useState } from 'react';
import Button from 'styles/common/Button';
import { MILLISECONDS_IN_SECOND } from 'utils/constants';
import StyledPeekWindow from "components/system/Taskbar/TaskbarEntry/Peek/StyledPeekWindow";
import useWindowActions from "components/system/Window/Titlebar/useWindowActions";
import { CloseIcon } from "components/system/Window/Titlebar/WindowActionIcons";
import { useProcesses } from "contexts/process";
import { toPng } from "html-to-image";
import { useCallback, useEffect, useRef, useState } from "react";
import Button from "styles/common/Button";
import { MILLISECONDS_IN_SECOND } from "utils/constants";
type WindowPeek = {
PeekComponent?: React.ComponentType;
@ -18,13 +18,13 @@ type WindowPeek = {
const useWindowPeek = (id: string): WindowPeek => {
const {
processes: {
[id]: { componentWindow = undefined, minimized = false, title = '' } = {}
}
[id]: { componentWindow = undefined, minimized = false, title = "" } = {},
},
} = useProcesses();
const mouseTimer = useRef<NodeJS.Timer | null>(null);
const previewTimer = useRef<NodeJS.Timer | null>(null);
const [showPeek, setShowPeek] = useState(false);
const [previewSrc, setPreviewSrc] = useState('');
const [previewSrc, setPreviewSrc] = useState("");
const { onClose } = useWindowActions(id);
const PeekWindow = (): JSX.Element => (
<StyledPeekWindow>
@ -56,13 +56,13 @@ const useWindowPeek = (id: string): WindowPeek => {
if (previewTimer?.current) clearInterval(previewTimer.current);
setShowPeek(false);
setPreviewSrc('');
setPreviewSrc("");
}, []);
useEffect(() => {
if (minimized) {
setShowPeek(false);
setPreviewSrc('');
setPreviewSrc("");
}
}, [minimized]);
@ -74,8 +74,8 @@ const useWindowPeek = (id: string): WindowPeek => {
? {}
: {
onMouseEnter,
onMouseLeave
}
onMouseLeave,
},
};
};

14
components/system/Taskbar/TaskbarEntry/StyledTaskbarEntry.ts
View File

@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled from "styled-components";
type StyledTaskbarEntryProps = {
foreground: boolean;
@ -13,17 +13,17 @@ const StyledTaskbarEntry = styled.li<StyledTaskbarEntryProps>`
&::before {
background-color: ${({ foreground, theme }) =>
foreground ? theme.colors.taskbar.active : ''};
foreground ? theme.colors.taskbar.active : ""};
border-bottom: ${({ theme }) => `
${theme.sizes.taskbar.entry.borderSize} solid ${theme.colors.highlight}
`};
bottom: 0;
content: '';
height: ${({ foreground }) => (foreground ? '100%' : 0)};
margin: ${({ foreground }) => (foreground ? '' : '0 4px')};
content: "";
height: ${({ foreground }) => (foreground ? "100%" : 0)};
margin: ${({ foreground }) => (foreground ? "" : "0 4px")};
position: absolute;
transition: ${({ foreground }) => (foreground ? 'all 0.2s' : 'width 0.1s')};
width: ${({ foreground }) => (foreground ? '100%' : `calc(100% - 8px)`)};
transition: ${({ foreground }) => (foreground ? "all 0.2s" : "width 0.1s")};
width: ${({ foreground }) => (foreground ? "100%" : `calc(100% - 8px)`)};
z-index: -1;
}

20
components/system/Taskbar/TaskbarEntry/index.tsx
View File

@ -1,11 +1,11 @@
import useWindowPeek from 'components/system/Taskbar/TaskbarEntry/Peek/useWindowPeek';
import StyledTaskbarEntry from 'components/system/Taskbar/TaskbarEntry/StyledTaskbarEntry';
import useNextFocusable from 'components/system/Window/useNextFocusable';
import { useProcesses } from 'contexts/process';
import { useSession } from 'contexts/session';
import { useCallback } from 'react';
import Button from 'styles/common/Button';
import Icon from 'styles/common/Icon';
import useWindowPeek from "components/system/Taskbar/TaskbarEntry/Peek/useWindowPeek";
import StyledTaskbarEntry from "components/system/Taskbar/TaskbarEntry/StyledTaskbarEntry";
import useNextFocusable from "components/system/Window/useNextFocusable";
import { useProcesses } from "contexts/process";
import { useSession } from "contexts/session";
import { useCallback } from "react";
import Button from "styles/common/Button";
import Icon from "styles/common/Icon";
type TaskbarEntryProps = {
icon: string;
@ -20,11 +20,11 @@ const TaskbarEntry = ({ icon, id, title }: TaskbarEntryProps): JSX.Element => {
const {
linkElement,
minimize,
processes: { [id]: { minimized = false } = {} }
processes: { [id]: { minimized = false } = {} },
} = useProcesses();
const linkTaskbarEntry = useCallback(
(taskbarEntry: HTMLButtonElement) =>
taskbarEntry && linkElement(id, 'taskbarEntry', taskbarEntry),
taskbarEntry && linkElement(id, "taskbarEntry", taskbarEntry),
[id, linkElement]
);
const onClick = () => {

12
components/system/Taskbar/index.tsx
View File

@ -1,9 +1,9 @@
import StartMenu from 'components/system/StartMenu';
import Clock from 'components/system/Taskbar/Clock';
import StartButton from 'components/system/Taskbar/StartButton';
import StyledTaskbar from 'components/system/Taskbar/StyledTaskbar';
import TaskbarEntries from 'components/system/Taskbar/TaskbarEntries';
import { useSession } from 'contexts/session';
import StartMenu from "components/system/StartMenu";
import Clock from "components/system/Taskbar/Clock";
import StartButton from "components/system/Taskbar/StartButton";
import StyledTaskbar from "components/system/Taskbar/StyledTaskbar";
import TaskbarEntries from "components/system/Taskbar/TaskbarEntries";
import { useSession } from "contexts/session";
const Taskbar = (): JSX.Element => {
const { startMenuVisible } = useSession();

30
components/system/Window/RndWindow/index.tsx
View File

@ -1,9 +1,9 @@
import useRnd from 'components/system/Window/RndWindow/useRnd';
import { useProcesses } from 'contexts/process';
import type { Process } from 'contexts/process/types';
import { useSession } from 'contexts/session';
import { useEffect, useRef } from 'react';
import { Rnd } from 'react-rnd';
import useRnd from "components/system/Window/RndWindow/useRnd";
import { useProcesses } from "contexts/process";
import type { Process } from "contexts/process/types";
import { useSession } from "contexts/session";
import { useEffect, useRef } from "react";
import { Rnd } from "react-rnd";
type RndWindowProps = {
children: React.ReactNode;
@ -14,8 +14,8 @@ type RndWindowProps = {
const reRouteFocus =
(focusElement?: HTMLElement) =>
(element?: Element): void => {
element?.setAttribute('tabindex', '-1');
element?.addEventListener('mousedown', (event) => {
element?.setAttribute("tabindex", "-1");
element?.addEventListener("mousedown", (event) => {
event.preventDefault();
focusElement?.focus();
});
@ -24,7 +24,7 @@ const reRouteFocus =
const RndWindow = ({ children, id, zIndex }: RndWindowProps): JSX.Element => {
const {
linkElement,
processes: { [id]: windowProcess = {} }
processes: { [id]: windowProcess = {} },
} = useProcesses();
const { componentWindow, maximized, minimized } = windowProcess as Process;
const rndRef = useRef<Rnd | null>(null);
@ -44,7 +44,7 @@ const RndWindow = ({ children, id, zIndex }: RndWindowProps): JSX.Element => {
windowContainer &&
Object.keys(windowProcess).length
) {
linkElement(id, 'componentWindow', windowContainer as HTMLElement);
linkElement(id, "componentWindow", windowContainer as HTMLElement);
}
return () =>
@ -52,8 +52,8 @@ const RndWindow = ({ children, id, zIndex }: RndWindowProps): JSX.Element => {
...currentWindowStates,
[id]: {
position: currentWindow?.props?.position,
size: currentWindow?.props?.size
}
size: currentWindow?.props?.size,
},
}));
}, [
componentWindow,
@ -61,15 +61,15 @@ const RndWindow = ({ children, id, zIndex }: RndWindowProps): JSX.Element => {
linkElement,
maximized,
setWindowStates,
windowProcess
windowProcess,
]);
return (
<Rnd
ref={rndRef}
style={{
pointerEvents: minimized ? 'none' : 'all',
zIndex
pointerEvents: minimized ? "none" : "all",
zIndex,
}}
{...rndProps}
>

80
components/system/Window/RndWindow/rndDefaults.ts
View File

@ -1,62 +1,62 @@
import type { HandleStyles } from 'react-rnd';
import type { HandleStyles } from "react-rnd";
const rndDefaults = {
bounds: 'main',
cancel: '.cancel',
dragHandleClassName: 'handle',
bounds: "main",
cancel: ".cancel",
dragHandleClassName: "handle",
enableUserSelectHack: false,
minHeight: '30px',
minWidth: '167px',
minHeight: "30px",
minWidth: "167px",
resizeHandleStyles: {
bottom: {
bottom: '-3px',
cursor: 'ns-resize',
height: '6px'
bottom: "-3px",
cursor: "ns-resize",
height: "6px",
},
bottomLeft: {
bottom: '-3px',
cursor: 'nesw-resize',
height: '12px',
left: '-3px',
width: '12px'
bottom: "-3px",
cursor: "nesw-resize",
height: "12px",
left: "-3px",
width: "12px",
},
bottomRight: {
bottom: '-3px',
cursor: 'nwse-resize',
height: '12px',
right: '-3px',
width: '12px'
bottom: "-3px",
cursor: "nwse-resize",
height: "12px",
right: "-3px",
width: "12px",
},
left: {
cursor: 'ew-resize',
left: '-3px',
width: '6px'
cursor: "ew-resize",
left: "-3px",
width: "6px",
},
right: {
cursor: 'ew-resize',
right: '-3px',
width: '6px'
cursor: "ew-resize",
right: "-3px",
width: "6px",
},
top: {
cursor: 'ns-resize',
height: '6px',
top: '-3px'
cursor: "ns-resize",
height: "6px",
top: "-3px",
},
topLeft: {
cursor: 'nwse-resize',
height: '12px',
left: '-3px',
top: '-3px',
width: '12px'
cursor: "nwse-resize",
height: "12px",
left: "-3px",
top: "-3px",
width: "12px",
},
topRight: {
cursor: 'nesw-resize',
height: '12px',
right: '-3px',
top: '-3px',
width: '12px'
}
} as HandleStyles
cursor: "nesw-resize",
height: "12px",
right: "-3px",
top: "-3px",
width: "12px",
},
} as HandleStyles,
};
export default rndDefaults;

6
components/system/Window/RndWindow/useDraggable.ts
View File

@ -1,6 +1,6 @@
import { useState } from 'react';
import type { Position } from 'react-rnd';
import { DEFAULT_WINDOW_POSITION } from 'utils/constants';
import { useState } from "react";
import type { Position } from "react-rnd";
import { DEFAULT_WINDOW_POSITION } from "utils/constants";
type Draggable = [Position, React.Dispatch<React.SetStateAction<Position>>];

8
components/system/Window/RndWindow/useResizable.ts
View File

@ -1,8 +1,8 @@
import { useEffect, useState } from 'react';
import type { Props } from 'react-rnd';
import { DEFAULT_WINDOW_SIZE } from 'utils/constants';
import { useEffect, useState } from "react";
import type { Props } from "react-rnd";
import { DEFAULT_WINDOW_SIZE } from "utils/constants";
export type Size = NonNullable<Props['size']>;
export type Size = NonNullable<Props["size"]>;
type Resizable = [Size, React.Dispatch<React.SetStateAction<Size>>];

26
components/system/Window/RndWindow/useRnd.ts
View File

@ -1,23 +1,23 @@
import { centerPosition } from 'components/system/Window/functions';
import rndDefaults from 'components/system/Window/RndWindow/rndDefaults';
import useDraggable from 'components/system/Window/RndWindow/useDraggable';
import useResizable from 'components/system/Window/RndWindow/useResizable';
import { useProcesses } from 'contexts/process';
import { useSession } from 'contexts/session';
import type { DraggableEventHandler } from 'react-draggable';
import type { Props, RndResizeCallback } from 'react-rnd';
import { useTheme } from 'styled-components';
import { centerPosition } from "components/system/Window/functions";
import rndDefaults from "components/system/Window/RndWindow/rndDefaults";
import useDraggable from "components/system/Window/RndWindow/useDraggable";
import useResizable from "components/system/Window/RndWindow/useResizable";
import { useProcesses } from "contexts/process";
import { useSession } from "contexts/session";
import type { DraggableEventHandler } from "react-draggable";
import type { Props, RndResizeCallback } from "react-rnd";
import { useTheme } from "styled-components";
const useRnd = (id: string, maximized = false): Props => {
const {
processes: { [id]: { autoSizing = false, lockAspectRatio = false } = {} }
processes: { [id]: { autoSizing = false, lockAspectRatio = false } = {} },
} = useProcesses();
const { windowStates: { [id]: windowState } = {} } = useSession();
const { position: statePosition, size: stateSize } = windowState || {};
const {
sizes: {
taskbar: { height: taskbarHeight }
}
taskbar: { height: taskbarHeight },
},
} = useTheme();
const [size, setSize] = useResizable(autoSizing, stateSize);
const [position, setPosition] = useDraggable(
@ -46,7 +46,7 @@ const useRnd = (id: string, maximized = false): Props => {
onResizeStop,
position,
size,
...rndDefaults
...rndDefaults,
};
};

4
components/system/Window/StyledWindow.ts
View File

@ -1,5 +1,5 @@
import { motion } from 'framer-motion';
import styled from 'styled-components';
import { motion } from "framer-motion";
import styled from "styled-components";
type StyledWindowProps = {
foreground: boolean;

8
components/system/Window/Titlebar/StyledTitlebar.ts
View File

@ -1,5 +1,5 @@
import type { DefaultTheme } from 'styled-components';
import styled from 'styled-components';
import type { DefaultTheme } from "styled-components";
import styled from "styled-components";
type StyledTitlebarProps = {
foreground: boolean;
@ -7,7 +7,7 @@ type StyledTitlebarProps = {
const styledBorder = ({
foreground,
theme
theme,
}: StyledTitlebarProps & { theme: DefaultTheme }) =>
foreground
? `1px solid ${theme.colors.titleBar.background}`
@ -107,7 +107,7 @@ const StyledTitlebar = styled.header<StyledTitlebarProps>`
&:disabled {
svg {
fill: ${({ foreground }) =>
foreground ? 'rgb(50, 50, 50)' : 'rgb(60, 60, 60)'};
foreground ? "rgb(50, 50, 50)" : "rgb(60, 60, 60)"};
}
&:hover {

28
components/system/Window/Titlebar/index.tsx
View File

@ -1,16 +1,16 @@
import useDoubleClick from 'components/system/useDoubleClick';
import StyledTitlebar from 'components/system/Window/Titlebar/StyledTitlebar';
import useWindowActions from 'components/system/Window/Titlebar/useWindowActions';
import useDoubleClick from "components/system/useDoubleClick";
import StyledTitlebar from "components/system/Window/Titlebar/StyledTitlebar";
import useWindowActions from "components/system/Window/Titlebar/useWindowActions";
import {
CloseIcon,
MaximizedIcon,
MaximizeIcon,
MinimizeIcon
} from 'components/system/Window/Titlebar/WindowActionIcons';
import { useProcesses } from 'contexts/process';
import { useSession } from 'contexts/session';
import Button from 'styles/common/Button';
import Icon from 'styles/common/Icon';
MinimizeIcon,
} from "components/system/Window/Titlebar/WindowActionIcons";
import { useProcesses } from "contexts/process";
import { useSession } from "contexts/session";
import Button from "styles/common/Button";
import Icon from "styles/common/Icon";
type TitlebarProps = {
id: string;
@ -21,12 +21,12 @@ const Titlebar = ({ id }: TitlebarProps): JSX.Element => {
processes: {
[id]: {
autoSizing = false,
icon = '',
icon = "",
lockAspectRatio = false,
title = '',
maximized = false
} = {}
}
title = "",
maximized = false,
} = {},
},
} = useProcesses();
const { foregroundId } = useSession();
const isForeground = id === foregroundId;

8
components/system/Window/Titlebar/useWindowActions.ts
View File

@ -1,7 +1,7 @@
import { closeWithTransition } from 'components/system/Window/functions';
import useNextFocusable from 'components/system/Window/useNextFocusable';
import { useProcesses } from 'contexts/process';
import { useSession } from 'contexts/session';
import { closeWithTransition } from "components/system/Window/functions";
import useNextFocusable from "components/system/Window/useNextFocusable";
import { useProcesses } from "contexts/process";
import { useSession } from "contexts/session";
type WindowActions = {
onClose: () => void;

14
components/system/Window/functions.ts
View File

@ -1,10 +1,10 @@
import type { Size } from 'components/system/Window/RndWindow/useResizable';
import type { ProcessContextState } from 'contexts/process/useProcessContextState';
import type { Position } from 'react-rnd';
import { WINDOW_TRANSITION_DURATION_IN_MILLISECONDS } from 'utils/constants';
import { pxToNum } from 'utils/functions';
import type { Size } from "components/system/Window/RndWindow/useResizable";
import type { ProcessContextState } from "contexts/process/useProcessContextState";
import type { Position } from "react-rnd";
import { WINDOW_TRANSITION_DURATION_IN_MILLISECONDS } from "utils/constants";
import { pxToNum } from "utils/functions";
type processCloser = ProcessContextState['close'];
type processCloser = ProcessContextState["close"];
export const centerPosition = (
{ height, width }: Size,
@ -14,7 +14,7 @@ export const centerPosition = (
return {
x: Math.floor(vw / 2 - pxToNum(width) / 2),
y: Math.floor((vh - pxToNum(taskbarHeight)) / 2 - pxToNum(height) / 2)
y: Math.floor((vh - pxToNum(taskbarHeight)) / 2 - pxToNum(height) / 2),
};
};

20
components/system/Window/index.tsx
View File

@ -1,12 +1,12 @@
import type { ComponentProcessProps } from 'components/system/Apps/RenderComponent';
import RndWindow from 'components/system/Window/RndWindow';
import StyledWindow from 'components/system/Window/StyledWindow';
import Titlebar from 'components/system/Window/Titlebar';
import useFocusable from 'components/system/Window/useFocusable';
import useWindowTransitions from 'components/system/Window/useWindowTransitions';
import { useProcesses } from 'contexts/process';
import { useSession } from 'contexts/session';
import { useRef } from 'react';
import type { ComponentProcessProps } from "components/system/Apps/RenderComponent";
import RndWindow from "components/system/Window/RndWindow";
import StyledWindow from "components/system/Window/StyledWindow";
import Titlebar from "components/system/Window/Titlebar";
import useFocusable from "components/system/Window/useFocusable";
import useWindowTransitions from "components/system/Window/useWindowTransitions";
import { useProcesses } from "contexts/process";
import { useSession } from "contexts/session";
import { useRef } from "react";
type WindowProps = ComponentProcessProps & {
children: React.ReactNode;
@ -14,7 +14,7 @@ type WindowProps = ComponentProcessProps & {
const Window = ({ children, id }: WindowProps): JSX.Element => {
const {
processes: { [id]: { backgroundColor = '' } = {} }
processes: { [id]: { backgroundColor = "" } = {} },
} = useProcesses();
const { foregroundId } = useSession();
const isForeground = id === foregroundId;

16
components/system/Window/useFocusable.ts
View File

@ -1,6 +1,6 @@
import { useProcesses } from 'contexts/process';
import { useSession } from 'contexts/session';
import { useCallback, useEffect } from 'react';
import { useProcesses } from "contexts/process";
import { useSession } from "contexts/session";
import { useCallback, useEffect } from "react";
type Events = {
onBlur: (event: React.FocusEvent<HTMLElement>) => void;
@ -21,8 +21,8 @@ const useFocusable = (
useSession();
const {
processes: {
[id]: { minimized = false, taskbarEntry = undefined, url = '' } = {}
}
[id]: { minimized = false, taskbarEntry = undefined, url = "" } = {},
},
} = useProcesses();
const zIndex =
stackOrder.length + (minimized ? 1 : -stackOrder.indexOf(id)) + 1;
@ -30,7 +30,7 @@ const useFocusable = (
const onBlur: React.FocusEventHandler<HTMLElement> = (event) => {
const { relatedTarget } = event;
if (isForeground && relatedTarget !== taskbarEntry) setForegroundId('');
if (isForeground && relatedTarget !== taskbarEntry) setForegroundId("");
callbackEvents?.onBlur?.(event);
};
@ -52,7 +52,7 @@ const useFocusable = (
prependToStack,
setForegroundId,
taskbarEntry,
windowRef
windowRef,
]
);
@ -66,7 +66,7 @@ const useFocusable = (
onBlur,
onFocus: moveToFront,
tabIndex: -1,
zIndex
zIndex,
};
};

6
components/system/Window/useNextFocusable.ts
View File

@ -1,5 +1,5 @@
import { useProcesses } from 'contexts/process';
import { useSession } from 'contexts/session';
import { useProcesses } from "contexts/process";
import { useSession } from "contexts/session";
const useNextFocusable = (id: string): string => {
const { stackOrder } = useSession();
@ -9,7 +9,7 @@ const useNextFocusable = (id: string): string => {
(stackId) => stackId !== id && !processes?.[stackId]?.minimized
);
return nextFocusableId || '';
return nextFocusableId || "";
};
export default useNextFocusable;

12
components/system/Window/useTitle.ts
View File

@ -1,8 +1,8 @@
import { useProcesses } from 'contexts/process';
import processDirectory from 'contexts/process/directory';
import { basename } from 'path';
import { useCallback } from 'react';
import { PROCESS_DELIMITER } from 'utils/constants';
import { useProcesses } from "contexts/process";
import processDirectory from "contexts/process/directory";
import { basename } from "path";
import { useCallback } from "react";
import { PROCESS_DELIMITER } from "utils/constants";
type Title = {
appendFileToTitle: (url: string) => void;
@ -18,7 +18,7 @@ const useTitle = (id: string): Title => {
);
return {
appendFileToTitle
appendFileToTitle,
};
};

18
components/system/Window/useWindowSize.ts
View File

@ -1,7 +1,7 @@
import { useSession } from 'contexts/session';
import { useCallback } from 'react';
import { useTheme } from 'styled-components';
import { pxToNum } from 'utils/functions';
import { useSession } from "contexts/session";
import { useCallback } from "react";
import { useTheme } from "styled-components";
import { pxToNum } from "utils/functions";
type WindowSize = {
updateWindowSize: (height: number, width: number) => void;
@ -10,7 +10,7 @@ type WindowSize = {
const useWindowSize = (id: string): WindowSize => {
const { setWindowStates } = useSession();
const {
sizes: { titleBar }
sizes: { titleBar },
} = useTheme();
const updateWindowSize = useCallback(
@ -20,15 +20,15 @@ const useWindowSize = (id: string): WindowSize => {
[id]: {
size: {
height: height + pxToNum(titleBar.height),
width
}
}
width,
},
},
})),
[id, setWindowStates, titleBar.height]
);
return {
updateWindowSize
updateWindowSize,
};
};

50
components/system/Window/useWindowTransitions.ts
View File

@ -1,36 +1,36 @@
import { useProcesses } from 'contexts/process';
import type { MotionProps, Variant } from 'framer-motion';
import { useEffect, useState } from 'react';
import { useTheme } from 'styled-components';
import { useProcesses } from "contexts/process";
import type { MotionProps, Variant } from "framer-motion";
import { useEffect, useState } from "react";
import { useTheme } from "styled-components";
import {
MILLISECONDS_IN_SECOND,
WINDOW_TRANSITION_DURATION_IN_MILLISECONDS
} from 'utils/constants';
import { pxToNum } from 'utils/functions';
WINDOW_TRANSITION_DURATION_IN_MILLISECONDS,
} from "utils/constants";
import { pxToNum } from "utils/functions";
const active = {
height: 'inherit',
height: "inherit",
opacity: 1,
scale: 1,
width: 'inherit'
width: "inherit",
};
const initial = {
height: 'inherit',
height: "inherit",
opacity: 0,
scale: 0.95,
width: 'inherit'
width: "inherit",
};
const baseMaximize = {
opacity: 1,
scale: 1,
width: '100vw'
width: "100vw",
};
const baseMinimize = {
opacity: 0,
scale: 0.7
scale: 0.7,
};
const useWindowTransitions = (
@ -42,9 +42,9 @@ const useWindowTransitions = (
[id]: {
maximized = false,
minimized = false,
taskbarEntry = undefined
} = {}
}
taskbarEntry = undefined,
} = {},
},
} = useProcesses();
const { sizes: { taskbar } = {} } = useTheme();
const [maximize, setMaximize] = useState<Variant>({});
@ -58,7 +58,7 @@ const useWindowTransitions = (
...baseMaximize,
height: `${window.innerHeight - pxToNum(taskbar?.height)}px`,
x: -windowX,
y: -windowY
y: -windowY,
});
}, [maximized, taskbar?.height, windowRef]);
@ -67,31 +67,31 @@ const useWindowTransitions = (
height: taskbarHeight = 0,
width: taskbarWidth = 0,
x: taskbarX = 0,
y: taskbarY = 0
y: taskbarY = 0,
} = taskbarEntry?.getBoundingClientRect() || {};
const {
height: windowHeight = 0,
width: windowWidth = 0,
x: windowX = 0,
y: windowY = 0
y: windowY = 0,
} = windowRef?.current?.getBoundingClientRect() || {};
setMinimize({
...baseMinimize,
x: taskbarX - windowX - windowWidth / 2 + taskbarWidth / 2,
y: taskbarY - windowY - windowHeight / 2 + taskbarHeight / 2
y: taskbarY - windowY - windowHeight / 2 + taskbarHeight / 2,
});
}, [minimized, taskbarEntry, windowRef]);
return {
animate: (minimized && 'minimize') || (maximized && 'maximize') || 'active',
exit: 'initial',
initial: 'initial',
animate: (minimized && "minimize") || (maximized && "maximize") || "active",
exit: "initial",
initial: "initial",
transition: {
duration:
WINDOW_TRANSITION_DURATION_IN_MILLISECONDS / MILLISECONDS_IN_SECOND
WINDOW_TRANSITION_DURATION_IN_MILLISECONDS / MILLISECONDS_IN_SECOND,
},
variants: { active, initial, maximize, minimize }
variants: { active, initial, maximize, minimize },
};
};

4
components/system/useDoubleClick.ts
View File

@ -1,5 +1,5 @@
import { useRef } from 'react';
import { DOUBLE_CLICK_TIMEOUT_IN_MILLISECONDS } from 'utils/constants';
import { useRef } from "react";
import { DOUBLE_CLICK_TIMEOUT_IN_MILLISECONDS } from "utils/constants";
type DoubleClick = (
handler: React.MouseEventHandler,

4
contexts/contextFactory.tsx
View File

@ -1,4 +1,4 @@
import { createContext, useContext } from 'react';
import { createContext, useContext } from "react";
type ProcessProviderProps = {
children: React.ReactNode;
@ -30,7 +30,7 @@ const contextFactory: ContextFactory = (
return {
Consumer: Context.Consumer,
Provider: ProcessProvider,
useContext: () => useContext(Context)
useContext: () => useContext(Context),
};
};

30
contexts/fileSystem/FileSystemConfig.ts
View File

@ -1,27 +1,27 @@
import type { FileSystemConfiguration } from 'browserfs';
import bfsJson from 'public/.index/fs.bfs.json';
import type { FileSystemConfiguration } from "browserfs";
import bfsJson from "public/.index/fs.bfs.json";
const FileSystemConfig: FileSystemConfiguration = {
fs: 'MountableFileSystem',
fs: "MountableFileSystem",
options: {
'/': {
fs: 'OverlayFS',
"/": {
fs: "OverlayFS",
options: {
readable: {
fs: 'XmlHttpRequest',
fs: "XmlHttpRequest",
options: {
index: bfsJson
}
index: bfsJson,
},
},
writable: {
fs: 'IndexedDB',
fs: "IndexedDB",
options: {
storeName: 'browser-fs-cache'
}
}
}
}
}
storeName: "browser-fs-cache",
},
},
},
},
},
};
export default FileSystemConfig;

10
contexts/fileSystem/index.tsx
View File

@ -1,7 +1,7 @@
import contextFactory from 'contexts/contextFactory';
import type { FileSystemContextState } from 'contexts/fileSystem/useFileSystemContextState';
import useFileSystemContextState from 'contexts/fileSystem/useFileSystemContextState';
import { initialFileSystemContextState } from 'contexts/initialContextStates';
import contextFactory from "contexts/contextFactory";
import type { FileSystemContextState } from "contexts/fileSystem/useFileSystemContextState";
import useFileSystemContextState from "contexts/fileSystem/useFileSystemContextState";
import { initialFileSystemContextState } from "contexts/initialContextStates";
const { Consumer, Provider, useContext } =
contextFactory<FileSystemContextState>(
@ -12,5 +12,5 @@ const { Consumer, Provider, useContext } =
export {
Consumer as FileSystemConsumer,
Provider as FileSystemProvider,
useContext as useFileSystem
useContext as useFileSystem,
};

24
contexts/fileSystem/useFileSystemContextState.ts
View File

@ -1,12 +1,12 @@
import { BFSRequire, configure, FileSystem } from 'browserfs';
import type IsoFS from 'browserfs/dist/node/backend/IsoFS';
import type MountableFileSystem from 'browserfs/dist/node/backend/MountableFileSystem';
import type ZipFS from 'browserfs/dist/node/backend/ZipFS';
import type { BFSCallback } from 'browserfs/dist/node/core/file_system';
import type { FSModule } from 'browserfs/dist/node/core/FS';
import FileSystemConfig from 'contexts/fileSystem/FileSystemConfig';
import { extname } from 'path';
import { useEffect, useState } from 'react';
import { BFSRequire, configure, FileSystem } from "browserfs";
import type IsoFS from "browserfs/dist/node/backend/IsoFS";
import type MountableFileSystem from "browserfs/dist/node/backend/MountableFileSystem";
import type ZipFS from "browserfs/dist/node/backend/ZipFS";
import type { BFSCallback } from "browserfs/dist/node/core/file_system";
import type { FSModule } from "browserfs/dist/node/core/FS";
import FileSystemConfig from "contexts/fileSystem/FileSystemConfig";
import { extname } from "path";
import { useEffect, useState } from "react";
export type FileSystemContextState = {
fs: FSModule | null;
@ -18,8 +18,8 @@ const useFileSystemContextState = (): FileSystemContextState => {
const [fs, setFs] = useState<FSModule | null>(null);
const rootFs = fs?.getRootFS() as MountableFileSystem;
const mountFs = (url: string, callback: () => void): void =>
fs?.readFile(url, (_readError, fileData = Buffer.from('')) => {
const isISO = extname(url) === '.iso';
fs?.readFile(url, (_readError, fileData = Buffer.from("")) => {
const isISO = extname(url) === ".iso";
const createFs: BFSCallback<IsoFS | ZipFS> = (_createError, newFs) => {
if (newFs) {
rootFs?.mount(url, newFs);
@ -37,7 +37,7 @@ const useFileSystemContextState = (): FileSystemContextState => {
useEffect(() => {
if (!fs) {
configure(FileSystemConfig, () => setFs(BFSRequire('fs')));
configure(FileSystemConfig, () => setFs(BFSRequire("fs")));
}
}, [fs]);

20
contexts/initialContextStates.ts
View File

@ -1,18 +1,18 @@
import type { FileSystemContextState } from 'contexts/fileSystem/useFileSystemContextState';
import type { MenuContextState } from 'contexts/menu/useMenuContextState';
import type { ProcessContextState } from 'contexts/process/useProcessContextState';
import type { SessionContextState } from 'contexts/session/useSessionContextState';
import type { FileSystemContextState } from "contexts/fileSystem/useFileSystemContextState";
import type { MenuContextState } from "contexts/menu/useMenuContextState";
import type { ProcessContextState } from "contexts/process/useProcessContextState";
import type { SessionContextState } from "contexts/session/useSessionContextState";
export const initialFileSystemContextState: FileSystemContextState = {
fs: null,
mountFs: () => undefined,
unMountFs: () => undefined
unMountFs: () => undefined,
};
export const initialMenuContextState: MenuContextState = {
contextMenu: () => () => undefined,
menu: {},
setMenu: () => undefined
setMenu: () => undefined,
};
export const initialProcessContextState: ProcessContextState = {
@ -22,11 +22,11 @@ export const initialProcessContextState: ProcessContextState = {
minimize: () => undefined,
open: () => undefined,
processes: {},
title: () => undefined
title: () => undefined,
};
export const initialSessionContextState: SessionContextState = {
foregroundId: '',
foregroundId: "",
prependToStack: () => undefined,
removeFromStack: () => undefined,
setForegroundId: () => undefined,
@ -34,7 +34,7 @@ export const initialSessionContextState: SessionContextState = {
setWindowStates: () => undefined,
stackOrder: [],
startMenuVisible: false,
themeName: '',
themeName: "",
toggleStartMenu: () => undefined,
windowStates: {}
windowStates: {},
};

12
contexts/menu/index.tsx
View File

@ -1,8 +1,8 @@
import Menu from 'components/system/Menu';
import contextFactory from 'contexts/contextFactory';
import { initialMenuContextState } from 'contexts/initialContextStates';
import type { MenuContextState } from 'contexts/menu/useMenuContextState';
import useMenuContextState from 'contexts/menu/useMenuContextState';
import Menu from "components/system/Menu";
import contextFactory from "contexts/contextFactory";
import { initialMenuContextState } from "contexts/initialContextStates";
import type { MenuContextState } from "contexts/menu/useMenuContextState";
import useMenuContextState from "contexts/menu/useMenuContextState";
const { Consumer, Provider, useContext } = contextFactory<MenuContextState>(
initialMenuContextState,
@ -13,5 +13,5 @@ const { Consumer, Provider, useContext } = contextFactory<MenuContextState>(
export {
Consumer as MenuConsumer,
Provider as MenuProvider,
useContext as useMenu
useContext as useMenu,
};

2
contexts/menu/useMenuContextState.ts
View File

@ -1,4 +1,4 @@
import { useState } from 'react';
import { useState } from "react";
export type MenuItem = {
action?: () => void;

36
contexts/process/directory.ts
View File

@ -1,35 +1,35 @@
import type { Processes } from 'contexts/process/types';
import dynamic from 'next/dynamic';
import type { Processes } from "contexts/process/types";
import dynamic from "next/dynamic";
const processDirectory: Processes = {
FileExplorer: {
backgroundColor: '#202020',
Component: dynamic(() => import('components/apps/FileExplorer')),
icon: '/icons/explorer.png',
title: 'File Explorer'
backgroundColor: "#202020",
Component: dynamic(() => import("components/apps/FileExplorer")),
icon: "/icons/explorer.png",
title: "File Explorer",
},
JSDOS: {
autoSizing: true,
backgroundColor: '#000',
Component: dynamic(() => import('components/apps/JSDOS')),
icon: '/icons/jsdos.png',
backgroundColor: "#000",
Component: dynamic(() => import("components/apps/JSDOS")),
icon: "/icons/jsdos.png",
lockAspectRatio: true,
title: 'js-dos v7'
title: "js-dos v7",
},
V86: {
autoSizing: true,
backgroundColor: '#000',
Component: dynamic(() => import('components/apps/V86')),
icon: '/icons/v86.png',
title: 'Virtual x86'
backgroundColor: "#000",
Component: dynamic(() => import("components/apps/V86")),
icon: "/icons/v86.png",
title: "Virtual x86",
},
Webamp: {
Component: dynamic(() => import('components/apps/Webamp')),
Component: dynamic(() => import("components/apps/Webamp")),
hasWindow: false,
icon: '/icons/webamp.png',
icon: "/icons/webamp.png",
singleton: true,
title: 'Webamp'
}
title: "Webamp",
},
};
export default processDirectory;

18
contexts/process/functions.ts
View File

@ -1,10 +1,10 @@
import processDirectory from 'contexts/process/directory';
import processDirectory from "contexts/process/directory";
import type {
Process,
ProcessElements,
Processes
} from 'contexts/process/types';
import { PROCESS_DELIMITER } from 'utils/constants';
Processes,
} from "contexts/process/types";
import { PROCESS_DELIMITER } from "utils/constants";
export const setProcessSettings =
(processId: string, settings: Partial<Process>) =>
@ -13,7 +13,7 @@ export const setProcessSettings =
newProcesses[processId] = {
...newProcesses[processId],
...settings
...settings,
};
return newProcesses;
@ -52,8 +52,8 @@ export const openProcess =
...currentProcesses,
[id]: {
...processDirectory[processId],
url
}
url,
},
};
};
@ -61,14 +61,14 @@ export const maximizeProcess =
(processId: string) =>
(currentProcesses: Processes): Processes =>
setProcessSettings(processId, {
maximized: !currentProcesses[processId].maximized
maximized: !currentProcesses[processId].maximized,
})(currentProcesses);
export const minimizeProcess =
(processId: string) =>
(currentProcesses: Processes): Processes =>
setProcessSettings(processId, {
minimized: !currentProcesses[processId].minimized
minimized: !currentProcesses[processId].minimized,
})(currentProcesses);
export const setProcessElement =

10
contexts/process/index.tsx
View File

@ -1,7 +1,7 @@
import contextFactory from 'contexts/contextFactory';
import { initialProcessContextState } from 'contexts/initialContextStates';
import type { ProcessContextState } from 'contexts/process/useProcessContextState';
import useProcessContextState from 'contexts/process/useProcessContextState';
import contextFactory from "contexts/contextFactory";
import { initialProcessContextState } from "contexts/initialContextStates";
import type { ProcessContextState } from "contexts/process/useProcessContextState";
import useProcessContextState from "contexts/process/useProcessContextState";
const { Consumer, Provider, useContext } = contextFactory<ProcessContextState>(
initialProcessContextState,
@ -11,5 +11,5 @@ const { Consumer, Provider, useContext } = contextFactory<ProcessContextState>(
export {
Consumer as ProcessConsumer,
Provider as ProcessProvider,
useContext as useProcesses
useContext as useProcesses,
};

2
contexts/process/types.ts
View File

@ -1,4 +1,4 @@
import type { ComponentProcessProps } from 'components/system/Apps/RenderComponent';
import type { ComponentProcessProps } from "components/system/Apps/RenderComponent";
export type ProcessElements = {
componentWindow?: HTMLElement;

10
contexts/process/useProcessContextState.ts
View File

@ -4,10 +4,10 @@ import {
minimizeProcess,
openProcess,
setProcessElement,
setTitle
} from 'contexts/process/functions';
import type { ProcessElements, Processes } from 'contexts/process/types';
import { useCallback, useState } from 'react';
setTitle,
} from "contexts/process/functions";
import type { ProcessElements, Processes } from "contexts/process/types";
import { useCallback, useState } from "react";
export type ProcessContextState = {
close: (id: string, closing?: boolean) => void;
@ -58,7 +58,7 @@ const useProcessContextState = (): ProcessContextState => {
minimize,
open,
processes,
title
title,
};
};

10
contexts/session/index.tsx
View File

@ -1,7 +1,7 @@
import contextFactory from 'contexts/contextFactory';
import { initialSessionContextState } from 'contexts/initialContextStates';
import type { SessionContextState } from 'contexts/session/useSessionContextState';
import useSessionContextState from 'contexts/session/useSessionContextState';
import contextFactory from "contexts/contextFactory";
import { initialSessionContextState } from "contexts/initialContextStates";
import type { SessionContextState } from "contexts/session/useSessionContextState";
import useSessionContextState from "contexts/session/useSessionContextState";
const { Consumer, Provider, useContext } = contextFactory<SessionContextState>(
initialSessionContextState,
@ -11,5 +11,5 @@ const { Consumer, Provider, useContext } = contextFactory<SessionContextState>(
export {
Consumer as SessionConsumer,
Provider as SessionProvider,
useContext as useSession
useContext as useSession,
};

22
contexts/session/useSessionContextState.ts
View File

@ -1,7 +1,7 @@
import type { Size } from 'components/system/Window/RndWindow/useResizable';
import { useFileSystem } from 'contexts/fileSystem';
import { useCallback, useEffect, useState } from 'react';
import type { Position } from 'react-rnd';
import type { Size } from "components/system/Window/RndWindow/useResizable";
import { useFileSystem } from "contexts/fileSystem";
import { useCallback, useEffect, useState } from "react";
import type { Position } from "react-rnd";
type WindowState = {
position?: Position;
@ -26,14 +26,14 @@ export type SessionContextState = {
windowStates: WindowStates;
};
const SESSION_FILE = '/session.json';
const SESSION_FILE = "/session.json";
const useSessionContextState = (): SessionContextState => {
const { fs } = useFileSystem();
const [sessionLoaded, setSessionLoaded] = useState(false);
const [foregroundId, setForegroundId] = useState('');
const [foregroundId, setForegroundId] = useState("");
const [stackOrder, setStackOrder] = useState<string[]>([]);
const [themeName, setThemeName] = useState('');
const [themeName, setThemeName] = useState("");
const [windowStates, setWindowStates] = useState<WindowStates>({});
const [startMenuVisible, setStartMenuVisible] = useState(false);
const toggleStartMenu = (showMenu?: boolean) =>
@ -42,7 +42,7 @@ const useSessionContextState = (): SessionContextState => {
(id: string) =>
setStackOrder((currentStackOrder) => [
id,
...currentStackOrder.filter((stackId) => stackId !== id)
...currentStackOrder.filter((stackId) => stackId !== id),
]),
[]
);
@ -62,7 +62,7 @@ const useSessionContextState = (): SessionContextState => {
foregroundId,
stackOrder,
themeName,
windowStates
windowStates,
})
);
}
@ -72,7 +72,7 @@ const useSessionContextState = (): SessionContextState => {
() =>
fs?.readFile(SESSION_FILE, (_error, contents) => {
if (contents) {
const session = JSON.parse(contents.toString() || '{}');
const session = JSON.parse(contents.toString() || "{}");
setThemeName(session.themeName);
setWindowStates(session.windowStates);
@ -94,7 +94,7 @@ const useSessionContextState = (): SessionContextState => {
startMenuVisible,
themeName,
toggleStartMenu,
windowStates
windowStates,
};
};

8
jest.config.js
View File

@ -1,8 +1,8 @@
module.exports = {
moduleDirectories: ['.', 'node_modules'],
moduleDirectories: [".", "node_modules"],
setupFilesAfterEnv: [
'@testing-library/jest-dom/extend-expect',
'<rootDir>/jest.setup.js'
"@testing-library/jest-dom/extend-expect",
"<rootDir>/jest.setup.js",
],
testEnvironment: 'jsdom'
testEnvironment: "jsdom",
};

Some files were not shown because too many files have changed in this diff Show More