Необходимо реализовать приложение калькулятор. Приложение должно предоставлять основные арифметические операции, построитель выражений и полную историю всех выражений.
Обязательная компонентная модель:
- Header - должен отображать заголовок приложения, а также ссылки на другие страницы.
- Calculator - корневой элемент для менеджмента данных калькулятора (логика для хранения истории, операций, текущего состояния и т.д.).
- Display - отображает ввод калькулятора, выражения и историю.
- History - отображает список ранее выполненных операций.
- ControlPanel - используется для управления взаимодействиями калькулятора, которые не связаны с расчетными операциями. Например, он предоставляет функционал для открытия/скрытия истории.
- Keypad - используется для ввода операндов, а также выполнения различных операций с этими операндами.
- Сложение
- Вычитание
- Умножение
- Деление
- Переключение знака
- Построитель выражения
- История операций
- Показывать полную историю
- Очистка истории
- Очистка вычисленного значения и выражения
- Очистка всего (истории, вычисленного значения и выражения)
- Точность расчета - 3 символа
- Действительные числа могут быть записаны как 0.5 и .5
- Операция % - остаток от деления
Дизайн является приблизительным и может быть изменен в зависимости от условий задания. Ссылка на макет: Макет "Калькулятор".
- Организацию файловой структуры react приложения. Ссылка на структуру: Cтруктура проекта.
- Для реализации логики приложения, необходимо использовать поведенческий паттерн программирования "Команда", который позволяет превращает запросы в объекты, позволяя передавать их как аргументы при вызове методов, ставить запросы в очередь, логировать их, а также поддерживать отмену операций (см. подробнее паттерн Команда).
- Реализация с использованием как классовых, так и функциональных react компонентов и использованием хуков. Разделите весь функционал приложения на две страницы, на одной из которых будет представлена реализация через классовые компоненты, а на второй - через функциональные. Например, в компоненте header должны быть представлены ссылки на следующие страницы: home(FC) и home(CC).
- Обработку ошибок через паттерн "Error Boundaries"
- Реализация светлой и тёмной темы с использованием styled-components
- Проверку типов в React компонентах, передаваемых параметров и подобных объектов.
- Использование алиасов для импортирования файлов.
- Использование библиотеки react-redux не является реализацией паттерна "Команда".
- Запрещено использование функции eval и библиотеки mathjs(или любые другие аналоги) для реализации логики вычисления.
- Node.js - программная платформа, основанная на движке V8 (транслирующем JavaScript в машинный код).
- Babel - транспайлер, преобразующий код из одного стандарта в другой.
- Webpack - инструмент, позволяющий скомпилировать, например, JavaScript модули в единый JS-файл.
- yarn - менеджер пакетов.
- react - JavaScript-библиотека для создания пользовательских интерфейсов.
- react-router-dom - набор навигационных компонентов.
- react-redux - инструмент управления состоянием.
- prop-types - набор валидаторов, которые могут быть использованы для проверки получаемых данных.
- styled-components - система стилизации react компонентов.
- cypress — e2e тестирование для веб приложений.
Реализовать e2e тестирование c полным покрытием функционала приложения:
- Арифметические операции.
- Модуль истории.
- Модуль дисплея.
- Модуль клавиатуры.
- Модуль навигации.
- Модуль смены темы и т.д.