From a068485998a796c75c9db346952ab0a8c93501b9 Mon Sep 17 00:00:00 2001 From: Prozilla Date: Fri, 28 Jun 2024 17:41:22 +0200 Subject: [PATCH] Added calculator app and web-view apps --- README.md | 4 +- packages/apps/browser/README.md | 2 +- packages/apps/browser/package.json | 2 - packages/apps/browser/src/main.ts | 4 +- packages/apps/calculator/README.md | 68 +++++++++++++++++++ packages/apps/calculator/package.json | 47 +++++++++++++ .../components/Calculator.module.css | 0 .../{ => src}/components/Calculator.tsx | 3 +- packages/apps/calculator/src/main.ts | 7 ++ packages/apps/calculator/tsconfig.build.json | 9 +++ packages/apps/calculator/tsconfig.json | 17 +++++ packages/apps/calculator/vite.config.ts | 6 ++ packages/apps/media-viewer/package.json | 2 - .../components/taskbar/app-icon/AppIcon.tsx | 2 +- packages/prozilla-os/README.md | 4 +- packages/prozilla-os/package.json | 1 + packages/prozilla-os/src/main.ts | 1 + pnpm-lock.yaml | 53 +++++++++++---- src/apps/ball-maze.ts | 6 ++ src/apps/minesweeper.ts | 6 ++ src/apps/wordle.ts | 6 ++ src/config/apps.config.ts | 11 ++- 22 files changed, 234 insertions(+), 27 deletions(-) create mode 100644 packages/apps/calculator/README.md create mode 100644 packages/apps/calculator/package.json rename packages/apps/calculator/{ => src}/components/Calculator.module.css (100%) rename packages/apps/calculator/{ => src}/components/Calculator.tsx (98%) create mode 100644 packages/apps/calculator/src/main.ts create mode 100644 packages/apps/calculator/tsconfig.build.json create mode 100644 packages/apps/calculator/tsconfig.json create mode 100644 packages/apps/calculator/vite.config.ts create mode 100644 src/apps/ball-maze.ts create mode 100644 src/apps/minesweeper.ts create mode 100644 src/apps/wordle.ts diff --git a/README.md b/README.md index 4ac49ec..3d51616 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,7 @@ ProzillaOS is a web-based operating system inspired by Ubuntu Linux and Windows. - `@prozilla-os/settings` ([source][settings]) - Settings app - `@prozilla-os/media-viewer` ([source][media-viewer]) - Media viewer app - `@prozilla-os/browser` ([source][browser]) - Browser app +- `@prozilla-os/calculator` ([source][calculator]) - Calculator app ## Links @@ -68,4 +69,5 @@ These resources can help you get started with ProzillaOS. [text-editor]: ./packages/apps/text-editor/ [settings]: ./packages/apps/settings/ [media-viewer]: ./packages/apps/media-viewer/ -[browser]: ./packages/apps/browser/ \ No newline at end of file +[browser]: ./packages/apps/browser/ +[calculator]: ./packages/apps/calculator/ \ No newline at end of file diff --git a/packages/apps/browser/README.md b/packages/apps/browser/README.md index 7b41d19..c3a7e67 100644 --- a/packages/apps/browser/README.md +++ b/packages/apps/browser/README.md @@ -21,7 +21,7 @@ ```sh $ npm install @prozilla-os/core @prozilla-os/browser -$ yarn add @prozilla-os/core @prozilla-os/media-viewer +$ yarn add @prozilla-os/core @prozilla-os/browser $ pnpm add @prozilla-os/core @prozilla-os/browser ``` diff --git a/packages/apps/browser/package.json b/packages/apps/browser/package.json index 9a44dc2..70126e3 100644 --- a/packages/apps/browser/package.json +++ b/packages/apps/browser/package.json @@ -22,8 +22,6 @@ "license": "MIT", "dependencies": { "@prozilla-os/core": "workspace:*", - "anser": "^2.1.1", - "escape-carriage": "^1.3.1", "react": "^18.3.1" }, "devDependencies": { diff --git a/packages/apps/browser/src/main.ts b/packages/apps/browser/src/main.ts index 2334d5b..a29ae1b 100644 --- a/packages/apps/browser/src/main.ts +++ b/packages/apps/browser/src/main.ts @@ -1,7 +1,7 @@ -import { App, AppsConfig } from "@prozilla-os/core"; +import { App, AppsConfig, Vector2 } from "@prozilla-os/core"; import { Browser, BrowserProps } from "./components/Browser"; -const browser = new App("Browser", "browser", Browser) +const browser = new App("Browser", "browser", Browser, { size: new Vector2(700, 500) }) .setIconUrl("https://os.prozilla.dev/assets/apps/icons/browser.svg") .setRole(AppsConfig.APP_ROLES.Browser); diff --git a/packages/apps/calculator/README.md b/packages/apps/calculator/README.md new file mode 100644 index 0000000..9b753ee --- /dev/null +++ b/packages/apps/calculator/README.md @@ -0,0 +1,68 @@ +
+
+

