From f435fd1f897374935ca1998280b38aa2fb25d3e1 Mon Sep 17 00:00:00 2001 From: Prozilla Date: Fri, 28 Jun 2024 14:55:03 +0200 Subject: [PATCH] Added settings app --- .../src/components/FileExplorer.tsx | 6 +- packages/apps/settings/README.md | 72 +++++++++++++++++++ packages/apps/settings/package.json | 51 +++++++++++++ .../{ => src}/components/Settings.module.css | 0 .../{ => src}/components/Settings.tsx | 5 +- .../components/tabs/AboutSettings.tsx | 12 ++-- .../{ => src}/components/tabs/AppOption.tsx | 15 +--- .../components/tabs/AppearanceSettings.tsx | 32 +++------ .../components/tabs/AppsSettings.tsx | 7 +- .../components/tabs/StorageSettings.tsx | 7 +- .../constants/settings.const.ts} | 0 packages/apps/settings/src/main.ts | 8 +++ packages/apps/settings/tsconfig.build.json | 10 +++ packages/apps/settings/tsconfig.json | 18 +++++ packages/apps/settings/vite.config.ts | 6 ++ .../apps/terminal/src/components/Terminal.tsx | 4 +- .../core/src/components/desktop/Desktop.tsx | 45 ++++++------ .../core/src/components/taskbar/Taskbar.tsx | 23 +++--- .../src/components/taskbar/menus/HomeMenu.tsx | 50 +++++++------ packages/core/src/constants/index.ts | 2 +- .../src/features/system/configs/appsConfig.ts | 1 + packages/prozilla-os/package.json | 1 + packages/prozilla-os/src/main.ts | 1 + pnpm-lock.yaml | 49 +++++++++++++ src/config/apps.config.ts | 6 +- 25 files changed, 318 insertions(+), 113 deletions(-) create mode 100644 packages/apps/settings/README.md create mode 100644 packages/apps/settings/package.json rename packages/apps/settings/{ => src}/components/Settings.module.css (100%) rename packages/apps/settings/{ => src}/components/Settings.tsx (91%) rename packages/apps/settings/{ => src}/components/tabs/AboutSettings.tsx (55%) rename packages/apps/settings/{ => src}/components/tabs/AppOption.tsx (69%) rename packages/apps/settings/{ => src}/components/tabs/AppearanceSettings.tsx (62%) rename packages/apps/settings/{ => src}/components/tabs/AppsSettings.tsx (73%) rename packages/apps/settings/{ => src}/components/tabs/StorageSettings.tsx (72%) rename packages/apps/settings/{config/settings.config.ts => src/constants/settings.const.ts} (100%) create mode 100644 packages/apps/settings/src/main.ts create mode 100644 packages/apps/settings/tsconfig.build.json create mode 100644 packages/apps/settings/tsconfig.json create mode 100644 packages/apps/settings/vite.config.ts diff --git a/packages/apps/file-explorer/src/components/FileExplorer.tsx b/packages/apps/file-explorer/src/components/FileExplorer.tsx index 27cd1bd..72cbb3f 100644 --- a/packages/apps/file-explorer/src/components/FileExplorer.tsx +++ b/packages/apps/file-explorer/src/components/FileExplorer.tsx @@ -12,9 +12,9 @@ import { JSX } from "react/jsx-runtime"; export interface FileExplorerProps extends WindowProps { path?: string; selectorMode?: number; - Footer: FC; - onSelectionChange: (params: OnSelectionChangeParams) => void; - onSelectionFinish: Function; + Footer?: FC; + onSelectionChange?: (params: OnSelectionChangeParams) => void; + onSelectionFinish?: Function; } export function FileExplorer({ app, path: startPath, selectorMode, Footer, onSelectionChange, onSelectionFinish }: FileExplorerProps) { diff --git a/packages/apps/settings/README.md b/packages/apps/settings/README.md new file mode 100644 index 0000000..5d4fdb6 --- /dev/null +++ b/packages/apps/settings/README.md @@ -0,0 +1,72 @@ +
+
+

+ ProzillaOS +

+

+ License + Stars + Forks + NPM Version +

+
+ +## About + +`@prozilla-os/settings` is a ProzillaOS application for configuring settings. + +## Installation + +`@prozilla-os/core` is required to run this application. + +```sh +$ npm install @prozilla-os/core @prozilla-os/settings +$ yarn add @prozilla-os/core @prozilla-os/settings +$ pnpm add @prozilla-os/core @prozilla-os/settings +``` + +## Usage + +### Basic setup + +```tsx +import { Desktop, ModalsView, ProzillaOS, Taskbar, WindowsView, AppsConfig } from "@prozilla-os/core"; +import { settings } from "@prozilla-os/settings"; + +function App() { + return ( + + + + + + + ); +} +``` + +### Window options + +```tsx + +``` + +## Links + +- [Website/demo][website] +- [GitHub][github] +- [npm][npm] +- [Ko-fi][ko-fi] + +[website]: https://os.prozilla.dev/settings +[github]: https://github.com/prozilla-os/ProzillaOS/tree/convert-to-monorepo/packages/apps/settings +[npm]: https://www.npmjs.com/package/@prozilla-os/settings +[ko-fi]: https://ko-fi.com/prozilla \ No newline at end of file diff --git a/packages/apps/settings/package.json b/packages/apps/settings/package.json new file mode 100644 index 0000000..d6e1df5 --- /dev/null +++ b/packages/apps/settings/package.json @@ -0,0 +1,51 @@ +{ + "name": "@prozilla-os/settings", + "description": "A settings app for ProzillaOS.", + "version": "1.0.11", + "homepage": "https://os.prozilla.dev/settings", + "author": { + "name": "Prozilla", + "email": "business@prozilla.dev", + "url": "https://prozilla.dev/" + }, + "type": "module", + "main": "dist/main.js", + "types": "dist/main.d.ts", + "scripts": { + "build": "tsc --project tsconfig.build.json && vite build" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/prozilla-os/ProzillaOS.git", + "directory": "packages/apps/settings" + }, + "license": "MIT", + "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.5.2", + "@fortawesome/free-solid-svg-icons": "^6.5.2", + "@fortawesome/react-fontawesome": "^0.2.2", + "@prozilla-os/core": "workspace:*", + "@prozilla-os/file-explorer": "workspace:*", + "react": "^18.3.1" + }, + "devDependencies": { + "@prozilla-os/shared": "workspace:*", + "@types/node": "^20.14.5", + "@types/react": "^18.3.3", + "@vitejs/plugin-react-swc": "^3.7.0", + "typescript": "^5.4.5", + "vite": "^5.3.1", + "vite-plugin-dts": "^3.9.1", + "vite-plugin-lib-inject-css": "^2.1.1" + }, + "files": [ + "dist" + ], + "sideEffects": [ + "**/*.css" + ], + "publishConfig": { + "registry": "https://registry.npmjs.org/", + "access": "public" + } +} diff --git a/packages/apps/settings/components/Settings.module.css b/packages/apps/settings/src/components/Settings.module.css similarity index 100% rename from packages/apps/settings/components/Settings.module.css rename to packages/apps/settings/src/components/Settings.module.css diff --git a/packages/apps/settings/components/Settings.tsx b/packages/apps/settings/src/components/Settings.tsx similarity index 91% rename from packages/apps/settings/components/Settings.tsx rename to packages/apps/settings/src/components/Settings.tsx index 94a916c..ff88781 100644 --- a/packages/apps/settings/components/Settings.tsx +++ b/packages/apps/settings/src/components/Settings.tsx @@ -1,15 +1,14 @@ import styles from "./Settings.module.css"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCircleInfo, faHardDrive, faPalette, faShapes } from "@fortawesome/free-solid-svg-icons"; -import utilStyles from "../../../styles/utils.module.css"; import { Tab, TabList, TabPanel, Tabs } from "react-tabs"; import { AppearanceSettings } from "./tabs/AppearanceSettings"; import { AboutSettings } from "./tabs/AboutSettings"; import { StorageTab } from "./tabs/StorageSettings"; import { AppsSettings } from "./tabs/AppsSettings"; -import { WindowProps } from "../../windows/WindowView"; +import { utilStyles, WindowProps } from "@prozilla-os/core"; -interface SettingsProps extends WindowProps { +export interface SettingsProps extends WindowProps { tab?: number; } diff --git a/packages/apps/settings/components/tabs/AboutSettings.tsx b/packages/apps/settings/src/components/tabs/AboutSettings.tsx similarity index 55% rename from packages/apps/settings/components/tabs/AboutSettings.tsx rename to packages/apps/settings/src/components/tabs/AboutSettings.tsx index 8239199..7d60bc8 100644 --- a/packages/apps/settings/components/tabs/AboutSettings.tsx +++ b/packages/apps/settings/src/components/tabs/AboutSettings.tsx @@ -1,18 +1,14 @@ -import { Button } from "../../../_utils/button/Button"; import styles from "../Settings.module.css"; -import utilStyles from "../../../../styles/utils.module.css"; -import { Vector2 } from "../../../../features/math/vector2"; -import { useWindowsManager } from "../../../../hooks/windows/windowsManagerContext"; -import { useVirtualRoot } from "../../../../hooks/virtual-drive/virtualRootContext"; -import { NAME } from "../../../../config/branding.config"; +import { Button, useSystemManager, useVirtualRoot, useWindowsManager, utilStyles, Vector2 } from "@prozilla-os/core"; export function AboutSettings() { + const { systemName } = useSystemManager(); const windowsManager = useWindowsManager(); const virtualRoot = useVirtualRoot(); return
-

About {NAME}

-

{NAME} is a web-based operating system inspired by Ubuntu Linux and Windows made with React.js by Prozilla.

+

About {systemName}

+

{systemName} is a web-based operating system inspired by Ubuntu Linux and Windows made with React.js by Prozilla.

- - - {fileExplorer != null && <> + {settingsApp != null && + } + {textEditorApp != null && + + } + {fileExplorerApp != null && <> +