@nordicsemiconductor/pc-nrfconnect-shared 60.0.0-pre1

package/src/SerialPort/SerialPort.ts

@@ -0,0 +1,202 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import type {
+    AutoDetectTypes,
+    SetOptions,
+    UpdateOptions,
+} from '@serialport/bindings-cpp';
+import { ipcRenderer } from 'electron';
+import EventEmitter from 'events';
+import type { SerialPortOpenOptions } from 'serialport';
+
+import { OverwriteOptions, SERIALPORT_CHANNEL } from '../../main';
+import logger from '../logging';
+
+export type SerialPort = Awaited<ReturnType<typeof createSerialPort>>;
+
+export const createSerialPort = async (
+    options: SerialPortOpenOptions<AutoDetectTypes>,
+    overwriteOptions: OverwriteOptions = {
+        overwrite: false,
+        settingsLocked: false,
+    }
+) => {
+    const { path } = options;
+    const eventEmitter = new EventEmitter();
+    let closed = false;
+
+    ipcRenderer.on(`${SERIALPORT_CHANNEL.ON_DATA}_${path}`, (_event, data) =>
+        eventEmitter.emit('onData', data)
+    );
+    ipcRenderer.on(`${SERIALPORT_CHANNEL.ON_CLOSED}_${path}`, () => {
+        eventEmitter.emit('onClosed');
+        closed = true;
+    });
+    ipcRenderer.on(
+        `${SERIALPORT_CHANNEL.ON_UPDATE}_${path}`,
+        (_event, newOptions) => eventEmitter.emit('onUpdate', newOptions)
+    );
+    ipcRenderer.on(
+        `${SERIALPORT_CHANNEL.ON_SET}_${path}`,
+        (_event, newOptions) => eventEmitter.emit('onSet', newOptions)
+    );
+    ipcRenderer.on(
+        `${SERIALPORT_CHANNEL.ON_CHANGED}_${path}`,
+        (_event, newOptions) => eventEmitter.emit('onChange', newOptions)
+    );
+
+    // The origin of this event is emitted when a renderer writes to the port.
+    ipcRenderer.on(`${SERIALPORT_CHANNEL.ON_WRITE}_${path}`, (_event, data) =>
+        eventEmitter.emit('onDataWritten', data)
+    );
+
+    const write = (data: string | number[] | Buffer): void => {
+        ipcRenderer.invoke(SERIALPORT_CHANNEL.WRITE, path, data);
+    };
+
+    const isOpen = (): Promise<boolean> =>
+        ipcRenderer.invoke(SERIALPORT_CHANNEL.IS_OPEN, path);
+
+    const close = async () => {
+        if (closed) return;
+        const error = await ipcRenderer.invoke(SERIALPORT_CHANNEL.CLOSE, path);
+        if (error) {
+            // IPC only carries the error message, that's why we throw new Error.
+            throw new Error(error);
+        }
+
+        try {
+            if (await isOpen()) {
+                logger.info(
+                    `Port ${options.path} still in use by other window(s)`
+                );
+            }
+        } catch {
+            logger.info(`Closed port: ${options.path}`);
+        }
+    };
+
+    // Only supports baudRate, same as serialport.io
+    const update = (newOptions: UpdateOptions) => {
+        ipcRenderer.invoke(SERIALPORT_CHANNEL.UPDATE, path, newOptions);
+    };
+
+    const set = (newOptions: SetOptions) => {
+        ipcRenderer.invoke(SERIALPORT_CHANNEL.SET, path, newOptions);
+    };
+
+    const getOptions = ():
+        | Promise<SerialPortOpenOptions<AutoDetectTypes>>
+        | undefined => ipcRenderer.invoke(SERIALPORT_CHANNEL.GET_OPTIONS, path);
+
+    const openWithRetries = async (retryCount: number) => {
+        try {
+            return (await ipcRenderer.invoke(
+                SERIALPORT_CHANNEL.OPEN,
+                options,
+                overwriteOptions
+            )) as string;
+        } catch (error) {
+            if (
+                (error as Error).message.includes(
+                    'PORT_IS_ALREADY_BEING_OPENED'
+                ) &&
+                retryCount > 0
+            ) {
+                return new Promise<string>(resolve => {
+                    setTimeout(async () => {
+                        resolve(
+                            (await openWithRetries(retryCount - 1)) as string
+                        );
+                    }, 50 + Math.random() * 100);
+                });
+            }
+            return Promise.resolve<string>((error as Error).message);
+        }
+    };
+
+    const error = await openWithRetries(3);
+
+    if (error) {
+        if (error.includes('FAILED_DIFFERENT_SETTINGS')) {
+            logger.warn(
+                `Failed to connect to port: ${path}. Port is open with different settings.`
+            );
+        } else {
+            logger.error(
+                `Failed to connect to port: ${path}. Make sure the port is not already taken, if you are not sure, try to power cycle the device and try to connect again.`
+            );
+        }
+        throw new Error(error);
+    } else {
+        logger.info(`Opened port with options: ${JSON.stringify(options)}`);
+    }
+
+    return {
+        path,
+        write,
+        close,
+        isOpen,
+        update,
+        set,
+        getOptions,
+        onData: (handler: (data: Uint8Array) => void) => {
+            eventEmitter.on('onData', handler);
+            return () => {
+                eventEmitter.removeListener('onData', handler);
+            };
+        },
+        onClosed: (handler: () => void) => {
+            eventEmitter.on('onClosed', handler);
+            return () => {
+                eventEmitter.removeListener('onClosed', handler);
+            };
+        },
+        onUpdate: (handler: (newOptions: UpdateOptions) => void) => {
+            eventEmitter.on('onUpdate', handler);
+            return () => {
+                eventEmitter.removeListener('onUpdate', handler);
+            };
+        },
+        onSet: (handler: (newOptions: SetOptions) => void) => {
+            eventEmitter.on('onSet', handler);
+            return () => {
+                eventEmitter.removeListener('onSet', handler);
+            };
+        },
+        onChange: (
+            handler: (
+                newOptions: SerialPortOpenOptions<AutoDetectTypes>
+            ) => void
+        ) => {
+            eventEmitter.on('onChange', handler);
+            return () => {
+                eventEmitter.removeListener('onChange', handler);
+            };
+        },
+        onDataWritten: (handler: (data: Uint8Array) => void) => {
+            eventEmitter.on('onDataWritten', handler);
+            return () => {
+                eventEmitter.removeListener('onDataWritten', handler);
+            };
+        },
+    };
+};
+
+export const getSerialPortOptions = async (
+    path: string
+): Promise<SerialPortOpenOptions<AutoDetectTypes> | undefined> => {
+    try {
+        console.log('will fetch options from path=', path);
+        return (await ipcRenderer.invoke(
+            SERIALPORT_CHANNEL.GET_OPTIONS,
+            path
+        )) as SerialPortOpenOptions<AutoDetectTypes> | undefined;
+    } catch (error) {
+        logger.error(`Failed to get options for port: ${path}`);
+    }
+};

