@heliosgraphics/ui 2.0.0-alpha.100

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Helios Graphics
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/components/Alert/Alert.meta.ts

@@ -0,0 +1,45 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { AlertBaseProps } from "./Alert.types"
+
+export const meta: HeliosAttributeMeta<AlertBaseProps> = {
+	_extends: ["PropsWithChildren"],
+	_patterns: [
+		{
+			id: "ui-alert-default",
+			description: "default",
+			content:
+				"<Alert color={COLOR} intent={INTENT} icon={ICON} title={TITLE} onClose={ON_TOGGLE_OPEN}>{INTENT_PARAGRAPH}</Alert>",
+		},
+	],
+	_status: "nominal",
+	_category: "core",
+	icon: {
+		type: "HeliosIconType",
+		description: "icon before title",
+		isOptional: true,
+	},
+	color: {
+		type: "HeliosColorType",
+		description: "color theme (takes precedence over intent)",
+		isOptional: true,
+	},
+	appearance: {
+		type: "HeliosAppearanceType",
+		description: "light or dark appearance",
+		isOptional: true,
+	},
+	intent: {
+		type: "HeliosIntentionType",
+		description: "semantic intent (legacy, use color instead)",
+		isOptional: true,
+	},
+	onClose: {
+		type: "Function",
+		description: "top right close fn",
+		isOptional: true,
+	},
+	title: {
+		type: "string",
+		isOptional: true,
+	},
+}

package/components/Alert/Alert.module.css

@@ -0,0 +1,41 @@
+.alert {
+	position: relative;
+
+	background-color: var(--bg);
+	border: 1px solid var(--bg);
+	color: var(--text);
+	transition: all var(--speed-xs) var(--ease-in-out-sine);
+}
+
+.alert a {
+	font-weight: var(--font-weight-medium);
+	text-decoration: underline;
+}
+
+.alertLight {
+	border: 1px solid var(--border);
+}
+
+.alertSmall {
+	border-radius: var(--radius-sm);
+}
+
+.alertNormal {
+	border-radius: var(--radius-md);
+}
+
+.alertWithButton {
+	padding-right: 48px;
+}
+
+.alertButtonGroup {
+	position: absolute;
+	right: 8px;
+	top: 8px;
+}
+
+@media (max-width: 640px) {
+	.alert {
+		flex-direction: column;
+	}
+}

package/components/Alert/Alert.tsx

@@ -0,0 +1,54 @@
+import { Button } from "../Button"
+import { ButtonGroup } from "../ButtonGroup"
+import { Flex } from "../Flex"
+import { Text } from "../Text"
+import { Icon } from "../Icon"
+import { getClasses } from "@heliosgraphics/utils"
+import { getColorClasses } from "../../utils/colors"
+import { INTENTION_COLOR_MAP } from "../../constants/intentions"
+import styles from "./Alert.module.css"
+import type { AlertProps } from "./Alert.types"
+import type { FC } from "react"
+import type { HeliosColorType } from "../../types/colors"
+
+export const Alert: FC<AlertProps> = ({ children, onClose, title, icon, color, appearance = "light", intent }) => {
+	const resolvedColor: HeliosColorType = color || (intent ? INTENTION_COLOR_MAP[intent] : "gray")
+
+	const alertColorClasses: Array<string> = getColorClasses(resolvedColor, appearance)
+	const alertClasses: string = getClasses(styles.alert, "relative", ...alertColorClasses, {
+		[styles.alertLight]: appearance === "light",
+		[styles.alertSmall]: !title,
+		[styles.alertNormal]: title,
+		[styles.alertWithButton]: !!onClose,
+	})
+
+	return (
+		<Flex className={alertClasses} padding={6} gap={6} role="alert" aria-live="polite" data-ui-component="Alert">
+			{!!onClose && (
+				<ButtonGroup className={styles.alertButtonGroup}>
+					<Button
+						isIconOnly={true}
+						value="Close"
+						aria-label="Close"
+						color={resolvedColor}
+						appearance={appearance}
+						size="tiny"
+						icon="x"
+						onClick={onClose}
+					/>
+				</ButtonGroup>
+			)}
+			{!!icon && <Icon icon={icon} size={20} />}
+			<Flex isColumn={true} isXCentered={true}>
+				{!!title && (
+					<Text type="div" fontWeight="semibold">
+						{title}
+					</Text>
+				)}
+				<Text type="small">{children}</Text>
+			</Flex>
+		</Flex>
+	)
+}
+
+Alert.displayName = "Alert"

