@drivenets/design-system 0.2.0 → 0.3.0

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/use-table-filters.ts

@@ -91,11 +91,16 @@ export function useTableFilters<TData, TValue, TCellValue>(
 	const [columnFilters, setColumnFilters] = useState<ColumnFilterState<TValue>[]>([]);
 	const [filterChips, setFilterChips] = useState<ChipItem[]>([]);
 
+	const getValueByAdapterId = (adapterId: string) => {
+		// Should be safe to cast because it's being filled in the initialState
+		return filterState[adapterId] as TValue;
+	};
+
 	// Generate filter nav items with counts (updates as user changes filters in modal)
 	const filterNavItems: FilterNavItem[] = _filterAdapters.map((adapter) => ({
 		id: adapter.id,
 		label: adapter.label,
-		count: adapter.getActiveFiltersCount(filterState[adapter.id]),
+		count: adapter.getActiveFiltersCount(getValueByAdapterId(adapter.id)),
 	}));
 
 	// Enhance column definitions with filter functions and renderers
@@ -131,7 +136,7 @@ export function useTableFilters<TData, TValue, TCellValue>(
 		const chips: ChipItem[] = [];
 
 		_filterAdapters.forEach((adapter) => {
-			const value = filterState[adapter.id];
+			const value = getValueByAdapterId(adapter.id);
 
 			if (adapter.getActiveFiltersCount(value) > 0) {
 				filters.push({
@@ -170,13 +175,13 @@ export function useTableFilters<TData, TValue, TCellValue>(
 			return;
 		}
 
-		const currentValue = filterState[filterKey];
+		const currentValue = getValueByAdapterId(filterKey);
 		const newValue = adapter.fromChip(chip, currentValue);
 
 		// Regenerate chips to check if this was the last one
 		const chips: ChipItem[] = [];
 		_filterAdapters.forEach((adapter) => {
-			const value = adapter.id === filterKey ? newValue : filterState[adapter.id];
+			const value = adapter.id === filterKey ? newValue : getValueByAdapterId(adapter.id);
 			const adapterChips = adapter.toChips(value);
 			chips.push(...adapterChips);
 		});
@@ -211,7 +216,7 @@ export function useTableFilters<TData, TValue, TCellValue>(
 			return null;
 		}
 
-		const value = filterState[adapter.id];
+		const value = getValueByAdapterId(adapter.id);
 		const onChange = (newValue: TValue) => updateFilter(adapter.id, newValue);
 
 		return adapter.renderFilter(value, onChange);

package/src/components/ds-table/utils/story-data-generator.ts

@@ -43,23 +43,23 @@ export const generatePersonData = (
 	const statuses: Status[] = ['single', 'relationship', 'complicated'];
 
 	// Generate all data first for sorting
-	const allData: Person[] = Array.from({ length: totalRows }).map((_, index) => {
+	const allData = Array.from({ length: totalRows }).map((_, index) => {
 		const i = index + 1;
 		return {
 			id: i.toString(),
-			firstName: firstNames[i % firstNames.length],
-			lastName: lastNames[i % lastNames.length],
+			firstName: firstNames[i % firstNames.length] as string,
+			lastName: lastNames[i % lastNames.length] as string,
 			age: 20 + (i % 50),
 			visits: Math.floor(Math.random() * 500) + 1,
-			status: statuses[i % statuses.length],
+			status: statuses[i % statuses.length] as Status,
 			progress: Math.floor(Math.random() * 100) + 1,
-		};
+		} satisfies Person;
 	});
 
 	// Apply sorting if provided
 	const sortedData = [...allData];
-	if (sorting.length) {
-		const sort = sorting[0];
+	const sort = sorting[0];
+	if (sort) {
 		const { id, desc } = sort;
 		sortedData.sort((a, b) => {
 			const aValue = a[id as keyof Person];

package/src/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.module.scss

@@ -0,0 +1,18 @@
+$animation-duration: 0.2s;
+$animation-translate: -4px;
+
+.tabContent {
+	padding: var(--spacing-standard) 0;
+	animation: fadeIn $animation-duration ease-in;
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+		transform: translateY($animation-translate);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}

package/src/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.tsx

@@ -0,0 +1,12 @@
+import { Tabs } from '@ark-ui/react/tabs';
+import classNames from 'classnames';
+import type { DsTabsContentProps } from '../../ds-tabs.types';
+import styles from './ds-tabs-content.module.scss';
+
+export const DsTabsContent = ({ value, className, style, children }: DsTabsContentProps) => {
+	return (
+		<Tabs.Content value={value} className={classNames(styles.tabContent, className)} style={style}>
+			{children}
+		</Tabs.Content>
+	);
+};

package/src/components/ds-tabs/components/ds-tabs-content/index.ts

@@ -0,0 +1 @@
+export { DsTabsContent } from './ds-tabs-content';

package/src/components/ds-tabs/components/ds-tabs-list/ds-tabs-indicator.module.scss

@@ -0,0 +1,31 @@
+$indicator-border-radius: 4px;
+$indicator-thickness: 2px;
+$indicator-offset: -4px;
+$transition-duration: 0.2s;
+
+.indicator {
+	position: absolute;
+	background: var(--color-background-selected);
+	transition:
+		left $transition-duration ease-in-out,
+		top $transition-duration ease-in-out,
+		width $transition-duration ease-in-out,
+		height $transition-duration ease-in-out,
+		opacity $transition-duration ease-in-out;
+	border-radius: $indicator-border-radius;
+	pointer-events: none;
+
+	[data-orientation='horizontal'] & {
+		bottom: $indicator-offset;
+		height: $indicator-thickness;
+		left: var(--left);
+		width: var(--width);
+	}
+
+	[data-orientation='vertical'] & {
+		left: 0;
+		width: $indicator-thickness;
+		top: var(--top);
+		height: var(--height);
+	}
+}

package/src/components/ds-tabs/components/ds-tabs-list/ds-tabs-list.module.scss

@@ -0,0 +1,27 @@
+$border-width: 1px;
+
+.tabList {
+	display: flex;
+	position: relative;
+
+	[data-orientation='horizontal'] & {
+		flex-direction: row;
+		align-items: center;
+		border-bottom: $border-width solid var(--color-border-main);
+		gap: var(--spacing-xs);
+	}
+
+	[data-orientation='vertical'] & {
+		flex-direction: column;
+		align-items: stretch;
+		border-right: $border-width solid var(--color-border-main);
+	}
+
+	[data-orientation='vertical'][data-size='medium'] & {
+		gap: var(--spacing-xs);
+	}
+
+	[data-orientation='vertical'][data-size='small'] & {
+		gap: var(--spacing-3xs);
+	}
+}

package/src/components/ds-tabs/components/ds-tabs-list/ds-tabs-list.tsx

@@ -0,0 +1,14 @@
+import { Tabs } from '@ark-ui/react/tabs';
+import classNames from 'classnames';
+import type { DsTabsListProps } from '../../ds-tabs.types';
+import styles from './ds-tabs-list.module.scss';
+import indicatorStyles from './ds-tabs-indicator.module.scss';
+
+export const DsTabsList = ({ className, style, children }: DsTabsListProps) => {
+	return (
+		<Tabs.List className={classNames(styles.tabList, className)} style={style}>
+			{children}
+			<Tabs.Indicator className={indicatorStyles.indicator} />
+		</Tabs.List>
+	);
+};

package/src/components/ds-tabs/components/ds-tabs-list/index.ts

@@ -0,0 +1 @@
+export { DsTabsList } from './ds-tabs-list';