diff --git a/docs/docs/apps.md b/docs/docs/apps.md index fd8facf..d7c74b4 100644 --- a/docs/docs/apps.md +++ b/docs/docs/apps.md @@ -19,6 +19,39 @@ There are 5 apps by default that come with RadixOS: | Settings | `settings` | System customization and formatting | Tab-id | | Image Viewer | `image` | Can open images | data:image or SVG | +### Configuration + +You can configure some apps by passing a second argument to `setupApps`: + +```tsx +const apps = setupApps([], { + terminalPlugins: [], + defaultAppsOnDesktop: ["terminal", "explorer"], +}); +``` + +### Terminal plugins + +You can pass extra matchers as plugins to the terminal application. This allows you to respond to commands and push output back to the terminal. + +```tsx +const terminalPluginOpen: TerminalPlugin = { + matcher: (command) => command === "open", + exec: (pushOutput, command, args) => { + // do some stuff, then + pushOutput( + + Opening "{args.join(" ")}" + + ); + }, +}; + +const apps = setupApps([], { + terminalPlugins: [terminalPluginOpen], +}); +``` + ## Creating your own applications You can create apps by using `createApp`: @@ -80,6 +113,14 @@ const { launch } = useAppLauncher(); launch("some-app", { ...settings }); ``` +### Set default focus element + +To configure which element should be focused when the title-bar is clicked, or when the app is initially opened, you can set the following attribute on the HTML element: `data-returnfocus="true"`. Example: + +```tsx + +``` + ## Application Hooks The app components are mounted inside `RadixOS`, which gives them access to a few hooks to control the operating system. diff --git a/docs/docs/index.md b/docs/docs/index.md index 4c8a1eb..5d9b97b 100644 --- a/docs/docs/index.md +++ b/docs/docs/index.md @@ -4,20 +4,25 @@ sidebar_position: 1 # Radix OS -Radix OS is a operating system simulated on the web, with a modular file system that can be swapped out with any async source, able to run your own custom built applications. Designed to be flexible and easily extendable so it can fit your needs. +Radix OS is an operating system simulated on the web, with a modular file system that can be swapped out with any async source, able to run your own custom built applications. Designed to be flexible and easily extendable so it can fit your needs. [![Preview](/sh.jpg)](https://imp-dance.github.io/radix-os/) +:::tip So what it, really? + +A React component, coupled with a few helper functions and hooks - published to NPM. Together, this package lets you create an OS-like environment, and inject custom applications of your own. +::: + ## Features - Window management - Modular file system - Customizable UI - App launcher -- Keyboard shortcuts -- Context menus - System UI components -- Drag 'n drop file upload +- Drag 'n drop user interface +- Set of default applications + - Explorer, terminal, code, image viewer + more. ## Getting started @@ -41,24 +46,24 @@ We also recommend that you install `@radix-ui/react-icons` if you plan on extend ```tsx title="lib/radix-os.ts" import { - fsZustandIntegration, + createZustandFsIntegration, setupApps, createUseAppLauncher } from "radix-os; export const applications = setupApps(); export const useAppLauncher = createUseAppLauncher(applications); +export const fs = createZustandFsIntegration(); ``` ```tsx title="App.tsx" import '@radix-ui/themes/styles.css'; import { RadixOS, - fsZustandIntegration } from "radix-os; -import { applications } from "./lib/radix-os"; +import { applications, fs } from "./lib/radix-os"; export default function App(){ - return + return } ``` diff --git a/package.json b/package.json index 91c987e..7fc8155 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "dependencies": { "@radix-ui/react-icons": "^1.3.0", "@radix-ui/themes": "^3.1.4", - "radix-os": "^0.2.0", + "radix-os": "^0.2.1", "radix-ui": "^1.0.1", "react": "^18.3.1", "react-confetti": "^6.1.0", diff --git a/packages/radix-os/package.json b/packages/radix-os/package.json index ef0075f..00bcd5f 100644 --- a/packages/radix-os/package.json +++ b/packages/radix-os/package.json @@ -1,6 +1,6 @@ { "name": "radix-os", - "version": "0.2.0", + "version": "0.2.1", "description": "A simulated operating system built with React and Radix UI", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/packages/radix-os/src/components/Desktop/Desktop.tsx b/packages/radix-os/src/components/Desktop/Desktop.tsx index df67909..349dda9 100644 --- a/packages/radix-os/src/components/Desktop/Desktop.tsx +++ b/packages/radix-os/src/components/Desktop/Desktop.tsx @@ -20,7 +20,10 @@ import { useState, } from "react"; import { DesktopShortcut } from "../../services/applications/desktop-shortcuts"; -import { useUntypedAppContext } from "../../services/applications/launcher"; +import { + UseAppLauncherReturn, + useUntypedAppContext, +} from "../../services/applications/launcher"; import { useSettingsStore } from "../../stores/settings"; import { RadixOsApp } from "../../stores/window"; import { throttle } from "../../utils"; @@ -64,9 +67,11 @@ export function Desktop(props: { icon: app.defaultWindowSettings?.icon ?? , title: app.appName, id: app.appId, - onClick: () => { + onClick: (() => { launch(app.appId); - }, + }) as ( + appLauncher: UseAppLauncherReturn + ) => void, position: { x: gridPad, y: i > 0 ? gridSize * i + gridPad : gridPad, @@ -248,9 +253,10 @@ function Application(props: { icon: ReactNode; title: string; id: string; - onClick: () => void; + onClick: (appLauncher: UseAppLauncherReturn) => void; position: { x: number; y: number }; }) { + const appLauncher = useUntypedAppContext(); const [mousePosition, setMousePosition] = useState<{ x: number; y: number; @@ -294,7 +300,7 @@ function Application(props: { style={style} {...draggable.attributes} {...draggable.listeners} - onClick={props.onClick} + onClick={() => props.onClick(appLauncher)} > {props.icon} diff --git a/packages/radix-os/src/components/WindowDragManager/WindowDragManager.tsx b/packages/radix-os/src/components/WindowDragManager/WindowDragManager.tsx index a971591..c9f44dc 100644 --- a/packages/radix-os/src/components/WindowDragManager/WindowDragManager.tsx +++ b/packages/radix-os/src/components/WindowDragManager/WindowDragManager.tsx @@ -1,6 +1,7 @@ import { DndContext, MouseSensor, + pointerWithin, useSensor, } from "@dnd-kit/core"; import { ReactNode } from "react"; @@ -24,6 +25,7 @@ export function WindowDragManager(props: { { setIsDragging(false); const window = windows.find( diff --git a/packages/radix-os/src/components/apps/Settings/Settings.tsx b/packages/radix-os/src/components/apps/Settings/Settings.tsx index badae0e..536e2cf 100644 --- a/packages/radix-os/src/components/apps/Settings/Settings.tsx +++ b/packages/radix-os/src/components/apps/Settings/Settings.tsx @@ -242,7 +242,6 @@ function StorageTab() { -