@drivenets/design-system 0.0.1

package/src/components/ds-file-upload/types/accept-types.ts

@@ -0,0 +1,106 @@
+/* cspell:disable */
+import type { FileUploadFileMimeType } from '@ark-ui/react';
+
+/**
+ * File extension with leading dot
+ * @example '.pdf', '.jpg', '.csv'
+ */
+export type FileExtension = `.${string}`;
+
+/**
+ * Accepted file type configuration
+ * - Use string shorthand for common MIME types (uses built-in extensions map)
+ * - Use object form to override or provide custom extensions
+ */
+export type AcceptedFileType =
+	| FileUploadFileMimeType
+	| {
+			mimeType: FileUploadFileMimeType;
+			extensions: [FileExtension, ...FileExtension[]];
+	  };
+
+/**
+ * Built-in extensions map for common MIME types
+ */
+export const EXTENSIONS_MAP: Record<FileUploadFileMimeType, FileExtension[]> = {
+	// Images - specific types
+	'image/png': ['.png'],
+	'image/gif': ['.gif'],
+	'image/jpeg': ['.jpg', '.jpeg'],
+	'image/svg+xml': ['.svg'],
+	'image/webp': ['.webp'],
+	'image/avif': ['.avif'],
+	'image/heic': ['.heic', '.heif'],
+	'image/bmp': ['.bmp'],
+
+	// Applications
+	'application/pdf': ['.pdf'],
+	'application/zip': ['.zip'],
+	'application/json': ['.json'],
+	'application/xml': ['.xml'],
+	'application/msword': ['.doc'],
+	'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'],
+	'application/vnd.ms-excel': ['.xls'],
+	'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
+	'application/vnd.ms-powerpoint': ['.ppt'],
+	'application/vnd.openxmlformats-officedocument.presentationml.presentation': ['.pptx'],
+	'application/rtf': ['.rtf'],
+	'application/x-rar': ['.rar'],
+	'application/x-7z-compressed': ['.7z'],
+	'application/x-tar': ['.tar'],
+	'application/vnd.microsoft.portable-executable': ['.exe', '.dll'],
+
+	// Text
+	'text/css': ['.css'],
+	'text/csv': ['.csv'],
+	'text/html': ['.html', '.htm'],
+	'text/markdown': ['.md', '.markdown'],
+	'text/plain': ['.txt'],
+
+	// Fonts
+	'font/ttf': ['.ttf'],
+	'font/otf': ['.otf'],
+	'font/woff': ['.woff'],
+	'font/woff2': ['.woff2'],
+	'font/eot': ['.eot'],
+	'font/svg': ['.svg'],
+
+	// Video
+	'video/mp4': ['.mp4'],
+	'video/webm': ['.webm'],
+	'video/ogg': ['.ogv'],
+	'video/quicktime': ['.mov'],
+	'video/x-msvideo': ['.avi'],
+
+	// Audio
+	'audio/mpeg': ['.mp3'],
+	'audio/ogg': ['.ogg', '.oga'],
+	'audio/wav': ['.wav'],
+	'audio/webm': ['.weba'],
+	'audio/aac': ['.aac'],
+	'audio/flac': ['.flac'],
+	'audio/x-m4a': ['.m4a'],
+
+	// Wildcards
+	'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg', '.bmp', '.avif', '.heic', '.heif'],
+	'audio/*': ['.mp3', '.wav', '.ogg', '.oga', '.m4a', '.flac', '.aac', '.weba'],
+	'video/*': ['.mp4', '.webm', '.ogv', '.mov', '.avi'],
+	'text/*': ['.txt', '.html', '.htm', '.css', '.csv', '.md', '.markdown'],
+	'application/*': [
+		'.pdf',
+		'.zip',
+		'.json',
+		'.xml',
+		'.doc',
+		'.docx',
+		'.xls',
+		'.xlsx',
+		'.ppt',
+		'.pptx',
+		'.rtf',
+		'.rar',
+		'.7z',
+		'.tar',
+	],
+	'font/*': ['.ttf', '.otf', '.woff', '.woff2', '.eot'],
+} as const;

