@barabel324/popups-engine 0.0.7 → 0.0.8

package/README.md

@@ -1,8 +1,8 @@
 # Popups-engine
 
-Движок для управления попапами в React с поддержкой кастомных компонентов и анимаций через motion.
+Движок для управления попапами в React с поддержкой кастомных компонентов и анимаций через `motion`.
 
-Версия motion "^12.24.7"
+Версия `motion`: **^12.24.7**
 
 ## Установка
 
@@ -17,76 +17,78 @@ npm i @barabel324/popups-engine
 Провайдер для регистрации и управления попапами.
 
 ```tsx
-<PopupsEngineProvider
-  popups={popups}
->
+<PopupsEngineProvider popups={popups}>
   {children}
 
   <PopupsEngineRoot
     id="popups-root"
-    lockBodyScroll={() => document.body.style.overflow = 'hidden'}
-    enableBodyScroll={() => document.body.style.overflow = ''}
+    lockBodyScroll={() => (document.body.style.overflow = 'hidden')}
+    enableBodyScroll={() => (document.body.style.overflow = '')}
   />
 </PopupsEngineProvider>
 ```
 
 ### PopupsEngineRoot
 
-Компонент, который рендерит все попапы и обертки. Обычно располагается один раз в корне приложения.
+Компонент, который рендерит все попапы и обёртки. Обычно используется один раз в корне приложения.
 
 ```tsx
 <PopupsEngineRoot
   id="popups-root"
-  lockBodyScroll={() => document.body.style.overflow = 'hidden'}
-  enableBodyScroll={() => document.body.style.overflow = ''}
+  lockBodyScroll={() => (document.body.style.overflow = 'hidden')}
+  enableBodyScroll={() => (document.body.style.overflow = '')}
 />
 ```
 
-| Проп               | Тип          | Описание                                     |
-| ------------------ | ------------ | -------------------------------------------- |
-| `id`               | `string`     | Атрибут `id` для корневого элемента попапов. |
-| `lockBodyScroll`   | `() => void` | Функция блокировки скролла страницы.         |
-| `enableBodyScroll` | `() => void` | Функция разблокировки скролла страницы.      |
+#### Пропсы
 
-`PopupsEngineProvider` должен оборачивать приложение, а `PopupsEngineRoot` должен быть отрендерен внутри него (обычно один раз).
+| Проп               | Тип                 | Описание                                                           |
+| ------------------ | ------------------- | ------------------------------------------------------------------ |
+| `id`               | `string`            | `id` атрибут для корневого элемента попапов                        |
+| `lockBodyScroll`   | `() => void`        | Функция блокировки скролла страницы                                |
+| `enableBodyScroll` | `() => void`        | Функция разблокировки скролла страницы                             |
+| `components`       | `TPEComponents`     | Кастомные компоненты. `openPopup` имеет приоритет над этим пропсом |
+| `classNames`       | `TPEClassNames`     | Кастомные классы. `openPopup` имеет приоритет над этим пропсом     |
+| `motionVariants`   | `TPEMotionVariants` | Анимации для `motion`-обёртки попапа. `openPopup` имеет приоритет  |
 
-### Хук usePopupsEngineProvider
+`PopupsEngineProvider` должен оборачивать приложение, а `PopupsEngineRoot` должен быть отрендерен внутри него.
+
+## Хук usePopupsEngineProvider
 
 Позволяет управлять попапами внутри компонентов.
 
 ```ts
-const { openPopup, closePopup, closeFirstPopup, closeAllPopups } = usePopupsEngineProvider();
+const {
+  openPopup,
+  closePopup,
+  closeFirstPopup,
+  closeAllPopups,
+} = usePopupsEngineProvider();
 
-// открыть попап
 openPopup({ variant: 'MyPopup', popupProps: { title: 'Hello' } });
-
-// закрыть последний попап
 closePopup();
-
-// закрыть первый попап
 closeFirstPopup();
-
-// закрыть все попапы
 closeAllPopups();
 ```
 
-#### Пропсы openPopup
+### Пропсы openPopup
 
