@heliosgraphics/ui 2.0.0-alpha.100

package/components/Dialog/Dialog.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import { useEffect, useRef, type FC, type MouseEvent } from "react"
+import styles from "./Dialog.module.css"
+import { Button } from "../Button"
+import { ButtonGroup } from "../ButtonGroup"
+import { Heading } from "../Heading"
+import { Flex } from "../Flex"
+import { getClasses } from "@heliosgraphics/utils"
+import type { DialogProps } from "./Dialog.types"
+
+export const Dialog: FC<DialogProps> = ({
+	title,
+	children,
+	isNarrow,
+	isOpen,
+	isCentered,
+	onClose,
+	hasNoPadding,
+	role,
+}) => {
+	const dialogRef = useRef<HTMLDialogElement | null>(null)
+	const triggerRef = useRef<Element | null>(null)
+	const onCloseRef = useRef<() => void>(onClose)
+
+	useEffect(() => {
+		onCloseRef.current = onClose
+	}, [onClose])
+
+	useEffect(() => {
+		dialogRef?.current?.scrollTo?.(0, 0)
+
+		if (!isOpen) return
+
+		triggerRef.current = document.activeElement
+		document.documentElement.style.overflow = "hidden"
+
+		if (!dialogRef.current?.open) {
+			dialogRef?.current?.showModal?.()
+		}
+
+		return (): void => {
+			document.documentElement.style.overflow = ""
+
+			const trigger = triggerRef.current
+			if (trigger && trigger instanceof HTMLElement) {
+				trigger.focus()
+			}
+			triggerRef.current = null
+		}
+	}, [isOpen])
+
+	const onCancel = (event: React.SyntheticEvent<HTMLDialogElement>): void => {
+		event.preventDefault()
+		onCloseRef.current()
+	}
+
+	if (!isOpen) return null
+
+	const onDialogClose = (event: MouseEvent<HTMLDialogElement>): boolean | void | Promise<void> => {
+		const isDialog: boolean = (event?.target as HTMLDialogElement)?.tagName === "DIALOG"
+
+		return isDialog && onClose()
+	}
+
+	const dialogClasses: string = getClasses(styles.dialog, "ui-scrollbar", "elevation-lg", {
+		[styles.dialogCentered]: isCentered,
+		[styles.dialogNarrow]: isNarrow,
+	})
+	const dialogFlexClasses: string = getClasses(styles.dialog__header, "sticky top-0 z-50 ui-bg-glass")
+	const dialogContentClasses: string = getClasses(styles.dialog__content, {
+		[styles.dialog__contentNoPadding]: hasNoPadding,
+	})
+
+	return (
+		<dialog
+			ref={dialogRef}
+			className={dialogClasses}
+			onClick={onDialogClose}
+			onCancel={onCancel}
+			role={role}
+			aria-modal="true"
+			data-ui-component="Dialog"
+		>
+			{!!title && (
+				<Flex isBetween={true} isYCentered={true} padding={8} className={dialogFlexClasses}>
+					<Heading level={5} fontWeight="medium">
+						{title}
+					</Heading>
+					<ButtonGroup>
+						<Button icon="x" intent="neutral" value="Close dialog" onClick={onClose} size="small" isIconOnly={true} />
+					</ButtonGroup>
+				</Flex>
+			)}
+			<div className={dialogContentClasses}>{children}</div>
+		</dialog>
+	)
+}
+
+Dialog.displayName = "Dialog"

package/components/Dialog/Dialog.types.ts

@@ -0,0 +1,13 @@
+import type { PropsWithChildren } from "react"
+
+export interface DialogBaseProps {
+	isCentered?: boolean
+	isNarrow?: boolean
+	isOpen?: boolean
+	hasNoPadding?: boolean
+	onClose: (_?: unknown) => Promise<void> | void
+	role?: "dialog" | "alertdialog"
+	title?: string
+}
+
+export type DialogProps = PropsWithChildren<DialogBaseProps>

package/components/Dialog/index.ts

@@ -0,0 +1 @@
+export { Dialog } from "./Dialog"

package/components/Donut/Donut.meta.ts

