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

package/src/FlashMessage/FlashMessage.tsx

@@ -0,0 +1,159 @@
+/*
+ * Copyright (c) 2023 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { mdiClose } from '@mdi/js';
+import Icon from '@mdi/react';
+
+import classNames from '../utils/classNames';
+import { colors } from '../utils/colors';
+import { FlashMessage, getMessages, removeMessage } from './FlashMessageSlice';
+
+import './flashMessage.css';
+
+const SLIDE_IN_DURATION_MS = 300;
+const SLIDE_IN_ANIMATION = `${SLIDE_IN_DURATION_MS}ms slide-in`;
+
+const SLIDE_OUT_DURATION_MS = 1000;
+const SLIDE_OUT_ANIMATION = (dismissTime: number) =>
+    `${SLIDE_OUT_DURATION_MS}ms slide-out ${
+        dismissTime - SLIDE_OUT_DURATION_MS
+    }ms`;
+
+const LOADER_ANIMATION = (dismissTime: number) =>
+    `${
+        dismissTime - SLIDE_OUT_DURATION_MS
+    }ms flash-message-loader linear forwards`;
+
+interface FlashMessageProps {
+    flashMessage: FlashMessage;
+}
+
+const FlashMessage = ({ flashMessage }: FlashMessageProps) => {
+    const { id, message, variant, dismissTime } = flashMessage;
+
+    const dispatch = useDispatch();
+    const divRef = useRef(null);
+    const [fadeoutTimer, setFadeoutTimer] = useState<string>(
+        dismissTime == null ? 'unset' : `${dismissTime}ms`
+    );
+    const timeoutHandler = useRef<NodeJS.Timeout | undefined>(undefined);
+
+    if (timeoutHandler.current == null && dismissTime != null) {
+        timeoutHandler.current = setTimeout(() => {
+            dispatch(removeMessage(id));
+        }, dismissTime);
+    }
+
+    const close = () => {
+        clearTimeout(timeoutHandler.current);
+        dispatch(removeMessage(id));
+    };
+
+    const addFadeout = () => {
+        if (dismissTime) {
+            timeoutHandler.current = setTimeout(() => {
+                dispatch(removeMessage(id));
+            }, dismissTime);
+            setFadeoutTimer(`${dismissTime}ms`);
+        }
+    };
+
+    const removeFadeout = () => {
+        clearTimeout(timeoutHandler.current);
+        setFadeoutTimer('unset');
+    };
+
+    const initialRender = () => divRef.current == null;
+
+    return (
+        <div
+            ref={divRef}
+            className={`tw-flex tw-w-full tw-flex-col tw-justify-between tw-p-4  tw-text-white ${classNames(
+                variant === 'error' && 'tw-bg-red',
+                variant === 'success' && 'tw-bg-green',
+                variant === 'info' && 'tw-bg-nordicBlue',
+                variant === 'warning' && 'tw-bg-orange'
+            )}`}
+            style={{
+                zIndex: 1000,
+                animation:
+                    fadeoutTimer !== 'unset'
+                        ? flashMessageAnimations(initialRender(), dismissTime)
+                        : 'unset',
+            }}
+            onMouseEnter={removeFadeout}
+            onMouseLeave={addFadeout}
+        >
+            <div className="tw-flex tw-w-full tw-justify-between">
+                {message}
+                <div onClick={close}>
+                    <Icon path={mdiClose} size={0.8} />
+                </div>
+            </div>
+            {dismissTime != null ? (
+                <div
+                    style={{
+                        backgroundColor: colors.white,
+                        width: 'calc(100% + 32px)',
+                        height: '2px',
+                        margin: '-16px',
+                        marginTop: '8px',
+                        animation:
+                            fadeoutTimer !== 'unset'
+                                ? LOADER_ANIMATION(dismissTime)
+                                : 'unset',
+                    }}
+                />
+            ) : null}
+        </div>
+    );
+};
+
+const FlashMessages = () => {
+    const messages = useSelector(getMessages);
+
+    if (messages.length === 0) return null;
+
+    return (
+        <div
+            style={{
+                position: 'absolute',
+                bottom: '32px',
+                right: '16px',
+                width: '256px',
+                gap: '16px',
+                display: 'flex',
+                flexDirection: 'column-reverse',
+            }}
+        >
+            {messages.map(flashMessage => (
+                <FlashMessage
+                    key={flashMessage.id}
+                    flashMessage={flashMessage}
+                />
+            ))}
+        </div>
+    );
+};
+
+const flashMessageAnimations = (
+    initialRender2: boolean,
+    dismissTime2?: number
+): string => {
+    if (!dismissTime2) {
+        return initialRender2 ? SLIDE_IN_ANIMATION : 'unset';
+    }
+
+    return `${SLIDE_OUT_ANIMATION(dismissTime2)},${
+        initialRender2 ? SLIDE_IN_ANIMATION : ''
+    }`;
+};
+
+export default FlashMessages;

package/src/FlashMessage/FlashMessageSlice.ts

@@ -0,0 +1,88 @@
+/*
+ * Copyright (c) 2023 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import { createSlice, nanoid, PayloadAction } from '@reduxjs/toolkit';
+
+import type { AppThunk, RootState } from '../store';
+
+export interface FlashMessages {
+    messages: FlashMessage[];
+}
+
+export type FlashMessageVariant = 'success' | 'warning' | 'error' | 'info';
+
+export interface FlashMessage {
+    id: string;
+    message: string;
+    variant: FlashMessageVariant;
+    dismissTime?: number;
+}
+
+export type FlashMessagePayload = Omit<FlashMessage, 'id'>;
+
+const initialState: FlashMessages = {
+    messages: [],
+};
+
+const slice = createSlice({
+    name: 'flashMessages',
+    initialState,
+    reducers: {
+        addNewMessage: (
+            state,
+            { payload: message }: PayloadAction<FlashMessagePayload>
+        ) => {
+            state.messages.push({ ...message, id: nanoid() });
+        },
+        removeMessage: (state, { payload: id }: PayloadAction<string>) => {
+            state.messages = state.messages.filter(
+                message => message.id !== id
+            );
+        },
+    },
+});
+
+export const newCopiedFlashMessage = (): AppThunk => dispatch =>
+    dispatch(newInfoFlashMessage('Copied to clipboard!', 3000));
+
+export const newSuccessFlashMessage =
+    (message: string, dismissTime?: number): AppThunk =>
+    dispatch =>
+        dispatch(newFlashMessage({ message, variant: 'success', dismissTime }));
+
+export const newWarningFlashMessage =
+    (message: string, dismissTime?: number): AppThunk =>
+    dispatch =>
+        dispatch(newFlashMessage({ message, variant: 'warning', dismissTime }));
+
+export const newErrorFlashMessage =
+    (message: string, dismissTime?: number): AppThunk =>
+    dispatch =>
+        dispatch(newFlashMessage({ message, variant: 'error', dismissTime }));
+
+export const newInfoFlashMessage =
+    (message: string, dismissTime?: number): AppThunk =>
+    dispatch =>
+        dispatch(newFlashMessage({ message, variant: 'info', dismissTime }));
+
+const newFlashMessage =
+    ({ message, variant, dismissTime }: FlashMessagePayload): AppThunk =>
+    dispatch => {
+        dispatch(
+            addNewMessage({
+                message,
+                variant,
+                dismissTime,
+            })
+        );
+    };
+
+export const getMessages = (state: RootState) => state.flashMessages.messages;
+
+export const {
+    reducer,
+    actions: { addNewMessage, removeMessage },
+} = slice;

package/src/FlashMessage/flashMessage.css

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2023 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@keyframes flash-message-loader {
+    from {
+        width: 100%;
+    }
+    to {
+        width: 0;
+    }
+}
+
+@keyframes slide-in {
+    from {
+        transform: translateX(110%);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes slide-out {
+    from {
+        transform: translateX(0);
+    }
+    to {
+        transform: translateX(110%);
+    }
+}

package/src/NavBar/NavMenu.tsx

@@ -36,12 +36,11 @@ const NavMenu = () => {
     });
 
     return (
-        <div data-testid="nav-menu">
+        <div data-testid="nav-menu" className="d-flex ml-3 flex-wrap">
             {paneNames.map((name, index: number) => (
                 <NavMenuItem
                     key={name}
                     index={index}
-                    isFirst={index === 0}
                     isSelected={currentPane === index}
                     label={name}
                 />

package/src/NavBar/NavMenuItem.tsx

@@ -8,33 +8,31 @@ 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 NavMenuItem: FC<Props> = ({ index, isSelected, label }) => {
     const dispatch = useDispatch();
 
     return (
-        <Button
-            variant="custom"
+        <button
+            type="button"
             className={classNames(
                 'core19-nav-menu-item',
                 isSelected && 'selected',
-                isFirst && 'first'
+                'mr-4'
             )}
             onClick={() => dispatch(setCurrentPane(index))}
         >
             {label}
-        </Button>
+        </button>
     );
 };
 

package/src/NavBar/nav-bar.scss

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
  */
 