package/src/Shortcuts/Shortcut-item.scss

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../variables.scss';
+
+.shortcut-item {
+    border-top: 1px solid $gray-100;
+    padding-top: 20px;
+    overflow: auto;
+    .shortcut-title {
+        display: inline;
+    }
+    .shortcuts {
+        float: right;
+        .shortcut-element {
+            display: 'block';
+            margin-bottom: 20px;
+            .shortcut-span {
+                background-color: $gray-100;
+                padding: 8px;
+                border-radius: 5px;
+                box-shadow: 0 2px $gray-200;
+            }
+            .separator-span {
+                background-color: $white;
+                padding: 8px;
+            }
+        }
+    }
+}

package/src/Shortcuts/Shortcut-modal.scss

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../variables.scss';
+
+.shortcut-modal {
+    color: $gray-900;
+    .list-header {
+        margin-bottom: 20px;
+    }
+    .shortcut-lists {
+        margin: 10px 20px;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        column-gap: 10ex;
+    }
+}

package/src/Shortcuts/ShortcutItem.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { FC } from 'react';
+
+import './Shortcut-item.scss';
+
+export interface Props {
+    title: string;
+    hotKey: string[] | string;
+}
+
+const ShortcutItem: FC<Props> = ({ title, hotKey }) => {
+    const shortcutComboKeys: string[][] = !Array.isArray(hotKey)
+        ? [hotKey.split('+')]
+        : hotKey.map(element => element.split('+'));
+
+    return (
+        <div className="shortcut-item">
+            <h5 className="shortcut-title">{title}</h5>
+            <div className="shortcuts">
+                {shortcutComboKeys.map(shortcutKeys => (
+                    <div
+                        key={shortcutKeys.toString()}
+                        className="shortcut-element"
+                    >
+                        {shortcutKeys.map(shortcutKey => (
+                            <span key={shortcutKey}>
+                                <span className="shortcut-span">
+                                    {shortcutKey}
+                                </span>
+                                {shortcutKey !==
+                                    shortcutKeys[shortcutKeys.length - 1] && (
+                                    <span className="separator-span">+</span>
+                                )}
+                            </span>
+                        ))}
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default ShortcutItem;

package/src/Shortcuts/ShortcutModal.tsx

@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { FC } from 'react';
+import Modal from 'react-bootstrap/Modal';
+import { useSelector } from 'react-redux';
+
+import { globalShortcuts, localShortcuts } from '../About/shortcutSlice';
+import ShortcutItem from './ShortcutItem';
+
+import './Shortcut-modal.scss';
+
+export interface Props {
+    isVisible: boolean;
+    onCancel: () => void;
+}
+
+const ShortcutModal: FC<Props> = ({ isVisible, onCancel }) => {
+    const local = useSelector(localShortcuts);
+    const global = useSelector(globalShortcuts);
+
+    return (
+        <Modal
+            show={isVisible}
+            onHide={onCancel}
+            size="lg"
+            className="shortcut-modal"
+        >
+            <Modal.Header closeButton>
+                <Modal.Title>
+                    <h3>Shortcuts</h3>
+                </Modal.Title>
+            </Modal.Header>
+            <Modal.Body className="shortcut-lists">
+                <>
+                    {local.length > 0 && (
+                        <div>
+                            <h4 className="list-header">In this app</h4>
+                            {local.map(shortcut => (
+                                <ShortcutItem
+                                    key={shortcut.title}
+                                    title={shortcut.title}
+                                    hotKey={shortcut.hotKey}
+                                />
+                            ))}
+                        </div>
+                    )}
+                    <div>
+                        <h4 className="list-header">In all apps</h4>
+                        {global.map(shortcut => (
+                            <ShortcutItem
+                                key={shortcut.title}
+                                title={shortcut.title}
+                                hotKey={shortcut.hotKey}
+                            />
+                        ))}
+                    </div>
+                </>
+            </Modal.Body>
+        </Modal>
+    );
+};
+
+export default ShortcutModal;

package/src/SidePanel/Group.tsx

@@ -0,0 +1,106 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { useContext, useRef } from 'react';
+import Accordion from 'react-bootstrap/Accordion';
+import AccordionContext from 'react-bootstrap/AccordionContext';
+import { useAccordionToggle } from 'react-bootstrap/AccordionToggle';
+
+import PseudoButton from '../PseudoButton/PseudoButton';
+import classNames from '../utils/classNames';
+
+import './group.scss';
+
+const Heading = ({ label, title }: { label?: string; title?: string }) =>
+    label == null ? null : (
+        <h2 className="heading" title={title}>
+            {label}
+        </h2>
+    );
+
+const ContextAwareToggle = ({
+    heading,
+    title,
+    eventKey,
+    onToggled,
+}: {
+    heading: string;
+    title?: string;
+    eventKey: string;
+    onToggled?: ((isNowExpanded: boolean) => void) | null;
+}) => {
+    const currentEventKey = useContext(AccordionContext);
+    const isCurrentEventKey = currentEventKey === eventKey;
+    const decoratedOnClick = useAccordionToggle(
+        eventKey,
+        () => onToggled && onToggled(!isCurrentEventKey)
+    );
+
+    return (
+        <PseudoButton
+            onClick={decoratedOnClick}
+            className={classNames('group-toggle', isCurrentEventKey && 'show')}
+        >
+            <Heading label={heading} title={title} />
+            <span className="mdi mdi-chevron-down" />
+        </PseudoButton>
+    );
+};
+
+export const CollapsibleGroup = ({
+    className = '',
+    heading,
+    title,
+    children = null,
+    defaultCollapsed = true,
+    onToggled,
+}: {
+    className?: string;
+    heading: string;
+    title?: string;
+    children?: React.ReactNode;
+    defaultCollapsed?: boolean | null;
+    onToggled?: ((isNowExpanded: boolean) => void) | null;
+}) => {
+    const eventKey = useRef(Math.random().toString());
+
+    return (
+        <div className={`sidepanel-group ${className}`}>
+            <Accordion
+                defaultActiveKey={defaultCollapsed ? '' : eventKey.current}
+            >
+                <div className="collapse-container">
+                    <ContextAwareToggle
+                        heading={heading}
+                        title={title}
+                        eventKey={eventKey.current}
+                        onToggled={onToggled}
+                    />
+                    <Accordion.Collapse eventKey={eventKey.current}>
+                        <div className="body">{children}</div>
+                    </Accordion.Collapse>
+                </div>
+            </Accordion>
+        </div>
+    );
+};
+
+export const Group = ({
+    className = '',
+    heading,
+    title,
+    children,
+}: {
+    className?: string;
+    heading?: string;
+    title?: string;
+    children?: React.ReactNode;
+}) => (
+    <div className={`sidepanel-group ${className}`}>
+        <Heading label={heading} title={title} />
+        <div className="body">{children}</div>
+    </div>
+);

package/src/SidePanel/SidePanel.tsx

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+
+import './sidepanel.scss';
+
+const SidePanel = ({
+    children,
+    className = '',
+}: {
+    children?: React.ReactNode;
+    className?: string;
+}) => <div className={`core19-side-panel ${className}`}>{children}</div>;
+
+export default SidePanel;

package/src/SidePanel/group.scss

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+.sidepanel-group {
+    .body {
+        > * {
+            margin-bottom: 8px;
+        }
+
+        > *:last-child {
+            margin-bottom: 0px;
+        }
+    }
+
+    .heading {
+        margin-bottom: 16px;
+
+        font-size: 10px;
+        font-weight: normal;
+        letter-spacing: 0.5ex;
+
+        text-transform: uppercase;
+    }
+
+    .group-toggle {
+        display: flex;
+        justify-content: space-between;
+
+        .mdi-chevron-down::before {
+            font-size: 20px;
+            position: relative;
+            top: -9px;
+        }
+
+        &.show .mdi-chevron-down::before {
+            transform: rotate(180deg);
+        }
+    }
+}

package/src/SidePanel/sidepanel.scss

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../variables';
+
+.core19-side-panel {
+    font-size: 12px;
+    color: $gray-700;
+
+    > * {
+        margin-top: 32px;
+
+        &:last-child {
+            margin-bottom: 32px;
+        }
+    }
+}

package/src/Slider/Bar.tsx

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { FC } from 'react';
+
+import './bar.scss';
+
+const Bar: FC<{ start: number; end: number }> = ({ start, end }) => (
+    <>
+        <div className="bar background" />
+        <div
+            className="bar foreground"
+            style={{
+                left: `${start}%`,
+                width: `${end - start}%`,
+            }}
+        />
+    </>
+);
+
+export default Bar;

package/src/Slider/Factor.test.ts

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import { isFactor } from './factor';
+
+describe('Factor', () => {
+    it('Test valid integer factors ', () => {
+        expect(isFactor(20, 5)).toBe(true);
+        expect(isFactor(28, 2)).toBe(true);
+        expect(isFactor(27, 3)).toBe(true);
+        expect(isFactor(27, 9)).toBe(true);
+        expect(isFactor(144, 12)).toBe(true);
+        expect(isFactor(21, 7)).toBe(true);
+    });
+
+    it('Test invalid integer factors ', () => {
+        expect(isFactor(20, 6)).toBe(false);
+        expect(isFactor(28, 3)).toBe(false);
+        expect(isFactor(27, 4)).toBe(false);
+        expect(isFactor(27, 10)).toBe(false);
+        expect(isFactor(144, 11)).toBe(false);
+        expect(isFactor(21, 8)).toBe(false);
+    });
+
+    it('Test valid decimal factors ', () => {
+        expect(isFactor(0.15, 0.05)).toBe(true);
+        expect(isFactor(0.2331, 0.0001)).toBe(true);
+        expect(isFactor(0.22, 0.02)).toBe(true);
+        expect(isFactor(0.2, 0.02)).toBe(true);
+        expect(isFactor(144.05, 0.01)).toBe(true);
+        expect(isFactor(74.8706915963, 37.43534579815)).toBe(true);
+        expect(isFactor(0.333333333, 0.3)).toBe(true);
+        expect(isFactor(0.2331, 0.1)).toBe(true);
+    });
+
+    it('Test invalid decimal factors ', () => {
+        expect(isFactor(0.16, 0.05)).toBe(false);
+        expect(isFactor(0.2331, 0.0002)).toBe(false);
+        expect(isFactor(0.22, 0.03)).toBe(false);
+        expect(isFactor(0.2, 0.06)).toBe(false);
+        expect(isFactor(144.05, 0.08)).toBe(false);
+        expect(isFactor(0.3433333333, 0.03)).toBe(false);
+        expect(isFactor(74.8806915963, 37.43534579815)).toBe(false);
+    });
+});