## About
`prozilla-os` is a React Vite component library written in TypeScript for building web-based operating systems, made by Prozilla. This package combines multiple other packages for easy access to different ProzillaOS features. You can also download these packages separately instead.
**Live demo: [os.prozilla.dev][demo]** - [(source)][website-source]
## Installation
```sh
$ npm install prozilla-os
$ yarn add prozilla-os
$ pnpm add prozilla-os
```
## Packages
`prozilla-os` combines the following packages into one:
- [`@prozilla-os/core`][core] - Core functionality, React components and hooks
- [`@prozilla-os/file-explorer`][file-explorer] - File explorer app
- [`@prozilla-os/terminal`][terminal] - Terminal/shell app
- [`@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
- [`@prozilla-os/calculator`][calculator] - Calculator app
## Usage
For more information about the in-depth usage of each package, check out the links in the section above.
### Basic setup
```tsx
import { Desktop, ModalsView, ProzillaOS, Taskbar, WindowsView } from "prozilla-os";
function App() {
return (
);
}
```
### Configuration
```tsx
interface ProzillaOSProps {
systemName: string,
tagLine: string,
skin: new Skin({
appIcons: Record | undefined,
appNames: Record | undefined,
wallpapers: string[],
defaultWallpaper: string,
fileIcons: {
generic: string;
info: string | undefined;
text: string | undefined;
code: string | undefined;
},
folderIcons: {
generic: string;
images: string | undefined;
text: string | undefined;
link: string | undefined;
},
loadStyleSheet: () => void | undefined
})
config: {
apps: new AppsConfig({
apps: App[]
}),
desktop: new DesktopConfig({
/**
* @default 1
*/
defaultIconSize: 0 | 1 | 2,
/**
* 0: vertical, 1: horizontal
* @default 0
* */
defaultIconDirection: 0 | 1
}),
misc: new MiscConfig({
/**
* @default 250
*/
doubleClickDelay: number
})
modals: new ModalsConfig({
/**
* Default size of a dialog box
* @default new Vector2(400, 200)
*/
defaultDialogSize: Vector2,
/**
* Default size of a file selector
* @default new Vector2(700, 400)
*/
defaultFileSelectorSize: Vector2
}),
taskbar: new TaskbarConfig({
/**
* Height of the taskbar in CSS pixels
* @default 3 * 16
*/
height: number
}),
tracking: new TrackingConfig({
/**
* Enable tracking
* @default true
*/
enabled: boolean,
/** Google Analytics measurement ID */
GAMeasurementId: string
}),
windows: new WindowsConfig({
/**
* @default 32
*/
screenMargin: number,
/**
* @default "-"
*/
titleSeparator: string,
/**
* If the user's screen is smaller than these values, windows will always be maximized
* @default new Vector2(350, 350)
*/
minScreenSize: Vector2
})
}
}
```
## Links
- [Demo][demo]
- [Docs][docs]
- [GitHub][github]
- [npm][npm]
- [Discord][discord]
- [Ko-fi][ko-fi]
[demo]: https://os.prozilla.dev/
[docs]: https://os.prozilla.dev/docs/reference/prozilla-os
[website-source]: https://github.com/prozilla-os/ProzillaOS
[github]: https://github.com/prozilla-os/ProzillaOS/tree/main/packages/prozilla-os
[npm]: https://www.npmjs.com/package/prozilla-os
[discord]: https://discord.gg/JwbyQP4tdz
[ko-fi]: https://ko-fi.com/prozilla
[core]: https://www.npmjs.com/package/@prozilla-os/core
[file-explorer]: https://www.npmjs.com/package/@prozilla-os/file-explorer
[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
[browser]: https://www.npmjs.com/package/@prozilla-os/browser
[calculator]: https://www.npmjs.com/package/@prozilla-os/calculator
