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

package/src/App/VisibilityBar.tsx

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

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

@@ -0,0 +1,94 @@
+/*
+ * 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;
+}
+
+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/preflight.scss

@@ -0,0 +1,443 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+/**
+ * Use to "reset" bootstrap and user agent styles. Used to gradually move to tailwind from css and bootstrap.
+ * Replaces preflight from the config (so it is not applied globally)
+ *
+ * Usage:
+ *   1. Find an area that want to rewrite with tailwind
+ *   2. Apply .tw-preflight class at the top of DOM tree of that area
+ *   3. Rewrite all elements down this point using Tailwind
+ *   ...
+ *   N. when all styles are rewritten with Tailwind, remove this class and all it's occurrences from the project,
+ *      then enable preflight globally in tailwind.config.js
+ *   N+1. You're awesome!
+ *
+ * Copy of https://github.com/tailwindlabs/tailwindcss/blob/master/src/css/preflight.css
+ **/
+.tw-preflight {
+    /*
+        1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+        2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+    */
+
+    *,
+    ::before,
+    ::after,
+    &,
+    &::before,
+    &::after {
+        box-sizing: border-box; /* 1 */
+        border-width: 0; /* 2 */
+        border-style: solid; /* 2 */
+        border-color: theme('borderColor.DEFAULT', currentColor); /* 2 */
+    }
+
+    ::before,
+    ::after,
+    &::before,
+    &::after {
+        --tw-content: '';
+    }
+
+    /*
+    1. Use a consistent sensible line-height in all browsers.
+    2. Prevent adjustments of font size after orientation changes in iOS.
+    3. Use a more readable tab size.
+    4. Use the user's configured `sans` font-family by default.
+    5. Use the user's configured `sans` font-feature-settings by default.
+    6. Use the user's configured `sans` font-variation-settings by default.
+    */
+
+    html,
+    &:is(html) {
+        line-height: 1.5; /* 1 */
+        -webkit-text-size-adjust: 100%; /* 2 */
+        -moz-tab-size: 4; /* 3 */
+        tab-size: 4; /* 3 */
+        font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */
+        font-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings', normal); /* 5 */
+        font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings', normal); /* 6 */
+    }
+
+    /*
+    1. Remove the margin in all browsers.
+    2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+    */
+
+    body,
+    &:is(body) {
+        margin: 0; /* 1 */
+        line-height: inherit; /* 2 */
+    }
+
+    /*
+    1. Add the correct height in Firefox.
+    2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+    3. Ensure horizontal rules are visible by default.
+    */
+
+    hr,
+    &:is(hr) {
+        height: 0; /* 1 */
+        color: inherit; /* 2 */
+        border-top-width: 1px; /* 3 */
+    }
+
+    /*
+    Add the correct text decoration in Chrome, Edge, and Safari.
+    */
+
+    abbr:where([title]),
+    &:is(abbr):where([title]) {
+        text-decoration: underline dotted;
+    }
+
+    /*
+    Remove the default font size and weight for headings.
+    */
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    &:is(h1, h2, h3, h4, h5, h6) {
+        font-size: inherit;
+        font-weight: inherit;
+    }
+
+    /*
+    Reset links to optimize for opt-in styling instead of opt-out.
+    */
+
+    a,
+    &:is(a) {
+        color: inherit;
+        text-decoration: inherit;
+    }
+
+    /*
+    Add the correct font weight in Edge and Safari.
+    */
+
+    b,
+    strong,
+    &:is(b, strong) {
+        font-weight: bolder;
+    }
+
+    /*
+    1. Use the user's configured `mono` font family by default.
+    2. Correct the odd `em` font sizing in all browsers.
+    */
+
+    code,
+    kbd,
+    samp,
+    pre,
+    &:is(code, kbd, samp, pre) {
+        font-family: theme('fontFamily.mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); /* 1 */
+        font-size: 1em; /* 2 */
+    }
+
+    /*
+    Add the correct font size in all browsers.
+    */
+
+    small,
+    &:is(small) {
+        font-size: 80%;
+    }
+
+    /*
+    Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+    */
+
+    sub,
+    sup,
+    &:is(sub, sup) {
+        font-size: 75%;
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline;
+    }
+
+    sub,
+    &:is(sub) {
+        bottom: -0.25em;
+    }
+
+    sup,
+    &:is(sup) {
+        top: -0.5em;
+    }
+
+    /*
+    1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+    2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+    3. Remove gaps between table borders by default.
+    */
+
+    table,
+    &:is(table) {
+        text-indent: 0; /* 1 */
+        border-color: inherit; /* 2 */
+        border-collapse: collapse; /* 3 */
+    }
+
+    /*
+    1. Change the font styles in all browsers.
+    2. Remove the margin in Firefox and Safari.
+    3. Remove default padding in all browsers.
+    */
+
+    button,
+    input,
+    optgroup,
+    select,
+    textarea,
+    &:is(button, input, optgroup, select, textarea) {
+        font-family: inherit; /* 1 */
+        font-feature-settings: inherit; /* 1 */
+        font-variation-settings: inherit; /* 1 */
+        font-size: 100%; /* 1 */
+        font-weight: inherit; /* 1 */
+        line-height: inherit; /* 1 */
+        color: inherit; /* 1 */
+        margin: 0; /* 2 */
+        padding: 0; /* 3 */
+    }
+
+    /*
+    Remove the inheritance of text transform in Edge and Firefox.
+    */
+
+    button,
+    select,
+    &:is(button, select) {
+        text-transform: none;
+    }
+
+    /*
+    1. Correct the inability to style clickable types in iOS and Safari.
+    2. Remove default button styles.
+    */
+
+    button,
+    [type='button'],
+    [type='reset'],
+    [type='submit'],
+    &:is(button),
+    &:where([type='button'], [type='reset'], [type='submit']) {
+        -webkit-appearance: button; /* 1 */
+        background-color: transparent; /* 2 */
+        background-image: none; /* 2 */
+    }
+
+    /*
+    Use the modern Firefox focus style for all focusable elements.
+    */
+
+    :-moz-focusring,
+    &:-moz-focusring {
+        outline: auto;
+    }
+
+    /*
+    Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+    */
+
+    :-moz-ui-invalid,
+    &:-moz-ui-invalid {
+        box-shadow: none;
+    }
+
+    /*
+    Add the correct vertical alignment in Chrome and Firefox.
+    */
+
+    progress,
+    &:is(progress) {
+        vertical-align: baseline;
+    }
+
+    /*
+    Correct the cursor style of increment and decrement buttons in Safari.
+    */
+
+    ::-webkit-inner-spin-button,
+    ::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+        height: auto;
+    }
+
+    /*
+    1. Correct the odd appearance in Chrome and Safari.
+    2. Correct the outline style in Safari.
+    */
+
+    [type='search'],
+    &[type='search'] {
+        -webkit-appearance: textfield; /* 1 */
+        outline-offset: -2px; /* 2 */
+    }
+
+    /*
+    Remove the inner padding in Chrome and Safari on macOS.
+    */
+
+    ::-webkit-search-decoration,
+    &::-webkit-search-decoration {
+        -webkit-appearance: none;
+    }
+
+    /*
+    1. Correct the inability to style clickable types in iOS and Safari.
+    2. Change font properties to `inherit` in Safari.
+    */
+
+    ::-webkit-file-upload-button,
+    &::-webkit-file-upload-button {
+        -webkit-appearance: button; /* 1 */
+        font: inherit; /* 2 */
+    }
+
+    /*
+    Add the correct display in Chrome and Safari.
+    */
+
+    summary,
+    &:is(summary) {
+        display: list-item;
+    }
+
+    /*
+    Removes the default spacing for appropriate elements.
+    */
+
+    blockquote,
+    dl,
+    dd,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    hr,
+    figure,
+    p,
+    pre,
+    &:is(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre) {
+        margin: 0;
+    }
+
+    fieldset,
+    &:is(fieldset) {
+        margin: 0;
+        padding: 0;
+    }
+
+    legend,
+    &:is(legend) {
+        padding: 0;
+    }
+
+    ol,
+    ul,
+    menu,
+    &:is(ol, ul, menu) {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    dialog,
+    &:is(dialog) {
+        padding: 0;
+    }
+
+    /*
+    Prevent resizing textareas horizontally by default.
+    */
+
+    textarea,
+    &:is(textarea) {
+        resize: vertical;
+    }
+
+    /*
+    1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+    2. Set the default placeholder color to the user's configured gray 400 color.
+    */
+
+    input::placeholder,
+    textarea::placeholder,
+    &:is(input, textarea):where([placeholder]) {
+        opacity: 1; /* 1 */
+        color: theme('colors.gray.400', #9ca3af); /* 2 */
+    }
+
+    /*
+    Set the default cursor for buttons.
+    */
+
+    button,
+    [role="button"],
+    &:is(button),
+    &[role="button"] {
+        cursor: pointer;
+    }
+
+    /*
+    Make sure disabled buttons don't get the pointer cursor.
+    */
+    :disabled,
+    &:disabled {
+        cursor: default;
+    }
+
+    /*
+    1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+    2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+       This can trigger a poorly considered lint error in some tools but is included by design.
+    */
+
+    img,
+    svg,
+    video,
+    canvas,
+    audio,
+    iframe,
+    embed,
+    object,
+    &:is(img, svg, video, canvas, audio, iframe, embed, object) {
+        display: block; /* 1 */
+        vertical-align: middle; /* 2 */
+    }
+
+    /*
+    Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+    */
+
+    img,
+    video,
+    &:is(img, video) {
+        max-width: 100%;
+        height: auto;
+    }
+
+    /* Make elements with the HTML hidden attribute stay hidden by default */
+    [hidden],
+    &:where([hidden]) {
+        display: none;
+    }
+
+}