Компонент для работы с телефонным номером, который задается входной маской.
У компонента есть четыре состояния, которые иллюстрируют макеты
interface Props {
/**
* Маска инпута. Значения:
* "I" - одиночный инпут для ввода одной цифры
* "X" - серый блок с символом "X"
* "*" - серый блок с символом "●"
* <цифра> - серый блок с введенной цифрой
* <не цифра> - символ отображается "как есть"
*/
mask: string;
}
Например, const mask = '+7(985)0II-**-**';
Создать компонент можно двумя способами:
-
Импортировать класс
NumberGroupComponent
и создать его экземпляр. Затем отрендерить. Например,
const element = new NumberGroupComponent(props);
,
где props - объект, содержащий ключ mask и значение маски
element.render(parent)
,
где parent - родительский элемент, в который нужно добавить компонент -
Импортировать функцию
create(props,parent)
, которая всё сделает за вас :)
JavaScript, node.js, npm
Кроме того, добавлены
- Webpack - для сборки компонента
- ESlint - линтер для создания красивого кода на js
- Babel - для поддержки разных версий js
- Docker - для создания эталонной инфраструктуры для запуска и прогона автотестов
- Storybook - для просмотра всех состояний компонента
- Jest-тесты - для функционального тестирования компонента
- CI/CD - для автоматической публикации пакета в npm при успешном прохождении всех тестов
Так же с выходом новой версии происходит новая публикация пакета npm (ссылочка)
Запустить тесты можно командой npm run test
docker build -t phone-component .
docker run -d --rm --name phone-component -p 3001:3001 phone-component