@ashtuka/react-lib 1.0.39 → 1.0.42

package/README.md

@@ -2,5 +2,16 @@
 
 React-бібліотека компонентів (для навчання)
 Поточні обмеження:
-- модуль, призначений для експорту, повинен лежати в теці modules у своїй власній паці з назвою, що закінчується на Modules
-- наразі не реалізована можливість використовувати один модуль у середині іншого (при build не буде теки shared, де буде вказано правильний порядок імпортів. Наразі в нас плоска структура entry point)
+- модуль, призначений для експорту, повинен лежати в теці modules у своїй власній паці з назвою, що закінчується на Module
+- наразі не реалізована можливість використовувати один модуль у середині іншого (при build не буде теки shared, де буде вказано правильний порядок імпортів. В нас плоска структура entry point)
+- якщо модуль використовує якийсь компонент з папки components то необхідно явно імпортувати scss файл цього компонента у scss файлі модуля який використовує цей компонент. Кейс коли компонент має більше ніж один scss файл не тестувався. По можливості модуль має бути повністю автономним і все йому необхідне має інкапсулювати у собі. 
+
+
+Якщо додали новий модуль, то перед build необхідно викликати npm run updBuildConfig
+Потрібно подивитися, що попадає у фінальну збірку, яка використовує цю бібліотеку
+
+короткостроково
+розібратися з варнінгами в консолі (поки gpt нічого путнього не рекомендує )
+The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
+Deprecation Warning [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+Передивитися модулі на предмет використання svg icon як посилання в тезі img (переробити на ReactComponent)

package/dist/chunks/LoadAbleImg-jaQDlIaY.mjs

@@ -0,0 +1,75 @@
+import { S as I, g as f } from "./Service-uGKXRZVE.mjs";
+import { jsx as a, jsxs as L } from "react/jsx-runtime";
+import { useState as p, useRef as u, useEffect as y } from "react";
+import { a as S } from "../hooks/useOnScreen-CpqVO1-u.mjs";
+const v = f(), x = "/api";
+class T extends I {
+  constructor() {
+    super(v, x);
+  }
+  async fetchHeaderData() {
+    return this.request("/menu-v3/new/root", {});
+  }
+  async fetchFooterData() {
+    return this.request("/menu/footer/root", {});
+  }
+}
+const H = "_loadAbleImg_container_1ie9c_1", N = "_loadAbleImg_containerLoaded_1ie9c_30", R = "_loadAbleImg_image_1ie9c_34", j = "_loadAbleImg_imageLoaded_1ie9c_42", e = {
+  loadAbleImg_container: H,
+  loadAbleImg_containerLoaded: N,
+  loadAbleImg_image: R,
+  loadAbleImg_imageLoaded: j
+}, h = ({
+  src: o,
+  srcWebp: d = "",
+  alt: m = "",
+  onLoad: b = () => {
+  },
+  width: t = "100%",
+  height: s = "100%"
+}) => {
+  const [l, c] = p(!1), n = u(null), i = u(null), r = S(i);
+  y(() => {
+    var _;
+    r && (_ = n.current) != null && _.complete && c(!0);
+  }, [r]);
+  const g = () => {
+    c(!0), b();
+  }, A = d ? /* @__PURE__ */ L("picture", { children: [
+    /* @__PURE__ */ a("source", { srcSet: d, type: "image/webp" }),
+    /* @__PURE__ */ a(
+      "img",
+      {
+        ref: n,
+        src: o,
+        alt: m,
+        style: { width: t, height: s },
+        className: l ? e.loadAbleImg_imageLoaded : e.loadAbleImg_image,
+        onLoad: g
+      }
+    )
+  ] }) : /* @__PURE__ */ a(
+    "img",
+    {
+      ref: n,
+      src: o,
+      alt: m,
+      style: { width: t, height: s },
+      className: l ? e.loadAbleImg_imageLoaded : e.loadAbleImg_image,
+      onLoad: g
+    }
+  );
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ref: i,
+      style: { width: t, height: s },
+      className: l ? e.loadAbleImg_containerLoaded : e.loadAbleImg_container,
+      children: r && A
+    }
+  );
+};
+export {
+  h as L,
+  T as a
+};

package/dist/chunks/Service-uGKXRZVE.mjs

