@opalkelly/frontpanel-react-components 0.1.0

package/src/components/FrontPanelTriggerButton/FrontPanelTriggerButton.props.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 { EndpointAddressProps } from "../types";
+
+/**
+ * Interface for the properties of the FrontPanelTriggerButton component.
+ * This interface extends the properties of the TriggerButton component.
+ */
+interface FrontPanelTriggerButtonProps {
+    /**
+     * Address of the frontpanel endpoint
+     */
+    fpEndpoint: EndpointAddressProps;
+}
+
+export default FrontPanelTriggerButtonProps;

package/src/components/FrontPanelTriggerButton/FrontPanelTriggerButton.stories.tsx

@@ -0,0 +1,46 @@
+/**
+ * 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 type { Meta, StoryObj } from "@storybook/react";
+
+import withApplication from "../../stories/decorators/Application.decorator";
+import withFrontPanel from "../../stories/decorators/FrontPanel.decorator";
+
+import FrontPanelTriggerButton from "./FrontPanelTriggerButton";
+
+// Configure Story metadata
+const meta = {
+    title: "Components/FrontPanel/FrontPanelTriggerButton",
+    component: FrontPanelTriggerButton,
+    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" }
+    }
+} satisfies Meta<typeof FrontPanelTriggerButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// Primary Story
+export const Primary: Story = {
+    decorators: [withApplication, withFrontPanel],
+    args: {
+        label: "Trigger",
+        fpEndpoint: { epAddress: 0x40, bitOffset: 1 },
+        // Optional Properties
+        disabled: false,
+        size: 1,
+        tooltip: "Trigger endpoint"
+    }
+};

package/src/components/FrontPanelTriggerButton/FrontPanelTriggerButton.tsx

@@ -0,0 +1,65 @@
+/**
+ * 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 "./FrontPanelTriggerButton.css";
+
+import FrontPanelTriggerButtonProps from "./FrontPanelTriggerButton.props";
+
+import Button from "../../primitives/Button";
+
+import { FrontPanelContext } from "../../contexts";
+
+type FrontPanelTriggerButtonElement = React.ElementRef<typeof Button>;
+
+interface FrontPanelTriggerButtonCombinedProps
+    extends Omit<
+            React.ComponentPropsWithoutRef<typeof Button>,
+            "asChild" | "onButtonClick" | "onButtonDown" | "onButtonUp"
+        >,
+        FrontPanelTriggerButtonProps {}
+
+export type { FrontPanelTriggerButtonCombinedProps };
+
+/**
+ * `FrontPanelTriggerButton` is a React component that renders a trigger button that asserts a TriggerIn endpoint when
+ * it is pressed.
+ *
+ * @component
+ * @param {Object} props - Properties passed to component
+ * @param {React.Ref<FrontPanelTriggerButtonElement>} forwardedRef - Forwarded ref for the button
+ *
+ * @returns {React.ReactElement} The rendered FrontPanelTriggerButton component
+ *
+ * @example
+ * ```jsx
+ * <FrontPanelTriggerButton
+ *     label="Trigger"
+ *     fpEndpoint={{epAddress: 0x00, bitOffset: 1}} />
+ * ```
+ */
+const FrontPanelTriggerButton = React.forwardRef<
+    FrontPanelTriggerButtonElement,
+    FrontPanelTriggerButtonCombinedProps
+>((props, forwardedRef) => {
+    const { device, workQueue } = React.useContext(FrontPanelContext);
+
+    const { fpEndpoint, ...buttonProps } = props;
+
+    const onButtonDown = React.useCallback(async (): Promise<void> => {
+        await workQueue.Post(async () => {
+            await device.activateTriggerIn(fpEndpoint.epAddress, fpEndpoint.bitOffset);
+        });
+    }, [device, fpEndpoint]);
+
+    return <Button {...buttonProps} ref={forwardedRef} onButtonDown={onButtonDown} />;
+});
+
+FrontPanelTriggerButton.displayName = "FrontPanelTriggerButton";
+
+export default FrontPanelTriggerButton;

package/src/components/FrontPanelTriggerButton/index.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 "./FrontPanelTriggerButton";
+
+export { default as FrontPanelTriggerButtonProps } from "./FrontPanelTriggerButton.props";

package/src/components/Icons/ChevronIcon.tsx

