Skip to content

0101v/toasts-task

Repository files navigation

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

Содержание

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

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

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

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

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

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

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

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

example_1

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

  • Разделить библиотеку на два основных компонента: представления и логики. Для реализации логики приложения необходимо использовать порождающий паттерн программирования "Одиночка", который гарантирует, что у класса есть только один экземпляр, и предоставляет к нему глобальную точку доступа (см. подробнее паттерн Одиночка). При помощи паттерна создать сервисный класс, в котором вы будете задавать конфигурацию и вызывать уведомление. Для реализация представления необходимо использовать 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 тестирование для веб приложений. ​

Для react native

Will be soon... ​

Структура проекта

​ Структура проекта должна быть реализована в том же стиле, что и в первом тестовом задании (см. Структура проекта). ​

Тестирование

​ Реализовать e2e тестирование c полным покрытием функционала приложения:

  • Сервис для конфигурации Toast-компонента.
  • Графическое (компонент модуля и т.д.) ​

Как начать

​ Эта инструкция поможет вам сделать копию проекта и запустить его на вашей локальной машине для разработки и тестирования. ​

React/ReactNative

Установка

​ Для того чтобы получить шаблон проекта, необходимо сделать следующее: ​

  1. Зарегистрировать аккаунт в github.
  2. Получить доступ к репозиторию с шаблоном.
  3. Импортировать шаблон в свой репозиторий.
  4. Склонировать репозиторий на свою локальную машину. ​

template_1

Полезные ссылки

ReactRollupStorybookEslintBabelТестирование CypressТестирование DetoxStyled-components