Added browser app

README.md

@@ -30,6 +30,7 @@ ProzillaOS is a web-based operating system inspired by Ubuntu Linux and Windows.
 - `@prozilla-os/text-editor` ([source][text-editor]) - Text editor app
 - `@prozilla-os/settings` ([source][settings]) - Settings app
 - `@prozilla-os/media-viewer` ([source][media-viewer]) - Media viewer app
+- `@prozilla-os/browser` ([source][browser]) - Browser app
 
 ## Links
 
@@ -66,4 +67,5 @@ These resources can help you get started with ProzillaOS.
 [terminal]: ./packages/apps/terminal/
 [text-editor]: ./packages/apps/text-editor/
 [settings]: ./packages/apps/settings/
-[media-viewer]: ./packages/apps/media-viewer/
+[media-viewer]: ./packages/apps/media-viewer/
+[browser]: ./packages/apps/browser/

packages/apps/browser/README.md

@@ -0,0 +1,77 @@
+<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/browser` is a ProzillaOS application for browsing the internet.
+
+## Installation
+
+`@prozilla-os/core` is required to run this application.
+
+```sh
+$ npm install @prozilla-os/core @prozilla-os/browser
+$ yarn add @prozilla-os/core @prozilla-os/media-viewer
+$ pnpm add @prozilla-os/core @prozilla-os/browser
+```
+
+## Usage
+
+### Basic setup
+
+```tsx
+import { Desktop, ModalsView, ProzillaOS, Taskbar, WindowsView, AppsConfig } from "@prozilla-os/core";
+import { browser } from "@prozilla-os/browser";
+
+function App() {
+  return (
+    <ProzillaOS
+      systemName="Example"
+      tagLine="Powered by ProzillaOS"
+      config={{
+        apps: new AppsConfig({
+          apps: [ browser ]
+        })
+      }}
+    >
+      <Taskbar/>
+      <WindowsView/>
+      <ModalsView/>
+      <Desktop/>
+    </ProzillaOS>
+  );
+}
+```
+
+### Window options
+
+```tsx
+/**
+ * URL to open
+ */
+url: string;
+```
+
+## Links
+
+- [Website/demo][website]
+- [GitHub][github]
+- [npm][npm]
+- [Discord][discord]
+- [Ko-fi][ko-fi]
+
+[website]: https://os.prozilla.dev/browser
+[github]: https://github.com/prozilla-os/ProzillaOS/tree/convert-to-monorepo/packages/apps/browser
+[npm]: https://www.npmjs.com/package/@prozilla-os/browser
+[discord]: https://discord.gg/JwbyQP4tdz
+[ko-fi]: https://ko-fi.com/prozilla

packages/apps/browser/package.json

@@ -0,0 +1,49 @@
+{
+	"name": "@prozilla-os/browser",
+	"description": "A ProzillaOS application for browsing the internet.",
+	"version": "1.0.0",
+	"homepage": "https://os.prozilla.dev/browser",
+	"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/browser"
+	},
+	"license": "MIT",
+	"dependencies": {
+		"@prozilla-os/core": "workspace:*",
+		"anser": "^2.1.1",
+		"escape-carriage": "^1.3.1",
+		"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/browser/src/components/Browser.tsx

@@ -1,14 +1,11 @@
 import { ChangeEventHandler, KeyboardEventHandler, useEffect, useRef, useState } from "react";
 import styles from "./Browser.module.css";
-import { WebView } from "../_utils/web-view/WebView";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCaretLeft, faCaretRight, faHome, faRotateRight } from "@fortawesome/free-solid-svg-icons";
-import { HOME_URL, SEARCH_URL } from "../../../config/apps/browser.config";
+import { isValidUrl, useHistory, WebView, WindowProps } from "@prozilla-os/core";
-import { isValidUrl } from "../../../features/_utils/browser.utils";
+import { HOME_URL, SEARCH_URL } from "../constants/browser.const";
-import { useHistory } from "../../../hooks/_utils/history";
-import { WindowProps } from "../../windows/WindowView";
 
-interface BrowserProps extends WindowProps {
+export interface BrowserProps extends WindowProps {
 	url?: string;
 }
 

packages/apps/browser/src/main.ts

@@ -0,0 +1,8 @@
+import { App, AppsConfig } from "@prozilla-os/core";
+import { Browser, BrowserProps } from "./components/Browser";
+
+const browser = new App<BrowserProps>("Browser", "browser", Browser)
+	.setIconUrl("https://os.prozilla.dev/assets/apps/icons/browser.svg")
+	.setRole(AppsConfig.APP_ROLES.Browser);
+
+export { browser };

packages/apps/browser/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/browser/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/browser/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/core/src/features/system/configs/appsConfig.ts

@@ -17,7 +17,8 @@ export class AppsConfig {
 		Terminal: "terminal",
 		TextEditor: "text-editor",
 		Settings: "settings",
-		MediaViewer: "media-viewer"
+		MediaViewer: "media-viewer",
+		Browser: "browser"
 	};
 
 	constructor(options: OptionalInterface<AppsConfigOptions> = {}) {

packages/prozilla-os/README.md

@@ -35,6 +35,7 @@ $ pnpm add prozilla-os
 - [`@prozilla-os/text-editor`][text-editor] - Text editor app
 - [`@prozilla-os/settings`][settings] - Settings app
 - [`@prozilla-os/media-viewer`][media-viewer] - Media viewer app
+- [`@prozilla-os/browser`][browser] - Browser app
 
 ## Usage
 
@@ -186,4 +187,5 @@ function App() {
 [terminal]: https://www.npmjs.com/package/@prozilla-os/terminal
 [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
+[media-viewer]: https://www.npmjs.com/package/@prozilla-os/media-viewer
+[browser]: https://www.npmjs.com/package/@prozilla-os/browser

packages/prozilla-os/package.json

@@ -22,10 +22,11 @@
 	"license": "MIT",
 	"dependencies": {
 		"@fortawesome/fontawesome-svg-core": "^6.5.2",
+		"@prozilla-os/browser": "workspace:*",
 		"@prozilla-os/core": "workspace:*",
 		"@prozilla-os/file-explorer": "workspace:*",
-		"@prozilla-os/media-viewer": "workspace:^",
+		"@prozilla-os/media-viewer": "workspace:*",
-		"@prozilla-os/settings": "workspace:^",
+		"@prozilla-os/settings": "workspace:*",
 		"@prozilla-os/terminal": "workspace:*",
 		"@prozilla-os/text-editor": "workspace:*",
 		"react-ga4": "^2.1.0"

packages/prozilla-os/src/main.ts

@@ -4,3 +4,4 @@ export * from "@prozilla-os/terminal";
 export * from "@prozilla-os/text-editor";
 export * from "@prozilla-os/settings";
 export * from "@prozilla-os/media-viewer";
+export * from "@prozilla-os/browser";

pnpm-lock.yaml

@@ -97,6 +97,46 @@ importers:
         specifier: ^0.6.4
         version: 0.6.4(eslint@8.57.0)(optionator@0.9.4)(stylelint@16.6.1(typescript@5.4.5))(typescript@5.4.5)(vite@5.3.1(@types/node@20.14.6)(less@4.2.0))(vue-tsc@1.8.27(typescript@5.4.5))
 
+  packages/apps/browser:
+    dependencies:
+      '@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
+    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(vite@5.3.1(@types/node@20.14.6)(less@4.2.0))
+
   packages/apps/file-explorer:
     dependencies:
       '@fortawesome/fontawesome-svg-core':
@@ -369,6 +409,9 @@ importers:
       '@fortawesome/fontawesome-svg-core':
         specifier: ^6.5.2
         version: 6.5.2
+      '@prozilla-os/browser':
+        specifier: workspace:^
+        version: link:../apps/browser
       '@prozilla-os/core':
         specifier: workspace:*
         version: link:../core

src/config/apps.config.ts

@@ -1,4 +1,4 @@
-import { AppsConfig, fileExplorer, mediaViewer, settings, terminal, textEditor } from "prozilla-os";
+import { AppsConfig, browser, fileExplorer, mediaViewer, settings, terminal, textEditor } from "prozilla-os";
 import { NAME } from "./branding.config";
 
 export const appsConfig = new AppsConfig({
@@ -17,5 +17,8 @@ export const appsConfig = new AppsConfig({
 			.setIconUrl("/assets/apps/icons/settings.svg"),
 		mediaViewer.setName("Photos")
 			.setIconUrl("/assets/apps/icons/media-viewer.svg"),
+		browser.setName("Browser")
+			.setDescription("Browse the internet.")
+			.setIconUrl("/assets/apps/icons/browser.svg"),
 	],
 });