@opalkelly/frontpanel-react-components 0.1.0

package/src/primitives/SelectEntry/SelectEntryContent.tsx

@@ -0,0 +1,63 @@
+/**
+ * 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 * as SelectPrimitive from "@radix-ui/react-select";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+import classNames from "classnames";
+
+import { SelectEntryContext } from "./SelectEntryRoot";
+
+import "../../index.css";
+
+import "./SelectEntryContent.css";
+
+type SelectEntryContentElement = React.ElementRef<typeof SelectPrimitive.Content>;
+
+interface SelectContentCombinedProps
+    extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {
+    container?: React.ComponentProps<typeof SelectPrimitive.Portal>["container"];
+}
+
+export type { SelectContentCombinedProps };
+
+const SelectEntryContent = React.forwardRef<SelectEntryContentElement, SelectContentCombinedProps>(
+    (props, forwardedRef) => {
+        const { className, children, container, ...contentProps } = props;
+        const { size } = React.useContext(SelectEntryContext);
+        return (
+            <SelectPrimitive.Portal container={container}>
+                <SelectPrimitive.Content
+                    sideOffset={4}
+                    {...contentProps}
+                    ref={forwardedRef}
+                    className={classNames("okSelectEntryContent", className, "ok-r-size-" + size)}
+                    position="popper"
+                    align="start">
+                    <ScrollAreaPrimitive.Root type="auto" className="okScrollArea">
+                        <SelectPrimitive.Viewport asChild>
+                            <ScrollAreaPrimitive.Viewport className="okScrollAreaViewport">
+                                <div className="okSelectEntryContentInner">{children}</div>
+                            </ScrollAreaPrimitive.Viewport>
+                        </SelectPrimitive.Viewport>
+                        <ScrollAreaPrimitive.Scrollbar
+                            className="okScrollAreaScrollbar"
+                            orientation="vertical">
+                            <ScrollAreaPrimitive.Thumb className="okScrollAreaThumb" />
+                        </ScrollAreaPrimitive.Scrollbar>
+                    </ScrollAreaPrimitive.Root>
+                </SelectPrimitive.Content>
+            </SelectPrimitive.Portal>
+        );
+    }
+);
+
+SelectEntryContent.displayName = "SelectEntryContent";
+
+export default SelectEntryContent;

package/src/primitives/SelectEntry/SelectEntryGroup.css

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ */
+
+.okSelectEntryGroup {
+    /* Layout */
+    display: flex;
+    padding: 0px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    align-self: stretch;
+    gap: 10px;
+}

package/src/primitives/SelectEntry/SelectEntryGroup.tsx