-| Проп             | Тип                   | Описание                                                  |
-| ---------------- | --------------------- | --------------------------------------------------------- |
-| `variant`        | `string`              | Ключ попапа из провайдера.                                |
-| `popupProps`     | `Record<string, any>` | Пропсы, которые передаются в попап.                       |
-| `isCloseAll`     | `boolean`             | Закрывать ли все попапы при вызове `close` внутри попапа. |
-| `components`     | `TPEComponents`       | Кастомные компоненты для библиотеки.                      |
-| `classNames`     | `TPEClassNames`       | Кастомные классы для компонентов библиотеки.              |
-| `motionVariants` | `TPEMotionVariants`   | Анимации для `motion` обертки попапа.                     |
+| Проп             | Тип                   | Описание                                                               |
+| ---------------- | --------------------- | ---------------------------------------------------------------------- |
+| `variant`        | `string`              | Ключ попапа, зарегистрированного в провайдере                          |
+| `popupProps`     | `Record<string, any>` | Пропсы, передаваемые в компонент попапа                                |
+| `isCloseAll`     | `boolean`             | Закрывать ли все попапы при вызове `close` внутри попапа               |
+| `components`     | `TPEComponents`       | Кастомные компоненты. Приоритет над `PopupsEngineRoot`                 |
+| `classNames`     | `TPEClassNames`       | Кастомные классы. Приоритет над `PopupsEngineRoot`                     |
+| `motionVariants` | `TPEMotionVariants`   | Анимации для `motion`-обёртки попапа. Приоритет над `PopupsEngineRoot` |
 
+## Кастомизация
 
-## Кастомизация компонентов
+Кастомизация возможна глобально через `PopupsEngineRoot` или локально через `openPopup`.
 
-### Компоненты
+Пропсы, переданные в `openPopup`, имеют приоритет над пропсами `PopupsEngineRoot`.
 
-Можно передавать кастомные компоненты для обертки и лоудера:
+### Компоненты
 
 ```tsx
 const components = {
@@ -97,8 +99,6 @@ const components = {
 
 ### Классы
 
-Можно передавать кастомные классы для обертки и лоудера:
-
 ```tsx
 const classNames = {
   wrapper: 'my-wrapper-class',
@@ -106,10 +106,7 @@ const classNames = {
 };
 ```
 
-
-## Анимации через motion (motion/react, framer-motion)
-
-В каждый попап можно кинуть объект с анимацией motion
+## Анимации (motion / framer-motion)
 
 ```tsx
 const motionVariants = {
@@ -117,16 +114,13 @@ const motionVariants = {
   animate: { opacity: 1, y: 0 },
   exit: { opacity: 0, y: 20 },
 };
-
-openPopup({ variant: 'MyPopup', motionVariants });
 ```
 
 ## Дженерики
 
-TPEComponentWrapper — дженерик для типизации попапов. Библиотека автоматически передает в попап служебные пропсы (например `closePopup`), которые можно использовать внутри компонента.
-
+`TPEComponentWrapper` — дженерик для типизации попапов. Библиотека автоматически передаёт в компонент служебные пропсы (например, `closePopup`).
 
-## Минимальный рабочий пример
+## Минимальный пример
 
 ```tsx
 // '@/popup-templates/message'
@@ -134,66 +128,49 @@ export const PopupMessage: TPEComponentWrapper<TPopupMessage> = ({
   title,
   description,
   closePopup,
-}) => {
-  return (
-    <div>
-      <div>
-        {title}
-      </div>
-
-      <div>
-        {description}
-      </div>
-
-      <button
-        type="button"
-        onClick={closePopup}
-      >
-        close
-      </button>
-    </div>
-  );
-};
+}) => (
+  <div>
+    <div>{title}</div>
+    <div>{description}</div>
+    <button type="button" onClick={closePopup}>
+      close
+    </button>
+  </div>
+);
 
 // '@/popup-templates'
 const popups = {
-  message: lazy(
-    () => import('@views/popup-templates/message'),
-  ),
+  message: lazy(() => import('@views/popup-templates/message')),
 };
 
 // '@/show-popup'
 export const ShowPopup = () => {
   const { openPopup } = usePopupsEngineProvider();
 
-  const handleButtonClick = () => {
-    openPopup({
-      variant: 'message',
-      popupProps: {
-        title: `I am popup`,
-        description: 'Destroyer of the worlds',
-      },
-    });
-  };
-
   return (
-    <div>
-      <button
-        type="button"
-        onClick={handleButtonClick}
-      >
-        Press
-      </button>
-    </div>
+    <button
+      type="button"
+      onClick={() =>
+        openPopup({
+          variant: 'message',
+          popupProps: {
+            title: 'I am popup',
+            description: 'Destroyer of the worlds',
+          },
+        })
+      }
+    >
+      Press
+    </button>
   );
 };
 
 // 'app.tsx'
-<PopupsEngineProvider
-  popups={popups}
->
-  <ShowPopup />
+import { PopupsEngineProvider, PopupsEngineRoot } from '@barabel324/popups-engine';
+import '@barabel324/popups-engine/css';
 