package/src/components/ds-file-upload/utils/accept-utils.ts

@@ -0,0 +1,25 @@
+import type { FileUploadFileMimeType } from '@ark-ui/react';
+import { type AcceptedFileType, type FileExtension, EXTENSIONS_MAP } from '../types/accept-types';
+
+/**
+ * Extract file extensions from accept configuration
+ * @param accept Array of accepted file types
+ * @returns Array of file extensions
+ */
+export function getFileExtensions(accept: AcceptedFileType[]): FileExtension[] {
+	return accept.flatMap((item) => {
+		if (typeof item === 'string') {
+			return EXTENSIONS_MAP[item] ?? [];
+		}
+		return item.extensions;
+	});
+}
+
+/**
+ * Extract MIME types from accept configuration
+ * @param accept Array of accepted file types
+ * @returns Array of MIME types
+ */
+export function getMimeTypes(accept: AcceptedFileType[]): FileUploadFileMimeType[] {
+	return accept.map((item) => (typeof item === 'string' ? item : item.mimeType));
+}

package/src/components/ds-file-upload/utils/constants.ts

@@ -0,0 +1,21 @@
+import type { AcceptedFileType } from '../types/accept-types';
+
+/**
+ * Default allowed file types for the file upload component
+ */
+export const DEFAULT_ALLOWED_FILE_TYPES: AcceptedFileType[] = [
+	'application/pdf',
+	'text/csv',
+	'application/zip',
+	'application/x-zip-compressed',
+];
+
+/**
+ * Default maximum file size in bytes (25MB)
+ */
+export const DEFAULT_MAX_FILE_SIZE = 25_000_000;
+
+/**
+ * Default maximum number of files allowed
+ */
+export const DEFAULT_MAX_FILES = 5;

package/src/components/ds-file-upload/utils/file-factory.ts

@@ -0,0 +1,18 @@
+import type { FileError, UploadedFile, UploadFileStatus } from '../ds-file-upload-api.types';
+
+/**
+ * Creates an UploadedFile object from a File with additional metadata
+ */
+export function createUploadedFile(file: File, status: UploadFileStatus, errors?: FileError[]): UploadedFile {
+	return {
+		// eslint-disable-next-line @typescript-eslint/no-misused-spread -- We're fine with losing the prototype here
+		...file,
+		id: `${file.name}-${String(Date.now())}-${String(Math.random())}`,
+		name: file.name,
+		size: file.size,
+		type: file.type,
+		progress: 0,
+		status,
+		errors,
+	} satisfies UploadedFile;
+}

package/src/components/ds-file-upload/utils/format-file-size.ts

@@ -0,0 +1,15 @@
+/**
+ * Format file size to human-readable format using SI units (decimal base)
+ */
+export function formatFileSize(bytes: number): string {
+	if (bytes === 0) {
+		return '0 B';
+	}
+
+	const k = 1000; // Decimal base (SI standard)
+	const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+	const size = bytes / Math.pow(k, i);
+
+	return `${size.toFixed(2)} ${sizes[i]}`;
+}

package/src/components/ds-file-upload/utils/generate-helper-text.ts

@@ -0,0 +1,39 @@
+import type { AcceptedFileType } from '../types/accept-types';
+import { getFileExtensions } from './accept-utils';
+import { formatFileSize } from './format-file-size';
+
+/**
+ * Generate helper text based on validation props
+ */
+export function generateHelperText(
+	accept: AcceptedFileType[],
+	maxFileSize: number,
+	maxFiles: number,
+): string {
+	// Extract file extensions from accept configuration
+	const extensions = getFileExtensions(accept);
+	const uniqueExtensions = [...new Set(extensions)];
+	const fileTypes = uniqueExtensions.map((ext) => ext.toUpperCase()).join(', ');
+
+	// Format file size
+	const maxSizeText = formatFileSize(maxFileSize);
+
+	// Build helper text
+	const parts: string[] = [];
+
+	if (fileTypes) {
+		parts.push(`Only ${fileTypes} files`);
+	}
+
+	if (maxFileSize < Infinity) {
+		parts.push(`File size ${maxSizeText} max`);
+	}
+
+	if (maxFiles === 1) {
+		parts.push('Only 1 file');
+	} else if (maxFiles > 1) {
+		parts.push(`Up to ${String(maxFiles)} files`);
+	}
+
+	return parts.join('. ') + '.';
+}

