Prozilla-os NPM

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)

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 functionality, React components and hooks
@prozilla-os/file-explorer - File explorer app
@prozilla-os/terminal - Terminal/shell app
@prozilla-os/text-editor - Text editor app
@prozilla-os/settings - Settings app
@prozilla-os/media-viewer - Media viewer app
@prozilla-os/browser - Browser app
@prozilla-os/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

    })
  }

}