@nordicsemiconductor/pc-nrfconnect-shared 60.0.0-pre2 → 76.0.0

package/src/App/shared.scss

@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../variables';
+
+html,
+body,
+#webapp {
+    height: 100%;
+
+    .core19-app {
+        @include scrollbars($white);
+    }
+}
+
+body {
+    -webkit-user-select: none;
+    -webkit-app-region: drag;
+    cursor: default;
+}
+
+.modal-content {
+    border-radius: 0px;
+}
+
+.disabled,
+:disabled {
+    opacity: $disabled-opacity !important;
+
+    // To prevent opacity from stacking up
+    .disabled,
+    :disabled {
+        opacity: 1;
+    }
+}
+
+// used when tabbing and space
+:focus {
+    outline-color: $accent !important;
+    outline-width: 3px;
+}
+// focus-visible js polyfill, see: https://github.com/WICG/focus-visible
+.js-focus-visible :focus:not(.focus-visible) {
+    outline: none !important;
+    box-shadow: none !important;
+}

package/src/App/tailwind.css

@@ -0,0 +1,12 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "preflight.scss";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+

package/src/App/visibility-bar.scss

@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../variables';
+
+.core19-visibility-bar {
+    display: flex;
+    height: $visibility-bar-height;
+    text-transform: uppercase;
+    font-size: 10px;
+    line-height: 1.9;
+    z-index: 1;
+
+    .toggle-label {
+        font-size: 10px;
+    }
+
+    .core19-visibility-bar-show-side-panel {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        width: $side-panel-width;
+        color: $gray-700;
+        background-color: $gray-200;
+        padding-left: 24px;
+    }
+
+    .core19-visibility-bar-show-log {
+        flex-grow: 1;
+        color: $gray-100;
+        background-color: $gray-800;
+        padding-left: 16px;
+        padding-right: 16px;
+        text-align: right;
+
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .log-button {
+            margin-right: 8px;
+            border: 0;
+            background-color: $gray-700;
+            color: $gray-200;
+            text-transform: inherit;
+        }
+
+        .toggle {
+            margin-left: 24px;
+        }
+    }
+}

package/src/Button/Button.tsx

@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) 2022 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+
+import classNames from '../utils/classNames';
+
+export type ButtonVariants =
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'info'
+    | 'warning'
+    | 'danger'
+    | 'link'
+    | 'link-button';
+
+type ButtonProps = {
+    id?: string;
+    variant: ButtonVariants;
+    className?: string;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    disabled?: boolean;
+    title?: string;
+    large?: boolean;
+};
+
+const Button: React.FC<ButtonProps> = ({
+    children,
+    id,
+    className,
+    variant,
+    onClick,
+    disabled = false,
+    title,
+    large = false,
+}) => (
+    <div className={`tw-preflight ${className}`}>
+        <button
+            type="button"
+            id={id}
+            className={`${classNames(
+                large
+                    ? 'tw-h-8 tw-px-4 tw-text-sm'
+                    : 'tw-h-6 tw-px-2 tw-text-xs',
+                variant === 'primary' &&
+                    'tw-bg-nordicBlue tw-text-white active:enabled:tw-bg-nordicBlue-700',
+                variant === 'secondary' &&
+                    'tw-border tw-border-gray-700 tw-bg-white tw-text-gray-700  active:enabled:tw-bg-gray-50',
+                variant === 'success' &&
+                    'tw-bg-green tw-text-white  active:enabled:tw-bg-green-700',
+                variant === 'info' &&
+                    'tw-bg-nordicBlue tw-text-white active:enabled:tw-bg-nordicBlue-700',
+                variant === 'warning' &&
+                    'tw-bg-orange tw-text-white active:enabled:tw-bg-orange-700',
+                variant === 'danger' &&
+                    'tw-bg-red tw-text-white active:enabled:tw-bg-red-700',
+                variant === 'link' &&
+                    'tw-bg-transparent tw-p-0 tw-text-nordicBlue',
+                variant === 'link-button' &&
+                    'tw-border tw-border-nordicBlue tw-bg-white tw-text-nordicBlue active:enabled:tw-bg-gray-50',
+                className
+            )}`}
+            disabled={disabled}
+            onClick={onClick}
+            title={title}
+        >
+            {children}
+        </button>
+    </div>
+);
+
+export default Button;

package/src/Card/Card.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+import Card from 'react-bootstrap/Card';
+
+import styles from './card.module.scss';
+
+type NrfCardProps = {
+    children: React.ReactNode;
+    title: React.ReactNode;
+};
+
+export default ({ children, title }: NrfCardProps) => (
+    <Card className={styles.card}>
+        <Card.Header className={styles.header}>
+            <Card.Title>
+                <span className={styles.title}>{title}</span>
+            </Card.Title>
+        </Card.Header>
+        <Card.Body className={styles.body}>{children}</Card.Body>
+    </Card>
+);

