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

package/src/Slider/percentage.ts

@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import { getMax, getMin, isValues, RangeOrValues } from './range';
+
+export const constrainedToPercentage = (percentage: number) => {
+    if (percentage < 0) return 0;
+    if (percentage > 100) return 100;
+    return percentage;
+};
+
+export const toPercentage = (value: number, rangeOrValues: RangeOrValues) => {
+    const min = getMin(rangeOrValues);
+    const max = getMax(rangeOrValues);
+
+    return ((value - min) * 100) / (max - min);
+};
+
+export const fromPercentage = (
+    lastValue: number,
+    value: number,
+    rangeOrValues: RangeOrValues,
+    directionForward: boolean
+) => {
+    const min = getMin(rangeOrValues);
+    const max = getMax(rangeOrValues);
+
+    if (isValues(rangeOrValues)) {
+        const values = rangeOrValues;
+        const noOfIndexes = values.length - 1;
+        const computedValue = (value * (max - min)) / 100 + min;
+
+        const lastValueIndex = values.indexOf(lastValue);
+        const closestPrevIndex = lastValueIndex === 0 ? 0 : lastValueIndex - 1;
+        const closestNextIndex =
+            lastValueIndex === noOfIndexes ? noOfIndexes : lastValueIndex + 1;
+
+        let closestIndex = -1;
+
+        if (directionForward) {
+            closestIndex =
+                values[closestNextIndex] > computedValue
+                    ? lastValueIndex
+                    : closestNextIndex;
+        } else {
+            closestIndex =
+                values[closestPrevIndex] < computedValue
+                    ? lastValueIndex
+                    : closestPrevIndex;
+        }
+
+        return values[closestIndex];
+    }
+
+    const range = rangeOrValues;
+    if (range.step != null) {
+        const noOfSteps = (max - min) / range.step;
+        const closestStep = Math.round((value / 100) * noOfSteps);
+
+        return Number((min + closestStep * range.step).toFixed(range.decimals));
+    }
+
+    return Number(((value * (max - min)) / 100 + min).toFixed(range.decimals));
+};

package/src/Slider/range.ts

@@ -0,0 +1,92 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import { useEffect } from 'react';
+
+import { isFactor } from './factor';
+
+export type Values = readonly number[];
+export type Range = {
+    min: number;
+    max: number;
+    decimals?: number;
+    step?: number; // positive number
+};
+
+export type RangeOrValues = Range | Values;
+
+export const isValues = (
+    rangeOrValues: RangeOrValues
+): rangeOrValues is Values => Array.isArray(rangeOrValues);
+
+export const getMin = (rangeOrValues: RangeOrValues) =>
+    isValues(rangeOrValues) ? rangeOrValues[0] : rangeOrValues.min;
+
+export const getMax = (rangeOrValues: RangeOrValues) =>
+    isValues(rangeOrValues)
+        ? rangeOrValues[rangeOrValues.length - 1]
+        : rangeOrValues.max;
+
+export const getStep = (range: Range) =>
+    range.step != null ? range.step : 0.1 ** (range.decimals ?? 0);
+
+const assert = (expectedToBeTrue: boolean, warning: string) => {
+    if (!expectedToBeTrue) {
+        console.error(warning);
+    }
+};
+
+const validateValues = (values: Values) => {
+    for (let i = 0; i < values.length - 1; i += 1) {
+        assert(
+            values[i] < values[i + 1],
+            `The values of the range must be sorted correctly, but ${
+                values[i]
+            } is larger then ${values[i + 1]} in ${values}`
+        );
+    }
+};
+
+const validateRange = (range: Range) => {
+    assert(
+        !(`explicitRange` in range),
+        'Using `explicitRange` is not supported anymore, use only an array instead of a range object.'
+    );
+
+    assert(
+        range.min < range.max,
+        `range.min must not be higher than range.max: ${JSON.stringify(range)}`
+    );
+
+    if (range.decimals != null)
+        assert(
+            range.decimals >= 0 && Number.isInteger(range.decimals),
+            `range.decimals must be non-negative integer but is ${range.decimals}`
+        );
+
+    if (range.step != null) {
+        assert(
+            range.step > 0,
+            `range.step must be larger than zero but is ${range.step}`
+        );
+        assert(
+            isFactor(range.max - range.min, range.step),
+            `range.step must be a factor of range.max - range.min: ${JSON.stringify(
+                range
+            )}`
+        );
+    }
+};
+
+export const useValidatedRangeOrValues = (rangeOrValues: RangeOrValues) => {
+    useEffect(() => {
+        if (isValues(rangeOrValues)) {
+            validateValues(rangeOrValues);
+        } else {
+            validateRange(rangeOrValues);
+        }
+    }, [rangeOrValues]);
+};

