Тестовое задание от компании Stworka

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

Содержание

• Тестовое задание от компании Stworka
  • Содержание
  • Используемые технологии
  • Инструкция по установке
  • Работа с проектом
    • Скрипты для работы с проектом
    • Редактирование проекта

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

• HTML: для создания структуры компонента.
• LESS: для стилизации и динамических вычислений.
• HTMLLinter: для проверки HTML-кода на соответствие общепринятым стандартам.
• Prettier: для автоматического форматирования кода.
• StyleLint: инструмент для линтинга таблиц стилей.
• CommitLint: для проверки сообщений коммитов на соответствие общепринятым стандартам.
• Husky: для управления git-хуками.
• Webpack: для сборки и обслуживания проекта.

Инструкция по установке

Для локальной настройки проекта выполните следующие шаги:

1. Клонируйте репозиторий:

git clone https://github.com/NotACat1/checklist.git

2. Установите зависимости:

npm install

3. Установите Husky:

npx husky install

Работа с проектом

Скрипты для работы с проектом

Запуск проекта:

npm start

Запускает сервер разработки Webpack и автоматически открывает проект в браузере.

Сборка проекта для разработки:

npm run build

Выполняет сборку проекта в режиме разработки.

Сборка проекта для продакшн:

npm run production

Выполняет сборку проекта в режиме продакшн.

Линтинг LESS-файлов:

npm run lint:less

Проверяет файлы LESS на соответствие стандартам стилей.

Линтинг HTML-файлов:

npm run lint:html

Проверяет HTML-файл на соответствие стандартам.

Форматирование кода:

npm run format

Форматирует код с помощью Prettier.

Деплой на GitHub Pages:

npm run deploy

Сначала выполняет сборку проекта для продакшн, затем деплоит собранный проект на GitHub Pages.

Предварительный деплой:

npm run predeploy

Сценарий для предварительного деплоя, выполняет сборку проекта для продакшн.

Предварительный коммит:

npx lint-staged

Выполняет линтинг и форматирование файлов перед коммитом.

Редактирование проекта

Для настройки значений общего количества задач и выполненных задач отредактируйте файл component.less:

// ./src/blocks/component.less

@total-tasks: 7; // Общее количество задач
@completed-tasks: 3; // Выполненные задачи

Переменные @total-tasks и @completed-tasks используются для вычисления процента выполнения, который отображается в центре круга прогресса.