@drivenets/design-system 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.1.0",
+  "version": "0.2.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,11 +85,13 @@
     "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",

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-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/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-tag/ds-tag.module.scss

@@ -0,0 +1,112 @@
+@use '../../styles/typography';
+
+.tag {
+	--transition-duration: 200ms;
+
+	display: inline-flex;
+	outline: 2px solid transparent;
+	align-items: center;
+	border-radius: 4px;
+	cursor: default;
+	overflow: hidden;
+	position: relative;
+	padding: var(--spacing-3xs) var(--spacing-xs);
+	background: var(--color-background);
+	border: 1px solid var(--color-border-contrast);
+	transition-property:
+		background, border-color, width, max-width, color, fill, stroke, opacity, transform, outline-color,
+		opacity, visibility;
+	transition-timing-function: ease-out;
+	transition-duration: var(--transition-duration);
+
+	&.clickable {
+		cursor: pointer;
+
+		&:hover {
+			background: var(--color-background-secondary);
+			border-color: var(--color-border-action-secondary-hover);
+		}
+
+		&:focus-visible {
+			outline-color: var(--color-border-action-secondary);
+		}
+	}
+
+	&.selected {
+		background: var(--color-background-selected-weak) !important;
+		border-color: var(--color-border-action-primary) !important;
+
+		&:focus-visible {
+			outline-color: var(--color-border-action-primary);
+		}
+
+		.deleteButton {
+			outline-color: var(--color-border-action-primary);
+		}
+	}
+
+	&.include {
+		.variantIcon {
+			color: var(--color-icon-secondary);
+		}
+	}
+
+	&.exclude {
+		.variantIcon {
+			color: var(--color-icon-danger);
+		}
+	}
+
+	&.disabled {
+		cursor: not-allowed;
+		color: var(--color-font-disabled);
+		background: var(--color-background);
+		border-color: var(--color-border-contrast);
+
+		.label {
+			color: var(--color-font-disabled);
+		}
+
+		.variantIcon {
+			color: var(--color-font-disabled);
+		}
+	}
+
+	.deleteButton {
+		opacity: 0;
+		visibility: hidden;
+		max-width: 0;
+		display: flex;
+		outline-color: var(--color-border-action-secondary);
+		user-select: none;
+		transition-property:
+			background, border-color, width, max-width, color, fill, stroke, opacity, transform, outline-color,
+			visibility, margin-left;
+		transition-timing-function: ease-out;
+		transition-duration: var(--transition-duration);
+		color: var(--color-icon-secondary);
+
+		&:hover {
+			background: var(--color-background-action-secondary-hover);
+		}
+	}
+
+	&:hover:not(.disabled) .deleteButton,
+	&:focus-within:not(.disabled) .deleteButton,
+	&.selected:not(.disabled) .deleteButton {
+		opacity: 1;
+		visibility: visible;
+		max-width: 50px;
+		margin-left: var(--spacing-3xs);
+	}
+}
+
+.label {
+	@include typography.ellipsis;
+}
+
+.icon {
+	flex-shrink: 0;
+	display: flex;
+	margin-right: var(--spacing-3xs);
+}