@heliosgraphics/ui 2.0.0-alpha.62

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 "../.."
+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: "stable",
+	_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,47 @@
+import { Button, ButtonGroup, Flex, Text, Icon } from "../.."
+import { getClasses } from "@heliosgraphics/utils/classnames"
+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 "../.."
+
+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} data-ui-component="Alert">
+			{!!onClose && (
+				<ButtonGroup className={styles.alertButtonGroup}>
+					<Button
+						isIconOnly={true}
+						value="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>
+	)
+}

package/components/Alert/Alert.types.ts

@@ -0,0 +1,13 @@
+import type { PropsWithChildren } from "react"
+import type { HeliosIconType, HeliosColorType, HeliosAppearanceType, HeliosIntentionType } from "../.."
+
+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 "../.."
+import type { BreadcrumbProps } from "./Breadcrumb.types"
+
+export const meta: HeliosAttributeMeta<BreadcrumbProps> = {
+	_patterns: [
+		{
+			id: "ui-breadcrumb-default",
+			description: "default",
+			content: "<Breadcrumb items={BREADCRUMB_ITEMS} />",
+		},
+	],
+	_status: "stable",
+	_category: "content",
+	items: {
+		type: "Array<BreadCrumbItem>",
+	},
+}

package/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,31 @@
+import { Fragment, type FC, type ElementType } from "react"
+import { Text, Flex, Icon } from "../.."
+import type { BreadcrumbProps } from "./Breadcrumb.types"
+
+export const Breadcrumb: FC<BreadcrumbProps> = ({ items }) => {
+	if (!items?.length) return null
+
+	return (
+		<Flex isYCentered={true} gap={2} isWrapped={true}>
+			{items?.map((item, key) => {
+				const isLast: boolean = Boolean(key + 1 === items?.length)
+				const AComponent: ElementType = item.as || "a"
+
+				return (
+					<Fragment key={key}>
+						<AComponent href={item.href} onClick={item.onClick}>
+							<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" />}
+					</Fragment>
+				)
+			})}
+		</Flex>
+	)
+}

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 "../.."
+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,10 @@
+import { getClasses } from "@heliosgraphics/utils/classnames"
+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}>{children}</div>
+}

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 "../.."
+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: "stable",
+	_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" },
+}

package/components/Button/Button.module.css

