@opalkelly/frontpanel-react-components 0.1.0

package/src/primitives/Tooltip/Tooltip.tsx

@@ -0,0 +1,91 @@
+/**
+ * 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 TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import TooltipProps from "./Tooltip.props";
+
+import "../../index.css";
+
+import "./Tooltip.css";
+
+type TooltipElement = React.ElementRef<typeof TooltipPrimitive.Content>;
+
+interface TooltipCombinedProps
+    extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>,
+        Omit<React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>, "content">,
+        TooltipProps {
+    content: NonNullable<TooltipProps["content"]>;
+    container?: React.ComponentProps<typeof TooltipPrimitive.Portal>["container"];
+}
+
+export type { TooltipCombinedProps };
+
+/**
+ * `Tooltip` is a React component that displays a popup with text when the mouse cursor hovers
+ * over the child component.
+ *
+ * @component *
+ * @param {object} props - Properties passed to component
+ * @param {React.Ref} forwardedRef - Forwarded ref for the button
+ *
+ * @returns {ReactElement} The rendered Tooltip component
+ *
+ * @example
+ * ```jsx
+ * <Tooltip content="Tooltip text">
+ *   <button>Hover over me</button>
+ * </Tooltip>
+ * ```
+ */
+const Tooltip = React.forwardRef<TooltipElement, TooltipCombinedProps>((props, forwardedRef) => {
+    const {
+        children,
+        className,
+        open,
+        defaultOpen,
+        onOpenChange,
+        delayDuration,
+        disableHoverableContent,
+        content,
+        container,
+        forceMount,
+        ...tooltipContentProps
+    } = props;
+
+    const rootProps = {
+        open,
+        defaultOpen,
+        onOpenChange,
+        delayDuration,
+        disableHoverableContent
+    };
+
+    return (
+        <TooltipPrimitive.Root {...rootProps}>
+            <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+            <TooltipPrimitive.Portal container={container} forceMount={forceMount}>
+                <TooltipPrimitive.Content
+                    sideOffset={4}
+                    collisionPadding={10}
+                    {...tooltipContentProps}
+                    ref={forwardedRef}
+                    className={classNames("okTooltipContent", className)}>
+                    <p className="okTooltipText">{content}</p>
+                </TooltipPrimitive.Content>
+            </TooltipPrimitive.Portal>
+        </TooltipPrimitive.Root>
+    );
+});
+
+export default Tooltip;
+
+Tooltip.displayName = "Tooltip";

package/src/primitives/Tooltip/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 "./Tooltip";
+
+export { default as TooltipProps } from "./Tooltip.props";

package/src/primitives/TooltipUtility.tsx

@@ -0,0 +1,24 @@
+/**
+ * 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, { ReactNode } from "react";
+
+import Tooltip from "./Tooltip";
+
+interface TooltipProps {
+    tooltip?: string;
+}
+
+export function withTooltip<T extends TooltipProps>(targetComponent: ReactNode) {
+    return function ComponentWithTooltip(props: T) {
+        if (props.tooltip != null) {
+            return <Tooltip content={props.tooltip}>{targetComponent}</Tooltip>;
+        } else {
+            return targetComponent;
+        }
+    };
+}

package/src/primitives/index.ts

@@ -0,0 +1,44 @@
+/**
+ * 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 Application } from "./Application";
+
+export { default as Button } from "./Button";
+export { ButtonSize, ButtonStateChangeEventHandler, ButtonClickEventHandler } from "./Button";
+
+export { default as Indicator } from "./Indicator";
+export { IndicatorSize, IndicatorState } from "./Indicator";
+
+export { default as Label } from "./Label";
+export { LabelHorizontalPosition, LabelVerticalPosition } from "./Label";
+
+export { default as NumberDisplay } from "./NumberDisplay";
+export { NumberDisplaySize } from "./NumberDisplay";
+
+export { default as NumberEntry } from "./NumberEntry";
+export { NumberEntrySize, NumberEntryValueChangeEventHandler } from "./NumberEntry";
+
+export { default as RangeSlider } from "./RangeSlider";
+
+export {
+    default as SelectEntry,
+    SelectEntryRoot,
+    SelectEntryTrigger,
+    SelectEntryContent,
+    SelectEntryItem,
+    SelectEntryGroup,
+    SelectEntryLabel,
+    SelectEntrySeparator
+} from "./SelectEntry";
+export { SelectEntrySize } from "./SelectEntry";
+
+export { default as Toggle } from "./Toggle";
+export { ToggleSize, ToggleStateChangeEventHandler } from "./Toggle";
+
+export { default as ToggleSwitch } from "./ToggleSwitch";
+
+export { default as Tooltip } from "./Tooltip";

package/src/stories/decorators/Application.decorator.tsx

@@ -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 React from "react";
+
+import type { Decorator } from "@storybook/react";
+
+import Application from "../../primitives/Application";
+
+const withApplication: Decorator = (Story) => (
+    <Application>
+        <Story />
+    </Application>
+);
+
+export default withApplication;

package/src/stories/decorators/FrontPanel.decorator.tsx

@@ -0,0 +1,47 @@
+/**
+ * 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 { Decorator } from "@storybook/react";
+
+import { FrontPanel } from "../../components";
+
+import { MockFrontPanel, ByteCount } from "@opalkelly/frontpanel-alloy-core";
+
+const mockDevice: MockFrontPanel = new MockFrontPanel(32, 32);
+
+const InitializeMockDevice = () => {
+    // Initialize the WireOuts with unique values.
+    const wireOutBlock = mockDevice.WireOutBlock;
+
+    let byteId: ByteCount = 0;
+
+    for (let elementIndex = 0; elementIndex < wireOutBlock.Count; elementIndex++) {
+        let elementValue: number = byteId++;
+        for (let byteIndex = 1; byteIndex < 4; byteIndex++) {
+            elementValue |= byteId++ << (8 * byteIndex);
+        }
+
+        wireOutBlock.SetValue(
+            wireOutBlock.BaseAddress + elementIndex,
+            elementValue,
+            wireOutBlock.Mask
+        );
+    }
+};
+
+const withFrontPanel: Decorator = (Story) => {
+    InitializeMockDevice();
+    return (
+        <FrontPanel device={mockDevice}>
+            <Story />
+        </FrontPanel>
+    );
+};
+
+export default withFrontPanel;