- Техническое задание
- Используемые технологии
- Структура проекта
- Тестирование
- Как начать
- Полезные ссылки
Необходимо реализовать Toast библиотеку Javascript, для представления не блокирующих уведомлений . Цель состоит в том, чтобы создать базовую библиотеку, которую можно настраивать и расширять.
- Показать уведомление.
- Возможность устанавливать положению уведомления.
- Возможность устанавливать тип уведомления (уведомления об успехе, ошибке, оповещение и т.д.).
- Возможность устанавливать длительность показа уведомления.
- Возможность задавать заголовок и описание уведомления.
- Возможность устанавливать отступы уведомления.
- Возможность изменять цвет типа уведомлений.
- Возможность изменять анимацию появления и исчезновения.
- Возможность "смахивать" уведомления в сторону для быстрого закрытия.
- Показ до 3 уведомлений одновременно.
Ссылка на макет: Макет "Toast". Также его можно найти в папке doc c расширением .xd для программы Adobe XD.
- Разделить библиотеку на два основных компонента: представления и логики. Для реализации логики приложения необходимо использовать порождающий паттерн программирования "Одиночка", который гарантирует, что у класса есть только один экземпляр, и предоставляет к нему глобальную точку доступа (см. подробнее паттерн Одиночка). При помощи паттерна создать сервисный класс, в котором вы будете задавать конфигурацию и вызывать уведомление. Для реализация представления необходимо использовать react portals.
- Настроить конфигурации babel, eslint.
- Подключить и настроить бандлер Rollup для сборки проекта в библиотеку.
- Подключить и настроить Strorybook для проверки работоспособности вашей библиотеки.
- Обработку ошибок через паттерн Error Boundaries
- Проверку типов в React компонентах, передаваемых параметров и подобных объектов.
- Использование алиасов для импортирования файлов.
- node.js - программная платформа, основанная на движке V8 (транслирующем JavaScript в машинный код).
- babel - транспайлер, преобразующий код из одного стандарта в другой.
- eslint - линтер для JavaScript кода.
- yarn - менеджер пакетов.
- rollup - сборщик ES-модулей.
- stortbook - инструмент, используемый для разработки компонентов пользовательского интерфейса в изоляции.
- react - JavaScript-библиотека для создания пользовательских интерфейсов.
- prop-types - набор валидаторов, которые могут быть использованы для проверки получаемых данных.
- styled-components - система стилизации react компонентов.
- cypress — e2e тестирование для веб приложений.
Will be soon...
Структура проекта должна быть реализована в том же стиле, что и в первом тестовом задании (см. Структура проекта).
Реализовать e2e тестирование c полным покрытием функционала приложения:
- Сервис для конфигурации Toast-компонента.
- Графическое (компонент модуля и т.д.)
Эта инструкция поможет вам сделать копию проекта и запустить его на вашей локальной машине для разработки и тестирования.
Для того чтобы получить шаблон проекта, необходимо сделать следующее:
- Зарегистрировать аккаунт в github.
- Получить доступ к репозиторию с шаблоном.
- Импортировать шаблон в свой репозиторий.
- Склонировать репозиторий на свою локальную машину.
React Rollup Storybook Eslint Babel Тестирование Cypress Тестирование Detox Styled-components