package/src/components/ds-file-upload/utils/get-error-message.ts

@@ -0,0 +1,17 @@
+import type { FileError } from '../ds-file-upload-api.types';
+
+const FILE_ERROR_MESSAGES: Record<FileError, string> = {
+	FILE_TOO_LARGE: 'File size exceeds the maximum limit',
+	FILE_INVALID_TYPE: 'File type is not allowed',
+	TOO_MANY_FILES: 'Too many files selected',
+	FILE_TOO_SMALL: 'File size is too small',
+	FILE_INVALID: 'File is invalid',
+	FILE_EXISTS: 'File already exists',
+};
+
+/**
+ * Map FileUploadFileError to user-friendly error message
+ */
+export function getErrorMessage(error: FileError): string {
+	return FILE_ERROR_MESSAGES[error] || error || 'File validation failed';
+}

package/src/components/ds-file-upload/utils/is-file-equal.ts

@@ -0,0 +1,8 @@
+/**
+ * Check if two files are equal based on name, size, and type
+ *
+ * @see https://github.com/chakra-ui/zag/blob/698fff1d2/packages/utilities/file-utils/src/is-file-equal.ts
+ */
+export function isFileEqual(file1: File, file2: File): boolean {
+	return file1.name === file2.name && file1.size === file2.size && file1.type === file2.type;
+}

package/src/components/ds-form-control/ds-form-control.module.scss

