@heliosgraphics/ui 2.0.0-alpha.62

package/components/Layout/components/LayoutAside/components/LayoutAsideToggle/LayoutAsideToggle.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { FC } from "react"
+import { Button } from "../../../../../Button/Button"
+import { ButtonGroup } from "../../../../../ButtonGroup/ButtonGroup"
+import { useLayoutContext } from "../../../../../../hooks/useLayoutContext"
+import type { LayoutAsideToggleProps } from "./LayoutAsideToggle.types"
+
+export const LayoutAsideToggle: FC<LayoutAsideToggleProps> = () => {
+	const { isWideEnough, onAsideClose, onNavigationToggle, isMenuVisible, hasMounted } = useLayoutContext()
+
+	if (!hasMounted || isWideEnough) return null
+
+	return (
+		<ButtonGroup data-ui-component="Layout.Aside.Toggle">
+			<Button
+				value="Toggle"
+				intent="neutral"
+				icon={isMenuVisible ? "x" : "bars"}
+				isIconOnly={true}
+				data-ui-layout-ignore="true"
+				onClick={isMenuVisible ? onAsideClose : onNavigationToggle}
+				size="small"
+			/>
+		</ButtonGroup>
+	)
+}

package/components/Layout/components/LayoutAside/components/LayoutAsideToggle/LayoutAsideToggle.types.ts

@@ -0,0 +1 @@
+export interface LayoutAsideToggleProps {}

package/components/Layout/components/LayoutAside/components/LayoutAsideToggle/index.ts

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

package/components/Layout/components/LayoutAside/index.ts

@@ -0,0 +1,13 @@
+import type { LayoutAsideComposition } from "./LayoutAside.types"
+import { LayoutAsideContent } from "./components/LayoutAsideContent/LayoutAsideContent"
+import { LayoutAsideFooter } from "./components/LayoutAsideFooter/LayoutAsideFooter"
+import { LayoutAsideToggle } from "./components/LayoutAsideToggle/LayoutAsideToggle"
+import { LayoutAside as LAC } from "./LayoutAside"
+
+const LayoutAsideComponent = LAC as LayoutAsideComposition
+
+LayoutAsideComponent.Content = LayoutAsideContent
+LayoutAsideComponent.Footer = LayoutAsideFooter
+LayoutAsideComponent.Toggle = LayoutAsideToggle
+
+export { LayoutAsideComponent as LayoutAside }

package/components/Layout/components/LayoutMain/LayoutMain.meta.ts

@@ -0,0 +1,15 @@
+import type { HeliosAttributeMeta } from "../../../.."
+import type { LayoutMainBaseProps } from "./LayoutMain.types"
+
+export const meta: HeliosAttributeMeta<LayoutMainBaseProps> = {
+	_extends: ["FlexProps"],
+	_patterns: [
+		{
+			id: "ui-layout-main-default",
+			description: "default",
+			content: `<Layout.Main>{CHILDREN}</Layout.Main>`,
+		},
+	],
+	_status: "internal",
+	_category: "layout",
+}

package/components/Layout/components/LayoutMain/LayoutMain.module.css

@@ -0,0 +1,10 @@
+.layoutMain {
+	position: relative;
+
+	background-color: var(--ui-bg-secondary);
+}
+
+.layoutMain:has(nav[data-ui-component="Layout.Navigation"]) {
+	height: calc(100dvh - 64px);
+	margin-top: 64px;
+}

package/components/Layout/components/LayoutMain/LayoutMain.tsx

@@ -0,0 +1,21 @@
+import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getFlexUtility, getSafeFlexProps } from "../../../Flex/Flex.utils"
+import styles from "./LayoutMain.module.css"
+import type { FC } from "react"
+import type { LayoutMainProps } from "./LayoutMain.types"
+
+export const LayoutMain: FC<LayoutMainProps> = (props) => {
+	const layoutMainFlexClasses: string = getFlexUtility({
+		...props,
+		isColumn: !!props.isColumn || true,
+	})
+
+	const layoutMainClasses: string = getClasses(layoutMainFlexClasses, styles.layoutMain)
+	const safeProps = getSafeFlexProps(props)
+
+	return (
+		<main {...safeProps} data-ui-component="Layout.Main" className={layoutMainClasses}>
+			{props.children}
+		</main>
+	)
+}

package/components/Layout/components/LayoutMain/LayoutMain.types.ts

@@ -0,0 +1,12 @@
+import type { FC, ReactElement } from "react"
+import type { LayoutMainContentProps } from "./components/LayoutMainContent/LayoutMainContent.types"
+import type { FlexProps } from "../../../Flex/Flex.types"
+
+export interface LayoutMainBaseProps {}
+
+export type LayoutMainProps = FlexProps & LayoutMainBaseProps
+
+export interface LayoutMainComposition {
+	(props: LayoutMainProps): ReactElement
+	Content: FC<LayoutMainContentProps>
+}

package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.meta.ts

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

package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.module.css

