@drivenets/design-system 0.19.0 → 0.20.0

package/src/components/ds-code-input/ds-code-input.types.ts

@@ -0,0 +1,166 @@
+import type React from 'react';
+
+export const codeInputSizes = ['small', 'default', 'large'] as const;
+export type CodeInputSize = (typeof codeInputSizes)[number];
+
+export interface DsCodeInputProps {
+	/**
+	 * Associates the editor with a `<label htmlFor>`. When set, the expanded
+	 * textarea keeps that name instead of `locale.codeLabel`.
+	 */
+	id?: string;
+	/**
+	 * The ref to the editor textarea
+	 */
+	ref?: React.Ref<HTMLTextAreaElement>;
+	/**
+	 * The name of the input
+	 */
+	name?: string;
+	/**
+	 * @default default
+	 */
+	size?: CodeInputSize;
+	/**
+	 * The current value. Shared by the collapsed viewport and the overlay.
+	 */
+	value?: string;
+	/**
+	 * The initial value when rendered.
+	 * Use when you don't need to control the value of the input.
+	 */
+	defaultValue?: string;
+	/**
+	 * The placeholder text
+	 */
+	placeholder?: string;
+	/**
+	 * Whether the input is disabled. The overlay still opens so long values stay searchable.
+	 * @default false
+	 */
+	disabled?: boolean;
+	/**
+	 * Whether the value is read only. The overlay still opens so long values stay searchable.
+	 * @default false
+	 */
+	readOnly?: boolean;
+	/**
+	 * Shows the error border and sets `aria-invalid`. Point `aria-describedby` at the message.
+	 * @default false
+	 */
+	invalid?: boolean;
+	/**
+	 * Id of an element that describes the value, such as an error message
+	 */
+	'aria-describedby'?: string;
+	/**
+	 * Whether the overlay is open. Pair with `onExpandChange`.
+	 */
+	expanded?: boolean;
+	/**
+	 * Initial overlay state when uncontrolled.
+	 * @default false
+	 */
+	defaultExpanded?: boolean;
+	/**
+	 * Fires when the overlay opens or closes
+	 */
+	onExpandChange?: (expanded: boolean) => void;
+	/**
+	 * Callback when the value changes
+	 */
+	onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+	/**
+	 * Value change event handler (provides just the value)
+	 */
+	onValueChange?: (value: string) => void;
+	/**
+	 * Event handler called when the editor receives focus
+	 */
+	onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+	/**
+	 * Event handler called when the editor loses focus
+	 */
+	onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+	/**
+	 * The maximum number of characters
+	 */
+	maxLength?: number;
+	/**
+	 * User-facing strings
+	 */
+	locale?: DsCodeInputLocale;
+	/**
+	 * Optional render slots for customizing parts of the collapsed field.
+	 */
+	slots?: {
+		/**
+		 * Adornment to display after the expand button
+		 */
+		endAdornment?: React.ReactNode;
+	};
+	className?: string;
+	style?: React.CSSProperties;
+}
+
+export interface DsCodeInputLocale {
+	/**
+	 * Accessible name of the button that opens the overlay
+	 * @default 'Expand code editor'
+	 */
+	expand?: string;
+	/**
+	 * Accessible name of the button that closes the overlay
+	 * @default 'Collapse code editor'
+	 */
+	collapse?: string;
+	/**
+	 * @default 'Search in code'
+	 */
+	searchPlaceholder?: string;
+	/**
+	 * Accessible name of the overlay when the compact field is inert
+	 * @default 'Code'
+	 */
+	codeLabel?: string;
+	/**
+	 * Visual label for hidden logical lines. Receives the additional-line count.
+	 * @default (count) => `↵ +${count}`
+	 */
+	additionalLines?: (count: number) => string;
+	/**
+	 * Accessible name for hidden logical lines. Receives the additional-line count.
+	 * @default (count) => `${count} additional code lines`
+	 */
+	additionalLinesLabel?: (count: number) => string;
+	/**
+	 * Visual focused line indicator. Receives the visible line and the total.
+	 * @default (current, total) => `Ln ${current}/${total}`
+	 */
+	linePosition?: (current: number, total: number) => string;
+	/**
+	 * Accessible description while collapsed and multiline.
+	 * @default (total) => `Multiline code, ${total} lines. Only one line is visible. Expand to view the complete code.`
+	 */
+	multilineDescription?: (total: number) => string;
+	/**
+	 * Accessible description while focused on a hidden line.
+	 * @default (current, total) => `Line ${current} of ${total}; other code lines are hidden.`
+	 */
+	linePositionDescription?: (current: number, total: number) => string;
+	/**
+	 * Visual status when a selection spans hidden lines.
+	 * @default (selected, total) => `${selected} lines selected · ${total} total`
+	 */
+	selectionStatus?: (selected: number, total: number) => string;
+	/**
+	 * Announced once when the overlay opens. Receives the logical line count.
+	 * @default (total) => `Code editor expanded, ${total} lines.`
+	 */
+	expandedAnnouncement?: (total: number) => string;
+	/**
+	 * Announced once when the overlay closes
+	 * @default 'Code editor collapsed'
+	 */
+	collapsedAnnouncement?: string;
+}

