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 блок омжет принимать параметры дизайна, которые зависят от самого блока.

Создание новых компонентов

Создание файлов комнонента

Именование компонента

Использование готовых классов

Работа с Strapi

Шаблон Strapi

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

Ассеты

Анимация

Появление из прозрачности при видимости

Функциональные

Актуальный год в footer

Уезжающая шапка

Форма с отправкой данных в Telegram

Калькулятор

Awwwesome блоки

Компоненты

Атомы

Компоненты

<About >

Обновления