@drivenets/design-system 0.0.1

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

@@ -0,0 +1,239 @@
+import { useState } from 'react';
+import { type UseSelectReturn, Select, createListCollection, useSelect } from '@ark-ui/react/select';
+import { Portal } from '@ark-ui/react/portal';
+import classNames from 'classnames';
+import styles from './ds-select.module.scss';
+import type { DsSelectOption, DsSelectProps } from './ds-select.types';
+import { DsIcon } from '../ds-icon';
+import { type DsCheckboxProps, DsCheckbox } from '../ds-checkbox';
+import { SelectItemsChips } from './select-items-chips';
+import { DsTypography } from '../ds-typography';
+import { DsTextInput } from '../ds-text-input';
+
+const SEARCH_THRESHOLD = 13;
+const SELECT_ALL_VALUE = '__INTERNAL_SELECT_ALL_VALUE__';
+
+const SELECT_ALL: DsSelectOption = {
+	label: 'All',
+	value: SELECT_ALL_VALUE,
+};
+
+const DsSelect = ({
+	id,
+	options: userOptions,
+	value,
+	style,
+	size,
+	clearable,
+	onClear,
+	onBlur,
+	className,
+	placeholder = 'Click to select a value',
+	disabled,
+	...multiselectProps
+}: DsSelectProps) => {
+	const [searchTerm, setSearchTerm] = useState('');
+	const [showAllItems, setShowAllItems] = useState(false);
+
+	const internalOptions = multiselectProps.multiple ? [SELECT_ALL, ...userOptions] : userOptions;
+
+	const collection = createListCollection({
+		items: internalOptions,
+		itemToValue: (item) => item.value,
+	});
+
+	const filteredOptions = internalOptions.filter((option) =>
+		option.label.toLowerCase().includes(searchTerm.toLowerCase()),
+	);
+
+	const normalizedValue = Array.isArray(value) ? value : [value].filter((value) => !!value);
+
+	const select = useSelect({
+		collection,
+		disabled,
+		multiple: multiselectProps.multiple,
+		value: normalizedValue,
+
+		// Override Ark's auto-generated trigger id if an id provided by the user.
+		// See: https://github.com/chakra-ui/zag/blob/f6e079095/packages/machines/select/src/select.dom.ts#L5
+		ids: { trigger: id },
+
+		onOpenChange: () => {
+			setSearchTerm('');
+			setShowAllItems(false);
+		},
+
+		onValueChange: (details) => {
+			// Single select mode.
+			if (!multiselectProps.multiple) {
+				multiselectProps.onValueChange?.(details.value[0]);
+				return;
+			}
+
+			// "Select All" clicked in multi select mode.
+			const isSelectAllClicked = details.value.includes(SELECT_ALL_VALUE);
+
+			if (isSelectAllClicked) {
+				const areAllOptionsSelected = select.selectedItems.length === userOptions.length;
+
+				const newValues = areAllOptionsSelected ? [] : userOptions.map((opt) => opt.value);
+
+				multiselectProps.onValueChange?.(newValues);
+
+				return;
+			}
+
+			// "Regular" multi select mode.
+			const newValueWithoutSelectAll = details.value.filter((val) => val !== SELECT_ALL_VALUE);
+
+			multiselectProps.onValueChange?.(newValueWithoutSelectAll);
+		},
+	});
+
+	return (
+		<Select.RootProvider
+			value={select}
+			// When rendering the Select inside a Modal, it has an `aria-hidden="true"` attribute
+			// which causes screen readers to ignore it.
+			//
+			// See: https://github.com/chakra-ui/ark/issues/3728
+			lazyMount
+		>
+			<Select.Control
+				className={classNames(styles.control, size === 'small' && styles.small, className)}
+				style={style}
+				onBlur={onBlur}
+				onKeyDown={(e) => {
+					if (!clearable) {
+						return;
+					}
+
+					if (select.open) {
+						return;
+					}
+
+					if (e.key === 'Backspace' || e.key === 'Delete') {
+						if (multiselectProps.multiple) {
+							multiselectProps.onValueChange?.([]);
+						} else {
+							multiselectProps.onValueChange?.('');
+						}
+
+						onClear?.();
+					}
+				}}
+			>
+				<Select.Trigger
+					id={id}
+					className={styles.trigger}
+					// Ark expects a `Select.Label` component to exist and automatically label the trigger
+					// with it. We're using the `DsFormControl` label handling instead, so we disable the
+					// automatic labelling here.
+					aria-labelledby={null as never}
+				>
+					<DsTypography className={styles.valueText} variant="body-sm-reg" asChild>
+						<Select.ValueText placeholder={placeholder} />
+					</DsTypography>
+
+					<Select.Indicator className={styles.triggerIcon}>
+						<DsIcon icon="keyboard_arrow_down" size={size === 'small' ? 'small' : 'medium'} />
+					</Select.Indicator>
+				</Select.Trigger>
+
+				{clearable && (
+					<Select.ClearTrigger className={styles.clearIcon} onClick={onClear}>
+						<DsIcon icon="close" size={size === 'small' ? 'small' : 'medium'} />
+					</Select.ClearTrigger>
+				)}
+			</Select.Control>
+			<Portal>
+				<Select.Positioner className={styles.viewport}>
+					<Select.Content className={styles.content}>
+						{userOptions.length > SEARCH_THRESHOLD && (
+							<div className={styles.searchInput}>
+								<DsTextInput
+									placeholder="Search"
+									value={searchTerm}
+									onChange={(e) => setSearchTerm(e.target.value)}
+									onKeyDown={(e) => {
+										// Prevent the select from opening/closing when pressing space in the search input.
+										if (e.key === ' ') {
+											e.stopPropagation();
+										}
+									}}
+									slots={{
+										startAdornment: <DsIcon icon="search" size="tiny" />,
+									}}
+								/>
+							</div>
+						)}
+
+						{multiselectProps.multiple && (
+							<SelectItemsChips
+								onValueChange={multiselectProps.onValueChange}
+								showAll={showAllItems}
+								onShowAll={() => setShowAllItems(true)}
+								// TODO: Find a way to calculate this based on the size of the select.
+								count={6}
+							/>
+						)}
+
+						{filteredOptions.map((item) => {
+							const checked = getItemCheckedState({ item, select, options: internalOptions });
+
+							return (
+								<DsTypography
+									variant="body-sm-reg"
+									asChild
+									key={collection.getItemValue(item)}
+									className={styles.item}
+								>
+									<Select.Item item={item}>
+										{multiselectProps.multiple && <DsCheckbox checked={checked} />}
+										{item.icon && <DsIcon className={styles.itemIcon} icon={item.icon} aria-hidden="true" />}
+										<Select.ItemText>{item.label}</Select.ItemText>
+									</Select.Item>
+								</DsTypography>
+							);
+						})}
+					</Select.Content>
+				</Select.Positioner>
+			</Portal>
+
+			{/*
+				This element isn't properly hidden by Zag, so we hide it manually.
+			 	For more information, see: https://github.com/chakra-ui/zag/issues/2865
+			*/}
+			<Select.HiddenSelect style={{ display: 'none' }} />
+		</Select.RootProvider>
+	);
+};
+
+function getItemCheckedState({
+	item,
+	select,
+	options,
+}: {
+	item: DsSelectOption;
+	select: UseSelectReturn<DsSelectOption>;
+	options: DsSelectOption[];
+}): DsCheckboxProps['checked'] {
+	const isRegularItem = item.value !== SELECT_ALL_VALUE;
+
+	if (isRegularItem) {
+		return select.getItemState({ item }).selected;
+	}
+
+	// Doing -1 since it contains the "Select All" option itself.
+	const allSelected = select.selectedItems.length === options.length - 1;
+
+	if (allSelected) {
+		return true;
+	}
+
+	const someSelected = select.hasSelectedItems;
+
+	return someSelected ? 'indeterminate' : false;
+}
+
+export default DsSelect;