package/src/components/ds-code-input/ds-code-input.utils.ts

@@ -0,0 +1,94 @@
+export type TextSelectionDirection = 'forward' | 'backward' | 'none';
+
+export interface TextSelection {
+	start: number;
+	end: number;
+	direction: TextSelectionDirection;
+}
+
+const CANVAS_TAB_SIZE_FALLBACK = 2;
+
+let measureContext: CanvasRenderingContext2D | null | undefined;
+
+export const canonicalizeLf = (text: string) => text.replace(/\r\n?/g, '\n');
+
+const getLogicalLines = (text: string) => canonicalizeLf(text).split('\n');
+
+export const getLogicalLineCount = (text: string) => getLogicalLines(text).length;
+
+export const getAdditionalLineCount = (text: string) => Math.max(0, getLogicalLineCount(text) - 1);
+
+export const getLineAtIndex = (text: string, lineIndex: number) => getLogicalLines(text)[lineIndex] ?? '';
+
+export const getLineIndexAtOffset = (text: string, offset: number) => {
+	const lf = canonicalizeLf(text);
+	const clamped = Math.min(Math.max(offset, 0), lf.length);
+
+	return lf.slice(0, clamped).split('\n').length - 1;
+};
+
+export const getSelectedLineCount = (text: string, start: number, end: number) => {
+	if (start === end) {
+		return 0;
+	}
+
+	const from = Math.min(start, end);
+	const to = Math.max(start, end);
+
+	return getLineIndexAtOffset(text, to) - getLineIndexAtOffset(text, from) + 1;
+};
+
+export const readTextSelection = (element: HTMLTextAreaElement): TextSelection => ({
+	start: element.selectionStart,
+	end: element.selectionEnd,
+	direction: element.selectionDirection,
+});
+
+export const applyTextSelection = (element: HTMLTextAreaElement, selection: TextSelection) => {
+	const length = element.value.length;
+	const start = Math.min(selection.start, length);
+	const end = Math.min(selection.end, length);
+
+	element.setSelectionRange(start, end, selection.direction);
+};
+
+const getLineHeight = (element: HTMLTextAreaElement) => {
+	const parsed = Number.parseFloat(getComputedStyle(element).lineHeight);
+
+	if (Number.isFinite(parsed)) {
+		return parsed;
+	}
+
+	return Number.parseFloat(getComputedStyle(element).fontSize);
+};
+
+export const scrollToLogicalLine = (element: HTMLTextAreaElement, lineIndex: number) => {
+	element.scrollTop = Math.max(0, lineIndex) * getLineHeight(element);
+};
+
+export const getVisibleLineIndex = (element: HTMLTextAreaElement) => {
+	const lineHeight = getLineHeight(element);
+
+	if (lineHeight <= 0) {
+		return 0;
+	}
+
+	return Math.round(element.scrollTop / lineHeight);
+};
+
+export const measureTextWidth = (element: HTMLElement, text: string) => {
+	if (measureContext === undefined) {
+		measureContext = document.createElement('canvas').getContext('2d');
+	}
+
+	if (!measureContext) {
+		return 0;
+	}
+
+	const computed = getComputedStyle(element);
+	const tabSize = Number.parseInt(computed.tabSize, 10) || CANVAS_TAB_SIZE_FALLBACK;
+
+	measureContext.font = `${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`;
+
+	return measureContext.measureText(text.replaceAll('\t', ' '.repeat(tabSize))).width;
+};

package/src/components/ds-code-input/ds-code-input.utils.unit.test.ts

