@drivenets/design-system 0.6.1 → 0.7.0

package/src/components/ds-tree/ds-tree.module.scss

@@ -0,0 +1,283 @@
+@use '../../styles/typography';
+
+$indent-per-level: 12px;
+$half-icon: calc(var(--icon-width-tiny) * 0.5);
+$transition-duration: 0.2s;
+
+@mixin node-row {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3xs);
+	border-radius: 4px;
+	cursor: pointer;
+	user-select: none;
+	width: 100%;
+	background: transparent;
+	color: var(--color-font-secondary);
+
+	--ds-tree-depth: calc(var(--depth) - 1);
+	--ds-tree-indent-offset: calc(#{$indent-per-level} * var(--ds-tree-depth));
+	--ds-tree-icon-offset: calc(#{$half-icon} * var(--ds-tree-depth));
+	--ds-tree-offset: calc(var(--spacing-3xs) + var(--ds-tree-indent-offset) + var(--ds-tree-icon-offset));
+
+	padding-inline-start: var(--ds-tree-offset);
+	padding-inline-end: var(--spacing-3xs);
+
+	&:hover {
+		background: var(--color-background-action-hover-weak);
+	}
+
+	&[data-focus] {
+		position: relative;
+		outline: none;
+		background: var(--color-background-action-hover-weak);
+
+		&::after {
+			content: '';
+			position: absolute;
+			inset: 0;
+			z-index: 2;
+			border: 2px solid var(--color-border-action-primary-hover);
+			border-radius: inherit;
+			pointer-events: none;
+		}
+	}
+
+	&[data-selected] {
+		background: var(--color-background-action-secondary-hover);
+	}
+
+	&[data-disabled] {
+		cursor: not-allowed;
+		pointer-events: none;
+		.itemText {
+			color: var(--color-secondary-300);
+		}
+	}
+
+	&:hover .itemAction,
+	&[data-focus-visible] .itemAction {
+		opacity: 1;
+	}
+}
+
+@mixin node-text {
+	flex: 1;
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-xs);
+	min-width: 0;
+
+	@include typography.ellipsis;
+}
+
+.root {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+
+	&[data-size='medium'] {
+		.branchControl,
+		.item {
+			padding-block: var(--spacing-xs);
+		}
+
+		.branchText,
+		.itemText {
+			@include typography.body-sm-reg;
+		}
+	}
+
+	&[data-size='small'] {
+		.branchControl,
+		.item {
+			padding-block: var(--spacing-2xs);
+		}
+
+		.branchText,
+		.itemText {
+			@include typography.body-xs-reg;
+		}
+	}
+}
+
+.tree {
+	display: flex;
+	flex-direction: column;
+}
+
+.branch {
+	position: relative;
+}
+
+.branchControl {
+	@include node-row;
+}
+
+.branchIndicator {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	width: var(--icon-width-tiny);
+	height: var(--icon-width-tiny);
+	color: var(--color-font-main);
+	transform-origin: center;
+	transition: transform $transition-duration;
+
+	&[data-state='open'] {
+		transform: rotate(90deg);
+	}
+}
+
+.branchText {
+	@include node-text;
+	color: var(--color-font-secondary);
+}
+
+.branchContent {
+	position: relative;
+	overflow: hidden;
+
+	&[data-state='open'] {
+		animation: ds-tree-expand $transition-duration ease-out;
+	}
+
+	&[data-state='closed'] {
+		animation: ds-tree-collapse $transition-duration ease-out;
+	}
+}
+
+.branchIndentGuide {
+	position: absolute;
+	z-index: 1;
+	width: 1px;
+	height: 100%;
+	background: var(--color-border-secondary);
+
+	--ds-tree-depth: calc(var(--depth) - 1);
+	--ds-tree-indent-offset: calc(#{$indent-per-level} * var(--ds-tree-depth));
+	--ds-tree-guide-offset: calc(var(--spacing-3xs) + var(--ds-tree-indent-offset));
+	--ds-tree-icon-offset: calc(#{$half-icon} * var(--depth));
+
+	inset-inline-start: calc(var(--ds-tree-guide-offset) + var(--ds-tree-icon-offset));
+}
+
+.item {
+	@include node-row;
+}
+
+.itemText {
+	@include node-text;
+	color: var(--color-font-secondary);
+}
+
+.itemIndicator {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	width: var(--icon-width-tiny);
+	height: var(--icon-width-tiny);
+}
+
+.itemDot {
+	width: 4px;
+	height: 4px;
+	border-radius: 50%;
+	background-color: var(--color-font-main);
+}
+
+.itemAction {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	border: none;
+	background: transparent;
+	padding: 0;
+	opacity: 0;
+	cursor: pointer;
+	color: var(--color-font-secondary);
+	transition: opacity $transition-duration;
+
+	&:hover {
+		color: var(--color-font-main);
+	}
+}
+
+.nodeCheckbox {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	cursor: pointer;
+
+	&[data-state='checked'],
+	&[data-state='indeterminate'] {
+		.nodeCheckboxBox {
+			background-color: var(--color-background-selected);
+			border-color: var(--color-background-selected);
+		}
+	}
+
+	&[data-disabled] {
+		cursor: not-allowed;
+
+		.nodeCheckboxBox {
+			border-color: var(--color-background-disable);
+		}
+
+		&[data-state='checked'] .nodeCheckboxBox,
+		&[data-state='indeterminate'] .nodeCheckboxBox {
+			background-color: var(--color-background-disable);
+			border-color: var(--color-background-disable);
+		}
+	}
+}
+
+.nodeCheckboxBox {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 16px;
+	height: 16px;
+	border: 1.5px solid var(--color-background-deselected);
+	border-radius: 2px;
+	color: var(--color-secondary-white);
+	transition:
+		background-color $transition-duration,
+		border-color $transition-duration;
+}
+
+.nodeCheckboxIndicator {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+@keyframes ds-tree-expand {
+	from {
+		height: 0;
+		opacity: 0;
+	}
+
+	to {
+		height: var(--height);
+		opacity: 1;
+	}
+}
+
+@keyframes ds-tree-collapse {
+	from {
+		height: var(--height);
+		opacity: 1;
+	}
+
+	to {
+		height: 0;
+		opacity: 0;
+	}
+}

package/src/components/ds-tree/ds-tree.tsx

@@ -0,0 +1,172 @@
+import { TreeView } from '@ark-ui/react/tree-view';
+import classNames from 'classnames';
+
+import { DsIcon } from '../ds-icon';
+import styles from './ds-tree.module.scss';
+import type {
+	DsTreeBranchContentProps,
+	DsTreeBranchControlProps,
+	DsTreeBranchIndentGuideProps,
+	DsTreeBranchIndicatorProps,
+	DsTreeBranchProps,
+	DsTreeBranchTextProps,
+	DsTreeItemActionProps,
+	DsTreeItemIndicatorProps,
+	DsTreeItemProps,
+	DsTreeItemTextProps,
+	DsTreeNode,
+	DsTreeNodeCheckboxProps,
+	DsTreeRootProps,
+	DsTreeTreeProps,
+} from './ds-tree.types';
+
+const DsTreeRoot = <T extends DsTreeNode = DsTreeNode>({
+	collection,
+	size = 'medium',
+	ref,
+	className,
+	style,
+	children,
+	selectedValue,
+	defaultSelectedValue,
+	onSelectionChange,
+	selectionMode = 'single',
+	expandedValue,
+	defaultExpandedValue,
+	onExpandedChange,
+	expandOnClick = true,
+	checkedValue,
+	defaultCheckedValue,
+	onCheckedChange,
+	typeahead = true,
+	lazyMount = true,
+	unmountOnExit,
+}: DsTreeRootProps<T>) => (
+	<TreeView.Root
+		ref={ref}
+		collection={collection}
+		selectedValue={selectedValue}
+		defaultSelectedValue={defaultSelectedValue}
+		onSelectionChange={onSelectionChange}
+		selectionMode={selectionMode}
+		expandedValue={expandedValue}
+		defaultExpandedValue={defaultExpandedValue}
+		onExpandedChange={onExpandedChange}
+		expandOnClick={expandOnClick}
+		checkedValue={checkedValue}
+		defaultCheckedValue={defaultCheckedValue}
+		onCheckedChange={onCheckedChange}
+		typeahead={typeahead}
+		lazyMount={lazyMount}
+		unmountOnExit={unmountOnExit}
+		className={classNames(styles.root, className)}
+		style={style}
+		data-size={size}
+	>
+		{children}
+	</TreeView.Root>
+);
+
+const DsTreeTree = ({ className, style, children }: DsTreeTreeProps) => (
+	<TreeView.Tree className={classNames(styles.tree, className)} style={style}>
+		{children}
+	</TreeView.Tree>
+);
+
+const DsTreeBranch = ({ className, style, children }: DsTreeBranchProps) => (
+	<TreeView.Branch className={classNames(styles.branch, className)} style={style}>
+		{children}
+	</TreeView.Branch>
+);
+
+const DsTreeBranchControl = ({ className, style, children }: DsTreeBranchControlProps) => (
+	<TreeView.BranchControl className={classNames(styles.branchControl, className)} style={style}>
+		{children}
+	</TreeView.BranchControl>
+);
+
+const DsTreeBranchIndicator = ({ className, style, children }: DsTreeBranchIndicatorProps) => (
+	<TreeView.BranchIndicator className={classNames(styles.branchIndicator, className)} style={style}>
+		{children ?? <DsIcon icon="keyboard_arrow_right" size="tiny" />}
+	</TreeView.BranchIndicator>
+);
+
+const DsTreeBranchText = ({ className, style, children }: DsTreeBranchTextProps) => (
+	<TreeView.BranchText className={classNames(styles.branchText, className)} style={style}>
+		{children}
+	</TreeView.BranchText>
+);
+
+const DsTreeBranchContent = ({ className, style, children }: DsTreeBranchContentProps) => (
+	<TreeView.BranchContent className={classNames(styles.branchContent, className)} style={style}>
+		{children}
+	</TreeView.BranchContent>
+);
+
+const DsTreeBranchIndentGuide = ({ className, style }: DsTreeBranchIndentGuideProps) => (
+	<TreeView.BranchIndentGuide className={classNames(styles.branchIndentGuide, className)} style={style} />
+);
+
+const DsTreeItem = ({ className, style, children, onClick }: DsTreeItemProps) => (
+	<TreeView.Item className={classNames(styles.item, className)} style={style} onClick={onClick}>
+		{children}
+	</TreeView.Item>
+);
+
+const DsTreeItemText = ({ className, style, children }: DsTreeItemTextProps) => (
+	<TreeView.ItemText className={classNames(styles.itemText, className)} style={style}>
+		{children}
+	</TreeView.ItemText>
+);
+
+const DsTreeItemIndicator = ({ className, style }: DsTreeItemIndicatorProps) => (
+	<span className={classNames(styles.itemIndicator, className)} style={style} aria-hidden="true">
+		<span className={styles.itemDot} />
+	</span>
+);
+
+const DsTreeNodeCheckbox = ({ className, style }: DsTreeNodeCheckboxProps) => (
+	<TreeView.NodeCheckbox className={classNames(styles.nodeCheckbox, className)} style={style}>
+		<div className={styles.nodeCheckboxBox}>
+			<TreeView.NodeCheckboxIndicator
+				className={styles.nodeCheckboxIndicator}
+				indeterminate={<DsIcon icon="check_indeterminate_small" size="tiny" variant="outlined" />}
+			>
+				<DsIcon icon="check_small" size="tiny" variant="outlined" />
+			</TreeView.NodeCheckboxIndicator>
+		</div>
+	</TreeView.NodeCheckbox>
+);
+
+const DsTreeItemAction = ({ className, style, children, onClick }: DsTreeItemActionProps) => (
+	<button
+		className={classNames(styles.itemAction, className)}
+		style={style}
+		type="button"
+		tabIndex={-1}
+		onClick={(e) => {
+			e.stopPropagation();
+			onClick?.(e);
+		}}
+	>
+		{children}
+	</button>
+);
+
+export const DsTree = {
+	Root: DsTreeRoot,
+	Tree: DsTreeTree,
+	NodeProvider: TreeView.NodeProvider,
+	NodeContext: TreeView.NodeContext,
+	Branch: DsTreeBranch,
+	BranchControl: DsTreeBranchControl,
+	BranchIndicator: DsTreeBranchIndicator,
+	BranchText: DsTreeBranchText,
+	BranchContent: DsTreeBranchContent,
+	BranchIndentGuide: DsTreeBranchIndentGuide,
+	Item: DsTreeItem,
+	ItemText: DsTreeItemText,
+	ItemIndicator: DsTreeItemIndicator,
+	ItemAction: DsTreeItemAction,
+	NodeCheckbox: DsTreeNodeCheckbox,
+};

package/src/components/ds-tree/ds-tree.types.ts

@@ -0,0 +1,83 @@
+import type { CSSProperties, MouseEvent, ReactNode, Ref } from 'react';
+import type { TreeView as ArkTreeView } from '@ark-ui/react/tree-view';
+import type { IconType } from '../ds-icon';
+import type { FilterStatus } from '../ds-filter-status-icon';
+
+export interface DsTreeNode {
+	id: string;
+	name: string;
+	disabled?: boolean;
+	icon?: IconType;
+	status?: FilterStatus;
+	children?: DsTreeNode[];
+}
+
+export const dsTreeSizes = ['medium', 'small'] as const;
+export type DsTreeSize = (typeof dsTreeSizes)[number];
+
+interface DsTreeBaseProps {
+	className?: string;
+	style?: CSSProperties;
+}
+
+interface DsTreeBasePropsWithChildren extends DsTreeBaseProps {
+	children?: ReactNode;
+}
+
+export interface DsTreeRootProps<T extends DsTreeNode = DsTreeNode> extends DsTreeBasePropsWithChildren {
+	collection: ArkTreeView.RootProps<T>['collection'];
+	size?: DsTreeSize;
+	ref?: Ref<HTMLDivElement>;
+
+	selectedValue?: string[];
+	defaultSelectedValue?: string[];
+	onSelectionChange?: ArkTreeView.RootProps<T>['onSelectionChange'];
+	selectionMode?: 'single' | 'multiple';
+
+	expandedValue?: string[];
+	defaultExpandedValue?: string[];
+	onExpandedChange?: ArkTreeView.RootProps<T>['onExpandedChange'];
+	expandOnClick?: boolean;
+
+	checkedValue?: string[];
+	defaultCheckedValue?: string[];
+	onCheckedChange?: ArkTreeView.RootProps<T>['onCheckedChange'];
+
+	/**
+	 * Whether to enable typeahead navigation — typing characters focuses matching nodes
+	 */
+	typeahead?: boolean;
+	/**
+	 * Whether to defer mounting of branch content until a branch is first expanded
+	 */
+	lazyMount?: boolean;
+	unmountOnExit?: boolean;
+}
+
+export type DsTreeTreeProps = DsTreeBasePropsWithChildren;
+
+export type DsTreeBranchProps = DsTreeBasePropsWithChildren;
+
+export type DsTreeBranchControlProps = DsTreeBasePropsWithChildren;
+
+export type DsTreeBranchIndicatorProps = DsTreeBasePropsWithChildren;
+
+export type DsTreeBranchTextProps = DsTreeBasePropsWithChildren;
+
+export type DsTreeBranchContentProps = DsTreeBasePropsWithChildren;
+
+export type DsTreeBranchIndentGuideProps = DsTreeBaseProps;
+
+export interface DsTreeItemProps extends DsTreeBasePropsWithChildren {
+	onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+}
+
+export type DsTreeItemTextProps = DsTreeBasePropsWithChildren;
+
+export type DsTreeItemIndicatorProps = DsTreeBaseProps;
+
+export type DsTreeNodeCheckboxProps = DsTreeBaseProps;
+
+export interface DsTreeItemActionProps extends DsTreeBasePropsWithChildren {
+	onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+}

package/src/components/ds-tree/ds-tree.utils.ts

@@ -0,0 +1,11 @@
+import { createTreeCollection } from '@ark-ui/react/tree-view';
+
+import type { DsTreeNode } from './ds-tree.types';
+
+export const createDsTreeCollection = <T extends DsTreeNode>(nodes: T[]) =>
+	createTreeCollection<T>({
+		nodeToValue: (node) => node.id,
+		nodeToString: (node) => node.name,
+		// Ark requires rootNode typed as T; the root is a synthetic container never exposed to consumers
+		rootNode: { id: 'ROOT', name: '', children: nodes } as unknown as T,
+	});

package/src/components/ds-tree/index.ts

@@ -0,0 +1,3 @@
+export { DsTree } from './ds-tree';
+export { createDsTreeCollection } from './ds-tree.utils';
+export type * from './ds-tree.types';

package/src/index.ts

@@ -8,6 +8,10 @@ export * from './components/ds-card';
 export * from './components/ds-checkbox';
 export * from './components/ds-chip';
 export * from './components/ds-chip-group';
+export * from './components/ds-comment-bubble';
+export * from './components/ds-comment-card';
+export * from './components/ds-comment-indicator';
+export * from './components/ds-comments-drawer';
 export * from './components/ds-confirmation';
 export * from './components/ds-date-input';
 export * from './components/ds-dialog';
@@ -16,6 +20,7 @@ export * from './components/ds-drawer';
 export * from './components/ds-dropdown-menu';
 export * from './components/ds-expandable-text-input';
 export * from './components/ds-file-upload';
+export * from './components/ds-filter-status-icon';
 export * from './components/ds-form-control';
 export * from './components/ds-grid';
 export * from './components/ds-icon';
@@ -25,6 +30,9 @@ export * from './components/ds-number-input';
 export * from './components/ds-panel';
 export * from './components/ds-password-input';
 export * from './components/ds-popover';
+export * from './components/ds-progress-arc';
+export * from './components/ds-progress-donut';
+export * from './components/ds-progress-linear';
 export * from './components/ds-radio-group';
 export * from './components/ds-segment-group';
 export * from './components/ds-select';
@@ -43,5 +51,6 @@ export * from './components/ds-textarea';
 export * from './components/ds-toast';
 export * from './components/ds-toggle';
 export * from './components/ds-tooltip';
+export * from './components/ds-tree';
 export * from './components/ds-typography';
 export * from './components/ds-vertical-tabs';

package/src/utils/format-relative-time.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it, vi, afterEach, beforeEach } from 'vitest';
+import { formatRelativeTime } from './format-relative-time';
+
+const NOW = new Date('2025-06-15T12:00:00Z');
+
+const minutesAgo = (minutes: number) => new Date(NOW.getTime() - minutes * 60 * 1000);
+const hoursAgo = (hours: number) => new Date(NOW.getTime() - hours * 60 * 60 * 1000);
+const daysAgo = (days: number) => new Date(NOW.getTime() - days * 24 * 60 * 60 * 1000);
+
+describe('formatRelativeTime', () => {
+	beforeEach(() => {
+		vi.useFakeTimers();
+		vi.setSystemTime(NOW);
+	});
+
+	afterEach(() => {
+		vi.useRealTimers();
+	});
+
+	it('should return "Just now" for future dates', () => {
+		const futureDate = new Date(NOW.getTime() + 60_000);
+
+		expect(formatRelativeTime(futureDate)).toBe('Just now');
+	});
+
+	it('should return "Just now" for less than 60 seconds ago', () => {
+		const recent = new Date(NOW.getTime() - 30_000);
+
+		expect(formatRelativeTime(recent)).toBe('Just now');
+	});
+
+	it('should return "Just now" at exactly 0 seconds', () => {
+		expect(formatRelativeTime(NOW)).toBe('Just now');
+	});
+
+	it('should return minutes for 1-59 minutes ago', () => {
+		expect(formatRelativeTime(minutesAgo(1))).toBe('1m ago');
+		expect(formatRelativeTime(minutesAgo(30))).toBe('30m ago');
+		expect(formatRelativeTime(minutesAgo(59))).toBe('59m ago');
+	});
+
+	it('should return hours for 1-23 hours ago', () => {
+		expect(formatRelativeTime(hoursAgo(1))).toBe('1h ago');
+		expect(formatRelativeTime(hoursAgo(12))).toBe('12h ago');
+		expect(formatRelativeTime(hoursAgo(23))).toBe('23h ago');
+	});
+
+	it('should return days for 1-6 days ago', () => {
+		expect(formatRelativeTime(daysAgo(1))).toBe('1d ago');
+		expect(formatRelativeTime(daysAgo(6))).toBe('6d ago');
+	});
+
+	it('should return weeks for 1-3 weeks ago', () => {
+		expect(formatRelativeTime(daysAgo(7))).toBe('1w ago');
+		expect(formatRelativeTime(daysAgo(14))).toBe('2w ago');
+		expect(formatRelativeTime(daysAgo(21))).toBe('3w ago');
+	});
+
+	it('should return months for 1-11 months ago', () => {
+		expect(formatRelativeTime(daysAgo(30))).toBe('1mo ago');
+		expect(formatRelativeTime(daysAgo(60))).toBe('2mo ago');
+		expect(formatRelativeTime(daysAgo(330))).toBe('11mo ago');
+	});
+
+	it('should return years for 12+ months ago', () => {
+		expect(formatRelativeTime(daysAgo(365))).toBe('1y ago');
+		expect(formatRelativeTime(daysAgo(730))).toBe('2y ago');
+	});
+
+	it('should transition from weeks to months at 4 weeks (weeks cap at 3)', () => {
+		expect(formatRelativeTime(daysAgo(27))).toBe('3w ago');
+		expect(formatRelativeTime(daysAgo(30))).toBe('1mo ago');
+	});
+});