Building the UI using React Spectrum

In this tutorial, you’ll use the React Spectrum library to build your widget’s UI. React Spectrum is a React-based implementation of Adobe’s Spectrum Design system. Spectrum Design is the design system used by @wuespace/telestion-client-common library and integrates well into the other parts of the client’s UI.

Prerequisites

To complete this tutorial, you should be familiar with React, TypeScript, and have a widget bootstrapped according to the Bootstrapping a widget tutorial.

What you’ll build

You’ll build your widget’s UI. It should display the connection status (Connected / Disconnected) of three different I/O interfaces: SAT A, SAT B, and SAT C and have “Reset” buttons that could, for example, trigger a Telecommand:

In this tutorial, you won’t connect this to any actual data source (the event bus) that’s a part of the following tutorial.

The code you’ll write looks like this:

src/widgets/my-new-widget/widget.tsx

import {
    Divider,
    Flex,
    Heading,
    StatusLight,
    View,
    ActionButton
} from '@adobe/react-spectrum';

export function Widget() {
    return (
        <View padding={'size-200'} height={'100%'}>
            <Flex direction="column" width="100%">
                <Heading level={3}>Connection Status</Heading>
                <Divider size="M" marginBottom={'size-200'} />
                <Indicator system="SAT A" />
                <Indicator system="SAT B" />
                <Indicator system="SAT C" />
            </Flex>
        </View>
    );
}

function Indicator(props: { system: string }) {
    return (
        <Flex alignItems={'baseline'} gap={'size-200'}>
            <StatusLight variant="positive">{props.system} Connected</StatusLight>
            <ActionButton>Reset</ActionButton>
        </Flex>
    );
}

Step 1: Build the layout

Adjust the widget.tsx to have a base layout for your widget’s UI:

src/widgets/my-new-widget/widget.tsx

// highlight-start
import { Divider, Flex, Heading, View } from '@adobe/react-spectrum';
// highlight-end

export function Widget() {
    // highlight-start
    return (
        <View padding={'size-200'} height={'100%'}>
            <Flex direction="column" width="100%">
                <Heading level={3}>Connection Status</Heading>
                <Divider size="M" marginBottom={'size-200'} />
                {/* Content goes here */}
            </Flex>
        </View>
    );
    // highlight-end
}

The result should look something like this:

Step 2: Add component for a system’s indicator

Since you have three different systems, you’ll extract their connection status UI into one reusable <Indicator /> component and use it for your three different systems:

src/widgets/my-new-widget/widget.tsx

import {
    Divider,
    Flex,
    Heading,
    // highlight-next-line
    StatusLight,
    View,
    // highlight-next-line
    ActionButton
} from '@adobe/react-spectrum';

export function Widget() {
    return (
        <View padding={'size-200'} height={'100%'}>
            <Flex direction="column" width="100%">
                <Heading level={3}>Connection Status</Heading>
                <Divider size="M" marginBottom={'size-200'} />
                // highlight-start
                <Indicator system="SAT A" />
                <Indicator system="SAT B" />
                <Indicator system="SAT C" />
                // highlight-end
            </Flex>
        </View>
    );
}

// highlight-start
function Indicator(props: { system: string }) {
    return (
        <Flex alignItems={'baseline'} gap={'size-200'}>
            <StatusLight variant="positive">{props.system} Connected</StatusLight>
            <ActionButton>Reset</ActionButton>
        </Flex>
    );
}
// highlight-end

Now, your UI has status-light indicators for the connection status of the three different systems and reset buttons:

Next steps

You have now developed a realistic widget using the Spectrum Design system.

You should familiarize yourself with both the Spectrum Design system in general as well as the React Spectrum implementation using Adobe’s resources:

Adobe Spectrum Design System React Spectrum Documentation

Of course, this widget, right now, doesn’t reflect the actual connection status. To change that, you’ll learn how to connect this widget to the Application’s event bus using the APIs from @wuespace/telestion-client-core in the next tutorial:

Connecting the widget with the Event Bus