@drivenets/design-system 0.2.0 → 0.4.0

package/src/components/ds-skeleton/ds-skeleton-text.tsx

@@ -0,0 +1,49 @@
+import type { CSSProperties } from 'react';
+import classNames from 'classnames';
+import type { DsSkeletonTextProps } from './ds-skeleton.types';
+import { typographyHeightMap, DEFAULT_LINE_GAP, radiusMap } from './ds-skeleton.config';
+import styles from './ds-skeleton.module.scss';
+
+/**
+ * Text skeleton component - matches typography variants
+ * It renders pill-shaped lines that match the height of text content
+ */
+const DsSkeletonText = ({
+	typographyVariant = 'body-sm-reg',
+	color = 'gray',
+	lines = 1,
+	width,
+	radius = 'default',
+	className,
+	style,
+}: DsSkeletonTextProps) => {
+	const height = typographyHeightMap[typographyVariant];
+	const borderRadius = typeof radius === 'number' ? radius : radiusMap[radius];
+
+	const getLineWidth = (): string | number => {
+		if (width !== undefined) {
+			return width;
+		}
+
+		return '100%';
+	};
+
+	const lineClassName = classNames(styles.skeleton, styles.text, styles[color], className);
+
+	const createLineStyle = (lineWidth: string | number): CSSProperties => ({
+		height,
+		width: typeof lineWidth === 'number' ? String(lineWidth) + 'px' : lineWidth,
+		borderRadius,
+		...style,
+	});
+
+	return (
+		<div aria-hidden="true" className={styles.container} style={{ gap: DEFAULT_LINE_GAP }}>
+			{Array.from({ length: lines }, (_, index) => (
+				<span key={index} className={lineClassName} style={createLineStyle(getLineWidth())} />
+			))}
+		</div>
+	);
+};
+
+export default DsSkeletonText;

package/src/components/ds-skeleton/ds-skeleton.config.ts

@@ -0,0 +1,68 @@
+import type { DsAvatarSize } from '../ds-avatar';
+import type { SemanticVariant } from '../ds-typography';
+import type { SkeletonRadiusVariant } from './ds-skeleton.types';
+
+/**
+ * Circle size mapping matching DsAvatar component
+ * Maps semantic size names to pixel values
+ */
+export const circleSizeMap: Record<DsAvatarSize, number> = Object.freeze({
+	xsm: 24,
+	sm: 32,
+	regular: 40,
+	md: 48,
+	lg: 64,
+	xl: 80,
+});
+
+/**
+ * Typography variant height mapping
+ * Maps semantic variants to approximate heights in pixels
+ * Based on line-height values from design system
+ */
+export const typographyHeightMap: Record<SemanticVariant, number> = Object.freeze({
+	// Body variants - based on line-height
+	'body-md-reg': 20,
+	'body-md-md': 20,
+	'body-md-semi-bold': 20,
+	'body-md-bold': 20,
+	'body-md-link': 20,
+
+	'body-sm-reg': 18,
+	'body-sm-md': 18,
+	'body-sm-semi-bold': 18,
+	'body-sm-bold': 18,
+	'body-sm-link': 18,
+
+	'body-xs-reg': 16,
+	'body-xs-md': 16,
+	'body-xs-semi-bold': 16,
+	'body-xs-bold': 16,
+	'body-xs-link': 16,
+
+	// Code variants
+	'code-sm-reg': 18,
+	'code-sm-semi-bold': 18,
+	'code-xs-reg': 16,
+	'code-xs-semi-bold': 16,
+
+	// Heading variants - based on line-height
+	heading1: 64,
+	heading2: 54,
+	heading3: 48,
+	heading4: 36,
+});
+
+/**
+ * Border radius mapping
+ * Maps semantic radius names to pixel values
+ */
+export const radiusMap: Record<SkeletonRadiusVariant, number> = Object.freeze({
+	default: 4, // Standard button/card radius
+	round: 999, // Pill-shaped (fully rounded)
+});
+
+/**
+ * Default gap between skeleton lines in pixels
+ */
+export const DEFAULT_LINE_GAP = 8;

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

