@drivenets/design-system 0.6.0 → 0.7.0

package/src/components/ds-comment-bubble/components/ds-thread-item/ds-thread-item.tsx

@@ -0,0 +1,147 @@
+import { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import styles from './ds-thread-item.module.scss';
+import { DsAvatar } from '../../../ds-avatar';
+import { DsButton } from '../../../ds-button';
+import { DsIcon } from '../../../ds-icon';
+import { DsDropdownMenu } from '../../../ds-dropdown-menu';
+import { DsTextarea } from '../../../ds-textarea';
+import { formatRelativeTime } from '../../../../utils/format-relative-time';
+import type { DsThreadItemProps } from './ds-thread-item.types';
+
+export const DsThreadItem = ({
+	id,
+	author,
+	content,
+	createdAt,
+	isCommentAuthorMessage = false,
+	canModify = false,
+	onEdit,
+	onDelete,
+	onMarkUnread,
+	onResolved,
+	className,
+}: DsThreadItemProps) => {
+	const [isEditing, setIsEditing] = useState(false);
+	const [editContent, setEditContent] = useState(content);
+
+	useEffect(() => {
+		if (!isEditing) {
+			setEditContent(content);
+		}
+	}, [content, isEditing]);
+
+	const isSaveDisabled = !editContent.trim() || editContent === content;
+
+	const handleSaveEdit = () => {
+		if (isSaveDisabled) {
+			return;
+		}
+
+		onEdit?.(id, editContent);
+		setIsEditing(false);
+	};
+
+	const handleCancelEdit = () => {
+		setEditContent(content);
+		setIsEditing(false);
+	};
+
+	const hasEditActions = canModify && (onEdit || onDelete);
+	const showActions = !isEditing && (hasEditActions || onMarkUnread || onResolved);
+
+	return (
+		<div
+			className={classNames(
+				styles.threadItem,
+				{
+					[styles.alignRight]: !isCommentAuthorMessage,
+				},
+				className,
+			)}
+		>
+			<div className={styles.avatarWrapper}>
+				<DsAvatar name={author.name} src={author.avatarSrc} size="sm" />
+			</div>
+
+			<div className={styles.content}>
+				<div className={styles.header}>
+					<span className={styles.authorName}>{author.name}</span>
+					<span className={styles.timestamp}>{formatRelativeTime(createdAt)}</span>
+				</div>
+
+				{isEditing ? (
+					<div className={styles.editContainer}>
+						<DsTextarea
+							className={styles.editTextarea}
+							value={editContent}
+							onValueChange={setEditContent}
+							rows={3}
+						/>
+						<div className={styles.editActions}>
+							<DsButton design="v1.2" buttonType="tertiary" size="small" onClick={handleCancelEdit}>
+								Cancel
+							</DsButton>
+							<DsButton design="v1.2" size="small" onClick={handleSaveEdit} disabled={isSaveDisabled}>
+								Save
+							</DsButton>
+						</div>
+					</div>
+				) : (
+					<p className={styles.message}>{content}</p>
+				)}
+			</div>
+
+			{showActions && (
+				<div className={styles.actions}>
+					{hasEditActions && (
+						<DsDropdownMenu.Root>
+							<DsDropdownMenu.Trigger asChild>
+								<DsButton
+									design="v1.2"
+									buttonType="tertiary"
+									size="small"
+									aria-label="More actions"
+									className={styles.actionButton}
+									contentClassName={styles.iconButtonContent}
+								>
+									<DsIcon icon="more_vert" size="tiny" />
+								</DsButton>
+							</DsDropdownMenu.Trigger>
+							<DsDropdownMenu.Content className={styles.dropdownContent}>
+								{onEdit && (
+									<DsDropdownMenu.Item value="edit" onClick={() => setIsEditing(true)}>
+										Edit
+									</DsDropdownMenu.Item>
+								)}
+								{onMarkUnread && (
+									<DsDropdownMenu.Item value="mark-unread" onClick={() => onMarkUnread(id)}>
+										Mark as &apos;Unread&apos;
+									</DsDropdownMenu.Item>
+								)}
+								{onDelete && (
+									<DsDropdownMenu.Item value="delete" onClick={() => onDelete(id)}>
+										Delete
+									</DsDropdownMenu.Item>
+								)}
+							</DsDropdownMenu.Content>
+						</DsDropdownMenu.Root>
+					)}
+					{onResolved && (
+						<DsButton
+							design="v1.2"
+							buttonType="tertiary"
+							size="small"
+							onClick={() => onResolved(id)}
+							aria-label="Mark message as resolved"
+							className={styles.actionButton}
+							contentClassName={styles.iconButtonContent}
+						>
+							<DsIcon icon="check_circle" size="tiny" />
+						</DsButton>
+					)}
+				</div>
+			)}
+		</div>
+	);
+};

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

@@ -0,0 +1,15 @@
+import type { CommentAuthor } from '../../../ds-comment-card';
+
+export interface DsThreadItemProps {
+	id: string;
+	author: CommentAuthor;
+	content: string;
+	createdAt: Date;
+	isCommentAuthorMessage?: boolean;
+	canModify?: boolean;
+	onEdit?: (messageId: string, newContent: string) => void;
+	onDelete?: (messageId: string) => void;
+	onMarkUnread?: (messageId: string) => void;
+	onResolved?: (messageId: string) => void;
+	className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { DsThreadItem } from './ds-thread-item';
+export * from './ds-thread-item.types';

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

@@ -0,0 +1,298 @@
+$bubble-width-initial: 240px;
+$bubble-width-typing: 320px;
+$bubble-width-thread: 420px;
+$bubble-height-thread: 644px;
+$bubble-border-radius-pill: 16px;
+$bubble-border-radius-standard: 4px;
+$input-min-height-initial: 20px;
+$input-min-height-typing: 40px;
+$input-min-height-thread: 28px;
+$input-max-height: 480px;
+$icon-button-size: 16px;
+$scrollbar-width-textarea: 4px;
+$scrollbar-border-radius-pill: 100px;
+$dropdown-min-width: 160px;
+$border-width: 1px;
+$checkbox-border-radius: 2px;
+
+$transition-duration: 0.2s;
+
+@mixin icon-button-size {
+	&#{&} {
+		width: $icon-button-size;
+		height: $icon-button-size;
+		min-width: $icon-button-size;
+		min-height: $icon-button-size;
+		padding: 0;
+		border: none;
+	}
+}
+
+.iconButtonContent {
+	height: $icon-button-size !important;
+	min-height: $icon-button-size !important;
+	padding: 0 !important;
+	border: none !important;
+}
+
+.bubble {
+	display: flex;
+	flex-direction: column;
+	width: $bubble-width-thread;
+	background: var(--color-background);
+	border: $border-width solid var(--color-primary-700-default);
+	border-radius: $bubble-border-radius-pill;
+	box-shadow: 0 6px 13px 0 rgba(4, 69, 204, 0.2);
+	overflow: hidden;
+	transition:
+		width $transition-duration ease,
+		border-radius $transition-duration ease,
+		border-color $transition-duration ease,
+		padding $transition-duration ease;
+
+	&.actionRequired {
+		border-color: var(--color-background-warning-strong);
+	}
+}
+
+.initial {
+	width: $bubble-width-initial;
+	border-width: $border-width;
+	padding: var(--spacing-sm) var(--spacing-standard);
+	border-radius: $bubble-border-radius-pill;
+
+	.inputArea {
+		padding: 0;
+		gap: var(--spacing-xs);
+		align-items: center;
+	}
+
+	.inputWrapper {
+		background: transparent;
+		padding: 0;
+		min-height: auto;
+		flex: 1;
+	}
+
+	.textarea {
+		padding: 0;
+		min-height: $input-min-height-initial;
+		line-height: var(--line-height-sm);
+		overflow: hidden;
+		resize: none;
+
+		&::placeholder {
+			color: var(--color-font-placeholder);
+		}
+	}
+}
+
+.typing {
+	width: $bubble-width-typing;
+	border-width: $border-width;
+	padding: var(--spacing-sm) var(--spacing-standard) 0;
+	border-radius: $bubble-border-radius-pill;
+
+	.inputArea {
+		padding: 0 0 var(--spacing-sm);
+		border-bottom: $border-width solid var(--color-border-secondary);
+	}
+
+	.inputWrapper {
+		min-height: $input-min-height-typing;
+		padding: 0;
+		background: transparent;
+	}
+}
+
+.thread {
+	height: $bubble-height-thread;
+	padding: 0;
+	border-radius: $bubble-border-radius-standard;
+	display: flex;
+	flex-direction: column;
+
+	.inputArea {
+		border-top: $border-width solid var(--color-border-secondary);
+		padding: var(--spacing-xs) var(--spacing-standard);
+		flex-shrink: 0;
+	}
+
+	.inputWrapper {
+		background: var(--color-background);
+		padding: var(--spacing-xs) var(--spacing-sm);
+		border-radius: $bubble-border-radius-standard;
+		min-height: $input-min-height-thread;
+	}
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing-xs);
+	padding: var(--spacing-xs) var(--spacing-standard) var(--spacing-xs);
+	border-bottom: $border-width solid var(--color-border);
+	flex-shrink: 0;
+}
+
+.headerLeft {
+	display: flex;
+	align-items: center;
+	flex: 1;
+	min-width: 0;
+}
+
+.headerInfo {
+	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);
+}
+
+.actionRequiredBadge {
+	font-size: var(--font-size-sm);
+	line-height: var(--line-height-sm);
+	color: var(--color-font-warning);
+	font-weight: var(--font-weight-regular);
+}
+
+.headerRight {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-xs);
+}
+
+.headerActions {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-xs);
+	opacity: 0;
+	transition: opacity $transition-duration ease;
+
+	.bubble:hover & {
+		opacity: 1;
+	}
+}
+
+.headerActionButton {
+	@include icon-button-size;
+	opacity: 1;
+}
+
+.inputArea {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-xs);
+}
+
+.inputWrapper {
+	display: flex;
+	align-items: center;
+	flex: 1;
+	gap: var(--spacing-xs);
+	min-height: $input-min-height-thread;
+}
+
+.searchIcon {
+	color: var(--color-font-main);
+	flex-shrink: 0;
+}
+
+.infoIcon {
+	color: var(--color-font-main);
+	flex-shrink: 0;
+}
+
+.textarea {
+	flex: 1;
+	min-height: $input-min-height-initial;
+	max-height: $input-max-height;
+	padding: 0;
+	border: none;
+	background: transparent;
+	font-size: var(--font-size-sm);
+	line-height: var(--line-height-sm);
+	font-family: inherit;
+	color: var(--color-font-main);
+	resize: none;
+	overflow-y: auto;
+
+	&::placeholder {
+		color: var(--color-font-placeholder);
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&::-webkit-scrollbar {
+		width: $scrollbar-width-textarea;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--color-background-tertiary);
+		border-radius: $scrollbar-border-radius-pill;
+	}
+}
+
+.footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: var(--spacing-xs) 0;
+}
+
+.actionRequiredCheckbox {
+	&.checked {
+		[data-state='checked'] {
+			background: var(--color-background-warning-strong);
+			border-color: var(--color-border-warning);
+			border-radius: $checkbox-border-radius;
+		}
+
+		label {
+			color: var(--color-font-warning);
+		}
+	}
+}
+
+.sendButton {
+	flex-shrink: 0;
+}
+
+.dropdownContent {
+	min-width: $dropdown-min-width;
+
+	&#{&} {
+		z-index: 1300;
+	}
+}
+
+.dropdownItem {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-xs);
+	padding: var(--spacing-xs) var(--spacing-sm);
+	font-size: var(--font-size-sm);
+	line-height: var(--line-height-sm);
+	color: var(--color-font-main);
+	cursor: pointer;
+
+	&:hover {
+		background: var(--color-background-secondary);
+	}
+
+	&.danger {
+		color: var(--color-font-danger);
+	}
+}

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

