@heliosgraphics/ui 2.0.0-alpha.62

package/components/Markdown/Markdown.module.css

@@ -0,0 +1,268 @@
+.markdown {
+	overflow-wrap: break-word;
+
+	font-family: var(--font-family-sans);
+	font-size: var(--font-size-p);
+	line-height: var(--line-height-p);
+}
+
+.markdownNonSelectable {
+	user-select: none;
+}
+
+.markdown del,
+.markdown s {
+	color: var(--ui-text-tertiary);
+}
+
+.markdown h1:not(:first-child),
+.markdown h2:not(:first-child),
+.markdown h3:not(:first-child),
+.markdown h4:not(:first-child),
+.markdown h5:not(:first-child),
+.markdown h6:not(:first-child),
+.markdown p:not(:first-child),
+.markdown small:not(:first-child),
+.markdown img:not(:first-child),
+.markdown blockquote:not(:first-child),
+.markdown table:not(:first-child),
+.markdown hr:not(:first-child),
+.markdown ul:not(:first-child),
+.markdown ol:not(:first-child) {
+	margin-top: 20px;
+}
+
+.markdown h1:not(:last-child),
+.markdown h2:not(:last-child),
+.markdown h3:not(:last-child),
+.markdown h4:not(:last-child),
+.markdown h5:not(:last-child),
+.markdown h6:not(:last-child),
+.markdown p:not(:last-child),
+.markdown small:not(:last-child),
+.markdown img:not(:last-child),
+.markdown blockquote:not(:last-child),
+.markdown table:not(:last-child),
+.markdown hr:not(:last-child),
+.markdown ul:not(:last-child),
+.markdown ol:not(:last-child) {
+	margin-bottom: 20px;
+}
+
+.markdown hr:has(+ hr):not(:last-child) {
+	margin-bottom: 32px;
+}
+
+.markdown hr:has(+ hr):not(:first-child) {
+	margin-top: 32px;
+}
+
+.markdown hr + hr {
+	display: none;
+}
+
+/* Element: Blockquote */
+.markdown blockquote {
+	position: relative;
+
+	display: block;
+	padding: 16px 42px;
+
+	background-color: var(--ui-bg-secondary);
+	border-radius: var(--radius-normal);
+	color: var(--ui-text-secondary);
+}
+
+.markdown blockquote:before,
+.markdown blockquote:after {
+	position: absolute;
+
+	align-items: center;
+	display: flex;
+	justify-content: center;
+	width: 48px;
+
+	color: var(--ui-text-tertiary);
+
+	content: "“ ";
+	font-size: var(--font-size-h1);
+	line-height: 48px;
+}
+
+.markdown blockquote:before {
+	top: 8px;
+	left: 0;
+}
+
+.markdown blockquote:after {
+	bottom: -16px;
+	right: 0;
+}
+
+.markdown blockquote p {
+	font-size: inherit;
+	line-height: inherit;
+}
+
+/* Element: Link */
+.markdown a {
+	color: var(--ui-text-intent-advise);
+
+	font-weight: var(--font-weight-medium);
+	text-decoration: underline;
+}
+
+/* Element: List */
+.markdown ul li {
+	list-style-type: disc;
+}
+
+.markdown ol li {
+	margin-left: 32px;
+	list-style-type: decimal;
+}
+
+.markdown li {
+	margin-left: 24px;
+}
+
+.markdown ul:not(:first-child) ul {
+	margin-top: 0;
+}
+
+.markdown ul:not(:first-child) ul li {
+	list-style-type: circle;
+}
+
+/* Element: Separator */
+.markdown hr {
+	border: 0;
+	border-top: 1px solid var(--ui-border-secondary);
+}
+
+/* Element: Table */
+.markdown table {
+	max-width: 100%;
+
+	border: 1px solid var(--ui-border-secondary);
+	border-collapse: collapse;
+
+	font-size: var(--font-size-small);
+	line-height: var(--line-height-small);
+	text-align: left;
+	word-break: initial;
+}
+
+.markdown table tr,
+.markdown table tr th,
+.markdown table tr td {
+	border: 1px solid var(--ui-border-secondary);
+}
+
+.markdown table tr th {
+	padding: 4px 8px;
+	font-weight: bold;
+}
+
+.markdown table tr td {
+	padding: 4px 8px;
+}
+
+.markdown img {
+	max-width: max-content;
+	width: 100%;
+
+	border-radius: var(--radius-normal);
+}
+
+/* Element: Headings */
+.markdown h1 {
+	font-size: var(--font-size-h1);
+	line-height: var(--line-height-h1);
+}
+.markdown h2 {
+	font-size: var(--font-size-h2);
+	line-height: var(--line-height-h2);
+}
+.markdown h3 {
+	font-size: var(--font-size-h3);
+	line-height: var(--line-height-h3);
+}
+.markdown h4 {
+	font-size: var(--font-size-h4);
+	line-height: var(--line-height-h4);
+}
+.markdown h5 {
+	font-size: var(--font-size-h5);
+	line-height: var(--line-height-h5);
+}
+.markdown h6 {
+	font-size: var(--font-size-h6);
+	line-height: var(--line-height-h6);
+}
+
+.markdown h1,
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+	font-weight: var(--font-weight-semi-bold);
+	color: var(--fui-color-800);
+}
+
+.markdown p {
+	font-size: var(--font-size-p);
+	line-height: var(--line-height-p);
+}
+
+/* Element: strong, bold: 700 */
+.markdown b,
+.markdown strong {
+	font-weight: var(--font-weight-bold);
+}
+
+/* Element: Delete */
+.markdown del {
+	text-decoration: line-through;
+}
+
+/* Element: Italic */
+.markdown i,
+.markdown em {
+	font-style: italic;
+}
+
+/* Modifier: Code */
+.markdown *:not(pre) code {
+	display: inline-block;
+	padding: 0 4px;
+
+	background-color: var(--ui-bg-secondary);
+	border-radius: var(--radius-small);
+	color: var(--ui-text-secondary);
+}
+
+.markdown code {
+	font-family: var(--font-family-mono);
+	font-size: var(--font-size-small);
+	line-height: var(--line-height-small);
+	word-break: break-word;
+}
+
+.markdown pre {
+	position: relative;
+
+	padding: 16px 24px;
+	overflow: auto;
+
+	background-color: var(--ui-bg-tertiary);
+	border-radius: var(--radius-normal);
+	color: var(--ui-text-secondary);
+
+	counter-reset: line;
+	tab-size: 4;
+	font-family: var(--font-family-mono);
+	font-size: var(--font-size-tiny);
+	line-height: var(--line-height-tiny);
+}