@@ -0,0 +1,135 @@
+@use '../../styles/typography';
+
+$form-control-description-max-lines: 2;
+$form-control-description-line-height: 1.4;
+$form-control-description-max-height: calc(
+	$form-control-description-line-height * $form-control-description-max-lines * 1em
+);
+
+.container {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4xs);
+
+	&.success {
+		.message {
+			color: var(--color-background-success-strong);
+		}
+	}
+
+	&.warning {
+		.message {
+			color: var(--color-font-warning);
+		}
+	}
+
+	&.error {
+		--form-control-border-color: var(--color-background-danger-strong);
+		--form-control-selection-color: var(--color-background-danger-weak);
+
+		.message {
+			color: var(--color-background-danger-strong);
+		}
+	}
+}
+
+.labelContainer {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4xs);
+}
+
+.label {
+	@include typography.body-sm-reg;
+	color: var(--color-font-main);
+
+	&.required::after {
+		@include typography.body-sm-reg;
+		content: '*';
+		position: relative;
+		top: -1px;
+		right: -1px;
+		color: var(--color-icon-danger);
+	}
+
+	&.disabled {
+		color: var(--color-background-disabled);
+
+		&::after {
+			color: var(--color-font-disabled);
+		}
+	}
+}
+
+.endAdornment {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.description {
+	@include typography.p-s;
+	color: var(--neutral-2);
+	line-height: $form-control-description-line-height;
+	max-height: $form-control-description-max-height;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: $form-control-description-max-lines;
+	-webkit-box-orient: vertical;
+	word-wrap: break-word;
+}
+
+.controlWrapper {
+	position: relative;
+
+	&.input {
+		.control {
+			padding: 7px 16px;
+			line-height: 24px;
+			font-style: normal;
+		}
+
+		.icon {
+			top: 50%;
+			transform: translateY(-50%);
+		}
+	}
+
+	&.textarea {
+		.control {
+			padding: 12px 16px;
+			min-height: 100px;
+
+			&:disabled {
+				resize: none;
+			}
+		}
+
+		.icon {
+			top: 10px;
+		}
+	}
+
+	.control.withIcon {
+		padding-left: 40px;
+	}
+
+	.icon {
+		position: absolute;
+		pointer-events: none;
+		color: var(--neutral-3);
+	}
+
+	.icon {
+		left: 12px;
+	}
+}
+
+.message {
+	@include typography.body-xs-reg;
+	color: var(--color-font-secondary);
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	padding-top: 2px;
+}

package/src/components/ds-form-control/ds-form-control.tsx

@@ -0,0 +1,94 @@
+import { type ComponentType, createContext, useContext, useId } from 'react';
+import type React from 'react';
+import classNames from 'classnames';
+import { DsIcon } from '../ds-icon';
+import { DsSelect } from '../ds-select';
+import { DsTextInput } from '../ds-text-input';
+import { DsTextarea } from '../ds-textarea';
+import { DsNumberInput } from '../ds-number-input';
+import { DsPasswordInput } from '../ds-password-input';
+import type { DsFormControlDescriptionProps, DsFormControlProps } from './ds-form-control.types';
+import styles from './ds-form-control.module.scss';
+
+const FormControlContext = createContext<{ controlId: string } | null>(null);
+
+const useFormControlContext = () => {
+	const context = useContext(FormControlContext);
+	if (!context) {
+		throw new Error('useFormControlContext must be used within DsFormControl');
+	}
+	return context;
+};
+
+/**
+ * HOC that automatically injects the controlId from form control context
+ * into any component that expects an 'id' prop.
+ *
+ * @param Component - The component to wrap with form control context
+ * @returns A new component that automatically receives the controlId
+ */
+const controlify = <TProps extends { id?: string }>(Component: ComponentType<TProps>) => {
+	return function WrappedFormControl(props: TProps) {
+		const { controlId } = useFormControlContext();
+		return <Component id={controlId} {...props} />;
+	};
+};
+
+const DsFormControlDescription: React.FC<DsFormControlDescriptionProps> = ({ children, className }) => {
+	return <div className={classNames(styles.description, className)}>{children}</div>;
+};
+
+const DsFormControl = ({
+	id,
+	status,
+	label,
+	required = false,
+	slots,
+	message,
+	messageIcon = 'info',
+	className,
+	style,
+	children,
+}: DsFormControlProps) => {
+	const generatedId = useId();
+	const controlId = id || generatedId;
+
+	return (
+		<FormControlContext.Provider value={{ controlId }}>
+			<div
+				className={classNames(styles.container, status && message && styles[status], className)}
+				style={style}
+			>
+				<div className={styles.labelContainer}>
+					<label
+						htmlFor={controlId}
+						className={classNames(styles.label, {
+							[styles.required]: required,
+						})}
+					>
+						{label}
+					</label>
+					{slots?.endAdornment && <div className={styles.endAdornment}>{slots.endAdornment}</div>}
+				</div>
+
+				{children}
+
+				{message && (
+					<div className={styles.message}>
+						<DsIcon icon={messageIcon} size="tiny" filled />
+						<span className={styles.messageText}>{message}</span>
+					</div>
+				)}
+			</div>
+		</FormControlContext.Provider>
+	);
+};
+
+DsFormControl.TextInput = controlify(DsTextInput);
+DsFormControl.NumberInput = controlify(DsNumberInput);
+DsFormControl.PasswordInput = controlify(DsPasswordInput);
+DsFormControl.Textarea = controlify(DsTextarea);
+DsFormControl.Select = controlify(DsSelect);
+DsFormControl.Description = DsFormControlDescription;
+
+export default DsFormControl;

package/src/components/ds-form-control/ds-form-control.types.tsx

@@ -0,0 +1,58 @@
+import type React from 'react';
+import type { IconType } from '../ds-icon';
+
+export const controlStatuses = ['info', 'success', 'error', 'warning'] as const;
+export type ControlStatus = (typeof controlStatuses)[number];
+
+export interface DsFormControlProps extends React.PropsWithChildren {
+	/**
+	 * Unique identifier for the control
+	 */
+	id?: string;
+	/**
+	 * Visual status
+	 */
+	status?: ControlStatus;
+	/**
+	 * Label text
+	 */
+	label: string;
+	/**
+	 * Marks the field as required
+	 */
+	required?: boolean;
+
+	slots?: {
+		/**
+		 * Adornment to display at the end of the label
+		 */
+		endAdornment?: React.ReactNode;
+	};
+	/**
+	 * Message under the control
+	 */
+	message?: string;
+	/**
+	 * Icon shown next to message
+	 */
+	messageIcon?: IconType;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Additional styles to apply to the component
+	 */
+	style?: React.CSSProperties;
+}
+
+export interface DsFormControlDescriptionProps {
+	/**
+	 * The description content
+	 */
+	children: React.ReactNode;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+}

package/src/components/ds-form-control/index.tsx

@@ -0,0 +1,2 @@
+export { default as DsFormControl } from './ds-form-control';
+export * from './ds-form-control.types';

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

@@ -0,0 +1,43 @@
+import type React from 'react';
+import classNames from 'classnames';
+import type { DsGridItemProps, DsGridProps } from './ds-grid.types';
+
+/**
+ * Design system Grid component
+ */
+export const DsGrid: React.FC<DsGridProps> = ({ children, columns, rows, className }) => {
+	const gridClass = classNames(
+		'ds-grid',
+		{
+			[`ds-grid-cols-${String(columns)}`]: columns,
+			[`ds-grid-rows-${String(rows)}`]: rows,
+		},
+		className,
+	);
+
+	return <div className={gridClass}>{children}</div>;
+};
+
+/**
+ * Design system GridItem component
+ */
+export const DsGridItem: React.FC<DsGridItemProps> = ({
+	children,
+	colSpan,
+	colStart,
+	rowSpan,
+	rowStart,
+	className,
+}) => {
+	const gridItemClass = classNames(
+		{
+			[`ds-grid-col-span-${String(colSpan)}`]: colSpan,
+			[`ds-grid-col-start-${String(colStart)}`]: colStart,
+			[`ds-grid-row-span-${String(rowSpan)}`]: rowSpan,
+			[`ds-grid-row-start-${String(rowStart)}`]: rowStart,
+		},
+		className,
+	);
+
+	return <div className={gridItemClass}>{children}</div>;
+};

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

@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react';
+
+export interface DsGridProps {
+	/**
+	 * The content to be rendered inside the grid
+	 */
+	children: ReactNode;
+
+	/**
+	 * Number of rows in the grid (defaults to 1)
+	 */
+	rows?: 1 | 2 | 4 | 6 | 8;
+
+	/**
+	 * Number of columns in the grid (defaults to 12)
+	 */
+	columns?: 2 | 4 | 6 | 8 | 10 | 12;
+
+	/**
+	 * Custom class names to apply to the grid
+	 */
+	className?: string;
+}
+
+export interface DsGridItemProps {
+	/**
+	 * The content to be rendered inside the grid item
+	 */
+	children: ReactNode;
+
+	/**
+	 * Number of columns the item spans (1-12) or 'full'
+	 */
+	colSpan?: number | 'full';
+
+	/**
+	 * Starting column for the item (1-11)
+	 */
+	colStart?: number;
+
+	/**
+	 * Number of rows the item spans (1-8) or 'full'
+	 */
+	rowSpan?: number | 'full';
+
+	/**
+	 * Starting row for the item (1-7)
+	 */
+	rowStart?: number;
+
+	/**
+	 * Custom class names to apply to the grid item
+	 */
+	className?: string;
+}

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

@@ -0,0 +1,2 @@
+export * from './ds-grid';
+export * from './ds-grid.types';

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

@@ -0,0 +1,25 @@
+.icon {
+	&.extra-large {
+		font-size: var(--icon-width-extra-large);
+	}
+
+	&.large {
+		font-size: var(--icon-width-large);
+	}
+
+	&.medium {
+		font-size: var(--icon-width-medium);
+	}
+
+	&.small {
+		font-size: var(--icon-width-small);
+	}
+
+	&.tiny {
+		font-size: var(--icon-width-tiny);
+	}
+}
+
+.filled {
+	font-variation-settings: 'FILL' 1;
+}