@heliosgraphics/ui 2.0.0-alpha.62

package/components/Dialog/Dialog.tsx

@@ -0,0 +1,95 @@
+"use client"
+
+import { useEffect, useRef, type FC, MouseEvent } from "react"
+import styles from "./Dialog.module.css"
+import { Button, ButtonGroup, Heading, Flex } from "../.."
+import { getClasses } from "@heliosgraphics/utils/classnames"
+import type { DialogProps } from "./Dialog.types"
+
+const ATTRIBUTE_SCROLL = "data-scroll" as const
+const POSITION_FIXED_CLASS = "fixed" as const
+
+export const Dialog: FC<DialogProps> = ({ title, children, isNarrow, isOpen, isCentered, onClose, noPadding }) => {
+	const dialogRef = useRef<HTMLDialogElement | null>(null)
+
+	const resetScroll = (): void => {
+		globalThis?.requestAnimationFrame(() => {
+			document.body.setAttribute(ATTRIBUTE_SCROLL, "")
+			dialogRef?.current?.scrollTo?.(0, 0)
+		})
+	}
+
+	const resetDocumentStyle = (scrollPosition: number): void => {
+		globalThis?.requestAnimationFrame(() => {
+			document.body.style.position = ""
+			document.body.style.height = ""
+			document.body.style.top = ""
+			document.body.classList.remove(POSITION_FIXED_CLASS)
+
+			return globalThis?.scrollTo?.(0, scrollPosition)
+		})
+	}
+
+	useEffect(() => {
+		return (): void => {
+			resetDocumentStyle(0)
+			resetScroll()
+		}
+	}, [title])
+
+	useEffect(() => {
+		dialogRef?.current?.scrollTo?.(0, 0)
+
+		if (isOpen) {
+			const localPosition: number = document?.documentElement?.scrollTop ?? 0
+
+			document.body.classList.add(POSITION_FIXED_CLASS)
+			document.body.style.top = `-${localPosition}px`
+			document.body.setAttribute(ATTRIBUTE_SCROLL, localPosition.toString())
+
+			dialogRef?.current?.showModal?.()
+		} else if (!dialogRef?.current) {
+			const localPos: string = document?.body?.getAttribute(ATTRIBUTE_SCROLL) ?? "0"
+			const scrollPosition: number = parseInt(localPos) ?? 0
+
+			document.body.classList.remove(POSITION_FIXED_CLASS)
+
+			resetDocumentStyle(scrollPosition)
+
+			dialogRef?.current?.close?.()
+		}
+	}, [isOpen])
+
+	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, "helios-scrollbar", "elevation-large", {
+		[styles.dialogCentered]: isCentered,
+		[styles.dialogNarrow]: isNarrow,
+	})
+	const dialogFlexClasses: string = getClasses(styles.dialog__header, "sticky top-0 z-50 helios-ui-glass-1")
+	const dialogContentClasses: string = getClasses(styles.dialog__content, {
+		[styles.dialog__contentNoPadding]: noPadding,
+	})
+
+	return (
+		<dialog ref={dialogRef} className={dialogClasses} onClick={onDialogClose}>
+			{!!title && (
+				<Flex isBetween={true} isYCentered={true} padding={8} className={dialogFlexClasses}>
+					<Heading level={5} fontWeight="medium">
+						{title}
+					</Heading>
+					<ButtonGroup>
+						<Button icon="x" intent="neutral" value="" onClick={onClose} size="small" isIconOnly={true} />
+					</ButtonGroup>
+				</Flex>
+			)}
+			{isOpen && <div className={dialogContentClasses}>{children}</div>}
+		</dialog>
+	)
+}

package/components/Dialog/Dialog.types.ts

@@ -0,0 +1,12 @@
+import type { PropsWithChildren } from "react"
+
+export interface DialogBaseProps {
+	isCentered?: boolean
+	isNarrow?: boolean
+	isOpen?: boolean
+	noPadding?: boolean
+	onClose: (_?: unknown) => Promise<void> | void
+	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 "../.."
+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: all var(--speed-sm) var(--ease-in-out-sine);
+}

package/components/Donut/Donut.tsx

