Toasts-lib1 NPM

Tестовое задание библиотека Toast

Содержание

Техническое задание
Используемые технологии
Структура проекта
Тестирование
Как начать
Полезные ссылки

Техническое задание

Необходимо реализовать Toast библиотеку Javascript, для представления не блокирующих уведомлений . Цель состоит в том, чтобы создать базовую библиотеку, которую можно настраивать и расширять.

Необходимый функционал:

Показать уведомление.
Возможность устанавливать положению уведомления.
Возможность устанавливать тип уведомления (уведомления об успехе, ошибке, оповещение и т.д.).
Возможность устанавливать длительность показа уведомления.
Возможность задавать заголовок и описание уведомления.
Возможность устанавливать отступы уведомления.
Возможность изменять цвет типа уведомлений.
Возможность изменять анимацию появления и исчезновения.

Дополнительный функционал:

Возможность "смахивать" уведомления в сторону для быстрого закрытия.
Показ до 3 уведомлений одновременно.

Пример графического представления:

Ссылка на макет: Макет "Toast". Также его можно найти в папке doc c расширением .xd для программы Adobe XD.

Также проект предполагает:

Разделить библиотеку на два основных компонента: представления и логики. Для реализации логики приложения необходимо использовать порождающий паттерн программирования "Одиночка", который гарантирует, что у класса есть только один экземпляр, и предоставляет к нему глобальную точку доступа (см. подробнее паттерн Одиночка). При помощи паттерна создать сервисный класс, в котором вы будете задавать конфигурацию и вызывать уведомление. Для реализация представления необходимо использовать react portals.
Настроить конфигурации babel, eslint.
Подключить и настроить бандлер Rollup для сборки проекта в библиотеку.
Подключить и настроить Strorybook для проверки работоспособности вашей библиотеки.
Обработку ошибок через паттерн Error Boundaries
Проверку типов в React компонентах, передаваемых параметров и подобных объектов.
Использование алиасов для импортирования файлов.

Используемые технологии

Для react

node.js - программная платформа, основанная на движке V8 (транслирующем JavaScript в машинный код).
babel - транспайлер, преобразующий код из одного стандарта в другой.
eslint - линтер для JavaScript кода.
yarn - менеджер пакетов.
rollup - сборщик ES-модулей.
stortbook - инструмент, используемый для разработки компонентов пользовательского интерфейса в изоляции.
react - JavaScript-библиотека для создания пользовательских интерфейсов.
prop-types - набор валидаторов, которые могут быть использованы для проверки получаемых данных.
styled-components - система стилизации react компонентов.
cypress — e2e тестирование для веб приложений.