feat(design-system): add DsTag and DsTagFilter components [AR-41960] (#88)

https://drivenets.atlassian.net/browse/AR-39465

[screen-capture
(1).webm](https://github.com/user-attachments/assets/9cc4cc39-cb80-45f0-9716-c87341837ba7)

Author: mmurawski-dn

.changeset/cyan-kids-taste.md

@@ -0,0 +1,8 @@
+---
+'@drivenets/design-system': minor
+---
+
+- Added `DsTag` component
+- Added `DsTagFilter` component
+- Deprecated `DsChip` component
+- Deprecated `DsChipGroup` component

.changeset/odd-hats-shine.md

@@ -0,0 +1,6 @@
+---
+'@drivenets/eslint-plugin-design-system': patch
+---
+
+- Add deprecation rule for `DsChip`
+- Add deprecation rule for `DsChipGroup`

packages/design-system/package.json

@@ -67,7 +67,8 @@
 	},
 	"peerDependencies": {
 		"@internationalized/date": "^3.0.0",
-		"react": "^19"
+		"react": "^19",
+		"react-dom": "^19"
 	},
 	"devDependencies": {
 		"@arethetypeswrong/cli": "^0.18.2",
@@ -85,6 +86,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",
@@ -93,11 +95,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",

packages/design-system/src/components/ds-chip-group/ds-chip-group.stories.tsx

@@ -4,13 +4,23 @@ import DsChipGroup from './ds-chip-group';
 import type { ChipItem } from './ds-chip-group.types';
 import styles from './ds-chip-group.stories.module.scss';
 
+/**
+ * @deprecated This component is deprecated. Use `DsTagFilter` instead.
+ * @see {@link ../ds-tag-filter/ds-tag-filter.stories} for examples of the replacement component.
+ */
 const meta: Meta<typeof DsChipGroup> = {
-	title: 'Design System/Chip Group',
+	title: 'Design System/Chip Group (Deprecated)',
 	component: DsChipGroup,
 	parameters: {
 		layout: 'padded',
+		docs: {
+			description: {
+				component:
+					'**Deprecated**: This component is deprecated. Please use `DsTagFilter` instead. See the TagGroup stories for the replacement component.',
+			},
+		},
 	},
-	tags: ['autodocs'],
+	tags: ['autodocs', 'deprecated'],
 	argTypes: {
 		items: {
 			control: 'object',

packages/design-system/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,

packages/design-system/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

packages/design-system/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';

packages/design-system/src/components/ds-chip/ds-chip.stories.tsx

@@ -2,13 +2,23 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import DsChip from './ds-chip';
 import { chipSizes } from './ds-chip.types';
 
+/**
+ * @deprecated This component is deprecated. Use `DsTag` instead.
+ * @see {@link ../ds-tag/ds-tag.stories} for examples of the replacement component.
+ */
 const meta: Meta<typeof DsChip> = {
-	title: 'Design System/Chip',
+	title: 'Design System/Chip (Deprecated)',
 	component: DsChip,
 	parameters: {
 		layout: 'centered',
+		docs: {
+			description: {
+				component:
+					'**Deprecated**: This component is deprecated. Please use `DsTag` instead. See the Tag stories for the replacement component.',
+			},
+		},
 	},
-	tags: ['autodocs'],
+	tags: ['autodocs', 'deprecated'],
 	argTypes: {
 		label: {
 			control: 'text',

packages/design-system/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,

packages/design-system/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