@@ -0,0 +1,4 @@
+.layoutMainContent {
+	height: 100%;
+	overflow: auto;
+}

package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import { getFlexUtility, getSafeFlexProps } from "../../../../../Flex/Flex.utils"
+import { getClasses } from "@heliosgraphics/utils/classnames"
+import styles from "./LayoutMainContent.module.css"
+import { useLayoutEffect, useRef, type FC } from "react"
+import type { LayoutMainContentProps } from "./LayoutMainContent.types"
+
+export const LayoutMainContent: FC<LayoutMainContentProps> = (props) => {
+	const contentRef = useRef<HTMLElement>(null)
+
+	const layoutMainFlexClasses: string = getFlexUtility({
+		...props,
+		isColumn: true,
+	})
+	const mainContentClasses: string = getClasses(layoutMainFlexClasses, styles.layoutMainContent, "ui-bg-secondary")
+	const safeProps = getSafeFlexProps(props)
+
+	useLayoutEffect(() => {
+		if (contentRef.current) {
+			contentRef.current.scrollTo(0, 0)
+		}
+	}, [props.children])
+
+	return (
+		<section {...safeProps} ref={contentRef} className={mainContentClasses} data-ui-component="Main.Content">
+			{props.children}
+		</section>
+	)
+}

package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.types.ts

@@ -0,0 +1,5 @@
+import type { FlexProps } from "../../../../../Flex/Flex.types"
+
+export interface LayoutMainContentBaseProps {}
+
+export type LayoutMainContentProps = FlexProps & LayoutMainContentBaseProps

package/components/Layout/components/LayoutMain/components/LayoutMainContent/index.ts

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

package/components/Layout/components/LayoutMain/index.ts

@@ -0,0 +1,9 @@
+import type { LayoutMainComposition } from "./LayoutMain.types"
+import { LayoutMainContent } from "./components/LayoutMainContent/LayoutMainContent"
+import { LayoutMain as SC } from "./LayoutMain"
+
+const LayoutMainComponent = SC as LayoutMainComposition
+
+LayoutMainComponent.Content = LayoutMainContent
+
+export { LayoutMainComponent as LayoutMain }

package/components/Layout/components/LayoutNavigation/LayoutNavigation.meta.ts

@@ -0,0 +1,15 @@
+import type { HeliosAttributeMeta } from "../../../.."
+import type { LayoutNavigationBaseProps } from "./LayoutNavigation.types"
+
+export const meta: HeliosAttributeMeta<LayoutNavigationBaseProps> = {
+	_patterns: [
+		{
+			id: "ui-layout-navigation-default",
+			description: "default",
+			content: `<Layout.Navigation>{CHILDREN}</Layout.Navigation>`,
+		},
+	],
+	_status: "internal",
+	_category: "layout",
+	_extends: ["FlexProps"],
+}

package/components/Layout/components/LayoutNavigation/LayoutNavigation.module.css

@@ -0,0 +1,13 @@
+.layoutNavigation {
+	position: fixed;
+	top: 0;
+	z-index: var(--z-index-5);
+
+	height: 64px;
+	width: -moz-available;
+	width: -webkit-fill-available;
+	width: stretch;
+
+	border-right: 1px solid var(--ui-border-secondary);
+	border-bottom: 1px solid var(--ui-border-secondary);
+}

package/components/Layout/components/LayoutNavigation/LayoutNavigation.tsx

@@ -0,0 +1,22 @@
+import { getFlexUtility, getSafeFlexProps } from "../../../Flex/Flex.utils"
+import { getClasses } from "@heliosgraphics/utils/classnames"
+import styles from "./LayoutNavigation.module.css"
+import type { FC } from "react"
+import type { LayoutNavigationProps } from "./LayoutNavigation.types"
+
+export const LayoutNavigation: FC<LayoutNavigationProps> = (props) => {
+	const mainNavigationFlexClasses: string = getFlexUtility({
+		...props,
+		isYCentered: props.isYCentered ?? true,
+		paddingX: props.paddingX ?? 8,
+	})
+
+	const navigationClasses: string = getClasses(mainNavigationFlexClasses, styles.layoutNavigation, "ui-bg")
+	const safeProps = getSafeFlexProps(props)
+
+	return (
+		<nav {...safeProps} className={navigationClasses} data-ui-component="Layout.Navigation">
+			{props.children}
+		</nav>
+	)
+}

package/components/Layout/components/LayoutNavigation/LayoutNavigation.types.ts

@@ -0,0 +1,5 @@
+import type { FlexProps } from "../../../.."
+
+export interface LayoutNavigationBaseProps {}
+
+export type LayoutNavigationProps = FlexProps & LayoutNavigationBaseProps

package/components/Layout/components/LayoutNavigation/index.ts

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

package/components/Layout/index.ts