-@import "../variables";
+@import '../variables';
 
 .core19-nav-bar {
     width: 100%;
@@ -21,6 +21,7 @@
 
     .core19-nav-bar-device-selector {
         width: $side-panel-width;
+        min-width: $side-panel-width;
         align-self: start;
     }
 }

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

@@ -7,14 +7,9 @@
 @import '../variables';
 
 .core19-nav-menu-item {
-    margin-left: 29px;
     border: none;
     background: none;
 
-    &.first {
-        margin-left: 20px;
-    }
-
     padding: 0;
 
     font-size: 14px;

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

@@ -4,22 +4,41 @@
  * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
  */
 
-import React, { useState } from 'react';
+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 default () => {
+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="w-100 d-flex justify-content-center">
-                <div className="d-flex flex-column justify-content-center align-items-start bg-white px-3 py-4">
-                    <b className="mb-3">Thank you!</b>
+            <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
@@ -32,7 +51,7 @@ export default () => {
                     </section>
                     <Button
                         large
-                        className="align-self-end"
+                        className="tw-align-self-end tw-self-end"
                         onClick={() => {
                             setSayThankYou(false);
                             setFeedback('');
@@ -47,56 +66,67 @@ export default () => {
     }
 
     return (
-        <div className="w-100 d-flex justify-content-center">
-            <div className="d-flex flex-column justify-content-center align-items-start bg-white px-3 py-4">
-                <b className="mb-3">Give Feedback</b>
-                <section>
-                    <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"
-                        >
-                            Nordic DevZone
-                        </a>
-                        .
-                    </p>
-                </section>
-                <form className="d-flex flex-column w-100">
-                    <label htmlFor="feedback-text">
+        <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="w-100 mb-3"
-                            style={{ height: '8rem' }}
+                            className="tw-h-32 tw-w-full tw-border tw-border-gray-700"
                             required
                             value={feedback}
                             onChange={e => setFeedback(e.target.value)}
                         />
-                    </label>
+                    </div>
                 </form>
-                <section>
-                    <p>
-                        We only collect this information when you send feedback:
-                    </p>
-                    <ul>
-                        <li>Application name</li>
-                        <li>Your feedback</li>
-                        <li>Operating system</li>
-                    </ul>
-                </section>
+                <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="align-self-end"
+                    className="tw-self-end"
                     variant="primary"
-                    onClick={() => handleFormData(feedback, setSayThankYou)}
+                    onClick={() =>
+                        handleFormData(
+                            feedback,
+                            setSayThankYou,
+                            selectedCategory?.value
+                        )
+                    }
                     disabled={feedback === ''}
                 >
                     Send Feedback
@@ -108,19 +138,24 @@ export default () => {
 
 const formURL =
     isDevelopment === true
-        ? 'https://formkeep.com/f/8deb409a565'
+        ? 'https://formkeep.com/f/87deb409a565'
         : 'https://formkeep.com/f/36b394b92851';
 
 const handleFormData = async (
     feedback: string,
-    setResponse: (response: boolean) => void
+    setResponse: (response: boolean) => void,
+    category?: string
 ) => {
-    const data = {
+    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',