@@ -0,0 +1,25 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { DonutBaseProps } from "./Donut.types"
+
+export const meta: HeliosAttributeMeta<DonutBaseProps> = {
+	_extends: ["PropsWithChildren"],
+	_patterns: [
+		{
+			id: "ui-donut-default",
+			description: "default",
+			content: `<Donut size={DONUT_SIZE} percentage={PERCENTAGE} color={COLOR}/>`,
+		},
+	],
+	_status: "experimental",
+	_category: "core",
+	color: {
+		type: "HeliosColorType",
+	},
+	percentage: {
+		type: "number",
+		default: 0,
+	},
+	size: {
+		type: "DonutSizeType",
+	},
+}

package/components/Donut/Donut.module.css

@@ -0,0 +1,8 @@
+.donut .donut__svg {
+	transform: rotate(-90deg);
+	transform-origin: 50% 50%;
+}
+
+.donut .donut__svg circle {
+	transition: stroke-dashoffset var(--speed-sm) var(--ease-in-out-sine);
+}

package/components/Donut/Donut.tsx

@@ -0,0 +1,63 @@
+import { getClasses } from "@heliosgraphics/utils"
+import { getDonutBorderSize } from "./Donut.utils"
+import { Flex } from "../Flex"
+import styles from "./Donut.module.css"
+import type { DonutProps } from "./Donut.types"
+import type { FC } from "react"
+
+export const Donut: FC<DonutProps> = ({ children, size, percentage = 0, color }) => {
+	const borderSize: number = getDonutBorderSize(size)
+	const actualSize: number = size - borderSize
+	const cSize = size / 2
+	const rSize = actualSize / 2
+	const dashSize = 100 - percentage
+	const donutColor: string = `hsl(var(--${color}-hue), var(--${color}-saturation), 50%)`
+
+	const donutClasses: string = getClasses(styles.donut, "relative")
+	const donutContainerStyle: object = {
+		height: size + "px",
+		width: size + "px",
+	}
+
+	return (
+		<Flex style={donutContainerStyle} className={donutClasses} isCentered={true} data-ui-component="Donut">
+			<Flex className="absolute top-0 left-0 z-50" style={donutContainerStyle} isCentered={true}>
+				{children}
+			</Flex>
+			<svg
+				className={styles.donut__svg}
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox={`0 0 ${size} ${size}`}
+				height={size}
+				width={size}
+				role="img"
+				aria-label={`Donut chart: ${percentage}%`}
+			>
+				<title>{`${percentage}%`}</title>
+				<circle
+					fill="none"
+					strokeWidth={borderSize}
+					stroke={donutColor}
+					cx={cSize}
+					cy={cSize}
+					r={rSize}
+					style={{ opacity: 0.25 }}
+				/>
+				<circle
+					fill="none"
+					strokeWidth={borderSize}
+					stroke={donutColor}
+					pathLength={100}
+					strokeDasharray={100}
+					strokeDashoffset={dashSize}
+					strokeLinecap="round"
+					cx={cSize}
+					cy={cSize}
+					r={rSize}
+				/>
+			</svg>
+		</Flex>
+	)
+}
+
+Donut.displayName = "Donut"

package/components/Donut/Donut.types.ts

@@ -0,0 +1,12 @@
+import type { PropsWithChildren } from "react"
+import type { HeliosColorType } from "../../types/colors"
+
+export type DonutSizeType = 32 | 48 | 64 | 96 | 128
+
+export interface DonutBaseProps {
+	color: HeliosColorType
+	percentage: number
+	size: DonutSizeType
+}
+
+export type DonutProps = PropsWithChildren<DonutBaseProps>

package/components/Donut/Donut.utils.ts

@@ -0,0 +1,11 @@
+import type { DonutSizeType } from "./Donut.types"
+
+export const getDonutBorderSize = (size: DonutSizeType = 32): number => {
+	if (size === 32) return 4
+	if (size === 48) return 6
+	if (size === 64) return 8
+	if (size === 96) return 10
+	if (size === 128) return 12
+
+	return 16
+}

package/components/Donut/index.ts

@@ -0,0 +1,2 @@
+export { Donut } from "./Donut"
+export type { DonutSizeType } from "./Donut.types"

package/components/Dot/Dot.meta.ts