package/src/components/ds-select/ds-select.types.tsx

@@ -0,0 +1,80 @@
+import type React from 'react';
+import type { IconName } from '../ds-icon';
+
+export type SelectSize = 'default' | 'small';
+
+export interface DsSelectOption {
+	/**
+	 * Label to display in the select
+	 */
+	label: string;
+	/**
+	 * Value to return when the option is selected
+	 */
+	value: SelectOptionValue;
+	/**
+	 * Optional icon to display next to the label
+	 */
+	icon?: IconName;
+}
+
+export type SelectOptionValue = string;
+
+export type DsSelectProps = {
+	/**
+	 * Unique identifier for the select component
+	 */
+	id?: string;
+	/**
+	 * Options to display in the select dropdown
+	 */
+	options: DsSelectOption[];
+	/**
+	 * Additional styles to apply to the icon
+	 */
+	style?: React.CSSProperties;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Event handler called when the select loses focus
+	 *
+	 * @param event
+	 */
+	onBlur?: (event: React.FocusEvent) => void;
+	/**
+	 * Placeholder text to display when no option is selected
+	 */
+	placeholder?: string;
+	/**
+	 * Whether the select is disabled
+	 */
+	disabled?: boolean;
+	/**
+	 * The size of the select component
+	 * @default 'default'
+	 */
+	size?: SelectSize;
+} & (
+	| {
+			clearable?: undefined | false;
+			onClear?: never;
+	  }
+	| {
+			clearable: true;
+			onClear?: () => void;
+	  }
+) &
+	(
+		| {
+				multiple?: undefined | false;
+				value: SelectOptionValue;
+				onValueChange?: (value: SelectOptionValue) => void;
+		  }
+		| {
+				multiple: true;
+				value: SelectOptionValue[];
+				onValueChange?: (value: SelectOptionValue[]) => void;
+		  }
+	);