+ ProzillaOS +

+

+ License + Stars + Forks + NPM Version +

+
+ +## About + +`@prozilla-os/calculator` is a ProzillaOS application for making basic calculations. + +## Installation + +`@prozilla-os/core` is required to run this application. + +```sh +$ npm install @prozilla-os/core @prozilla-os/calculator +$ yarn add @prozilla-os/core @prozilla-os/calculator +$ pnpm add @prozilla-os/core @prozilla-os/calculator +``` + +## Usage + +### Basic setup + +```tsx +import { Desktop, ModalsView, ProzillaOS, Taskbar, WindowsView, AppsConfig } from "@prozilla-os/core"; +import { calculator } from "@prozilla-os/calculator"; + +function App() { + return ( + + + + + + + ); +} +``` + +## Links + +- [Website/demo][website] +- [GitHub][github] +- [npm][npm] +- [Discord][discord] +- [Ko-fi][ko-fi] + +[website]: https://os.prozilla.dev/calculator +[github]: https://github.com/prozilla-os/ProzillaOS/tree/convert-to-monorepo/packages/apps/calculator +[npm]: https://www.npmjs.com/package/@prozilla-os/calculator +[discord]: https://discord.gg/JwbyQP4tdz +[ko-fi]: https://ko-fi.com/prozilla \ No newline at end of file diff --git a/packages/apps/calculator/package.json b/packages/apps/calculator/package.json new file mode 100644 index 0000000..5d429a2 --- /dev/null +++ b/packages/apps/calculator/package.json @@ -0,0 +1,47 @@ +{ + "name": "@prozilla-os/calculator", + "description": "A ProzillaOS application for making basic calculations.", + "version": "1.0.0", + "homepage": "https://os.prozilla.dev/calculator", + "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 && vite build" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/prozilla-os/ProzillaOS.git", + "directory": "packages/apps/calculator" + }, + "license": "MIT", + "dependencies": { + "@prozilla-os/core": "workspace:*", + "react": "^18.3.1" + }, + "devDependencies": { + "@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", + "@prozilla-os/shared": "workspace:*" + }, + "files": [ + "dist" + ], + "sideEffects": [ + "**/*.css" + ], + "publishConfig": { + "registry": "https://registry.npmjs.org/", + "access": "public" + } +} diff --git a/packages/apps/calculator/components/Calculator.module.css b/packages/apps/calculator/src/components/Calculator.module.css similarity index 100% rename from packages/apps/calculator/components/Calculator.module.css rename to packages/apps/calculator/src/components/Calculator.module.css diff --git a/packages/apps/calculator/components/Calculator.tsx b/packages/apps/calculator/src/components/Calculator.tsx similarity index 98% rename from packages/apps/calculator/components/Calculator.tsx rename to packages/apps/calculator/src/components/Calculator.tsx index 25052e4..85007ac 100644 --- a/packages/apps/calculator/components/Calculator.tsx +++ b/packages/apps/calculator/src/components/Calculator.tsx @@ -1,7 +1,6 @@ import { useCallback, useEffect, useState } from "react"; -import { Button } from "../../_utils/button/Button"; import styles from "./Calculator.module.css"; -import { WindowProps } from "../../windows/WindowView"; +import { Button, WindowProps } from "@prozilla-os/core"; export function Calculator({ active }: WindowProps) { const [input, setInput] = useState("0"); diff --git a/packages/apps/calculator/src/main.ts b/packages/apps/calculator/src/main.ts new file mode 100644 index 0000000..12405a3 --- /dev/null +++ b/packages/apps/calculator/src/main.ts @@ -0,0 +1,7 @@ +import { App, Vector2 } from "@prozilla-os/core"; +import { Calculator } from "./components/Calculator"; + +const calculator = new App("Calculator", "calculator", Calculator, { size: new Vector2(400, 600) }) + .setIconUrl("https://os.prozilla.dev/assets/apps/icons/calculator.svg"); + +export { calculator }; \ No newline at end of file diff --git a/packages/apps/calculator/tsconfig.build.json b/packages/apps/calculator/tsconfig.build.json new file mode 100644 index 0000000..5f2ed76 --- /dev/null +++ b/packages/apps/calculator/tsconfig.build.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "paths": { + "@prozilla-os/core": ["packages/core/dist/main"], + "@prozilla-os/shared": ["packages/shared/dist/main"] + } + } +} \ No newline at end of file diff --git a/packages/apps/calculator/tsconfig.json b/packages/apps/calculator/tsconfig.json new file mode 100644 index 0000000..97d732b --- /dev/null +++ b/packages/apps/calculator/tsconfig.json @@ -0,0 +1,17 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "baseUrl": "../../..", + "composite": true, + "outDir": "dist", + "declaration": true, + "emitDeclarationOnly": true, + "noEmit": false, + "paths": { + "@prozilla-os/core": ["./node_modules/@prozilla-os/core/src/main"], + "@prozilla-os/shared": ["./node_modules/@prozilla-os/shared/src/main"] + } + }, + "include": ["src", "vite.config.ts"], + "exclude": ["node_modules"], +} \ No newline at end of file diff --git a/packages/apps/calculator/vite.config.ts b/packages/apps/calculator/vite.config.ts new file mode 100644 index 0000000..eee27b2 --- /dev/null +++ b/packages/apps/calculator/vite.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from "vite"; +import { appViteConfig } from "@prozilla-os/shared"; + +export default defineConfig({ + ...appViteConfig(__dirname, "src/main.ts") +}); \ No newline at end of file diff --git a/packages/apps/media-viewer/package.json b/packages/apps/media-viewer/package.json index 516742d..237a648 100644 --- a/packages/apps/media-viewer/package.json +++ b/packages/apps/media-viewer/package.json @@ -22,8 +22,6 @@ "license": "MIT", "dependencies": { "@prozilla-os/core": "workspace:*", - "anser": "^2.1.1", - "escape-carriage": "^1.3.1", "react": "^18.3.1" }, "devDependencies": { diff --git a/packages/core/src/components/taskbar/app-icon/AppIcon.tsx b/packages/core/src/components/taskbar/app-icon/AppIcon.tsx index b473723..e76f03c 100644 --- a/packages/core/src/components/taskbar/app-icon/AppIcon.tsx +++ b/packages/core/src/components/taskbar/app-icon/AppIcon.tsx @@ -70,7 +70,7 @@ export const AppButton: FC = memo(({ app, windowsManager, active }} title={app.name} > - + ); }); \ No newline at end of file diff --git a/packages/prozilla-os/README.md b/packages/prozilla-os/README.md index 15485f3..eea82f5 100644 --- a/packages/prozilla-os/README.md +++ b/packages/prozilla-os/README.md @@ -36,6 +36,7 @@ $ pnpm add prozilla-os - [`@prozilla-os/settings`][settings] - Settings app - [`@prozilla-os/media-viewer`][media-viewer] - Media viewer app - [`@prozilla-os/browser`][browser] - Browser app +- [`@prozilla-os/calculator`][calculator] - Calculator app ## Usage @@ -188,4 +189,5 @@ function App() { [text-editor]: https://www.npmjs.com/package/@prozilla-os/text-editor [settings]: https://www.npmjs.com/package/@prozilla-os/settings [media-viewer]: https://www.npmjs.com/package/@prozilla-os/media-viewer -[browser]: https://www.npmjs.com/package/@prozilla-os/browser \ No newline at end of file +[browser]: https://www.npmjs.com/package/@prozilla-os/browser +[calculator]: https://www.npmjs.com/package/@prozilla-os/calculator \ No newline at end of file diff --git a/packages/prozilla-os/package.json b/packages/prozilla-os/package.json index 9687f99..4fbb9e3 100644 --- a/packages/prozilla-os/package.json +++ b/packages/prozilla-os/package.json @@ -23,6 +23,7 @@ "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.5.2", "@prozilla-os/browser": "workspace:*", + "@prozilla-os/calculator": "workspace:*", "@prozilla-os/core": "workspace:*", "@prozilla-os/file-explorer": "workspace:*", "@prozilla-os/media-viewer": "workspace:*", diff --git a/packages/prozilla-os/src/main.ts b/packages/prozilla-os/src/main.ts index cb247ef..539f62c 100644 --- a/packages/prozilla-os/src/main.ts +++ b/packages/prozilla-os/src/main.ts @@ -5,3 +5,4 @@ export * from "@prozilla-os/text-editor"; export * from "@prozilla-os/settings"; export * from "@prozilla-os/media-viewer"; export * from "@prozilla-os/browser"; +export * from "@prozilla-os/calculator"; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a6a001c..843e560 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -102,12 +102,40 @@ importers: '@prozilla-os/core': specifier: workspace:* version: link:../../core - anser: + react: + specifier: ^18.3.1 + version: 18.3.1 + devDependencies: + '@prozilla-os/shared': + specifier: workspace:* + version: link:../../shared + '@types/node': + specifier: ^20.14.5 + version: 20.14.6 + '@types/react': + specifier: ^18.3.3 + version: 18.3.3 + '@vitejs/plugin-react-swc': + specifier: ^3.7.0 + version: 3.7.0(vite@5.3.1(@types/node@20.14.6)(less@4.2.0)) + typescript: + specifier: ^5.4.5 + version: 5.4.5 + vite: + specifier: ^5.3.1 + version: 5.3.1(@types/node@20.14.6)(less@4.2.0) + vite-plugin-dts: + specifier: ^3.9.1 + version: 3.9.1(@types/node@20.14.6)(rollup@4.18.0)(typescript@5.4.5)(vite@5.3.1(@types/node@20.14.6)(less@4.2.0)) + vite-plugin-lib-inject-css: specifier: ^2.1.1 - version: 2.1.1 - escape-carriage: - specifier: ^1.3.1 - version: 1.3.1 + version: 2.1.1(vite@5.3.1(@types/node@20.14.6)(less@4.2.0)) + + packages/apps/calculator: + dependencies: + '@prozilla-os/core': + specifier: workspace:* + version: link:../../core react: specifier: ^18.3.1 version: 18.3.1 @@ -185,12 +213,6 @@ importers: '@prozilla-os/core': specifier: workspace:* version: link:../../core - anser: - specifier: ^2.1.1 - version: 2.1.1 - escape-carriage: - specifier: ^1.3.1 - version: 1.3.1 react: specifier: ^18.3.1 version: 18.3.1 @@ -410,8 +432,11 @@ importers: specifier: ^6.5.2 version: 6.5.2 '@prozilla-os/browser': - specifier: workspace:^ + specifier: workspace:* version: link:../apps/browser + '@prozilla-os/calculator': + specifier: workspace:^ + version: link:../apps/calculator '@prozilla-os/core': specifier: workspace:* version: link:../core @@ -419,10 +444,10 @@ importers: specifier: workspace:* version: link:../apps/file-explorer '@prozilla-os/media-viewer': - specifier: workspace:^ + specifier: workspace:* version: link:../apps/media-viewer '@prozilla-os/settings': - specifier: workspace:^ + specifier: workspace:* version: link:../apps/settings '@prozilla-os/terminal': specifier: workspace:* diff --git a/src/apps/ball-maze.ts b/src/apps/ball-maze.ts new file mode 100644 index 0000000..db9ed98 --- /dev/null +++ b/src/apps/ball-maze.ts @@ -0,0 +1,6 @@ +import { App, Vector2, WebView } from "prozilla-os"; + +export const ballMaze = new App("Ball Maze", "ball-maze", WebView, { + source: "https://prozilla.dev/ball-maze", + size: new Vector2(600, 600) +}); \ No newline at end of file diff --git a/src/apps/minesweeper.ts b/src/apps/minesweeper.ts new file mode 100644 index 0000000..d1a1f73 --- /dev/null +++ b/src/apps/minesweeper.ts @@ -0,0 +1,6 @@ +import { App, Vector2, WebView } from "prozilla-os"; + +export const minesweeper = new App("Minesweeper", "minesweeper", WebView, { + source: "https://prozilla.dev/minesweeper", + size: new Vector2(500, 580) +}); \ No newline at end of file diff --git a/src/apps/wordle.ts b/src/apps/wordle.ts new file mode 100644 index 0000000..015ea6b --- /dev/null +++ b/src/apps/wordle.ts @@ -0,0 +1,6 @@ +import { App, Vector2, WebView } from "prozilla-os"; + +export const wordle = new App("Wordle", "wordle", WebView, { + source: "https://prozilla.dev/wordle", + size: new Vector2(400, 650) +}); \ No newline at end of file diff --git a/src/config/apps.config.ts b/src/config/apps.config.ts index 1c6e036..456b659 100644 --- a/src/config/apps.config.ts +++ b/src/config/apps.config.ts @@ -1,5 +1,8 @@ -import { AppsConfig, browser, fileExplorer, mediaViewer, settings, terminal, textEditor } from "prozilla-os"; +import { AppsConfig, browser, calculator, fileExplorer, mediaViewer, settings, terminal, textEditor } from "prozilla-os"; import { NAME } from "./branding.config"; +import { wordle } from "../apps/wordle"; +import { ballMaze } from "../apps/ball-maze"; +import { minesweeper } from "../apps/minesweeper"; export const appsConfig = new AppsConfig({ apps: [ @@ -20,5 +23,11 @@ export const appsConfig = new AppsConfig({ browser.setName("Browser") .setDescription("Browse the internet.") .setIconUrl("/assets/apps/icons/browser.svg"), + calculator.setName("Maths") + .setDescription("Simple calculator app.") + .setIconUrl("/assets/apps/icons/calculator.svg"), + wordle.setIconUrl("/assets/apps/icons/wordle.svg"), + ballMaze.setIconUrl("/assets/apps/icons/ball-maze.svg"), + minesweeper.setIconUrl("/assets/apps/icons/minesweeper.svg"), ], }); \ No newline at end of file