@@ -0,0 +1,26 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { DotProps } from "./Dot.types"
+
+export const meta: HeliosAttributeMeta<DotProps> = {
+	_patterns: [
+		{
+			id: "ui-dot-default",
+			description: "default",
+			content: `<Dot size={SCALE} color={COLOR} colorAccent={COLOR_ACCENT}/>`,
+		},
+	],
+	_status: "nominal",
+	_category: "core",
+	color: {
+		type: "HeliosColorType",
+		default: "blue",
+	},
+	colorAccent: {
+		type: "HeliosColorType",
+		isOptional: true,
+	},
+	size: {
+		type: "HeliosScale",
+		default: 8,
+	},
+}

package/components/Dot/Dot.module.css

@@ -0,0 +1,24 @@
+.dot {
+	position: relative;
+
+	overflow: hidden;
+
+	--dot-color: var(--ui-bg-blue);
+	--dot-color-accent: var(--ui-bg-soft-blue);
+
+	transition: all var(--speed-lg) var(--ease-in-out-sine);
+}
+
+.dot svg {
+	position: absolute;
+	top: 0;
+	left: 0;
+
+	display: flex;
+	height: 100%;
+	width: 100%;
+}
+
+.dot svg circle {
+	transform-origin: 50% 50%;
+}

package/components/Dot/Dot.spec.tsx

@@ -0,0 +1,6 @@
+import { describe, expect, it } from "bun:test"
+import { Dot } from "./Dot"
+
+describe("Dot", () => {
+	it("should be defined", () => expect(Dot).toBeDefined())
+})

package/components/Dot/Dot.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import { useId } from "react"
+import styles from "./Dot.module.css"
+import type { DotProps } from "./Dot.types"
+import type { FC, CSSProperties } from "react"
+
+export const Dot: FC<DotProps> = ({ colorAccent, size = 8, color = "blue" }) => {
+	const dotId: string = useId()
+
+	const dotColor: string = `var(--ui-bg-${color})`
+	const dotColorAccent: string = colorAccent ? `var(--ui-bg-soft-${colorAccent})` : ""
+
+	const dotStyle: CSSProperties = {
+		height: size + "px",
+		maxHeight: size + "px",
+		maxWidth: size + "px",
+		minWidth: size + "px",
+		width: size + "px",
+		"--dot-color": dotColor,
+		"--dot-color-accent": dotColorAccent,
+	} as CSSProperties & {
+		"--dot-color": string
+		"--dot-color-accent": string
+	}
+
+	return (
+		<div className={styles.dot} style={dotStyle} data-ui-component="Dot">
+			<svg width="100%" height="100%" viewBox="0 0 20 20" aria-hidden={true}>
+				{colorAccent ? (
+					<>
+						<linearGradient id={dotId}>
+							<stop stopColor="var(--dot-color)" offset="0%" />
+							<stop stopColor="var(--dot-color-accent)" offset="100%" />
+						</linearGradient>
+						<circle fill={`url(#${dotId})`} cx={10} cy={10} r={10} />
+					</>
+				) : (
+					<circle fill="var(--dot-color)" cx={10} cy={10} r={10} />
+				)}
+			</svg>
+		</div>
+	)
+}
+
+Dot.displayName = "Dot"

package/components/Dot/Dot.types.ts

@@ -0,0 +1,8 @@
+import type { HeliosColorType } from "../../types/colors"
+import type { HeliosScaleType } from "../../types/scale"
+
+export interface DotProps {
+	color: HeliosColorType
+	colorAccent?: HeliosColorType
+	size: HeliosScaleType
+}

package/components/Dot/index.ts

@@ -0,0 +1 @@
+export { Dot } from "./Dot"

package/components/Dropdown/Dropdown.meta.ts

@@ -0,0 +1,30 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { DropdownProps } from "./Dropdown.types"
+
+export const meta: HeliosAttributeMeta<DropdownProps> = {
+	_patterns: [
+		{
+			id: "ui-dropdown-buttongroup",
+			description: "dropdown",
+			content: `<Dropdown items={RESULT_LIST_ITEMS} isDisabled={IS_DISABLED} position={POSITION}><Button value="Dropdown Example" intent={INTENT} icon={ICON} size={SIZE} /></Dropdown>`,
+		},
+	],
+	_status: "nominal",
+	_category: "pattern",
+	children: {
+		type: "ReactElement<unknown>",
+	},
+	items: {
+		type: "Array<ResultItem>",
+	},
+	isDisabled: {
+		type: "boolean",
+		description: "Dropdown won't be triggered on click.",
+		isOptional: true,
+	},
+	position: {
+		type: "HeliosPositionType",
+		isOptional: true,
+		default: "bottom-left",
+	},
+}

