@drivenets/design-system 0.1.0 → 0.3.0

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';

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

@@ -0,0 +1,242 @@
+@use '../../../../styles/typography';
+
+$tab-border-width: 1px;
+$badge-height: 20px;
+$menu-content-width: 142px;
+$transition-duration: 0.2s;
+$disabled-opacity: 0.5;
+
+.tabItem {
+	@include typography.body-sm-reg;
+	display: inline-flex;
+	align-items: center;
+	background: var(--color-background);
+	border-radius: var(--exo-spacing-2x-small);
+	cursor: pointer;
+	transition:
+		background-color $transition-duration,
+		color $transition-duration,
+		border-color $transition-duration;
+	position: relative;
+	color: var(--color-font-main);
+	border: $tab-border-width solid transparent;
+	white-space: nowrap;
+
+	&:hover:not(:disabled):not([aria-selected='true']) {
+		background: var(--color-background-secondary);
+
+		.badge {
+			background: var(--color-background-tertiary);
+		}
+	}
+
+	&:active:not(:disabled):not([aria-selected='true']) {
+		background: var(--color-background-tertiary);
+
+		.badge {
+			background: var(--color-background-secondary);
+		}
+	}
+
+	&:focus-visible:not(:disabled):not([aria-selected='true']) {
+		border-color: var(--color-border-action-hover);
+		background: var(--color-background-secondary);
+		outline: none;
+
+		.badge {
+			background: var(--color-background-tertiary);
+		}
+	}
+
+	&:disabled {
+		cursor: not-allowed;
+		opacity: $disabled-opacity;
+		color: var(--color-font-disabled);
+	}
+
+	&[aria-selected='true'] {
+		@include typography.body-sm-md;
+		color: var(--color-background-selected);
+		background: var(--color-background);
+
+		.icon {
+			color: var(--color-background-selected);
+		}
+
+		.badge {
+			background: var(--color-background-action-secondary-hover);
+			color: var(--color-background-selected);
+		}
+
+		&:hover:not(:disabled) {
+			background: var(--color-background-selected-weak);
+		}
+
+		&:active:not(:disabled) {
+			background: var(--color-background-selected-weak);
+		}
+
+		&:focus-visible:not(:disabled) {
+			border-color: var(--color-background-selected);
+			background: var(--color-background-selected-weak);
+			outline: none;
+		}
+	}
+
+	// Horizontal orientation + size variants
+	[data-orientation='horizontal'] & {
+		flex-direction: row;
+		justify-content: center;
+		gap: var(--spacing-3xs);
+		flex: 0 0 auto;
+		width: auto;
+	}
+
+	[data-orientation='horizontal'][data-size='medium'] & {
+		padding: var(--spacing-xs) var(--spacing-sm);
+	}
+
+	[data-orientation='horizontal'][data-size='small'] & {
+		padding: var(--spacing-2xs) var(--spacing-sm);
+	}
+
+	// Vertical orientation + size variants
+	[data-orientation='vertical'] & {
+		flex-direction: row;
+		justify-content: flex-start;
+		gap: var(--spacing-3xs);
+		width: 100%;
+	}
+
+	[data-orientation='vertical'][data-size='medium'] & {
+		padding: var(--spacing-sm) var(--spacing-standard);
+		padding-left: var(--spacing-xs);
+		border-radius: var(--exo-spacing-2x-small) 0 0 var(--exo-spacing-2x-small);
+	}
+
+	[data-orientation='vertical'][data-size='small'] & {
+		padding: var(--spacing-xs) var(--spacing-standard);
+		padding-left: var(--spacing-xs);
+		border-radius: var(--exo-spacing-2x-small) 0 0 var(--exo-spacing-2x-small);
+	}
+}
+
+.icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--color-font-secondary);
+	flex-shrink: 0;
+}
+
+.label {
+	@include typography.body-sm-reg;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	flex: 1 1 auto;
+	min-width: 0;
+	text-align: left;
+
+	[aria-selected='true'] & {
+		@include typography.body-sm-md;
+	}
+}
+
+.menuTrigger {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	color: var(--color-font-main) !important;
+	cursor: pointer;
+	border-radius: var(--exo-spacing-2x-small);
+	transition:
+		background-color $transition-duration,
+		color $transition-duration;
+
+	&:hover {
+		background: var(--color-background-action-secondary);
+		color: var(--color-font-main);
+	}
+
+	&:active {
+		background: var(--color-background-tertiary);
+	}
+
+	&:focus-visible {
+		outline: var(--spacing-4xs) solid var(--color-border-action-hover);
+		outline-offset: var(--spacing-4xs);
+	}
+
+	[aria-selected='true'] & {
+		color: var(--color-background-selected);
+
+		&:hover {
+			background: var(--color-background);
+		}
+	}
+
+	[disabled] & {
+		opacity: $disabled-opacity;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+}
+
+.badge {
+	@include typography.body-xs-reg;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: $badge-height;
+	padding: 0 var(--spacing-2xs);
+	border-radius: var(--spacing-lg);
+	background: var(--color-background-secondary);
+	color: var(--color-font-main);
+	line-height: var(--line-height-xs);
+	flex-shrink: 0;
+}
+
+.menuContent {
+	background: var(--color-background);
+	border: $tab-border-width solid var(--color-border-secondary);
+	border-radius: var(--exo-spacing-2x-small);
+	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
+	padding: var(--spacing-3xs);
+	width: $menu-content-width;
+}
+
+.menuItem {
+	@include typography.body-sm-reg;
+	display: flex;
+	align-items: center;
+	padding: var(--spacing-3xs);
+	border-radius: var(--exo-spacing-2x-small);
+	cursor: pointer;
+	color: var(--color-font-main);
+	background: var(--color-background);
+	transition: background-color $transition-duration;
+	user-select: none;
+	white-space: nowrap;
+
+	&:hover {
+		background: var(--color-background-secondary);
+	}
+
+	&:active {
+		background: var(--color-background-tertiary);
+	}
+
+	&[data-disabled] {
+		opacity: $disabled-opacity;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+}
+
+.menuItemLabel {
+	flex: 1;
+	min-width: 0;
+	line-height: var(--line-height-sm);
+}