React﹤Kitten﹥ is a desktop environment for the web.
Fully React-ish and follows declarative programming approach.
Spaces, Windows and Stage Manager are the core components of React﹤Kitten﹥.
Spaces are the containers for Windows.
Windows are draggable and resizable components.
Stage Manager manages minimizing.
<Manager size={size} scale={scale}>
<Spaces space={space} onSpaceChange={setSpace}>
<Space>
<button onClick={() => setSpace(space-1)}>
Previous Space
</button>
<button onClick={() => setSpace(space+1)}>
Next Space
</button>
{opened ? <Window
kittenId="meow"
position={position} onPositionChange={setPosition}
size={windowSize} onSizeChange={setWindowSize}
staged={staged} onStagedChange={setStaged}
>
<TitleBar onMove={setPosition}>
<Buttons>
<CloseButton onClick={() => setOpened(false)} />
<StageButton onClick={() => setStaged(!staged)} />
</Buttons>
<Title>Cats and Kittens</Title>
</TitleBar>
<Content>{/* ... */}</Content>
</Window>: <button onClick={() => setOpened(true)}>
Open Window
</button>}
</Space>
</Spaces>
</Manager>