@@ -0,0 +1,56 @@
+import { getDonutBorderSize } from "./Donut.utils"
+import { Flex } from "../.."
+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 donutContainerStyle: object = {
+		height: size + "px",
+		width: size + "px",
+	}
+
+	return (
+		<Flex style={donutContainerStyle} className={`${styles.donut} relative`} isCentered={true}>
+			<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}
+			>
+				<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>
+	)
+}

package/components/Donut/Donut.types.ts

@@ -0,0 +1,12 @@
+import type { PropsWithChildren } from "react"
+import type { HeliosColorType } from "../.."
+
+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 "../.."
+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: "stable",
+	_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,21 @@
+.dot {
+	position: relative;
+
+	overflow: hidden;
+
+	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 "vitest"
+import { Dot } from "./Dot"
+
+describe("Dot", () => {
+	it("should be defined", () => expect(Dot).toBeDefined())
+})

package/components/Dot/Dot.tsx

@@ -0,0 +1,44 @@
+"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}>
+			<svg width="100%" height="100%" viewBox="0 0 20 20">
+				{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>
+	)
+}

package/components/Dot/Dot.types.ts

@@ -0,0 +1,7 @@
+import type { HeliosColorType, HeliosScaleType } from "../.."
+
+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,35 @@
+import type { HeliosAttributeMeta } from "../.."
+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>",
+	},
+	isHidden: {
+		type: "boolean",
+		description: "Change this boolean value to conditionally hide a visible Dropdown.",
+		isOptional: true,
+	},
+	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,77 @@
+.dropdown {
+	position: relative;
+
+	display: inline-block;
+	user-select: none;
+}
+
+.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);
+
+	min-width: 240px;
+	opacity: 0;
+
+	transition:
+		transform 96ms ease-in-out,
+		opacity 96ms ease-in-out;
+	pointer-events: none;
+}
+
+.dropdown__nav.dropdown__navActive {
+	opacity: 1 !important;
+
+	transform: translateY(0) !important;
+
+	pointer-events: all;
+}
+
+@keyframes dropdownFade {
+	0% {
+		opacity: 0;
+		/* transform: translateY(-8px); */
+	}
+	100% {
+		opacity: 1;
+		/* transform: translateY(0); */
+	}
+}

package/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,82 @@
+"use client"
+
+import { useEffect, useState, useRef, cloneElement, Children as ReactChildren, type ReactElement, type FC } from "react"
+import { ANIMATION_FAST } from "../../constants/animations"
+import { getClasses } from "@heliosgraphics/utils/classnames"
+import { ResultList } from "../shared/ResultList"
+import styles from "./Dropdown.module.css"
+import type { MouseEvent, ReactNode } from "react"
+import type { DropdownProps } from "./Dropdown.types"
+import type { HeliosIconType } from "../../types/icons"
+
+// NOTE @03b8 instead of passing ref, should use https://www.w3.org/TR/css-anchor-position-1/ when ready
+export const Dropdown: FC<DropdownProps> = ({ isHidden, children, items, isDisabled, position = "bottom-left" }) => {
+	const hoverStateRef = useRef<boolean>(false)
+	const resultListRef = useRef<HTMLOListElement | null>(null)
+
+	const [isVisible, setVisible] = useState<boolean>(Boolean(isHidden))
+	const [isHovering, setHovering] = useState<boolean>(false)
+	const [navHeight, setNavHeight] = useState<number>(0)
+
+	useEffect(() => {
+		setVisible(false)
+	}, [isHidden])
+
+	useEffect(() => {
+		if (resultListRef?.current) {
+			setNavHeight(resultListRef?.current?.offsetHeight ?? 0)
+		}
+	}, [isVisible, items?.length])
+
+	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",
+	})
+
+	const mouseEnter = (_event: MouseEvent<HTMLDivElement>): void => setHovering(true)
+	const mouseLeave = (_event: MouseEvent<HTMLDivElement>): ReturnType<typeof setTimeout> => {
+		setHovering(false)
+
+		return setTimeout(() => !hoverStateRef.current && setVisible(false), ANIMATION_FAST)
+	}
+
+	const renderChildren = ReactChildren.map(
+		children as ReactElement<{ children: ReactNode; icon: HeliosIconType }>,
+		(child: ReactElement<{ children: ReactNode; icon: HeliosIconType }>) => {
+			const caretProps = {
+				...(child?.props?.icon === "caret-down" && isVisible && { icon: "caret-up" as HeliosIconType }),
+				...(child?.props?.icon === "chevron-down" && isVisible && { icon: "chevron-up" as HeliosIconType }),
+			}
+
+			return cloneElement(child, { ...child.props, ...caretProps })
+		},
+	)
+
+	const onSetVisible = (): void => setVisible(!isVisible)
+
+	const navClasses: string = getClasses(styles.dropdown__nav, {
+		[styles.dropdown__navActive]: isVisible,
+	})
+
+	return (
+		<div className={dropdownClasses} onMouseEnter={mouseEnter} onMouseLeave={mouseLeave}>
+			<div onClick={onSetVisible}>{renderChildren}</div>
+			<nav
+				className={navClasses}
+				style={{
+					height: `${navHeight}px`,
+				}}
+			>
+				<ResultList ref={resultListRef} items={items} />
+			</nav>
+		</div>
+	)
+}