package/components/Dropdown/Dropdown.module.css

@@ -0,0 +1,92 @@
+.dropdown {
+	position: relative;
+
+	display: inline-block;
+	user-select: none;
+}
+
+.dropdownOpen [data-ui-component="Icon"] {
+	transition: transform 96ms ease-in-out;
+	transform: rotate(180deg);
+}
+
+.dropdownDisabled {
+	cursor: not-allowed;
+	pointer-events: none;
+}
+
+.dropdownBottomLeft .dropdown__nav,
+.dropdownBottomRight .dropdown__nav {
+	margin-top: 8px;
+
+	transform: translateY(-6px);
+}
+
+.dropdownBottomLeft .dropdown__nav {
+	left: 0;
+	top: 100%;
+}
+
+.dropdownBottomRight .dropdown__nav {
+	right: 0;
+	top: 100%;
+}
+
+.dropdownTopLeft .dropdown__nav,
+.dropdownTopRight .dropdown__nav {
+	margin-bottom: 8px;
+
+	transform: translateY(6px);
+}
+
+.dropdownTopLeft .dropdown__nav {
+	bottom: 100%;
+	left: 0;
+}
+
+.dropdownTopRight .dropdown__nav {
+	bottom: 100%;
+	right: 0;
+}
+
+.dropdown__nav {
+	position: absolute;
+	z-index: var(--z-index-8);
+
+	display: none;
+	min-width: 240px;
+	opacity: 0;
+
+	transition:
+		display 96ms ease-in-out allow-discrete,
+		transform 96ms ease-in-out,
+		opacity 96ms ease-in-out;
+	pointer-events: none;
+}
+
+.dropdown__navActive {
+	display: block;
+	opacity: 1;
+
+	transform: translateY(0);
+
+	pointer-events: all;
+
+	@starting-style {
+		opacity: 0;
+	}
+}
+
+.dropdownBottomLeft .dropdown__navActive,
+.dropdownBottomRight .dropdown__navActive {
+	@starting-style {
+		transform: translateY(-6px);
+	}
+}
+
+.dropdownTopLeft .dropdown__navActive,
+.dropdownTopRight .dropdown__navActive {
+	@starting-style {
+		transform: translateY(6px);
+	}
+}

