Replace masked TimeCell input with section-based state machine

[Pivouane]

Context

The previous TimeCell implementation relied on a input mask and tweaks with a microTask queue.
This was not a good solution for multiple reasons, including complexity.

What changed

The TimeCell now works with a section-based approach:

• time is represented as three sections (hours, minutes, seconds)
• all keyboard interactions are handled by a reducer

How should this work

This refactor also focuses on behaviors implied by the UX/UI requirements, to ensure that this sketch is respected here's a few test cases for those who needs to review the component.

• Typing 0145 while focused on minutes and pressing enter should display 01:45:00
• Backspace should lead to an intuitive clear of the input
• Arrow keys shoudl correctly switch between sections
• Clicking sections should correctly handle the focus

Rewriting the integration of the timeCell also accomodates the work of linking the table with the backend process.

related to https://github.com/osrd-project/osrd-confidential/issues/1281

This closes #14277 and closes #14275

because it will most likely be handled by the backend manipulations.

[kmer2016]

Well done ! Just some nit comment.

Integration changes will likely be needed when connecting to backend via PR #14853.

[kmer2016]

We can moving the placeholder variable to the top for clearer separation between setup and conditions:

Suggested change

	const toSectionState = (str: string, section: Section): SectionState => {
	const digits = str.replace(/\D/g, '').slice(-2);
	if (digits.length === 2) return digits;
	const sectionPlaceholder = SECTION_PLACEHOLDERS[section];
	if (digits.length === 1) return sectionPlaceholder + digits;
	return sectionPlaceholder + sectionPlaceholder;
	};
	const formatSectionDigits = (str: string, section: Section): SectionState => {
	const digits = str.replace(/\D/g, '').slice(-2);
	const sectionPlaceholder = SECTION_PLACEHOLDERS[section];
	if (digits.length === 2) return digits;
	if (digits.length === 1) return sectionPlaceholder + digits;
	return sectionPlaceholder + sectionPlaceholder;
	};

[kmer2016]

nit:

Suggested change

	const getSectionStateDigitCount = (sectionState: SectionState): number => {
	const digitCount = sectionState.replace(/\D/g, '').length;
	return digitCount;
	};
	const countDigits = (sectionState: SectionState): number => sectionState.replace(/\D/g, '').length;

[kmer2016]

nit

Suggested change

	const isFull = (pair: SectionState): boolean => getSectionStateDigitCount(pair) === 2;
	const hasAllDigits = (pair: SectionState): boolean => getSectionStateDigitCount(pair) === 2;

[kmer2016]

nit:

Suggested change

	const isEmpty = (pair: SectionState): boolean => getSectionStateDigitCount(pair) === 0;
	const hasNoDigits = (pair: SectionState): boolean => getSectionStateDigitCount(pair) === 0;