@@ -0,0 +1,241 @@
+import { useRef, useCallback } from 'react';
+import classNames from 'classnames';
+import styles from './ds-comment-bubble.module.scss';
+import type { DsCommentBubbleProps } from './ds-comment-bubble.types';
+import { DsCommentThread } from './components/ds-comment-thread';
+import { DsButton } from '../ds-button';
+import { DsCheckbox } from '../ds-checkbox';
+import { DsIcon } from '../ds-icon';
+import { DsTag } from '../ds-tag';
+import { DsDropdownMenu } from '../ds-dropdown-menu';
+import { useClickOutside, useAutoResize } from './hooks';
+import { mergeRefs } from '../ds-table/utils/merge-refs';
+
+export const DsCommentBubble = ({
+	ref,
+	comment,
+	currentUser,
+	actionRequired = false,
+	onActionRequiredChange,
+	value = '',
+	onValueChange,
+	onSend,
+	onClose,
+	onResolve,
+	onToggleActionRequired,
+	onForward,
+	onMarkUnread,
+	onCopyLink,
+	onDelete,
+	onEditMessage,
+	onDeleteMessage,
+	onMessageMarkUnread,
+	onMessageResolved,
+	referenceTag,
+	className,
+	style,
+}: DsCommentBubbleProps) => {
+	const hasThread = Boolean(comment?.messages.length);
+	const hasContent = value.trim().length > 0;
+	const isTypingMode = !hasThread && hasContent;
+	const isInitialMode = !hasThread && !hasContent;
+	const placeholder = hasThread ? 'Reply' : 'Add a comment';
+	const showFooter = isTypingMode;
+	const showHeader = hasThread && Boolean(comment);
+	const maxTextareaHeight = 480;
+
+	const bubbleRef = useRef<HTMLDivElement>(null);
+	const mergedRef = mergeRefs(ref, bubbleRef);
+	const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+	const handleClickOutside = useCallback(() => {
+		if (isInitialMode) {
+			onClose?.();
+		}
+	}, [isInitialMode, onClose]);
+
+	useClickOutside(bubbleRef, handleClickOutside, isInitialMode);
+	useAutoResize(textareaRef, value, maxTextareaHeight);
+
+	const handleSend = () => {
+		if (hasContent && onSend) {
+			onSend(value, actionRequired);
+		}
+	};
+
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+		if (e.key === 'Enter' && !e.shiftKey) {
+			e.preventDefault();
+			handleSend();
+		}
+	};
+
+	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;
+	};
+
+	return (
+		<div
+			ref={mergedRef}
+			className={classNames(
+				styles.bubble,
+				{
+					[styles.actionRequired]: actionRequired,
+					[styles.initial]: isInitialMode,
+					[styles.typing]: isTypingMode,
+					[styles.thread]: hasThread,
+				},
+				className,
+			)}
+			style={style}
+			role="dialog"
+			aria-label={
+				isInitialMode
+					? 'Add new comment'
+					: `Comment thread${comment?.numericId ? ` #${String(comment.numericId)}` : ''}`
+			}
+		>
+			{showHeader && comment && (
+				<div className={styles.header}>
+					<div className={styles.headerLeft}>
+						<div className={styles.headerInfo}>
+							<span className={styles.commentId}>#{comment.numericId}</span>
+							{renderReferenceTag()}
+							{actionRequired && <span className={styles.actionRequiredBadge}>Action required</span>}
+						</div>
+					</div>
+
+					<div className={styles.headerRight}>
+						<div className={styles.headerActions}>
+							<DsDropdownMenu.Root>
+								<DsDropdownMenu.Trigger asChild>
+									<DsButton
+										design="v1.2"
+										buttonType="tertiary"
+										size="small"
+										aria-label="More actions"
+										className={styles.headerActionButton}
+										contentClassName={styles.iconButtonContent}
+									>
+										<DsIcon icon="more_vert" size="tiny" />
+									</DsButton>
+								</DsDropdownMenu.Trigger>
+								<DsDropdownMenu.Content className={styles.dropdownContent}>
+									<DsDropdownMenu.Item value="toggle-action" onClick={onToggleActionRequired}>
+										{actionRequired ? 'Remove action requirement' : 'Require action'}
+									</DsDropdownMenu.Item>
+									<DsDropdownMenu.Item value="forward" onClick={onForward}>
+										Forward
+									</DsDropdownMenu.Item>
+									<DsDropdownMenu.Item value="mark-unread" onClick={onMarkUnread}>
+										Mark as &apos;Unread&apos;
+									</DsDropdownMenu.Item>
+									<DsDropdownMenu.Item value="copy-link" onClick={onCopyLink}>
+										Copy link
+									</DsDropdownMenu.Item>
+									<DsDropdownMenu.Item value="delete" onClick={onDelete} className={styles.danger}>
+										Delete
+									</DsDropdownMenu.Item>
+								</DsDropdownMenu.Content>
+							</DsDropdownMenu.Root>
+
+							{onResolve && (
+								<DsButton
+									design="v1.2"
+									buttonType="tertiary"
+									size="small"
+									onClick={() => onResolve()}
+									aria-label="Resolve"
+									className={styles.headerActionButton}
+									contentClassName={styles.iconButtonContent}
+								>
+									<DsIcon icon="check_circle" size="tiny" />
+								</DsButton>
+							)}
+						</div>
+
+						{onClose && (
+							<DsButton
+								design="v1.2"
+								buttonType="tertiary"
+								size="small"
+								onClick={() => onClose()}
+								className={styles.headerActionButton}
+								contentClassName={styles.iconButtonContent}
+								aria-label="Close"
+							>
+								<DsIcon icon="close" size="tiny" />
+							</DsButton>
+						)}
+					</div>
+				</div>
+			)}
+
+			{hasThread && comment && (
+				<DsCommentThread
+					messages={comment.messages}
+					commentAuthor={comment.author}
+					currentUser={currentUser}
+					onEditMessage={onEditMessage}
+					onDeleteMessage={onDeleteMessage}
+					onMarkUnread={onMessageMarkUnread}
+					onResolved={onMessageResolved}
+				/>
+			)}
+
+			<div className={styles.inputArea}>
+				<div className={styles.inputWrapper}>
+					<textarea
+						ref={textareaRef}
+						className={styles.textarea}
+						placeholder={placeholder}
+						value={value}
+						onChange={(e) => onValueChange?.(e.target.value)}
+						onKeyDown={handleKeyDown}
+						rows={1}
+						aria-label={placeholder}
+					/>
+				</div>
+
+				{(isInitialMode || hasThread) && (
+					<DsButton design="v1.2" size="small" disabled={!hasContent} onClick={handleSend} aria-label="Send">
+						<DsIcon icon="send" size="tiny" />
+					</DsButton>
+				)}
+			</div>
+
+			{showFooter && (
+				<div className={styles.footer}>
+					<DsCheckbox
+						label="Action required"
+						checked={actionRequired}
+						onCheckedChange={(checked) => onActionRequiredChange?.(checked === true)}
+						className={classNames(styles.actionRequiredCheckbox, {
+							[styles.checked]: actionRequired,
+						})}
+					/>
+
+					<DsButton design="v1.2" size="small" disabled={!hasContent} onClick={handleSend} aria-label="Send">
+						<DsIcon icon="send" size="tiny" />
+					</DsButton>
+				</div>
+			)}
+		</div>
+	);
+};