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

package/src/App/VisibilityBar.tsx

@@ -1,103 +0,0 @@
-/*
- * Copyright (c) 2015 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-
-import {
-    autoScroll as autoScrollSelector,
-    clear,
-    toggleAutoScroll,
-} from '../Log/logSlice';
-import logger from '../logging';
-import { Toggle } from '../Toggle/Toggle';
-import useHotKey from '../utils/useHotKey';
-import {
-    isLogVisible as isLogVisibleSelector,
-    isSidePanelVisible as isSidePanelVisibleSelector,
-    toggleLogVisible,
-    toggleSidePanelVisible,
-} from './appLayout';
-
-import './visibility-bar.scss';
-
-export default ({ isSidePanelEnabled }: { isSidePanelEnabled: boolean }) => {
-    const dispatch = useDispatch();
-    const isSidePanelVisible = useSelector(isSidePanelVisibleSelector);
-    const isLogVisible = useSelector(isLogVisibleSelector);
-    const autoScroll = useSelector(autoScrollSelector);
-
-    useHotKey({
-        hotKey: ['ctrl+p', 'ctrl+n'],
-        title: 'Show side panel',
-        isGlobal: true,
-        action: () => dispatch(toggleSidePanelVisible()),
-    });
-
-    useHotKey({
-        hotKey: 'ctrl+d',
-        title: 'Clear log',
-        isGlobal: true,
-        action: () => dispatch(clear()),
-    });
-
-    useHotKey({
-        hotKey: 'ctrl+l',
-        title: 'Show log',
-        isGlobal: true,
-        action: () => dispatch(toggleLogVisible()),
-    });
-
-    return (
-        <div className="core19-visibility-bar">
-            {isSidePanelEnabled && (
-                <div className="core19-visibility-bar-show-side-panel">
-                    <Toggle
-                        id="visibility-bar-show-side-panel"
-                        label="Show side panel"
-                        title="ctrl+p or ctr+n"
-                        onToggle={() => dispatch(toggleSidePanelVisible())}
-                        isToggled={isSidePanelVisible}
-                        variant="primary"
-                    />
-                </div>
-            )}
-            <div className="core19-visibility-bar-show-log">
-                <button
-                    type="button"
-                    title="ctrl+d"
-                    className="log-button"
-                    onClick={() => dispatch(clear())}
-                >
-                    Clear log
-                </button>
-                <button
-                    type="button"
-                    className="log-button"
-                    onClick={logger.openLogFile}
-                >
-                    Open log file
-                </button>
-                <div className="flex-grow-1" />
-                <Toggle
-                    id="autoscroll-log"
-                    label="Autoscroll log"
-                    onToggle={() => dispatch(toggleAutoScroll())}
-                    isToggled={autoScroll}
-                    variant="secondary"
-                />
-                <Toggle
-                    id="visibility-bar-show-log"
-                    label="Show log"
-                    title="ctrl+l"
-                    onToggle={() => dispatch(toggleLogVisible())}
-                    isToggled={isLogVisible}
-                    variant="secondary"
-                />
-            </div>
-        </div>
-    );
-};

package/src/App/app.scss

@@ -1,83 +0,0 @@
-/*
- * Copyright (c) 2021 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-@import '../variables';
-
-.core19-app {
-    background-color: $gray-50;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-flow: column;
-}
-
-.core19-app-content {
-    display: flex;
-    flex-flow: row;
-    height: calc(100% - #{$nav-bar-height + $visibility-bar-height});
-
-    .core19-main-and-log {
-        flex: 1;
-        display: flex;
-        flex-flow: column;
-        min-width: 0;
-        position: relative;
-        background-color: $gray-100;
-
-        .core19-main-container {
-            flex: 1;
-            overflow: auto;
-
-            .carousel-inner {
-                height: 100%;
-                padding: 16px;
-
-                overflow-y: overlay;
-                @include scrollbars($gray-100);
-
-                .carousel-item {
-                    height: 100%;
-                    transition: opacity $normal-transition;
-                }
-            }
-        }
-
-        .core19-log-viewer {
-            background-color: $gray-900;
-            color: $gray-400;
-
-            overflow: hidden;
-            width: 100%;
-
-            max-height: $log-viewer-height;
-            transition: max-height $normal-transition;
-
-            &.hidden {
-                max-height: 0;
-            }
-
-            &:hover {
-                color: $gray-100;
-            }
-        }
-    }
-
-    .core19-side-panel-container {
-        width: $side-panel-width;
-        padding: 0 24px;
-        background-color: $gray-50;
-        height: 100%;
-        margin-left: 0;
-        transition: margin-left $normal-transition;
-
-        &.hidden {
-            margin-left: -$side-panel-width;
-        }
-
-        overflow-y: overlay;
-        @include scrollbars($gray-50);
-    }
-}

package/src/App/appLayout.ts

@@ -1,95 +0,0 @@
-/*
- * 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

@@ -1,49 +0,0 @@
-/*
- * 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

@@ -1,55 +0,0 @@
-/*
- * 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

@@ -1,66 +0,0 @@
-/*
- * 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

@@ -1,154 +0,0 @@
-/*
- * 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

@@ -1,26 +0,0 @@
-/*
- * 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

@@ -1,28 +0,0 @@
-/*
- * 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;
-}