package/components/Alert/Alert.types.ts

@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from "react"
+import type { HeliosIconType } from "../../types/icons"
+import type { HeliosColorType, HeliosAppearanceType } from "../../types/colors"
+import type { HeliosIntentionType } from "../../types/intentions"
+
+export interface AlertBaseProps {
+	appearance?: HeliosAppearanceType
+	color?: HeliosColorType
+	icon?: HeliosIconType
+	intent?: HeliosIntentionType
+	onClose?: (event?: unknown) => void
+	title?: string
+}
+
+export type AlertProps = PropsWithChildren<AlertBaseProps>

package/components/Alert/index.ts

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

package/components/Breadcrumb/Breadcrumb.meta.ts

@@ -0,0 +1,17 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { BreadcrumbProps } from "./Breadcrumb.types"
+
+export const meta: HeliosAttributeMeta<BreadcrumbProps> = {
+	_patterns: [
+		{
+			id: "ui-breadcrumb-default",
+			description: "default",
+			content: "<Breadcrumb items={BREADCRUMB_ITEMS} />",
+		},
+	],
+	_status: "nominal",
+	_category: "content",
+	items: {
+		type: "Array<BreadcrumbItem>",
+	},
+}

package/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,55 @@
+import { Fragment, type FC, type ElementType, type KeyboardEvent } from "react"
+import { Text } from "../Text"
+import { Flex } from "../Flex"
+import { Icon } from "../Icon"
+import type { BreadcrumbProps } from "./Breadcrumb.types"
+
+export const Breadcrumb: FC<BreadcrumbProps> = ({ items }) => {
+	if (!items?.length) return null
+
+	return (
+		<nav aria-label="Breadcrumb" data-ui-component="Breadcrumb">
+			<Flex isYCentered={true} gap={2} isWrapped={true}>
+				{items?.map((item, index) => {
+					const isLast: boolean = Boolean(index + 1 === items?.length)
+					const AComponent: ElementType = item.as || "a"
+					const isCustomElement: boolean = !!item.as && item.as !== "a" && item.as !== "button"
+					const keyboardProps =
+						isCustomElement && item.onClick
+							? {
+									role: "link" as const,
+									tabIndex: 0,
+									onKeyDown: (event: KeyboardEvent): void => {
+										if (event.key === "Enter") {
+											item.onClick?.(event as unknown as React.MouseEvent<HTMLAnchorElement>)
+										}
+									},
+								}
+							: {}
+
+					return (
+						<Fragment key={item.href ?? item.name}>
+							<AComponent
+								href={item.href}
+								onClick={item.onClick}
+								{...keyboardProps}
+								{...(item.isActive && { "aria-current": "page" as const })}
+							>
+								<Text
+									type="div"
+									fontStyle={item?.isActive ? "italic" : "normal"}
+									emphasis={item.isActive ? "secondary" : "primary"}
+								>
+									{item.name}
+								</Text>
+							</AComponent>
+							{!isLast && <Icon icon="arrow-right" size={12} emphasis="tertiary" aria-hidden={true} />}
+						</Fragment>
+					)
+				})}
+			</Flex>
+		</nav>
+	)
+}
+
+Breadcrumb.displayName = "Breadcrumb"

package/components/Breadcrumb/Breadcrumb.types.ts

@@ -0,0 +1,13 @@
+import type { MouseEventHandler, ElementType } from "react"
+
+export interface BreadcrumbItem {
+	as?: ElementType
+	isActive?: boolean
+	name: string
+	href: string
+	onClick?: MouseEventHandler<HTMLAnchorElement>
+}
+
+export interface BreadcrumbProps {
+	items: Array<BreadcrumbItem>
+}