package/src/Card/card.module.scss

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../variables.scss';
+
+.card {
+    flex: 1;
+    flex-shrink: 0;
+    padding: 16px;
+}
+
+.header {
+    background-color: transparent !important;
+    text-align: center !important;
+    padding: 0.5em 0em 0em 0em !important;
+}
+
+.title {
+    float: inherit !important;
+    margin-bottom: 0px !important;
+}
+
+.body {
+    padding: 1em 0em 0em 0em !important;
+}

package/src/Device/BrokenDeviceDialog/BrokenDeviceDialog.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import { useDispatch, useSelector } from 'react-redux';
+
+import {
+    hideDialog,
+    info as infoSelector,
+    isVisible as isVisibleSelector,
+} from './brokenDeviceDialogSlice';
+
+import './broken-device-dialog.scss';
+
+const BrokenDeviceDialog = () => {
+    const dispatch = useDispatch();
+
+    const isVisible = useSelector(isVisibleSelector);
+    const { description, url } = useSelector(infoSelector);
+
+    return (
+        <Modal
+            show={isVisible}
+            onHide={() => dispatch(hideDialog())}
+            centered
+            className="broken-device-dialog"
+        >
+            <Modal.Header closeButton={false}>
+                <p>
+                    <b>Unusable device</b>
+                </p>
+
+                <span className="mdi mdi-alert" />
+            </Modal.Header>
+            <Modal.Body>
+                <p>{description}</p>
+                <a target="_blank" rel="noreferrer" href={url}>
+                    {url}
+                </a>
+            </Modal.Body>
+            <Modal.Footer>
+                <Button
+                    onClick={() => dispatch(hideDialog())}
+                    variant="secondary"
+                >
+                    Close
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+};
+
+export default BrokenDeviceDialog;

package/src/Device/BrokenDeviceDialog/broken-device-dialog.scss

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../../variables';
+
+.broken-device-dialog {
+    .modal-body {
+        p {
+            margin: 0;
+        }
+        p + p {
+            margin-bottom: 24px;
+        }
+    }
+}

package/src/Device/BrokenDeviceDialog/brokenDeviceDialogSlice.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import { createSlice } from '@reduxjs/toolkit';
+
+import type { RootState } from '../../store';
+
+export interface BrokenDeviceDialog {
+    isVisible: boolean;
+    description: string;
+    url: string;
+}
+
+const initialState: BrokenDeviceDialog = {
+    isVisible: false,
+    description: '',
+    url: '',
+};
+
+const slice = createSlice({
+    name: 'brokenDeviceDialog',
+    initialState,
+    reducers: {
+        showDialog: (state, action) => {
+            state.isVisible = true;
+            state.description = action.payload.description;
+            state.url = action.payload.url;
+        },
+        hideDialog: state => {
+            state.isVisible = false;
+        },
+    },
+});
+
+export const {
+    reducer,
+    actions: { hideDialog, showDialog },
+} = slice;
+
+export const isVisible = (state: RootState) =>
+    state.brokenDeviceDialog.isVisible;
+export const info = (state: RootState) => ({
+    description: state.brokenDeviceDialog.description,
+    url: state.brokenDeviceDialog.url,
+});

package/src/Device/DeviceSelector/BasicDeviceInfo.tsx

@@ -0,0 +1,115 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { ReactNode, useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import InlineInput from '../../InlineInput/InlineInput';
+import {
+    getAutoReselectDevice,
+    getWaitingForDeviceTimeout,
+    getWaitingToAutoReselect,
+} from '../deviceAutoSelectSlice';
+import { displayedDeviceName } from '../deviceInfo/deviceInfo';
+import { Device, resetDeviceNickname, setDeviceNickname } from '../deviceSlice';
+import DeviceIcon from './DeviceIcon';
+
+import './basic-device-info.scss';
+
+interface Props {
+    device: Device;
+    inputRef?: React.Ref<HTMLInputElement>;
+    messageType: 'AutoReselect' | 'WaitingForDevice' | 'DeviceName';
+}
+
+const DeviceName = ({ device, inputRef, messageType }: Props) => {
+    const dispatch = useDispatch();
+    const setOrResetNickname = (name: string) => {
+        const newNameIsEqualToDefaultName =
+            name === displayedDeviceName(device, { respectNickname: false });
+
+        if (newNameIsEqualToDefaultName) {
+            dispatch(resetDeviceNickname(device.serialNumber));
+        } else {
+            dispatch(setDeviceNickname(device.serialNumber, name));
+        }
+    };
+
+    switch (messageType) {
+        case 'AutoReselect':
+            return <div className="reconnecting">Reconnecting...</div>;
+        case 'WaitingForDevice':
+            return <div className="reconnecting">Rebooting...</div>;
+        case 'DeviceName':
+            return (
+                <InlineInput
+                    ref={inputRef}
+                    className="name"
+                    value={displayedDeviceName(device)}
+                    isValid={name => name !== ''}
+                    onChange={setOrResetNickname}
+                />
+            );
+    }
+};
+
+const DeviceSerialNumber = ({ device }: { device: Device }) => (
+    <div className="serial-number">{device.serialNumber}</div>
+);
+
+interface BasicDeviceProps {
+    device: Device;
+    deviceNameInputRef?: React.Ref<HTMLInputElement>;
+    toggles?: ReactNode;
+    showWaitingStatus?: boolean;
+}
+
+export default ({
+    device,
+    deviceNameInputRef,
+    toggles,
+    showWaitingStatus = false,
+}: BasicDeviceProps) => {
+    const [messageType, setMessageType] = useState<
+        'AutoReselect' | 'WaitingForDevice' | 'DeviceName'
+    >('DeviceName');
+    const autoReselectDevice = useSelector(getAutoReselectDevice);
+    const waitingToAutoReselect = useSelector(getWaitingToAutoReselect);
+    const waitingForDevice = useSelector(getWaitingForDeviceTimeout);
+    const thisDevice = device.serialNumber === autoReselectDevice?.serialNumber;
+
+    useEffect(() => {
+        if (!showWaitingStatus) {
+            setMessageType('DeviceName');
+        } else if (waitingForDevice && thisDevice) {
+            setMessageType('WaitingForDevice');
+        } else if (waitingToAutoReselect && thisDevice) {
+            setMessageType('AutoReselect');
+        } else {
+            setMessageType('DeviceName');
+        }
+    }, [
+        thisDevice,
+        showWaitingStatus,
+        waitingForDevice,
+        waitingToAutoReselect,
+    ]);
+
+    return (
+        <div className="basic-device-info">
+            <DeviceIcon device={device} />
+            <div className="details">
+                <DeviceName
+                    device={device}
+                    inputRef={deviceNameInputRef}
+                    messageType={messageType}
+                />
+                <DeviceSerialNumber device={device} />
+            </div>
+            <div className="toggles">{toggles}</div>
+        </div>
+    );
+};

package/src/Device/DeviceSelector/DeviceIcon.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { FC } from 'react';
+
+import { deviceInfo } from '../deviceInfo/deviceInfo';
+import { Device } from '../deviceSlice';
+
+import './device-icon.scss';
+
+const DeviceIcon: FC<{ device: Device }> = ({ device }) => {
+    const Icon = deviceInfo(device).icon;
+    return (
+        <div className="icon">
+            {device.traits.broken ? (
+                <span className="mdi mdi-alert" />
+            ) : (
+                <Icon />
+            )}
+        </div>
+    );
+};
+
+export default DeviceIcon;

package/src/Device/DeviceSelector/DeviceList/AnimatedList.tsx

@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { FC, ReactNode } from 'react';
+import { Flipped, Flipper, spring } from 'react-flip-toolkit';
+
+import { Device } from '../../deviceSlice';
+
+const changesOnReorder = (devices: Device[]) =>
+    devices.map(device => device.serialNumber).join('\n');
+
+export const AnimatedList: FC<{
+    children: ReactNode;
+    devices: Device[];
+}> = ({ children, devices }) => (
+    <Flipper element="ul" flipKey={changesOnReorder(devices)}>
+        {children}
+    </Flipper>
+);
+type onAppear = React.ComponentProps<typeof Flipped>['onAppear'];
+type onExit = React.ComponentProps<typeof Flipped>['onExit'];
+
+const fadeIn: onAppear = element =>
+    spring({
+        values: {
+            opacity: [0, 1],
+            scale: [0, 1],
+        },
+        // @ts-expect-error Library types not correct
+        onUpdate: ({ opacity, scale }) => {
+            element.style.opacity = opacity;
+            element.style.transform = `scaleY(${scale})`;
+        },
+    });
+
+const fadeOut: onExit = (element, _, removeElement) =>
+    spring({
+        values: {
+            opacity: [1, 0],
+            scale: [1, 0],
+        },
+        // @ts-expect-error Library types not correct
+        onUpdate: ({ opacity, scale }) => {
+            element.style.opacity = opacity;
+            element.style.transform = `scaleY(${scale})`;
+        },
+        onComplete: () => {
+            removeElement();
+        },
+    });
+
+export const AnimatedItem: FC<{
+    itemKey: string;
+    children: ReactNode;
+}> = ({ children, itemKey }) => (
+    <Flipped flipId={itemKey} onAppear={fadeIn} onExit={fadeOut}>
+        <li>{children}</li>
+    </Flipped>
+);

package/src/Device/DeviceSelector/DeviceList/BrokenDevice.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+import { useDispatch } from 'react-redux';
+
+import PseudoButton from '../../../PseudoButton/PseudoButton';
+import { showDialog } from '../../BrokenDeviceDialog/brokenDeviceDialogSlice';
+import { Device as DeviceProps } from '../../deviceSlice';
+import BasicDeviceInfo from '../BasicDeviceInfo';
+
+import './broken-device.scss';
+
+export default ({ device }: { device: DeviceProps }) => {
+    const dispatch = useDispatch();
+
+    return (
+        <PseudoButton
+            className="broken-device"
+            onClick={() => dispatch(showDialog(device.broken))}
+        >
+            <BasicDeviceInfo device={device} />
+            <div className="broken-device-info">
+                <p>Unusable device detected </p>
+                <p>
+                    <u>More information</u>
+                </p>
+            </div>
+        </PseudoButton>
+    );
+};