@prokodo/ui 0.0.52 → 0.0.53

package/dist/components/post-widget/PostWidget.lazy.js

@@ -0,0 +1,13 @@
+"use client";
+import { createLazyWrapper } from "../../helpers/createLazyWrapper.js";
+import PostWidgetClient from "./PostWidget.client.js";
+import PostWidgetServer from "./PostWidget.server.js";
+const PostWidget_lazy = createLazyWrapper({
+  name: "PostWidget",
+  Client: PostWidgetClient,
+  Server: PostWidgetServer,
+  hydrateOnVisible: true
+});
+export {
+  PostWidget_lazy as default
+};

package/dist/components/post-widget/PostWidget.module.scss.js

@@ -6,6 +6,7 @@ const styles = {
   "prokodo-PostWidget__list__item__content": "prokodo-PostWidget__list__item__content",
   "prokodo-PostWidget__image": "prokodo-PostWidget__image",
   "prokodo-PostWidget__image__link": "prokodo-PostWidget__image__link",
+  "prokodo-PostWidget__image__container": "prokodo-PostWidget__image__container",
   "prokodo-PostWidget__content": "prokodo-PostWidget__content",
   "prokodo-PostWidget__headline": "prokodo-PostWidget__headline",
   "prokodo-PostWidget__date": "prokodo-PostWidget__date"

package/dist/components/post-widget/PostWidget.server.js

@@ -0,0 +1,11 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { PostWidgetView } from "./PostWidget.view.js";
+function PostWidgetServer(p) {
+  return /* @__PURE__ */ jsx(PostWidgetView, { ...p });
+}
+__name(PostWidgetServer, "PostWidgetServer");
+export {
+  PostWidgetServer as default
+};

package/dist/components/post-widget/PostWidget.view.js

@@ -0,0 +1,263 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { isValidElement } from "react";
+import { create } from "../../helpers/bem.js";
+import { localizeDate } from "../../helpers/date.js";
+import { isString } from "../../helpers/validations.js";
+import styles from "./PostWidget.module.scss.js";
+import { Card } from "../card/Card.js";
+import { Headline } from "../headline/Headline.js";
+import { Link } from "../link/Link.js";
+import { Image } from "../image/Image.js";
+const bem = create(styles, "PostWidget");
+function PostWidgetView({
+  fullWidth,
+  className,
+  title,
+  listClassName,
+  // legacy
+  contentClassName,
+  // legacy
+  items = [],
+  classes,
+  componentsProps,
+  structuredData = true,
+  ...rest
+}) {
+  var _a, _b;
+  const cardMerged = {
+    animated: true,
+    enableShadow: true,
+    ...componentsProps == null ? void 0 : componentsProps.card,
+    ...rest,
+    variant: ((_a = componentsProps == null ? void 0 : componentsProps.card) == null ? void 0 : _a.variant) ?? (rest == null ? void 0 : rest.variant) ?? void 0
+  };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      itemScope: true,
+      className: bem(
+        void 0,
+        void 0,
+        [className, classes == null ? void 0 : classes.root].filter(Boolean).join(" ")
+      ),
+      itemType: "https://schema.org/ItemList\n",
+      children: [
+        /* @__PURE__ */ jsxs(
+          Card,
+          {
+            ...cardMerged,
+            className: bem("card__container", void 0, classes == null ? void 0 : classes.cardContainer),
+            contentClassName: bem(
+              "card",
+              void 0,
+              [contentClassName, classes == null ? void 0 : classes.card].filter(Boolean).join(" ")
+            ),
+            children: [
+              title && /* @__PURE__ */ jsx(
+                Headline,
+                {
+                  highlight: true,
+                  size: "md",
+                  type: "h2",
+                  ...{ ...title, ...(componentsProps == null ? void 0 : componentsProps.title) ?? {} },
+                  itemProp: "headline",
+                  className: bem(
+                    "title",
+                    void 0,
+                    [title == null ? void 0 : title.className, classes == null ? void 0 : classes.title].filter(Boolean).join(" ")
+                  ),
+                  variant: (title == null ? void 0 : title.variant) ?? ((_b = componentsProps == null ? void 0 : componentsProps.title) == null ? void 0 : _b.variant) ?? "secondary",
+                  children: title == null ? void 0 : title.content
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "ul",
+                {
+                  className: bem(
+                    "list",
+                    { "has-fullWidth": Boolean(fullWidth) },
+                    [listClassName, classes == null ? void 0 : classes.list].filter(Boolean).join(" ")
+                  ),
+                  children: items.map((item, i) => {
+                    var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+                    const imgBase = item.image;
+                    const imgMerged = imgBase ? {
+                      ...imgBase,
+                      ...(componentsProps == null ? void 0 : componentsProps.image) ?? {},
+                      ...((_a2 = item.componentsProps) == null ? void 0 : _a2.image) ?? {},
+                      className: bem(
+                        "image",
+                        void 0,
+                        [imgBase.className, classes == null ? void 0 : classes.image, (_b2 = item.classes) == null ? void 0 : _b2.image].filter(Boolean).join(" ")
+                      ),
+                      containerClassName: bem(
+                        "image__container",
+                        void 0,
+                        classes == null ? void 0 : classes.imageContainer
+                      ),
+                      decoding: ((_d = (_c = item.componentsProps) == null ? void 0 : _c.image) == null ? void 0 : _d.decoding) ?? ((_e = componentsProps == null ? void 0 : componentsProps.image) == null ? void 0 : _e.decoding) ?? imgBase.decoding ?? "async",
+                      loading: ((_g = (_f = item.componentsProps) == null ? void 0 : _f.image) == null ? void 0 : _g.loading) ?? ((_h = componentsProps == null ? void 0 : componentsProps.image) == null ? void 0 : _h.loading) ?? imgBase.loading ?? "lazy",
+                      sizes: ((_j = (_i = item.componentsProps) == null ? void 0 : _i.image) == null ? void 0 : _j.sizes) ?? ((_k = componentsProps == null ? void 0 : componentsProps.image) == null ? void 0 : _k.sizes) ?? imgBase.sizes ?? "(max-width: 960px) 100vw, 20vw",
+                      ...isValidElement(imgBase == null ? void 0 : imgBase.imageComponent) ? { imageComponent: imgBase.imageComponent } : {}
+                    } : void 0;
+                    const linkMerged = {
+                      ...(componentsProps == null ? void 0 : componentsProps.link) ?? {},
+                      ...((_l = item.componentsProps) == null ? void 0 : _l.link) ?? {},
+                      ...item.redirect,
+                      className: bem(
+                        "image__link",
+                        void 0,
+                        [
+                          (_m = item.redirect) == null ? void 0 : _m.className,
+                          classes == null ? void 0 : classes.imageLink,
+                          (_n = item.classes) == null ? void 0 : _n.imageLink
+                        ].filter(Boolean).join(" ")
+                      ),
+                      "aria-label": `Read more about ${item.title.content}`
+                    };
+                    const headlineMerged = {
+                      size: "sm",
+                      type: "h3",
+                      variant: "inherit",
+                      ...item.title ?? {},
+                      ...(componentsProps == null ? void 0 : componentsProps.title) ?? {},
+                      ...((_o = item.componentsProps) == null ? void 0 : _o.headline) ?? {},
+                      className: bem(
+                        "headline",
+                        void 0,
+                        [
+                          (_p = item.title) == null ? void 0 : _p.className,
+                          classes == null ? void 0 : classes.headline,
+                          (_q = item.classes) == null ? void 0 : _q.headline
+                        ].filter(Boolean).join(" ")
+                      )
+                    };
+                    let formattedDate;
+                    if (isString(item == null ? void 0 : item.date)) {
+                      formattedDate = localizeDate((item == null ? void 0 : item.locale) ?? "en-GB", item == null ? void 0 : item.date);
+                    }
+                    return /* @__PURE__ */ jsx(
+                      "li",
+                      {
+                        itemScope: true,
+                        itemProp: "itemListElement",
+                        itemType: "https://schema.org/ListItem",
+                        className: bem(
+                          "list__item",
+                          { "has-fullWidth": Boolean(fullWidth) },
+                          [classes == null ? void 0 : classes.listItem, (_r = item.classes) == null ? void 0 : _r.li].filter(Boolean).join(" ")
+                        ),
+                        children: /* @__PURE__ */ jsxs(
+                          "article",
+                          {
+                            itemScope: true,
+                            itemType: "https://schema.org/BlogPosting",
+                            className: bem(
+                              "list__item__content",
+                              void 0,
+                              ((_s = item.classes) == null ? void 0 : _s.article) ?? (classes == null ? void 0 : classes.listItemContent)
+                            ),
+                            children: [
+                              imgMerged && /* @__PURE__ */ jsx("header", { className: (_t = item.classes) == null ? void 0 : _t.header, children: /* @__PURE__ */ jsx(Link, { ...linkMerged, children: /* @__PURE__ */ jsx(Image, { ...imgMerged, itemProp: "image" }) }) }),
+                              /* @__PURE__ */ jsxs(
+                                "div",
+                                {
+                                  className: bem(
+                                    "content",
+                                    void 0,
+                                    [classes == null ? void 0 : classes.content, (_u = item.classes) == null ? void 0 : _u.content].filter(Boolean).join(" ")
+                                  ),
+                                  children: [
+                                    /* @__PURE__ */ jsx(
+                                      Link,
+                                      {
+                                        ...(componentsProps == null ? void 0 : componentsProps.link) ?? {},
+                                        ...((_v = item.componentsProps) == null ? void 0 : _v.link) ?? {},
+                                        ...item.redirect,
+                                        "aria-label": `Read more about ${item.title.content}`,
+                                        children: /* @__PURE__ */ jsx(Headline, { ...headlineMerged, itemProp: "headline", children: (_w = item.title) == null ? void 0 : _w.content })
+                                      }
+                                    ),
+                                    isString(formattedDate == null ? void 0 : formattedDate.locale) && /* @__PURE__ */ jsx(
+                                      "p",
+                                      {
+                                        "aria-label": `Published at ${formattedDate == null ? void 0 : formattedDate.locale}`,
+                                        className: bem(
+                                          "date",
+                                          void 0,
+                                          [classes == null ? void 0 : classes.date, (_x = item.classes) == null ? void 0 : _x.date].filter(Boolean).join(" ")
+                                        ),
+                                        children: /* @__PURE__ */ jsx(
+                                          "time",
+                                          {
+                                            "aria-label": `Published at ${formattedDate == null ? void 0 : formattedDate.locale}`,
+                                            className: bem("date"),
+                                            itemProp: "datePublished",
+                                            ...item == null ? void 0 : item.dateProps,
+                                            children: formattedDate == null ? void 0 : formattedDate.meta
+                                          }
+                                        )
+                                      }
+                                    )
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ jsx("meta", { content: (i + 1).toString(), itemProp: "position" }),
+                              isString(item == null ? void 0 : item.category) && /* @__PURE__ */ jsx("meta", { content: item.category, itemProp: "articleSection" })
+                            ]
+                          }
+                        )
+                      },
+                      `post-widget-item-${((_y = item.title) == null ? void 0 : _y.content) ?? i}`
+                    );
+                  })
+                }
+              )
+            ]
+          }
+        ),
+        structuredData && /* @__PURE__ */ jsx(
+          "script",
+          {
+            type: "application/ld+json",
+            dangerouslySetInnerHTML: {
+              __html: JSON.stringify({
+                "@context": "https://schema.org",
+                "@type": "ItemList",
+                itemListElement: items.map((item, index) => {
+                  var _a2, _b2;
+                  let formattedDate;
+                  if (isString(item == null ? void 0 : item.date)) {
+                    formattedDate = localizeDate(
+                      (item == null ? void 0 : item.locale) ?? "en-GB",
+                      item == null ? void 0 : item.date
+                    );
+                  }
+                  return {
+                    "@type": "ListItem",
+                    position: index + 1,
+                    item: {
+                      "@type": "BlogPosting",
+                      headline: (_a2 = item.title) == null ? void 0 : _a2.content,
+                      datePublished: isString(formattedDate == null ? void 0 : formattedDate.meta) ? formattedDate == null ? void 0 : formattedDate.meta : void 0,
+                      articleSection: item.category,
+                      image: isString(
+                        (_b2 = item.image) == null ? void 0 : _b2.src
+                      ) ? [item.image.src] : void 0
+                    }
+                  };
+                })
+              })
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+__name(PostWidgetView, "PostWidgetView");
+export {
+  PostWidgetView
+};

package/dist/components/post-widget-carousel/PostWidgetCarousel.client.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { PostWidgetCarouselView } from "./PostWidgetCarousel.view.js";
+const PostWidgetCarouselClient = memo((props) => /* @__PURE__ */ jsx(PostWidgetCarouselView, { ...props }));
+PostWidgetCarouselClient.displayName = "PostWidgetCarouselClient";
+export {
+  PostWidgetCarouselClient as default
+};

package/dist/components/post-widget-carousel/PostWidgetCarousel.js

@@ -1,165 +1,14 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useRef, useState, useLayoutEffect, Fragment } from "react";
-import { create } from "../../helpers/bem.js";
-import styles from "./PostWidgetCarousel.module.scss.js";
-import { Carousel } from "../carousel/Carousel.js";
-import { Button } from "../button/Button.js";
-import { Card } from "../card/Card.js";
-import { Headline } from "../headline/Headline.js";
-import { Link } from "../link/Link.js";
-import { Image } from "../image/Image.js";
-const bem = create(styles, "PostWidgetCarousel");
-const PostWidgetCarousel = memo(
-  ({ autoplay, className, title, items = [], ...props }) => {
-    const ref = useRef(null);
-    const [carouselWidth, setCarouselWidth] = useState(0);
-    useLayoutEffect(() => {
-      var _a, _b;
-      const containerWidth = ((_b = (_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.carouselContainer) == null ? void 0 : _b.offsetWidth) ?? 0;
-      setCarouselWidth(containerWidth);
-      const handleResize = /* @__PURE__ */ __name(() => {
-        setCarouselWidth(containerWidth);
-      }, "handleResize");
-      window.addEventListener("resize", handleResize);
-      return () => {
-        window.removeEventListener("resize", handleResize);
-      };
-    }, [ref]);
-    return /* @__PURE__ */ jsx(
-      "section",
-      {
-        itemScope: true,
-        className: bem(void 0, void 0, className),
-        itemType: "https://schema.org/ItemList",
-        children: /* @__PURE__ */ jsxs(
-          Card,
-          {
-            animated: true,
-            enableShadow: true,
-            ...props,
-            className: bem("card__container"),
-            contentClassName: bem("card"),
-            variant: "white",
-            children: [
-              title && /* @__PURE__ */ jsx(
-                Headline,
-                {
-                  highlight: true,
-                  size: "md",
-                  type: "h2",
-                  ...title,
-                  className: bem("title", title == null ? void 0 : title.className),
-                  itemProp: "headline",
-                  variant: "secondary",
-                  children: title == null ? void 0 : title.content
-                }
-              ),
-              items.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(
-                  Carousel,
-                  {
-                    ref,
-                    autoplay,
-                    className: bem("carousel"),
-                    classNameDots: bem("carousel__dots"),
-                    classNameItem: bem("carousel__item"),
-                    itemsToShow: 1,
-                    children: items.map((item) => {
-                      var _a, _b, _c;
-                      const key = `carousel-item-${item.title}`;
-                      return /* @__PURE__ */ jsxs(Fragment, { children: [
-                        (item == null ? void 0 : item.image) && /* @__PURE__ */ jsx(
-                          Link,
-                          {
-                            "aria-label": `Read more about ${item.title.content}`,
-                            ...item == null ? void 0 : item.redirect,
-                            className: bem(
-                              "carousel__item__image__link",
-                              void 0,
-                              (_a = item == null ? void 0 : item.redirect) == null ? void 0 : _a.className
-                            ),
-                            style: {
-                              width: carouselWidth
-                            },
-                            children: /* @__PURE__ */ jsx(
-                              Image,
-                              {
-                                className: bem("carousel__item__image"),
-                                ...item.image
-                              },
-                              key
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          Link,
-                          {
-                            ...item == null ? void 0 : item.redirect,
-                            "aria-label": `Read more about ${item.title.content}`,
-                            className: bem("carousel__item__link"),
-                            children: /* @__PURE__ */ jsx(
-                              Headline,
-                              {
-                                size: "md",
-                                type: "h3",
-                                ...item.title,
-                                className: bem("headline", (_b = item.title) == null ? void 0 : _b.className),
-                                itemProp: "headline",
-                                variant: "inherit",
-                                children: (_c = item.title) == null ? void 0 : _c.content
-                              }
-                            )
-                          }
-                        )
-                      ] }, key);
-                    })
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: bem("carousel__buttons"), children: [
-                  /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      "aria-label": "Last category",
-                      className: bem("carousel__button"),
-                      color: "primary",
-                      iconProps: {
-                        name: "ArrowLeft01Icon",
-                        size: "sm"
-                      },
-                      onClick: /* @__PURE__ */ __name(() => {
-                        var _a;
-                        return (_a = ref.current) == null ? void 0 : _a.slidePrev();
-                      }, "onClick")
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      "aria-label": "Next category",
-                      className: bem("carousel__button"),
-                      color: "primary",
-                      iconProps: {
-                        name: "ArrowRight01Icon",
-                        size: "sm"
-                      },
-                      onClick: /* @__PURE__ */ __name(() => {
-                        var _a;
-                        return (_a = ref.current) == null ? void 0 : _a.slideNext();
-                      }, "onClick")
-                    }
-                  )
-                ] })
-              ] })
-            ]
-          }
-        )
-      }
-    );
-  }
-);
-PostWidgetCarousel.displayName = "PostWidgetCarousel";
+import { createIsland } from "../../helpers/createIsland.js";
+import PostWidgetCarouselServer from "./PostWidgetCarousel.server.js";
+const PostWidgetCarousel = createIsland({
+  name: "PostWidgetCarousel",
+  Server: PostWidgetCarouselServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./PostWidgetCarousel.lazy.js"), "loadLazy"),
+  // Carousel is interactive; render server first then hydrate when visible
+  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
+});
 export {
   PostWidgetCarousel
 };

package/dist/components/post-widget-carousel/PostWidgetCarousel.lazy.js

@@ -0,0 +1,13 @@
+"use client";
+import { createLazyWrapper } from "../../helpers/createLazyWrapper.js";
+import PostWidgetCarouselClient from "./PostWidgetCarousel.client.js";
+import PostWidgetCarouselServer from "./PostWidgetCarousel.server.js";
+const PostWidgetCarousel_lazy = createLazyWrapper({
+  name: "PostWidgetCarousel",
+  Client: PostWidgetCarouselClient,
+  Server: PostWidgetCarouselServer,
+  hydrateOnVisible: true
+});
+export {
+  PostWidgetCarousel_lazy as default
+};

package/dist/components/post-widget-carousel/PostWidgetCarousel.module.scss.js

@@ -1,7 +1,10 @@
 const styles = {
+  "prokodo-PostWidgetCarousel__card": "prokodo-PostWidgetCarousel__card",
   "prokodo-PostWidgetCarousel__carousel": "prokodo-PostWidgetCarousel__carousel",
+  "prokodo-PostWidgetCarousel__carousel__wrapper": "prokodo-PostWidgetCarousel__carousel__wrapper",
   "prokodo-PostWidgetCarousel__carousel__item__image__link": "prokodo-PostWidgetCarousel__carousel__item__image__link",
   "prokodo-PostWidgetCarousel__carousel__item__image": "prokodo-PostWidgetCarousel__carousel__item__image",
+  "prokodo-PostWidgetCarousel__carousel__item__image__container": "prokodo-PostWidgetCarousel__carousel__item__image__container",
   "prokodo-PostWidgetCarousel__carousel__item__link": "prokodo-PostWidgetCarousel__carousel__item__link",
   "prokodo-PostWidgetCarousel__carousel__dots": "prokodo-PostWidgetCarousel__carousel__dots",
   "prokodo-PostWidgetCarousel__carousel__buttons": "prokodo-PostWidgetCarousel__carousel__buttons",

package/dist/components/post-widget-carousel/PostWidgetCarousel.server.js

@@ -0,0 +1,11 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { PostWidgetCarouselView } from "./PostWidgetCarousel.view.js";
+function PostWidgetCarouselServer(p) {
+  return /* @__PURE__ */ jsx(PostWidgetCarouselView, { ...p });
+}
+__name(PostWidgetCarouselServer, "PostWidgetCarouselServer");
+export {
+  PostWidgetCarouselServer as default
+};