@@ -0,0 +1,15 @@
+import type { LayoutComposition } from "./Layout.types"
+import { LayoutAside } from "./components/LayoutAside"
+import { LayoutMain } from "./components/LayoutMain"
+import { LayoutNavigation } from "./components/LayoutNavigation/LayoutNavigation"
+import { Layout as LC } from "./Layout"
+import type { LayoutAsideComposition } from "./components/LayoutAside/LayoutAside.types"
+import type { LayoutMainComposition } from "./components/LayoutMain/LayoutMain.types"
+
+const LayoutComponent = LC as LayoutComposition
+
+LayoutComponent.Aside = LayoutAside as LayoutAsideComposition
+LayoutComponent.Main = LayoutMain as LayoutMainComposition
+LayoutComponent.Navigation = LayoutNavigation
+
+export { LayoutComponent as Layout }

package/components/Loading/Loading.meta.ts

@@ -0,0 +1,20 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { LoadingProps } from "./Loading.types"
+
+export const meta: HeliosAttributeMeta<LoadingProps> = {
+	_patterns: [
+		{
+			id: "ui-loading-default",
+			description: "default",
+			content: `<Loading emphasis={EMPHASIS} size={20}/>`,
+		},
+	],
+	_status: "stable",
+	_category: "core",
+	className: { type: "string", isOptional: true },
+	size: { type: "10 | 20 | 40" },
+	emphasis: {
+		type: "HeliosEmphasisType",
+		isOptional: true,
+	},
+}

package/components/Loading/Loading.module.css

@@ -0,0 +1,65 @@
+.loading {
+	z-index: var(--z-index-1);
+
+	animation: showIconLoading var(--speed-sm) ease-in-out;
+}
+
+.loading128 circle {
+	animation: rotateIconLoading128 600ms linear forwards infinite;
+}
+
+.loading64 circle {
+	animation: rotateIconLoading64 600ms linear forwards infinite;
+}
+
+.loading32 circle {
+	animation: rotateIconLoading32 600ms linear forwards infinite;
+}
+
+.loadingPrimary {
+	color: var(--ui-text-primary);
+}
+
+.loadingSecondary {
+	color: var(--ui-text-secondary);
+}
+
+.loadingTertiary {
+	color: var(--ui-text-tertiary);
+}
+
+@keyframes showIconLoading {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes rotateIconLoading32 {
+	from {
+		stroke-dashoffset: 0;
+	}
+	to {
+		stroke-dashoffset: 32;
+	}
+}
+
+@keyframes rotateIconLoading64 {
+	from {
+		stroke-dashoffset: 0;
+	}
+	to {
+		stroke-dashoffset: 64;
+	}
+}
+
+@keyframes rotateIconLoading128 {
+	from {
+		stroke-dashoffset: 0;
+	}
+	to {
+		stroke-dashoffset: 128;
+	}
+}

package/components/Loading/Loading.tsx

@@ -0,0 +1,43 @@
+import { getClasses } from "@heliosgraphics/utils/classnames"
+import styles from "./Loading.module.css"
+import type { FC } from "react"
+import type { LoadingProps } from "./Loading.types"
+
+export const Loading: FC<LoadingProps> = ({ className, size, emphasis }) => {
+	const rSize = size / 2
+	const cSize = rSize + 2
+	const dashSize = size + cSize
+
+	const loadingClasses: string = getClasses(className, styles.loading, {
+		[styles.loading32]: size === 10,
+		[styles.loading64]: size === 20,
+		[styles.loading128]: size === 40,
+		[styles.loadingPrimary]: emphasis === "primary",
+		[styles.loadingSecondary]: emphasis === "secondary",
+		[styles.loadingTertiary]: emphasis === "tertiary",
+	})
+
+	return (
+		<svg className={loadingClasses} xmlns="http://www.w3.org/2000/svg" height={size + 4} width={size + 4}>
+			<circle
+				fill="none"
+				strokeWidth={4}
+				stroke="currentcolor"
+				cx={cSize}
+				cy={cSize}
+				r={rSize}
+				style={{ opacity: 0.25 }}
+			/>
+			<circle
+				fill="none"
+				strokeWidth={4}
+				stroke="currentcolor"
+				strokeDasharray={dashSize}
+				strokeLinecap="round"
+				cx={cSize}
+				cy={cSize}
+				r={rSize}
+			/>
+		</svg>
+	)
+}

package/components/Loading/Loading.types.ts

@@ -0,0 +1,7 @@
+import type { HeliosEmphasisType } from "../.."
+
+export interface LoadingProps {
+	className?: string
+	size: 10 | 20 | 40
+	emphasis?: HeliosEmphasisType
+}

package/components/Loading/index.ts

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

package/components/Markdown/Markdown.meta.ts

@@ -0,0 +1,21 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { MarkdownProps } from "./Markdown.types"
+
+export const meta: HeliosAttributeMeta<MarkdownProps> = {
+	_patterns: [
+		{
+			id: "ui-markdown-default",
+			description: "default",
+			content: `<Markdown text={MARKDOWN}/>`,
+		},
+	],
+	_status: "stable",
+	_category: "content",
+	isNonSelectable: {
+		type: "boolean",
+		isOptional: true,
+	},
+	text: {
+		type: "string",
+	},
+}