@drivenets/design-system 0.0.1

package/src/components/ds-expandable-text-input/ds-expandable-text-input.module.scss

@@ -0,0 +1,70 @@
+.expandableInput {
+	width: max-content;
+	transition: 0.3s padding;
+
+	&:not(.expanded) {
+		gap: 0;
+		padding-inline: var(--spacing-xs);
+	}
+
+	.trigger:focus {
+		outline: none;
+	}
+
+	// Increase the clickable area of the start adornment.
+	.trigger::before {
+		content: '';
+		display: block;
+		position: absolute;
+		inset: 0;
+		cursor: pointer;
+	}
+
+	&:has(:disabled) .trigger::before {
+		cursor: not-allowed;
+	}
+
+	&.expanded .trigger {
+		pointer-events: none;
+
+		&::before {
+			display: none;
+		}
+	}
+
+	.clearTrigger {
+		transition: 0.3s opacity;
+	}
+
+	&:not(.expanded) .clearTrigger {
+		display: none;
+	}
+
+	&:not(.dirty) .clearTrigger {
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	// See: https://css-tricks.com/css-grid-can-do-auto-height-transitions/
+	.inputExpander {
+		display: grid;
+		grid-template-columns: 0fr;
+		overflow: hidden;
+		transition: 0.3s grid-template-columns;
+
+		input {
+			min-width: 0;
+			opacity: 0;
+			transition: 0.15s opacity;
+		}
+	}
+
+	&.expanded .inputExpander {
+		grid-template-columns: 1fr;
+
+		input {
+			opacity: 1;
+			transition: 0.3s opacity 0.15s;
+		}
+	}
+}

package/src/components/ds-expandable-text-input/ds-expandable-text-input.tsx

@@ -0,0 +1,106 @@
+import { type ReactNode, useRef, useState } from 'react';
+import { DsTextInput } from '../ds-text-input';
+import { DsIcon } from '../ds-icon';
+import classNames from 'classnames';
+import styles from './ds-expandable-text-input.module.scss';
+import { mergeRefs } from '../ds-table/utils/merge-refs';
+import type { DsExpandableTextInputProps } from './ds-expandable-text-input.types';
+import { DsButton } from '../ds-button';
+
+export function DsExpandableTextInput({
+	onClear,
+	onExpandChange,
+	icon,
+	...props
+}: DsExpandableTextInputProps) {
+	const [expanded, _setExpanded] = useState(false);
+	const [dirty, setDirty] = useState(false);
+	const ref = useRef<HTMLInputElement>(null);
+
+	const setExpanded = (newExpanded: boolean) => {
+		_setExpanded(newExpanded);
+
+		onExpandChange?.(newExpanded);
+
+		if (!newExpanded) {
+			setDirty(false);
+		}
+	};
+
+	return (
+		<DsTextInput
+			{...props}
+			ref={mergeRefs(ref, props.ref)}
+			tabIndex={expanded ? 0 : -1}
+			className={classNames(
+				props.className,
+				styles.expandableInput,
+				expanded && styles.expanded,
+				dirty && styles.dirty,
+			)}
+			onChange={(e) => {
+				props.onChange?.(e);
+
+				setDirty(true);
+			}}
+			onBlur={(e) => {
+				props.onBlur?.(e);
+
+				if (!dirty && !ref.current?.value) {
+					setExpanded(false);
+				}
+			}}
+			slots={{
+				inputWrapper: InputExpander,
+				startAdornment: (
+					<button
+						type="button"
+						className={styles.trigger}
+						aria-label="Open text input"
+						aria-hidden={expanded}
+						tabIndex={expanded ? -1 : 0}
+						onClick={() => {
+							if (props.disabled) {
+								return;
+							}
+
+							setExpanded(true);
+
+							ref.current?.focus();
+						}}
+					>
+						<DsIcon icon={icon} size="small" />
+					</button>
+				),
+
+				endAdornment: (
+					<DsButton
+						design="v1.2"
+						size="small"
+						buttonType="tertiary"
+						variant="filled"
+						className={styles.clearTrigger}
+						onClick={() => {
+							setExpanded(false);
+
+							if (ref.current) {
+								ref.current.blur();
+
+								// Manually clear the input in uncontrolled mode.
+								ref.current.value = '';
+							}
+
+							onClear?.();
+						}}
+					>
+						Clear
+					</DsButton>
+				),
+			}}
+		/>
+	);
+}
+
+function InputExpander({ children }: { children: ReactNode }) {
+	return <div className={styles.inputExpander}>{children}</div>;
+}

package/src/components/ds-expandable-text-input/ds-expandable-text-input.types.tsx

@@ -0,0 +1,19 @@
+import type { IconType } from '../ds-icon';
+import type { DsTextInputProps } from '../ds-text-input';
+
+export interface DsExpandableTextInputProps extends Omit<DsTextInputProps, 'tabIndex' | 'slots'> {
+	/**
+	 * The icon to display inside the expandable input trigger button
+	 */
+	icon: IconType;
+
+	/**
+	 * Callback fired when the clear action is triggered
+	 */
+	onClear?: () => void;
+
+	/**
+	 * Callback fired when the expanded state changes
+	 */
+	onExpandChange?: (expanded: boolean) => void;
+}

package/src/components/ds-expandable-text-input/index.ts

@@ -0,0 +1,2 @@
+export { DsExpandableTextInput } from './ds-expandable-text-input';
+export type { DsExpandableTextInputProps } from './ds-expandable-text-input.types';

package/src/components/ds-file-upload/components/file-upload/file-upload.module.scss

@@ -0,0 +1,90 @@
+@use '../../../../styles/typography';
+
+.fileUploadRoot {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+}
+
+.dropzone {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: var(--exo-spacing-small) var(--exo-spacing-standard);
+	border: var(--exo-spacing-4x-small) dashed var(--color-border);
+	border-radius: var(--exo-spacing-2x-small);
+	background-color: var(--color-background);
+	transition: all 0.2s ease;
+	cursor: pointer;
+
+	&.dropzoneCompact {
+		flex-direction: row;
+		justify-content: space-between;
+
+		.dropzoneIcon {
+			display: none;
+		}
+
+		.dropzoneText {
+			padding: 0;
+		}
+	}
+
+	.dropzoneIcon {
+		color: var(--color-icon-secondary);
+	}
+
+	.dropzoneText {
+		color: var(--color-background-deselected);
+		text-align: center;
+		padding: var(--spacing-3xs) 0 var(--spacing-sm) 0;
+	}
+
+	[data-part='trigger'] {
+		align-self: center;
+	}
+
+	&:hover:not([data-disabled]) {
+		border-color: var(--color-background-selected);
+		background-color: var(--color-background-selected-weak);
+	}
+
+	&[data-dragging] {
+		border-color: var(--color-background-selected);
+		background-color: var(--color-background-selected-weak);
+		border-style: solid;
+	}
+
+	&[data-disabled] {
+		cursor: not-allowed;
+
+		.dropzoneIcon,
+		.dropzoneText {
+			color: var(--color-background-disable);
+		}
+	}
+}
+
+.fileList {
+	display: flex;
+	flex-direction: column;
+	gap: var(--exo-spacing-x-small);
+	margin-top: var(--exo-spacing-x-small);
+	padding: var(--spacing-xs);
+	border-radius: var(--exo-spacing-2x-small);
+	background: var(--color-background-secondary);
+}
+
+.infoText {
+	color: var(--color-font-secondary);
+	margin-top: var(--spacing-2xs);
+}
+
+.errorText {
+	color: var(--color-background-danger-strong);
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3xs);
+	margin-top: var(--spacing-2xs);
+}