+<PopupsEngineProvider popups={popups}>
+  <ShowPopup />
   <PopupsEngineRoot />
 </PopupsEngineProvider>
 ```

package/dist/popups-engine.d.ts

@@ -92,6 +92,12 @@ declare type TPEProvider = {
 declare type TPERoot = {
     /** аттрибут id рута */
     id?: string;
+    /** кастомные компоненты либы */
+    components?: TPEComponents;
+    /** кастомные классы для компонентов либы */
+    classNames?: TPEClassNames;
+    /** Варианты анимации обертки для motion */
+    motionVariants?: TPEMotionVariants;
     /** Каллбак для вызова разрешающего метода скролл лока */
     enableBodyScroll?: () => void;
     /** Каллбак для вызова запрещающего метода скролл лока */

package/dist/popups-engine.js

@@ -1,7 +1,7 @@
-import { jsx as o } from "react/jsx-runtime";
-import { createContext as g, useContext as x, useRef as N, useEffect as h, Suspense as V, useState as D, useCallback as O, useMemo as f } from "react";
-import { motion as R, AnimatePresence as $ } from "motion/react";
-const y = g({
+import { jsx as n } from "react/jsx-runtime";
+import { createContext as g, useContext as x, useRef as O, useEffect as y, Suspense as R, useState as $, useCallback as b, useMemo as f } from "react";
+import { motion as j, AnimatePresence as F } from "motion/react";
+const L = g({
   openPopup: () => {
   },
   closePopup: () => {
@@ -10,140 +10,143 @@ const y = g({
   },
   closeAllPopups: () => {
   }
-}), w = g({
+}), k = g({
   popupList: []
-}), L = g({
+}), A = g({
   popups: {}
-}), k = () => x(y), b = () => x(w), j = () => x(L), F = "_parent_wmksm_1", I = {
-  parent: F
-}, S = {
+}), V = () => x(L), I = () => x(k), S = () => x(A), z = "_parent_wmksm_1", K = {
+  parent: z
+}, M = {
   initial: { opacity: 0 },
   animate: { opacity: 1 },
   exit: { opacity: 0 }
-}, z = ({
-  className: n,
-  motionVariants: u = S,
+}, q = ({
+  className: o,
+  motionVariants: u = M,
   children: p
 }) => {
-  const t = N(null), { closePopup: e } = k(), a = (r) => {
-    r.target === t.current && e();
+  const t = O(null), { closePopup: r } = V(), i = (c) => {
+    c.target === t.current && r();
   };
-  return /* @__PURE__ */ o(
-    R.div,
+  return /* @__PURE__ */ n(
+    j.div,
     {
       variants: u,
       initial: "initial",
       animate: "animate",
       exit: "exit",
       ref: t,
-      className: n ?? I.parent,
-      onClick: a,
+      className: o ?? K.parent,
+      onClick: i,
       children: p
     }
   );
-}, K = "_parent_1ud1o_1", M = {
-  parent: K
-}, q = ({
-  className: n
-}) => /* @__PURE__ */ o(
+}, G = "_parent_1ud1o_1", H = {
+  parent: G
+}, J = ({
+  className: o
+}) => /* @__PURE__ */ n(
   "div",
   {
-    className: n ?? M.parent,
+    className: o ?? H.parent,
     children: "Loading..."
   }
-), Q = ({
-  className: n,
+), W = ({
+  className: o,
   id: u = "popups-engine-root",
-  enableBodyScroll: p,
-  lockBodyScroll: t
+  components: p,
+  classNames: t,
+  motionVariants: r,
+  enableBodyScroll: i,
+  lockBodyScroll: c
 }) => {
-  const { popupList: e } = b(), { popups: a } = j(), { closePopup: r, closeAllPopups: l } = k();
-  return h(() => (e.length > 0 && t?.(), () => {
-    e.length > 0 && p?.();
+  const { popupList: s } = I(), { popups: v } = S(), { closePopup: l, closeAllPopups: P } = V();
+  return y(() => (s.length > 0 && c?.(), () => {
+    s.length > 0 && i?.();
   }), [
-    e,
-    p,
-    t
-  ]), h(() => {
-    const i = (P) => {
-      P.key === "Escape" && (e.at(-1)?.isCloseAll ? l : r)();
+    s,
+    i,
+    c
+  ]), y(() => {
+    const e = (m) => {
+      m.key === "Escape" && (s.at(-1)?.isCloseAll ? P : l)();
     };
-    return e.length > 0 && window.addEventListener("keydown", i), () => {
-      window.removeEventListener("keydown", i);
+    return s.length > 0 && window.addEventListener("keydown", e), () => {
+      window.removeEventListener("keydown", e);
     };
   }, [
-    e,
-    r,
-    l
-  ]), /* @__PURE__ */ o(
+    s,
+    l,
+    P
+  ]), /* @__PURE__ */ n(
     "div",
     {
-      className: n,
+      className: o,
       id: u,
-      children: /* @__PURE__ */ o($, { children: e.map((i) => {
+      children: /* @__PURE__ */ n(F, { children: s.map((e) => {
         const {
-          popupID: P,
-          variant: d,
-          popupProps: s,
-          isCloseAll: v,
-          components: c,
-          classNames: E,
-          motionVariants: m
-        } = i, A = c?.wrapper ?? z, _ = c?.loader ?? q, C = a[d];
-        return C ? /* @__PURE__ */ o(
-          A,
+          popupID: m,
+          variant: a,
+          popupProps: E,
+          isCloseAll: d,
+          components: w,
+          classNames: C,
+          motionVariants: _
+        } = e, N = w?.wrapper || p?.wrapper || q, D = w?.loader || p?.loader || J, h = v[a];
+        return h ? /* @__PURE__ */ n(
+          N,
           {
-            className: E?.wrapper,
-            motionVariants: m,
-            children: /* @__PURE__ */ o(
-              V,
+            className: C?.wrapper || t?.wrapper,
+            motionVariants: _ || r,
+            children: /* @__PURE__ */ n(
+              R,
               {
-                fallback: /* @__PURE__ */ o(_, { className: E?.loader }),
-                children: /* @__PURE__ */ o(
-                  C,
+                fallback: /* @__PURE__ */ n(D, { className: C?.loader || t?.loader }),
+                children: /* @__PURE__ */ n(
+                  h,
                   {
-                    ...s,
-                    closePopup: v ? l : r
+                    ...E,
+                    closePopup: d ? P : l
                   }
                 )
               }
             )
           },
-          P
+          m
         ) : null;
       }) })
     }
   );
-}, T = ({
-  popups: n,
+}, X = ({
+  popups: o,
   children: u
 }) => {
-  const [p, t] = D([]), e = O((s) => {
-    const v = Object.keys(n), { variant: c } = s;
-    c && (v.some((m) => m === c) ? t((m) => [...m, {
-      ...s,
+  const [p, t] = $([]), r = b((e) => {
+    const m = Object.keys(o), { variant: a } = e;
+    a && (m.some((d) => d === a) ? t((d) => [...d, {
+      ...e,
       popupID: Date.now()
-    }]) : console.error(`there are no "${c}" popup`));
-  }, [n]), a = () => {
-    t((s) => s.slice(0, -1));
-  }, r = () => {
-    t((s) => s.slice(1));
-  }, l = () => {
+    }]) : console.error(`there are no "${a}" popup`));
+  }, [o]), i = () => {
+    t((e) => e.slice(0, -1));
+  }, c = () => {
+    t((e) => e.slice(1));
+  }, s = () => {
     t(() => []);
-  }, i = f(() => ({
-    openPopup: e,
-    closePopup: a,
-    closeFirstPopup: r,
-    closeAllPopups: l
-  }), [e]), P = f(() => ({
+  }, v = f(() => ({
+    openPopup: r,
+    closePopup: i,
+    closeFirstPopup: c,
+    closeAllPopups: s
+  }), [r]), l = f(() => ({
     popupList: p
-  }), [p]), d = f(() => ({
-    popups: n
-  }), [n]);
-  return /* @__PURE__ */ o(y.Provider, { value: i, children: /* @__PURE__ */ o(w.Provider, { value: P, children: /* @__PURE__ */ o(L.Provider, { value: d, children: u }) }) });
+  }), [p]), P = f(() => ({
+    popups: o
+  }), [o]);
+  return /* @__PURE__ */ n(L.Provider, { value: v, children: /* @__PURE__ */ n(k.Provider, { value: l, children: /* @__PURE__ */ n(A.Provider, { value: P, children: u }) }) });
 };
 export {
-  T as PopupsEngineProvider,
-  Q as PopupsEngineRoot,
-  k as usePopupsEngineProvider
+  X as PopupsEngineProvider,
+  W as PopupsEngineRoot,
+  V as usePopupsEngineProvider
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barabel324/popups-engine",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "main": "./dist/popups-engine.js",
   "types": "./dist/popups-engine.d.ts",