package/components/Markdown/Markdown.tsx

@@ -0,0 +1,16 @@
+import { md } from "./Markdown.utils"
+import { getClasses } from "@heliosgraphics/utils/classnames"
+import styles from "./Markdown.module.css"
+import type { FC } from "react"
+import type { MarkdownProps } from "./Markdown.types"
+
+export const Markdown: FC<MarkdownProps> = ({ text, isNonSelectable }) => {
+	if (!text) return null
+
+	const innerHTML = { __html: md.render(text) }
+	const markdownClasses: string = getClasses(styles.markdown, {
+		[styles.markdownNonSelectable]: isNonSelectable,
+	})
+
+	return <div className={markdownClasses} dangerouslySetInnerHTML={innerHTML}></div>
+}

package/components/Markdown/Markdown.types.ts

@@ -0,0 +1,4 @@
+export interface MarkdownProps {
+	isNonSelectable?: boolean
+	text: string
+}

package/components/Markdown/Markdown.utils.spec.ts

@@ -0,0 +1,11 @@
+import { it, describe, expect } from "vitest"
+import { md } from "./Markdown.utils"
+
+describe("markdown", () => {
+	describe("md", () => {
+		const SAMPLE = `Hello\n\nHey`
+		const SAMPLE_OUTPUT = `<p>Hello</p>\n<p>Hey</p>\n`
+
+		it("Returns", () => expect(md.render(SAMPLE)).toEqual(SAMPLE_OUTPUT))
+	})
+})

package/components/Markdown/Markdown.utils.ts

@@ -0,0 +1,8 @@
+import markdownIt from "markdown-it"
+
+export const md = markdownIt({
+	breaks: true,
+	html: true,
+	xhtmlOut: true,
+	linkify: true,
+})

package/components/Markdown/index.ts

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

package/components/Masonry/Masonry.meta.ts

