Задание

Необходимо разработать компонент по данным макетам с использованием чистого javascript (vanillaJS) или typescript. Использование сторонних библиотек для реализации компонентов запрещено.

Срок выполнения

Приём решений заканчивается 22 июля в 23:59.

Макеты

Ссылка на макеты: https://www.figma.com/file/YMUZhj7qRWHKNilPiHd6AUy3/number_verify?node-id=0%3A1

Пояснения

Необходимо реализовать компонент для ввода цифр номера телефона с возможной маскированной частью. Длина маскированной части может быть произвольной.

Компонент имеет несколько состояний (normal, hover, active, error), которые отражены в макетах.

Формат входных данных для компонента:

interface Props {
	/**
	 * Маска инпута. Значения:
	 * "I" - одиночный инпут для ввода одной цифры
	 * "X" - серый блок с символом "X"
	 * "*" - серый блок с символом "●"
	 * <цифра> - серый блок с введенной цифрой
	 * <не цифра> - символ отображается "как есть"
	 */
	mask: string;
}

Пример значения маски для компонента в состоянии normal, изображенного на макете:

const mask = '+7(985)0II-**-**';

Дополнительные требования

Ниже перечислены дополнительные необязательные требования, выполнение которых обеспечит получение дополнительных баллов при оценивании вашего решения.

1. Настроить сборку компонента с использованием webpack, rollup или их аналогов, публикацию в npm.
2. Использование typescript, полноценное описание и вывод типов, а также поставка *.d.ts файлов в итоговую сборку.
3. Настроить инфраструктуру для просмотра (storybook или любые другие аналоги) и визуального тестирования компонента (тестирование скриншотами).