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

package/src/Log/log-viewer.scss

@@ -1,24 +0,0 @@
-/*
- * Copyright (c) 2021 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-@import "../variables";
-
-.core19-log {
-    position: relative;
-    overflow: auto;
-    height: $log-viewer-height;
-
-    scroll-snap-type: y mandatory;
-
-    > div {
-        display: table;
-        min-width: 100%;
-
-        scroll-snap-align: start;
-    }
-
-    @include scrollbars($gray-900);
-}

package/src/Log/logSlice.ts

@@ -1,73 +0,0 @@
-/*
- * Copyright (c) 2021 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { LogEntry } from 'winston';
-
-import type { RootState } from '../store';
-import { getIsLoggingVerbose } from '../utils/persistentStore';
-
-const MAX_ENTRIES = 1000;
-
-export interface Log {
-    autoScroll: boolean;
-    logEntries: LogEntry[];
-    isLoggingVerbose: boolean;
-}
-
-const initialState: Log = {
-    autoScroll: true,
-    logEntries: [],
-    isLoggingVerbose: getIsLoggingVerbose(),
-};
-
-const infoEntry = () => ({
-    id: -1,
-    level: 'info',
-    timestamp: new Date().toISOString(),
-    message:
-        'The log in this view has been shortened. Open the log file to see the full content.',
-});
-
-const limitedToMaxSize = (entries: LogEntry[]) =>
-    entries.length <= MAX_ENTRIES
-        ? entries
-        : [infoEntry(), ...entries.slice(-MAX_ENTRIES)];
-
-export const autoScroll = (state: RootState) => state.log.autoScroll;
-export const logEntries = (state: RootState) => state.log.logEntries;
-let isLoggingVerboseLocal = initialState.isLoggingVerbose;
-export const isLoggingVerbose = () => isLoggingVerboseLocal;
-export const isLoggingVerboseSelector = (state: RootState) =>
-    state.log.isLoggingVerbose;
-
-const slice = createSlice({
-    name: 'log',
-    initialState,
-    reducers: {
-        addEntries: (state, action: PayloadAction<LogEntry[]>) => {
-            state.logEntries = limitedToMaxSize([
-                ...state.logEntries,
-                ...action.payload,
-            ]);
-        },
-        clear: state => {
-            state.logEntries = [];
-        },
-        toggleAutoScroll: state => {
-            state.autoScroll = !state.autoScroll;
-        },
-        toggleIsLoggingVerbose: state => {
-            state.isLoggingVerbose = !state.isLoggingVerbose;
-            isLoggingVerboseLocal = state.isLoggingVerbose;
-        },
-    },
-});
-
-export const {
-    reducer,
-    actions: { addEntries, clear, toggleAutoScroll, toggleIsLoggingVerbose },
-} = slice;

package/src/Log/syncLogToStore.ts

@@ -1,36 +0,0 @@
-/*
- * Copyright (c) 2015 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-import logger from '../logging';
-import { AppDispatch } from '../store';
-import { addEntries } from './logSlice';
-
-const addLogEntriesToStore = (dispatch: AppDispatch) => () => {
-    const entries = logger.getAndClearEntries();
-    if (entries.length > 0) {
-        dispatch(addEntries(entries));
-    }
-};
-
-/**
- * Starts syncing to new log entries from the application's log buffer.
- * Incoming entries are added to the state, so that they can be displayed
- * in the UI.
- *
- * @param {function} dispatch The redux dispatch function.
- * @returns {function(*)} Function that stops the listener.
- */
-export default (dispatch: AppDispatch) => {
-    const LOG_UPDATE_INTERVAL = 400;
-    const logListener = setInterval(
-        addLogEntriesToStore(dispatch),
-        LOG_UPDATE_INTERVAL
-    );
-
-    return () => {
-        clearInterval(logListener);
-    };
-};

package/src/Logo/Logo.tsx

