npm version patch npm run build npm publish

MBank UI Component Library

Библиотека компонентов для MBank - современная UI библиотека на React + TypeScript + Vite.

📦 Установка

npm install md-components-mdigial-azamat

🚀 Использование

import { Banner, MainBanner, Header, Footer } from 'md-components-mdigial-azamat'

📚 Документация

Полная документация по всем компонентам и их пропсам доступна в файле COMPONENTS.md.

Категории компонентов

Библиотека содержит 45+ компонентов, разделенных на 12 категорий:

• Хедеры - верхняя навигационная часть страницы
• Баннеры - информационные и рекламные блоки (9 компонентов)
• Футеры - нижняя часть страницы
• Карточки - интерактивные карточки с информацией (10 компонентов)
• FAQ - компоненты для часто задаваемых вопросов
• Списки - компоненты для отображения списков элементов (6 компонентов)
• Видео - компоненты для воспроизведения видео (3 компонента)
• Таблицы - компоненты для табличных данных (2 компонента)
• Навигация - компоненты для навигации
• Шаги - компоненты для многошаговых процессов
• Загрузка файлов - компоненты для скачивания файлов (5 компонентов)
• Отступы - компоненты для создания отступов

🛠 Разработка

Технологии

• React 18 - UI библиотека
• TypeScript - типизация
• Vite - сборщик и dev-сервер
• Tailwind CSS - стилизация
• ESLint + Prettier - линтинг и форматирование

Доступные команды

# Запуск dev-сервера
npm run dev

# Сборка библиотеки
npm run build

# Линтинг кода
npm run lint

# Форматирование кода
npm run prettier

# Предпросмотр сборки
npm run preview

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

src/
├── components/          # Компоненты библиотеки
│   ├── Banner/         # Компонент баннера
│   ├── MainBanner/     # Главный баннер
│   ├── Header/         # Хедер
│   ├── Footer/         # Футер
│   └── ...             # Другие компоненты
├── shared/             # Общие утилиты и типы
│   ├── ui/            # UI компоненты
│   ├── types/         # TypeScript типы
│   └── utils/         # Утилиты
└── ...

📝 Публикация пакета

# Обновление версии (patch/minor/major)
npm version patch

# Сборка проекта
npm run build

# Публикация в npm registry
npm publish

Важно: Убедитесь, что вы авторизованы в npm и имеете права на публикацию пакета:

npm login

🔧 Конфигурация ESLint

Для продакшн приложений рекомендуется расширить конфигурацию ESLint:

parserOptions: {
  ecmaVersion: 'latest',
  sourceType: 'module',
  project: ['./tsconfig.json', './tsconfig.node.json'],
  tsconfigRootDir: __dirname,
}

📄 Лицензия

Проект разработан для MBank.

👤 Автор

Azamat Raimbekov