package/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,117 @@
+"use client"
+
+import { useEffect, useMemo, useState, useRef, type FC } from "react"
+import { ANIMATION_FAST } from "../../constants/animations"
+import { getClasses } from "@heliosgraphics/utils"
+import { ResultList } from "../shared/ResultList"
+import styles from "./Dropdown.module.css"
+import type { KeyboardEvent, MouseEvent } from "react"
+import type { DropdownProps } from "./Dropdown.types"
+
+export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, position = "bottom-left" }) => {
+	const hoverStateRef = useRef<boolean>(false)
+	const resultListRef = useRef<HTMLOListElement | null>(null)
+	const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+	const isMountedRef = useRef<boolean>(true)
+
+	const [isVisible, setVisible] = useState<boolean>(false)
+	const [isHovering, setHovering] = useState<boolean>(false)
+	const [navHeight, setNavHeight] = useState<number>(0)
+
+	useEffect(() => {
+		if (resultListRef?.current) {
+			setNavHeight(resultListRef?.current?.offsetHeight ?? 0)
+		}
+	}, [isVisible, items?.length])
+
+	useEffect(() => {
+		isMountedRef.current = true
+
+		return (): void => {
+			isMountedRef.current = false
+			if (hideTimeoutRef.current) globalThis.clearTimeout(hideTimeoutRef.current)
+			hideTimeoutRef.current = null
+		}
+	}, [])
+
+	hoverStateRef.current = isHovering
+
+	if (isDisabled) {
+		return children
+	}
+
+	const dropdownClasses: string = getClasses(styles.dropdown, {
+		[styles.dropdownBottomLeft]: position === "bottom-left" || !position,
+		[styles.dropdownBottomRight]: position === "bottom-right",
+		[styles.dropdownTopLeft]: position === "top-left",
+		[styles.dropdownTopRight]: position === "top-right",
+		[styles.dropdownOpen]: isVisible,
+	})
+
+	const mouseEnter = (_event: MouseEvent<HTMLDivElement>): void => {
+		if (hideTimeoutRef.current) {
+			globalThis.clearTimeout(hideTimeoutRef.current)
+			hideTimeoutRef.current = null
+		}
+		setHovering(true)
+	}
+	const mouseLeave = (_event: MouseEvent<HTMLDivElement>): void => {
+		setHovering(false)
+		hideTimeoutRef.current = setTimeout(() => {
+			if (isMountedRef.current && !hoverStateRef.current) setVisible(false)
+			hideTimeoutRef.current = null
+		}, ANIMATION_FAST)
+	}
+
+	const onSetVisible = (): void => setVisible(!isVisible)
+
+	const onKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault()
+			onSetVisible()
+		}
+	}
+
+	const navClasses: string = getClasses(styles.dropdown__nav, isVisible && styles.dropdown__navActive)
+
+	const itemsWithClose = useMemo(
+		() =>
+			items?.map((item) => {
+				if (item.isDisabled) return item
+
+				return {
+					...item,
+					onClick: (event: MouseEvent<HTMLElement>): void => {
+						item.onClick?.(event)
+						setVisible(false)
+					},
+				}
+			}),
+		[items],
+	)
+
+	return (
+		<div className={dropdownClasses} onMouseEnter={mouseEnter} onMouseLeave={mouseLeave} data-ui-component="Dropdown">
+			<div
+				role="button"
+				tabIndex={0}
+				onClick={onSetVisible}
+				onKeyDown={onKeyDown}
+				aria-expanded={isVisible}
+				aria-haspopup="listbox"
+			>
+				{children}
+			</div>
+			<nav
+				className={navClasses}
+				style={{
+					height: `${navHeight}px`,
+				}}
+			>
+				<ResultList ref={resultListRef} items={itemsWithClose} />
+			</nav>
+		</div>
+	)
+}
+
+Dropdown.displayName = "Dropdown"

package/components/Dropdown/Dropdown.types.ts

@@ -0,0 +1,10 @@
+import type { ResultItem } from "../shared/ResultList/ResultList.types"
+import type { HeliosPositionType } from "../../types/positions"
+import type { ReactElement } from "react"
+
+export interface DropdownProps {
+	children: ReactElement<unknown>
+	items: Array<ResultItem>
+	isDisabled?: boolean
+	position?: HeliosPositionType
+}

package/components/Dropdown/index.ts

@@ -0,0 +1,2 @@
+export { Dropdown } from "./Dropdown"
+export type { DropdownProps } from "./Dropdown.types"

package/components/Fieldset/Fieldset.meta.ts

@@ -0,0 +1,18 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { FieldsetBaseProps } from "./Fieldset.types"
+
+export const meta: HeliosAttributeMeta<FieldsetBaseProps> = {
+	_extends: ["PropsWithChildren"],
+	_patterns: [
+		{
+			id: "ui-fieldset-default",
+			description: "default",
+			content: `<Fieldset legend="User Details">{CHILDREN}</Fieldset>`,
+		},
+	],
+	_status: "experimental",
+	_category: "core",
+	legend: {
+		type: "string",
+	},
+}

package/components/Fieldset/Fieldset.module.css

@@ -0,0 +1,3 @@
+.fieldset {
+	border: 1px solid gold;
+}

package/components/Fieldset/Fieldset.tsx

@@ -0,0 +1,14 @@
+import styles from "./Fieldset.module.css"
+import type { FC } from "react"
+import type { FieldsetProps } from "./Fieldset.types"
+
+export const Fieldset: FC<FieldsetProps> = ({ children, legend }) => {
+	return (
+		<fieldset className={styles.fieldset} data-ui-component="Fieldset">
+			<legend>{legend}</legend>
+			{children}
+		</fieldset>
+	)
+}
+
+Fieldset.displayName = "Fieldset"

package/components/Fieldset/Fieldset.types.ts

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from "react"
+
+export interface FieldsetBaseProps {
+	legend: string
+}
+
+export type FieldsetProps = PropsWithChildren<FieldsetBaseProps>

package/components/Fieldset/index.ts

@@ -0,0 +1 @@
+export { Fieldset } from "./Fieldset"