Home

Welcome to the pstdl-ui wiki! 😄

The pstdl-ui was created to quickly develop ground control software for robotic prototypes. It provides many pre-built react components as well as some helpful state management hooks. It is built in TypeScript and SCSS.

Usage

Setup

To get started using pstdl-ui, everything need to be wrapped within a PUIApp. Import PUIApp and use it as the root component.

import React from "react";
import ReactDOM from "react-dom";
import {PUIApp} from "@pstdl/ui";

ReactDOM.render(
	<PUIApp>
		<span>Hello, pstdl-ui!</span>
	</PUIApp>,
	document.getElementById("root")
);

Components

There are many components that with pstdl-ui. They are broken up into a few sections. There are status and view components. A status component displays data to the user. A view components displays information to the user. Status components are of two forms: mutable or immutable. Mutable status components let the user change the status, immutable status components are non-editable by the user, however they help display data.

Hooks

There are lots of hooks provided in pstdl-ui. Most aid with state management of your react app. Using PUIApp as your root component, all children will receive access to PUIContext which provides a global state system. There are custom hooks to abstract away the complexities of the state system. For example, the following hook would handle the state management for you and display a yellow warning toast to the user with the message "Hello, pstdl-ui!" for 4 seconds and then automatically dissapear.

import { usePUIToast } from "@pstdl/ui";
const toast = usePUIToast();
toast({
	msg: "Hello, pstdl-ui!",
	type: PUIToastType.WARNING,
	duration: 4
})

You can read more about hooks in each hook's documentation:

• PUIHookAlert
• PUIHookLog
• PUIHookState
• PUIHookToast

Controllers