package/src/components/ds-file-upload/components/file-upload/file-upload.tsx

@@ -0,0 +1,106 @@
+import type React from 'react';
+import classNames from 'classnames';
+import { FileUpload as ArkUiFileUpload } from '@ark-ui/react';
+import { DsIcon } from '../../../ds-icon';
+import { DsTypography } from '../../../ds-typography';
+import { DsButton } from '../../../ds-button';
+import { FileUploadItem } from '../file-upload-item';
+import type { FileUploadProps } from './file-upload.types';
+import { DEFAULT_ALLOWED_FILE_TYPES, DEFAULT_MAX_FILE_SIZE, DEFAULT_MAX_FILES } from '../../utils/constants';
+import { generateHelperText } from '../../utils/generate-helper-text';
+import { getMimeTypes } from '../../utils/accept-utils';
+import styles from './file-upload.module.scss';
+
+/**
+ * Design system base File Upload component
+ * Used in conjunction with the useFileUpload hook
+ */
+export const FileUpload: React.FC<FileUploadProps> = ({
+	style = {},
+	className,
+	files,
+	acceptedFiles,
+	errorText,
+	dropzoneText = 'Drag and drop files here or ',
+	triggerText = 'Select file...',
+	hideProgress = false,
+	disableDrop = false,
+	onFileAccept,
+	onFileReject,
+	onFileRemove,
+	onFileDelete,
+	onFileCancel,
+	onFileRetry,
+	accept = DEFAULT_ALLOWED_FILE_TYPES,
+	maxFiles = DEFAULT_MAX_FILES,
+	maxFileSize = DEFAULT_MAX_FILE_SIZE,
+	compact = false,
+	disabled = false,
+}) => {
+	const infoText = generateHelperText(accept, maxFileSize, maxFiles);
+
+	return (
+		<ArkUiFileUpload.Root
+			style={style}
+			className={classNames(styles.fileUploadRoot, className)}
+			maxFiles={maxFiles}
+			maxFileSize={maxFileSize}
+			accept={getMimeTypes(accept)}
+			disabled={disabled}
+			allowDrop={!disableDrop}
+			acceptedFiles={acceptedFiles}
+			onFileAccept={onFileAccept}
+			onFileReject={onFileReject}
+		>
+			<ArkUiFileUpload.Dropzone
+				className={classNames(styles.dropzone, {
+					[styles.dropzoneCompact]: compact,
+				})}
+			>
+				<DsIcon icon="upload" className={styles.dropzoneIcon} />
+				<DsTypography className={styles.dropzoneText} variant="body-xs-reg">
+					{dropzoneText}
+				</DsTypography>
+				<ArkUiFileUpload.Trigger asChild>
+					<DsButton design="v1.2" variant="ghost" size="small" disabled={disabled}>
+						{triggerText}
+					</DsButton>
+				</ArkUiFileUpload.Trigger>
+			</ArkUiFileUpload.Dropzone>
+
+			{infoText && !disabled && !errorText && (
+				<DsTypography className={styles.infoText} variant="body-xs-reg">
+					{infoText}
+				</DsTypography>
+			)}
+			{errorText && (
+				<DsTypography className={styles.errorText} variant="body-xs-reg">
+					<DsIcon icon="error" size="tiny" />
+					{errorText}
+				</DsTypography>
+			)}
+
+			{!!files?.length && (
+				<div className={styles.fileList}>
+					{files.map((uploadFile) => (
+						<FileUploadItem
+							key={uploadFile.id}
+							id={uploadFile.id}
+							name={uploadFile.name}
+							progress={uploadFile.progress}
+							hideProgress={hideProgress}
+							status={uploadFile.status}
+							errors={uploadFile.errors}
+							onRemove={onFileRemove}
+							onDelete={onFileDelete}
+							onCancel={onFileCancel}
+							onRetry={onFileRetry}
+						/>
+					))}
+				</div>
+			)}
+
+			<ArkUiFileUpload.HiddenInput />
+		</ArkUiFileUpload.Root>
+	);
+};

