@drivenets/design-system 0.6.0 → 0.7.0

package/src/components/ds-comments-drawer/components/comments-filter-modal/comments-filter-modal.module.scss

@@ -0,0 +1,92 @@
+.modal {
+	height: 600px;
+}
+
+.header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: var(--spacing-sm);
+}
+
+.headerLeft {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-sm);
+}
+
+.body {
+	display: flex;
+	padding: 0;
+	overflow: hidden;
+}
+
+.tabs {
+	display: flex;
+	width: 100%;
+	height: 100%;
+}
+
+.tabList {
+	flex-shrink: 0;
+	width: 200px;
+	border-right: 1px solid var(--color-border-secondary);
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-3xs);
+	padding: var(--spacing-sm);
+}
+
+.tabContent {
+	flex: 1;
+	overflow-y: auto;
+	padding: var(--spacing-standard);
+
+	&[hidden] {
+		display: none;
+	}
+
+	&[data-state='closed'] {
+		display: none;
+	}
+}
+
+.badge {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3xs);
+	margin-left: auto;
+}
+
+.dot {
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background: var(--color-primary-500-default);
+}
+
+.filterSection {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-sm);
+}
+
+.dateField {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-xs);
+}
+
+.dateLabel {
+	display: block;
+}
+
+.emptyMessage {
+	color: var(--color-font-secondary);
+}
+
+.footer {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}

package/src/components/ds-comments-drawer/components/comments-filter-modal/comments-filter-modal.tsx

@@ -0,0 +1,219 @@
+import { useState } from 'react';
+import styles from './comments-filter-modal.module.scss';
+import type { CommentsFilterModalProps } from './comments-filter-modal.types';
+import { DsModal } from '../../../ds-modal';
+import { DsTabs } from '../../../ds-tabs';
+import { DsTypography } from '../../../ds-typography';
+import { DsCheckbox } from '../../../ds-checkbox';
+import { DsButton } from '../../../ds-button';
+import { DsIcon } from '../../../ds-icon';
+import { DsDateInput } from '../../../ds-date-input';
+
+export const CommentsFilterModal = ({
+	open,
+	onOpenChange,
+	filters,
+	onFiltersChange,
+	onApply,
+	onClearAll,
+	availableAuthors,
+	availableLabels,
+}: CommentsFilterModalProps) => {
+	const [selectedTab, setSelectedTab] = useState<string>('statuses');
+
+	const handleStatusToggle = (status: 'unresolved' | 'resolved' | 'action-required', checked: boolean) => {
+		onFiltersChange({
+			...filters,
+			statuses: checked ? [...filters.statuses, status] : filters.statuses.filter((s) => s !== status),
+		});
+	};
+
+	const handleAuthorToggle = (authorId: string, checked: boolean) => {
+		onFiltersChange({
+			...filters,
+			authors: checked ? [...filters.authors, authorId] : filters.authors.filter((a) => a !== authorId),
+		});
+	};
+
+	const handleLabelToggle = (label: string, checked: boolean) => {
+		onFiltersChange({
+			...filters,
+			labels: checked ? [...filters.labels, label] : filters.labels.filter((l) => l !== label),
+		});
+	};
+
+	const handleDateFromChange = (value: string | undefined) => {
+		onFiltersChange({ ...filters, dateFrom: value });
+	};
+
+	const handleDateToChange = (value: string | undefined) => {
+		onFiltersChange({ ...filters, dateTo: value });
+	};
+
+	const filterCounts = {
+		statuses: filters.statuses.length,
+		authors: filters.authors.length,
+		dateRange: (filters.dateFrom ? 1 : 0) + (filters.dateTo ? 1 : 0),
+		labels: filters.labels.length,
+	};
+
+	return (
+		<DsModal open={open} onOpenChange={onOpenChange} className={styles.modal}>
+			<DsModal.Header className={styles.header}>
+				<div className={styles.headerLeft}>
+					<DsIcon icon="filter_list" size="small" />
+					<DsModal.Title>Filters</DsModal.Title>
+				</div>
+				<DsModal.CloseTrigger />
+			</DsModal.Header>
+
+			<DsModal.Body className={styles.body}>
+				<DsTabs.Root
+					value={selectedTab}
+					onValueChange={(value) => {
+						if (value) {
+							setSelectedTab(value);
+						}
+					}}
+					orientation="vertical"
+					className={styles.tabs}
+				>
+					<DsTabs.List className={styles.tabList}>
+						<DsTabs.Tab value="statuses">
+							<DsTypography variant="body-sm-md">Status</DsTypography>
+							{filterCounts.statuses > 0 && (
+								<div className={styles.badge}>
+									<span className={styles.dot} />
+									<DsTypography variant="body-sm-reg">{filterCounts.statuses}</DsTypography>
+								</div>
+							)}
+						</DsTabs.Tab>
+						<DsTabs.Tab value="authors">
+							<DsTypography variant="body-sm-md">Author</DsTypography>
+							{filterCounts.authors > 0 && (
+								<div className={styles.badge}>
+									<span className={styles.dot} />
+									<DsTypography variant="body-sm-reg">{filterCounts.authors}</DsTypography>
+								</div>
+							)}
+						</DsTabs.Tab>
+						<DsTabs.Tab value="dateRange">
+							<DsTypography variant="body-sm-md">Date range</DsTypography>
+							{filterCounts.dateRange > 0 && (
+								<div className={styles.badge}>
+									<span className={styles.dot} />
+									<DsTypography variant="body-sm-reg">{filterCounts.dateRange}</DsTypography>
+								</div>
+							)}
+						</DsTabs.Tab>
+						<DsTabs.Tab value="labels">
+							<DsTypography variant="body-sm-md">Labels</DsTypography>
+							{filterCounts.labels > 0 && (
+								<div className={styles.badge}>
+									<span className={styles.dot} />
+									<DsTypography variant="body-sm-reg">{filterCounts.labels}</DsTypography>
+								</div>
+							)}
+						</DsTabs.Tab>
+					</DsTabs.List>
+
+					<DsTabs.Content value="statuses" className={styles.tabContent}>
+						<div className={styles.filterSection}>
+							<DsCheckbox
+								label="Unresolved"
+								checked={filters.statuses.includes('unresolved')}
+								onCheckedChange={(checked) => handleStatusToggle('unresolved', checked === true)}
+							/>
+							<DsCheckbox
+								label="Resolved"
+								checked={filters.statuses.includes('resolved')}
+								onCheckedChange={(checked) => handleStatusToggle('resolved', checked === true)}
+							/>
+							<DsCheckbox
+								label="Action required"
+								checked={filters.statuses.includes('action-required')}
+								onCheckedChange={(checked) => handleStatusToggle('action-required', checked === true)}
+							/>
+						</div>
+					</DsTabs.Content>
+					<DsTabs.Content value="authors" className={styles.tabContent}>
+						<div className={styles.filterSection}>
+							{availableAuthors.length === 0 ? (
+								<DsTypography variant="body-sm-reg" className={styles.emptyMessage}>
+									No authors available
+								</DsTypography>
+							) : (
+								availableAuthors.map((author) => (
+									<DsCheckbox
+										key={author.id}
+										label={author.name}
+										checked={filters.authors.includes(author.id)}
+										onCheckedChange={(checked) => handleAuthorToggle(author.id, checked === true)}
+									/>
+								))
+							)}
+						</div>
+					</DsTabs.Content>
+					<DsTabs.Content value="dateRange" className={styles.tabContent}>
+						<div className={styles.filterSection}>
+							<div className={styles.dateField}>
+								<DsTypography variant="body-sm-md" className={styles.dateLabel}>
+									From
+								</DsTypography>
+								<DsDateInput
+									value={filters.dateFrom}
+									onValueChange={handleDateFromChange}
+									max={filters.dateTo}
+									placeholder="Select start date"
+									disablePortal
+								/>
+							</div>
+							<div className={styles.dateField}>
+								<DsTypography variant="body-sm-md" className={styles.dateLabel}>
+									To
+								</DsTypography>
+								<DsDateInput
+									value={filters.dateTo}
+									onValueChange={handleDateToChange}
+									min={filters.dateFrom}
+									placeholder="Select end date"
+									disablePortal
+								/>
+							</div>
+						</div>
+					</DsTabs.Content>
+					<DsTabs.Content value="labels" className={styles.tabContent}>
+						<div className={styles.filterSection}>
+							{availableLabels.length === 0 ? (
+								<DsTypography variant="body-sm-reg" className={styles.emptyMessage}>
+									No labels available
+								</DsTypography>
+							) : (
+								availableLabels.map((label) => (
+									<DsCheckbox
+										key={label}
+										label={label}
+										checked={filters.labels.includes(label)}
+										onCheckedChange={(checked) => handleLabelToggle(label, checked === true)}
+									/>
+								))
+							)}
+						</div>
+					</DsTabs.Content>
+				</DsTabs.Root>
+			</DsModal.Body>
+
+			<DsModal.Footer className={styles.footer}>
+				<DsButton design="v1.2" variant="filled" buttonType="secondary" onClick={onClearAll}>
+					<DsIcon icon="close" size="tiny" />
+					Clear all
+				</DsButton>
+				<DsModal.Actions>
+					<DsButton design="v1.2" variant="filled" buttonType="primary" onClick={onApply}>
+						Apply
+					</DsButton>
+				</DsModal.Actions>
+			</DsModal.Footer>
+		</DsModal>
+	);
+};

package/src/components/ds-comments-drawer/components/comments-filter-modal/comments-filter-modal.types.ts

@@ -0,0 +1,12 @@
+import type { CommentsFilterState } from '../../comments-filters.types';
+
+export interface CommentsFilterModalProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	filters: CommentsFilterState;
+	onFiltersChange: (filters: CommentsFilterState) => void;
+	onApply: () => void;
+	onClearAll: () => void;
+	availableAuthors: Array<{ id: string; name: string }>;
+	availableLabels: string[];
+}

package/src/components/ds-comments-drawer/components/comments-filter-modal/index.ts

@@ -0,0 +1,2 @@
+export { CommentsFilterModal } from './comments-filter-modal';
+export type { CommentsFilterModalProps } from './comments-filter-modal.types';

package/src/components/ds-comments-drawer/ds-comments-drawer.module.scss

@@ -0,0 +1,67 @@
+$divider-width: 1px;
+$divider-height: 16px;
+$scrollbar-width: 8px;
+$scrollbar-border-radius-pill: 9999px;
+
+.headerActions {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-xs);
+}
+
+.divider {
+	width: $divider-width;
+	height: $divider-height;
+	background: var(--color-border-secondary);
+}
+
+.searchInput {
+	flex: 1;
+}
+
+.body {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-standard);
+	padding: var(--spacing-standard);
+	overflow-y: auto;
+
+	&::-webkit-scrollbar {
+		width: $scrollbar-width;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--color-background-tertiary);
+		border-radius: $scrollbar-border-radius-pill;
+	}
+}
+
+.emptyState {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: var(--spacing-xl);
+	text-align: center;
+	color: var(--color-font-secondary);
+	font-size: var(--font-size-sm);
+	line-height: var(--line-height-sm);
+	gap: var(--spacing-sm);
+}
+
+.emptyIcon {
+	color: var(--color-icon-secondary);
+}
+
+.filterTagsToolbar {
+	min-width: 0;
+	overflow: hidden;
+}
+
+.tagFilter {
+	min-width: 0;
+}

package/src/components/ds-comments-drawer/ds-comments-drawer.tsx

@@ -0,0 +1,215 @@
+import { useState } from 'react';
+import styles from './ds-comments-drawer.module.scss';
+import type { DsCommentsDrawerProps } from './ds-comments-drawer.types';
+import { DsDrawer } from '../ds-drawer';
+import { DsCommentCard } from '../ds-comment-card';
+import { DsButton } from '../ds-button';
+import { DsIcon } from '../ds-icon';
+import { DsTextInput } from '../ds-text-input';
+import { DsTagFilter, type TagFilterItem } from '../ds-tag-filter';
+import {
+	type CommentsFilterState,
+	initialFilterState,
+	applyFilters,
+	filtersToTags,
+	removeTag,
+} from './comments-filters';
+import { CommentsFilterModal } from './components/comments-filter-modal';
+
+export const DsCommentsDrawer = ({
+	open,
+	onOpenChange,
+	comments,
+	showResolved = false,
+	onShowResolvedChange,
+	searchQuery = '',
+	onSearchChange,
+	onCommentClick,
+	onResolveComment,
+	onToggleActionRequired,
+	onForward,
+	onMarkUnread,
+	onCopyLink,
+	onDelete,
+	noCommentsMessage,
+	className,
+	style,
+}: DsCommentsDrawerProps) => {
+	const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
+	const [pendingFilters, setPendingFilters] = useState<CommentsFilterState>(initialFilterState);
+	const [appliedFilters, setAppliedFilters] = useState<CommentsFilterState>(initialFilterState);
+
+	const authorsMap = new Map<string, string>();
+	const labelsSet = new Set<string>();
+
+	comments.forEach((comment) => {
+		authorsMap.set(comment.author.id, comment.author.name);
+		comment.labels?.forEach((label) => labelsSet.add(label));
+	});
+
+	const availableAuthors = Array.from(authorsMap.entries()).map(([id, name]) => ({ id, name }));
+	const availableLabels = Array.from(labelsSet);
+
+	let filteredComments = comments;
+
+	if (!showResolved) {
+		filteredComments = filteredComments.filter((c) => !c.isResolved);
+	}
+
+	filteredComments = applyFilters(
+		filteredComments,
+		appliedFilters,
+		(comment) => comment.isActionRequired || false,
+	);
+
+	if (searchQuery) {
+		const query = searchQuery.toLowerCase();
+		filteredComments = filteredComments.filter((comment) => {
+			const matchesContent = comment.messages.some((m) => m.content.toLowerCase().includes(query));
+			const matchesAuthor = comment.author.name.toLowerCase().includes(query);
+			const matchesId = `#${String(comment.numericId)}`.includes(query);
+			return matchesContent || matchesAuthor || matchesId;
+		});
+	}
+
+	const commentCount = comments.filter((c) => !c.isResolved).length;
+	const resolvedCount = comments.filter((c) => c.isResolved).length;
+	const hasResolved = resolvedCount > 0;
+
+	const filterTags = filtersToTags(appliedFilters, authorsMap);
+
+	const handleShowResolvedToggle = () => {
+		onShowResolvedChange?.(!showResolved);
+	};
+
+	const handleFilterClick = () => {
+		setPendingFilters(appliedFilters);
+		setIsFilterModalOpen(true);
+	};
+
+	const handleApplyFilters = () => {
+		setAppliedFilters(pendingFilters);
+		setIsFilterModalOpen(false);
+	};
+
+	const handleClearAllFilters = () => {
+		setPendingFilters(initialFilterState);
+		setAppliedFilters(initialFilterState);
+		setIsFilterModalOpen(false);
+	};
+
+	const handleDeleteTag = (item: TagFilterItem) => {
+		const tag = filterTags.find((c) => c.id === item.id);
+		if (tag) {
+			const newFilters = removeTag(appliedFilters, tag);
+			setAppliedFilters(newFilters);
+		}
+	};
+
+	return (
+		<>
+			<DsDrawer
+				open={open}
+				onOpenChange={onOpenChange}
+				position="start"
+				columns={4}
+				className={className}
+				style={style}
+			>
+				<DsDrawer.Header>
+					<DsDrawer.Title>{commentCount} Comments</DsDrawer.Title>
+
+					<div className={styles.headerActions}>
+						<DsButton design="v1.2" buttonType="tertiary" size="small" aria-label="More actions">
+							<DsIcon icon="more_vert" size="tiny" />
+						</DsButton>
+
+						<div className={styles.divider} />
+
+						<DsDrawer.CloseTrigger />
+					</div>
+				</DsDrawer.Header>
+
+				<DsDrawer.Toolbar>
+					<DsTextInput
+						placeholder="Search"
+						value={searchQuery}
+						onValueChange={onSearchChange}
+						className={styles.searchInput}
+						slots={{
+							startAdornment: <DsIcon icon="search" size="tiny" />,
+						}}
+					/>
+
+					<DsButton
+						design="v1.2"
+						buttonType="tertiary"
+						size="small"
+						aria-label="Filter"
+						onClick={handleFilterClick}
+					>
+						<DsIcon icon="filter_list" size="tiny" />
+					</DsButton>
+				</DsDrawer.Toolbar>
+
+				{hasResolved && (
+					<DsDrawer.Toolbar>
+						<DsButton design="v1.2" buttonType="tertiary" size="small" onClick={handleShowResolvedToggle}>
+							{showResolved ? 'Hide' : 'Show'} resolved ({resolvedCount})
+						</DsButton>
+					</DsDrawer.Toolbar>
+				)}
+
+				{filterTags.length > 0 && (
+					<DsDrawer.Toolbar className={styles.filterTagsToolbar}>
+						<DsTagFilter
+							items={filterTags}
+							onClearAll={handleClearAllFilters}
+							onItemDelete={handleDeleteTag}
+							className={styles.tagFilter}
+						/>
+					</DsDrawer.Toolbar>
+				)}
+
+				<DsDrawer.Body className={styles.body}>
+					{filteredComments.length === 0 ? (
+						<div className={styles.emptyState}>
+							{noCommentsMessage || (
+								<>
+									<DsIcon icon="chat_bubble_outline" size="large" className={styles.emptyIcon} />
+									<span>No comments yet</span>
+								</>
+							)}
+						</div>
+					) : (
+						filteredComments.map((comment) => (
+							<DsCommentCard
+								key={comment.id}
+								comment={comment}
+								overflow="displayed"
+								onClick={() => onCommentClick?.(comment)}
+								onResolve={() => onResolveComment?.(comment.id)}
+								onToggleActionRequired={() => onToggleActionRequired?.(comment.id)}
+								onForward={() => onForward?.(comment.id)}
+								onMarkUnread={() => onMarkUnread?.(comment.id)}
+								onCopyLink={() => onCopyLink?.(comment.id)}
+								onDelete={() => onDelete?.(comment.id)}
+							/>
+						))
+					)}
+				</DsDrawer.Body>
+			</DsDrawer>
+
+			<CommentsFilterModal
+				open={isFilterModalOpen}
+				onOpenChange={setIsFilterModalOpen}
+				filters={pendingFilters}
+				onFiltersChange={setPendingFilters}
+				onApply={handleApplyFilters}
+				onClearAll={handleClearAllFilters}
+				availableAuthors={availableAuthors}
+				availableLabels={availableLabels}
+			/>
+		</>
+	);
+};

