test(design-system): add tests for table component [AR-46651] (#131)

[Jira](AR-46651-add-tests-for-components-with-zero-coverage)

### Improvements for Table's stories

- Broke down stories into multiple files. There used to be a single 1000
lines file.
- Added tests to majority of stories
- Isolated storybook related files into stories folder

Note: stories itself are not changed.

Author: iromanchuk-dn

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

@@ -1,15 +1,5 @@
 import type { SortingState } from '@tanstack/react-table';
-import type { Status } from '../ds-table.stories';
-
-export type Person = {
-	id: string;
-	firstName: string;
-	lastName: string;
-	age: number;
-	visits: number;
-	status: Status;
-	progress: number;
-};
+import type { Person, Status } from './story-data';
 
 export interface GeneratedDataResult {
 	data: Person[];

…s/ds-table/utils/story-data-generator.ts …e/stories/common/story-data-generator.tspackages/design-system/src/components/ds-table/utils/story-data-generator.ts renamed to packages/design-system/src/components/ds-table/stories/common/story-data-generator.ts packages/design-system/src/components/ds-table/utils/story-data-generator.ts renamed to packages/design-system/src/components/ds-table/stories/common/story-data-generator.ts

@@ -0,0 +1,184 @@
+import type { ColumnDef } from '@tanstack/react-table';
+
+export type Status = 'relationship' | 'complicated' | 'single';
+
+export type Person = {
+	id: string;
+	firstName: string;
+	lastName: string;
+	age: number;
+	visits: number;
+	status: Status;
+	progress: number;
+};
+
+export const columns: ColumnDef<Person>[] = [
+	{
+		accessorKey: 'firstName',
+		header: 'First Name',
+		cell: (info) => info.getValue(),
+	},
+	{
+		accessorKey: 'lastName',
+		header: 'Last Name',
+		cell: (info) => info.getValue(),
+	},
+	{
+		accessorKey: 'age',
+		header: 'Age',
+		cell: (info) => info.getValue(),
+	},
+	{
+		accessorKey: 'visits',
+		header: 'Visits',
+		cell: (info) => info.getValue(),
+	},
+	{
+		accessorKey: 'status',
+		header: 'Status',
+		cell: (info) => info.getValue(),
+	},
+	{
+		accessorKey: 'progress',
+		header: 'Profile Progress',
+		cell: (info) => `${String(info.getValue())}%`,
+	},
+];
+
+export const defaultData: Person[] = [
+	{
+		id: '1',
+		firstName: 'Tanner',
+		lastName: 'Linsley',
+		age: 33,
+		visits: 100,
+		status: 'single',
+		progress: 75,
+	},
+	{
+		id: '2',
+		firstName: 'Kevin',
+		lastName: 'Fine',
+		age: 28,
+		visits: 200,
+		status: 'relationship',
+		progress: 50,
+	},
+	{
+		id: '3',
+		firstName: 'John',
+		lastName: 'Doe',
+		age: 45,
+		visits: 50,
+		status: 'complicated',
+		progress: 90,
+	},
+	{
+		id: '4',
+		firstName: 'Jane',
+		lastName: 'Smith',
+		age: 30,
+		visits: 150,
+		status: 'single',
+		progress: 60,
+	},
+	{
+		id: '5',
+		firstName: 'Peter',
+		lastName: 'Jones',
+		age: 22,
+		visits: 250,
+		status: 'relationship',
+		progress: 30,
+	},
+	{
+		id: '6',
+		firstName: 'Mary',
+		lastName: 'Jane',
+		age: 38,
+		visits: 80,
+		status: 'complicated',
+		progress: 85,
+	},
+	{
+		id: '7',
+		firstName: 'David',
+		lastName: 'Williams',
+		age: 50,
+		visits: 120,
+		status: 'single',
+		progress: 40,
+	},
+	{
+		id: '8',
+		firstName: 'Sarah',
+		lastName: 'Brown',
+		age: 25,
+		visits: 180,
+		status: 'relationship',
+		progress: 70,
+	},
+	{
+		id: '9',
+		firstName: 'Michael',
+		lastName: 'Davis',
+		age: 41,
+		visits: 95,
+		status: 'complicated',
+		progress: 20,
+	},
+	{
+		id: '10',
+		firstName: 'Emily',
+		lastName: 'Miller',
+		age: 36,
+		visits: 110,
+		status: 'single',
+		progress: 55,
+	},
+	{
+		id: '11',
+		firstName: 'Daniel',
+		lastName: 'Wilson',
+		age: 29,
+		visits: 220,
+		status: 'relationship',
+		progress: 80,
+	},
+	{
+		id: '12',
+		firstName: 'Olivia',
+		lastName: 'Moore',
+		age: 48,
+		visits: 65,
+		status: 'complicated',
+		progress: 15,
+	},
+	{
+		id: '13',
+		firstName: 'James',
+		lastName: 'Taylor',
+		age: 31,
+		visits: 135,
+		status: 'single',
+		progress: 95,
+	},
+	{
+		id: '14',
+		firstName: 'Sophia',
+		lastName: 'Anderson',
+		age: 27,
+		visits: 170,
+		status: 'relationship',
+		progress: 25,
+	},
+	{
+		id: '15',
+		firstName: 'Robert',
+		lastName: 'Thomas',
+		age: 43,
+		visits: 88,
+		status: 'complicated',
+		progress: 50,
+	},
+];

packages/design-system/src/components/ds-table/stories/common/story-data.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+
+import styles from '../ds-table.stories.module.scss';
+
+export const fullHeightDecorator = (Story: () => ReactNode) => (
+	<div className={styles.storyPadding}>
+		<style>
+			{`
+            #storybook-root, html, body { height: 100%; }
+          `}
+		</style>
+		<Story />
+	</div>
+);

packages/design-system/src/components/ds-table/stories/common/story-decorators.tsx

@@ -0,0 +1,4 @@
+import type { StoryContext } from '@storybook/react-vite';
+
+export const getDataRows = (canvas: StoryContext['canvas']) =>
+	canvas.getAllByRole('row').filter((row: HTMLElement) => !row.querySelector('th'));

packages/design-system/src/components/ds-table/stories/common/story-test-helpers.ts

@@ -0,0 +1,3 @@
+export * from './progress-infographic/progress-infographic';
+export * from './status-item/status-item';
+export * from './table-empty-state/table-empty-state';

packages/design-system/src/components/ds-table/stories/components/index.ts

@@ -0,0 +1,31 @@
+.progressInfographic {
+	width: 100%;
+	height: 20px;
+	background-color: var(--neutral-10);
+	border-radius: 4px;
+	overflow: hidden;
+	border: 1px solid var(--neutral-6);
+
+	& > .bar {
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: white;
+		font-size: 10px;
+		font-weight: bold;
+		transition: width 0.3s ease-in-out;
+
+		&--low {
+			background-color: var(--system-status-error);
+		}
+
+		&--medium {
+			background-color: var(--system-status-info);
+		}
+
+		&--high {
+			background-color: var(--system-status-ok);
+		}
+	}
+}

packages/design-system/src/components/ds-table/stories/components/progress-infographic/progress-infographic.module.scss

@@ -0,0 +1,18 @@
+import classnames from 'classnames';
+import styles from './progress-infographic.module.scss';
+
+export const ProgressInfographic = ({ value }: { value: number }) => {
+	const barClass = classnames(styles.bar, {
+		[styles['bar--high']]: value > 70,
+		[styles['bar--medium']]: value > 40 && value <= 70,
+		[styles['bar--low']]: value <= 40,
+	});
+
+	return (
+		<div className={styles.progressInfographic}>
+			<div className={barClass} style={{ width: `${String(value)}%` }}>
+				{value}%
+			</div>
+		</div>
+	);
+};

packages/design-system/src/components/ds-table/stories/components/progress-infographic/progress-infographic.tsx

@@ -0,0 +1,10 @@
+.emptyStateContainer {
+	padding: 20px;
+	text-align: center;
+	border: 1px dashed #ccc;
+	height: 100%;
+
+	&__text {
+		margin-top: 10px;
+	}
+}

packages/design-system/src/components/ds-table/stories/components/table-empty-state/table-empty-state.module.scss

@@ -0,0 +1,11 @@
+import styles from './table-empty-state.module.scss';
+import DsIcon from '../../../../ds-icon/ds-icon';
+
+export const TableEmptyState = () => {
+	return (
+		<div className={styles.emptyStateContainer}>
+			<DsIcon icon="info" size="large" />
+			<p className={styles.emptyStateContainer__text}>No matching records found.</p>
+		</div>
+	);
+};