@wuespace/telestion-client-types

@wuespace/telestion-client-core#Pages

Properties

If it is true the additional redirect will be inserted after all registered routes in the [@wuespace/telestion-client-core#Pages | Pages renderer component](#@wuespace/telestion-client-core#Pages | Pages renderer component) otherwise it will be directly attached after the routing definition of the component.

@see:

@see:

`DefaultRouting`

interface DefaultRouting extends BaseRouting

Specifies the default type of routing for a Page component.

It not depends on the application state and will always be reachable under the given [AbstractRouting.path | path](#AbstractRouting.path | path).

@see:

AbstractRouting

Properties

`type`

Type: 'default'

No docs provided

`UnAuthRouting`

interface UnAuthRouting extends BaseRouting,AbstractRedirect

Specifies an unauthorized type of routing for a Page component.

The Page will only be rendered if the user is unauthorized (or logged out) in the application otherwise the app will be redirected to the given AbstractRedirect.redirectPath.

@see:

BaseRouting

@see:

Properties

`type`

Type: 'unAuth'

No docs provided

`AuthRouting`

interface AuthRouting extends BaseRouting,AbstractRedirect

Specifies an authorized type of routing for a Page component.

The Page will only be rendered if the user is authorized (or logged in) in the application otherwise the app will be redirected to the given AbstractRedirect.redirectPath.

@see:

BaseRouting

@see:

@wuespace/telestion-client-core#Pages

Properties

`type`

Type: 'auth'

No docs provided

`Routing`

type Routing

Alias for: DefaultRouting | UnAuthRouting | AuthRouting

Defines an object type for routing information of a Page in Telestion Client. It can be based on the application route and state and is important for Pages used in the [@wuespace/telestion-client-core#Pages | Pages renderer component](#@wuespace/telestion-client-core#Pages | Pages renderer component).

@see:

DefaultRouting

@see:

UnAuthRouting

@see:

AuthRouting

@see:

`BasePropType`

type BasePropType

Alias for: JsonSerializable

Defines the basic prop-type of Widget component.

@see:

JsonSerializable

`GenericProps`

interface GenericProps

Specifies the most generic properties that a Widget component can have.

@see:

BasePropType

@see:

@example:

Initialization of basic, advanced and invalid properties

const myProps: GenericProps = {
	basic: 'Where is the box?',
	advanced: {
		part1: 'Test it!',
		part2: false,
		part3: 3.14
	},
	invalid: () => console.log('Ohh...') // not allowed
};

Properties

`GenericComponent`

type GenericComponent = Record<string, unknown> >

Alias for: (props: P) => ReactNode

Specifies the most generic type a Widget component and a ConfigControls component can have.

@typeParam:

P - additional props for the Widget renderer component (see example below)

@see:

ReactNode

@see:

@example:

Common usage

import { ReactNode } from 'react';

interface WidgetProps extends GenericProps {
	type: 'basic' | 'advanced';
}

interface RendererProps extends BaseRendererProps<WidgetProps> {}

function Widget({ title, type }: RendererProps): ReactNode {
	return (
		<div>
			<p>Title: {title}</p>
			<p>Type: {type}</p>
		</div>
	);
}

export const myWidget: Widget<WidgetProps> = {
	name: 'My Widget',
	Widget: Widget
};

`BaseRendererProps`

type BaseRendererProps 

Alias for: P

These are the most basic renderer props that a Widget renderer component can have. It is extensible via a generic type to add more props to the Widget renderer component.

@typeParam:

P - additional props for the Widget renderer component

@see:

GenericProps

@see:

GlobalRendererProps

@see:

@example:

A very simple widget

import { ReactNode } from 'react';

function Widget({ title, type }: BaseRendererProps): ReactNode {
	return <p>Title: {title}</p>;
}

export const verySimpleWidget: Widget<WidgetProps> = {
	name: 'Very simple Widget',
	Widget: Widget
};

@example:

Extended widget

import { ReactNode } from 'react';

interface WidgetProps extends GenericProps {
	type: 'basic' | 'advanced';
}

interface RendererProps extends BaseRendererProps<WidgetProps> {}

function Widget({ type }: RendererProps): ReactNode {
	return (
		<div>
			<p>Type: {type}</p>
		</div>
	);
}

export const myWidget: Widget<WidgetProps> = {
	name: 'My Widget',
	Widget: Widget
};

`BaseConfigControlsProps`

interface BaseConfigControlsProps extends Record<string, unknown>

These are props for the ConfigControls widget. that a Widget renderer component can have. It is extensible via a generic type to add more props that are also used at the Widget renderer component.

@typeParam:

P - additional props for the Widget renderer component

@see:

GenericProps

@see:

@see:

@example:

Very simple ConfigControls

import { ReactNode } from 'react';

interface WidgetProps extends GenericProps {
	value: string;
}

interface RendererProps extends BaseRendererProps<WidgetProps> {}

interface ConfigControlsProps extends BaseConfigControlsProps<WidgetProps> {}

function Widget({ value }: RendererProps): ReactNode {
	return <p>Value: {value}</p>;
}

function ConfigControls({  }

Properties

`currentProps`

Type: P

the current props values of the widget which can be changed with [BaseConfigControlsProps.onUpdate | onUpdate](#BaseConfigControlsProps.onUpdate | onUpdate)

`onUpdate`

Type: (newProps: Partial) => void

Updates the values of the props of the widget.

@param:

newProps - new props that are merged or replaced with the current props to build the new props for the widget to use

@example:

Update the props in a ConfigControls component

function ConfigControls({
  currentProps, onUpdate
}: ConfigControlsProps): ReactNode {
  // local state to not "flood" global store with changes (performance)
  const [value, setValue] = useState(currentProps.value);

  return (
    <div>
      <input type="text" value={value} onChange={event => setValue(event.target.value)} />
      <button onClick={() => onUpdate({ value })} />
    </div>
  );
}

interface Widget 

An "entire" widget definition ready to export and use. It contains a name for reference, a Widget component that will be rendered and an optional ConfigControls component to change Widget component props.

@typeParam:

P - additional props for the Widget renderer component

@see:

Widget.name

@see:

Widget.Widget

@see:

Widget.ConfigControls

@example:

A very simple widget

import { Widget } from './widget';
import { ConfigControls } from './config-controls';

export const myWidget: Widget = {
	name: 'My Awesome Widget',
	Widget: Widget,
	ConfigControls: ConfigControls
}

Properties

Type: string

the name of the widget

It is a selector to reference the widget.

Type: string

The full title of the widget which are displayed in the settings page and in the widget selector.

If the title is not defined, the name is used as a fallback.

Type: string

The version of the widget. Different values resulting in different stored properties in the widget renderer. Useful, when you have a breaking change in your widget props.

Type: GenericComponent<BaseRendererProps>

the Widget component implementation as React Component

@see:

BaseConfigControlsProps

@see:

GlobalRendererProps

@see:

GenericComponent

Type: GenericComponent<BaseConfigControlsProps>

the ConfigControls component implementation as React Component

@see:

@see:

GenericComponent

`WidgetDefinition`

interface WidgetDefinition

Defines a widget placeholder in a dashboard container.

This is done via the [https://css-tricks.com/snippets/css/complete-guide-grid/ | CSS Grid system](#https://css-tricks.com/snippets/css/complete-guide-grid/ | CSS Grid system).

@see:

https://css-tricks.com/snippets/css/complete-guide-grid/

@see:

Dashboard

@see:

@example:

A very simple widget definition for a dashboard

const myWidgetDef: WidgetDefinition = {
	width: 2,
	height: 4,
	widgetName: 'myWidget',
	initialProps: {
		value: 'The Box'
	}
}

Properties

`id`

Type: string

A unique identifier which represents this specific widget.

`width`

Type: number

the width of the widget in columns

This is done via the CSS Grid system.

@see:

WidgetDefinition.height

@see:

Dashboard.columns

@see:

https://css-tricks.com/snippets/css/complete-guide-grid/

`height`

Type: number

the number of columns the widget has space in the container

This is done via the CSS Grid system.

@see:

WidgetDefinition.width

@see:

Dashboard.rows

@see:

https://css-tricks.com/snippets/css/complete-guide-grid/

`widgetName`

Type: string

the number of row the widget has space in the container

@see:

Widget.name

`initialProps ?`

Type: GenericProps

the initial props for the Widget component

if the initial props are not defined they are undefined

@see:

`Dashboard`

interface Dashboard

Defines a dashboard which renders given widgets in defined positions.

The dashboard is a structural container which sets the boundaries for the widgets to fit into. This is done via the [https://css-tricks.com/snippets/css/complete-guide-grid/ | CSS Grid system](#https://css-tricks.com/snippets/css/complete-guide-grid/ | CSS Grid system).

@see:

https://css-tricks.com/snippets/css/complete-guide-grid/

@see:

@example:

A very simple dashboard

const myDashboard: Dashboard = {
	title: 'My Dashboard',
	columns: 4,
	rows: 4,
	widgets: [
		{
			width: 2,
			height: 2,
			widgetName: 'myWidget'
		}
	]
};

Properties

`title`

Type: string

the title of the dashboard

It will be visible in the application and selectable by the user.

`columns`

Type: number

the number of columns in the dashboard container

It is important for the spacing of the widget in the dashboard container. See [https://css-tricks.com/snippets/css/complete-guide-grid/ | CSS Grid system](#https://css-tricks.com/snippets/css/complete-guide-grid/ | CSS Grid system) for more information.

@see:

https://css-tricks.com/snippets/css/complete-guide-grid/

@see:

`rows`

Type: number

the number of rows in the dashboard container

@see:

https://css-tricks.com/snippets/css/complete-guide-grid/

@see:

`widgets`

Type: WidgetDefinition[]

widgets associated to the dashboard container

These widgets will be arranged in the container based on the columns and rows of the dashboard and the width and height of the widgets. See [https://css-tricks.com/snippets/css/complete-guide-grid/ | CSS Grid system](#https://css-tricks.com/snippets/css/complete-guide-grid/ | CSS Grid system) for more information.

@see:

https://css-tricks.com/snippets/css/complete-guide-grid/

@see:

`Username`

type Username

Alias for: string

A type definition for a username in a user configuration.

@see:

UserConfig

`UserInformation`

interface UserInformation

User information mapped to a username and stored in a user configuration.

@see:

UserConfig

@see:

Username

Properties

`dashboards`

Type: Array<Dashboard>

The dashboards associated to the user.

@see:

Dashboard

`UserConfig`

type UserConfig

Alias for: Record<Username, UserInformation>

Describes an entire user configuration. It is a map between the username and its stored information. When the user is logged in, typically the dashboard page will render these definitions for the logged in username.

@see:

Dashboard

@example:

A very simple user dashboard association

const userConfig: UserConfig = {
	'Alice': {
		dashboards: [
			{
				title: 'My awesome dashboard',
				columns: 4,
				rows: 4,
				widgets: [
					{
						width: 2,
						height: 2,
						widgetName: 'myWidget'
						initialProps: {
							value: 'TheBox'
						}
					}
				]
			}
		]
	}
}

`SignInResult`

interface SignInResult extends BaseResult

Result of a sign in process commonly returned from a sign in function of an authenticator.

@see:

Auth

@see:

BaseResult

@example:

Analyze sign in result

const authenticator: Auth = new SomeAuth(); // implements Auth

authenticator.signIn('http://localhost:9870/bridge', 'alice', '12345')
	.then(signInRes => {
		console.log(`User ${signInRes} signed in`);
		if (signInRes.reason) {
			console.log(`Because ${signInRes.reason}`);
		}
	}

Properties

`type`

Type: 'signIn'

No docs provided

`user`

Type: string

the name of the user who is authenticated

@see:

`eventBusUrl`

Type: string

the url of the eventbus server to connect to after authentication

@see:

`SignOutResult`

interface SignOutResult extends BaseResult

Result of a sign out process commonly returned from a sign out function of an authenticator.

@see:

Auth

@see:

BaseResult

@example:

Analyze sign in result

const authenticator: Auth = new SomeAuth(); // implements Auth

// maybe some sign in before

authenticator.signOut()
	.then(signOutRes => {
		console.log(`Signed out`);
		if (signOutRes.reason) {
			console.log(`Because ${signOutRes.reason}`);
		}
	}

Properties

`type`

Type: 'signOut'

No docs provided

`AuthResult`

type AuthResult

Alias for: SignInResult | SignOutResult

an authentication result commonly returned from an authenticator sign in or sign out function.

It can be a sign in result or a sign out result based on the current authentication state.

@see:

Auth

@see:

SignInResult

@see:

SignOutResult

`Auth`

interface Auth

A definition for an authenticator.

It may be used in the @wuespace/telestion-client-core#useAuth hook to authenticate users via given credentials.

@see:

@see:

Auth.signOut

@example:

Very simple login process

const authenticator: Auth = new SomeAuth(); // implements Auth

export function signIn(
	serverUrl: string,
	username: string,
	password: string
): Promise<string> {
	return authenticator
		.signIn(serverUrl, username, password)
		.then(signInRes => {
			set({ user: signInRes.user, serverUrl });
			return signInRes.user;
		});
};

Properties

Methods

function signIn ( authServerUrl : string , username : string , password : string ) : Promise<SignInResult>

Tries to sign in to the server with the specified url using the given user credentials and resolves if the authentication was successful and otherwise rejects if the authentication was not successful.

@param:

authServerUrl - the url of the authentication server

@param:

username - the users name

@param:

password - the users password

@see:

SignInResult

@see:

Auth.signOut

@example:

Very simple login process

const authenticator: Auth = new SomeAuth(); // implements Auth

export function signIn(
	authServerUrl: string,
	username: string,
	password: string
): Promise<string> {
	return authenticator
		.signIn(authServerUrl, username, password)
		.then(signInRes => {
			set({ user: signInRes.user, authServerUrl });
			return signInRes.user;
		});
};

`signOut (...)`

function signOut ( ) : Promise<SignOutResult>

Tries to sign out from the server and close all connections.

@see:

SignOutResult

@see:

@example:

A very simple logout process

const authenticator: Auth = new SomeAuth(); // implements Auth

export function signOut(): Promise<void> {
	return authenticator.signOut().then(res => {
		set({ user: null, serverUrl: null });
		if (res.reason) {
			logger.warn('User signed out because:', res.reason);
		}
	});
}

`onAuthStateChanged (...)`

function onAuthStateChanged ( cb : (res: AuthResult) => void ) : () => void

Registers an event handler that gets called if an external auth state change happens.

@param:

cb - the handler that will be called

@see:

AuthResult

@see: