@drivenets/design-system 0.1.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -58,7 +58,8 @@
   },
   "peerDependencies": {
     "@internationalized/date": "^3.0.0",
-    "react": "^19"
+    "react": "^19",
+    "react-dom": "^19"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.2",
@@ -75,6 +76,7 @@
     "@tanstack/react-router": "^1.141.2",
     "@types/eslint-plugin-jsx-a11y": "^6.10.1",
     "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@vitest/browser": "^4.0.16",
     "@vitest/browser-playwright": "^4.0.15",
     "babel-plugin-react-compiler": "^1.0.0",
@@ -83,16 +85,19 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-storybook": "^10.1.9",
+    "jsdom": "^25.0.1",
     "playwright": "^1.57.0",
     "postcss": "^8.5.6",
     "postcss-modules": "^6.0.1",
     "publint": "^0.3.16",
     "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "react-hook-form": "^7.55.0",
     "rollup-plugin-sass": "^1.15.3",
     "sass-embedded": "^1.97.0",
     "storybook": "^10.1.9",
     "tsdown": "^0.18.0",
+    "typed-scss-modules": "^8.1.1",
     "typescript": "^5.9.3",
     "typescript-plugin-css-modules": "^5.2.0",
     "vite": "^7.3.0",
@@ -101,8 +106,9 @@
     "@drivenets/vite-plugin-design-system": "0.0.4"
   },
   "scripts": {
-    "lint": "eslint --max-warnings=0 .",
-    "typecheck": "tsc",
+    "lint": "pnpm generate-scss-dts; eslint --max-warnings=0 .",
+    "typecheck": "pnpm generate-scss-dts; tsc",
+    "generate-scss-dts": "typed-scss-modules ./src -o ./.scss-dts --nameFormat all --exportType default > /dev/null 2>&1",
     "storybook": "storybook dev -p 6006",
     "test": "vitest",
     "build": "tsdown",

package/src/components/ds-avatar/_mixins.scss

@@ -0,0 +1,45 @@
+$avatar-size-xsm: 18px;
+$avatar-size-sm: 24px;
+$avatar-size-regular: 32px;
+$avatar-size-md: 48px;
+$avatar-size-lg: 80px;
+$avatar-size-xl: 144px;
+
+$avatar-border-width: var(--spacing-4xs);
+$avatar-border-radius-small: var(--spacing-3xs);
+$avatar-border-radius-large: var(--spacing-xs);
+$avatar-overlap-xsm: -4px;
+$avatar-overlap-sm: -6px;
+$avatar-overlap-default: -8px;
+
+@mixin avatar-size($size, $font-size) {
+	width: $size;
+	height: $size;
+	font-size: $font-size;
+}
+
+@mixin avatar-sizes {
+	&.xsm {
+		@include avatar-size($avatar-size-xsm, 8px);
+	}
+
+	&.sm {
+		@include avatar-size($avatar-size-sm, 10px);
+	}
+
+	&.regular {
+		@include avatar-size($avatar-size-regular, var(--font-size-xs));
+	}
+
+	&.md {
+		@include avatar-size($avatar-size-md, var(--font-size-md));
+	}
+
+	&.lg {
+		@include avatar-size($avatar-size-lg, var(--font-size-2xl));
+	}
+
+	&.xl {
+		@include avatar-size($avatar-size-xl, var(--font-size-3xl));
+	}
+}

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

@@ -0,0 +1,52 @@
+@import './mixins';
+
+.avatar {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	overflow: hidden;
+	background-color: var(--color-background-deselected);
+	color: var(--color-font-on-action);
+	flex-shrink: 0;
+	user-select: none;
+
+	&.circle {
+		border-radius: 50%;
+	}
+
+	&.rounded {
+		&.xsm,
+		&.sm {
+			border-radius: $avatar-border-radius-small;
+		}
+		&.regular,
+		&.md,
+		&.lg,
+		&.xl {
+			border-radius: $avatar-border-radius-large;
+		}
+	}
+
+	@include avatar-sizes;
+
+	img {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		display: block;
+	}
+
+	.fallback {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		font-weight: var(--font-weight-medium);
+		text-transform: uppercase;
+	}
+}

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

@@ -0,0 +1,42 @@
+import type { FC } from 'react';
+import { Avatar } from '@ark-ui/react/avatar';
+import classNames from 'classnames';
+import styles from './ds-avatar.module.scss';
+import type { DsAvatarProps } from './ds-avatar.types';
+import { DsTooltip } from '../ds-tooltip';
+
+/**
+ * DsAvatar component for displaying user profile pictures or initials
+ */
+export const DsAvatar: FC<DsAvatarProps> = ({
+	src,
+	alt,
+	name,
+	size = 'regular',
+	type = 'circle',
+	className,
+	style,
+	onStatusChange,
+}) => {
+	const getInitials = (name: string) =>
+		name
+			.trim()
+			.split(' ')
+			.map((w) => w[0])
+			.join('');
+
+	return (
+		<DsTooltip content={name}>
+			{
+				<Avatar.Root
+					onStatusChange={(details) => onStatusChange?.(details.status)}
+					className={classNames(styles.avatar, styles[size], styles[type], className)}
+					style={style}
+				>
+					<Avatar.Fallback className={styles.fallback}>{getInitials(name)}</Avatar.Fallback>
+					{src && <Avatar.Image src={src} alt={alt || name} />}
+				</Avatar.Root>
+			}
+		</DsTooltip>
+	);
+};

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

@@ -0,0 +1,41 @@
+import type { CSSProperties } from 'react';
+
+export type DsAvatarSize = 'xsm' | 'sm' | 'regular' | 'md' | 'lg' | 'xl';
+export type DsAvatarType = 'circle' | 'rounded';
+
+export interface DsAvatarProps {
+	/**
+	 * Image source URL
+	 */
+	src?: string;
+	/**
+	 * Alt text for the image
+	 */
+	alt?: string;
+	/**
+	 * Name to display in tooltip and as initials if image fails
+	 */
+	name: string;
+	/**
+	 * Size of the avatar
+	 * @default 'regular'
+	 */
+	size?: DsAvatarSize;
+	/**
+	 * Shape of the avatar
+	 * @default 'circle'
+	 */
+	type?: DsAvatarType;
+	/**
+	 * Custom class name
+	 */
+	className?: string;
+	/**
+	 * Custom inline styles
+	 */
+	style?: CSSProperties;
+	/**
+	 * Callback when the status of the image changes
+	 */
+	onStatusChange?: (status: 'error' | 'loaded') => void;
+}

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

@@ -0,0 +1,2 @@
+export * from './ds-avatar';
+export * from './ds-avatar.types';

package/src/components/ds-avatar-group/ds-avatar-group.module.scss

@@ -0,0 +1,70 @@
+@import '../ds-avatar/mixins';
+
+.avatarGroup {
+	display: flex;
+	align-items: center;
+
+	.avatarItem {
+		border: $avatar-border-width solid var(--color-background);
+
+		&:not(:first-child) {
+			margin-left: $avatar-overlap-default;
+		}
+
+		&.xsm:not(:first-child) {
+			margin-left: $avatar-overlap-xsm;
+		}
+
+		&.sm:not(:first-child) {
+			margin-left: $avatar-overlap-sm;
+		}
+	}
+
+	.moreAvatar {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: var(--color-background);
+		color: var(--color-font-action);
+		border: $avatar-border-width solid var(--color-background);
+		margin-left: $avatar-overlap-default;
+		font-weight: var(--font-weight-medium);
+		z-index: 1;
+		cursor: default;
+		flex-shrink: 0;
+
+		&.circle {
+			border-radius: 50%;
+		}
+
+		&.rounded {
+			&.xsm,
+			&.sm {
+				border-radius: $avatar-border-radius-small;
+			}
+			&.regular,
+			&.md,
+			&.lg,
+			&.xl {
+				border-radius: $avatar-border-radius-large;
+			}
+		}
+
+		@include avatar-sizes;
+
+		&.xsm {
+			margin-left: $avatar-overlap-xsm;
+		}
+
+		&.sm {
+			margin-left: $avatar-overlap-sm;
+		}
+	}
+
+	.tooltipList {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-3xs);
+		padding: var(--spacing-3xs) 0;
+	}
+}

package/src/components/ds-avatar-group/ds-avatar-group.tsx

@@ -0,0 +1,51 @@
+import type { FC } from 'react';
+import classNames from 'classnames';
+import styles from './ds-avatar-group.module.scss';
+import type { DsAvatarGroupProps } from './ds-avatar-group.types';
+import { DsAvatar } from '../ds-avatar';
+import { DsTooltip } from '../ds-tooltip';
+import { DsTypography } from '../ds-typography';
+
+/**
+ * DsAvatarGroup component for displaying a list of avatars with overlap
+ */
+export const DsAvatarGroup: FC<DsAvatarGroupProps> = ({
+	avatars,
+	size = 'regular',
+	type = 'circle',
+	max = 5,
+	className,
+}) => {
+	const visibleAvatars = avatars.slice(0, max);
+	const hiddenAvatars = avatars.slice(max);
+	const remainingCount = avatars.length - max;
+
+	return (
+		<div className={classNames(styles.avatarGroup, className)}>
+			{visibleAvatars.map((avatar, index) => (
+				<DsAvatar
+					key={`${avatar.name}-${String(index)}`}
+					{...avatar}
+					size={size}
+					type={type}
+					className={styles.avatarItem}
+				/>
+			))}
+			{remainingCount > 0 && (
+				<DsTooltip
+					content={
+						<div className={styles.tooltipList}>
+							{hiddenAvatars.map((avatar, index) => (
+								<div key={`${avatar.name}-${String(index)}`}>
+									<DsTypography variant="body-xs-reg">{avatar.name}</DsTypography>
+								</div>
+							))}
+						</div>
+					}
+				>
+					<div className={classNames(styles.moreAvatar, styles[size], styles[type])}>+{remainingCount}</div>
+				</DsTooltip>
+			)}
+		</div>
+	);
+};

package/src/components/ds-avatar-group/ds-avatar-group.types.ts

@@ -0,0 +1,27 @@
+import type { DsAvatarProps, DsAvatarSize, DsAvatarType } from '../ds-avatar';
+
+export interface DsAvatarGroupProps {
+	/**
+	 * Array of avatar items
+	 */
+	avatars: Omit<DsAvatarProps, 'size' | 'type'>[];
+	/**
+	 * Size of the avatars in the group
+	 * @default 'regular'
+	 */
+	size?: DsAvatarSize;
+	/**
+	 * Shape of the avatars in the group
+	 * @default 'circle'
+	 */
+	type?: DsAvatarType;
+	/**
+	 * Maximum number of avatars to show before collapsing
+	 * @default 5
+	 */
+	max?: number;
+	/**
+	 * Custom class name
+	 */
+	className?: string;
+}

package/src/components/ds-avatar-group/index.ts

@@ -0,0 +1,2 @@
+export * from './ds-avatar-group';
+export * from './ds-avatar-group.types';

package/src/components/ds-button/versions/ds-button-legacy/ds-button-legacy.tsx

@@ -16,13 +16,7 @@ const DsButton: React.FC<DsButtonProps> = ({
 	children,
 	...props
 }) => {
-	const buttonClass = classNames(
-		styles.button,
-		styles[`${schema}-${variant}`],
-		styles[size],
-		{ [styles.disabled]: disabled },
-		className,
-	);
+	const buttonClass = classNames(styles.button, styles[`${schema}-${variant}`], styles[size], className);
 
 	return (
 		<button type="button" className={buttonClass} disabled={disabled} {...props}>

package/src/components/ds-button/versions/ds-button-new/ds-button-new.tsx

@@ -33,10 +33,12 @@ const DsButton: React.FC<DsButtonProps> = ({
 	const buttonClass = classNames(
 		styles.button,
 		{ [styles.iconButton]: isIconOnly(children) },
-		styles[`${type}-${variant}`],
 		styles[size],
-		{ [styles.disabled]: disabled },
 		className,
+
+		// @ts-expect-error: we don't have all variations of classnames defined
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+		styles[`${type}-${variant}`],
 	);
 
 	return (

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

@@ -6,7 +6,8 @@ import { DsIcon } from '../ds-icon';
 import { DsTypography } from '../ds-typography';
 
 /**
- * Design system Chip component
+ * @deprecated This component is deprecated. Use `DsTag` instead.
+ * @see {@link ../ds-tag} for the replacement component.
  */
 const DsChip: React.FC<DsChipProps> = ({
 	ref,

package/src/components/ds-chip/ds-chip.types.tsx

@@ -1,9 +1,22 @@
 import type { CSSProperties, KeyboardEvent, MouseEvent, Ref } from 'react';
 import type { IconType } from '../ds-icon';
 
+/**
+ * @deprecated This type is deprecated. Use `DsTag` instead.
+ * @see {@link ../ds-tag} for the replacement component.
+ */
 export const chipSizes = ['medium', 'small'] as const;
+
+/**
+ * @deprecated This type is deprecated. Use `DsTag` instead.
+ * @see {@link ../ds-tag} for the replacement component.
+ */
 export type ChipSize = (typeof chipSizes)[number];
 
+/**
+ * @deprecated This interface is deprecated. Use `DsTagProps` from `ds-tag` instead.
+ * @see {@link ../ds-tag/ds-tag.types} for the replacement interface.
+ */
 export interface DsChipProps {
 	/**
 	 * Ref to the chip element

package/src/components/ds-chip/index.tsx

@@ -1,2 +1,10 @@
+/**
+ * @deprecated DsChip is deprecated. Use DsTag instead.
+ * @see {@link ../ds-tag} for the replacement component.
+ */
 export { default as DsChip } from './ds-chip';
+/**
+ * @deprecated These types are deprecated. Use DsTag types instead.
+ * @see {@link ../ds-tag} for the replacement types.
+ */
 export type { ChipSize, DsChipProps } from './ds-chip.types';

package/src/components/ds-chip-group/ds-chip-group.tsx

@@ -13,8 +13,8 @@ import { DsButton } from '../ds-button';
 import { DsIcon } from '../ds-icon';
 
 /**
- * Design system chip group component displays a collection of chips with overflow handling
- * Used for displaying filters, selected items, tags, etc.
+ * @deprecated This component is deprecated. Use `DsTagFilter` instead.
+ * @see {@link ../ds-tag-filter} for the replacement component.
  */
 const DsChipGroup: React.FC<DsChipGroupProps> = ({
 	items,

package/src/components/ds-chip-group/ds-chip-group.types.ts

@@ -1,5 +1,9 @@
 import type { CSSProperties } from 'react';
 
+/**
+ * @deprecated This interface is deprecated. Use `DsTagFilter` types instead.
+ * @see {@link ../ds-tag-filter} for the replacement types.
+ */
 export interface ChipItem {
 	/**
 	 * Unique identifier for the chip
@@ -19,6 +23,10 @@ export interface ChipItem {
 	selected?: boolean;
 }
 
+/**
+ * @deprecated This interface is deprecated. Use `DsTagFilterProps` from `ds-tag-filter` instead.
+ * @see {@link ../ds-tag-filter/ds-tag-filter.types} for the replacement interface.
+ */
 export interface DsChipGroupProps {
 	/**
 	 * Array of chip items to display

package/src/components/ds-chip-group/hooks/use-chip-row-calculation.ts

@@ -33,6 +33,11 @@ export const useChipRowCalculation = ({ chipsWrapperRef, totalFilters }: UseChip
 
 			for (index = 0; index < children.length; index++) {
 				const current = children[index];
+
+				if (!current) {
+					continue;
+				}
+
 				const offset = current.offsetWidth === wrapper.clientWidth ? 0 : gap;
 				const next = offset + current.offsetWidth;
 

package/src/components/ds-chip-group/index.ts

@@ -1,2 +1,3 @@
 export { default as DsChipGroup } from './ds-chip-group';
+
 export type { DsChipGroupProps, ChipItem } from './ds-chip-group.types';

package/src/components/ds-date-input/ds-date-input.module.scss

@@ -73,6 +73,7 @@
 .content {
 	@include dropdown.dropdown-content;
 	padding: var(--spacing-standard);
+	min-width: fit-content;
 }
 
 .viewControl {

package/src/components/ds-date-input/ds-date-input.utils.ts

@@ -44,7 +44,11 @@ export const stringToDateValue = (dates: string | [string, string]): DateValue[]
 export const dateValuesToStrings = (dates: DateValue[], range: boolean): string | [string, string] => {
 	const values = dates.map((date) => date.toString());
 
-	return range ? [values[0], values[1]] : values[0];
+	if (range) {
+		return [values[0] ?? '', values[1] ?? ''];
+	}
+
+	return values[0] ?? '';
 };
 
 /**
@@ -68,7 +72,7 @@ export const formatDateInputValue = (value: DateValue[], range: boolean): string
 	}
 	const newValue = value.map(formatDateValue);
 
-	return range ? newValue.join(' - ') : newValue[0];
+	return range ? newValue.join(' - ') : (newValue[0] ?? '');
 };
 
 /**
@@ -86,6 +90,11 @@ const parseDateString = (dateStr: string): DateValue | null => {
 	}
 
 	const [, month, day, year] = match;
+
+	if (!month || !day || !year) {
+		return null;
+	}
+
 	const monthNum = parseInt(month, 10);
 	const dayNum = parseInt(day, 10);
 	const yearNum = parseInt(year, 10);
@@ -129,6 +138,11 @@ const parseRangeInput = (text: string): ParsedDateRange => {
 	}
 
 	const [startStr, endStr] = parts;
+
+	if (!startStr || !endStr) {
+		return { start: null, end: null, isValid: false };
+	}
+
 	const startDate = parseDateString(startStr);
 	const endDate = parseDateString(endStr);
 

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

@@ -46,9 +46,12 @@ const DsDrawer = ({
 						style={style}
 						className={classNames(
 							styles.drawer,
-							styles[`cols-${String(columns)}`],
 							styles[`position-${position}`],
 							className,
+
+							// @ts-expect-error: these classnames are generated dynamically in scss
+							// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+							styles[`cols-${String(columns)}`],
 						)}
 					>
 						<div className={styles.content}>{children}</div>

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

@@ -10,7 +10,10 @@ type BasePositioning = NonNullable<Menu.RootProps['positioning']>;
 /**
  * Positioning options for dropdown menu
  */
-export type DsDropdownMenuPositioning = Pick<BasePositioning, 'placement' | 'gutter' | 'sameWidth'>;
+export type DsDropdownMenuPositioning = Pick<
+	BasePositioning,
+	'placement' | 'gutter' | 'sameWidth' | 'getAnchorRect'
+>;
 
 /**
  * DEPRECATED: Legacy dropdown menu option configuration

package/src/components/ds-file-upload/utils/format-file-size.ts

@@ -11,5 +11,5 @@ export function formatFileSize(bytes: number): string {
 	const i = Math.floor(Math.log(bytes) / Math.log(k));
 	const size = bytes / Math.pow(k, i);
 
-	return `${size.toFixed(2)} ${sizes[i]}`;
+	return `${size.toFixed(2)} ${String(sizes[i])}`;
 }

package/src/components/ds-form-control/ds-form-control.tsx

@@ -57,7 +57,14 @@ const DsFormControl = ({
 	return (
 		<FormControlContext.Provider value={{ controlId }}>
 			<div
-				className={classNames(styles.container, status && message && styles[status], className)}
+				className={classNames(
+					styles.container,
+					className,
+
+					// @ts-expect-error: `info` doesn't have its own classname
+					// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+					status && message && styles[status],
+				)}
 				style={style}
 			>
 				<div className={styles.labelContainer}>
@@ -77,7 +84,7 @@ const DsFormControl = ({
 				{message && (
 					<div className={styles.message}>
 						<DsIcon icon={messageIcon} size="tiny" filled />
-						<span className={styles.messageText}>{message}</span>
+						<span>{message}</span>
 					</div>
 				)}
 			</div>