package/src/components/ds-select/index.tsx

@@ -0,0 +1,2 @@
+export { default as DsSelect } from './ds-select';
+export type { DsSelectProps, SelectSize, DsSelectOption } from './ds-select.types';

package/src/components/ds-select/select-items-chips.tsx

@@ -0,0 +1,56 @@
+import { useSelectContext, type UseSelectContext } from '@ark-ui/react/select';
+import styles from './ds-select.module.scss';
+import DsButton from '../ds-button/ds-button';
+import DsChip from '../ds-chip/ds-chip';
+import type { DsSelectOption, SelectOptionValue } from './ds-select.types';
+
+type SelectItemsChipsProps = {
+	showAll: boolean;
+	onValueChange?: (value: SelectOptionValue[]) => void;
+	onShowAll: () => void;
+	count: number;
+};
+
+export function SelectItemsChips({ showAll, onShowAll, onValueChange, count }: SelectItemsChipsProps) {
+	const { collection, value: selectedItems } = useSelectContext() as UseSelectContext<DsSelectOption>;
+
+	if (!selectedItems.length) {
+		return null;
+	}
+
+	const itemsToShow = showAll ? selectedItems : selectedItems.slice(0, count);
+
+	return (
+		<div className={styles.multiSelectItemsContainer}>
+			{itemsToShow.map((itemValue) => {
+				const item = collection.find(itemValue);
+
+				if (!item) {
+					return null;
+				}
+
+				const onDelete = () => {
+					const filteredValue = selectedItems.filter((v) => v !== item.value);
+
+					onValueChange?.(filteredValue);
+				};
+
+				return <DsChip key={itemValue} label={item.label} onDelete={onDelete} />;
+			})}
+
+			{!showAll && selectedItems.length > count && (
+				<DsChip label={`+${String(selectedItems.length - count)}`} onClick={onShowAll} size="small" />
+			)}
+
+			<DsButton
+				design="v1.2"
+				buttonType="tertiary"
+				variant="ghost"
+				size="small"
+				onClick={() => onValueChange?.([])}
+			>
+				Clear All
+			</DsButton>
+		</div>
+	);
+}

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

@@ -0,0 +1,69 @@
+@use '../../styles/typography';
+
+.container {
+	display: flex;
+	gap: 8px;
+
+	.tab {
+		@include typography.body-sm-reg;
+		@include typography.ellipsis;
+		display: flex;
+		height: 48px;
+		padding: var(--spacing-xs) var(--spacing-sm);
+		align-items: center;
+		gap: 8px;
+		border-radius: 4px;
+		border: 1px solid var(--color-border);
+		background: var(--color-background);
+		min-width: 250px;
+
+		&.active {
+			@include typography.body-sm-md;
+			border-color: var(--color-border-action-secondary);
+
+			.icon {
+				color: var(--color-background);
+				background: var(--tab-color, var(--color-background-action));
+			}
+
+			.value {
+				color: var(--color-font-main);
+			}
+		}
+
+		&:hover:not(.active):not(:disabled) {
+			border-color: var(--color-border-action-primary-hover);
+		}
+
+		&:focus {
+			outline: auto var(--color-border-action-primary-hover);
+		}
+
+		&.disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+
+		.icon {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			color: var(--color-background-action);
+			background: var(--color-background-tertiary);
+			border-radius: 50%;
+			width: var(--icon-width-extra-large);
+			height: var(--icon-width-extra-large);
+		}
+
+		.label {
+			flex: 1;
+			white-space: nowrap;
+			text-align: start;
+		}
+
+		.content {
+			padding-right: 4px;
+			color: var(--color-font-secondary);
+		}
+	}
+}

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

