Added calculator app and web-view apps

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/
+[browser]: ./packages/apps/browser/
+[calculator]: ./packages/apps/calculator/

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
 ```
 

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": {

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<BrowserProps>("Browser", "browser", Browser)
+const browser = new App<BrowserProps>("Browser", "browser", Browser, { size: new Vector2(700, 500) })
 	.setIconUrl("https://os.prozilla.dev/assets/apps/icons/browser.svg")
 	.setRole(AppsConfig.APP_ROLES.Browser);
 

packages/apps/calculator/README.md

@@ -0,0 +1,68 @@
+<div align="center">
+  <br />
+  <p>
+    <a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/logo.svg?v=2" height="200" alt="ProzillaOS" /></a>
+  </p>
+  <p>
+    <a href="https://github.com/prozilla-os/ProzillaOS/blob/main/LICENSE.md"><img alt="License" src="https://img.shields.io/github/license/Prozilla/ProzillaOS?style=flat-square&color=FF4D5B&label=License"></a>
+    <a href="https://github.com/prozilla-os/ProzillaOS"><img alt="Stars" src="https://img.shields.io/github/stars/Prozilla/ProzillaOS?style=flat-square&color=FED24C&label=%E2%AD%90"></a>
+    <a href="https://github.com/prozilla-os/ProzillaOS"><img alt="Forks" src="https://img.shields.io/github/forks/Prozilla/ProzillaOS?style=flat-square&color=4D9CFF&label=Forks&logo=github"></a>
+    <a href="https://www.npmjs.com/package/prozilla-os"><img alt="NPM Version" src="https://img.shields.io/npm/v/prozilla-os?logo=npm&style=flat-square&label=prozilla-os&color=FF4D5B"></a>
+  </p>
+</div>
+
+## 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 (
+    <ProzillaOS
+      systemName="Example"
+      tagLine="Powered by ProzillaOS"
+      config={{
+        apps: new AppsConfig({
+          apps: [ calculator ]
+        })
+      }}
+    >
+      <Taskbar/>
+      <WindowsView/>
+      <ModalsView/>
+      <Desktop/>
+    </ProzillaOS>
+  );
+}
+```
+
+## 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

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"
+	}
+}

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<string | null>("0");

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 };

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"]
+		}
+	}
+}

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"],
+}

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")
+});

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": {

packages/core/src/components/taskbar/app-icon/AppIcon.tsx

@@ -70,7 +70,7 @@ export const AppButton: FC<AppButtonProps> = memo(({ app, windowsManager, active
 			}}
 			title={app.name}
 		>
-			<ReactSVG src={`/assets/apps/icons/${app.id}.svg`}/>
+			<ReactSVG src={app.iconUrl as string}/>
 		</button>
 	);
 });

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
+[browser]: https://www.npmjs.com/package/@prozilla-os/browser
+[calculator]: https://www.npmjs.com/package/@prozilla-os/calculator

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:*",

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";

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
+        version: 2.1.1(vite@5.3.1(@types/node@20.14.6)(less@4.2.0))
-      escape-carriage:
+
-        specifier: ^1.3.1
+  packages/apps/calculator:
-        version: 1.3.1
+    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:*

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)
+});

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)
+});

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)
+});

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"),
 	],
 });