@@ -1,48 +0,0 @@
-/*
- * Copyright (c) 2015 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-import React, { FC } from 'react';
-import { useSelector } from 'react-redux';
-
-import { deviceIsSelected as deviceIsSelectedSelector } from '../Device/deviceSlice';
-import { openUrl } from '../utils/open';
-import logoConnected from './nordic-logo-blue-icon-only.png';
-import logoDisconnected from './nordic-logo-gray-icon-only.png';
-import logoUniform from './nordic-logo-white-icon-only.png';
-
-import './logo.scss';
-
-const goToNRFConnectWebsite = () =>
-    openUrl('http://www.nordicsemi.com/nRFConnect');
-
-const LogoImage: FC<{ src: string }> = ({ src }) => (
-    <img
-        className="core19-logo"
-        src={src}
-        alt="Nordic Semiconductor logo"
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
-        role="link"
-        onClick={goToNRFConnectWebsite}
-        onKeyPress={() => {}}
-        tabIndex={0}
-    />
-);
-
-const DynamicLogo = () => {
-    const deviceIsSelected = useSelector(deviceIsSelectedSelector);
-
-    return (
-        <LogoImage src={deviceIsSelected ? logoConnected : logoDisconnected} />
-    );
-};
-
-const StaticLogo = () => <LogoImage src={logoUniform} />;
-
-const Logo: FC<{ changeWithDeviceState?: boolean }> = ({
-    changeWithDeviceState = false,
-}) => (changeWithDeviceState ? <DynamicLogo /> : <StaticLogo />);
-
-export default Logo;

package/src/Logo/logo.scss

@@ -1,11 +0,0 @@
-/*
- * Copyright (c) 2021 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-.core19-logo {
-    margin-right: 19px;
-    margin-left: auto;
-    cursor: pointer;
-}

package/src/Main/Main.tsx

@@ -1,13 +0,0 @@
-/*
- * Copyright (c) 2015 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-import React, { ReactNode } from 'react';
-
-import './main.scss';
-
-export default ({ children }: { children?: ReactNode }) => (
-    <div className="core19-main-view">{children}</div>
-);

package/src/Main/main.scss

@@ -1,13 +0,0 @@
-/*
- * Copyright (c) 2021 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-@import "../variables";
-
-.core19-main-view {
-    padding: 0.6em 1em;
-    background-color: $white;
-    height: 100%;
-}

package/src/MasonryLayout/MasonryLayout.tsx

@@ -1,234 +0,0 @@
-/*
- * Copyright (c) 2022 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
-
-import classNames from '../utils/classNames';
-
-import styles from './masonryLayout.module.scss';
-
-interface MasonryLayoutProperties {
-    minWidth: number;
-    className?: string;
-}
-
-interface WrappedChildrenProperties {
-    hiddenChildren: boolean[];
-    width: number;
-    columns: number;
-    minWidth: number;
-    orders: number[];
-}
-
-const WrappedChildren = ({
-    children,
-    hiddenChildren,
-    width,
-    columns,
-    minWidth,
-    orders,
-}: PropsWithChildren<WrappedChildrenProperties>) => (
-    <>
-        {React.Children.map(children, (child, i) => (
-            <div
-                data-hidden={hiddenChildren[i] === true ? 'true' : 'false'}
-                style={{
-                    width: `${width / columns}px`,
-                    minWidth,
-                    order: `${orders[i] ?? 1}`,
-                    pageBreakBefore: `${i < columns ? 'always' : 'auto'}`,
-                }}
-            >
-                {child}
-            </div>
-        ))}
-    </>
-);
-
-interface FillersProperties {
-    maxHeight: number;
-    columns: number;
-    width: number;
-    columnHeights: number[];
-}
-
-const Fillers = ({
-    maxHeight,
-    columns,
-    width,
-    columnHeights,
-}: FillersProperties) => (
-    <>
-        {columnHeights.map((h, i) =>
-            h !== maxHeight ? (
-                <div
-                    data-filler="true"
-                    key={`filler_${i + 0}`}
-                    style={{
-                        height: `${maxHeight - h}px`,
-                        order: `${i + 1}`,
-                        width: `${width / columns}px`,
-                    }}
-                />
-            ) : null
-        )}
-    </>
-);
-
-/**
- * Builds a masonry layout around all depth 1 child components.
- * Note: only depth 1 children are considered for the layout.
- * This also applies for React.Fragment wrapped components.
- * @param {number} minWidth minimum width of every item in this layout.
- * @returns {React.FC<MasonryLayoutProperties>} React Component.
- */
-export default ({
-    children,
-    minWidth,
-    className,
-}: PropsWithChildren<MasonryLayoutProperties>) => {
-    const [width, setWidth] = useState(-1);
-    const [maxHeight, setMaxHeight] = useState(0);
-    const [columns, setColumns] = useState(-1);
-    const [orders, setOrders] = useState<number[]>([]);
-    const [hiddenChildren, setHiddenChildren] = useState<boolean[]>([]);
-    const [columnHeights, setColumnHeights] = useState<number[]>([]);
-
-    const masonryLayoutRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        if (masonryLayoutRef.current === null) return;
-
-        const generateMetaData = (col: number) => {
-            let child = masonryLayoutRef.current?.firstElementChild;
-            const heightMatrix: number[][] = [];
-            const zeroHeightChildren: boolean[] = [];
-
-            let i = 0;
-            while (child) {
-                if (child instanceof HTMLElement) {
-                    if (!child.hasAttribute('data-filler')) {
-                        const rowIndex = Math.floor(i / col);
-
-                        if (heightMatrix[rowIndex] === undefined) {
-                            heightMatrix[rowIndex] = [];
-                        }
-
-                        const row = heightMatrix[rowIndex];
-                        const columnIndex = i % col;
-
-                        i += 1;
-                        if (
-                            child.offsetHeight <=
-                            Number.parseInt(styles.margin, 10)
-                        ) {
-                            row[columnIndex] = 0;
-                            zeroHeightChildren.push(true);
-                        } else {
-                            row[columnIndex] = child.offsetHeight + 1;
-                            zeroHeightChildren.push(false);
-                        }
-                    }
-
-                    child = child.nextElementSibling;
-                }
-            }
-
-            return { heightMatrix, hiddenChildren: zeroHeightChildren };
-        };
-
-        const calcData = (col: number) => {
-            const metaData = generateMetaData(col);
-            const heights: number[] = Array(col).fill(0);
-            const newOrder: number[] = [];
-
-            metaData.heightMatrix.forEach(row => {
-                row.forEach(itemHeight => {
-                    const smallest =
-                        heights.findIndex(h => h === Math.min(...heights)) ?? 0;
-                    heights[smallest] += itemHeight;
-                    newOrder.push(smallest + 1);
-                });
-            });
-
-            return {
-                maxHeight: Math.max(
-                    ...heights,
-                    masonryLayoutRef.current?.scrollHeight ?? 0
-                ),
-                order: newOrder,
-                columnHeights: heights,
-                columns: Math.min(
-                    metaData.hiddenChildren.filter(v => !v).length,
-                    col
-                ),
-                maxColums: col,
-                hiddenChildren: metaData.hiddenChildren,
-            };
-        };
-
-        const action = () => {
-            const noOfColumns = Math.floor(
-                current.clientWidth /
-                    (minWidth + Number.parseInt(styles.margin, 10))
-            );
-
-            if (current.clientWidth !== width) {
-                setWidth(current.clientWidth);
-            }
-
-            const data = calcData(noOfColumns);
-            if (data) {
-                setOrders(data.order);
-                setColumnHeights(data.columnHeights);
-                setMaxHeight(data.maxHeight);
-                setHiddenChildren(data.hiddenChildren);
-                setColumns(data.columns);
-            }
-        };
-
-        const current = masonryLayoutRef.current;
-
-        const observer = new ResizeObserver(action);
-        observer.observe(masonryLayoutRef.current);
-        const mutationObserver = new MutationObserver(action);
-        mutationObserver.observe(masonryLayoutRef.current, {
-            childList: true,
-            subtree: true,
-            attributes: true,
-        });
-
-        return () => {
-            current && observer.unobserve(current);
-            current && mutationObserver.disconnect();
-        };
-    }, [columns, maxHeight, minWidth, width]);
-
-    return (
-        <div className={styles.masonryLayoutOut}>
-            <div
-                ref={masonryLayoutRef}
-                className={classNames(styles.masonryLayout, className)}
-                style={{ maxHeight: `${maxHeight}px` }}
-            >
-                <WrappedChildren
-                    hiddenChildren={hiddenChildren}
-                    width={width}
-                    columns={columns}
-                    minWidth={minWidth}
-                    orders={orders}
-                >
-                    {children}
-                </WrappedChildren>
-                <Fillers
-                    maxHeight={maxHeight}
-                    columns={columns}
-                    width={width}
-                    columnHeights={columnHeights}
-                />
-            </div>
-        </div>
-    );
-};