@@ -0,0 +1,113 @@
+import { type CSSProperties, createContext, useContext } from 'react';
+import type React from 'react';
+import classNames from 'classnames';
+import { DsIcon } from '../ds-icon';
+import styles from './ds-smart-tabs.module.scss';
+import type { Color, DsSmartTabProps, DsSmartTabsProps } from './ds-smart-tabs.types';
+
+const colorMap: Record<Color, string> = {
+	'dark-blue': 'var(--color-background-info-strong)',
+	'light-blue': 'var(--color-background-active-moderate)',
+	'dark-gray': 'var(--color-background-brand)',
+	green: 'var(--color-background-success-strong)',
+	fuchsia: 'var(--color-data-fuchsia)',
+	blue: 'var(--color-icon-information-secondary)',
+	gray: 'var(--color-icon-information-main)',
+	red: 'var(--color-icon-warning)',
+	amber: 'var(--color-data-amber)',
+};
+
+interface SmartTabsContextType {
+	activeTab: string;
+	onTabClick: (value: string) => void;
+}
+
+const SmartTabsContext = createContext<SmartTabsContextType | null>(null);
+
+const useSmartTabsContext = () => {
+	const context = useContext(SmartTabsContext);
+	if (!context) {
+		throw new Error('DsTab must be used within DsSmartTabs');
+	}
+	return context;
+};
+
+/**
+ * Individual tab component
+ */
+const DsSmartTab: React.FC<DsSmartTabProps> = ({
+	label,
+	value,
+	icon,
+	content,
+	color,
+	disabled,
+	className,
+	style = {},
+	...props
+}) => {
+	const { activeTab, onTabClick } = useSmartTabsContext();
+
+	const tabClass = classNames(
+		styles.tab,
+		{
+			[styles.active]: activeTab === value,
+			[styles.disabled]: disabled,
+		},
+		className,
+	);
+	const tabStyle = {
+		...style,
+		...(color && ({ '--tab-color': colorMap[color] } as CSSProperties)),
+	};
+
+	const handleClick = () => {
+		if (!disabled) {
+			onTabClick(value);
+		}
+	};
+
+	return (
+		<button
+			type="button"
+			className={tabClass}
+			style={tabStyle}
+			onClick={handleClick}
+			disabled={disabled}
+			{...props}
+		>
+			<DsIcon className={styles.icon} icon={icon} size="small" />
+			<span className={styles.label}>{label}</span>
+			<span className={styles.content}>{content}</span>
+		</button>
+	);
+};
+
+/**
+ * Design system SmartTabs component
+ */
+const DsSmartTabs = ({
+	activeTab,
+	onTabClick,
+	className,
+	style = {},
+	children,
+	...props
+}: DsSmartTabsProps) => {
+	const contextValue: SmartTabsContextType = {
+		activeTab,
+		onTabClick,
+	};
+
+	return (
+		<SmartTabsContext.Provider value={contextValue}>
+			<div className={classNames(styles.container, className)} style={style} {...props}>
+				{children}
+			</div>
+		</SmartTabsContext.Provider>
+	);
+};
+
+DsSmartTabs.Tab = DsSmartTab;
+
+export default DsSmartTabs;

package/src/components/ds-smart-tabs/ds-smart-tabs.types.tsx

@@ -0,0 +1,74 @@
+import type { ReactNode } from 'react';
+import type React from 'react';
+import type { IconType } from '../ds-icon/ds-icon.types';
+
+export const colors = [
+	'dark-blue',
+	'light-blue',
+	'dark-gray',
+	'green',
+	'fuchsia',
+	'blue',
+	'gray',
+	'red',
+	'amber',
+] as const;
+export type Color = (typeof colors)[number];
+
+export interface DsSmartTabProps {
+	/**
+	 * The label of the tab
+	 */
+	label: string;
+	/**
+	 * The value of the tab (used for filtering/identification)
+	 */
+	value: string;
+	/**
+	 * The icon to display in the tab
+	 */
+	icon: IconType;
+	/**
+	 * The content to display in the tab (typically a count or text)
+	 */
+	content: number | string;
+	/**
+	 * Color for the tab (limited to predefined color values)
+	 */
+	color?: Color;
+	/**
+	 * Whether the tab is disabled
+	 */
+	disabled?: boolean;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Additional styles to apply to the tab
+	 */
+	style?: React.CSSProperties;
+}
+
+export interface DsSmartTabsProps {
+	/**
+	 * Currently active tab value
+	 */
+	activeTab: string;
+	/**
+	 * Callback function when a tab is clicked
+	 */
+	onTabClick: (value: string) => void;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Additional styles to apply to the component
+	 */
+	style?: React.CSSProperties;
+	/**
+	 * The tab components as children
+	 */
+	children: ReactNode;
+}

package/src/components/ds-smart-tabs/index.tsx

@@ -0,0 +1,2 @@
+export { default as DsSmartTabs } from './ds-smart-tabs';
+export * from './ds-smart-tabs.types';

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

@@ -0,0 +1,39 @@
+@use '../../styles/typography';
+
+.spinnerContainer {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.progressCircle {
+	button &,
+	[role='button'] & {
+		width: 1em;
+		height: 1em;
+	}
+}
+
+.spin {
+	animation: spin 2s linear infinite;
+}
+
+.progressArc {
+	transition: stroke-dasharray 0.3s ease-in-out;
+	stroke: var(--color-background-selected);
+
+	button &,
+	[role='button'] & {
+		stroke: currentColor;
+	}
+}
+
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}