@@ -0,0 +1,47 @@
+var S = Object.defineProperty;
+var g = (o, s, r) => s in o ? S(o, s, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[s] = r;
+var n = (o, s, r) => g(o, typeof s != "symbol" ? s + "" : s, r);
+import m from "axios";
+const d = () => ["localhost", "test.polis.ua", "polisua-dev.svc.cluster.local"].some((s) => window.location.hostname.includes(s)) ? "https://test.polis.ua" : "https://polis.ua";
+class E {
+  constructor(s, r) {
+    n(this, "BASE_PATH");
+    n(this, "HOST");
+    this.BASE_PATH = r, this.HOST = s;
+  }
+  async request(s, r) {
+    let e = `${this.HOST}${this.BASE_PATH}${s}`;
+    const {
+      method: a = "GET",
+      data: c,
+      params: i,
+      headers: l
+    } = r;
+    if (i) {
+      const t = new URL(e), u = new URLSearchParams({ ...i });
+      t.search = u.toString(), e = t.toString();
+    }
+    const h = {
+      url: e.toString(),
+      method: a,
+      data: c,
+      headers: l
+    };
+    try {
+      return (await m.request(h)).data;
+    } catch (t) {
+      throw console.error(`API Error on ${a} ${s}:`, t), new Error(
+        JSON.stringify({
+          message: "Request failed",
+          endpoint: s,
+          method: a,
+          originalError: t instanceof Error ? t.message : String(t)
+        })
+      );
+    }
+  }
+}
+export {
+  E as S,
+  d as g
+};

package/dist/chunks/breakpoints-BOwHOeQN.mjs

@@ -0,0 +1,8 @@
+const s = 320, o = 768, t = 992, a = 1200, c = 1400;
+export {
+  t as L,
+  o as M,
+  s as S,
+  c as X,
+  a
+};

package/dist/chunks/file-C_N83pgK.mjs

@@ -0,0 +1,5 @@
+import * as C from "react";
+const t = (e) => /* @__PURE__ */ C.createElement("svg", { width: 16, height: 20, viewBox: "0 0 16 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ C.createElement("path", { d: "M10 0L16 6V18C16 18.5304 15.7893 19.0391 15.4142 19.4142C15.0391 19.7893 14.5304 20 14 20H2C1.46957 20 0.960859 19.7893 0.585786 19.4142C0.210714 19.0391 0 18.5304 0 18V2C0 1.46957 0.210714 0.960859 0.585786 0.585786C0.960859 0.210714 1.46957 0 2 0H10ZM14 18V7H9V2H2V18H14ZM6.92 10.31C6.68 9.54 6.15 7.08 7.55 7.04C8.95 7 8.03 10.16 8.03 10.16C8.42 11.65 10.05 12.72 10.05 12.72C10.55 12.57 13.4 12.24 13 13.72C12.57 15.2 9.5 13.81 9.5 13.81C7.55 13.95 6.09 14.47 6.09 14.47C4.96 16.58 3.64 17.5 3.1 16.61C2.43 15.5 5.23 14.07 5.23 14.07C6.68 11.72 6.9 10.35 6.92 10.31ZM7.57 11.15C7.17 12.45 6.37 13.84 6.37 13.84C7.22 13.5 9.08 13.11 9.08 13.11C7.94 12.11 7.59 11.16 7.57 11.15ZM10.71 13.32C10.71 13.32 12.46 13.97 12.5 13.71C12.57 13.44 11.17 13.2 10.71 13.32ZM5.05 14.81C4.28 15.11 3.54 16.39 3.72 16.39C3.9 16.4 4.63 15.79 5.05 14.81ZM7.57 9.26C7.57 9.21 8 7.58 7.57 7.53C7.27 7.5 7.56 9.22 7.57 9.26Z", fill: "#2D2B2B" }));
+export {
+  t as S
+};

package/dist/chunks/index-BDjvzGbZ.mjs

@@ -0,0 +1,44 @@
+function c(n) {
+  return n && n.__esModule && Object.prototype.hasOwnProperty.call(n, "default") ? n.default : n;
+}
+var f = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+(function(n) {
+  (function() {
+    var i = {}.hasOwnProperty;
+    function s() {
+      for (var t = "", r = 0; r < arguments.length; r++) {
+        var e = arguments[r];
+        e && (t = o(t, u(e)));
+      }
+      return t;
+    }
+    function u(t) {
+      if (typeof t == "string" || typeof t == "number")
+        return t;
+      if (typeof t != "object")
+        return "";
+      if (Array.isArray(t))
+        return s.apply(null, t);
+      if (t.toString !== Object.prototype.toString && !t.toString.toString().includes("[native code]"))
+        return t.toString();
+      var r = "";
+      for (var e in t)
+        i.call(t, e) && t[e] && (r = o(r, e));
+      return r;
+    }
+    function o(t, r) {
+      return r ? t ? t + " " + r : t + r : t;
+    }
+    n.exports ? (s.default = s, n.exports = s) : window.classNames = s;
+  })();
+})(f);
+var a = f.exports;
+const p = /* @__PURE__ */ c(a);
+export {
+  p as c
+};

package/dist/chunks/spinner-By2573Fq.mjs

@@ -0,0 +1,10 @@
+import * as e from "react";
+const r = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", style: {
+  margin: "auto",
+  background: "none",
+  display: "block",
+  shapeRendering: "auto"
+}, width: "170px", height: "170px", viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid", ...t }, /* @__PURE__ */ e.createElement("circle", { cx: 50, cy: 50, r: 30, strokeWidth: 2, stroke: "#0a994a", strokeDasharray: "47.12388980384689 47.12388980384689", fill: "none", strokeLinecap: "round" }, /* @__PURE__ */ e.createElement("animateTransform", { attributeName: "transform", type: "rotate", dur: "1.4285714285714284s", repeatCount: "indefinite", keyTimes: "0;1", values: "0 50 50;360 50 50" })), /* @__PURE__ */ e.createElement("circle", { cx: 50, cy: 50, r: 27, strokeWidth: 2, stroke: "#EB5757", strokeDasharray: "42.411500823462205 42.411500823462205", strokeDashoffset: 42.411500823462205, fill: "none", strokeLinecap: "round" }, /* @__PURE__ */ e.createElement("animateTransform", { attributeName: "transform", type: "rotate", dur: "1.4285714285714284s", repeatCount: "indefinite", keyTimes: "0;1", values: "0 50 50;-360 50 50" })));
+export {
+  r as S
+};

package/dist/components/LoadAbleImg/LoadAbleImg.d.ts

@@ -6,4 +6,4 @@ export interface ILoadableImage {
     height?: string;
     onLoad?(): void;
 }
-export declare function LoadableImg(props: ILoadableImage): import("react/jsx-runtime").JSX.Element;
+export declare const LoadableImg: ({ src, srcWebp, alt, onLoad, width, height, }: ILoadableImage) => import("react/jsx-runtime").JSX.Element;

package/dist/constants/breakpoints.d.ts

@@ -1,3 +1,4 @@
+export declare const S = 320;
 export declare const SM = 576;
 export declare const MD = 768;
 export declare const LG = 992;

package/dist/hooks/index.d.ts

@@ -1,2 +1,4 @@
 export { default as useDevice } from './useDevice';
 export { default as useOnScreen } from './useOnScreen';
+export { default as useOutsideClick } from './useOutsideClick';
+export { default as useBreakPoint } from './useBreakPoint';

package/dist/hooks/index.es.js

@@ -1,5 +1,9 @@
-import { u as a, a as r } from "./useOnScreen-CpqVO1-u.mjs";
+import { u as r, a as u } from "./useOnScreen-CpqVO1-u.mjs";
+import { u as a } from "./useOutsideClick-DPN2gHf5.mjs";
+import { u as i } from "./useBreakPoint-C-91njOc.mjs";
 export {
-  a as useDevice,
-  r as useOnScreen
+  i as useBreakPoint,
+  r as useDevice,
+  u as useOnScreen,
+  a as useOutsideClick
 };

package/dist/hooks/useBreakPoint-C-91njOc.mjs

@@ -0,0 +1,13 @@
+import { useState as r, useEffect as h } from "react";
+const o = (t) => {
+  const [n, s] = r(!1);
+  return h(() => {
+    const e = window.matchMedia(`(max-width: ${t}px)`);
+    s(e.matches);
+    const a = (c) => s(c.matches);
+    return e.addEventListener("change", a), () => e.removeEventListener("change", a);
+  }, [t]), n;
+};
+export {
+  o as u
+};

package/dist/hooks/useBreakPoint.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Хук визначає, чи відповідає поточна ширина вікна браузера
+ * умові `max-width` для заданого брейкпоінта.
+ *
+ * Використовує `window.matchMedia`, тому працює так само,
+ * як CSS media-query `(max-width: Npx)`.
+ *
+ * @param breakpoint - Максимальна ширина вікна браузера в пікселях (включно),
+ * при якій хук повертає `true`.
+ *
+ * @returns true, якщо ширина вікна менша або дорівнює `breakpoint`,
+ * інакше false.
+ *
+ * @example
+ * ```ts
+ * const isMobile = useBreakPoint(768);
+ *
+ * if (isMobile) {
+ *   console.log('Користувач на мобільному пристрої');
+ * }
+ * ```
+ */
+declare const useBreakPoint: (breakpoint: number) => boolean;
+export default useBreakPoint;

package/dist/hooks/useOutsideClick-DPN2gHf5.mjs

@@ -0,0 +1,15 @@
+import { useEffect as s } from "react";
+function r(t, i) {
+  s(() => {
+    const n = (c) => {
+      const o = t == null ? void 0 : t.current;
+      !o || o.contains(c == null ? void 0 : c.target) || i(c);
+    };
+    return document.addEventListener("click", n), () => {
+      document.removeEventListener("click", n);
+    };
+  }, [t, i]);
+}
+export {
+  r as u
+};

package/dist/hooks/useOutsideClick.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Хук відслідковує кліки поза зазначеним елементом і викликає заданий обробник.
+ *
+ * @param ref - Ref-об’єкт елемента, за межами якого потрібно відслідковувати кліки.
+ * @param handler - Функція, яка буде викликана при кліку поза елементом.
+ *
+ * @example
+ * ```ts
+ * const ref = useRef<HTMLDivElement>(null);
+ * const [isOpen, setOpen] = useState(false);
+ *
+ * useOutsideClick(ref, () => setOpen(false));
+ *
+ * return (
+ *   <div ref={ref}>
+ *     {isOpen && <div>Вміст модального вікна</div>}
+ *   </div>
+ * );
+ * ```
+ */
+import { RefObject } from 'react';
+export default function useOutsideClick<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, handler: (event: Event) => void): void;

package/dist/index.d.ts

@@ -2,3 +2,17 @@ export { PageLoaderModule } from './modules/PageLoaderModule';
 export type { PageLoaderModuleProps } from './modules/PageLoaderModule';
 export { FooterV2Module } from './modules/FooterV2Module';
 export type { FooterV2ModuleProps } from './modules/FooterV2Module';
+export { HeaderV5Module } from './modules/HeaderV5Module';
+export type { HeaderV5ModuleProps } from './modules/HeaderV5Module';
+export { CrumbsModule } from './modules/CrumbsModule';
+export type { CrumbsModuleProps } from './modules/CrumbsModule';
+export { SuccessPaymentModule } from './modules/SuccessPaymentModule';
+export type { SuccessPaymentModuleProps } from './modules/SuccessPaymentModule';
+export { ErrorPaymentModule } from './modules/ErrorPaymentModule';
+export type { ErrorPaymentModuleProps } from './modules/ErrorPaymentModule';
+export { DiyaModule } from './modules/DiyaModule';
+export type { DiyaModuleProps } from './modules/DiyaModule';
+export { OtpModule } from './modules/OtpModule';
+export type { OtpModuleProps } from './modules/OtpModule';
+export { AuthModule } from './modules/AuthModule';
+export type { AuthModuleProps } from './modules/AuthModule';

package/dist/index.es.js

@@ -1,6 +1,20 @@
-import { P as r } from "./modules/PageLoaderModule/PageLoaderModule-D6yGXr6Z.mjs";
-import { F as d } from "./modules/FooterV2Module/FooterV2Module-Cd4z2v8y.mjs";
+import { P as r } from "./modules/PageLoaderModule/PageLoaderModule-qw6Twqhc.mjs";
+import { F as t } from "./modules/FooterV2Module/FooterV2Module-Bk6XRHqm.mjs";
+import { H as s } from "./modules/HeaderV5Module/HeaderV5Module-B9tK4bOZ.mjs";
+import { C as d } from "./modules/CrumbsModule/CrumbsModule-BQIxJcqN.mjs";
+import { S as f } from "./modules/SuccessPaymentModule/SuccessPaymentModule-BizFQek6.mjs";
+import { E as x } from "./modules/ErrorPaymentModule/ErrorPaymentModule-CyboRcvA.mjs";
+import { D as P } from "./modules/DiyaModule/DiyaModule-CR7O-AA3.mjs";
+import { O as c } from "./modules/OtpModule/OtpModule-C_J1fNer.mjs";
+import { A } from "./modules/AuthModule/AuthModule-wq1Xt6Op.mjs";
 export {
-  d as FooterV2Module,
-  r as PageLoaderModule
+  A as AuthModule,
+  d as CrumbsModule,
+  P as DiyaModule,
+  x as ErrorPaymentModule,
+  t as FooterV2Module,
+  s as HeaderV5Module,
+  c as OtpModule,
+  r as PageLoaderModule,
+  f as SuccessPaymentModule
 };