Added calculator app and web-view apps
This commit is contained in:
Prozilla
parent
70dbbe6c2e
commit
a068485998
22 changed files with 234 additions and 27 deletions
|
|
@ -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/
|
||||
|
|
@ -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
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
68
packages/apps/calculator/README.md
Normal file
68
packages/apps/calculator/README.md
Normal file
|
|
@ -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
|
||||
47
packages/apps/calculator/package.json
Normal file
47
packages/apps/calculator/package.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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");
|
||||
7
packages/apps/calculator/src/main.ts
Normal file
7
packages/apps/calculator/src/main.ts
Normal file
|
|
@ -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 };
|
||||
9
packages/apps/calculator/tsconfig.build.json
Normal file
9
packages/apps/calculator/tsconfig.build.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@prozilla-os/core": ["packages/core/dist/main"],
|
||||
"@prozilla-os/shared": ["packages/shared/dist/main"]
|
||||
}
|
||||
}
|
||||
}
|
||||
17
packages/apps/calculator/tsconfig.json
Normal file
17
packages/apps/calculator/tsconfig.json
Normal file
|
|
@ -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"],
|
||||
}
|
||||
6
packages/apps/calculator/vite.config.ts
Normal file
6
packages/apps/calculator/vite.config.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import { defineConfig } from "vite";
|
||||
import { appViteConfig } from "@prozilla-os/shared";
|
||||
|
||||
export default defineConfig({
|
||||
...appViteConfig(__dirname, "src/main.ts")
|
||||
});
|
||||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
});
|
||||
|
|
@ -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
|
||||
|
|
@ -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:*",
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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:*
|
||||
|
|
|
|||
6
src/apps/ball-maze.ts
Normal file
6
src/apps/ball-maze.ts
Normal file
|
|
@ -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)
|
||||
});
|
||||
6
src/apps/minesweeper.ts
Normal file
6
src/apps/minesweeper.ts
Normal file
|
|
@ -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)
|
||||
});
|
||||
6
src/apps/wordle.ts
Normal file
6
src/apps/wordle.ts
Normal file
|
|
@ -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)
|
||||
});
|
||||
|
|
@ -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"),
|
||||
],
|
||||
});
|
||||
Loading…
Reference in a new issue