@prokodo/ui 0.0.26 → 0.0.28

package/dist/components/map/Map.js

@@ -1,51 +1,68 @@
-import { jsx as b } from "react/jsx-runtime";
-import { memo as y, useRef as g, useState as E, useCallback as M, useEffect as h } from "react";
-import { isString as v, isArray as C } from "../../helpers/validations.js";
-import { useGoogleMaps as x } from "../../hooks/useGoogleMaps.js";
-import { Skeleton as A } from "../skeleton/Skeleton.js";
-const D = y(
-  ({ apiKey: k, mapId: s, center: c, marker: u, zoom: d = 8 }) => {
-    const t = g(null), i = g(null), [m, w] = E(
-      typeof document < "u" ? document.documentElement.getAttribute("data-theme") === "dark" : !1
-    ), r = M(() => {
-      if (!(t != null && t.current)) return;
-      const n = {
-        center: c,
-        zoom: d,
-        mapId: v(s) ? s : m === !0 ? "c3c70a1ea4c4b0b8" : "e5921eca3f70ade2",
-        disableDefaultUI: !0,
-        mapTypeControl: !1,
-        fullscreenControl: !1,
-        streetViewControl: !1,
-        zoomControl: !0
-      }, o = new google.maps.Map(t.current, n);
-      i.current = o, C(u) && u.forEach((e) => {
-        var l, p;
-        if (typeof ((l = e == null ? void 0 : e.position) == null ? void 0 : l.lat) == "number" || typeof ((p = e == null ? void 0 : e.position) == null ? void 0 : p.lng) == "number")
+import { jsx } from "react/jsx-runtime";
+import { memo, useRef, useState, useCallback, useEffect } from "react";
+import { isString, isArray } from "../../helpers/validations.js";
+import { useGoogleMaps } from "../../hooks/useGoogleMaps.js";
+import { Skeleton } from "../skeleton/Skeleton.js";
+const Map = memo(
+  ({ apiKey, mapId, center, marker, zoom = 8 }) => {
+    const mapRef = useRef(null);
+    const mapInstanceRef = useRef(null);
+    const [isDark, setIsDark] = useState(
+      typeof document !== "undefined" ? document.documentElement.getAttribute("data-theme") === "dark" : false
+    );
+    const initMap = useCallback(() => {
+      if (!(mapRef == null ? void 0 : mapRef.current)) return;
+      const options = {
+        center,
+        zoom,
+        mapId: isString(mapId) ? mapId : isDark === true ? "c3c70a1ea4c4b0b8" : "e5921eca3f70ade2",
+        disableDefaultUI: true,
+        mapTypeControl: false,
+        fullscreenControl: false,
+        streetViewControl: false,
+        zoomControl: true
+      };
+      const map = new google.maps.Map(mapRef.current, options);
+      mapInstanceRef.current = map;
+      if (!isArray(marker)) return;
+      marker.forEach((place) => {
+        var _a, _b;
+        if (typeof ((_a = place == null ? void 0 : place.position) == null ? void 0 : _a.lat) === "number" || typeof ((_b = place == null ? void 0 : place.position) == null ? void 0 : _b.lng) === "number")
           return;
-        const f = document.createElement("img");
-        f.src = "/images/prokodo-map-marker.webp", new google.maps.marker.AdvancedMarkerElement({
-          map: o,
-          content: f,
-          ...e
+        const content = document.createElement("img");
+        content.src = "/images/prokodo-map-marker.webp";
+        new google.maps.marker.AdvancedMarkerElement({
+          map,
+          content,
+          ...place
         });
       });
-    }, [m, s, c, u, d]), a = x(k, m);
-    return h(() => {
-      !a || i.current || r();
-    }, [a, r]), h(() => {
-      const n = new MutationObserver(() => {
-        const o = document.documentElement.getAttribute("data-theme");
-        w(o === "dark"), i.current = null, r();
+    }, [isDark, mapId, center, marker, zoom]);
+    const loaded = useGoogleMaps(apiKey, isDark);
+    useEffect(() => {
+      if (!loaded || mapInstanceRef.current) return;
+      initMap();
+    }, [loaded, initMap]);
+    useEffect(() => {
+      const observer = new MutationObserver(() => {
+        const theme = document.documentElement.getAttribute("data-theme");
+        setIsDark(theme === "dark");
+        mapInstanceRef.current = null;
+        initMap();
       });
-      return n.observe(document.documentElement, {
-        attributes: !0,
+      observer.observe(document.documentElement, {
+        attributes: true,
         attributeFilter: ["data-theme"]
-      }), () => n.disconnect();
-    }, [r]), a ? /* @__PURE__ */ b("div", { ref: t, style: { width: "100%", height: "500px" } }) : /* @__PURE__ */ b(A, { height: "500px", width: "100%" });
+      });
+      return () => observer.disconnect();
+    }, [initMap]);
+    if (!loaded) {
+      return /* @__PURE__ */ jsx(Skeleton, { height: "500px", width: "100%" });
+    }
+    return /* @__PURE__ */ jsx("div", { ref: mapRef, style: { width: "100%", height: "500px" } });
   }
 );
-D.displayName = "Map";
+Map.displayName = "Map";
 export {
-  D as Map
+  Map
 };

package/dist/components/map/index.js

@@ -1,4 +1,4 @@
-import { Map as r } from "./Map.js";
+import { Map } from "./Map.js";
 export {
-  r as Map
+  Map
 };

package/dist/components/post-item/PostItem.js

@@ -1,136 +1,141 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { memo as w, useState as x, useEffect as S } from "react";
-import { create as u } from "../../helpers/bem.js";
-import { calculateWordCount as y } from "../../helpers/calculation.js";
-import { isString as m } from "../../helpers/validations.js";
-import C from "./PostItem.module.scss.js";
-import { PostItemAuthor as T } from "./PostItemAuthor.js";
-import { Grid as A } from "../grid/Grid.js";
-import { GridRow as N } from "../grid/GridRow.js";
-import { Animated as B } from "../animated/Animated.js";
-import { Headline as I } from "../headline/Headline.js";
-import { RichText as L } from "../rich-text/RichText.js";
-import { Button as R } from "../button/Button.js";
-import { Card as g } from "../card/Card.js";
-import { Skeleton as j } from "../skeleton/Skeleton.js";
-const r = u(C, "PostItem"), k = w(
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useState, useEffect } from "react";
+import { create } from "../../helpers/bem.js";
+import { calculateWordCount } from "../../helpers/calculation.js";
+import { isString } from "../../helpers/validations.js";
+import styles from "./PostItem.module.scss.js";
+import { PostItemAuthor } from "./PostItemAuthor.js";
+import { Button } from "../button/Button.js";
+import { Grid } from "../grid/Grid.js";
+import { GridRow } from "../grid/GridRow.js";
+import { Animated } from "../animated/Animated.js";
+import { Headline } from "../headline/Headline.server.js";
+import { RichText } from "../rich-text/RichText.js";
+import { Card } from "../card/Card.js";
+import { Skeleton } from "../skeleton/Skeleton.js";
+const bem = create(styles, "PostItem");
+const PostItem = memo(
   ({
-    className: P,
-    readCount: l = 0,
-    title: o,
-    content: c,
-    category: p,
-    author: d,
-    date: n,
-    metaDate: v,
-    image: a,
-    button: i,
-    imageComponent: s
+    className,
+    readCount = 0,
+    title,
+    content,
+    category,
+    author,
+    date,
+    metaDate,
+    image,
+    button,
+    imageComponent: ImageComponent
   }) => {
-    const h = y(c), [_, f] = x(!s);
-    return S(() => {
-      s || f(!0);
-    }, [s]), /* @__PURE__ */ t(
+    const wordCount = calculateWordCount(content);
+    const [imageLoaded, setImageLoaded] = useState(!ImageComponent);
+    useEffect(() => {
+      if (!ImageComponent) setImageLoaded(true);
+    }, [ImageComponent]);
+    return /* @__PURE__ */ jsxs(
       "article",
       {
-        itemScope: !0,
-        className: r(void 0, void 0, P),
+        itemScope: true,
+        className: bem(void 0, void 0, className),
         itemType: "http://schema.org/BlogPosting",
         children: [
-          /* @__PURE__ */ t(A, { className: r("grid"), children: [
-            /* @__PURE__ */ e(N, { className: r("content"), md: a ? 8 : 12, xs: 12, children: /* @__PURE__ */ t(B, { className: r("animation"), children: [
-              /* @__PURE__ */ t("header", { children: [
-                /* @__PURE__ */ e(
-                  I,
+          /* @__PURE__ */ jsxs(Grid, { className: bem("grid"), children: [
+            /* @__PURE__ */ jsx(GridRow, { className: bem("content"), md: image ? 8 : 12, xs: 12, children: /* @__PURE__ */ jsxs(Animated, { className: bem("animation"), children: [
+              /* @__PURE__ */ jsxs("header", { children: [
+                /* @__PURE__ */ jsx(
+                  Headline,
                   {
-                    className: r("headline", void 0, o == null ? void 0 : o.className),
+                    className: bem("headline", void 0, title == null ? void 0 : title.className),
                     size: "lg",
                     type: "h2",
-                    ...o,
-                    children: o.content
+                    ...title,
+                    children: title.content
                   }
                 ),
-                /* @__PURE__ */ t("div", { className: r("info"), children: [
-                  d && /* @__PURE__ */ e(T, { avatar: d.avatar, name: d.name }),
-                  m(n) && /* @__PURE__ */ t(
+                /* @__PURE__ */ jsxs("div", { className: bem("info"), children: [
+                  author && /* @__PURE__ */ jsx(PostItemAuthor, { avatar: author.avatar, name: author.name }),
+                  isString(date) && /* @__PURE__ */ jsxs(
                     "p",
                     {
-                      "aria-label": `Published at ${n}`,
-                      className: r("date"),
+                      "aria-label": `Published at ${date}`,
+                      className: bem("date"),
                       itemProp: "datePublished",
                       children: [
                         "📅  ",
-                        /* @__PURE__ */ e("time", { dateTime: v, itemProp: "datePublished", children: n })
+                        /* @__PURE__ */ jsx("time", { dateTime: metaDate, itemProp: "datePublished", children: date })
                       ]
                     }
                   ),
-                  l > 0 && /* @__PURE__ */ t(
+                  readCount > 0 && /* @__PURE__ */ jsxs(
                     "div",
                     {
-                      itemScope: !0,
-                      className: r("read__count"),
+                      itemScope: true,
+                      className: bem("read__count"),
                       itemProp: "interactionStatistic",
                       itemType: "https://schema.org/InteractionCounter",
                       children: [
-                        /* @__PURE__ */ e(
+                        /* @__PURE__ */ jsx(
                           "meta",
                           {
                             content: "https://schema.org/ReadAction",
                             itemProp: "interactionType"
                           }
                         ),
-                        /* @__PURE__ */ e("span", { itemProp: "userInteractionCount", children: l })
+                        /* @__PURE__ */ jsx("span", { itemProp: "userInteractionCount", children: readCount })
                       ]
                     }
                   )
                 ] })
               ] }),
-              m(c) && /* @__PURE__ */ e("div", { itemProp: "articleBody", children: /* @__PURE__ */ e(L, { className: r("content__paragraph"), children: c }) }),
-              i && /* @__PURE__ */ e(
-                R,
+              isString(content) && /* @__PURE__ */ jsx("div", { itemProp: "articleBody", children: /* @__PURE__ */ jsx(RichText, { className: bem("content__paragraph"), children: content }) }),
+              button && /* @__PURE__ */ jsx(
+                Button,
                 {
                   variant: "outlined",
-                  ...i,
-                  className: r("button", void 0, i == null ? void 0 : i.className),
-                  contentClassName: r(
+                  ...button,
+                  className: bem("button", void 0, button == null ? void 0 : button.className),
+                  contentClassName: bem(
                     "button__content",
                     void 0,
-                    i == null ? void 0 : i.contentClassName
+                    button == null ? void 0 : button.contentClassName
                   )
                 }
               )
             ] }) }),
-            /* @__PURE__ */ e(N, { md: 4, xs: 12, children: /* @__PURE__ */ t(
-              g,
+            /* @__PURE__ */ jsx(GridRow, { md: 4, xs: 12, children: /* @__PURE__ */ jsxs(
+              Card,
               {
-                enableShadow: !0,
-                background: m(a == null ? void 0 : a.src) ? 3 : void 0,
-                className: r("image__wrapper"),
-                contentClassName: r("image__content__wrapper"),
-                redirect: i == null ? void 0 : i.redirect,
+                enableShadow: true,
+                background: isString(image == null ? void 0 : image.src) ? 3 : void 0,
+                className: bem("image__wrapper"),
+                contentClassName: bem("image__content__wrapper"),
+                redirect: button == null ? void 0 : button.redirect,
                 children: [
-                  !_ && /* @__PURE__ */ e(j, { height: "275px" }),
-                  s !== void 0 && m(a == null ? void 0 : a.src) && /* @__PURE__ */ e(
-                    s,
+                  !imageLoaded && /* @__PURE__ */ jsx(Skeleton, { height: "275px" }),
+                  ImageComponent !== void 0 && isString(image == null ? void 0 : image.src) && /* @__PURE__ */ jsx(
+                    ImageComponent,
                     {
-                      ...a,
-                      className: r("image"),
+                      ...image,
+                      className: bem("image"),
                       sizes: "(max-width: 960px) 100vw, 25vw",
-                      onLoad: () => f(!0)
+                      onLoad: /* @__PURE__ */ __name(() => setImageLoaded(true), "onLoad")
                     }
                   )
                 ]
               }
             ) })
           ] }),
-          h > 0 && /* @__PURE__ */ e("meta", { content: String(h), itemProp: "wordCount" }),
-          m(p) && /* @__PURE__ */ e("meta", { content: p, itemProp: "articleSection" })
+          wordCount > 0 && /* @__PURE__ */ jsx("meta", { content: String(wordCount), itemProp: "wordCount" }),
+          isString(category) && /* @__PURE__ */ jsx("meta", { content: category, itemProp: "articleSection" })
         ]
       }
     );
   }
 );
-k.displayName = "PostItem";
+PostItem.displayName = "PostItem";
 export {
-  k as PostItem
+  PostItem
 };

package/dist/components/post-item/PostItem.module.scss.js

@@ -1,4 +1,6 @@
-const o = "gradientMove", t = "fadeInKeyframe", _ = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-PostItem__grid": "prokodo-PostItem__grid",
   "prokodo-PostItem__animation": "prokodo-PostItem__animation",
   "prokodo-PostItem__headline": "prokodo-PostItem__headline",
@@ -12,11 +14,11 @@ const o = "gradientMove", t = "fadeInKeyframe", _ = {
   "prokodo-PostItem__image__content__wrapper": "prokodo-PostItem__image__content__wrapper",
   "prokodo-PostItem__button": "prokodo-PostItem__button",
   "prokodo-PostItem__button__content": "prokodo-PostItem__button__content",
-  gradientMove: o,
-  fadeInKeyframe: t
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  _ as default,
-  t as fadeInKeyframe,
-  o as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/post-item/PostItemAuthor.js

@@ -1,37 +1,38 @@
-import { jsxs as d, jsx as s } from "react/jsx-runtime";
-import { memo as h } from "react";
-import { create as r } from "../../helpers/bem.js";
-import { isString as u } from "../../helpers/validations.js";
-import f from "./PostItemAuthor.module.scss.js";
-import { Avatar as p } from "../avatar/Avatar.js";
-const e = r(f, "PostItemAuthor"), A = h(
-  ({ className: c, avatar: o, avatarProps: l, name: t, nameProps: m }) => {
-    const i = t;
-    return /* @__PURE__ */ d("div", { className: e(void 0, void 0, c), children: [
-      /* @__PURE__ */ s(
-        p,
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { create } from "../../helpers/bem.js";
+import { isString } from "../../helpers/validations.js";
+import styles from "./PostItemAuthor.module.scss.js";
+import { Avatar } from "../avatar/Avatar.js";
+const bem = create(styles, "PostItemAuthor");
+const PostItemAuthor = memo(
+  ({ className, avatar, avatarProps, name, nameProps }) => {
+    const authorName = name;
+    return /* @__PURE__ */ jsxs("div", { className: bem(void 0, void 0, className), children: [
+      /* @__PURE__ */ jsx(
+        Avatar,
         {
-          image: (o == null ? void 0 : o.src) !== void 0 && u(o == null ? void 0 : o.src) ? {
-            src: o == null ? void 0 : o.src,
-            alt: (o == null ? void 0 : o.alt) ?? ""
+          image: (avatar == null ? void 0 : avatar.src) !== void 0 && isString(avatar == null ? void 0 : avatar.src) ? {
+            src: avatar == null ? void 0 : avatar.src,
+            alt: (avatar == null ? void 0 : avatar.alt) ?? ""
           } : void 0,
-          ...l
+          ...avatarProps
         }
       ),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ jsx(
         "p",
         {
-          "aria-label": `Author ${i}`,
+          "aria-label": `Author ${authorName}`,
           itemProp: "author",
-          ...m,
-          className: e("name", void 0, m == null ? void 0 : m.className),
-          children: i
+          ...nameProps,
+          className: bem("name", void 0, nameProps == null ? void 0 : nameProps.className),
+          children: authorName
         }
       )
     ] });
   }
 );
-A.displayName = "PostItemAuthor";
+PostItemAuthor.displayName = "PostItemAuthor";
 export {
-  A as PostItemAuthor
+  PostItemAuthor
 };

package/dist/components/post-item/PostItemAuthor.module.scss.js

@@ -1,11 +1,13 @@
-const o = "gradientMove", e = "fadeInKeyframe", t = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-PostItemAuthor": "prokodo-PostItemAuthor",
   "prokodo-PostItemAuthor__name": "prokodo-PostItemAuthor__name",
-  gradientMove: o,
-  fadeInKeyframe: e
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  t as default,
-  e as fadeInKeyframe,
-  o as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/post-item/index.js

@@ -1,6 +1,6 @@
-import { PostItem as r } from "./PostItem.js";
-import { PostItemAuthor as m } from "./PostItemAuthor.js";
+import { PostItem } from "./PostItem.js";
+import { PostItemAuthor } from "./PostItemAuthor.js";
 export {
-  r as PostItem,
-  m as PostItemAuthor
+  PostItem,
+  PostItemAuthor
 };