@nordicsemiconductor/pc-nrfconnect-shared 60.0.0-pre1

package/src/App/appLayout.ts

@@ -0,0 +1,95 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+import type { RootState } from '../store';
+import { persistCurrentPane } from '../utils/persistentStore';
+
+export interface AppLayout {
+    isSidePanelVisible: boolean;
+    isLogVisible: boolean;
+    currentPane: number;
+    paneNames: string[];
+}
+
+const initialState: AppLayout = {
+    isSidePanelVisible: true,
+    isLogVisible: true,
+    currentPane: 0,
+    paneNames: [],
+};
+
+const isAboutPane = (pane: number, paneCount: number) => pane === paneCount - 1;
+
+const setCurrentPaneInState = (newPane: number, state: AppLayout) => {
+    if (!isAboutPane(newPane, state.paneNames.length)) {
+        persistCurrentPane(newPane);
+    }
+    state.currentPane = newPane;
+};
+
+interface PaneSpec {
+    name: string;
+    Main: unknown;
+}
+
+const slice = createSlice({
+    name: 'appLayout',
+    initialState,
+    reducers: {
+        toggleLogVisible: state => {
+            state.isLogVisible = !state.isLogVisible;
+        },
+        toggleSidePanelVisible: state => {
+            state.isSidePanelVisible = !state.isSidePanelVisible;
+        },
+        setCurrentPane: (
+            state,
+            { payload: newPane }: PayloadAction<number>
+        ) => {
+            setCurrentPaneInState(newPane, state);
+        },
+        setPanes: (state, action: PayloadAction<PaneSpec[]>) => {
+            state.paneNames = action.payload.map(pane => pane.name);
+        },
+        switchToNextPane: state => {
+            setCurrentPaneInState(
+                (state.currentPane + 1) % state.paneNames.length,
+                state
+            );
+        },
+        switchToPreviousPane: state => {
+            let nextPane = state.currentPane - 1;
+            if (nextPane < 0) {
+                nextPane = state.paneNames.length - 1;
+            }
+            setCurrentPaneInState(nextPane, state);
+        },
+    },
+});
+
+export const {
+    reducer,
+    actions: {
+        setCurrentPane,
+        setPanes,
+        toggleLogVisible,
+        toggleSidePanelVisible,
+        switchToNextPane,
+        switchToPreviousPane,
+    },
+} = slice;
+
+export const isSidePanelVisible = (state: RootState) =>
+    state.appLayout.isSidePanelVisible;
+export const isLogVisible = (state: RootState) => state.appLayout.isLogVisible;
+export const paneNames = (state: RootState) => state.appLayout.paneNames;
+
+export const currentPane = ({ appLayout }: RootState) =>
+    appLayout.currentPane >= appLayout.paneNames.length
+        ? 0
+        : appLayout.currentPane;

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/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,66 @@
+/*
+ * Copyright (c) 2022 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+
+import classNames from '../utils/classNames';
+
+import styles from './button.module.scss';
+
+export type ButtonVariants =
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'info'
+    | 'warning'
+    | 'danger'
+    | 'link'
+    | 'custom';
+
+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,
+}) => (
+    <button
+        type="button"
+        id={id}
+        className={classNames(
+            variant !== 'custom' && styles.button,
+            large && styles.large,
+            variant === 'primary' && styles.primary,
+            variant === 'secondary' && styles.secondary,
+            variant === 'success' && styles.success,
+            variant === 'info' && styles.info,
+            variant === 'warning' && styles.warning,
+            variant === 'danger' && styles.danger,
+            variant === 'link' && styles.link,
+            className
+        )}
+        disabled={disabled}
+        onClick={onClick}
+        title={title}
+    >
+        {children}
+    </button>
+);
+
+export default Button;

package/src/Button/button.module.scss

@@ -0,0 +1,154 @@
+/*
+ * Copyright (c) 2022 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@use 'sass:color';
+@import '../variables.scss';
+
+.button {
+    font-size: 12px;
+    line-height: 1em;
+    height: 24px;
+    border: 1px;
+    border-style: solid;
+
+    &.large {
+        height: 32px;
+        font-size: 14px;
+    }
+
+    &.primary {
+        background-color: $btn-primary-bg;
+        color: $btn-primary-color;
+        border-color: $btn-primary-border;
+
+        &:hover:not([disabled]) {
+            color: $btn-primary-color;
+            background-color: $btn-primary-bg;
+            border-color: $btn-primary-border;
+        }
+
+        &:focus:not([disabled]) {
+            background-color: $btn-primary-bg;
+            border-color: $btn-primary-border !important;
+        }
+
+        &:active:not([disabled]) {
+            background-color: color.scale($btn-primary-bg, $lightness: -10%);
+        }
+    }
+
+    &.secondary {
+        color: $btn-secondary-color;
+        background-color: $btn-secondary-bg;
+        border-color: $btn-secondary-border;
+
+        &:hover:not([disabled]) {
+            color: $btn-secondary-color;
+            background-color: $btn-secondary-bg;
+            border-color: $btn-secondary-border;
+        }
+
+        &:focus:not([disabled]) {
+            background-color: $btn-secondary-bg;
+            border-color: $btn-secondary-border !important;
+        }
+
+        &:active:not([disabled]) {
+            background-color: color.scale($btn-secondary-bg, $lightness: -10%);
+        }
+    }
+
+    &.success {
+        color: $btn-success-color;
+        background-color: $btn-success-bg;
+        border-color: $btn-success-border;
+
+        &:hover:not([disabled]) {
+            color: $btn-success-color;
+            background-color: $btn-success-bg;
+            border-color: $btn-success-border;
+        }
+
+        &:focus:not([disabled]) {
+            background-color: $btn-success-bg;
+            border-color: $btn-success-border !important;
+        }
+
+        &:active:not([disabled]) {
+            background-color: color.scale($btn-success-bg, $lightness: -10%);
+        }
+    }
+
+    &.info {
+        color: $btn-info-color;
+        background-color: $btn-info-bg;
+        border-color: $btn-info-border;
+
+        &:hover:not([disabled]) {
+            color: $btn-info-color;
+            background-color: $btn-info-bg;
+            border-color: $btn-info-border;
+        }
+
+        &:focus:not([disabled]) {
+            background-color: $btn-info-bg;
+            border-color: $btn-info-border !important;
+        }
+
+        &:active:not([disabled]) {
+            background-color: color.scale($btn-info-bg, $lightness: -10%);
+        }
+    }
+
+    &.warning {
+        color: $btn-warning-color;
+        background-color: $btn-warning-bg;
+        border-color: $btn-warning-border;
+
+        &:hover:not([disabled]) {
+            color: $btn-warning-color;
+            background-color: $btn-warning-bg;
+            border-color: $btn-warning-border;
+        }
+
+        &:focus:not([disabled]) {
+            background-color: $btn-warning-bg;
+            border-color: $btn-warning-border !important;
+        }
+
+        &:active:not([disabled]) {
+            background-color: color.scale($btn-warning-bg, $lightness: -10%);
+        }
+    }
+
+    &.danger {
+        color: $btn-danger-color;
+        background-color: $btn-danger-bg;
+        border-color: $btn-danger-border;
+
+        &:hover:not([disabled]) {
+            color: $btn-danger-color;
+            background-color: $btn-danger-bg;
+            border-color: $btn-danger-border;
+        }
+
+        &:focus:not([disabled]) {
+            background-color: $btn-danger-bg;
+            border-color: $btn-danger-border !important;
+        }
+
+        &:active:not([disabled]) {
+            background-color: color.scale($btn-danger-bg, $lightness: -10%);
+        }
+    }
+
+    &.link {
+        color: $nordic-blue;
+        padding: 0;
+        border: none;
+        background: none;
+    }
+}

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,
+});