package/components/Dropdown/Dropdown.types.ts

@@ -0,0 +1,10 @@
+import type { ResultItem, HeliosPositionType } from "../.."
+import type { ReactElement } from "react"
+
+export interface DropdownProps {
+	children: ReactElement<unknown>
+	items: Array<ResultItem>
+	isHidden?: boolean
+	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 "../.."
+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,12 @@
+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}>
+			<legend>{legend}</legend>
+			{children}
+		</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"

package/components/Flex/Flex.meta.ts

@@ -0,0 +1,44 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { FlexBaseProps } from "./Flex.types"
+
+export const meta: HeliosAttributeMeta<FlexBaseProps> = {
+	_extends: ["PropsWithChildren", 'Omit<HTMLAttributes<HTMLDivElement>, "color" | "results">'],
+	_patterns: [
+		{
+			id: "ui-flex-default",
+			description: "default",
+			content: `<Flex gap={GAP} isColumn={IS_COLUMN}>{CHILDREN}</Flex>`,
+		},
+		{
+			id: "ui-flex-responsive-padding",
+			description: "with responsive padding",
+			content: `<Flex padding={[0, 16, 24]}>{CHILDREN}</Flex>`,
+		},
+	],
+	_status: "stable",
+	_category: "layout",
+	className: { type: "string", isOptional: true },
+	gap: { type: "HeliosScale", isOptional: true },
+	grow: { type: "1 | 2 | 3 | 4 | 5 | 6 | 7 | 8", isOptional: true },
+	elevation: { type: '"small" | "medium" | "large"', isOptional: true },
+	isAround: { type: "boolean", isOptional: true },
+	isBetween: { type: "boolean", isOptional: true },
+	isCentered: { type: "boolean", isOptional: true },
+	isColumn: { type: "boolean", isOptional: true },
+	isFullWidth: { type: "boolean", isOptional: true },
+	isInline: { type: "boolean", isOptional: true },
+	isNoWrap: { type: "boolean", isOptional: true },
+	isStretch: { type: "boolean", isOptional: true },
+	isWrapped: { type: "boolean", isOptional: true },
+	isXCentered: { type: "boolean", isOptional: true },
+	isYCentered: { type: "boolean", isOptional: true },
+	onClick: { type: "HeliosOnClickType", isOptional: true },
+	padding: { type: "ResponsiveScaleType", isOptional: true },
+	paddingX: { type: "HeliosScale", isOptional: true },
+	paddingY: { type: "HeliosScale", isOptional: true },
+	ref: { type: "RefObject<HTMLDivElement>", isOptional: true },
+	withBackground: { type: "boolean", isOptional: true },
+	withRadius: { type: "ResponsiveRadiusType", isOptional: true },
+	xAlign: { type: '"start" | "end" | "center"', isOptional: true },
+	yAlign: { type: '"start" | "end" | "baseline"', isOptional: true },
+}

package/components/Flex/Flex.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, type ForwardedRef } from "react"
+import { getFlexUtility, getSafeFlexProps } from "../Flex/Flex.utils"
+import type { FlexProps } from "./Flex.types"
+
+export const Flex = forwardRef<HTMLDivElement, FlexProps>((props: FlexProps, ref: ForwardedRef<HTMLDivElement>) => {
+	const flexClasses: string = getFlexUtility(props)
+	const safeProps = getSafeFlexProps(props)
+
+	return (
+		<div {...safeProps} className={flexClasses} onClick={props.onClick} ref={ref}>
+			{props.children}
+		</div>
+	)
+})