reactdesk-core/dist/index.d.ts

A powerful React-based desktop environment library for creating Windows 11-like desktop interfaces with window management, taskbar, themes, and more

import { FC, ReactNode, CSSProperties } from 'react';

export interface Size {
  width: number;
  height: number;
}

export interface Position {
  x: number;
  y: number;
}

export type RD_WindowID_T = string;
export type RD_ProcID_T = string;

export interface RD_Theme {
  name: string;
  colors: Record<string, string>;
  sizes: Record<string, string | number>;
  systemFont: string;
}

export interface SnapInfo {
  type: 'twoColumns' | 'threeColumns' | 'fourGrid' | 'threeLeftOneRight' | 'threeRightOneLeft' | 'fiveLeftGridRight' | 'fiveRightGridLeft';
  index?: number;
  widthPercent?: number;
}

export type SnapType = boolean | SnapInfo;

export interface WindowElements {
  componentWindow?: HTMLElement;
  peekElement?: HTMLElement;
  taskbarEntry?: HTMLElement;
}

export interface WindowData {
  id: RD_WindowID_T;
  pid?: RD_ProcID_T;
  component: ReactNode;
  backgroundColor?: string;
  title?: string;
  icon?: string;
  titlebarIcon?: string;
  hideTitlebar?: boolean;
  hideMaximizeButton?: boolean;
  hideMinimizeButton?: boolean;
  hideTaskbarEntry?: boolean;
  maximized?: boolean;
  minimized?: boolean;
  closing?: boolean;
  snap?: SnapType;
  allowResizing?: boolean;
  autoSizing?: boolean;
  lockAspectRatio?: boolean;
  defaultSize?: Size;
  initialRelativePosition?: {
    top?: number;
    bottom?: number;
    left?: number;
    right?: number;
  };
  pause?: () => void;
  paused?: boolean;
  play?: () => void;
  renderTitlebar?: (props: any) => ReactNode;
  renderTaskbar?: (props: any) => ReactNode;
  renderTitle?: (props: any) => ReactNode;
  position?: Position;
  size?: Size;
  elements?: WindowElements;
}

export interface Process {
  pid: RD_ProcID_T;
  name: string;
  icon?: string;
  component?: ReactNode;
  windows?: RD_WindowID_T[];
  active?: boolean;
  args?: any;
}

export interface RD_ApplicationT {
  name: string;
  icon?: string;
  component?: FC<any>;
  windowOptions?: Partial<WindowData>;
  singleton?: boolean;
  pinned?: boolean;
  args?: any;
}

export interface TaskbarOptions {
  position?: 'top' | 'bottom' | 'left' | 'right';
  height?: number;
  width?: number;
  autoHide?: boolean;
}

export interface ReactDeskConfig {
  theme?: 'win11' | 'macOS' | RD_Theme;
  layout?: 'win11' | 'macOS';
  wallpaper?: string | ReactNode | {
    type?: 'image' | 'video';
    src?: string;
  };
  taskbar?: TaskbarOptions;
  applications?: RD_ApplicationT[];
  initialProcesses?: Process[];
  initialWindows?: WindowData[];
  onReady?: () => void;
  debug?: boolean;
}

export interface ReactDeskProviderProps {
  children: ReactNode;
  config?: ReactDeskConfig;
}

export const ReactDeskProvider: FC<ReactDeskProviderProps>;

export interface UseReactDeskReturn {
  createWindow: (windowData: Partial<WindowData>) => RD_WindowID_T;
  closeWindow: (windowId: RD_WindowID_T) => void;
  maximizeWindow: (windowId: RD_WindowID_T) => void;
  minimizeWindow: (windowId: RD_WindowID_T) => void;
  setWindowSetting: (windowId: RD_WindowID_T, settings: Partial<WindowData>) => void;
  createProcess: (processData: Partial<Process>) => RD_ProcID_T;
  closeProcess: (pid: RD_ProcID_T) => void;
  getWindows: () => Record<RD_WindowID_T, WindowData>;
  getProcesses: () => Record<RD_ProcID_T, Process>;
  theme: RD_Theme;
  setTheme: (theme: 'win11' | 'macOS' | RD_Theme) => void;
  wallpaper: any;
  setWallpaper: (wallpaper: any) => void;
}

export function useReactDesk(): UseReactDeskReturn;

export { default as Window } from './components/Window';
export { default as Taskbar } from './components/WinTaskbar';
export { default as WindowsRenderer } from './components/WindowsRenderer';
export { default as Layout } from './components/Layout';
export { default as Menu } from './components/Menu';
export { default as Wallpaper } from './components/Wallpaper';

export * from './types';
export * from './utils/functions';
export * from './utils/constants';

export default ReactDeskProvider;