@@ -0,0 +1,166 @@
+import { describe, expect, it, vi } from 'vitest';
+import {
+	applyTextSelection,
+	canonicalizeLf,
+	getAdditionalLineCount,
+	getLineAtIndex,
+	getLineIndexAtOffset,
+	getLogicalLineCount,
+	getSelectedLineCount,
+	type TextSelection,
+} from './ds-code-input.utils';
+
+const multiline = 'SELECT *\nFROM devices\nWHERE id = 1';
+
+const stubTextarea = (value: string) => {
+	const setSelectionRange = vi.fn();
+
+	return {
+		element: { value, setSelectionRange } as unknown as HTMLTextAreaElement,
+		setSelectionRange,
+	};
+};
+
+describe('canonicalizeLf', () => {
+	it('rewrites CRLF to LF', () => {
+		expect(canonicalizeLf('a\r\nb')).toBe('a\nb');
+	});
+
+	it('rewrites a lone CR to LF', () => {
+		expect(canonicalizeLf('a\rb')).toBe('a\nb');
+	});
+
+	it('leaves LF unchanged', () => {
+		expect(canonicalizeLf('a\nb')).toBe('a\nb');
+	});
+
+	it('normalizes mixed endings in one string', () => {
+		expect(canonicalizeLf('a\r\nb\rc\nd')).toBe('a\nb\nc\nd');
+	});
+});
+
+describe('getLogicalLineCount', () => {
+	it('counts an empty string as one logical line', () => {
+		expect(getLogicalLineCount('')).toBe(1);
+	});
+
+	it('counts a trailing newline as an extra empty line', () => {
+		expect(getLogicalLineCount('a\n')).toBe(2);
+	});
+
+	it('counts each logical line in multiline text', () => {
+		expect(getLogicalLineCount(multiline)).toBe(3);
+	});
+});
+
+describe('getAdditionalLineCount', () => {
+	it('is zero for a single line, including empty text', () => {
+		expect(getAdditionalLineCount('')).toBe(0);
+		expect(getAdditionalLineCount('SELECT *')).toBe(0);
+	});
+
+	it('is the number of lines beyond the first', () => {
+		expect(getAdditionalLineCount('a\n')).toBe(1);
+		expect(getAdditionalLineCount(multiline)).toBe(2);
+	});
+});
+
+describe('getLineAtIndex', () => {
+	it('returns the line at a valid index', () => {
+		expect(getLineAtIndex(multiline, 0)).toBe('SELECT *');
+		expect(getLineAtIndex(multiline, 1)).toBe('FROM devices');
+		expect(getLineAtIndex(multiline, 2)).toBe('WHERE id = 1');
+	});
+
+	it('returns an empty string when the index is out of range', () => {
+		expect(getLineAtIndex(multiline, -1)).toBe('');
+		expect(getLineAtIndex(multiline, 3)).toBe('');
+	});
+
+	it('splits CRLF text on logical lines', () => {
+		expect(getLineAtIndex('hello\r\nworld', 0)).toBe('hello');
+		expect(getLineAtIndex('hello\r\nworld', 1)).toBe('world');
+	});
+});
+
+describe('getLineIndexAtOffset', () => {
+	const text = 'hello\nworld';
+
+	it('returns the first line at the start of the text', () => {
+		expect(getLineIndexAtOffset(text, 0)).toBe(0);
+	});
+
+	it('stays on the previous line when the offset sits on a newline', () => {
+		expect(getLineIndexAtOffset(text, 5)).toBe(0);
+	});
+
+	it('moves to the next line once the offset is past the newline', () => {
+		expect(getLineIndexAtOffset(text, 6)).toBe(1);
+	});
+
+	it('clamps offsets below 0 and past the text length', () => {
+		expect(getLineIndexAtOffset(text, -4)).toBe(0);
+		expect(getLineIndexAtOffset(text, 100)).toBe(1);
+	});
+
+	it('maps offsets in CRLF text onto the same logical lines as LF', () => {
+		const crlf = 'hello\r\nworld';
+
+		expect(getLineIndexAtOffset(crlf, 5)).toBe(0);
+		expect(getLineIndexAtOffset(crlf, 6)).toBe(1);
+		expect(getLineIndexAtOffset(crlf, crlf.length)).toBe(1);
+	});
+});
+
+describe('getSelectedLineCount', () => {
+	const text = 'a\nb\nc';
+
+	it('is zero when the range is collapsed, even in multiline text', () => {
+		expect(getSelectedLineCount(text, 0, 0)).toBe(0);
+		expect(getSelectedLineCount(text, 2, 2)).toBe(0);
+	});
+
+	it('is one when the range stays on a single line', () => {
+		expect(getSelectedLineCount(text, 0, 1)).toBe(1);
+	});
+
+	it('counts each line the range crosses', () => {
+		expect(getSelectedLineCount(text, 0, 2)).toBe(2);
+		expect(getSelectedLineCount(text, 0, text.length)).toBe(3);
+	});
+
+	it('treats a reversed range the same as start-to-end', () => {
+		expect(getSelectedLineCount(text, 2, 0)).toBe(getSelectedLineCount(text, 0, 2));
+	});
+
+	it('stays on one line when the range ends on a newline', () => {
+		expect(getSelectedLineCount('hello\nworld', 0, 5)).toBe(1);
+	});
+});
+
+describe('applyTextSelection', () => {
+	it('restores the range and direction on the element', () => {
+		const { element, setSelectionRange } = stubTextarea('abc');
+		const selection: TextSelection = { start: 1, end: 2, direction: 'forward' };
+
+		applyTextSelection(element, selection);
+
+		expect(setSelectionRange).toHaveBeenCalledWith(1, 2, 'forward');
+	});
+
+	it('clamps the range to the current value length', () => {
+		const { element, setSelectionRange } = stubTextarea('abc');
+
+		applyTextSelection(element, { start: 10, end: 20, direction: 'none' });
+
+		expect(setSelectionRange).toHaveBeenCalledWith(3, 3, 'none');
+	});
+
+	it('clamps only the end when start is still in range', () => {
+		const { element, setSelectionRange } = stubTextarea('abc');
+
+		applyTextSelection(element, { start: 1, end: 99, direction: 'backward' });
+
+		expect(setSelectionRange).toHaveBeenCalledWith(1, 3, 'backward');
+	});
+});

package/src/components/ds-code-input/index.ts

@@ -0,0 +1,2 @@
+export { default as DsCodeInput } from './ds-code-input';
+export * from './ds-code-input.types';