https://github.com/bastien2203/react-ts-os
Mini OS is a web application simulating an operating system, built with React and TypeScript, and deployed on Vercel. It offers an interactive user interface with windows, allowing users to experience a desktop-like environment directly in their browser.
https://github.com/bastien2203/react-ts-os
react simulation typescript
Last synced: 2 months ago
JSON representation
Mini OS is a web application simulating an operating system, built with React and TypeScript, and deployed on Vercel. It offers an interactive user interface with windows, allowing users to experience a desktop-like environment directly in their browser.
- Host: GitHub
- URL: https://github.com/bastien2203/react-ts-os
- Owner: Bastien2203
- Created: 2024-12-13T18:15:26.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-19T16:15:33.000Z (over 1 year ago)
- Last Synced: 2024-12-19T17:26:44.643Z (over 1 year ago)
- Topics: react, simulation, typescript
- Language: TypeScript
- Homepage: https://react-ts-os.vercel.app
- Size: 70.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
React TS OS
===========
🖇 https://react-ts-os.vercel.app/
## Create new window
1. Create a new component in `src/components/windows/`, for example `src/components/windows/MyWindow.tsx`:
```tsx
export const MyWindow = (props: {
mywindowprops?: string
}) => {
return
{props.mywindowprops ? {props.mywindowprops}
: no props
}
}
```
2. Add the new window to property `window`of the `WindowManager` service in `src/services/WindowManager.ts`:
```ts
class WindowManager {
private windows: { [key: string]: Window } = {
// ...
"mywindow": {
component: MyWindow, // The component of the window
title: "My Window", // The title of the window
icon: JSXIconForMyWindow, // A tsx component that represents the icon of the window
},
}
// ...
}
```
## Create new setting and import it in your component
1. Create a new setting in `src/services/Settings.ts`:
```ts
class Settings {
private preferences: { [key: string]: PreferencesSection } = {
// ...
mysettingsection: {
title: "My Setting Section",
properties: {
mysetting: {
name: "My Setting",
type: "text",
value: "default value",
},
},
},
}
// ...
}
```
2. Import the setting in your component:
```tsx
export const MyWindow = (props: {
mywindowprops?: string
}) => {
const [mysetting] = useSetting("mysettingsection", "mysetting")
return
{mysetting}
{props.mywindowprops ? {props.mywindowprops}
: no props
}
}
```
-------------------
TODO :
- Add User and sessions
- Handle file permissions
- Fix activity monitor bug
- update instantly display when file is created/deleted (e.g. i create a file with a command in the term, i want to see
it in the file explorer directly)
- Handle file creation directly in the editor