package/src/MasonryLayout/masonryLayout.module.scss

@@ -1,46 +0,0 @@
-/*
- * Copyright (c) 2023 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-$margin: 8px; //px unit dependency in dropdown.tsx
-
-:export {
-    margin: $margin;
-}
-
-.masonryLayoutOut {
-    overflow-x: hidden;
-
-    .masonryLayout {
-        display: flex;
-        flex-flow: column wrap;
-        align-content: stretch;
-        height: fit-content;
-        width: calc(100% + $margin);
-        position: relative;
-        right: 4px;
-        overflow: hidden;
-
-        > div {
-            border-bottom: $margin solid transparent;
-            border-left: calc($margin / 2) solid transparent;
-            border-right: calc($margin / 2) solid transparent;
-            border-color: transparent;
-            background-clip: padding-box;
-        }
-
-        > div[data-filler='true'] {
-            border: none !important;
-            padding: 0 !important;
-            margin: 0 !important;
-        }
-
-        > div[data-hidden='true'] {
-            border-bottom: 0 !important;
-            border-left: 0 !important;
-            border-right: 0 !important;
-        }
-    }
-}

package/src/NavBar/NavBar.tsx

@@ -1,22 +0,0 @@
-/*
- * Copyright (c) 2015 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-import React, { ReactNode } from 'react';
-
-import Logo from '../Logo/Logo';
-import NavMenu from './NavMenu';
-
-import './nav-bar.scss';
-
-export default ({ deviceSelect }: { deviceSelect?: ReactNode }) => (
-    <div className="core19-nav-bar">
-        {deviceSelect && (
-            <div className="core19-nav-bar-device-selector">{deviceSelect}</div>
-        )}
-        <NavMenu />
-        <Logo changeWithDeviceState />
-    </div>
-);

package/src/NavBar/NavMenu.test.tsx

@@ -1,41 +0,0 @@
-/*
- * Copyright (c) 2015 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-import React from 'react';
-import { screen } from '@testing-library/react';
-
-import render from '../../test/testrenderer';
-import { setPanes } from '../App/appLayout';
-import NavMenu from './NavMenu';
-
-const aPane = {
-    name: 'an menu item',
-    Main: () => <div>A pane</div>,
-};
-const anotherPane = {
-    name: 'another menu item',
-    Main: () => <div>Another pane</div>,
-};
-
-expect.extend({
-    toBeHighlighted(element) {
-        const pass = element.classList.contains('selected');
-        const not = pass ? 'not ' : '';
-        const message = () =>
-            `Expected the element to ${not}contain a class 'selected' to signify that ` +
-            `it is ${not}highlighted. It actually contained: ${element.className}`;
-        return { pass, message };
-    },
-});
-
-describe('NavMenu', () => {
-    it('displays multiple items', () => {
-        render(<NavMenu />, [setPanes([aPane, anotherPane])]);
-
-        expect(screen.getByText('an menu item')).toBeInTheDocument();
-        expect(screen.getByText('another menu item')).toBeInTheDocument();
-    });
-});

package/src/NavBar/NavMenu.tsx

@@ -1,53 +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 {
-    currentPane as currentPaneSelector,
-    paneNames as paneNamesSelector,
-    switchToNextPane,
-    switchToPreviousPane,
-} from '../App/appLayout';
-import useHotKey from '../utils/useHotKey';
-import NavMenuItem from './NavMenuItem';
-
-const NavMenu = () => {
-    const currentPane = useSelector(currentPaneSelector);
-    const paneNames = useSelector(paneNamesSelector);
-    const dispatch = useDispatch();
-
-    useHotKey({
-        hotKey: 'ctrl+tab',
-        title: 'Switch pane right',
-        isGlobal: true,
-        action: () => dispatch(switchToNextPane()),
-    });
-
-    useHotKey({
-        hotKey: 'ctrl+shift+tab',
-        title: 'Switch pane left',
-        isGlobal: true,
-        action: () => dispatch(switchToPreviousPane()),
-    });
-
-    return (
-        <div data-testid="nav-menu">
-            {paneNames.map((name, index: number) => (
-                <NavMenuItem
-                    key={name}
-                    index={index}
-                    isFirst={index === 0}
-                    isSelected={currentPane === index}
-                    label={name}
-                />
-            ))}
-        </div>
-    );
-};
-
-export default NavMenu;

package/src/NavBar/NavMenuItem.tsx

@@ -1,41 +0,0 @@
-/*
- * Copyright (c) 2015 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-import React, { FC } from 'react';
-import { useDispatch } from 'react-redux';
-
-import { setCurrentPane } from '../App/appLayout';
-import Button from '../Button/Button';
-import classNames from '../utils/classNames';
-
-import './nav-menu-item.scss';
-
-interface Props {
-    index: number;
-    isFirst: boolean;
-    isSelected: boolean;
-    label: string;
-}
-
-const NavMenuItem: FC<Props> = ({ index, isFirst, isSelected, label }) => {
-    const dispatch = useDispatch();
-
-    return (
-        <Button
-            variant="custom"
-            className={classNames(
-                'core19-nav-menu-item',
-                isSelected && 'selected',
-                isFirst && 'first'
-            )}
-            onClick={() => dispatch(setCurrentPane(index))}
-        >
-            {label}
-        </Button>
-    );
-};
-
-export default NavMenuItem;

package/src/NavBar/nav-bar.scss

@@ -1,26 +0,0 @@
-/*
- * Copyright (c) 2021 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-@import "../variables";
-
-.core19-nav-bar {
-    width: 100%;
-    height: $nav-bar-height;
-
-    background-color: $white;
-
-    display: flex;
-    flex: none;
-    flex-direction: row;
-    align-items: center;
-
-    z-index: 100;
-
-    .core19-nav-bar-device-selector {
-        width: $side-panel-width;
-        align-self: start;
-    }
-}