package/src/components/ds-file-upload/components/file-upload/file-upload.types.tsx

@@ -0,0 +1,94 @@
+import type { CSSProperties } from 'react';
+import type { FileUploadFileAcceptDetails, FileUploadFileRejectDetails } from '@ark-ui/react';
+import type { UploadedFile } from '../../ds-file-upload-api.types';
+import type { AcceptedFileType } from '../../types/accept-types';
+
+export interface FileUploadProps {
+	/**
+	 * Error text displayed when validation fails
+	 */
+	errorText?: string;
+	/**
+	 * Text displayed in the dropzone area
+	 */
+	dropzoneText?: string;
+	/**
+	 * Text for the upload trigger button
+	 */
+	triggerText?: string;
+	/**
+	 * Whether to hide upload progress
+	 * @default false
+	 */
+	hideProgress?: boolean;
+	/**
+	 * Whether to disable drag and drop functionality
+	 * @default false
+	 */
+	disableDrop?: boolean;
+	/**
+	 * The maximum number of files that can be uploaded
+	 */
+	maxFiles?: number;
+	/**
+	 * Maximum file size in bytes
+	 * @default 25MB
+	 */
+	maxFileSize?: number;
+	/**
+	 * Callback when files are accepted
+	 */
+	onFileAccept?: (details: FileUploadFileAcceptDetails) => void;
+	/**
+	 * Callback when files are rejected
+	 */
+	onFileReject?: (details: FileUploadFileRejectDetails) => void;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Additional styles
+	 */
+	style?: CSSProperties;
+	/**
+	 * The file types that are accepted
+	 * Use shorthand for common MIME types (extensions provided automatically)
+	 * or explicit form for custom types
+	 * @example ['application/pdf', 'image/png']
+	 * @example ['application/pdf', { mimeType: 'application/x-custom', extensions: ['.custom'] }]
+	 */
+	accept?: AcceptedFileType[];
+	/**
+	 * File states to display (managed externally)
+	 */
+	files?: UploadedFile[];
+	/**
+	 * Callback when files are removed
+	 */
+	onFileRemove?: (fileId: string) => void;
+	/**
+	 * Callback when files are deleted
+	 */
+	onFileDelete?: (fileId: string) => void;
+	/**
+	 * Callback when files upload is canceled
+	 */
+	onFileCancel?: (fileId: string) => void;
+	/**
+	 * Callback when files upload is retried
+	 */
+	onFileRetry?: (fileId: string) => void;
+	/**
+	 * Controlled accepted files
+	 */
+	acceptedFiles?: File[];
+	/**
+	 * Whether the file upload is disabled
+	 */
+	disabled?: boolean;
+	/**
+	 * Whether the file upload layout is compact (inline)
+	 */
+	compact?: boolean;
+}