@@ -0,0 +1,28 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { MasonryBaseProps } from "./Masonry.types"
+
+export const meta: HeliosAttributeMeta<MasonryBaseProps> = {
+	_extends: ["PropsWithChildren"],
+	_patterns: [
+		{
+			id: "ui-masonry-default",
+			description: "default",
+			content: `<Masonry columns={2}>{CHILDREN}</Masonry>`,
+		},
+	],
+	_status: "experimental",
+	_category: "layout",
+	brakepoints: {
+		type: "[number, number, number]",
+	},
+	columns: {
+		type: "[number, number, number]",
+	},
+	gap: {
+		type: "[number, number, number]",
+	},
+	useBalancedLayout: {
+		type: "boolean",
+		isOptional: true,
+	},
+}

package/components/Masonry/Masonry.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import { Masonry as MasonryPlock } from "react-plock"
+import { Children, type ReactElement, type FC } from "react"
+import type { MasonryProps } from "./Masonry.types"
+
+export const Masonry: FC<MasonryProps> = ({ children, columns, gap, brakepoints, useBalancedLayout }) => {
+	if (!children) return null
+
+	const mappedChildren = Children.toArray(children).map((child) => <div className="Row">{child}</div>) as ReactElement[]
+
+	return (
+		<MasonryPlock
+			items={mappedChildren}
+			render={(item) => item}
+			config={{
+				columns: columns,
+				gap: gap,
+				media: brakepoints,
+				useBalancedLayout: Boolean(useBalancedLayout),
+			}}
+		/>
+	)
+}

package/components/Masonry/Masonry.types.ts

@@ -0,0 +1,10 @@
+import type { PropsWithChildren } from "react"
+
+export interface MasonryBaseProps {
+	columns: [number, number, number]
+	gap: [number, number, number]
+	brakepoints: [number, number, number]
+	useBalancedLayout?: boolean
+}
+
+export type MasonryProps = PropsWithChildren<MasonryBaseProps>

package/components/Masonry/index.ts

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

package/components/Menu/Menu.meta.ts

@@ -0,0 +1,15 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { MenuBaseProps } from "./Menu.types"
+
+export const meta: HeliosAttributeMeta<MenuBaseProps> = {
+	_extends: ["FlexProps", "PropsWithChildren"],
+	_patterns: [
+		{
+			id: "ui-menu-default",
+			description: "default",
+			content: `<Menu>{CHILDREN}</Menu>`,
+		},
+	],
+	_status: "experimental",
+	_category: "layout",
+}

package/components/Menu/Menu.tsx

@@ -0,0 +1,18 @@
+"use client"
+
+import { FC } from "react"
+import type { MenuProps } from "./Menu.types"
+import { getClasses } from "@heliosgraphics/utils"
+import { getFlexUtility, getSafeFlexProps } from "../Flex/Flex.utils"
+
+export const Menu: FC<MenuProps> = (props) => {
+	const menuFlexClasses: string = getFlexUtility({ ...props, isColumn: true, isFullWidth: true })
+	const asideContentClasses: string = getClasses(menuFlexClasses)
+	const safeProps = getSafeFlexProps(props)
+
+	return (
+		<nav {...safeProps} className={asideContentClasses} data-ui-component="Menu">
+			{props.children}
+		</nav>
+	)
+}

package/components/Menu/Menu.types.ts

@@ -0,0 +1,15 @@
+import type { FC, ReactElement } from "react"
+import type { MenuCategoryProps } from "./components/MenuCategory/MenuCategory.types"
+import type { MenuFilterProps } from "./components/MenuFilter/MenuFilter.types"
+import type { MenuItemProps } from "./components/MenuItem/MenuItem.types"
+import type { FlexProps } from "../Flex/Flex.types"
+
+export interface MenuBaseProps {}
+export type MenuProps = FlexProps & MenuBaseProps
+
+export interface MenuComposition {
+	(props: MenuProps): ReactElement
+	Category: FC<MenuCategoryProps>
+	Filter: FC<MenuFilterProps>
+	Item: FC<MenuItemProps>
+}

package/components/Menu/components/MenuCategory/MenuCategory.meta.ts