package/src/Slider/slider.scss

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "./variables";
+
+.slider {
+    height: 2*$handle-radius-selected;
+
+    position: relative;
+    margin: 0 $handle-radius;
+}

package/src/Slider/ticks.scss

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "./variables";
+
+.slider .ticks {
+    display: flex;
+    justify-content: space-between;
+    margin-right: -$handle-radius;
+
+    .tick {
+        border-style: solid;
+        border-radius: 50%;
+        outline: 0;
+
+        border-color: $color-unselected;
+        border-width: $tick-radius;
+        margin-top: $handle-radius-selected - $tick-radius;
+        margin-left: -$handle-radius;
+
+        &.selected {
+            border-color: $color-selected;
+        }
+    }
+}

package/src/Slider/variables.scss

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "../variables";
+
+$bar-height: 2px;
+$handle-radius: 6px;
+$handle-radius-selected: 8px;
+
+$tick-radius: 3px;
+
+$color-selected: $gray-700;
+$color-unselected: $gray-200;

package/src/StartStopButton/StartStopButton.tsx

@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { FC, ReactNode } from 'react';
+
+import Button, { ButtonVariants } from '../Button/Button';
+import classNames from '../utils/classNames';
+import playSvg from './play-circle.svg';
+import stopSvg from './stop-circle.svg';
+
+import './start-stop-button.scss';
+
+interface Props {
+    startText?: ReactNode;
+    stopText?: ReactNode;
+    onClick: () => void;
+    started: boolean;
+    disabled?: boolean;
+    large?: boolean;
+    showIcon?: boolean;
+    variant?: ButtonVariants;
+    className?: string;
+}
+
+const StartStopButton: FC<Props> = ({
+    startText = 'Start',
+    stopText = 'Stop',
+    onClick,
+    started,
+    disabled = false,
+    variant = 'secondary',
+    className,
+    large = true,
+    showIcon = true,
+}) => {
+    const label = started ? stopText : startText;
+    const src = started ? stopSvg : playSvg;
+
+    return (
+        <Button
+            className={classNames(
+                'start-stop',
+                `${started ? 'active-animation' : ''}`,
+                className
+            )}
+            disabled={disabled}
+            large={large}
+            onClick={() => onClick()}
+            variant={variant}
+        >
+            {showIcon && <img alt="" src={src} />}
+            {label}
+        </Button>
+    );
+};
+
+export default StartStopButton;

package/src/StartStopButton/play-circle.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#455a64" d="M10,16.5V7.5L16,12M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>

package/src/StartStopButton/start-stop-button.scss

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../variables';
+
+.start-stop {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    background-color: $white;
+    border-color: $gray-200;
+
+    img {
+        height: 20px;
+        width: 20px;
+        margin-right: 8px;
+    }
+
+    &.active-animation {
+        overflow: hidden;
+        position: relative;
+
+        &::after {
+            content: '';
+            background: $gray-700;
+            height: 2px;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            animation: snake 4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+        }
+    }
+}
+
+@keyframes snake {
+    0% {
+        transform: translate(-100%);
+    }
+    100% {
+        transform: translate(100%);
+    }
+}

package/src/StartStopButton/stop-circle.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#455a64" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M9,9H15V15H9" /></svg>