package/components/Breadcrumb/index.ts

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

package/components/Browser/Browser.meta.ts

@@ -0,0 +1,27 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { BrowserBaseProps } from "./Browser.types"
+
+export const meta: HeliosAttributeMeta<BrowserBaseProps> = {
+	_extends: ["PropsWithChildren"],
+	_patterns: [
+		{
+			id: "ui-browser-default",
+			description: "default",
+			content: "<Browser width={480}>{CHILDREN}</Browser>",
+		},
+	],
+	_status: "experimental",
+	_category: "layout",
+	height: {
+		type: "number",
+		isOptional: true,
+	},
+	url: {
+		type: "string",
+		isOptional: true,
+	},
+	width: {
+		type: "number",
+		isOptional: true,
+	},
+}

package/components/Browser/Browser.module.css

@@ -0,0 +1,3 @@
+.browser {
+	border: 1px solid green;
+}

package/components/Browser/Browser.tsx

@@ -0,0 +1,16 @@
+import { getClasses } from "@heliosgraphics/utils"
+import styles from "./Browser.module.css"
+import type { BrowserProps } from "./Browser.types"
+import type { FC } from "react"
+
+export const Browser: FC<BrowserProps> = ({ children }) => {
+	const browserClasses: string = getClasses(styles.browser)
+
+	return (
+		<div className={browserClasses} data-ui-component="Browser">
+			{children}
+		</div>
+	)
+}
+
+Browser.displayName = "Browser"

package/components/Browser/Browser.types.ts

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from "react"
+
+export interface BrowserBaseProps {
+	height?: number
+	url?: string
+	width?: number
+}
+
+export type BrowserProps = PropsWithChildren<BrowserBaseProps>

package/components/Browser/index.ts

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

package/components/Button/Button.meta.ts

@@ -0,0 +1,46 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { ButtonProps } from "./Button.types"
+
+export const meta: HeliosAttributeMeta<ButtonProps> = {
+	_extends: ["FlexProps"],
+	_patterns: [
+		{
+			id: "ui-button-default",
+			content:
+				'<Button color={COLOR} value="Button" icon={ICON} iconRight={ICON_ACCENT} intent={INTENT} isDisabled={IS_DISABLED} isLoading={IS_LOADING} appearance={APPEARANCE}/>',
+			description: "default",
+		},
+	],
+	_status: "nominal",
+	_category: "core",
+	accept: { type: "string", isOptional: true },
+	appearance: {
+		type: "HeliosAppearanceType",
+		isOptional: true,
+		default: "dark, light for gray",
+	},
+	badge: { type: "number", isOptional: true },
+	badgeIcon: { type: "HeliosIconType", isOptional: true },
+	color: {
+		type: "HeliosColorType",
+		isOptional: true,
+		description: "takes precedence over intent",
+	},
+	flair: { type: "number", isOptional: true },
+	icon: { type: "HeliosIconType", isOptional: true },
+	iconLeft: { type: "HeliosIconType", isOptional: true, alias: "icon" },
+	iconRight: { type: "HeliosIconType", isOptional: true },
+	intent: { type: "HeliosIntentionType", isOptional: true, default: "neutral" },
+	isDisabled: { type: "boolean", isOptional: true },
+	isIconOnly: { type: "boolean", isOptional: true },
+	isLoading: { type: "boolean", isOptional: true },
+	isRounded: { type: "boolean", isOptional: true },
+	multiple: { type: "boolean", isOptional: true },
+	onChange: { type: "(event?: MouseEvent | SyntheticEvent) => Promise<void> | void", isOptional: true },
+	onClick: { type: "MouseEventHandler<HTMLDivElement>", isOptional: true },
+	role: { type: "AriaRole", isOptional: true },
+	size: { type: '"normal" | "small" | "tiny"', isOptional: true, default: "normal" },
+	tabIndex: { type: "number", isOptional: true },
+	type: { type: '"button" | "submit" | "file', isOptional: true, default: "button" },
+	value: { type: "string" },
+}