Test-npm-kapustin NPM

Kapustin Dev Library

Данная библиотека предназначена для быстрой сборки Next.js проектов из готовых блоков с возможностью полной кастомизации.

Начало работы

Введение

Понятия

Используемые решения

Основные инструменты:

react
next
sass
eslint

Дополнительные пакеты:

axios для работы с REST API
flickity + react-flickity-component для реализации слайдеров
formik для создания форм
framer-motion для анимации
react-range для реализации компонента слайдера
react-scroll для контроля скролла
react-yandex-maps для использования API YaMaps
yup для валидации форм

Список пакетов будет дополняться с развитием библиотеки

Правила именования

При создании новых компонентов необходимо пользоваться следующими принципами:

Название компонента должно максимально точно передавать сущность компонента для новых разработчиков
Название компонента и название его SASS модуля должно совпадать. Например - MyComponent.jsx и MyComponent.module.sass

Структура файлов

Данная структура файлов должна сохраняться для каждого проекта ввиду наличия общей документации. В случае если в рамках проекта необходимо расширить имеющуюся структуру - все изменения должны быть зафиксированы в документации.

:file_folder: src
- :file_folder: components
  - :file_folder: atoms
    - :card_file_box: *.jsx файлы атомов
  - :file_folder: animations
    - :card_file_box: *.jsx файлы анимаций
  - :file_folder: hooks
    - :card_file_box: *.jsx файлы хуков
  - :card_file_box: *.jsx файлы компонентов
- pages
  - :page_with_curl: _app.js
  - :page_with_curl: index.js
  - Прочие файлы и папки - :page_with_curl: [DynamicRouting].jsx, :file_folder: folder, :page_with_curl: page.jsx and etc
- styles
  - :file_folder: components
    - :file_folder: atoms
      - :card_file_box: *.module.sass файлы для стилизации атомов
    - :card_file_box: *.module.sass файлы для стилизации компонентов
  - :page_with_curl: Classes.sass
  - :page_with_curl: Defaults.sass

SASS файлы стилей

Файлы стилей делятся на 3 типа:

Общие стили.
- Classes.sass - для типовых классов, является сокращенным аналогом Tailwind с необходимыми нам компонентами
- Default.sass - для дефолтных настроек и ввода переменных
Модули. Используются для стилизации атомов и компонентов, находятся в src/styles/components. Создаются и импортируются отдельно для каждого атома и компонента.
Контроллеры. Необходимы для общего и единоразового контроля следующих параметров: (импортируются глобально в _app.js)
- Скругление краев (BorderRadius.sass)
- Цвета (Colors.sass)
- Тёмная тема (DarkMode.sass)
- Шрифты (Fonts.sass)
- Графические вставки (Graphik.sass)
- Сетка (Grid.sass)
- Размеры шрифтов (TextSizes.sass)
- Отступы (WhiteSpace.sass)

Адаптивные стили компонентов при необходимости прописываются в файлы модулей строго после основных стилей для ПК.

Атомы

Атом - базовый повторяющийся элемент который чаще всего используется в составе компонентов. Расположение атомов src/components/atoms, стили подключаются с использованием *.module.sass, которые расположены в src/styles/components/atoms.

Компоненты

Компонент - отдельный блок, являющийся отдельной и самостоятельной частью сайта, готовой к применению на разных страницах. Блок принимает props.url в API для вставки контента. Также помимо url блок омжет принимать параметры дизайна, которые зависят от самого блока.