@@ -0,0 +1,37 @@
+/**
+ * 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 * as SelectPrimitive from "@radix-ui/react-select";
+
+import classNames from "classnames";
+
+import "../../index.css";
+
+import "./SelectEntryGroup.css";
+
+type SelectEntryGroupElement = React.ElementRef<typeof SelectPrimitive.Group>;
+
+interface SelectEntryGroupCombinedProps
+    extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group> {}
+
+export type { SelectEntryGroupCombinedProps };
+
+const SelectEntryGroup = React.forwardRef<SelectEntryGroupElement, SelectEntryGroupCombinedProps>(
+    (props, forwardedRef) => (
+        <SelectPrimitive.Group
+            {...props}
+            ref={forwardedRef}
+            className={classNames("okSelectEntryGroup", props.className)}
+        />
+    )
+);
+
+SelectEntryGroup.displayName = "SelectEntryGroup";
+
+export default SelectEntryGroup;

package/src/primitives/SelectEntry/SelectEntryItem.css

@@ -0,0 +1,35 @@
+/**
+ * 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.
+ */
+
+.okSelectEntryItem {
+    /* Layout */
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    /* Style */
+    color: var(--Dark, #343434);
+    font-family: Inter, "Nunito Sans", sans-serif, ui-sans-serif;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px; /* 100% */
+
+    /* Indicator Style */
+    .okSelectEntryItemIndicator {
+        width: 14px;
+        height: 14px;
+    }
+}
+
+.okSelectEntryItem[data-disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+}
+.okSelectEntryItem[data-highlighted] {
+    outline: none;
+}

package/src/primitives/SelectEntry/SelectEntryItem.tsx

@@ -0,0 +1,51 @@
+/**
+ * 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 * as SelectPrimitive from "@radix-ui/react-select";
+
+import classNames from "classnames";
+
+import { SelectEntryContext } from "./SelectEntryRoot";
+
+import "../../index.css";
+
+import "./SelectEntryItem.css";
+
+import { ToggleState } from "../../core";
+
+import { RadioToggleStateIcon } from "../../components/Icons";
+
+type SelectEntryItemElement = React.ElementRef<typeof SelectPrimitive.Item>;
+
+interface SelectEntryItemCombinedProps
+    extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {}
+
+export type { SelectEntryItemCombinedProps };
+
+const SelectEntryItem = React.forwardRef<SelectEntryItemElement, SelectEntryItemCombinedProps>(
+    (props, forwardedRef) => {
+        const { className, children, ...itemProps } = props;
+        const { size, value } = React.useContext(SelectEntryContext);
+        return (
+            <SelectPrimitive.Item
+                {...itemProps}
+                ref={forwardedRef}
+                className={classNames("okSelectEntryItem", className, "ok-r-size-" + size)}>
+                <RadioToggleStateIcon
+                    state={value === props.value ? ToggleState.On : ToggleState.Off}
+                />
+                <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+            </SelectPrimitive.Item>
+        );
+    }
+);
+
+SelectEntryItem.displayName = "SelectEntryItem";
+
+export default SelectEntryItem;

package/src/primitives/SelectEntry/SelectEntryLabel.css

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ */
+
+.okSelectEntryLabel {
+    /* Typography */
+    color: var(--Gray-1, #989da3);
+    font-family: Inter, "Nunito Sans", sans-serif, ui-sans-serif;
+    font-size: 10px;
+    font-style: normal;
+    font-weight: 300;
+    line-height: 12px; /* 120% */
+}

package/src/primitives/SelectEntry/SelectEntryLabel.tsx

@@ -0,0 +1,43 @@
+/**
+ * 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 * as SelectPrimitive from "@radix-ui/react-select";
+
+import classNames from "classnames";
+
+import { SelectEntryContext } from "./SelectEntryRoot";
+
+import "../../index.css";
+
+import "./SelectEntryLabel.css";
+
+type SelectEntryLabelElement = React.ElementRef<typeof SelectPrimitive.Label>;
+
+interface SelectEntryLabelCombinedProps
+    extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> {}
+
+export type { SelectEntryLabelCombinedProps };
+
+const SelectEntryLabel = React.forwardRef<SelectEntryLabelElement, SelectEntryLabelCombinedProps>(
+    (props, forwardedRef) => {
+        const { className, ...labelProps } = props;
+        const { size } = React.useContext(SelectEntryContext);
+        return (
+            <SelectPrimitive.Label
+                {...labelProps}
+                ref={forwardedRef}
+                className={classNames("okSelectEntryLabel", className, "ok-r-size-" + size)}
+            />
+        );
+    }
+);
+
+SelectEntryLabel.displayName = "SelectEntryLabel";
+
+export default SelectEntryLabel;

package/src/primitives/SelectEntry/SelectEntryRoot.css

@@ -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.
+ */
+
+.okSelectEntryRootLabel {
+    width: 100%;
+}

package/src/primitives/SelectEntry/SelectEntryRoot.props.ts

@@ -0,0 +1,38 @@
+/**
+ * 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 SelectEntrySize = 1 | 2 | 3;
+
+/**
+ * Interface for the properties of the `SelectEntryRoot` component.
+ */
+interface SelectEntryRootProps {
+    /**
+     * Optional CSS class to apply to the select entry root
+     */
+    className?: string;
+
+    /**
+     * Optional label properties for the select entry root
+     */
+    label?: LabelProps;
+
+    /**
+     * Optional size of the select entry root
+     * @default 1
+     */
+    size?: SelectEntrySize;
+
+    /**
+     * Optional tooltip text to be displayed on hover
+     */
+    tooltip?: string;
+}
+
+export default SelectEntryRootProps;

package/src/primitives/SelectEntry/SelectEntryRoot.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 React from "react";
+
+import * as SelectPrimitive from "@radix-ui/react-select";
+
+import SelectEntryRootProps from "./SelectEntryRoot.props";
+
+type SelectEntryContextValue = SelectEntryRootCombinedProps;
+
+export const SelectEntryContext = React.createContext<SelectEntryContextValue>({
+    label: { text: "", horizontalPosition: "right", verticalPosition: "top" },
+    size: 1,
+    value: undefined
+});
+
+interface SelectEntryRootCombinedProps
+    extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>,
+        SelectEntryRootProps {}
+
+export type { SelectEntryRootCombinedProps };
+
+/**
+ * `SelectEntryRoot` is a React component that is the root component of a select entry. The children of this
+ * component are used to specify the component parts. The parts include the trigger that can be clicked on to
+ * show a list of options to select from, and the content that is the list of options.
+ *
+ * @component
+ * @param {object} props - Properties passed to component
+ *
+ * @returns {ReactNode} The rendered SelectEntryRoot component
+ *
+ * @example
+ * ```jsx
+ * <SelectEntryRoot>
+ *     <SelectEntry.Trigger />
+ *     <SelectEntry.Content>
+ *         <SelectEntry.Group>
+ *            <SelectEntry.Label>Options</SelectEntry.Label>
+ *            <SelectEntry.Item value="0">Option 0</SelectEntry.Item>
+ *            <SelectEntry.Item value="1">Option 1</SelectEntry.Item>
+ *        </SelectEntry.Group>
+ *     </SelectEntry.Content>
+ * </SelectEntryRoot>
+ * ```
+ */
+const SelectEntryRoot: React.FC<SelectEntryRootCombinedProps> = (props) => {
+    const { label, children, size = 1, tooltip, value, ...rootProps } = props;
+    return (
+        <SelectPrimitive.Root value={value} {...rootProps}>
+            <SelectEntryContext.Provider
+                value={React.useMemo(
+                    () => ({ label, size, tooltip, value }),
+                    [label, size, tooltip, value]
+                )}>
+                {children}
+            </SelectEntryContext.Provider>
+        </SelectPrimitive.Root>
+    );
+};
+
+SelectEntryRoot.displayName = "SelectEntryRoot";
+
+export default SelectEntryRoot;

package/src/primitives/SelectEntry/SelectEntrySeparator.css

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+
+.okSelectEntrySeparator {
+    height: 1px;
+
+    background: #d0d7df;
+}

package/src/primitives/SelectEntry/SelectEntrySeparator.tsx

@@ -0,0 +1,38 @@
+/**
+ * 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 * as SelectPrimitive from "@radix-ui/react-select";
+
+import classNames from "classnames";
+
+import "../../index.css";
+
+import "./SelectEntrySeparator.css";
+
+type SelectEntrySeparatorElement = React.ElementRef<typeof SelectPrimitive.Separator>;
+
+interface SelectEntrySeparatorCombinedProps
+    extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> {}
+
+export type { SelectEntrySeparatorCombinedProps };
+
+const SelectEntrySeparator = React.forwardRef<
+    SelectEntrySeparatorElement,
+    SelectEntrySeparatorCombinedProps
+>((props, forwardedRef) => (
+    <SelectPrimitive.Separator
+        {...props}
+        ref={forwardedRef}
+        className={classNames("okSelectEntrySeparator", props.className)}
+    />
+));
+
+SelectEntrySeparator.displayName = "SelectEntrySeparator";
+
+export default SelectEntrySeparator;

package/src/primitives/SelectEntry/SelectEntryTrigger.css

@@ -0,0 +1,49 @@
+/**
+ * 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.
+ */
+
+.okSelectEntryTrigger {
+    /* Layout */
+    display: flex;
+    padding: 0px 18px;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+
+    /* Style */
+    border-radius: 4px;
+    border: 1px solid var(--Gray-2, #d0d7df);
+    background: var(--Light, #fff);
+
+    /* Typography */
+    color: var(--Dark, #343434);
+    font-family: Inter, "Nunito Sans", sans-serif, ui-sans-serif;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px; /* 100% */
+
+    /* State Disabled */
+    &:is(:disabled) {
+        opacity: 0.5;
+        background: var(--Gray-3, #e7ebef);
+    }
+}
+
+.okSelectEntryTriggerInner {
+    /* Layout */
+    padding: 10px 0px;
+
+    /* Style */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* State Disabled */
+.okSelectEntryTrigger[data-disabled="true"] {
+    opacity: 0.5;
+}

package/src/primitives/SelectEntry/SelectEntryTrigger.props.ts

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ */
+
+/**
+ * Interface for the properties of the `SelectEntryTrigger` component.
+ */
+interface SelectEntryTriggerProps {
+    /**
+     * Optional placeholder text to be displayed when no value is selected
+     */
+    placeholder?: string;
+}
+
+export default SelectEntryTriggerProps;

package/src/primitives/SelectEntry/SelectEntryTrigger.tsx

@@ -0,0 +1,111 @@
+/**
+ * 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, { useContext } from "react";
+
+import * as SelectPrimitive from "@radix-ui/react-select";
+
+import classNames from "classnames";
+
+import { SelectEntryContext } from "./SelectEntryRoot";
+
+import SelectEntryTriggerProps from "./SelectEntryTrigger.props";
+
+import "../../index.css";
+
+import "./SelectEntryTrigger.css";
+
+import { ChevronIcon, ChevronDirection } from "../../components/Icons";
+
+import Label from "../Label";
+import Tooltip from "../Tooltip";
+
+type SelectEntryTriggerElement = React.ElementRef<typeof SelectPrimitive.Trigger>;
+
+interface SelectEntryTriggerCombinedProps
+    extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, "asChild">,
+        SelectEntryTriggerProps {}
+
+export type { SelectEntryTriggerCombinedProps };
+
+const SelectEntryTrigger = React.forwardRef<
+    SelectEntryTriggerElement,
+    SelectEntryTriggerCombinedProps
+>((props, forwardedRef) => {
+    const { label, tooltip, ...triggerProps } = useContext(SelectEntryContext);
+
+    const showLabel = label != null;
+    const showTooltip = tooltip != null;
+
+    if (showLabel && showTooltip) {
+        return (
+            <Label {...label}>
+                <Tooltip content={tooltip}>
+                    <SelectEntryTriggerImpl
+                        ref={forwardedRef}
+                        {...props}
+                        style={{ width: "100%" }}
+                    />
+                </Tooltip>
+            </Label>
+        );
+    } else if (showLabel) {
+        return (
+            <Label {...label}>
+                <SelectEntryTriggerImpl
+                    ref={forwardedRef}
+                    {...triggerProps}
+                    style={{ width: "100%" }}
+                />
+            </Label>
+        );
+    } else if (showTooltip) {
+        return (
+            <Tooltip content={tooltip}>
+                <div>
+                    <SelectEntryTriggerImpl ref={forwardedRef} {...triggerProps} />
+                </div>
+            </Tooltip>
+        );
+    } else {
+        return <SelectEntryTriggerImpl ref={forwardedRef} {...triggerProps} />;
+    }
+});
+
+SelectEntryTrigger.displayName = "SelectEntryTrigger";
+
+export default SelectEntryTrigger;
+
+interface SelectTriggerEntryImplProps
+    extends Omit<React.ComponentPropsWithoutRef<typeof SelectEntryTrigger>, "label" | "tooltip"> {}
+
+const SelectEntryTriggerImpl = React.forwardRef<
+    SelectEntryTriggerElement,
+    SelectTriggerEntryImplProps
+>((props, forwardedRef) => {
+    const { className, placeholder, ...triggerProps } = props;
+
+    const { size } = React.useContext(SelectEntryContext);
+
+    return (
+        <SelectPrimitive.Trigger asChild>
+            <button
+                {...triggerProps}
+                ref={forwardedRef}
+                className={classNames("okSelectEntryTrigger", className, "ok-r-size-" + size)}>
+                <span className="okSelectEntryTriggerInner">
+                    <SelectPrimitive.Value placeholder={placeholder} />
+                </span>
+                <SelectPrimitive.Icon asChild>
+                    <ChevronIcon direction={ChevronDirection.Down} />
+                </SelectPrimitive.Icon>
+            </button>
+        </SelectPrimitive.Trigger>
+    );
+});
+
+SelectEntryTriggerImpl.displayName = "SelectEntryTriggerImpl";

package/src/primitives/SelectEntry/index.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.
+ */
+
+export { default } from "./SelectEntry";
+export { default as SelectEntryRoot } from "./SelectEntryRoot";
+export { default as SelectEntryTrigger } from "./SelectEntryTrigger";
+export { default as SelectEntryContent } from "./SelectEntryContent";
+export { default as SelectEntryItem } from "./SelectEntryItem";
+export { default as SelectEntryGroup } from "./SelectEntryGroup";
+export { default as SelectEntryLabel } from "./SelectEntryLabel";
+export { default as SelectEntrySeparator } from "./SelectEntrySeparator";
+
+export { default as SelectEntryRootProps } from "./SelectEntryRoot.props";
+export { SelectEntrySize } from "./SelectEntryRoot.props";
+
+export { default as SelectEntryTriggerProps } from "./SelectEntryTrigger.props";