diff --git a/README.md b/README.md index c46d9a5..4ac49ec 100644 --- a/README.md +++ b/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/ \ No newline at end of file +[media-viewer]: ./packages/apps/media-viewer/ +[browser]: ./packages/apps/browser/ \ No newline at end of file diff --git a/packages/apps/browser/README.md b/packages/apps/browser/README.md new file mode 100644 index 0000000..7b41d19 --- /dev/null +++ b/packages/apps/browser/README.md @@ -0,0 +1,77 @@ +
+
+

+ ProzillaOS +

+

+ License + Stars + Forks + NPM Version +

+
+ +## 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 ( + + + + + + + ); +} +``` + +### 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 \ No newline at end of file diff --git a/packages/apps/browser/package.json b/packages/apps/browser/package.json new file mode 100644 index 0000000..9a44dc2 --- /dev/null +++ b/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" + } +} diff --git a/packages/apps/browser/components/Browser.module.css b/packages/apps/browser/src/components/Browser.module.css similarity index 100% rename from packages/apps/browser/components/Browser.module.css rename to packages/apps/browser/src/components/Browser.module.css diff --git a/packages/apps/browser/components/Browser.tsx b/packages/apps/browser/src/components/Browser.tsx similarity index 88% rename from packages/apps/browser/components/Browser.tsx rename to packages/apps/browser/src/components/Browser.tsx index c47ee3f..a7f2334 100644 --- a/packages/apps/browser/components/Browser.tsx +++ b/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 } from "../../../features/_utils/browser.utils"; -import { useHistory } from "../../../hooks/_utils/history"; -import { WindowProps } from "../../windows/WindowView"; +import { isValidUrl, useHistory, WebView, WindowProps } from "@prozilla-os/core"; +import { HOME_URL, SEARCH_URL } from "../constants/browser.const"; -interface BrowserProps extends WindowProps { +export interface BrowserProps extends WindowProps { url?: string; } diff --git a/packages/apps/browser/config/browser.config.ts b/packages/apps/browser/src/constants/browser.const.ts similarity index 100% rename from packages/apps/browser/config/browser.config.ts rename to packages/apps/browser/src/constants/browser.const.ts diff --git a/packages/apps/browser/src/main.ts b/packages/apps/browser/src/main.ts new file mode 100644 index 0000000..2334d5b --- /dev/null +++ b/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("Browser", "browser", Browser) + .setIconUrl("https://os.prozilla.dev/assets/apps/icons/browser.svg") + .setRole(AppsConfig.APP_ROLES.Browser); + +export { browser }; \ No newline at end of file diff --git a/packages/apps/browser/tsconfig.build.json b/packages/apps/browser/tsconfig.build.json new file mode 100644 index 0000000..5f2ed76 --- /dev/null +++ b/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"] + } + } +} \ No newline at end of file diff --git a/packages/apps/browser/tsconfig.json b/packages/apps/browser/tsconfig.json new file mode 100644 index 0000000..97d732b --- /dev/null +++ b/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"], +} \ No newline at end of file diff --git a/packages/apps/browser/vite.config.ts b/packages/apps/browser/vite.config.ts new file mode 100644 index 0000000..eee27b2 --- /dev/null +++ b/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") +}); \ No newline at end of file diff --git a/packages/core/src/features/system/configs/appsConfig.ts b/packages/core/src/features/system/configs/appsConfig.ts index 402fe14..48b0358 100644 --- a/packages/core/src/features/system/configs/appsConfig.ts +++ b/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 = {}) { diff --git a/packages/prozilla-os/README.md b/packages/prozilla-os/README.md index 267637a..15485f3 100644 --- a/packages/prozilla-os/README.md +++ b/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 \ No newline at end of file +[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 diff --git a/packages/prozilla-os/package.json b/packages/prozilla-os/package.json index f62bdc4..9687f99 100644 --- a/packages/prozilla-os/package.json +++ b/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/settings": "workspace:^", + "@prozilla-os/media-viewer": "workspace:*", + "@prozilla-os/settings": "workspace:*", "@prozilla-os/terminal": "workspace:*", "@prozilla-os/text-editor": "workspace:*", "react-ga4": "^2.1.0" diff --git a/packages/prozilla-os/src/main.ts b/packages/prozilla-os/src/main.ts index 7173557..cb247ef 100644 --- a/packages/prozilla-os/src/main.ts +++ b/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"; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c6f13e4..a6a001c 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/src/config/apps.config.ts b/src/config/apps.config.ts index 19f1e2f..1c6e036 100644 --- a/src/config/apps.config.ts +++ b/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"), ], }); \ No newline at end of file