@@ -0,0 +1,72 @@
+.skeleton {
+	animation: shimmer 2s linear infinite;
+}
+
+.gray {
+	--skeleton-gray-base: #f3f5fa;
+	--skeleton-gray-accent: #e3e3e3;
+
+	background: linear-gradient(
+		90deg,
+		var(--skeleton-gray-base) 0%,
+		var(--skeleton-gray-base) 33%,
+		var(--skeleton-gray-accent) 50%,
+		var(--skeleton-gray-base) 66%,
+		var(--skeleton-gray-base) 100%
+	);
+	background-size: 300% 100%;
+}
+
+.blue {
+	--skeleton-blue-accent: #759cec;
+	--skeleton-blue-base: #dfe9ff;
+
+	background: linear-gradient(
+		90deg,
+		var(--skeleton-blue-base) 0%,
+		var(--skeleton-blue-base) 33%,
+		var(--skeleton-blue-accent) 50%,
+		var(--skeleton-blue-base) 66%,
+		var(--skeleton-blue-base) 100%
+	);
+	background-size: 300% 100%;
+}
+
+.text {
+	display: block;
+	margin-bottom: var(--spacing-xs);
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+
+.circle {
+	display: inline-block;
+	border-radius: 50%;
+	flex-shrink: 0;
+}
+
+.rectangle {
+	display: inline-block;
+	flex-shrink: 0;
+}
+
+.container {
+	display: flex;
+	flex-direction: column;
+}
+
+@keyframes shimmer {
+	0% {
+		background-position: 100% 0;
+	}
+
+	60% {
+		background-position: 0 0;
+	}
+
+	100% {
+		background-position: 0 0;
+	}
+}

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

@@ -0,0 +1,9 @@
+import DsSkeletonText from './ds-skeleton-text';
+import DsSkeletonCircle from './ds-skeleton-circle';
+import DsSkeletonRect from './ds-skeleton-rect';
+
+export default {
+	Text: DsSkeletonText,
+	Circle: DsSkeletonCircle,
+	Rect: DsSkeletonRect,
+};

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

@@ -0,0 +1,92 @@
+import type { CSSProperties, Ref } from 'react';
+import type { DsAvatarSize } from '../ds-avatar';
+import type { SemanticVariant } from '../ds-typography';
+
+export const skeletonColorVariants = ['gray', 'blue'] as const;
+export type SkeletonColorVariant = (typeof skeletonColorVariants)[number];
+
+export const skeletonRadiusVariants = ['default', 'round'] as const;
+export type SkeletonRadiusVariant = (typeof skeletonRadiusVariants)[number];
+
+/**
+ * Shared base props for all skeleton components
+ */
+export interface DsSkeletonBaseProps {
+	/**
+	 * Color variant of the skeleton
+	 * @default 'gray'
+	 */
+	color?: SkeletonColorVariant;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Additional inline styles
+	 */
+	style?: CSSProperties;
+	/**
+	 * Ref to the skeleton element
+	 */
+	ref?: Ref<HTMLSpanElement>;
+}
+
+/**
+ * Props for DsSkeleton.Text component
+ * Typography-based text skeleton with configurable lines
+ */
+export interface DsSkeletonTextProps extends DsSkeletonBaseProps {
+	/**
+	 * Typography variant - determines the height of the skeleton
+	 * @default 'body-sm-reg'
+	 */
+	typographyVariant?: SemanticVariant;
+	/**
+	 * Number of lines to render
+	 * @default 1
+	 */
+	lines?: number;
+	/**
+	 * Width of skeleton. Last line will have varied width if not specified.
+	 * Can be a number (px) or string ('50%', '200px')
+	 * @default '100%' (last line varies between 40-80%)
+	 */
+	width?: string | number;
+	/**
+	 * Border radius: 'default' (4px), 'round' (pill-shaped), or custom px value
+	 * @default 'default'
+	 */
+	radius?: SkeletonRadiusVariant | number;
+}
+
+/**
+ * Props for DsSkeleton.Circle component
+ * Circular skeleton for avatars and icons
+ */
+export interface DsSkeletonCircleProps extends DsSkeletonBaseProps {
+	/**
+	 * Size of the circle - matches DsAvatar sizes or custom pixel value
+	 * @default 'regular'
+	 */
+	size?: DsAvatarSize | number;
+}
+
+/**
+ * Props for DsSkeleton.Rect component
+ * Rectangular skeleton for buttons, images, and custom shapes
+ */
+export interface DsSkeletonRectProps extends DsSkeletonBaseProps {
+	/**
+	 * Width of rectangle. Can be number (px) or string ('50%', '200px')
+	 */
+	width: string | number;
+	/**
+	 * Height of rectangle. Can be number (px) or string ('50%', '200px')
+	 */
+	height: string | number;
+	/**
+	 * Border radius: 'default' (4px), 'round' (pill-shaped), or custom px value
+	 * @default 'default'
+	 */
+	radius?: SkeletonRadiusVariant | number;
+}

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

@@ -0,0 +1,5 @@
+export * from './ds-skeleton.types';
+export { default as DsSkeleton } from './ds-skeleton';
+export { default as DsSkeletonText } from './ds-skeleton-text';
+export { default as DsSkeletonCircle } from './ds-skeleton-circle';
+export { default as DsSkeletonRect } from './ds-skeleton-rect';

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

@@ -26,7 +26,7 @@ const DsSpinner: React.FC<DsSpinnerProps> = ({ size = 'medium', className, style
 	const strokeDasharray = `${String(0.25 * circumference)} ${String(circumference)}`;
 
 	return (
-		<div className={classNames(styles.spinnerContainer, styles[size], className)} style={style} {...props}>
+		<div className={classNames(styles.spinnerContainer, className)} style={style} {...props}>
 			<svg
 				className={classNames(styles.progressCircle, styles.spin)}
 				width={actualSize}

package/src/components/ds-table/components/core-table/core-table.tsx

@@ -4,8 +4,8 @@ import styles from './core-table.module.scss';
 
 type TableProps = HTMLAttributes<HTMLTableElement> & { ref?: Ref<HTMLTableElement> };
 
-function Table({ className, ref, ...props }: TableProps) {
-	return <table ref={ref} className={classnames(styles.table, className)} {...props} />;
+function Table({ className, ...props }: TableProps) {
+	return <table className={classnames(styles.table, className)} {...props} />;
 }
 
 Table.displayName = 'Table';
@@ -14,8 +14,8 @@ type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement> & {
 	ref?: Ref<HTMLTableSectionElement>;
 };
 
-function TableHeader({ className, ref, ...props }: TableHeaderProps) {
-	return <thead ref={ref} className={classnames(styles.tableHeader, className)} {...props} />;
+function TableHeader(props: TableHeaderProps) {
+	return <thead {...props} />;
 }
 
 TableHeader.displayName = 'TableHeader';
@@ -24,8 +24,8 @@ type TableBodyProps = HTMLAttributes<HTMLTableSectionElement> & {
 	ref?: Ref<HTMLTableSectionElement>;
 };
 
-function TableBody({ className, ref, ...props }: TableBodyProps) {
-	return <tbody ref={ref} className={classnames(styles.tableBody, className)} {...props} />;
+function TableBody(props: TableBodyProps) {
+	return <tbody {...props} />;
 }
 
 TableBody.displayName = 'TableBody';
@@ -34,8 +34,8 @@ type TableFooterProps = HTMLAttributes<HTMLTableSectionElement> & {
 	ref?: Ref<HTMLTableSectionElement>;
 };
 
-function TableFooter({ className, ref, ...props }: TableFooterProps) {
-	return <tfoot ref={ref} className={classnames(styles.tableFooter, className)} {...props} />;
+function TableFooter({ className, ...props }: TableFooterProps) {
+	return <tfoot className={classnames(styles.tableFooter, className)} {...props} />;
 }
 
 TableFooter.displayName = 'TableFooter';
@@ -44,8 +44,8 @@ type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
 	ref?: Ref<HTMLTableRowElement>;
 };
 
-function TableRow({ className, ref, ...props }: TableRowProps) {
-	return <tr ref={ref} className={classnames(styles.tableRow, className)} {...props} />;
+function TableRow(props: TableRowProps) {
+	return <tr {...props} />;
 }
 
 TableRow.displayName = 'TableRow';
@@ -54,8 +54,8 @@ type TableHeadProps = ThHTMLAttributes<HTMLTableCellElement> & {
 	ref?: Ref<HTMLTableCellElement>;
 };
 
-function TableHead({ className, ref, ...props }: TableHeadProps) {
-	return <th ref={ref} className={classnames(styles.tableHead, className)} {...props} />;
+function TableHead({ className, ...props }: TableHeadProps) {
+	return <th className={classnames(styles.tableHead, className)} {...props} />;
 }
 
 TableHead.displayName = 'TableHead';
@@ -64,8 +64,8 @@ type TableCellProps = TdHTMLAttributes<HTMLTableCellElement> & {
 	ref?: Ref<HTMLTableCellElement>;
 };
 
-function TableCell({ className, ref, ...props }: TableCellProps) {
-	return <td ref={ref} className={classnames(styles.tableCell, className)} {...props} />;
+function TableCell({ className, ...props }: TableCellProps) {
+	return <td className={classnames(styles.tableCell, className)} {...props} />;
 }
 
 TableCell.displayName = 'TableCell';
@@ -74,8 +74,8 @@ type TableCaptionProps = HTMLAttributes<HTMLTableCaptionElement> & {
 	ref?: Ref<HTMLTableCaptionElement>;
 };
 
-function TableCaption({ className, ref, ...props }: TableCaptionProps) {
-	return <caption ref={ref} className={classnames(styles.tableCaption, className)} {...props} />;
+function TableCaption({ className, ...props }: TableCaptionProps) {
+	return <caption className={classnames(styles.tableCaption, className)} {...props} />;
 }
 
 TableCaption.displayName = 'TableCaption';

package/src/components/ds-table/components/ds-table-bulk-actions/ds-table-bulk-actions.tsx

@@ -5,6 +5,7 @@ import { DsButton } from '../../../ds-button';
 import { DsIcon } from '../../../ds-icon';
 import styles from './ds-table-bulk-actions.module.scss';
 import type { BulkActionsProps } from './ds-table-bulk-actions.types';
+import { DsTypography } from '../../../ds-typography';
 
 const DsTableBulkActions: React.FC<BulkActionsProps> = ({ numSelectedRows, actions, onClearSelection }) => {
 	const [isRendered, setIsRendered] = useState(false);
@@ -31,24 +32,21 @@ const DsTableBulkActions: React.FC<BulkActionsProps> = ({ numSelectedRows, actio
 	return (
 		<div className={classnames(styles.bulkActionsContainer, animationClass)}>
 			<div className={styles.selectedCountContainer}>
-				<h3 className={classnames(styles.selectedCountBadge, styles.bold)}>{numSelectedRows}</h3>
+				<DsTypography variant="heading1" className={styles.selectedCountBadge}>
+					{numSelectedRows}
+				</DsTypography>
 			</div>
 			<div className={styles.bulkActionsContent}>
-				<span className={styles.bulkActionsInfo}>items selected</span>
+				<DsTypography variant="body-md-semi-bold" className={styles.bulkActionsInfo}>
+					Items selected
+				</DsTypography>
 
 				<div className={styles.bulkActionsActions}>
 					{actions.map((action, index) => (
-						<DsButton
-							key={index}
-							variant="borderless"
-							size="small"
-							className={styles.actionButton}
-							contentClassName={styles.actionButtonContent}
-							onClick={action.onClick}
-						>
+						<button key={index} type="button" className={styles.actionButton} onClick={action.onClick}>
 							<DsIcon icon={action.icon} />
-							<span className={(styles['p-s'], styles.medium)}>{action.label}</span>
-						</DsButton>
+							<DsTypography variant="body-xs-md">{action.label}</DsTypography>
+						</button>
 					))}
 				</div>
 
@@ -60,7 +58,6 @@ const DsTableBulkActions: React.FC<BulkActionsProps> = ({ numSelectedRows, actio
 					onClick={onClearSelection}
 				>
 					<DsIcon icon="close" />
-					<span className={(styles['p-s'], styles.medium)}>Esc</span>
 				</DsButton>
 			</div>
 		</div>

package/src/components/ds-table/components/ds-table-row/ds-table-row.tsx

@@ -50,7 +50,6 @@ const DsTableRow = <TData,>({ ref, row, virtualRow }: DsTableRowProps<TData>) =>
 		renderExpandedRow,
 		virtualized,
 		bordered,
-		highlightOnHover,
 		rowSize,
 		toggleRowExpanded,
 		primaryRowActions,
@@ -100,7 +99,6 @@ const DsTableRow = <TData,>({ ref, row, virtualRow }: DsTableRowProps<TData>) =>
 					},
 					virtualized && styles.virtualizedRow,
 					onRowClick && styles.clickableRow,
-					highlightOnHover && styles.highlightHoverRow,
 					!bordered && styles.rowNoBorder,
 					isExpanded && styles.expanded,
 				)}

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

@@ -44,7 +44,6 @@ const DsTable = <TData extends { id: string }, TValue>({
 	stickyHeader = true,
 	bordered = true,
 	fullWidth = true,
-	highlightOnHover = true,
 	rowSize = 'medium',
 	expandable = false,
 	renderExpandedRow,
@@ -215,16 +214,13 @@ const DsTable = <TData extends { id: string }, TValue>({
 
 	const selectedRows = Object.entries(rowSelection)
 		.filter(([, selected]) => selected)
-		// This is not necessarily a redundant condition. It depends on `noUncheckedIndexedAccess`.
-		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 		.map(([key]) => rowsById[key]?.original)
-		.filter(Boolean);
+		.filter((v) => !!v);
 
 	const contextValue: DsTableContextType<TData, TValue> = {
 		stickyHeader,
 		bordered,
 		fullWidth,
-		highlightOnHover,
 		rowSize,
 		expandable,
 		selectable,
@@ -279,6 +275,11 @@ const DsTable = <TData extends { id: string }, TValue>({
 								rowVirtualizer.getVirtualItems().length ? (
 									rowVirtualizer.getVirtualItems().map((virtualRow: VirtualItem) => {
 										const row = rows[virtualRow.index];
+
+										if (!row) {
+											return null;
+										}
+
 										return <DsTableRow key={row.id} row={row} virtualRow={virtualRow} />;
 									})
 								) : (

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

@@ -235,11 +235,6 @@ export interface DsDataTableProps<TData, TValue> {
 	 */
 	fullWidth?: boolean;
 
-	/**
-	 * Whether the table has highlight on hover
-	 */
-	highlightOnHover?: boolean;
-
 	/**
 	 * Row size variant (small: 36px, medium: 48px, large: 64px)
 	 * @default 'medium'

package/src/components/ds-table/filters/adapters/create-dual-range-filter-adapter.tsx

@@ -74,9 +74,9 @@ export function createDualRangeFilterAdapter<TData>(
 			// Check each field's range
 			for (const [fieldKey, range] of Object.entries(filterValue)) {
 				const hasFilter = range.from !== undefined || range.to !== undefined;
+				const fieldValue = rowValue[fieldKey];
 
-				if (hasFilter) {
-					const fieldValue = rowValue[fieldKey];
+				if (hasFilter && fieldValue !== undefined) {
 					const matchesFrom = range.from === undefined || fieldValue >= range.from;
 					const matchesTo = range.to === undefined || fieldValue <= range.to;
 
@@ -147,8 +147,6 @@ export function createDualRangeFilterAdapter<TData>(
 						<RangeFilter
 							key={fieldKey}
 							label={fieldLabel}
-							// This is not necessarily a redundant condition. It depends on `noUncheckedIndexedAccess`.
-							// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 							value={value[fieldKey] || {}}
 							onChange={(rangeValue) =>
 								onChange({

package/src/components/ds-table/filters/hooks/index.ts

@@ -1,2 +1,2 @@
 export { useTableFilters } from './use-table-filters';
-export type { UseTableFiltersResult } from './use-table-filters';
+export type { UseTableFiltersOptions, UseTableFiltersResult } from './use-table-filters';