@opalkelly/frontpanel-react-components 0.1.0

package/src/primitives/Toggle/Toggle.css

@@ -0,0 +1,67 @@
+/**
+ * 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.
+ */
+
+.okToggle {
+    /* Layout */
+    display: inline-flex;
+    padding: var(--toggle-padding, 6px 12px);
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+
+    color: var(--base-white, #fff);
+
+    /* Style */
+    border-width: 0px;
+    border-radius: 4px;
+    background: var(--brand-12, #44bd84);
+
+    /* Typography */
+    color: var(--Base-White, #fff);
+    text-align: center;
+    font-family: Inter, "Nunito Sans", sans-serif, ui-sans-serif;
+    font-size: var(--toggle-font-size, 12px);
+    font-style: normal;
+    font-weight: 600;
+    line-height: 12px; /* 100% */
+
+    /* Size 1 */
+    &:where(.ok-r-size-1) {
+        --toggle-padding: 6px 12px;
+        --toggle-font-size: 12px;
+        --toggle-line-height: 12px;
+    }
+
+    /* Size 2 */
+    &:where(.ok-r-size-2) {
+        --toggle-padding: 10px 18px;
+        --toggle-font-size: 14px;
+        --toggle-line-height: 14px;
+    }
+
+    /* Size 3 */
+    &:where(.ok-r-size-3) {
+        --toggle-padding: 18px 22px;
+        --toggle-font-size: 20px;
+        --toggle-line-height: 20px;
+    }
+}
+
+/* State Disabled */
+.okToggle[data-disabled="true"] {
+    background: var(--Gray-2, #d0d7df);
+}
+
+/* State On */
+.okToggle[data-state="on"]:not([data-disabled="true"]) {
+    background: #329466;
+}
+
+/* State Off */
+.okToggle[data-state="off"]:not([data-disabled="true"]) {
+    background: var(--brand-12, #44bd84);
+}

package/src/primitives/Toggle/Toggle.props.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.
+ */
+
+import { ToggleState } from "../../core";
+
+export type ToggleSize = 1 | 2 | 3;
+export type ToggleStateChangeEventHandler = (state: ToggleState) => void;
+
+/**
+ * Interface for the properties of the `Toggle` component.
+ */
+interface ToggleProps extends React.PropsWithChildren<NonNullable<unknown>> {
+    /**
+     * Current state of the toggle, defined in ToggleState
+     */
+    state: ToggleState;
+
+    /**
+     * Optional CSS class to apply to the toggle
+     */
+    className?: string;
+
+    /**
+     * Optional size of the toggle
+     * @default 1
+     */
+    size?: ToggleSize;
+
+    /**
+     * Optional tooltip text to be displayed on hover
+     */
+    tooltip?: string;
+
+    /**
+     * Optional event handler for the toggle state change event
+     */
+    onToggleStateChanged?: ToggleStateChangeEventHandler;
+}
+
+export default ToggleProps;

package/src/primitives/Toggle/Toggle.stories.tsx

@@ -0,0 +1,61 @@
+/**
+ * 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 Toggle from "./Toggle";
+
+import { ToggleState } from "../../core";
+
+// Configure Story metadata
+const meta = {
+    title: "Components/Toggle",
+    component: Toggle,
+    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 }
+        },
+        state: {
+            control: "radio",
+            options: ["On", "Off"],
+            mapping: {
+                On: ToggleState.On,
+                Off: ToggleState.Off
+            }
+        },
+        disabled: { control: "boolean" },
+        // Disable event callback arguments
+        onToggleStateChanged: {
+            control: { disable: true }
+        }
+    }
+} satisfies Meta<typeof Toggle>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// Primary Story
+export const Primary: Story = {
+    render: (args) => (
+        <Toggle {...args}>
+            <span>Toggle</span>
+        </Toggle>
+    ),
+    args: {
+        state: ToggleState.Off,
+        // Optional Properties
+        disabled: false,
+        size: 1
+    }
+};

package/src/primitives/Toggle/Toggle.tsx

@@ -0,0 +1,90 @@
+/**
+ * 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 ToggleProps from "./Toggle.props";
+
+import "../../index.css";
+
+import "./Toggle.css";
+
+import { ToggleState } from "../../core";
+
+type ToggleElement = React.ElementRef<"button">;
+
+interface ToggleCombinedProps extends React.ComponentPropsWithoutRef<"button">, ToggleProps {}
+
+export type { ToggleCombinedProps };
+
+/**
+ * `Toggle` is a React component that renders a toggle button to toggle between an "on" and "off"
+ * state when the button is clicked. Notification of the state transtion is provided through the
+ * `onToggleStateChanged` event handler.
+ *
+ * @component
+ * @param {Object} props - The properties that define the `Toggle` component.
+ * @param {React.Ref<ToggleElement>} forwardedRef - A ref that is forwarded to the `Toggle` component.
+ *
+ * @returns {React.ReactElement} The `Toggle` component.
+ *
+ * @example
+ * ```jsx
+ * <Toggle
+ *    state={ToggleState.On}
+ *    onToggleStateChanged={(newState) => console.log(newState)}>
+ *   <span>Toggle<span>
+ * </Toggle>
+ * ```
+ */
+const Toggle = React.forwardRef<ToggleElement, ToggleCombinedProps>((props, forwardedRef) => {
+    const {
+        className,
+        size = 1,
+        disabled = false,
+        tooltip,
+        state,
+        children,
+        onToggleStateChanged,
+        ...toggleProps
+    } = props;
+
+    const dataState: string = React.useMemo(() => {
+        switch (state) {
+            case ToggleState.On:
+                return "on";
+            case ToggleState.Off:
+                return "off";
+            default:
+                return "indeterminate";
+        }
+    }, [state]);
+
+    const OnButtonClick = React.useCallback((): void => {
+        const newState: ToggleState = state === ToggleState.On ? ToggleState.Off : ToggleState.On;
+
+        onToggleStateChanged?.(newState);
+    }, [state]);
+
+    return (
+        <button
+            data-disabled={disabled || undefined}
+            ref={forwardedRef}
+            {...toggleProps}
+            className={classNames("okToggle", className, "ok-r-size-" + size)}
+            data-state={dataState}
+            onClick={OnButtonClick}>
+            {children}
+        </button>
+    );
+});
+
+Toggle.displayName = "Toggle";
+
+export default Toggle;

package/src/primitives/Toggle/index.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 "./Toggle";
+
+export { default as ToggleProps } from "./Toggle.props";
+export { ToggleSize, ToggleStateChangeEventHandler } from "./Toggle.props";

package/src/primitives/ToggleSwitch/ToggleSwitch.css

@@ -0,0 +1,118 @@
+/**
+ * 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.
+ */
+
+.okToggleSwitchRoot {
+    /* Layout */
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+
+    /* Style */
+    border-radius: 4px;
+
+    /* Switch Style */
+    .okToggleSwitch {
+        /* Layout */
+        display: flex;
+        width: var(--toggle-switch-width, 16.5px);
+        height: var(--toggle-switch-height, 9px);
+        padding: var(--toggle-switch-padding, 0.75px);
+        align-items: center;
+
+        /* Style */
+        border-width: 0px;
+        border-radius: var(--toggle-switch-border-radius, 4.5px);
+        background: var(--Gray-2, #d0d7df);
+
+        /* Switch Icon Style */
+        .okIndicatorIcon {
+            width: var(--toggle-switch-icon-width, 9px);
+            height: var(--toggle-switch-icon-height, 9px);
+        }
+    }
+
+    /* Label Style */
+    .okToggleSwitchLabel {
+        /* Typography */
+        color: var(--Dark, #343434);
+        text-align: center;
+        font-family: Inter, "Nunito Sans", sans-serif, ui-sans-serif;
+        font-size: var(--toggle-switch-font-size, 12px);
+        font-style: normal;
+        font-weight: 500;
+        line-height: var(--toggle-switch-line-height, 12px); /* 100% */
+    }
+
+    /* Size 1 */
+    &:where(.ok-r-size-1) {
+        --toggle-switch-width: 16.5px;
+        --toggle-switch-height: 9px;
+
+        --toggle-switch-padding: 0.75px;
+        --toggle-switch-border-radius: 4.5px;
+
+        --toggle-switch-font-size: 12px;
+        --toggle-switch-line-height: 12px;
+
+        --toggle-switch-icon-width: 7.5px;
+        --toggle-switch-icon-height: 7.5px;
+    }
+
+    /* Sizes 2*/
+    &:where(.ok-r-size-2) {
+        --toggle-switch-width: 18.333px;
+        --toggle-switch-height: 10px;
+
+        --toggle-switch-padding: 0.883px;
+        --toggle-switch-border-radius: 5px;
+
+        --toggle-switch-font-size: 14px;
+        --toggle-switch-line-height: 14px;
+
+        --toggle-switch-icon-width: 8.33px;
+        --toggle-switch-icon-height: 8.33px;
+    }
+
+    /* Sizes 3*/
+    &:where(.ok-r-size-3) {
+        --toggle-switch-width: 27.5px;
+        --toggle-switch-height: 15px;
+
+        --toggle-switch-padding: 1.25px;
+        --toggle-switch-border-radius: 7.5px;
+
+        --toggle-switch-font-size: 20px;
+        --toggle-switch-line-height: 20px;
+
+        --toggle-switch-icon-width: 12.5px;
+        --toggle-switch-icon-height: 12.5px;
+    }
+}
+
+/* State Disabled */
+.okToggleSwitchRoot[data-disabled="true"] {
+    opacity: 0.5;
+}
+
+/* State On */
+.okToggleSwitch[data-state="on"] {
+    justify-content: flex-end;
+}
+
+.okToggleSwitch[data-state="on"]:not([data-disabled="true"]) {
+    background: var(--brand-12, #44bd84);
+}
+
+/* State Off */
+.okToggleSwitch[data-state="off"] {
+    justify-content: flex-start;
+}
+
+.okToggleSwitch[data-state="off"]:not([data-disabled="true"]) {
+    background: var(--Gray-2, #d0d7df);
+}

package/src/primitives/ToggleSwitch/ToggleSwitch.props.ts

@@ -0,0 +1,26 @@
+/**
+ * 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 ToggleProps from "../Toggle/Toggle.props";
+
+/**
+ * Interface for the properties of the `ToggleSwitch` component.
+ */
+interface ToggleSwitchProps extends ToggleProps {
+    /**
+     * Label to be displayed on the toggle switch
+     */
+    label: string;
+
+    /**
+     * Optional disable the toggle switch
+     * @default false
+     */
+    disabled?: boolean;
+}
+
+export default ToggleSwitchProps;

package/src/primitives/ToggleSwitch/ToggleSwitch.stories.tsx

@@ -0,0 +1,85 @@
+/**
+ * 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 ToggleSwitch from "./ToggleSwitch";
+
+import { ToggleState } from "../../core";
+
+// Configure Story metadata
+const meta = {
+    title: "Components/ToggleSwitch",
+    component: ToggleSwitch,
+    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 }
+        },
+        state: {
+            control: "radio",
+            options: ["On", "Off"],
+            mapping: {
+                On: ToggleState.On,
+                Off: ToggleState.Off
+            }
+        },
+        disabled: { control: "boolean" },
+        // Disable event callback arguments
+        onToggleStateChanged: {
+            control: { disable: true }
+        }
+    }
+} satisfies Meta<typeof ToggleSwitch>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// Template for Stories
+const ComponentTemplate: Story = {
+    render: (args) => {
+        const [{ state }, updateArgs] = useArgs();
+
+        function onToggleStateChange(state: ToggleState): void {
+            updateArgs({ state: state });
+        }
+
+        return <ToggleSwitch {...args} state={state} onToggleStateChanged={onToggleStateChange} />;
+    },
+    decorators: [withApplication],
+    args: {
+        label: "Toggle",
+        state: ToggleState.On,
+        // Optional Properties
+        disabled: false,
+        size: 1,
+        tooltip: "Toggle switch tooltip"
+    }
+};
+
+// Primary Story
+export const Primary: Story = {
+    ...ComponentTemplate,
+    args: {
+        label: "Toggle",
+        state: ToggleState.On,
+        // Optional Properties
+        disabled: false,
+        size: 1,
+        tooltip: "Toggle switch tooltip"
+    }
+};

package/src/primitives/ToggleSwitch/ToggleSwitch.tsx

@@ -0,0 +1,73 @@
+/**
+ * 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 Toggle from "../Toggle/Toggle";
+
+import ToggleSwitchProps from "./ToggleSwitch.props";
+
+import "../../index.css";
+
+import "./ToggleSwitch.css";
+
+import { withTooltip } from "../TooltipUtility";
+
+import { SwitchToggleStateIcon } from "../../components/Icons";
+
+type ToggleSwitchElement = React.ElementRef<typeof Toggle>;
+
+/**
+ * `ToggleSwitch` is a React component that renders a toggle switch with a label and a switch button
+ * that represents the current toggle state. When the switch is clicked, the toggle
+ * state will transition to the next state. Notification of the state transtion is provided through the
+ * `onToggleStateChanged` event handler.
+ *
+ * @component
+ * @param {Object} props - Properties passed to component
+ * @param {React.Ref<ToggleSwitchElement>} forwardedRef - Forwarded ref for the button
+ *
+ * @returns {React.ReactElement} The rendered ToggleSwitch component
+ *
+ * @example
+ * ```jsx
+ * <ToggleSwitch
+ *     label="Toggle"
+ *     state={ToggleState.On}
+ *     onToggleStateChanged={(newState) => console.log(newState)} />
+ * ```
+ */
+const ToggleSwitch = React.forwardRef<ToggleSwitchElement, ToggleSwitchProps>(
+    (props, forwardedRef) => {
+        const { className, size = 1, label, disabled = false, state, ...toggleSwitchProps } = props;
+
+        const ToggleButtonWithTooltip = withTooltip(
+            <span
+                className={classnames("okToggleSwitchRoot", className, "ok-r-size-" + size)}
+                data-disabled={disabled || undefined}>
+                <Toggle
+                    className={classnames("okToggleSwitch")}
+                    ref={forwardedRef}
+                    {...toggleSwitchProps}
+                    size={size}
+                    disabled={disabled}
+                    state={state}>
+                    <SwitchToggleStateIcon className="okIndicatorIcon" state={state} />
+                </Toggle>
+                <span className={classnames("okToggleSwitchLabel")}>{label}</span>
+            </span>
+        );
+
+        return <ToggleButtonWithTooltip {...props} />;
+    }
+);
+
+ToggleSwitch.displayName = "ToggleSwitch";
+
+export default ToggleSwitch;

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

package/src/primitives/Tooltip/Tooltip.css

@@ -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.
+ */
+
+.okTooltipContent {
+    /* Layout */
+    display: flex;
+    padding: 10px;
+    align-items: flex-end;
+
+    /* Style */
+    border-radius: 4px;
+    background: var(--Dark, #343434);
+
+    /* Drop shadow - tiny */
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.24);
+
+    user-select: none;
+    animation-duration: 200ms;
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+    will-change: transform, opacity;
+}
+
+.okTooltipContent[data-state="delayed-open"][data-side="top"] {
+    animation-name: slideDownAndFade;
+}
+.okTooltipContent[data-state="delayed-open"][data-side="right"] {
+    animation-name: slideLeftAndFade;
+}
+.okTooltipContent[data-state="delayed-open"][data-side="bottom"] {
+    animation-name: slideUpAndFade;
+}
+.okTooltipContent[data-state="delayed-open"][data-side="left"] {
+    animation-name: slideRightAndFade;
+}
+
+.okTooltipText {
+    /* Typography */
+    color: var(--Light, #fff);
+    text-align: center;
+    font-family: Inter, "Nunito Sans", sans-serif, ui-sans-serif;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 12px; /* 100% */
+}
+
+@keyframes slideUpAndFade {
+    from {
+        opacity: 0;
+        transform: translateY(2px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes slideRightAndFade {
+    from {
+        opacity: 0;
+        transform: translateX(-2px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes slideDownAndFade {
+    from {
+        opacity: 0;
+        transform: translateY(-2px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes slideLeftAndFade {
+    from {
+        opacity: 0;
+        transform: translateX(2px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}

package/src/primitives/Tooltip/Tooltip.props.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 { ReactNode } from "react";
+
+/**
+ * Interface for the properties of the `Tooltip` component.
+ */
+interface TooltipProps extends React.PropsWithChildren<NonNullable<unknown>> {
+    /**
+     * Content to be displayed within the tooltip
+     */
+    content: ReactNode;
+}
+
+export default TooltipProps;