package/src/components/ds-file-upload/components/file-upload/index.ts

@@ -0,0 +1,2 @@
+export { FileUpload } from './file-upload';
+export type { FileUploadProps } from './file-upload.types';

package/src/components/ds-file-upload/components/file-upload-item/file-upload-item.module.scss

@@ -0,0 +1,125 @@
+@use '../../../../styles/typography';
+
+.fileItem {
+	display: flex;
+	flex-direction: column;
+
+	.fileItemContent {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-2xs);
+		width: 100%;
+		background-color: var(--color-background);
+		padding: var(--spacing-4xs) var(--exo-spacing-x-small);
+		border: 1px solid transparent;
+		border-radius: var(--exo-spacing-2x-small);
+		transition: all 0.2s ease;
+
+		&:hover {
+			border-color: var(--color-border-secondary);
+		}
+
+		&[data-disabled] {
+			opacity: 0.5;
+		}
+
+		&.fileItemError {
+			background-color: var(--color-background-danger-weak);
+
+			.progressRange {
+				background: var(--color-background-danger-strong);
+			}
+		}
+
+		&.fileItemCompleted {
+			.progressRange {
+				background: var(--color-background-success-strong);
+			}
+		}
+
+		&.fileItemUploading {
+			.progressRange {
+				background: var(--color-background-selected);
+			}
+		}
+
+		&.fileItemInterrupted {
+			.progressRange {
+				background: var(--color-background-warning-strong);
+			}
+		}
+	}
+}
+
+.filePreview {
+	color: var(--color-background-deselected);
+}
+
+.fileInfo {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2xs);
+	flex: 1;
+	min-width: 0;
+}
+
+.fileName {
+	@include typography.body-sm-reg;
+	@include typography.ellipsis;
+	color: var(--color-font-main);
+	flex: 1 0 75%;
+}
+
+.progressContainer {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-xs);
+	width: 100%;
+}
+
+.progressBar {
+	width: 100%;
+	height: 2px;
+}
+
+.progressTrack {
+	width: 100%;
+	height: 100%;
+	background-color: var(--color-background-tertiary);
+	border-radius: var(--exo-spacing-2x-small);
+	overflow: hidden;
+}
+
+.progressRange {
+	height: 100%;
+	background-color: var(--color-background-selected);
+	border-radius: 2px;
+	transition: width 0.3s ease;
+}
+
+@mixin infoText {
+	@include typography.body-xs-reg;
+	display: flex;
+	gap: var(--spacing-3xs);
+	padding: var(--spacing-3xs) var(--spacing-sm);
+}
+
+.progressText {
+	@include infoText;
+	color: var(--color-font-secondary);
+}
+
+.completedText {
+	@include infoText;
+	color: var(--color-background-success-strong);
+}
+
+.interruptedText {
+	@include infoText;
+	color: var(--color-font-warning);
+}
+
+.errorMessage {
+	@include infoText;
+	color: var(--color-background-danger-strong);
+}