md-components-mdigial-azamat 0.0.51 → 0.0.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,57 +1,125 @@
|
|
|
1
|
-
|
|
1
|
+
# MBank UI Component Library
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Библиотека компонентов для MBank - современная UI библиотека на React + TypeScript + Vite.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## 📦 Установка
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
```bash
|
|
8
|
+
npm install md-components-mdigial-azamat
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 🚀 Использование
|
|
12
|
+
|
|
13
|
+
```javascript
|
|
14
|
+
import { Banner, MainBanner, Header, Footer } from 'md-components-mdigial-azamat'
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## 📚 Документация
|
|
18
|
+
|
|
19
|
+
Полная документация по всем компонентам и их пропсам доступна в файле [COMPONENTS.md](./COMPONENTS.md).
|
|
8
20
|
|
|
9
|
-
|
|
21
|
+
### Категории компонентов
|
|
10
22
|
|
|
11
|
-
|
|
23
|
+
Библиотека содержит **45+ компонентов**, разделенных на 12 категорий:
|
|
12
24
|
|
|
13
|
-
|
|
25
|
+
- **Хедеры** - верхняя навигационная часть страницы
|
|
26
|
+
- **Баннеры** - информационные и рекламные блоки (9 компонентов)
|
|
27
|
+
- **Футеры** - нижняя часть страницы
|
|
28
|
+
- **Карточки** - интерактивные карточки с информацией (10 компонентов)
|
|
29
|
+
- **FAQ** - компоненты для часто задаваемых вопросов
|
|
30
|
+
- **Списки** - компоненты для отображения списков элементов (6 компонентов)
|
|
31
|
+
- **Видео** - компоненты для воспроизведения видео (3 компонента)
|
|
32
|
+
- **Таблицы** - компоненты для табличных данных (2 компонента)
|
|
33
|
+
- **Навигация** - компоненты для навигации
|
|
34
|
+
- **Шаги** - компоненты для многошаговых процессов
|
|
35
|
+
- **Загрузка файлов** - компоненты для скачивания файлов (5 компонентов)
|
|
36
|
+
- **Отступы** - компоненты для создания отступов
|
|
37
|
+
|
|
38
|
+
## 🛠 Разработка
|
|
39
|
+
|
|
40
|
+
### Технологии
|
|
41
|
+
|
|
42
|
+
- **React 18** - UI библиотека
|
|
43
|
+
- **TypeScript** - типизация
|
|
44
|
+
- **Vite** - сборщик и dev-сервер
|
|
45
|
+
- **Tailwind CSS** - стилизация
|
|
46
|
+
- **ESLint + Prettier** - линтинг и форматирование
|
|
47
|
+
|
|
48
|
+
### Доступные команды
|
|
14
49
|
|
|
15
50
|
```bash
|
|
16
|
-
|
|
17
|
-
|
|
51
|
+
# Запуск dev-сервера
|
|
52
|
+
npm run dev
|
|
53
|
+
|
|
54
|
+
# Сборка библиотеки
|
|
55
|
+
npm run build
|
|
18
56
|
|
|
19
|
-
|
|
57
|
+
# Линтинг кода
|
|
58
|
+
npm run lint
|
|
20
59
|
|
|
21
|
-
|
|
22
|
-
|
|
60
|
+
# Форматирование кода
|
|
61
|
+
npm run prettier
|
|
62
|
+
|
|
63
|
+
# Предпросмотр сборки
|
|
64
|
+
npm run preview
|
|
23
65
|
```
|
|
24
66
|
|
|
25
|
-
|
|
67
|
+
### Структура проекта
|
|
26
68
|
|
|
27
|
-
|
|
69
|
+
```
|
|
70
|
+
src/
|
|
71
|
+
├── components/ # Компоненты библиотеки
|
|
72
|
+
│ ├── Banner/ # Компонент баннера
|
|
73
|
+
│ ├── MainBanner/ # Главный баннер
|
|
74
|
+
│ ├── Header/ # Хедер
|
|
75
|
+
│ ├── Footer/ # Футер
|
|
76
|
+
│ └── ... # Другие компоненты
|
|
77
|
+
├── shared/ # Общие утилиты и типы
|
|
78
|
+
│ ├── ui/ # UI компоненты
|
|
79
|
+
│ ├── types/ # TypeScript типы
|
|
80
|
+
│ └── utils/ # Утилиты
|
|
81
|
+
└── ...
|
|
82
|
+
```
|
|
28
83
|
|
|
29
|
-
|
|
84
|
+
## 📝 Публикация пакета
|
|
30
85
|
|
|
31
|
-
|
|
86
|
+
```bash
|
|
87
|
+
# Обновление версии (patch/minor/major)
|
|
88
|
+
npm version patch
|
|
32
89
|
|
|
33
|
-
|
|
34
|
-
|
|
90
|
+
# Сборка проекта
|
|
91
|
+
npm run build
|
|
35
92
|
|
|
36
|
-
|
|
93
|
+
# Публикация в npm registry
|
|
94
|
+
npm publish
|
|
95
|
+
```
|
|
37
96
|
|
|
38
|
-
|
|
97
|
+
**Важно:** Убедитесь, что вы авторизованы в npm и имеете права на публикацию пакета:
|
|
98
|
+
```bash
|
|
99
|
+
npm login
|
|
100
|
+
```
|
|
39
101
|
|
|
40
|
-
|
|
102
|
+
## 🔧 Конфигурация ESLint
|
|
103
|
+
|
|
104
|
+
Для продакшн приложений рекомендуется расширить конфигурацию ESLint:
|
|
41
105
|
|
|
42
106
|
```js
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
107
|
+
parserOptions: {
|
|
108
|
+
ecmaVersion: 'latest',
|
|
109
|
+
sourceType: 'module',
|
|
110
|
+
project: ['./tsconfig.json', './tsconfig.node.json'],
|
|
111
|
+
tsconfigRootDir: __dirname,
|
|
112
|
+
}
|
|
49
113
|
```
|
|
50
114
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
115
|
+
## 📄 Лицензия
|
|
116
|
+
|
|
117
|
+
Проект разработан для MBank.
|
|
118
|
+
|
|
119
|
+
## 👤 Автор
|
|
120
|
+
|
|
121
|
+
**Azamat Raimbekov**
|
|
54
122
|
|
|
55
123
|
npm version patch
|
|
56
124
|
npm run build
|
|
57
|
-
npm publish
|
|
125
|
+
npm publish
|
package/dist/AllComponents.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { M as o, B as t, C as n, S as r, a as e, V as a, b as i, c as p, d as m, e as s, f as d, P as l, g as c, W as D, F as L, D as f, h as C, i as B, j as F, I as y, k, l as w, A as I, m as S, T as _, n as g, E as M, o as P, p as V, q as u, r as T, s as b, t as A } from "./data.mock-
|
|
1
|
+
import { M as o, B as t, C as n, S as r, a as e, V as a, b as i, c as p, d as m, e as s, f as d, P as l, g as c, W as D, F as L, D as f, h as C, i as B, j as F, I as y, k, l as w, A as I, m as S, T as _, n as g, E as M, o as P, p as V, q as u, r as T, s as b, t as A } from "./data.mock-8d89834d.js";
|
|
2
2
|
import H from "./AnimatedSwiper/index.js";
|
|
3
3
|
import { Banner as h } from "./Banner/Banner.js";
|
|
4
4
|
import { CardIconList as q } from "./CardIconList/CardIconList.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { M as a, B as t, u as s, C as n, S as D, a as r, V as e, b as i, c as o, d, P as l, e as C, f as B, g as L, W as m, v as w, w as p, F as I, h as g, D as F, i as S, j as c, I as M, x as P, k as f, l as u, A as V, m as T, T as W, n as b, E as x, o as h, p as k, q, r as v, s as y, t as A } from "../data.mock-
|
|
1
|
+
import { M as a, B as t, u as s, C as n, S as D, a as r, V as e, b as i, c as o, d, P as l, e as C, f as B, g as L, W as m, v as w, w as p, F as I, h as g, D as F, i as S, j as c, I as M, x as P, k as f, l as u, A as V, m as T, T as W, n as b, E as x, o as h, p as k, q, r as v, s as y, t as A } from "../data.mock-8d89834d.js";
|
|
2
2
|
const j = [
|
|
3
3
|
a,
|
|
4
4
|
t,
|
|
@@ -84,13 +84,11 @@ const n = {
|
|
|
84
84
|
id: "4",
|
|
85
85
|
component_props: {
|
|
86
86
|
title: "Stepper",
|
|
87
|
-
button:
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
}
|
|
93
|
-
],
|
|
87
|
+
button: {
|
|
88
|
+
title: "Кнопка",
|
|
89
|
+
link: "#",
|
|
90
|
+
variant: e.Primary
|
|
91
|
+
},
|
|
94
92
|
data: [
|
|
95
93
|
{
|
|
96
94
|
title: "Выберите",
|
|
@@ -170,13 +168,11 @@ const n = {
|
|
|
170
168
|
<li>Description line</li>
|
|
171
169
|
</ul>
|
|
172
170
|
`,
|
|
173
|
-
button:
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
}
|
|
179
|
-
]
|
|
171
|
+
button: {
|
|
172
|
+
title: "button",
|
|
173
|
+
link: "#",
|
|
174
|
+
variant: e.Primary
|
|
175
|
+
}
|
|
180
176
|
},
|
|
181
177
|
{
|
|
182
178
|
title: "Content Card2",
|