package/src/StateSelector/StateSelector.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+import { Button, ButtonGroup } from 'react-bootstrap';
+
+import './state-selector.scss';
+
+interface ComplexItem {
+    key: string;
+    renderItem: React.ReactNode;
+}
+
+type SelectItem = string | ComplexItem;
+
+const convertToComplex = (item: SelectItem): ComplexItem => {
+    if (typeof item === 'string') {
+        return {
+            key: item,
+            renderItem: item,
+        } as ComplexItem;
+    }
+
+    return item as ComplexItem;
+};
+export interface Props {
+    items: SelectItem[];
+    onSelect: (index: number) => void;
+    disabled?: boolean;
+    selectedItem: SelectItem;
+}
+
+export default ({ items, onSelect, disabled = false, selectedItem }: Props) => {
+    const selectionButton = (item: SelectItem, index: number) => {
+        const complexItem = convertToComplex(item);
+        const complexSelectedItem = convertToComplex(selectedItem);
+        return (
+            <Button
+                key={complexItem.key}
+                variant={
+                    complexSelectedItem.key === complexItem.key
+                        ? 'set'
+                        : 'unset'
+                }
+                onClick={() => {
+                    onSelect(index);
+                }}
+                active={complexSelectedItem.key === complexItem.key}
+                disabled={disabled}
+            >
+                {complexItem.renderItem}
+            </Button>
+        );
+    };
+
+    return (
+        <ButtonGroup className="w-100 d-flex channel-selection flex-row">
+            {items.map((item, index) => selectionButton(item, index))}
+        </ButtonGroup>
+    );
+};

package/src/StateSelector/state-selector.scss

@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../variables';
+
+.channel-selection {
+    margin-bottom: 16px !important;
+    padding: 4px;
+    background-color: $gray-700;
+    button {
+        padding: 4px;
+        border-radius: 4px !important;
+    }
+    .btn:disabled {
+        opacity: initial;
+    }
+    .dot {
+        position: absolute;
+        top: 1px;
+        right: 1px;
+        width: 6px;
+        height: 6px;
+        border-radius: 3px;
+    }
+    .btn-set {
+        color: $gray-700;
+        background-color: $white;
+        border-color: $gray-700;
+    }
+    .btn-unset {
+        color: $white;
+        background-color: $gray-700;
+        border-color: $gray-700;
+    }
+}

package/src/Stepper/Stepper.tsx