@@ -0,0 +1,69 @@
+/**
+ * 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 * as React from "react";
+
+import { IconProps } from "./types";
+
+export enum ChevronDirection {
+    Up,
+    Down
+}
+
+export interface ChevronIconProps extends IconProps {
+    direction: ChevronDirection;
+}
+
+const DirectionChevron = (direction: ChevronDirection, color: string): React.ReactNode => {
+    let arrow: React.ReactNode;
+
+    if (direction === ChevronDirection.Up) {
+        arrow = (
+            <path
+                d="M6.75593 7.12713C6.35716 7.58759 5.64284 7.58759 5.24407 7.12713L2.23682 3.65465C1.67594 3.00701 2.136 2 2.99275 2L9.00725 2C9.864 2 10.3241 3.00701 9.76318 3.65465L6.75593 7.12713Z"
+                fill={color}
+            />
+        );
+    } else if (direction === ChevronDirection.Down) {
+        arrow = (
+            <path
+                d="M6.75593 7.12713C6.35716 7.58759 5.64284 7.58759 5.24407 7.12713L2.23682 3.65465C1.67594 3.00701 2.136 2 2.99275 2L9.00725 2C9.864 2 10.3241 3.00701 9.76318 3.65465L6.75593 7.12713Z"
+                fill={color}
+            />
+        );
+    } else {
+        arrow = (
+            <path
+                d="M6.75593 7.12713C6.35716 7.58759 5.64284 7.58759 5.24407 7.12713L2.23682 3.65465C1.67594 3.00701 2.136 2 2.99275 2L9.00725 2C9.864 2 10.3241 3.00701 9.76318 3.65465L6.75593 7.12713Z"
+                fill={color}
+            />
+        );
+    }
+
+    return arrow;
+};
+
+const ChevronIcon = React.forwardRef<SVGSVGElement, ChevronIconProps>((props, forwardedRef) => {
+    const { direction = ChevronDirection.Down, color = "#343434", ...iconProps } = props;
+
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="8"
+            viewBox="0 0 12 8"
+            fill="none"
+            {...iconProps}
+            ref={forwardedRef}>
+            {DirectionChevron(direction, color)}
+        </svg>
+    );
+});
+
+export default ChevronIcon;
+
+ChevronIcon.displayName = "ChevronIcon";

package/src/components/Icons/IndicatorArrowIcon.tsx

@@ -0,0 +1,59 @@
+/**
+ * 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 * as React from "react";
+
+import { IconProps } from "./types";
+
+export enum IndicatorArrowDirection {
+    Up,
+    Down
+}
+
+export interface IndicatorArrowIconProps extends IconProps {
+    direction: IndicatorArrowDirection;
+}
+
+const IndicatorArrow = (direction: IndicatorArrowDirection, color: string): React.ReactNode => {
+    let arrow: React.ReactNode;
+
+    switch (direction) {
+        case IndicatorArrowDirection.Up:
+            arrow = <path d="M5 5.1656e-07L10 4L0 4L5 5.1656e-07Z" fill={color} />;
+            break;
+        case IndicatorArrowDirection.Down:
+            arrow = <path d="M5 4L0 0L10 8.88334e-07L5 4Z" fill={color} />;
+            break;
+        default:
+            arrow = <path d="M5 5.1656e-07L10 4L0 4L5 5.1656e-07Z" fill={color} />;
+            break;
+    }
+
+    return arrow;
+};
+
+const IndicatorArrowIcon = React.forwardRef<SVGSVGElement, IndicatorArrowIconProps>(
+    (props, forwardedRef) => {
+        const { direction = IndicatorArrowDirection.Down, color = "#343434", ...iconProps } = props;
+        return (
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="10"
+                height="4"
+                viewBox="0 0 10 4"
+                fill="none"
+                {...iconProps}
+                ref={forwardedRef}>
+                {IndicatorArrow(direction, color)}
+            </svg>
+        );
+    }
+);
+
+export default IndicatorArrowIcon;
+
+IndicatorArrowIcon.displayName = "IndicatorArrowIcon";

package/src/components/Icons/IndicatorBarIcon.tsx

@@ -0,0 +1,34 @@
+/**
+ * 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 * as React from "react";
+
+import { IconProps } from "./types";
+
+const IndicatorBarIcon = React.forwardRef<SVGSVGElement, IconProps>((props, forwardedRef) => {
+    const { color = "#343434", ...iconProps } = props;
+
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="10"
+            height="1"
+            viewBox="0 0 10 1"
+            fill="none"
+            {...iconProps}
+            ref={forwardedRef}>
+            <path
+                d="M8.74228e-08 -8.74228e-07L10 -9.53674e-07L10 1L0 0.999999L8.74228e-08 -8.74228e-07Z"
+                fill={color}
+            />
+        </svg>
+    );
+});
+
+export default IndicatorBarIcon;
+
+IndicatorBarIcon.displayName = "IndicatorBarIcon";

package/src/components/Icons/IndicatorStateIcon.tsx

@@ -0,0 +1,82 @@
+/**
+ * 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 * as React from "react";
+
+import { StateIconProps } from "./types";
+
+import { ToggleState } from "../../core";
+
+export interface IndicatorStateIconProps extends StateIconProps {
+    state: ToggleState;
+}
+
+const StateIcon = (
+    state: ToggleState,
+    color: string,
+    colorOnState: string,
+    colorOffState: string
+): React.ReactNode => {
+    let icon: React.ReactNode;
+
+    switch (state) {
+        case ToggleState.On:
+            icon = (
+                <path
+                    d="M5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5C0 7.76142 2.23858 10 5 10Z"
+                    fill={colorOnState}
+                />
+            );
+            break;
+        case ToggleState.Off:
+            icon = (
+                <path
+                    d="M5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5C0 7.76142 2.23858 10 5 10Z"
+                    fill={colorOffState}
+                />
+            );
+            break;
+        default:
+            icon = (
+                <path
+                    d="M5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5C0 7.76142 2.23858 10 5 10Z"
+                    fill={color}
+                />
+            );
+            break;
+    }
+
+    return icon;
+};
+
+const IndicatorStateIcon = React.forwardRef<SVGSVGElement, IndicatorStateIconProps>(
+    (props, forwardedRef) => {
+        const {
+            state,
+            color = "#D0D7DF",
+            colorOnState = "#44BD84",
+            colorOffState = "#D0D7DF"
+        } = props;
+
+        return (
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="10"
+                height="10"
+                viewBox="0 0 10 10"
+                fill="none"
+                {...props}
+                ref={forwardedRef}>
+                {StateIcon(state, color, colorOnState, colorOffState)}
+            </svg>
+        );
+    }
+);
+
+export default IndicatorStateIcon;
+
+IndicatorStateIcon.displayName = "IndicatorStateIcon";

package/src/components/Icons/RadioToggleStateIcon.tsx

@@ -0,0 +1,62 @@
+/**
+ * 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 * as React from "react";
+
+import { StateIconProps } from "./types";
+
+import { ToggleState } from "../../core";
+
+export interface RadioToggleStateIconProps extends StateIconProps {
+    state: ToggleState;
+}
+
+const StateIcon = (state: ToggleState, color: string, colorOnState: string): React.ReactNode => {
+    let icon: React.ReactNode;
+
+    switch (state) {
+        case ToggleState.On:
+            icon = (
+                <>
+                    <circle cx="7" cy="7" r="6" stroke={color} strokeWidth="2" />
+                    <circle cx="7" cy="7" r="3" fill={colorOnState} />
+                </>
+            );
+            break;
+        case ToggleState.Off:
+            icon = <circle cx="7" cy="7" r="6" stroke={color} strokeWidth="2" />;
+            break;
+        default:
+            icon = <circle cx="7" cy="7" r="6" stroke={color} strokeWidth="2" />;
+            break;
+    }
+
+    return icon;
+};
+
+const RadioToggleStateIcon = React.forwardRef<SVGSVGElement, RadioToggleStateIconProps>(
+    (props, forwardedRef) => {
+        const { state, color = "#343434", colorOnState = "#44BD84", ...iconProps } = props;
+
+        return (
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+                {...iconProps}
+                ref={forwardedRef}>
+                {StateIcon(state, color, colorOnState)}
+            </svg>
+        );
+    }
+);
+
+export default RadioToggleStateIcon;
+
+RadioToggleStateIcon.displayName = "RadioToggleStateIcon";

package/src/components/Icons/SwitchToggleStateIcon.tsx

@@ -0,0 +1,68 @@
+/**
+ * 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 * as React from "react";
+
+import { StateIconProps } from "./types";
+
+import { ToggleState } from "../../core";
+
+export interface SwitchToggleStateIconProps extends StateIconProps {
+    state: ToggleState;
+}
+
+const StateIcon = (
+    state: ToggleState,
+    color: string,
+    colorOnState: string,
+    colorOffState: string
+): React.ReactNode => {
+    let icon: React.ReactNode;
+
+    switch (state) {
+        case ToggleState.On:
+            icon = <circle cx="4" cy="4" r="3.75" fill={colorOnState} />;
+            break;
+        case ToggleState.Off:
+            icon = <circle cx="4" cy="4" r="3.75" fill={colorOffState} />;
+            break;
+        default:
+            icon = <circle cx="4" cy="4" r="3.75" fill={color} />;
+            break;
+    }
+
+    return icon;
+};
+
+const SwitchToggleStateIcon = React.forwardRef<SVGSVGElement, SwitchToggleStateIconProps>(
+    (props, forwardedRef) => {
+        const {
+            state,
+            color = "white",
+            colorOnState = "white",
+            colorOffState = "white",
+            ...iconProps
+        } = props;
+
+        return (
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="8"
+                height="8"
+                viewBox="0 0 8 8"
+                fill="none"
+                {...iconProps}
+                ref={forwardedRef}>
+                {StateIcon(state, color, colorOnState, colorOffState)}
+            </svg>
+        );
+    }
+);
+
+export default SwitchToggleStateIcon;
+
+SwitchToggleStateIcon.displayName = "SwitchToggleStateIcon";

package/src/components/Icons/index.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 as ChevronIcon, ChevronDirection } from "./ChevronIcon";
+
+export { default as IndicatorArrowIcon, IndicatorArrowDirection } from "./IndicatorArrowIcon";
+export { default as IndicatorBarIcon } from "./IndicatorBarIcon";
+export { default as IndicatorStateIcon } from "./IndicatorStateIcon";
+
+export { default as RadioToggleStateIcon } from "./RadioToggleStateIcon";
+export { default as SwitchToggleStateIcon } from "./SwitchToggleStateIcon";

package/src/components/Icons/types.ts

@@ -0,0 +1,20 @@
+/**
+ * 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 * as React from "react";
+
+export interface IconProps extends React.SVGAttributes<SVGElement> {
+    children?: never;
+    color?: string;
+}
+
+export interface StateIconProps extends React.SVGAttributes<SVGElement> {
+    children?: never;
+    color?: string;
+    colorOnState?: string;
+    colorOffState?: string;
+}

package/src/components/index.ts

@@ -0,0 +1,31 @@
+/**
+ * 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 { EndpointAddressProps } from "./types";
+
+export { default as FrontPanel } from "./FrontPanel";
+
+export { default as FrontPanelNumberEntry } from "./FrontPanelNumberEntry";
+export { default as FrontPanelNumberDisplay } from "./FrontPanelNumberDisplay";
+
+export { default as FrontPanelIndicator } from "./FrontPanelIndicator";
+export { default as FrontPanelPushButton } from "./FrontPanelPushButton";
+export { default as FrontPanelToggleSwitch } from "./FrontPanelToggleSwitch";
+export { default as FrontPanelTriggerButton } from "./FrontPanelTriggerButton";
+
+export { default as FrontPanelRangeSlider } from "./FrontPanelRangeSlider";
+
+export {
+    FrontPanelSelectEntry,
+    FrontPanelSelectEntryRoot
+    //SelectEntryTrigger,
+    //SelectEntryContent,
+    //SelectEntryItem,
+    //SelectEntryGroup,
+    //SelectEntryLabel,
+    //SelectEntrySeparator
+} from "./FrontPanelSelectEntry";

package/src/components/types.ts

@@ -0,0 +1,13 @@
+/**
+ * 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 { BitCount } from "@opalkelly/frontpanel-alloy-core";
+
+export interface EndpointAddressProps {
+    epAddress: number;
+    bitOffset: BitCount;
+}

package/src/contexts/FrontPanelContext.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 { IFrontPanel, IFrontPanelEventSource, WorkQueue } from "@opalkelly/frontpanel-alloy-core";
+
+export type FrontPanelContextValue = {
+    device: IFrontPanel;
+    workQueue: WorkQueue;
+    eventSource?: IFrontPanelEventSource;
+};
+
+const FrontPanelContext = React.createContext<FrontPanelContextValue>({
+    device: window.FrontPanel,
+    workQueue: new WorkQueue()
+});
+
+export default FrontPanelContext;

package/src/contexts/index.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 as FrontPanelContext } from "./FrontPanelContext";
+
+export { FrontPanelContextValue } from "./FrontPanelContext";

package/src/core/Binary.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 function CalculateBitLength(value: bigint): number {
+    let bitLength = 0;
+
+    if (value > 0n) {
+        let targetValue = value;
+
+        while (targetValue > 0n) {
+            targetValue >>= 1n; // Divide by 2
+            bitLength++;
+        }
+    } else if (value === 0n) {
+        bitLength = 1;
+    }
+
+    return bitLength;
+}