@barabel324/popups-engine 0.0.1 → 0.0.4
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 +197 -1
- package/dist/popups-engine.d.ts +48 -3
- package/dist/popups-engine.js +3 -3
- package/package.json +55 -54
package/README.md
CHANGED
|
@@ -1 +1,197 @@
|
|
|
1
|
-
# Popups-engine
|
|
1
|
+
# Popups-engine
|
|
2
|
+
|
|
3
|
+
Движок для управления попапами в React с поддержкой кастомных компонентов и анимаций через motion.
|
|
4
|
+
|
|
5
|
+
## Установка
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install your-popups-engine
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Основные компоненты
|
|
12
|
+
|
|
13
|
+
### PopupsEngineProvider
|
|
14
|
+
|
|
15
|
+
Провайдер для регистрации и управления попапами.
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
<PopupsEngineProvider
|
|
19
|
+
popups={popups}
|
|
20
|
+
>
|
|
21
|
+
{children}
|
|
22
|
+
|
|
23
|
+
<PopupsEngineRoot
|
|
24
|
+
id="popups-root"
|
|
25
|
+
lockBodyScroll={() => document.body.style.overflow = 'hidden'}
|
|
26
|
+
enableBodyScroll={() => document.body.style.overflow = ''}
|
|
27
|
+
/>
|
|
28
|
+
</PopupsEngineProvider>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### PopupsEngineRoot
|
|
32
|
+
|
|
33
|
+
Компонент, который рендерит все попапы и обертки. Обычно располагается один раз в корне приложения.
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
<PopupsEngineRoot
|
|
37
|
+
id="popups-root"
|
|
38
|
+
lockBodyScroll={() => document.body.style.overflow = 'hidden'}
|
|
39
|
+
enableBodyScroll={() => document.body.style.overflow = ''}
|
|
40
|
+
/>
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
| Проп | Тип | Описание |
|
|
44
|
+
| ------------------ | ------------ | -------------------------------------------- |
|
|
45
|
+
| `id` | `string` | Атрибут `id` для корневого элемента попапов. |
|
|
46
|
+
| `lockBodyScroll` | `() => void` | Функция блокировки скролла страницы. |
|
|
47
|
+
| `enableBodyScroll` | `() => void` | Функция разблокировки скролла страницы. |
|
|
48
|
+
|
|
49
|
+
`PopupsEngineProvider` должен оборачивать приложение, а `PopupsEngineRoot` должен быть отрендерен внутри него (обычно один раз).
|
|
50
|
+
|
|
51
|
+
### Хук usePopupsEngineProvider
|
|
52
|
+
|
|
53
|
+
Позволяет управлять попапами внутри компонентов.
|
|
54
|
+
|
|
55
|
+
```ts
|
|
56
|
+
const { openPopup, closePopup, closeFirstPopup, closeAllPopups } = usePopupsEngineProvider();
|
|
57
|
+
|
|
58
|
+
// открыть попап
|
|
59
|
+
openPopup({ variant: 'MyPopup', popupProps: { title: 'Hello' } });
|
|
60
|
+
|
|
61
|
+
// закрыть последний попап
|
|
62
|
+
closePopup();
|
|
63
|
+
|
|
64
|
+
// закрыть первый попап
|
|
65
|
+
closeFirstPopup();
|
|
66
|
+
|
|
67
|
+
// закрыть все попапы
|
|
68
|
+
closeAllPopups();
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
#### Пропсы openPopup
|
|
72
|
+
|
|
73
|
+
| Проп | Тип | Описание |
|
|
74
|
+
| ---------------- | --------------------- | --------------------------------------------------------- |
|
|
75
|
+
| `variant` | `string` | Ключ попапа из провайдера. |
|
|
76
|
+
| `popupProps` | `Record<string, any>` | Пропсы, которые передаются в попап. |
|
|
77
|
+
| `isCloseAll` | `boolean` | Закрывать ли все попапы при вызове `close` внутри попапа. |
|
|
78
|
+
| `components` | `TPEComponents` | Кастомные компоненты для библиотеки. |
|
|
79
|
+
| `classNames` | `TPEClassNames` | Кастомные классы для компонентов библиотеки. |
|
|
80
|
+
| `motionVariants` | `TPEMotionVariants` | Анимации для `motion` обертки попапа. |
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
## Кастомизация компонентов
|
|
84
|
+
|
|
85
|
+
### Компоненты
|
|
86
|
+
|
|
87
|
+
Можно передавать кастомные компоненты для обертки и лоудера:
|
|
88
|
+
|
|
89
|
+
```tsx
|
|
90
|
+
const components = {
|
|
91
|
+
wrapper: CustomWrapper,
|
|
92
|
+
loader: CustomLoader,
|
|
93
|
+
};
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### Классы
|
|
97
|
+
|
|
98
|
+
Можно передавать кастомные классы для обертки и лоудера:
|
|
99
|
+
|
|
100
|
+
```tsx
|
|
101
|
+
const classNames = {
|
|
102
|
+
wrapper: 'my-wrapper-class',
|
|
103
|
+
loader: 'my-loader-class',
|
|
104
|
+
};
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
## Анимации через motion (motion/react, framer-motion)
|
|
109
|
+
|
|
110
|
+
В каждый попап можно кинуть объект с анимацией motion
|
|
111
|
+
|
|
112
|
+
```tsx
|
|
113
|
+
const motionVariants = {
|
|
114
|
+
initial: { opacity: 0, y: -20 },
|
|
115
|
+
animate: { opacity: 1, y: 0 },
|
|
116
|
+
exit: { opacity: 0, y: 20 },
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
openPopup({ variant: 'MyPopup', motionVariants });
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
## Дженерики
|
|
123
|
+
|
|
124
|
+
TPEComponentWrapper — дженерик для типизации попапов. Библиотека автоматически передает в попап служебные пропсы (например `closePopup`), которые можно использовать внутри компонента.
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
## Минимальный рабочий пример
|
|
128
|
+
|
|
129
|
+
```tsx
|
|
130
|
+
// '@/popup-templates/message'
|
|
131
|
+
export const PopupMessage: TPEComponentWrapper<TPopupMessage> = ({
|
|
132
|
+
title,
|
|
133
|
+
description,
|
|
134
|
+
closePopup,
|
|
135
|
+
}) => {
|
|
136
|
+
return (
|
|
137
|
+
<div>
|
|
138
|
+
<div>
|
|
139
|
+
{title}
|
|
140
|
+
</div>
|
|
141
|
+
|
|
142
|
+
<div>
|
|
143
|
+
{description}
|
|
144
|
+
</div>
|
|
145
|
+
|
|
146
|
+
<button
|
|
147
|
+
type="button"
|
|
148
|
+
onClick={closePopup}
|
|
149
|
+
>
|
|
150
|
+
close
|
|
151
|
+
</button>
|
|
152
|
+
</div>
|
|
153
|
+
);
|
|
154
|
+
};
|
|
155
|
+
|
|
156
|
+
// '@/popup-templates'
|
|
157
|
+
const popups = {
|
|
158
|
+
message: lazy(
|
|
159
|
+
() => import('@views/popup-templates/message'),
|
|
160
|
+
),
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
// '@/show-popup'
|
|
164
|
+
export const ShowPopup = () => {
|
|
165
|
+
const { openPopup } = usePopupsEngineProvider();
|
|
166
|
+
|
|
167
|
+
const handleButtonClick = () => {
|
|
168
|
+
openPopup({
|
|
169
|
+
variant: 'message',
|
|
170
|
+
popupProps: {
|
|
171
|
+
title: `I am popup`,
|
|
172
|
+
description: 'Destroyer of the worlds',
|
|
173
|
+
},
|
|
174
|
+
});
|
|
175
|
+
};
|
|
176
|
+
|
|
177
|
+
return (
|
|
178
|
+
<div>
|
|
179
|
+
<button
|
|
180
|
+
type="button"
|
|
181
|
+
onClick={handleButtonClick}
|
|
182
|
+
>
|
|
183
|
+
Press
|
|
184
|
+
</button>
|
|
185
|
+
</div>
|
|
186
|
+
);
|
|
187
|
+
};
|
|
188
|
+
|
|
189
|
+
// 'app.tsx'
|
|
190
|
+
<PopupsEngineProvider
|
|
191
|
+
popups={popups}
|
|
192
|
+
>
|
|
193
|
+
<ShowPopup />
|
|
194
|
+
|
|
195
|
+
<PopupsEngineRoot />
|
|
196
|
+
</PopupsEngineProvider>
|
|
197
|
+
```
|
package/dist/popups-engine.d.ts
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { Variant } from 'motion/react';
|
|
2
2
|
|
|
3
|
+
/** Утилитарный дженерик для обозначения функционального компонента с пропсами children и className */
|
|
3
4
|
declare type FCClass<P = object> = React.FC<P & React.PropsWithChildren & {
|
|
4
5
|
className?: string;
|
|
5
6
|
}>;
|
|
6
7
|
|
|
7
|
-
export declare const
|
|
8
|
+
export declare const PopupsEngineProvider: FCClass<TPEProvider>;
|
|
8
9
|
|
|
9
|
-
export declare const
|
|
10
|
+
export declare const PopupsEngineRoot: FCClass<TPERoot>;
|
|
10
11
|
|
|
11
12
|
declare type TPEClassNames = {
|
|
12
13
|
[K in keyof TPEMapComponents]?: TPEMapComponents[K]['className'];
|
|
@@ -16,53 +17,97 @@ declare type TPEComponents = {
|
|
|
16
17
|
[K in keyof TPEMapComponents]?: TPEMapComponents[K]['component'];
|
|
17
18
|
};
|
|
18
19
|
|
|
20
|
+
/** Дженерик для частного попапа. Либа передает некоторые методы пропсом в попап, который прокидывают в провайдер */
|
|
21
|
+
export declare type TPEComponentWrapper<K = object> = FCClass<{
|
|
22
|
+
/** Закрыть последний попап */
|
|
23
|
+
closePopup: () => void;
|
|
24
|
+
} & K>;
|
|
25
|
+
|
|
26
|
+
/** Контекст методов */
|
|
19
27
|
declare type TPEContext = {
|
|
28
|
+
/** Открыть попап */
|
|
20
29
|
openPopup: (data: TPEExecute) => void;
|
|
30
|
+
/** Закрыть последний попап */
|
|
21
31
|
closePopup: () => void;
|
|
32
|
+
/** Закрыть первый попап */
|
|
22
33
|
closeFirstPopup: () => void;
|
|
34
|
+
/** Закрыть все попапы */
|
|
23
35
|
closeAllPopups: () => void;
|
|
24
36
|
};
|
|
25
37
|
|
|
38
|
+
/**
|
|
39
|
+
* пропсы openPopup
|
|
40
|
+
*/
|
|
26
41
|
declare type TPEExecute = {
|
|
42
|
+
/** вариант попапа (берется из ключей объекта, переданного в провайдер) */
|
|
27
43
|
variant: string;
|
|
44
|
+
/** пропсы попапа, который хотят вызывать */
|
|
28
45
|
popupProps?: Record<string, any>;
|
|
46
|
+
/** закрыть ли все попапы, если вызвать пропс close, переданный в попап */
|
|
29
47
|
isCloseAll?: boolean;
|
|
48
|
+
/** кастомные компоненты либы */
|
|
30
49
|
components?: TPEComponents;
|
|
50
|
+
/** кастомные классы для компонентов либы */
|
|
31
51
|
classNames?: TPEClassNames;
|
|
52
|
+
/** Варианты анимации обертки для motion */
|
|
32
53
|
motionVariants?: TPEMotionVariants;
|
|
33
54
|
};
|
|
34
55
|
|
|
35
56
|
declare type TPEMapComponents = {
|
|
57
|
+
/** обертка, в которую ставится попап */
|
|
36
58
|
wrapper: {
|
|
59
|
+
/** компонент обертки */
|
|
37
60
|
component: TPEWrapper;
|
|
61
|
+
/** класс обертки */
|
|
38
62
|
className: string;
|
|
39
63
|
};
|
|
64
|
+
/** лоудер, который отображается, когда лези попап грузится (Suspense fallback) */
|
|
40
65
|
loader: {
|
|
66
|
+
/** компонент лоудера */
|
|
41
67
|
component: FCClass;
|
|
68
|
+
/** класс лоудера */
|
|
42
69
|
className: string;
|
|
43
70
|
};
|
|
44
71
|
};
|
|
45
72
|
|
|
73
|
+
/**
|
|
74
|
+
* Варианты анимации обертки для motion
|
|
75
|
+
*/
|
|
46
76
|
declare type TPEMotionVariants = {
|
|
77
|
+
/** Начальное положение обертки */
|
|
47
78
|
initial: Variant;
|
|
79
|
+
/** Активное положение обертки */
|
|
48
80
|
animate: Variant;
|
|
81
|
+
/** Анимация ухода обертки */
|
|
49
82
|
exit: Variant;
|
|
50
83
|
};
|
|
51
84
|
|
|
85
|
+
/** провайдер для открытия попаов */
|
|
52
86
|
declare type TPEProvider = {
|
|
87
|
+
/** частные попапы */
|
|
53
88
|
popups: Record<string, FCClass<any>>;
|
|
54
89
|
};
|
|
55
90
|
|
|
91
|
+
/** Рут для попапов */
|
|
56
92
|
declare type TPERoot = {
|
|
93
|
+
/** аттрибут id рута */
|
|
57
94
|
id?: string;
|
|
95
|
+
/** Каллбак для вызова разрешающего метода скролл лока */
|
|
58
96
|
enableBodyScroll?: () => void;
|
|
97
|
+
/** Каллбак для вызова запрещающего метода скролл лока */
|
|
59
98
|
lockBodyScroll?: () => void;
|
|
60
99
|
};
|
|
61
100
|
|
|
101
|
+
/**
|
|
102
|
+
* Компонент обертки
|
|
103
|
+
*/
|
|
62
104
|
declare type TPEWrapper = FCClass<{
|
|
105
|
+
/**
|
|
106
|
+
* Варианты анимации обертки для motion
|
|
107
|
+
*/
|
|
63
108
|
motionVariants?: TPEMotionVariants;
|
|
64
109
|
}>;
|
|
65
110
|
|
|
66
|
-
export declare const
|
|
111
|
+
export declare const usePopupsEngineProvider: () => TPEContext;
|
|
67
112
|
|
|
68
113
|
export { }
|
package/dist/popups-engine.js
CHANGED
|
@@ -4975,7 +4975,7 @@ const wu = {
|
|
|
4975
4975
|
return /* @__PURE__ */ k(Xs.Provider, { value: l, children: /* @__PURE__ */ k(Ys.Provider, { value: c, children: /* @__PURE__ */ k(qs.Provider, { value: u, children: e }) }) });
|
|
4976
4976
|
};
|
|
4977
4977
|
export {
|
|
4978
|
-
ju as
|
|
4979
|
-
Ou as
|
|
4980
|
-
Zs as
|
|
4978
|
+
ju as PopupsEngineProvider,
|
|
4979
|
+
Ou as PopupsEngineRoot,
|
|
4980
|
+
Zs as usePopupsEngineProvider
|
|
4981
4981
|
};
|
package/package.json
CHANGED
|
@@ -1,54 +1,55 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@barabel324/popups-engine",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"type": "module",
|
|
5
|
-
"main": "./dist/popups-engine.js",
|
|
6
|
-
"types": "./dist/popups-engine.d.ts",
|
|
7
|
-
"exports": {
|
|
8
|
-
".": {
|
|
9
|
-
"import": "./dist/popups-engine.js"
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
"
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
"react
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
"@
|
|
37
|
-
"@
|
|
38
|
-
"@
|
|
39
|
-
"@types/
|
|
40
|
-
"@types/react
|
|
41
|
-
"@
|
|
42
|
-
"
|
|
43
|
-
"eslint
|
|
44
|
-
"eslint-plugin-react-
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"react
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"typescript
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
|
|
54
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@barabel324/popups-engine",
|
|
3
|
+
"version": "0.0.4",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"main": "./dist/popups-engine.js",
|
|
6
|
+
"types": "./dist/popups-engine.d.ts",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"import": "./dist/popups-engine.js"
|
|
10
|
+
},
|
|
11
|
+
"./css": "./dist/popups-engine.css"
|
|
12
|
+
},
|
|
13
|
+
"files": [
|
|
14
|
+
"dist"
|
|
15
|
+
],
|
|
16
|
+
"repository": {
|
|
17
|
+
"type": "git",
|
|
18
|
+
"url": "git+https://github.com/barabel/popups-engine.git"
|
|
19
|
+
},
|
|
20
|
+
"scripts": {
|
|
21
|
+
"dev": "vite",
|
|
22
|
+
"build": "tsc -b && vite build",
|
|
23
|
+
"lint": "eslint .",
|
|
24
|
+
"lintFix": "eslint . --fix",
|
|
25
|
+
"preview": "vite preview",
|
|
26
|
+
"prepublishOnly": "npm run build"
|
|
27
|
+
},
|
|
28
|
+
"peerDependencies": {
|
|
29
|
+
"react": "^19.2.3",
|
|
30
|
+
"react-dom": "^19.2.3"
|
|
31
|
+
},
|
|
32
|
+
"dependencies": {
|
|
33
|
+
"motion": "^12.24.7"
|
|
34
|
+
},
|
|
35
|
+
"devDependencies": {
|
|
36
|
+
"@eslint/js": "^9.39.1",
|
|
37
|
+
"@microsoft/api-extractor": "^7.55.2",
|
|
38
|
+
"@stylistic/eslint-plugin": "^5.6.1",
|
|
39
|
+
"@types/node": "^24.10.1",
|
|
40
|
+
"@types/react": "^19.2.5",
|
|
41
|
+
"@types/react-dom": "^19.2.3",
|
|
42
|
+
"@vitejs/plugin-react": "^5.1.1",
|
|
43
|
+
"eslint": "^9.39.1",
|
|
44
|
+
"eslint-plugin-react-hooks": "^7.0.1",
|
|
45
|
+
"eslint-plugin-react-refresh": "^0.4.24",
|
|
46
|
+
"globals": "^16.5.0",
|
|
47
|
+
"react": "^19.2.3",
|
|
48
|
+
"react-dom": "^19.2.3",
|
|
49
|
+
"sass-embedded": "^1.97.2",
|
|
50
|
+
"typescript": "~5.9.3",
|
|
51
|
+
"typescript-eslint": "^8.46.4",
|
|
52
|
+
"unplugin-dts": "^1.0.0-beta.6",
|
|
53
|
+
"vite": "^7.2.4"
|
|
54
|
+
}
|
|
55
|
+
}
|