@@ -0,0 +1,138 @@
+/*
+ * Copyright (c) 2023 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+
+import classNames from '../utils/classNames';
+
+import './stepper.scss';
+
+type ActionCaption = StringCaption & {
+    action: () => void;
+};
+
+type TooltipCaption = StringCaption & {
+    tooltip: string;
+};
+
+type StringCaption = {
+    id: string;
+    caption: string;
+};
+
+type StepState = 'active' | 'success' | 'warning' | 'failure';
+
+type StepCaption = StringCaption | ActionCaption | TooltipCaption;
+
+export type Step = {
+    id: string;
+    title: string;
+    caption?: string | (StepCaption | StepCaption[]);
+    state?: StepState;
+};
+
+export interface Steppers {
+    title?: string;
+    steps: Step[];
+}
+
+const isToolTipCaption = (caption: StepCaption): caption is ActionCaption =>
+    (caption as TooltipCaption).tooltip !== undefined;
+
+const isActionCaption = (caption: StepCaption): caption is ActionCaption =>
+    (caption as ActionCaption).action !== undefined;
+
+const isStringCaption = (
+    caption: string | StringCaption
+): caption is string | StringCaption =>
+    typeof caption === 'string' ||
+    (!isToolTipCaption(caption) && !isActionCaption(caption));
+
+const StepActionCaption = ({ caption }: { caption: ActionCaption }) => (
+    <button type="button" className="action-link" onClick={caption.action}>
+        {`${caption.caption}`}
+    </button>
+);
+
+const StepTooltipCaption = ({ caption }: { caption: TooltipCaption }) => (
+    <OverlayTrigger
+        placement="bottom-end"
+        overlay={
+            <Tooltip id={`tooltip-${caption.caption}`}>
+                {caption.tooltip}
+            </Tooltip>
+        }
+    >
+        <span>
+            <span className="tool-tip-trigger">{`${caption.caption}`}</span>
+            &nbsp;
+        </span>
+    </OverlayTrigger>
+);
+
+const StepStringCaption = ({
+    caption,
+}: {
+    caption: string | StringCaption;
+}) => {
+    if (typeof caption === 'string') {
+        return <span>{`${caption}`} </span>;
+    }
+
+    return <span>{`${caption.caption}`} </span>;
+};
+
+const Caption = ({ caption }: { caption: string | StepCaption }) => {
+    if (isStringCaption(caption)) {
+        return <StepStringCaption caption={caption} />;
+    }
+
+    if (isActionCaption(caption)) {
+        return <StepActionCaption caption={caption} />;
+    }
+
+    return <StepTooltipCaption caption={caption} />;
+};
+
+export default ({ title, steps }: Steppers) => (
+    <>
+        <div className="stepper-reset" />
+        {title && <div>{title}</div>}
+        {steps.map(step => (
+            <div
+                key={step.id}
+                className={classNames(
+                    'step',
+                    step.state && `step-${step.state}`
+                )}
+            >
+                <div>
+                    <div className="circle">
+                        <div className="step-icon" />
+                    </div>
+                    <div className="line" />
+                </div>
+                <div>
+                    <div className="title">{step.title}</div>
+                    <div className="caption">
+                        {step.caption &&
+                            (Array.isArray(step.caption) ? (
+                                step.caption?.map(caption => (
+                                    <Caption
+                                        key={caption.id}
+                                        caption={caption}
+                                    />
+                                ))
+                            ) : (
+                                <Caption caption={step.caption} />
+                            ))}
+                    </div>
+                </div>
+            </div>
+        ))}
+    </>
+);

package/src/Stepper/stepper.scss

@@ -0,0 +1,127 @@
+/*
+ * Copyright (c) 2023 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../../styles.scss';
+@import '../variables';
+
+.stepper-reset {
+    counter-reset: stepper;
+}
+
+.step {
+    display: flex;
+    min-height: 36px;
+    color: $gray-600;
+
+    .action-link {
+        color: $gray-600;
+        padding: 0;
+        border: none;
+        background: none;
+        text-decoration: underline;
+    }
+
+    .tool-tip-trigger {
+        text-decoration: underline;
+    }
+
+    .circle {
+        background: $tooltip-bg;
+        position: relative;
+        width: 13px;
+        height: 13px;
+        line-height: 13px;
+        border-radius: 100%;
+        text-align: center;
+    }
+
+    .step-icon::after {
+        counter-increment: stepper;
+        font-family: 'Material Design Icons', 'Roboto';
+        color: white;
+        font-size: 10px;
+        vertical-align: bottom;
+        content: counter(stepper);
+    }
+
+    &.step-success {
+        .circle {
+            background-color: $green;
+        }
+        .step-icon::after {
+            content: '\F012C';
+        }
+    }
+
+    &.step-warning {
+        .circle {
+            background-color: $amber;
+        }
+        .step-icon::after {
+            content: '\F1238';
+        }
+    }
+
+    &.step-failure {
+        .circle {
+            background-color: $red;
+        }
+        .step-icon::after {
+            content: '\F1398';
+        }
+    }
+
+    &.step-active {
+        .step-icon::after {
+            content: '\F0450';
+        }
+        .step-icon {
+            animation: rotate 3s linear infinite;
+        }
+    }
+
+    .line {
+        height: 100%;
+        left: 50%;
+        position: relative;
+        width: 2px;
+        background: #90a4ae;
+        margin-left: -1px;
+    }
+
+    &:last-child .line {
+        display: none;
+    }
+
+    & > div:not(:first-child) {
+        flex-grow: 1;
+        padding-left: 1em;
+    }
+}
+
+@keyframes rotate {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.title {
+    line-height: 12px;
+    font-size: 12px;
+    font-weight: bold;
+}
+
+.caption {
+    font-size: 12px;
+
+    .action-link {
+        font-style: italic;
+    }
+
+    .action-link+.action-link  {
+        margin-left: 4px;
+    }
+}