@drivenets/design-system 0.6.0 → 0.7.0

package/src/components/ds-comment-bubble/ds-comment-bubble.types.ts

@@ -0,0 +1,27 @@
+import type { CSSProperties, ReactNode, Ref } from 'react';
+import type { CommentAuthor, CommentData } from '../ds-comment-card';
+
+export interface DsCommentBubbleProps {
+	ref?: Ref<HTMLDivElement>;
+	comment?: CommentData;
+	currentUser?: CommentAuthor;
+	actionRequired?: boolean;
+	onActionRequiredChange?: (checked: boolean) => void;
+	value?: string;
+	onValueChange?: (value: string) => void;
+	onSend?: (content: string, actionRequired: boolean) => void;
+	onClose?: () => void;
+	onResolve?: () => void;
+	onToggleActionRequired?: () => void;
+	onForward?: () => void;
+	onMarkUnread?: () => void;
+	onCopyLink?: () => void;
+	onDelete?: () => void;
+	onEditMessage?: (messageId: string, newContent: string) => void;
+	onDeleteMessage?: (messageId: string) => void;
+	onMessageMarkUnread?: (messageId: string) => void;
+	onMessageResolved?: (messageId: string) => void;
+	referenceTag?: ReactNode;
+	className?: string;
+	style?: CSSProperties;
+}

package/src/components/ds-comment-bubble/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useClickOutside } from './use-click-outside';
+export { useAutoResize } from './use-auto-resize';
+export { useScrollOverflow } from './use-scroll-overflow';

package/src/components/ds-comment-bubble/hooks/use-auto-resize.ts

@@ -0,0 +1,17 @@
+import { useLayoutEffect, type RefObject } from 'react';
+
+export const useAutoResize = (
+	ref: RefObject<HTMLTextAreaElement | null>,
+	value: string,
+	maxHeight: number = 480,
+): void => {
+	useLayoutEffect(() => {
+		const textarea = ref.current;
+		if (!textarea) {
+			return;
+		}
+
+		textarea.style.height = 'auto';
+		textarea.style.height = `${String(Math.min(textarea.scrollHeight, maxHeight))}px`;
+	}, [ref, value, maxHeight]);
+};

package/src/components/ds-comment-bubble/hooks/use-click-outside.ts

@@ -0,0 +1,22 @@
+import { useEffect, type RefObject } from 'react';
+
+export const useClickOutside = (
+	ref: RefObject<HTMLElement | null>,
+	onClickOutside: (() => void) | undefined,
+	enabled: boolean = true,
+): void => {
+	useEffect(() => {
+		if (!enabled || !onClickOutside) {
+			return;
+		}
+
+		const handleClickOutside = (event: MouseEvent) => {
+			if (ref.current && !ref.current.contains(event.target as Node)) {
+				onClickOutside();
+			}
+		};
+
+		document.addEventListener('mousedown', handleClickOutside);
+		return () => document.removeEventListener('mousedown', handleClickOutside);
+	}, [ref, onClickOutside, enabled]);
+};

package/src/components/ds-comment-bubble/hooks/use-scroll-overflow.ts

@@ -0,0 +1,27 @@
+import { useState, useLayoutEffect, type RefObject } from 'react';
+
+export const useScrollOverflow = (ref: RefObject<HTMLElement | null>, dependency: number): boolean => {
+	const [hasOverflow, setHasOverflow] = useState(false);
+
+	useLayoutEffect(() => {
+		const container = ref.current;
+		if (!container) {
+			return;
+		}
+
+		const checkOverflow = () => {
+			const isOverflowing = container.scrollHeight > container.clientHeight;
+			const isScrolled = container.scrollTop > 0;
+			setHasOverflow(isOverflowing && isScrolled);
+		};
+
+		checkOverflow();
+		container.addEventListener('scroll', checkOverflow, { passive: true });
+
+		return () => {
+			container.removeEventListener('scroll', checkOverflow);
+		};
+	}, [ref, dependency]);
+
+	return hasOverflow;
+};

package/src/components/ds-comment-bubble/index.ts

@@ -0,0 +1,6 @@
+export { DsCommentBubble } from './ds-comment-bubble';
+export * from './ds-comment-bubble.types';
+export { DsCommentThread } from './components/ds-comment-thread';
+export * from './components/ds-comment-thread/ds-comment-thread.types';
+export { DsThreadItem } from './components/ds-thread-item';
+export * from './components/ds-thread-item/ds-thread-item.types';

package/src/components/ds-comment-card/ds-comment-card.module.scss

