ProzillaOS

History

Prozilla 1e40423032 Docs: Added separate packages pages		2024-07-17 20:13:17 +02:00
..
src	Added calculator app and web-view apps	2024-06-28 17:41:22 +02:00
CHANGELOG.md	Updated skins + configuration	2024-07-15 08:58:38 +02:00
package.json	Updated skins + configuration	2024-07-15 08:58:38 +02:00
README.md	Docs: Added separate packages pages	2024-07-17 20:13:17 +02:00
tsconfig.build.json	Updated skins + configuration	2024-07-15 08:58:38 +02:00
tsconfig.json	feat: Added skins	2024-07-14 22:26:57 +02:00
vite.config.ts	Updated skins + configuration	2024-07-15 08:58:38 +02:00

README.md

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 - [(source)][website-source]

Installation

$ 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

import { Desktop, ModalsView, ProzillaOS, Taskbar, WindowsView } from "prozilla-os";

function App() {
  return (
    <ProzillaOS systemName="Example" tagLine="Powered by ProzillaOS">
      <Taskbar/>
      <WindowsView/>
      <ModalsView/>
      <Desktop/>
    </ProzillaOS>
  );
}

Configuration

interface ProzillaOSProps {

  systemName: string,

  tagLine: string,

  skin: new Skin({

    appIcons: Record<number, string> | undefined,

	appNames: Record<number, string> | 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
[Docs][docs]
[GitHub][github]
[npm][npm]
[Discord][discord]
[Ko-fi][ko-fi]