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

package/src/NavBar/NavMenu.test.tsx

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

@@ -0,0 +1,52 @@
+/*
+ * 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" className="d-flex ml-3 flex-wrap">
+            {paneNames.map((name, index: number) => (
+                <NavMenuItem
+                    key={name}
+                    index={index}
+                    isSelected={currentPane === index}
+                    label={name}
+                />
+            ))}
+        </div>
+    );
+};
+
+export default NavMenu;

package/src/NavBar/NavMenuItem.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 classNames from '../utils/classNames';
+
+import './nav-menu-item.scss';
+
+interface Props {
+    index: number;
+    isSelected: boolean;
+    label: string;
+}
+
+const NavMenuItem: FC<Props> = ({ index, isSelected, label }) => {
+    const dispatch = useDispatch();
+
+    return (
+        <button
+            type="button"
+            className={classNames(
+                'core19-nav-menu-item',
+                isSelected && 'selected',
+                'mr-4'
+            )}
+            onClick={() => dispatch(setCurrentPane(index))}
+        >
+            {label}
+        </button>
+    );
+};
+
+export default NavMenuItem;

package/src/NavBar/nav-bar.scss

@@ -0,0 +1,27 @@
+/*
+ * 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;
+        min-width: $side-panel-width;
+        align-self: start;
+    }
+}

package/src/NavBar/nav-menu-item.scss

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../variables';
+
+.core19-nav-menu-item {
+    border: none;
+    background: none;
+
+    padding: 0;
+
+    font-size: 14px;
+    font-weight: $font-weight-light;
+    color: $gray-700;
+    text-transform: uppercase;
+
+    &.selected {
+        font-weight: $font-weight-bold;
+    }
+
+    &:focus,
+    &:hover {
+        text-decoration: none;
+        color: inherit;
+    }
+}

package/src/NumberInputWithSlider/NumberInputSliderWithUnit.tsx

@@ -0,0 +1,74 @@
+/*
+ * Copyright (c) 2023 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+
+import NumberInlineInput from '../InlineInput/NumberInlineInput';
+import { RangeOrValues } from '../Slider/range';
+import Slider from '../Slider/Slider';
+import classNames from '../utils/classNames';
+
+export default ({
+    range,
+    value,
+    onChange,
+    onChangeComplete,
+    className,
+    disabled,
+    label,
+    unit,
+}: {
+    range: RangeOrValues;
+    value: number;
+    onChange: (value: number) => void;
+    onChangeComplete?: (value: number) => void;
+    className?: string;
+    disabled?: boolean;
+    label?: React.ReactNode;
+    unit?: React.ReactNode;
+}) => (
+    <div
+        className={`tw-flex tw-flex-col tw-gap-1 tw-text-xs ${classNames(
+            className
+        )}`}
+    >
+        {label && (
+            <div className="tw-flex tw-justify-between">
+                {label}
+                <div className="tw-flex tw-flex-row">
+                    <NumberInlineInput
+                        value={value}
+                        range={range}
+                        onChange={onChange}
+                        onChangeComplete={onChangeComplete}
+                        disabled={disabled}
+                    />
+                    {unit}
+                </div>
+            </div>
+        )}
+        {Array.isArray(range) ? (
+            <Slider
+                values={[range.indexOf(value)]}
+                onChange={[i => onChange(range[i])]}
+                onChangeComplete={() => onChangeComplete?.(value)}
+                range={{
+                    min: 0,
+                    max: range.length - 1,
+                }}
+                disabled={disabled}
+            />
+        ) : (
+            <Slider
+                values={[value]}
+                onChange={[onChange]}
+                onChangeComplete={() => onChangeComplete?.(value)}
+                range={range}
+                disabled={disabled}
+            />
+        )}
+    </div>
+);

package/src/Panes/FeedbackPane.tsx

@@ -0,0 +1,184 @@
+/*
+ * Copyright (c) 2023 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { useMemo, useState } from 'react';
+
+import Button from '../Button/Button';
+import Dropdown, { DropdownItem } from '../Dropdown/Dropdown';
+import logger from '../logging';
+import { isDevelopment } from '../utils/environment';
+import packageJson from '../utils/packageJson';
+
+export interface FeedbackPaneProps {
+    categories?: string[];
+}
+
+export default ({ categories }: FeedbackPaneProps) => {
+    const [feedback, setFeedback] = useState('');
+    const [sayThankYou, setSayThankYou] = useState(false);
+
+    const categoryItems = useMemo(() => {
+        if (!categories?.length) return undefined;
+
+        const items = ['Select a category', ...categories].map(category => ({
+            label: category,
+            value: category,
+        }));
+        return items;
+    }, [categories]);
+
+    const [selectedCategory, setSelectedCategory] = useState<
+        DropdownItem | undefined
+    >(categoryItems ? categoryItems[0] : undefined);
+
+    if (sayThankYou === true) {
+        return (
+            <div className="tw-preflight tw-flex tw-w-full tw-justify-center">
+                <div className="tw-mb-3 tw-flex tw-flex-col tw-items-start tw-justify-center tw-bg-white tw-px-3 tw-py-4">
+                    <b className="tw-mb-3">Thank you!</b>
+                    <section>
+                        <p>
+                            We value your feedback and any ideas you may have
+                            for improving our applications.
+                        </p>
+                        <p>
+                            Click the button below in order to send more
+                            feedback.
+                        </p>
+                    </section>
+                    <Button
+                        large
+                        className="tw-align-self-end tw-self-end"
+                        onClick={() => {
+                            setSayThankYou(false);
+                            setFeedback('');
+                        }}
+                        variant="secondary"
+                    >
+                        Give more feedback
+                    </Button>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="tw-preflight tw-flex tw-w-full tw-justify-center">
+            <div className="tw-mb-3 tw-flex tw-flex-col tw-items-start tw-justify-center tw-gap-4 tw-bg-white tw-px-3 tw-py-4">
+                <b>Give Feedback</b>
+                <p>
+                    We value your feedback and any ideas you may have for
+                    improving our applications. Please use the form below to
+                    give feedback.
+                </p>
+                <p>
+                    Note: this is not a support channel, and you will not
+                    receive a response. For help and support, visit the{' '}
+                    <a
+                        href="https://devzone.nordicsemi.com/"
+                        target="_blank"
+                        rel="noreferrer noopener"
+                        className="tw-text-nordicBlue"
+                    >
+                        Nordic DevZone
+                    </a>
+                    .
+                </p>
+                <form className="tw-flex tw-w-full tw-flex-col tw-gap-4">
+                    {categoryItems?.length && (
+                        <div className="tw-w-52">
+                            <Dropdown
+                                items={categoryItems}
+                                onSelect={setSelectedCategory}
+                                selectedItem={
+                                    selectedCategory || categoryItems[0]
+                                }
+                            />
+                        </div>
+                    )}
+                    <div>
+                        <b>What is your feedback?</b>
+                        <textarea
+                            name="feedback-text"
+                            className="tw-h-32 tw-w-full tw-border tw-border-gray-700"
+                            required
+                            value={feedback}
+                            onChange={e => setFeedback(e.target.value)}
+                        />
+                    </div>
+                </form>
+                <p>We only collect this information when you send feedback:</p>
+                <ul className="tw-list-disc tw-pl-8">
+                    <li>Application name</li>
+                    <li>Your feedback</li>
+                    <li>Operating system</li>
+                </ul>
+                <Button
+                    large
+                    className="tw-self-end"
+                    variant="primary"
+                    onClick={() =>
+                        handleFormData(
+                            feedback,
+                            setSayThankYou,
+                            selectedCategory?.value
+                        )
+                    }
+                    disabled={feedback === ''}
+                >
+                    Send Feedback
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+const formURL =
+    isDevelopment === true
+        ? 'https://formkeep.com/f/87deb409a565'
+        : 'https://formkeep.com/f/36b394b92851';
+
+const handleFormData = async (
+    feedback: string,
+    setResponse: (response: boolean) => void,
+    category?: string
+) => {
+    const data: Record<string, unknown> = {
+        name: getAppName(),
+        feedback,
+        platform: process.platform,
+    };
+
+    if (category && category !== 'Select a category') {
+        data.category = category;
+    }
+
+    try {
+        const response = await fetch(formURL, {
+            method: 'POST',
+            body: JSON.stringify(data),
+            headers: {
+                'Content-Type': 'application/json',
+                enctype: 'multipart/form-data',
+            },
+        });
+
+        if (response.ok) {
+            setResponse(true);
+            return;
+        }
+
+        logger.error(
+            `FeedbackForm: Server responded with status code ${response.status}`
+        );
+    } catch (error: unknown) {
+        logger.error(
+            `FeedbackForm: Could not send feedback. ${JSON.stringify(error)}`
+        );
+    }
+};
+
+const getAppName = () => packageJson().name;

package/src/PseudoButton/PseudoButton.tsx

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+
+import './pseudo-button.scss';
+
+const invokeIfSpaceOrEnterPressed =
+    (onClick: React.KeyboardEventHandler<Element>) =>
+    (event: React.KeyboardEvent) => {
+        event.stopPropagation();
+        if (event.key === ' ' || event.key === 'Enter') {
+            onClick(event);
+        }
+    };
+
+const blurAndInvoke =
+    (
+        onClick: React.MouseEventHandler<HTMLElement>
+    ): React.MouseEventHandler<HTMLElement> =>
+    (event: React.MouseEvent<HTMLElement>) => {
+        event.stopPropagation();
+        event.currentTarget.blur();
+        onClick(event);
+    };
+
+// Motivation for this class: A normal button in HTML must not contain divs or other buttons,
+// but we do have things that behave like buttons and at the same time should contain such things
+export default ({
+    onClick = () => {},
+    className = '',
+    children,
+    title,
+    testId,
+}: {
+    onClick?: React.EventHandler<React.SyntheticEvent>;
+    className?: string;
+    children?: React.ReactNode;
+    title?: string;
+    testId?: string;
+}) => (
+    <div
+        role="button"
+        className={`core19-pseudo-button ${className}`}
+        tabIndex={0}
+        onClick={blurAndInvoke(onClick)}
+        onKeyUp={invokeIfSpaceOrEnterPressed(onClick)}
+        title={title}
+        data-testid={testId}
+    >
+        {children}
+    </div>
+);

package/src/PseudoButton/pseudo-button.scss

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "../variables";
+
+.core19-pseudo-button {
+    cursor: pointer;
+}