@agility/plenum-ui 2.2.8 → 2.3.0

package/stories/molecules/inputs/select/Select.tsx

@@ -1,13 +1,24 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import InputLabel from "@/stories/molecules/inputs/InputLabel";
+import { DynamicIcon } from "@/stories/atoms/icons/DynamicIcon";
 import { useId } from "@/utils/useId";
 import { default as cn } from "classnames";
-import Paragraph from "@/stories/atoms/Typography/Paragraph/Paragraph";
+import {
+	Combobox as HeadlessCombobox,
+	ComboboxInput,
+	ComboboxButton,
+	ComboboxOptions,
+	ComboboxOption
+} from "@headlessui/react";
+import { Paragraph } from "@/stories/atoms/Typography/Paragraph";
 
 export interface ISimpleSelectOptions {
 	label: string;
 	value: string;
+	emoji?: string;
+	description?: string;
 }
+
 export interface ISelectProps {
 	/** Label */
 	label?: string;
@@ -17,7 +28,7 @@ export interface ISelectProps {
 	name?: string;
 	/** List of options to display in the select menu */
 	options: ISimpleSelectOptions[];
-	/** Select name prop */
+	/** Called with the selected option's value string */
 	onChange?(value: string): void;
 	/** Select disabled state */
 	isDisabled?: boolean;
@@ -30,7 +41,11 @@ export interface ISelectProps {
 	onFocus?: () => void;
 	onBlur?: () => void;
 	message?: string;
+	inputRef?: React.RefObject<HTMLInputElement>;
+	placeholder?: string;
+	dropdownMaxHeight?: number;
 }
+
 const Select: React.FC<ISelectProps> = ({
 	label,
 	id,
@@ -44,57 +59,128 @@ const Select: React.FC<ISelectProps> = ({
 	className,
 	onFocus,
 	onBlur,
-	message
+	message,
+	inputRef,
+	placeholder = "Select",
+	dropdownMaxHeight = 240
 }) => {
-	const [selectedOption, setSelectedOption] = useState<string>(value || options[0].value);
 	const uniqueID = useId();
 	if (!id) id = `select-${uniqueID}`;
 	if (!name) name = id;
 
+	const findOption = (val?: string) => options.find((o) => o.value === val) ?? null;
+
+	const [selectedOption, setSelectedOption] = useState<ISimpleSelectOptions | null>(findOption(value));
+
 	useEffect(() => {
-		if (value !== undefined && value !== null) {
-			setSelectedOption(value);
-		}
+		setSelectedOption(findOption(value));
 	}, [value]);
 
-	const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-		const targetValue = e.target.value;
-		typeof onChange == "function" && onChange(targetValue);
-		setSelectedOption(targetValue);
+	const handleChange = (option: ISimpleSelectOptions | null) => {
+		setSelectedOption(option);
+		if (option && typeof onChange === "function") {
+			onChange(option.value);
+		}
 	};
-	const wrapperStyle = cn("group", { "opacity-50": isDisabled });
+
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [containerWidth, setContainerWidth] = useState<number | undefined>();
+
+	useLayoutEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const observer = new ResizeObserver(([entry]) => setContainerWidth(entry.contentRect.width));
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
+
+	const wrapperStyle = cn(className, "w-full", "group", { "opacity-50 pointer-events-none": isDisabled });
+
 	return (
 		<div className={wrapperStyle}>
-			{label && <InputLabel isActive label={label} isRequired={isRequired} id={id} isDisabled={isDisabled} />}
-			<select
-				id={id}
-				name={name}
-				className={cn(
-					"block w-full border-gray-300 py-2 pl-3 pr-10 text-base focus:outline-none",
-					"rounded focus:border-purple-500 focus:ring-purple-500 sm:text-sm",
-					{ "border-red-500": isError },
-					{ "border-gray-300": !isError },
-					className
+			{label && <InputLabel id={`${id}-label`} label={label} isRequired={isRequired} />}
+
+			<HeadlessCombobox value={selectedOption} onChange={handleChange} disabled={isDisabled} immediate by="value">
+				<div ref={containerRef} className="relative w-full">
+					<div
+						className={cn(
+							"relative w-full cursor-default overflow-hidden rounded border bg-white text-left shadow-sm",
+							"focus-within:border-primary-800 focus-within:ring-1 focus-within:ring-primary-800",
+							{ "border-red-500": isError, "border-gray-300": !isError }
+						)}
+					>
+						<ComboboxInput
+							id={id}
+							name={name}
+							ref={inputRef}
+							readOnly
+							displayValue={(option: ISimpleSelectOptions | null) => (option ? option.label : "")}
+							placeholder={placeholder}
+							onFocus={onFocus}
+							onBlur={onBlur}
+							className={cn(
+								"w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-700",
+								"placeholder:text-gray-400",
+								"focus:outline-none focus:ring-0",
+								"bg-transparent cursor-default"
+							)}
+						/>
+
+						<ComboboxButton className="absolute inset-y-0 right-0 flex items-center pr-3">
+							{({ open }) => (
+								<DynamicIcon
+									icon="IconChevronDown"
+									className={cn("h-4 w-4 text-gray-400 transition-transform", { "rotate-180": open })}
+									aria-hidden="true"
+								/>
+							)}
+						</ComboboxButton>
+					</div>
+
+					<ComboboxOptions
+						anchor="bottom start"
+						style={
+							{
+								"--anchor-max-height": `${dropdownMaxHeight}px`,
+								minWidth: containerWidth
+							} as React.CSSProperties
+						}
+						className={cn(
+							"z-[9999] overflow-auto rounded bg-white py-1",
+							"text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none",
+							"[--anchor-gap:8px]"
+						)}
+					>
+						{options.map((option) => (
+							<ComboboxOption
+								key={option.value}
+								value={option}
+								className={({ focus }) =>
+									cn(
+										"relative cursor-default select-none mx-xxsm rounded",
+										focus ? "bg-gray-100 text-gray-900" : "text-gray-700"
+									)
+								}
+							>
+								{({ selected }) => (
+									<div className="py-xxsm px-sm flex items-center gap-xsm">
+										<Paragraph size="md">{option.label}</Paragraph>
+										{option.description ? (
+											<Paragraph size="md" className="text-neutral-500">{option.description}</Paragraph>
+										) : null}
+									</div>
+								)}
+							</ComboboxOption>
+						))}
+					</ComboboxOptions>
+				</div>
+
+				{message && (
+					<Paragraph size="md" className={isError ? "text-red-600" : "text-gray-500 pt-xxsm"}>
+						{message}
+					</Paragraph>
 				)}
-				onChange={handleChange}
-				disabled={isDisabled}
-				value={selectedOption}
-				onFocus={onFocus}
-				onBlur={onBlur}
-			>
-				{options.map(({ value, label }) => {
-					return (
-						<option key={value} value={value}>
-							{label}
-						</option>
-					);
-				})}
-			</select>
-			{message && (
-				<Paragraph size="md" className={isError ? "text-red-600" : "text-gray-500"}>
-					{message}
-				</Paragraph>
-			)}
+			</HeadlessCombobox>
 		</div>
 	);
 };

package/tailwind.config.js

@@ -52,6 +52,72 @@ module.exports = {
 				header: "max-content 1fr 1fr"
 			},
 			colors: {
+				"neutral-50": "#F7F7F7",
+				"neutral-100": "#F2F2F2",
+				"neutral-200": "#E5E7EB",
+				"neutral-300": "#D1D5DB",
+				"neutral-400": "#9CA3aF",
+				"neutral-500": "#6B7280",
+				"neutral-600": "#4B5563",
+				"neutral-700": "#374151",
+				"neutral-800": "#1F2937",
+				"neutral-900": "#111827",
+
+				"primary-50": "#F7F7F7",
+				"primary-100": "#EDE9FE",
+				"primary-200": "#DDD6FE",
+				"primary-300": "#C4B5FD",
+				"primary-400": "#A78BFA",
+				"primary-500": "#8B5CF6",
+				"primary-600": "#7C3AED",
+				"primary-700": "#6D28D9",
+				"primary-800": "#5B21B6",
+				"primary-900": "#4C1D95",
+
+				"secondary-50": "#FFFAEA",
+				"secondary-100": "#FFF5D4",
+				"secondary-200": "#FFEAA9",
+				"secondary-300": "#FFE07E",
+				"secondary-400": "#FFD553",
+				"secondary-500": "#FFCB28",
+				"secondary-600": "#F2C126",
+				"secondary-700": "#D9AD22",
+				"secondary-800": "#BF981E",
+				"secondary-900": "#997A18",
+
+				"success-50": "#ECFDF5",
+				"success-100": "#D1FAE5",
+				"success-200": "#A7F3D0",
+				"success-300": "#6EE7B7",
+				"success-400": "#34D399",
+				"success-500": "#10B981",
+				"success-600": "#059669",
+				"success-700": "#047857",
+				"success-800": "#065F46",
+				"success-900": "#064E3B",
+
+				"warning-50": "#FFF7ED",
+				"warning-100": "#FFEDD5",
+				"warning-200": "#FED7AA",
+				"warning-300": "#FDBA74",
+				"warning-400": "#FB923C",
+				"warning-500": "#F97316",
+				"warning-600": "#EA580C",
+				"warning-700": "#C2410C",
+				"warning-800": "#9A3412",
+				"warning-900": "#7C2D12",
+
+				"error-50": "#FEF2F2",
+				"error-100": "#FEE2E2",
+				"error-200": "#FECACA",
+				"error-300": "#FCA5A5",
+				"error-400": "#F87171",
+				"error-500": "#EF4444",
+				"error-600": "#DC2626",
+				"error-700": "#B91C1C",
+				"error-800": "#991B1B",
+				"error-900": "#7F1D1D",
+
 				"transparent-white-05": "rgba(255, 255, 255, 0.05)",
 				"transparent-white-10": "rgba(255, 255, 255, 0.1)",
 				"transparent-white-20": "rgba(255, 255, 255, 0.2)",
@@ -287,6 +353,18 @@ module.exports = {
 			transitionProperty: {
 				left: "left",
 				height: "height"
+			},
+			spacing: {
+				xxsm: "4px",
+				xsm: "8px",
+				sm: "12px",
+				md: "16px",
+				lg: "20px",
+				xlg: "24px",
+				xxlg: "28px",
+				hg: "32px",
+				xhg: "40px",
+				xxhg: "80px"
 			}
 		}
 	},

package/dist/types/stories/atoms/loaders/NProgress/RadialProgress.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-export interface IRadialProgressProps extends React.PropsWithChildren {
-    /** Percentage value to display */
-    inputValue: number;
-    /** Radius for the circle - Max value of 100 */
-    radius: number;
-    /** Additional classnames */
-    className?: string;
-}
-declare const RadialProgress: React.FC<IRadialProgressProps>;
-export default RadialProgress;

package/dist/types/stories/atoms/loaders/NProgress/index.d.ts

@@ -1,3 +0,0 @@
-import RadialProgress, { IRadialProgressProps } from "./RadialProgress";
-export default RadialProgress;
-export type { IRadialProgressProps };

package/stories/atoms/loaders/NProgress/RadialProgress.stories.tsx

@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import RadialProgress from "./RadialProgress"
-
-const meta: Meta<typeof RadialProgress> = {
-	title: "Design System/atoms/Loaders/NProgress/RadialProgress",
-	component: RadialProgress
-}
-
-type Story = StoryObj<typeof RadialProgress>
-
-export const DefaultRadialProgress: Story = {
-	args: {
-		inputValue: 33,
-		radius: 20,
-		children: <></>
-	}
-}
-
-export default meta

package/stories/atoms/loaders/NProgress/RadialProgress.tsx

@@ -1,74 +0,0 @@
-import React, { useMemo } from "react"
-import { default as cn } from "classnames"
-export interface IRadialProgressProps extends React.PropsWithChildren {
-	/** Percentage value to display */
-	inputValue: number
-	/** Radius for the circle - Max value of 100 */
-	radius: number
-	/** Additional classnames */
-	className?: string
-}
-
-const RadialProgress: React.FC<IRadialProgressProps> = ({
-  inputValue,
-  radius,
-  children,
-  className,
-}) => {
-  const r = radius / 2
-
-  if (inputValue < 0) {
-    inputValue = 0
-  }
-  if (inputValue > 100) {
-    inputValue = 100
-  }
-  if (radius < 0) {
-    radius = 0
-  }
-  if (radius > 100) {
-    radius = 100
-  }
-  const drawPercentage = useMemo(() => {
-    const roundCircum = Math.round(2 * r * Math.PI)
-    return (inputValue * roundCircum) / 50
-  }, [inputValue, r])
-
-  const xyPos = (radius + 2) * -1
-  const viewPortXY = (radius + 2) * 2
-  return (
-    <div
-      className={cn(`overflow-visible`, className && className)}
-      style={{ height: `${viewPortXY}px`, width: `${viewPortXY}px` }}
-    >
-      <svg
-        viewBox={`${xyPos} ${xyPos} ${viewPortXY} ${viewPortXY}`}
-        data-percent={drawPercentage}
-        fill="none"
-      >
-        <circle
-          className="-rotate-90 stroke-gray-200 stroke-1"
-          cx={0}
-          cy={0}
-          r={radius}
-        ></circle>
-        <circle
-          strokeDasharray={`${drawPercentage} 999`}
-          className="m-1 -rotate-90 stroke-purple-600 stroke-1 transition-all"
-          cx={0}
-          cy={0}
-          r={radius}
-        ></circle>
-      </svg>
-      <div
-        className={cn(
-          `h-[${viewPortXY}px] w-[${viewPortXY}px] absolute inset-0 flex items-center justify-center overflow-hidden `
-        )}
-      >
-        {children}
-      </div>
-    </div>
-  )
-}
-
-export default RadialProgress

package/stories/atoms/loaders/NProgress/index.ts

@@ -1,3 +0,0 @@
-import RadialProgress, { IRadialProgressProps } from "./RadialProgress"
-export default RadialProgress
-export type { IRadialProgressProps }