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/shared - Common utility functions
• @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
• @prozilla-os/app-center - App center

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?: Skin;
  config?: {
    apps?: Partial<AppsConfigOptions>;
    desktop?: Partial<DesktopConfigOptions>;
    misc?: Partial<MiscConfigOptions>;
    modals?: Partial<ModalsConfigOptions>;
    taskbar?: Partial<TaskbarConfigOptions>;
    tracking?: Partial<TrackingConfigOptions>;
    windows?: Partial<WindowsConfigOptions>;
    virtualDrive?: Partial<VirtualDriveConfigOptions>;
  };
  children?: ReactNode;
}

interface SkinOptions {
  systemIcon: string;
  appIcons?: { [key: string]: string };
  appNames?: { [key: string]: string };
  wallpapers: string[];
  defaultWallpaper: string;
  fileIcons: {
    generic: string;
    info?: string;
    text?: string;
    code?: string;
    external?: string;
    video?: string;
    audio?: string;
  };
  folderIcons: {
    generic: string;
    images?: string;
    text?: string;
    link?: string;
    video?: string;
    audio?: string;
  };
  loadStyleSheet?: () => void;
  defaultTheme?: Theme;
}

interface AppsConfigOptions {
  apps: App[];
}

interface DesktopConfigOptions {
  /** @default 1 */
  defaultIconSize: 0 | 1 | 2;
  /** 0: vertical, 1: horizontal @default 0 */
  defaultIconDirection: 0 | 1;
}

interface MiscConfigOptions {
  /** @default 250 */
  doubleClickDelay: number;
}

interface ModalsConfigOptions {
  /** 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;
}

interface TaskbarConfigOptions {
  /** Height of the taskbar in CSS pixels @default 3 * 16 */
  height: number;
}

interface TrackingConfigOptions {
  /** Enable tracking @default true */
  enabled: boolean;
  /** Google Analytics measurement ID */
  GAMeasurementId: string;
}

interface WindowsConfigOptions {
  /** @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;
}

interface VirtualDriveConfigOptions {
  /** Enables persistent storage of the virtual drive. */
  saveData: false | {
    enableCompression: boolean;
    prefix?: string;
    migrations?: [string, string][];
  };
  /** Configure the data that is loaded initially. */
  defaultData: {
    includePicturesFolder?: boolean;
    includeAudioFolder?: boolean;
    includeVideoFolder?: boolean;
    includeDocumentsFolder?: boolean;
    includeDesktopFolder?: boolean;
    includeSourceTree?: boolean;
    includeAppsFolder?: boolean;
    includeScriptsFolder?: boolean;
    loadData?: (virtualRoot: VirtualRoot) => void;
  };
}

Links

• Demo
• Docs
• GitHub
• npm
• Discord
• Ko-fi