@@ -0,0 +1,32 @@
+import type { HeliosAttributeMeta } from "../../../.."
+import type { MenuCategoryBaseProps } from "./MenuCategory.types"
+
+export const meta: HeliosAttributeMeta<MenuCategoryBaseProps> = {
+	_extends: ["PropsWithChildren"],
+	_patterns: [
+		{
+			id: "ui-menu-category-default",
+			description: "default",
+			content: `<Menu.Category>{CHILDREN}</Menu.Category>`,
+		},
+	],
+	_status: "experimental",
+	_category: "layout",
+	category: {
+		type: "string",
+		isOptional: true,
+	},
+	isFolder: {
+		type: "boolean",
+		isOptional: true,
+	},
+	isInitiallyClosed: {
+		type: "boolean",
+		isOptional: true,
+		default: "false",
+	},
+	isOpen: {
+		type: "boolean",
+		isOptional: true,
+	},
+}

package/components/Menu/components/MenuCategory/MenuCategory.module.css

@@ -0,0 +1,73 @@
+.menuCategoryPlain {
+	padding-top: 8px;
+}
+
+.menuCategoryTitle {
+	height: 40px;
+	padding-inline: 8px;
+}
+
+.menuCategoryFolder .menuCategoryTitle {
+	border-bottom: 1px solid var(--ui-border-secondary);
+}
+
+.menuCategoryFolder .menuCategoryItems {
+	margin-left: 8px;
+
+	border-left: 1px solid var(--ui-border-secondary);
+}
+
+.menuCategory.menuCategoryFolderOpen .menuCategoryItems {
+	padding-block: 8px;
+
+	border-bottom: 1px solid var(--ui-border-secondary);
+}
+
+.menuCategory .menuCategoryItems {
+	display: grid;
+	grid-template-rows: 1fr;
+	padding-block: 8px;
+	opacity: 1;
+
+	border-bottom: 1px solid var(--ui-border-secondary);
+	transition:
+		grid-template-rows var(--speed-md) var(--ease-in-out-sine),
+		opacity var(--speed-md) var(--ease-in-out-sine),
+		padding-block var(--speed-md) var(--ease-in-out-sine);
+}
+
+.menuCategory .menuCategoryItems.menuCategoryItemsHidden,
+.menuCategory.menuCategoryFolderOpen .menuCategoryItems.menuCategoryItemsHidden {
+	grid-template-rows: 0fr;
+	opacity: 0;
+	padding-block: 0;
+
+	border-bottom: none !important;
+}
+
+.menuCategory:has(.menuCategoryFolder) > .menuCategoryItems:not(.menuCategoryItemsHidden) {
+	padding-block: 0;
+
+	border-bottom: none;
+}
+
+.menuCategory:has(.menuCategoryFolder.menuCategoryFolderOpen:last-child)
+	.menuCategoryItems:not(.menuCategoryItemsHidden) {
+	padding-bottom: 8px;
+
+	border-bottom: 1px solid var(--ui-border-secondary);
+}
+
+.menuCategoryItemsInner {
+	min-height: 0;
+	overflow: hidden;
+}
+
+.menuCategoryFolderIcon {
+	transform: rotate(0deg);
+	transition: transform var(--speed-md) var(--ease-in-out-sine);
+}
+
+.menuCategoryFolderIconOpen {
+	transform: rotate(90deg);
+}