@@ -0,0 +1,337 @@
+.button {
+	position: relative;
+
+	background-color: var(--bg);
+	color: var(--text);
+	transition: all var(--speed-xs) var(--ease-in-out-sine);
+
+	cursor: pointer;
+	user-select: none;
+
+	-webkit-tap-highlight-color: transparent;
+}
+
+.button:hover {
+	background-color: var(--bg-hover);
+}
+
+.button:focus-visible {
+	z-index: 1;
+
+	outline: 2px solid var(--border-focus);
+}
+
+.button:not(.buttonDisabled):active,
+.button:not(.buttonDisabled).buttonActive {
+	background-color: var(--bg-active);
+}
+
+.button:not(.buttonDisabled):active .button__badge,
+.button:not(.buttonDisabled).buttonActive .button__badge {
+	background-color: var(--bg-active);
+}
+
+.buttonDisabled {
+	background: var(--bg-disabled);
+	color: var(--text-disabled);
+}
+
+.buttonLight:not(.buttonDisabled) {
+	box-shadow: inset 0 0 0 1px var(--border);
+}
+
+.buttonLight:not(.buttonDisabled):hover {
+	box-shadow: inset 0 0 0 1px var(--border-hover);
+}
+
+.buttonLight:not(.buttonDisabled).active,
+.buttonLight:not(.buttonDisabled).buttonActive {
+	box-shadow: inset 0 0 0 1px var(--border-active);
+}
+
+/* Reset */
+.button .button__baseElement {
+	display: inline-flex;
+
+	background-color: transparent;
+	border: 0;
+	color: inherit;
+	transition: all var(--speed-xs) var(--ease-in-out-sine);
+
+	cursor: pointer;
+}
+
+.button .button__icon {
+	position: relative;
+	z-index: 2;
+
+	pointer-events: none;
+}
+
+/* Sizes */
+.buttonSizeNormal {
+	--button-badge-size: 24px;
+	--button-badge-margin: 8px;
+	--button-badge-radius: var(--radius-sm);
+
+	--button-flair-size: 20px;
+	--button-flair-offset: -10px;
+}
+
+.buttonSizeNormal,
+.buttonSizeNormal .button__baseElement {
+	height: 40px;
+	min-width: 40px;
+
+	line-height: 40px;
+}
+
+.buttonSizeNormal .button__baseElementNormal {
+	padding-inline: 11px;
+}
+
+.buttonSizeSmall {
+	--button-badge-size: 20px;
+	--button-badge-margin: 5px;
+	--button-badge-radius: var(--radius-sm);
+
+	--button-flair-size: 18px;
+	--button-flair-offset: -11px;
+}
+
+.buttonSizeSmall,
+.buttonSizeSmall .button__baseElement {
+	height: 30px;
+	min-width: 30px;
+
+	line-height: 30px;
+}
+
+.buttonSizeSmall .button__baseElementSmall {
+	padding-inline: 9px;
+}
+
+.buttonSizeSmall .button__baseElementSmall {
+	padding-inline: 9px;
+}
+
+.buttonSizeTiny {
+	--button-badge-size: 16px;
+	--button-badge-margin: 4px;
+	--button-badge-radius: var(--radius-xs);
+
+	--button-flair-size: 16px;
+	--button-flair-offset: -10px;
+}
+
+.buttonSizeTiny,
+.buttonSizeTiny .button__baseElement {
+	height: 24px;
+	min-width: 24px;
+
+	line-height: 24px;
+}
+
+.buttonSizeTiny .button__baseElementTiny {
+	padding-inline: 7px;
+}
+
+/* Loading */
+.buttonLoading,
+.buttonDisabled {
+	pointer-events: none;
+}
+
+.buttonDisabled .button__baseElement {
+	text-shadow: 0 0 0 transparent;
+}
+
+.buttonSizeNormal.buttonLoading:not(.buttonIconOnly) .button__baseElement {
+	padding-right: 40px;
+}
+
+.buttonSizeSmall.buttonLoading:not(.buttonIconOnly) .button__baseElement {
+	padding-right: 26px;
+}
+
+.buttonSizeTiny.buttonLoading:not(.buttonIconOnly) .button__baseElement {
+	padding-right: 24px;
+}
+
+.button__loading {
+	position: absolute;
+}
+
+.buttonSizeNormal:not(.buttonIconOnly) .button__loading {
+	right: 10px;
+}
+
+.buttonSizeSmall:not(.buttonIconOnly) .button__loading {
+	right: 6px;
+}
+
+.buttonSizeTiny:not(.buttonIconOnly) .button__loading {
+	right: 6px;
+}
+
+/* Badge */
+.button__badge {
+	z-index: 2;
+
+	height: var(--button-badge-size);
+	padding-inline: var(--space-2);
+	margin-right: var(--button-badge-margin);
+	margin-left: -2px;
+
+	background-color: var(--bg-active);
+	border-radius: var(--button-badge-radius);
+}
+
+/* Flair */
+.button__flair {
+	position: absolute;
+	top: var(--button-flair-offset);
+	right: var(--button-flair-offset);
+	z-index: 2;
+
+	height: var(--button-flair-size);
+	padding-inline: var(--space-3);
+	min-width: var(--button-flair-size);
+
+	background-color: var(--bg-active);
+	border-radius: 100px;
+	color: var(--text);
+}
+
+/* Icon */
+.buttonSizeNormal .button__iconLeft,
+.buttonSizeNormal .button__iconRight {
+	padding-left: 8px;
+	padding-right: 8px;
+}
+
+.buttonSizeNormal:not(.buttonIconOnly) .button__iconLeft {
+	margin-right: -12px;
+}
+
+.buttonSizeSmall:not(.buttonIconOnly) .button__iconLeft {
+	margin-right: -11px;
+	margin-top: -1px;
+}
+
+.buttonSizeSmall .button__iconLeft,
+.buttonSizeSmall .button__iconRight {
+	padding-left: 6px;
+	padding-right: 6px;
+}
+
+.buttonSizeTiny:not(.buttonIconOnly) .button__iconLeft {
+	margin-right: -6px;
+}
+
+.buttonSizeTiny .button__iconLeft,
+.buttonSizeTiny .button__iconRight {
+	padding-left: 5px;
+	padding-right: 5px;
+}
+
+/* IconRight */
+.buttonSizeNormal:not(.buttonIconOnly) .button__iconRight {
+	margin-left: -12px;
+}
+
+.buttonSizeSmall:not(.buttonIconOnly) .button__iconRight {
+	margin-left: -11px;
+	margin-top: -1px;
+}
+
+.buttonSizeTiny:not(.buttonIconOnly) .button__iconRight {
+	margin-left: -6px;
+}
+
+.button__iconRightLoading {
+	opacity: 0;
+}
+
+/* Icon:focus */
+.buttonSizeNormal.buttonIconOnly:not(.buttonIconOnlyLoading) .button__baseElement {
+	margin-left: -40px;
+	width: 40px;
+}
+
+.buttonSizeSmall.buttonIconOnly:not(.buttonIconOnlyLoading) .button__baseElement {
+	margin-left: -30px;
+	width: 30px;
+}
+
+.buttonSizeTiny.buttonIconOnly:not(.buttonIconOnlyLoading) .button__baseElement {
+	margin-left: -24px;
+	width: 24px;
+}
+
+.buttonSizeNormal.buttonWithIconLeft:not(.buttonIconOnly) .button__baseElement {
+	margin-left: -28px;
+	padding-left: 40px;
+}
+
+.buttonSizeSmall.buttonWithIconLeft:not(.buttonIconOnly) .button__baseElement {
+	margin-left: -19px;
+	padding-left: 28px;
+}
+
+.buttonSizeTiny.buttonWithIconLeft:not(.buttonIconOnly) .button__baseElement {
+	margin-left: -18px;
+	padding-left: 24px;
+}
+
+.buttonSizeNormal.buttonWithIconRight:not(.buttonIconOnly) .button__baseElement {
+	margin-right: -28px;
+	padding-right: 40px;
+}
+
+.buttonSizeSmall.buttonWithIconRight:not(.buttonIconOnly) .button__baseElement {
+	margin-right: -19px;
+	padding-right: 28px;
+}
+
+.buttonSizeTiny.buttonWithIconRight:not(.buttonIconOnly) .button__baseElement {
+	margin-right: -18px;
+	padding-right: 24px;
+}
+
+.buttonRounded {
+	border-radius: 24px;
+}
+
+.buttonRound,
+.buttonRound .button__baseElement {
+	border-radius: var(--radius-md);
+}
+
+.buttonRoundTiny,
+.buttonRoundTiny .button__baseElement {
+	border-radius: var(--radius-sm);
+}
+
+.button__input {
+	outline: none;
+}
+
+.button__label {
+	position: relative;
+	z-index: 1;
+
+	cursor: pointer;
+}
+
+.button__inputFile {
+	position: absolute;
+
+	opacity: 0.0001;
+	padding: 0;
+	height: 0;
+	width: 100%;
+
+	pointer-events: none;
+	cursor: pointer;
+}

package/components/Button/Button.spec.tsx

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