@opalkelly/frontpanel-react-components 0.1.0

package/src/primitives/RangeSlider/RangeSlider.css

@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2024 Opal Kelly Incorporated
+ *
+ * This source code is licensed under the FrontPanel license.
+ * See the LICENSE file found in the root directory of this project.
+ */
+
+.okRangeSlider {
+    --range-slider-thumb-outline-size: 2px;
+    --range-slider-thumb-border-size: 2px;
+    --range-slider-thumb-size: 22px;
+    --range-slider-track-size: 8px;
+
+    /* Layout */
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    align-self: stretch;
+    width: 100%;
+    height: fit-content;
+
+    /* Typography */
+    color: var(--Dark, #343434);
+    text-align: right;
+    font-family: Inter, "Nunito Sans", sans-serif, ui-sans-serif;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 12px; /* 100% */
+}
+
+/* State Disabled */
+.okRangeSlider[data-disabled="true"] {
+    opacity: 0.5;
+}
+
+.okRangeSliderLabel {
+    width: 100%;
+}
+
+.okRangeSliderRoot {
+    /* Layout */
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: var(--range-slider-thumb-size);
+    min-width: 100px;
+
+    /* Style */
+    user-select: none;
+    touch-action: none;
+}
+
+.okRangeSliderTrack {
+    /* Layout */
+    position: relative;
+    flex-grow: 1;
+    height: var(--range-slider-track-size);
+
+    /* Style */
+    background: var(--Gray-2, #d0d7df);
+    border-radius: 9999px;
+}
+
+.okRangeSliderRange {
+    /* Layout */
+    position: absolute;
+    height: 100%;
+
+    /* Style */
+    background-color: #44bd84;
+    border-radius: inherit;
+}
+
+.okRangeSliderThumb {
+    /* Layout */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: calc(
+        var(--range-slider-thumb-size) -
+            (2 * (var(--range-slider-thumb-border-size) + var(--range-slider-thumb-outline-size)))
+    );
+    height: calc(
+        var(--range-slider-thumb-size) -
+            (2 * (var(--range-slider-thumb-border-size) + var(--range-slider-thumb-outline-size)))
+    );
+
+    /* Style */
+    background: var(--Base-White, #fff);
+    border: var(--range-slider-thumb-border-size) solid var(--brand-12, #44bd84);
+    border-radius: var(--range-slider-thumb-size);
+}
+
+.okRangeSliderThumb:hover {
+    background-color: #44bd84;
+}
+
+.okRangeSliderThumb:focus {
+    outline: none;
+    box-shadow: 0 0 0 var(--range-slider-thumb-outline-size) #d0d7df;
+}
+
+.okRangeSliderThumbLabel {
+    /* Layout */
+    position: absolute;
+    bottom: -14px;
+}

package/src/primitives/RangeSlider/RangeSlider.props.ts

@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2024 Opal Kelly Incorporated
+ *
+ * This source code is licensed under the FrontPanel license.
+ * See the LICENSE file found in the root directory of this project.
+ */
+
+import LabelProps from "../Label/Label.props";
+
+export type RangeSliderValueChangeEventHandler = (value: number) => void;
+export type RangeSliderValueCommitEventHandler = (value: number) => void;
+
+/**
+ * Interface for the properties of the `RangeSlider` component.
+ *
+ * @interface
+ */
+interface RangeSliderProps {
+    /**
+     * Optional CSS class to apply to the range
+     */
+    className?: string;
+
+    /**
+     * Optional label properties for the range slider
+     */
+    label?: LabelProps;
+
+    /**
+     * Optional tooltip text to be displayed on hover
+     */
+    tooltip?: string;
+
+    /**
+     * Optional default value of the range slider
+     */
+    defaultValue?: number;
+
+    /**
+     * Optional current value of the range slider
+     */
+    value?: number;
+
+    /**
+     * Optional step value for the range slider. This determines the increments in value for each step
+     * @default 1
+     */
+    valueStep?: number;
+
+    /**
+     * Optional minimum value that the range slider can have
+     * @default 0
+     */
+    minimumValue?: number;
+
+    /**
+     * Optional maximum value that the range slider can have
+     * @default 100
+     */
+    maximumValue?: number;
+
+    /**
+     * Optional disable the range slider
+     * @default false
+     */
+    disabled?: boolean;
+
+    /**
+     * Optional show the label for the thumb (handle) of the range slider
+     * @default true
+     */
+    showThumbLabel?: boolean;
+
+    /**
+     * Optional show the labels for the track of the range slider
+     * @default true
+     */
+    showTrackLabels?: boolean;
+
+    /**
+     * Optional event handler for the range slider value change event
+     * @type {RangeSliderValueChangeEventHandler}
+     */
+    onValueChange?: RangeSliderValueChangeEventHandler;
+
+    /**
+     * Optional event handler for the range slider value committed event
+     * @type {RangeSliderValueCommitEventHandler}
+     */
+    onValueCommit?: RangeSliderValueCommitEventHandler;
+}
+
+export default RangeSliderProps;

package/src/primitives/RangeSlider/RangeSlider.stories.tsx

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) 2024 Opal Kelly Incorporated
+ *
+ * This source code is licensed under the FrontPanel license.
+ * See the LICENSE file found in the root directory of this project.
+ */
+
+import React from "react";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import withApplication from "../../stories/decorators/Application.decorator";
+
+import RangeSlider from "./RangeSlider";
+
+// Configure Story metadata
+const meta = {
+    title: "Components/RangeSlider",
+    component: RangeSlider,
+    parameters: {
+        layout: "centered" // Center the component in the Canvas
+    },
+    tags: ["autodocs"], // Automatically generate documentation
+    argTypes: {
+        defaultValue: {
+            control: { type: "number", step: 1 }
+        },
+        valueStep: {
+            control: { type: "number", step: 1 }
+        },
+        maximumValue: {
+            control: { type: "number", step: 1 }
+        },
+        minimumValue: {
+            control: { type: "number", step: 1 }
+        },
+        showThumbLabel: { type: "boolean" },
+        showTrackLabels: { type: "boolean" },
+        disabled: { type: "boolean" },
+        // Disable event callback arguments
+        onValueChange: {
+            control: { disable: true }
+        },
+        onValueCommit: {
+            control: { disable: true }
+        }
+    }
+} satisfies Meta<typeof RangeSlider>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// Primary Story
+export const Primary: Story = {
+    render: (args) => {
+        return (
+            <div style={{ minWidth: "200px" }}>
+                <RangeSlider {...args} />
+            </div>
+        );
+    },
+    decorators: [withApplication],
+    args: {
+        defaultValue: 50,
+        value: undefined,
+        maximumValue: 100,
+        minimumValue: 0,
+        valueStep: 1,
+        showTrackLabels: true,
+        showThumbLabel: true,
+        disabled: false,
+        label: { text: "RangeSlider" },
+        tooltip: "Set value within range"
+    }
+};

package/src/primitives/RangeSlider/RangeSlider.tsx

@@ -0,0 +1,168 @@
+/**
+ * Copyright (c) 2024 Opal Kelly Incorporated
+ *
+ * This source code is licensed under the FrontPanel license.
+ * See the LICENSE file found in the root directory of this project.
+ */
+
+import React from "react";
+
+import classNames from "classnames";
+
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+import RangeSliderProps from "./RangeSlider.props";
+
+import "../../index.css";
+
+import "./RangeSlider.css";
+
+import Label from "../Label";
+import Tooltip from "../Tooltip";
+
+type RangeSliderElement = React.ElementRef<typeof SliderPrimitive.Root>;
+
+/**
+ * `RangeSlider` is a React component that renders a range slider to allow setting a value within a specified
+ * range by clicking and dragging the slider thumb or by using the arrow keys. The slider can optionally show
+ * a label and/or a tooltip.
+ *
+ * @component
+ * @param {object} props - Properties passed to component
+ * @param {React.Ref} forwardedRef - Forwarded ref for the range slider
+ *
+ * @returns {React.Node} The rendered RangeSlider component
+ *
+ * @example
+ * ```jsx
+ * <RangeSlider
+ *    defaultValue={50}
+ *    maximumValue={100}
+ *    minimumValue={0}
+ *    valueStep={1}
+ *    onValueChange={(value) => console.log(value)} />
+ * ```
+ */
+const RangeSlider = React.forwardRef<RangeSliderElement, RangeSliderProps>(
+    (props, forwardedRef) => {
+        const { label, tooltip, ...sliderProps } = props;
+
+        const showLabel = label != null;
+        const showTooltip = tooltip != null;
+
+        if (showLabel && showTooltip) {
+            return (
+                <Label className="okRangeSliderLabel" {...label}>
+                    <Tooltip content={tooltip}>
+                        <div style={{ width: "100%" }}>
+                            <RangeSliderImpl ref={forwardedRef} {...sliderProps} />
+                        </div>
+                    </Tooltip>
+                </Label>
+            );
+        } else if (showLabel) {
+            return (
+                <Label className="okRangeSliderLabel" {...label}>
+                    <div style={{ width: "100%" }}>
+                        <RangeSliderImpl ref={forwardedRef} {...sliderProps} />
+                    </div>
+                </Label>
+            );
+        } else if (showTooltip) {
+            return (
+                <Tooltip content={tooltip}>
+                    <div style={{ width: "100%" }}>
+                        <RangeSliderImpl ref={forwardedRef} {...sliderProps} />
+                    </div>
+                </Tooltip>
+            );
+        } else {
+            return <RangeSliderImpl ref={forwardedRef} {...sliderProps} />;
+        }
+    }
+);
+
+RangeSlider.displayName = "RangeSlider";
+
+export default RangeSlider;
+
+interface RangeSliderImplProps
+    extends Omit<React.ComponentPropsWithoutRef<typeof RangeSlider>, "label"> {}
+
+const RangeSliderImpl = React.forwardRef<RangeSliderElement, RangeSliderImplProps>(
+    (props, forwardedRef) => {
+        const {
+            className,
+            tooltip,
+            minimumValue = 0,
+            maximumValue = 100,
+            onValueChange,
+            defaultValue = minimumValue,
+            value,
+            valueStep = 1,
+            showThumbLabel = true,
+            showTrackLabels = true,
+            disabled = false
+        } = props;
+
+        const initialValue = value ?? defaultValue;
+
+        const [controlValue, setControlValue] = React.useState<[number]>([initialValue]);
+
+        React.useEffect(() => {
+            setControlValue([initialValue]);
+        }, [initialValue]);
+
+        const updateControlValue = React.useCallback(
+            (value: number): void => {
+                setControlValue([value]);
+                onValueChange?.(value);
+            },
+            [onValueChange]
+        );
+
+        const RangeSliderTrack = () => {
+            return (
+                <SliderPrimitive.Track className="okRangeSliderTrack">
+                    <SliderPrimitive.Range className="okRangeSliderRange" />
+                </SliderPrimitive.Track>
+            );
+        };
+
+        const showTooltip = tooltip != null;
+
+        return (
+            <div
+                className={classNames("okRangeSlider", className)}
+                data-disabled={disabled || undefined}>
+                {showTrackLabels ? <span>{minimumValue}</span> : null}
+                <SliderPrimitive.Root
+                    ref={forwardedRef}
+                    min={minimumValue}
+                    max={maximumValue}
+                    step={valueStep}
+                    value={controlValue}
+                    onValueChange={(value) => updateControlValue(value[0])}
+                    orientation="horizontal"
+                    className="okRangeSliderRoot"
+                    disabled={disabled}>
+                    {showTooltip ? (
+                        <Tooltip content={tooltip}>
+                            <RangeSliderTrack />
+                        </Tooltip>
+                    ) : (
+                        <RangeSliderTrack />
+                    )}
+                    <SliderPrimitive.Thumb className="okRangeSliderThumb">
+                        {showThumbLabel ? (
+                            <div className="okRangeSliderThumbLabel">{controlValue}</div>
+                        ) : null}
+                    </SliderPrimitive.Thumb>
+                </SliderPrimitive.Root>
+                {showTrackLabels ? <span>{maximumValue}</span> : null}
+            </div>
+        );
+    }
+);
+
+RangeSliderImpl.displayName = "RangeSliderImpl";

package/src/primitives/RangeSlider/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2024 Opal Kelly Incorporated
+ *
+ * This source code is licensed under the FrontPanel license.
+ * See the LICENSE file found in the root directory of this project.
+ */
+
+export { default } from "./RangeSlider";
+
+export { default as RangeSliderProps } from "./RangeSlider.props";
+export {
+    RangeSliderValueChangeEventHandler,
+    RangeSliderValueCommitEventHandler
+} from "./RangeSlider.props";

package/src/primitives/SelectEntry/SelectEntry.stories.tsx

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2024 Opal Kelly Incorporated
+ *
+ * This source code is licensed under the FrontPanel license.
+ * See the LICENSE file found in the root directory of this project.
+ */
+
+import React from "react";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { useArgs } from "@storybook/preview-api";
+
+import withApplication from "../../stories/decorators/Application.decorator";
+
+import SelectEntry from "./SelectEntry";
+
+// Configure Story metadata
+const meta = {
+    title: "Components/SelectEntry",
+    component: SelectEntry.Root,
+    parameters: {
+        layout: "centered" // Center the component in the Canvas
+    },
+    tags: ["autodocs"], // Automatically generate documentation
+    argTypes: {
+        size: {
+            control: { type: "range", min: 1, max: 3, step: 1 }
+        },
+        disabled: { control: "boolean" },
+        // Disable event callback arguments
+        onValueChange: { action: "onValueChange" },
+        onOpenChange: { action: "onOpenChange" }
+    }
+} satisfies Meta<typeof SelectEntry.Root>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// Primary Story
+export const Primary: Story = {
+    render: ({ ...args }) => {
+        const [{ value }, updateArgs] = useArgs();
+
+        function onValueChange(value: string): void {
+            updateArgs({ value: value });
+        }
+
+        return (
+            <div style={{ width: "150px" }}>
+                <SelectEntry.Root {...args} value={value} onValueChange={onValueChange}>
+                    <SelectEntry.Trigger />
+                    <SelectEntry.Content>
+                        <SelectEntry.Group>
+                            <SelectEntry.Label>Fruit Group</SelectEntry.Label>
+                            <SelectEntry.Item value="apple">Apple</SelectEntry.Item>
+                            <SelectEntry.Item value="orange">Orange</SelectEntry.Item>
+                            <SelectEntry.Item value="grape" disabled>
+                                Grape
+                            </SelectEntry.Item>
+                        </SelectEntry.Group>
+                        <SelectEntry.Separator />
+                        <SelectEntry.Group>
+                            <SelectEntry.Label>Vegetable Group</SelectEntry.Label>
+                            <SelectEntry.Item value="carrot">Carrot</SelectEntry.Item>
+                            <SelectEntry.Item value="potato">Potato</SelectEntry.Item>
+                        </SelectEntry.Group>
+                    </SelectEntry.Content>
+                </SelectEntry.Root>
+            </div>
+        );
+    },
+    decorators: [withApplication],
+    args: {
+        value: "carrot",
+        disabled: false,
+        label: {
+            text: "Select Item",
+            verticalPosition: "top",
+            horizontalPosition: "left"
+        },
+        size: 1,
+        tooltip: "Select an item from the list"
+    }
+};

package/src/primitives/SelectEntry/SelectEntry.tsx

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2024 Opal Kelly Incorporated
+ *
+ * This source code is licensed under the FrontPanel license.
+ * See the LICENSE file found in the root directory of this project.
+ */
+
+import SelectEntryContent from "./SelectEntryContent";
+import SelectEntryGroup from "./SelectEntryGroup";
+import SelectEntryItem from "./SelectEntryItem";
+import SelectEntryLabel from "./SelectEntryLabel";
+import SelectEntryRoot from "./SelectEntryRoot";
+import SelectEntrySeparator from "./SelectEntrySeparator";
+import SelectEntryTrigger from "./SelectEntryTrigger";
+
+const SelectEntry = Object.assign(
+    {},
+    {
+        Root: SelectEntryRoot,
+        Trigger: SelectEntryTrigger,
+        Content: SelectEntryContent,
+        Item: SelectEntryItem,
+        Group: SelectEntryGroup,
+        Label: SelectEntryLabel,
+        Separator: SelectEntrySeparator
+    }
+);
+
+export default SelectEntry;

package/src/primitives/SelectEntry/SelectEntryContent.css

@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) 2024 Opal Kelly Incorporated
+ *
+ * This source code is licensed under the FrontPanel license.
+ * See the LICENSE file found in the root directory of this project.
+ */
+
+.okSelectEntryContent {
+    /* Layout */
+    width: var(--radix-select-trigger-width);
+    max-height: var(--radix-select-content-available-height);
+    display: flex;
+    padding: 10px 18px;
+    flex-direction: column;
+    overflow: hidden;
+    justify-content: center;
+    align-items: stretch;
+
+    /* Style */
+    border-radius: 4px;
+    border: 1px solid var(--Gray-2, #d0d7df);
+    background: var(--Light, #fff);
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.24);
+
+    .okSelectEntryContentInner {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    /* ScrollArea Root Style */
+    .okScrollArea {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+    }
+
+    /* ScrollArea Viewport Style */
+    .okScrollAreaViewport {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        gap: 10px;
+
+        /* Stop Chrome back/forward two-finger swipe */
+        overscroll-behavior-x: contain;
+
+        &:where(:focus-visible) + :where(.rt-ScrollAreaViewportFocusRing) {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            outline: 2px solid var(--focus-8);
+            outline-offset: -2px;
+        }
+    }
+
+    /* ScrollArea Scrollbar Style */
+    .okScrollAreaScrollbar {
+        display: flex;
+        /* Ensures no selection */
+        user-select: none;
+        /* Disable browser handling of all panning and zooming gestures on touch devices */
+        touch-action: none;
+
+        &:where([data-orientation="vertical"]) {
+            flex-direction: column;
+            width: 4px;
+        }
+        &:where([data-orientation="horizontal"]) {
+            flex-direction: row;
+            height: 4px;
+        }
+    }
+
+    /* ScrollArea Thumb Style */
+    .okScrollAreaThumb {
+        position: relative;
+
+        &::before {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 100%;
+            height: 100%;
+            min-width: var(--space-4);
+            min-height: var(--space-4);
+        }
+    }
+}