package/components/Menu/components/MenuCategory/MenuCategory.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import { useEffect, useState, type FC } from "react"
+import { Flex, Icon, Text } from "../../../.."
+import { getClasses } from "@heliosgraphics/utils"
+import styles from "./MenuCategory.module.css"
+import type { MenuCategoryProps } from "./MenuCategory.types"
+
+export const MenuCategory: FC<MenuCategoryProps> = ({ category, children, isFolder, isOpen: isIncomingOpen }) => {
+	const [isOpen, setOpen] = useState<boolean>(!!isIncomingOpen)
+	const onToggle = (): void => setOpen(!isOpen)
+
+	const menuCategoryClasses: string = getClasses(styles.menuCategory, {
+		[styles.menuCategoryFolder]: category,
+		[styles.menuCategoryFolderOpen]: isOpen,
+		[styles.menuCategoryPlain]: !category,
+	})
+
+	const menuCategoryItemsClasses: string = getClasses(styles.menuCategoryItems, {
+		[styles.menuCategoryItemsHidden]: !isOpen,
+	})
+
+	const folderIconClasses: string = getClasses(styles.menuCategoryFolderIcon, {
+		[styles.menuCategoryFolderIconOpen]: isOpen,
+	})
+
+	const showHeader: boolean = Boolean(category || isFolder)
+
+	useEffect(() => {
+		setOpen(!!isIncomingOpen)
+	}, [isIncomingOpen])
+
+	return (
+		<Flex isColumn={true} isXCentered={true} data-ui-component="Menu.Category" className={menuCategoryClasses}>
+			{showHeader && (
+				<Flex
+					{...(isFolder && onToggle && { onClick: onToggle })}
+					isBetween={true}
+					isYCentered={true}
+					gap={4}
+					className={styles.menuCategoryTitle}
+				>
+					<Text type="tiny" emphasis={isOpen ? "secondary" : "primary"} fontWeight="medium" isNonSelectable={true}>
+						{category}
+					</Text>
+					{isFolder && (
+						<Icon
+							size={16}
+							emphasis={isOpen ? "tertiary" : "primary"}
+							icon="chevron-right"
+							className={folderIconClasses}
+						/>
+					)}
+				</Flex>
+			)}
+			<Flex className={menuCategoryItemsClasses}>
+				<Flex isColumn={true} gap={1} className={styles.menuCategoryItemsInner}>
+					{children}
+				</Flex>
+			</Flex>
+		</Flex>
+	)
+}

package/components/Menu/components/MenuCategory/MenuCategory.types.ts

@@ -0,0 +1,10 @@
+import type { PropsWithChildren } from "react"
+
+export interface MenuCategoryBaseProps {
+	category?: string
+	isFolder?: boolean
+	isInitiallyClosed?: boolean
+	isOpen?: boolean
+}
+
+export type MenuCategoryProps = PropsWithChildren<MenuCategoryBaseProps>

package/components/Menu/components/MenuCategory/index.ts

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

package/components/Menu/components/MenuFilter/MenuFilter.meta.ts

@@ -0,0 +1,24 @@
+import type { HeliosAttributeMeta } from "../../../.."
+import type { MenuFilterProps } from "./MenuFilter.types"
+
+export const meta: HeliosAttributeMeta<MenuFilterProps> = {
+	_patterns: [
+		{
+			id: "ui-menu-filter-default",
+			description: "default",
+			content: `<Menu.Filter onChange={onChange} value={value} />`,
+		},
+	],
+	_status: "experimental",
+	_category: "layout",
+	onChange: {
+		type: "(event?: ChangeEvent<HTMLInputElement>) => void",
+	},
+	onClear: {
+		type: "HeliosOnClickType",
+		isOptional: true,
+	},
+	value: {
+		type: "string",
+	},
+}

package/components/Menu/components/MenuFilter/MenuFilter.module.css

@@ -0,0 +1,11 @@
+.menuFilter {
+	position: sticky;
+	top: 0;
+	z-index: var(--z-index-1);
+
+	/* NOTE @03b8 leaks intentionally */
+	margin-right: 1px;
+	padding: 16px;
+
+	border-bottom: 1px solid var(--ui-border-secondary);
+}

package/components/Menu/components/MenuFilter/MenuFilter.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { FC } from "react"
+import { Input } from "../../../.."
+import { getClasses } from "@heliosgraphics/utils"
+import styles from "./MenuFilter.module.css"
+import type { MenuFilterProps } from "./MenuFilter.types"
+
+export const MenuFilter: FC<MenuFilterProps> = ({ value, onClear, onChange }) => {
+	const menuFilterClasses: string = getClasses(styles.menuFilter, "ui-bg-glass")
+
+	return (
+		<div className={menuFilterClasses} data-ui-component="Menu.Filter">
+			<Input
+				{...(onClear && { onClear })}
+				placeholder="Search"
+				value={value}
+				onChange={onChange}
+				autoComplete="new-password"
+				label="Search"
+				isLabelHidden={true}
+			/>
+		</div>
+	)
+}

package/components/Menu/components/MenuFilter/MenuFilter.types.ts

@@ -0,0 +1,7 @@
+import type { ChangeEventHandler, MouseEventHandler } from "react"
+
+export interface MenuFilterProps {
+	onChange: ChangeEventHandler<HTMLInputElement>
+	onClear?: MouseEventHandler<HTMLDivElement>
+	value: string
+}

package/components/Menu/components/MenuFilter/index.ts

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