package/src/components/ds-comments-drawer/ds-comments-drawer.types.ts

@@ -0,0 +1,23 @@
+import type { CSSProperties, ReactNode, Ref } from 'react';
+import type { CommentData } from '../ds-comment-card';
+
+export interface DsCommentsDrawerProps {
+	ref?: Ref<HTMLElement>;
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	comments: CommentData[];
+	showResolved?: boolean;
+	onShowResolvedChange?: (show: boolean) => void;
+	searchQuery?: string;
+	onSearchChange?: (query: string) => void;
+	onCommentClick?: (comment: CommentData) => void;
+	onResolveComment?: (commentId: string) => void;
+	onToggleActionRequired?: (commentId: string) => void;
+	onForward?: (commentId: string) => void;
+	onMarkUnread?: (commentId: string) => void;
+	onCopyLink?: (commentId: string) => void;
+	onDelete?: (commentId: string) => void;
+	noCommentsMessage?: ReactNode;
+	className?: string;
+	style?: CSSProperties;
+}

package/src/components/ds-comments-drawer/index.ts

@@ -0,0 +1,3 @@
+export { DsCommentsDrawer } from './ds-comments-drawer';
+export * from './ds-comments-drawer.types';
+export * from './comments-filters.types';

package/src/components/ds-dropdown-menu/ds-dropdown-menu.tsx

@@ -284,6 +284,7 @@ const TriggerItem: React.FC<DsDropdownMenuTriggerItemProps> = ({ className, styl
  * Use compound component pattern instead
  * @deprecated
  */
+/* c8 ignore start */
 export const DsDropdownMenuLegacy: React.FC<DsDropdownMenuLegacyProps> = ({
 	options,
 	children,
@@ -365,6 +366,7 @@ export const DsDropdownMenuLegacy: React.FC<DsDropdownMenuLegacyProps> = ({
 		</DropdownMenu.Root>
 	);
 };
+/* c8 ignore stop */
 
 /**
  * Design system  DsDropdownMenu component

package/src/components/ds-expandable-text-input/ds-expandable-text-input.tsx

@@ -13,8 +13,10 @@ export function DsExpandableTextInput({
 	icon,
 	...props
 }: DsExpandableTextInputProps) {
-	const [expanded, _setExpanded] = useState(false);
-	const [dirty, setDirty] = useState(false);
+	const hasInitialValue = Boolean(props.value ?? props.defaultValue);
+
+	const [expanded, _setExpanded] = useState(hasInitialValue);
+	const [dirty, setDirty] = useState(hasInitialValue);
 	const ref = useRef<HTMLInputElement>(null);
 
 	const setExpanded = (newExpanded: boolean) => {
@@ -41,12 +43,14 @@ export function DsExpandableTextInput({
 			onChange={(e) => {
 				props.onChange?.(e);
 
-				setDirty(true);
+				setDirty(Boolean(e.target.value));
 			}}
 			onBlur={(e) => {
 				props.onBlur?.(e);
 
-				if (!dirty && !ref.current?.value) {
+				const currentValue = props.value ?? ref.current?.value;
+
+				if (!currentValue) {
 					setExpanded(false);
 				}
 			}}

package/src/components/ds-file-upload/types/accept-types.ts

@@ -1,4 +1,3 @@
-/* cspell:disable */
 import type { FileUploadFileMimeType } from '@ark-ui/react';
 
 /**