@@ -0,0 +1,162 @@
+@import '../../styles/mixin';
+
+$side-color-width: 4px;
+$border-width: 1px;
+$line-clamp-count: 3;
+$transition-duration: 0.2s;
+
+.card {
+	display: flex;
+	width: 100%;
+	border: $border-width solid var(--color-border);
+	border-radius: var(--spacing-3xs);
+	background: var(--color-background);
+	overflow: hidden;
+	cursor: pointer;
+	text-align: left;
+	flex-shrink: 0;
+	transition:
+		border-color $transition-duration ease,
+		box-shadow $transition-duration ease;
+
+	&:hover {
+		background: var(--color-background-action-hover-weak);
+		border-color: var(--color-border);
+		box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+
+		.actions {
+			opacity: 1;
+			visibility: visible;
+		}
+	}
+
+	@include disabled-overlay;
+}
+
+.sideColor {
+	width: $side-color-width;
+	flex-shrink: 0;
+	background: var(--color-background-info-strong);
+
+	&.actionRequired {
+		background: var(--color-background-warning-strong);
+	}
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-width: 0;
+}
+
+.header {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-3xs);
+	padding: var(--spacing-xs) var(--spacing-standard);
+	padding-bottom: var(--spacing-3xs);
+}
+
+.headerTop {
+	display: flex;
+	align-items: flex-start;
+	gap: var(--spacing-3xs);
+}
+
+.headerLeft {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	gap: var(--spacing-sm);
+	min-width: 0;
+}
+
+.commentInfo {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-xs);
+}
+
+.commentId {
+	font-size: var(--font-size-sm);
+	line-height: var(--line-height-sm);
+	color: var(--color-font-secondary);
+}
+
+.authorInfo {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-xs);
+	font-size: var(--font-size-sm);
+	line-height: var(--line-height-sm);
+}
+
+.authorName {
+	color: var(--color-font-main);
+}
+
+.timestamp {
+	color: var(--color-font-secondary);
+}
+
+.actions {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3xs);
+	opacity: 0;
+	visibility: hidden;
+	transition:
+		opacity $transition-duration ease,
+		visibility $transition-duration ease;
+
+	button {
+		background: transparent !important;
+
+		> * {
+			background: transparent !important;
+		}
+
+		&:hover {
+			background: var(--color-background-action-hover-weak) !important;
+			background-color: var(--color-background-action-hover-weak) !important;
+
+			> * {
+				background: var(--color-background-action-hover-weak) !important;
+				background-color: var(--color-background-action-hover-weak) !important;
+			}
+		}
+	}
+}
+
+.body {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-3xs);
+	padding: var(--spacing-xs) var(--spacing-standard);
+}
+
+.message {
+	font-size: var(--font-size-xs);
+	line-height: var(--line-height-xs);
+	color: var(--color-font-main);
+	word-wrap: break-word;
+
+	&.truncated {
+		display: -webkit-box;
+		-webkit-line-clamp: $line-clamp-count;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+
+.replyCount {
+	font-size: var(--font-size-xs);
+	line-height: var(--line-height-xs);
+	color: var(--color-font-secondary);
+}
+
+.dropdownContent {
+	z-index: 1300 !important;
+}

package/src/components/ds-comment-card/ds-comment-card.tsx

@@ -0,0 +1,171 @@
+import classNames from 'classnames';
+import styles from './ds-comment-card.module.scss';
+import type { DsCommentCardProps } from './ds-comment-card.types';
+import { DsAvatarGroup } from '../ds-avatar-group';
+import { DsButton } from '../ds-button';
+import { DsIcon } from '../ds-icon';
+import { DsTag } from '../ds-tag';
+import { DsDropdownMenu } from '../ds-dropdown-menu';
+import { formatRelativeTime } from '../../utils/format-relative-time';
+
+export const DsCommentCard = ({
+	ref,
+	comment,
+	disabled = false,
+	overflow = 'hidden',
+	onClick,
+	onResolve,
+	onToggleActionRequired,
+	onForward,
+	onMarkUnread,
+	onCopyLink,
+	onDelete,
+	formatTimestamp = formatRelativeTime,
+	className,
+	style,
+}: DsCommentCardProps) => {
+	const { numericId, author, createdAt, messages, referenceTag, isActionRequired } = comment;
+
+	const initialMessage = messages.find((m) => m.isInitialMessage) || messages[0];
+	const replyCount = messages.length - 1;
+
+	const participants = Array.from(new Map(messages.map((m) => [m.author.id, m.author])).values());
+
+	const renderReferenceTag = () => {
+		if (!referenceTag) {
+			return null;
+		}
+
+		if (typeof referenceTag === 'string') {
+			return (
+				<DsTag
+					size="small"
+					label={referenceTag}
+					slots={{
+						icon: <DsIcon icon="sell" size="tiny" />,
+					}}
+				/>
+			);
+		}
+
+		return referenceTag;
+	};
+
+	const avatars = participants.map((p) => ({
+		name: p.name,
+		src: p.avatarSrc,
+	}));
+
+	const handleResolve = (e: React.MouseEvent) => {
+		e.stopPropagation();
+		onResolve?.();
+	};
+
+	const showMoreMenu = onToggleActionRequired || onForward || onMarkUnread || onCopyLink || onDelete;
+
+	return (
+		<button
+			ref={ref}
+			type="button"
+			className={classNames(styles.card, className)}
+			style={style}
+			onClick={onClick}
+			disabled={disabled}
+			data-disabled={disabled ? '' : undefined}
+			aria-label={`Comment #${String(numericId)} by ${author.name}${isActionRequired ? ', action required' : ''}`}
+		>
+			<div
+				className={classNames(styles.sideColor, {
+					[styles.actionRequired]: isActionRequired,
+				})}
+			/>
+
+			<div className={styles.content}>
+				<div className={styles.header}>
+					<div className={styles.headerTop}>
+						<div className={styles.headerLeft}>
+							<DsAvatarGroup avatars={avatars} size="sm" max={4} />
+
+							<div className={styles.commentInfo}>
+								<span className={styles.commentId}>#{numericId}</span>
+								{renderReferenceTag()}
+							</div>
+
+							<div className={styles.authorInfo}>
+								<span className={styles.authorName}>{author.name}</span>
+								<span className={styles.timestamp}>{formatTimestamp(createdAt)}</span>
+							</div>
+						</div>
+
+						<div className={styles.actions}>
+							{showMoreMenu && (
+								<DsDropdownMenu.Root>
+									<DsDropdownMenu.Trigger asChild>
+										<DsButton design="v1.2" buttonType="tertiary" size="small" aria-label="More actions">
+											<DsIcon icon="more_vert" size="tiny" />
+										</DsButton>
+									</DsDropdownMenu.Trigger>
+									<DsDropdownMenu.Content className={styles.dropdownContent}>
+										{onToggleActionRequired && (
+											<DsDropdownMenu.Item value="toggle-action" onClick={() => onToggleActionRequired()}>
+												{isActionRequired ? 'Remove action requirement' : 'Require action'}
+											</DsDropdownMenu.Item>
+										)}
+										{onForward && (
+											<DsDropdownMenu.Item value="forward" onClick={() => onForward()}>
+												Forward
+											</DsDropdownMenu.Item>
+										)}
+										{onMarkUnread && (
+											<DsDropdownMenu.Item value="mark-unread" onClick={() => onMarkUnread()}>
+												Mark as &apos;Unread&apos;
+											</DsDropdownMenu.Item>
+										)}
+										{onCopyLink && (
+											<DsDropdownMenu.Item value="copy-link" onClick={() => onCopyLink()}>
+												Copy link
+											</DsDropdownMenu.Item>
+										)}
+										{onDelete && (
+											<DsDropdownMenu.Item value="delete" onClick={() => onDelete()}>
+												Delete
+											</DsDropdownMenu.Item>
+										)}
+									</DsDropdownMenu.Content>
+								</DsDropdownMenu.Root>
+							)}
+
+							{onResolve && (
+								<DsButton
+									design="v1.2"
+									buttonType="tertiary"
+									size="small"
+									onClick={handleResolve}
+									aria-label="Resolve comment"
+								>
+									<DsIcon icon="check_circle" size="tiny" />
+								</DsButton>
+							)}
+						</div>
+					</div>
+				</div>
+
+				<div className={styles.body}>
+					<p
+						className={classNames(styles.message, {
+							[styles.truncated]: overflow === 'hidden',
+						})}
+					>
+						{initialMessage?.content}
+					</p>
+
+					{replyCount > 0 && (
+						<span className={styles.replyCount}>
+							{replyCount} {replyCount === 1 ? 'reply' : 'replies'}
+						</span>
+					)}
+				</div>
+			</div>
+		</button>
+	);
+};

package/src/components/ds-comment-card/ds-comment-card.types.ts

@@ -0,0 +1,45 @@
+import type { CSSProperties, ReactNode, Ref } from 'react';
+
+export interface CommentAuthor {
+	id: string;
+	name: string;
+	avatarSrc?: string;
+}
+
+export interface CommentMessage {
+	id: string;
+	author: CommentAuthor;
+	content: string;
+	createdAt: Date;
+	isInitialMessage?: boolean;
+	isResolved?: boolean;
+}
+
+export interface CommentData {
+	id: string;
+	numericId: number;
+	author: CommentAuthor;
+	createdAt: Date;
+	isResolved: boolean;
+	messages: CommentMessage[];
+	labels?: string[];
+	referenceTag?: ReactNode;
+	isActionRequired?: boolean;
+}
+
+export interface DsCommentCardProps {
+	ref?: Ref<HTMLButtonElement>;
+	comment: CommentData;
+	disabled?: boolean;
+	overflow?: 'hidden' | 'displayed';
+	onClick?: () => void;
+	onResolve?: () => void;
+	onToggleActionRequired?: () => void;
+	onForward?: () => void;
+	onMarkUnread?: () => void;
+	onCopyLink?: () => void;
+	onDelete?: () => void;
+	formatTimestamp?: (date: Date) => string;
+	className?: string;
+	style?: CSSProperties;
+}

package/src/components/ds-comment-card/index.ts

@@ -0,0 +1,2 @@
+export { DsCommentCard } from './ds-comment-card';
+export * from './ds-comment-card.types';

package/src/components/ds-comment-indicator/ds-comment-indicator.module.scss

@@ -0,0 +1,65 @@
+$indicator-size: 32px;
+$avatar-size: 20px;
+$plus-icon-font-size: 20px;
+$border-width: 1px;
+$border-radius-circle: 50%;
+$outline-width: 2px;
+$outline-offset: 2px;
+$transition-duration: 0.2s;
+
+.indicator {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: $indicator-size;
+	height: $indicator-size;
+	padding: 0;
+	border: $border-width solid var(--color-border);
+	border-radius: var(--spacing-standard) var(--spacing-standard) var(--spacing-standard) 0;
+	background: var(--color-background);
+	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
+	cursor: pointer;
+	transition:
+		background-color $transition-duration ease,
+		border-color $transition-duration ease;
+
+	&:focus-visible {
+		outline: $outline-width solid var(--color-focus);
+		outline-offset: $outline-offset;
+	}
+
+	&:not(.actionRequired):hover {
+		background: var(--color-background-secondary);
+		border-color: var(--color-border-action-secondary-hover);
+	}
+}
+
+.placeholder {
+	.plusIcon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: $avatar-size;
+		height: $avatar-size;
+		font-size: $plus-icon-font-size;
+		font-weight: var(--font-weight-semi-bold);
+		line-height: 0;
+		color: var(--color-font-main);
+	}
+}
+
+.actionRequired {
+	background: var(--color-background-warning-strong);
+
+	&:hover {
+		background: var(--color-background-danger-strong-hover);
+		border-color: var(--color-border-action-secondary-hover);
+	}
+}
+
+.avatar {
+	width: $avatar-size;
+	height: $avatar-size;
+	border-radius: $border-radius-circle;
+	object-fit: cover;
+}

package/src/components/ds-comment-indicator/ds-comment-indicator.tsx

@@ -0,0 +1,48 @@
+import classNames from 'classnames';
+import styles from './ds-comment-indicator.module.scss';
+import type { DsCommentIndicatorProps } from './ds-comment-indicator.types';
+import { DsAvatar } from '../ds-avatar';
+
+export const DsCommentIndicator = ({
+	type = 'placeholder',
+	avatarSrc,
+	avatarName = '',
+	onClick,
+	ref,
+	className,
+	style,
+}: DsCommentIndicatorProps) => {
+	const isPlaceholder = type === 'placeholder';
+	const isActionRequired = type === 'action-required';
+
+	const getAriaLabel = () => {
+		if (isPlaceholder) {
+			return 'Add comment';
+		}
+		return 'View comment';
+	};
+
+	return (
+		<button
+			ref={ref}
+			type="button"
+			className={classNames(
+				styles.indicator,
+				{
+					[styles.placeholder]: isPlaceholder,
+					[styles.actionRequired]: isActionRequired,
+				},
+				className,
+			)}
+			style={style}
+			onClick={onClick}
+			aria-label={getAriaLabel()}
+		>
+			{isPlaceholder ? (
+				<span className={styles.plusIcon}>+</span>
+			) : (
+				<DsAvatar src={avatarSrc} name={avatarName} size="sm" className={styles.avatar} />
+			)}
+		</button>
+	);
+};

package/src/components/ds-comment-indicator/ds-comment-indicator.types.ts

@@ -0,0 +1,13 @@
+import type { CSSProperties, Ref } from 'react';
+
+export type CommentIndicatorType = 'placeholder' | 'default' | 'action-required';
+
+export interface DsCommentIndicatorProps {
+	type?: CommentIndicatorType;
+	avatarSrc?: string;
+	avatarName?: string;
+	onClick?: () => void;
+	ref?: Ref<HTMLButtonElement>;
+	className?: string;
+	style?: CSSProperties;
+}

package/src/components/ds-comment-indicator/index.ts

@@ -0,0 +1,2 @@
+export { DsCommentIndicator } from './ds-comment-indicator';
+export * from './ds-comment-indicator.types';