@prokodo/ui 0.0.37 → 0.0.39

package/dist/components/quote/Quote.js

@@ -1,90 +1,96 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 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 "./Quote.module.scss.js";
-import { Headline } from "../headline/Headline.server.js";
+import { Headline } from "../headline/Headline.js";
 import { Card } from "../card/Card.js";
 import { RichText } from "../rich-text/RichText.js";
 import { Avatar } from "../avatar/Avatar.js";
 const bem = create(styles, "Quote");
-const Quote = memo(
-  ({ className, variant = "primary", title, subTitle, content, author }) => /* @__PURE__ */ jsxs(
-    "figure",
-    {
-      itemScope: true,
-      className: bem(void 0, void 0, className),
-      itemType: "https://schema.org/Quotation",
-      children: [
-        subTitle && /* @__PURE__ */ jsx(
-          Headline,
-          {
-            highlight: true,
-            className: bem("sub_headline", void 0, subTitle == null ? void 0 : subTitle.className),
-            size: "sm",
-            type: "h3",
-            ...subTitle,
-            variant: subTitle.variant ?? variant,
-            children: subTitle == null ? void 0 : subTitle.content
-          }
-        ),
-        title && /* @__PURE__ */ jsx(
-          Headline,
-          {
-            className: bem("headline", void 0, title == null ? void 0 : title.className),
-            size: "lg",
-            type: "h2",
-            ...title,
-            children: title.content
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          Card,
-          {
-            animated: true,
-            highlight: true,
-            className: bem("card__container"),
-            contentClassName: bem("card"),
-            customAnimation: "left-right",
-            variant: "white",
-            children: [
-              /* @__PURE__ */ jsx("blockquote", { className: bem("quote"), children: /* @__PURE__ */ jsx(RichText, { className: bem("quote__content"), itemProp: "text", children: content }) }),
-              author && /* @__PURE__ */ jsx("figcaption", { children: /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  itemScope: true,
-                  className: bem("caption"),
-                  itemType: "https://schema.org/Person",
-                  children: [
-                    (author == null ? void 0 : author.avatar) && /* @__PURE__ */ jsx(
-                      Avatar,
+const Quote = /* @__PURE__ */ __name(({
+  className,
+  variant = "primary",
+  title,
+  subTitle,
+  content,
+  author
+}) => /* @__PURE__ */ jsxs(
+  "figure",
+  {
+    itemScope: true,
+    className: bem(void 0, void 0, className),
+    itemType: "https://schema.org/Quotation",
+    children: [
+      subTitle && /* @__PURE__ */ jsx(
+        Headline,
+        {
+          highlight: true,
+          className: bem("sub_headline", void 0, subTitle == null ? void 0 : subTitle.className),
+          size: "sm",
+          type: "h3",
+          ...subTitle,
+          variant: subTitle.variant ?? variant,
+          children: subTitle == null ? void 0 : subTitle.content
+        }
+      ),
+      title && /* @__PURE__ */ jsx(
+        Headline,
+        {
+          className: bem("headline", void 0, title == null ? void 0 : title.className),
+          size: "lg",
+          type: "h2",
+          ...title,
+          children: title.content
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Card,
+        {
+          animated: true,
+          highlight: true,
+          className: bem("card__container"),
+          contentClassName: bem("card"),
+          customAnimation: "left-right",
+          variant: "white",
+          children: [
+            /* @__PURE__ */ jsx("blockquote", { className: bem("quote"), children: /* @__PURE__ */ jsx(RichText, { className: bem("quote__content"), itemProp: "text", children: content }) }),
+            author && /* @__PURE__ */ jsx("figcaption", { children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                itemScope: true,
+                className: bem("caption"),
+                itemType: "https://schema.org/Person",
+                children: [
+                  (author == null ? void 0 : author.avatar) && /* @__PURE__ */ jsx(
+                    Avatar,
+                    {
+                      className: bem("caption__avatar"),
+                      ...author.avatar,
+                      variant
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: bem("caption__author"), children: [
+                    /* @__PURE__ */ jsx("span", { className: bem("caption__author__name"), itemProp: "name", children: author.name }),
+                    isString(author == null ? void 0 : author.position) && /* @__PURE__ */ jsx(
+                      "span",
                       {
-                        className: bem("caption__avatar"),
-                        ...author.avatar,
-                        variant
+                        className: bem("caption__author__position"),
+                        itemProp: "jobTitle",
+                        children: author.position
                       }
-                    ),
-                    /* @__PURE__ */ jsxs("div", { className: bem("caption__author"), children: [
-                      /* @__PURE__ */ jsx("span", { className: bem("caption__author__name"), itemProp: "name", children: author.name }),
-                      isString(author == null ? void 0 : author.position) && /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: bem("caption__author__position"),
-                          itemProp: "jobTitle",
-                          children: author.position
-                        }
-                      )
-                    ] })
-                  ]
-                }
-              ) })
-            ]
-          }
-        )
-      ]
-    }
-  )
-);
+                    )
+                  ] })
+                ]
+              }
+            ) })
+          ]
+        }
+      )
+    ]
+  }
+), "Quote");
 Quote.displayName = "Quote";
 export {
   Quote

package/dist/components/rich-text/RichText.client.js

@@ -0,0 +1,194 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { marked } from "../../node_modules/.pnpm/marked@15.0.12/node_modules/marked/lib/marked.esm.js";
+import { useMemo, Fragment, createElement, isValidElement } from "react";
+import { l as libExports } from "../../_virtual/index.js";
+import { create } from "../../helpers/bem.js";
+import styles from "./RichText.module.scss.js";
+import { Icon } from "../icon/Icon.js";
+import { Link } from "../link/Link.js";
+import { Headline } from "../headline/Headline.js";
+import { AnimatedText } from "../animatedText/AnimatedText.js";
+const bem = create(styles, "RichText");
+function RichTextClient({
+  children,
+  animated,
+  animationProps = {},
+  variant = "primary",
+  schema = {},
+  itemProp,
+  linkComponent,
+  className,
+  overrideParagraph,
+  ...props
+}) {
+  const baseProps = {
+    animated,
+    className: className ?? void 0,
+    ...schema
+  };
+  const headlineProps = { animationProps };
+  const renderAnimation = /* @__PURE__ */ __name((content) => {
+    if (!Boolean(animated)) return content;
+    return /* @__PURE__ */ jsx(AnimatedText, { ...animationProps, children: content });
+  }, "renderAnimation");
+  const safeHtml = useMemo(() => {
+    marked.setOptions({ gfm: true, breaks: true });
+    return libExports.filterXSS(marked.parse(children ?? ""));
+  }, [children]);
+  function domNodeToReact(node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      return node.textContent;
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return null;
+    }
+    const elem = node;
+    const tagName = elem.tagName.toLowerCase();
+    const childReactNodes = Array.from(elem.childNodes).map(domNodeToReact);
+    switch (tagName) {
+      case "h1":
+      case "h2":
+      case "h3":
+      case "h4":
+      case "h5":
+      case "h6": {
+        const level = parseInt(tagName.charAt(1), 10);
+        let size;
+        let type;
+        switch (level) {
+          case 1:
+            size = "xxl";
+            type = "h1";
+            break;
+          case 2:
+            size = "xl";
+            type = "h2";
+            break;
+          case 3:
+            size = "lg";
+            type = "h3";
+            break;
+          case 4:
+            size = "md";
+            type = "h4";
+            break;
+          case 5:
+            size = "sm";
+            type = "h5";
+            break;
+          default:
+            size = "xs";
+            type = "h6";
+        }
+        return /* @__PURE__ */ jsx(Headline, { ...baseProps, ...headlineProps, size, type, children: childReactNodes });
+      }
+      case "p": {
+        const cls = bem("p");
+        return /* @__PURE__ */ jsx("p", { className: cls, itemProp, children: childReactNodes.map(renderAnimation) });
+      }
+      case "a": {
+        const cls = bem("a");
+        const href = elem.getAttribute("href") ?? "#";
+        const title = elem.getAttribute("title") ?? void 0;
+        const linkText = childReactNodes.map(renderAnimation);
+        return /* @__PURE__ */ jsx(
+          Link,
+          {
+            ...baseProps,
+            "aria-label": childReactNodes.map(extractText).join(""),
+            className: cls,
+            href,
+            linkComponent,
+            title,
+            children: linkText
+          }
+        );
+      }
+      case "pre": {
+        const cls = bem("pre");
+        return /* @__PURE__ */ jsx("pre", { className: cls, children: childReactNodes });
+      }
+      case "ul": {
+        const cls = bem("ul");
+        return /* @__PURE__ */ jsx("ul", { className: cls, children: childReactNodes });
+      }
+      case "ol": {
+        const cls = bem("ol");
+        return /* @__PURE__ */ jsx("ol", { className: cls, children: childReactNodes });
+      }
+      case "li": {
+        const cls = bem("li");
+        return /* @__PURE__ */ jsxs("li", { className: cls, children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              className: bem("li__icon"),
+              color: variant,
+              name: "ArrowRight01Icon",
+              size: 18
+            }
+          ),
+          childReactNodes.map((c, i) => (
+            // eslint-disable-next-line react/no-array-index-key
+            /* @__PURE__ */ jsx("span", { children: renderAnimation(c) }, i)
+          ))
+        ] });
+      }
+      default:
+        return createElement(
+          tagName,
+          { key: Math.random().toString(), className: bem(tagName) },
+          childReactNodes
+        );
+    }
+  }
+  __name(domNodeToReact, "domNodeToReact");
+  if (overrideParagraph) {
+    const segments = safeHtml.split(/<\/?p>/g).filter((seg) => seg.trim().length > 0);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: bem(void 0, void 0, className),
+        ...schema,
+        ...props,
+        children: segments.map((segment, idx) => {
+          const plainText = segment.replace(/<[^>]+>/g, "");
+          return /* @__PURE__ */ jsx(Fragment, { children: overrideParagraph(plainText) }, idx);
+        })
+      }
+    );
+  }
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(safeHtml, "text/html");
+  const topLevelChildren = Array.from(doc.body.childNodes);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: bem(void 0, void 0, className),
+      ...schema,
+      ...props,
+      children: topLevelChildren.map((n, i) => /* @__PURE__ */ jsx(Fragment, { children: domNodeToReact(n) }, i))
+    }
+  );
+}
+__name(RichTextClient, "RichTextClient");
+RichTextClient.displayName = "RichTextClient";
+function extractText(node) {
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node);
+  }
+  if (Array.isArray(node)) {
+    return node.map(extractText).join("");
+  }
+  if (isValidElement(node)) {
+    return extractText(node.props.children);
+  }
+  return "";
+}
+__name(extractText, "extractText");
+export {
+  RichTextClient
+};

package/dist/components/rich-text/RichText.js

@@ -1,157 +1,13 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useMemo, useCallback } from "react";
-import ReactMarkdown from "react-markdown";
-import remarkBreaks from "remark-breaks";
-import remarkGfm from "remark-gfm";
-import { create } from "../../helpers/bem.js";
-import { isNull } from "../../helpers/validations.js";
-import styles from "./RichText.module.scss.js";
-import { AnimatedText } from "../animatedText/AnimatedText.js";
-import { Icon } from "../icon/Icon.js";
-import { Link } from "../link/Link.js";
-import { Headline } from "../headline/Headline.server.js";
-const bem = create(styles, "RichText");
-function isElement(node) {
-  return isNull(node) && "tagName" in node;
-}
-__name(isElement, "isElement");
-function isText(node) {
-  return !isNull(node) && (node == null ? void 0 : node.type) === "text" && "value" in node;
-}
-__name(isText, "isText");
-const RichText = memo(
-  ({
-    className,
-    animated,
-    animationProps = {},
-    variant = "primary",
-    schema = {},
-    itemProp,
-    children,
-    ...props
-  }) => {
-    const baseProps = useMemo(
-      () => ({
-        animated,
-        className: className ?? void 0,
-        ...schema
-      }),
-      [animated, schema, className]
-    );
-    const headlineProps = useMemo(
-      () => ({
-        animationProps
-      }),
-      [animationProps]
-    );
-    const renderAnimation = useCallback(
-      (children2) => {
-        if (animated === false || animated === void 0) return children2;
-        return /* @__PURE__ */ jsx(AnimatedText, { ...animationProps, children: children2 });
-      },
-      [animated, animationProps]
-    );
-    return /* @__PURE__ */ jsx(
-      ReactMarkdown,
-      {
-        remarkPlugins: [remarkGfm, remarkBreaks],
-        components: {
-          h1: /* @__PURE__ */ __name((props2) => /* @__PURE__ */ jsx(Headline, { ...baseProps, ...headlineProps, size: "xxl", type: "h1", children: props2 == null ? void 0 : props2.children }), "h1"),
-          h2: /* @__PURE__ */ __name((props2) => /* @__PURE__ */ jsx(Headline, { ...baseProps, ...headlineProps, size: "xl", type: "h2", children: props2 == null ? void 0 : props2.children }), "h2"),
-          h3: /* @__PURE__ */ __name((props2) => /* @__PURE__ */ jsx(Headline, { ...baseProps, ...headlineProps, size: "lg", type: "h3", children: props2 == null ? void 0 : props2.children }), "h3"),
-          h4: /* @__PURE__ */ __name((props2) => /* @__PURE__ */ jsx(Headline, { ...baseProps, ...headlineProps, size: "md", type: "h4", children: props2 == null ? void 0 : props2.children }), "h4"),
-          h5: /* @__PURE__ */ __name((props2) => /* @__PURE__ */ jsx(Headline, { ...baseProps, ...headlineProps, size: "sm", type: "h5", children: props2 == null ? void 0 : props2.children }), "h5"),
-          h6: /* @__PURE__ */ __name((props2) => /* @__PURE__ */ jsx(Headline, { ...baseProps, ...headlineProps, size: "xs", type: "h6", children: props2 == null ? void 0 : props2.children }), "h6"),
-          p: /* @__PURE__ */ __name((props2) => /* @__PURE__ */ jsx(
-            "p",
-            {
-              ...baseProps,
-              className: bem("p", void 0, baseProps == null ? void 0 : baseProps.className),
-              itemProp,
-              children: renderAnimation(props2 == null ? void 0 : props2.children)
-            }
-          ), "p"),
-          a: /* @__PURE__ */ __name((props2) => {
-            var _a;
-            return /* @__PURE__ */ jsx(
-              Link,
-              {
-                ...baseProps,
-                "aria-label": (_a = props2 == null ? void 0 : props2.children) == null ? void 0 : _a.toString(),
-                href: (props2 == null ? void 0 : props2.href) ?? "#",
-                children: renderAnimation(props2 == null ? void 0 : props2.children)
-              }
-            );
-          }, "a"),
-          pre: /* @__PURE__ */ __name((props2) => /* @__PURE__ */ jsx(
-            "pre",
-            {
-              ...baseProps,
-              className: bem("pre", void 0, baseProps == null ? void 0 : baseProps.className),
-              children: renderAnimation(props2 == null ? void 0 : props2.children)
-            }
-          ), "pre"),
-          ul: /* @__PURE__ */ __name((props2) => /* @__PURE__ */ jsx(
-            "ul",
-            {
-              ...baseProps,
-              className: bem("ul", void 0, baseProps == null ? void 0 : baseProps.className),
-              children: renderAnimation(props2 == null ? void 0 : props2.children)
-            }
-          ), "ul"),
-          ol: /* @__PURE__ */ __name(({ node }) => /* @__PURE__ */ jsx(
-            "ol",
-            {
-              ...baseProps,
-              className: bem("ol", void 0, baseProps == null ? void 0 : baseProps.className),
-              children: node == null ? void 0 : node.children.map((e, index) => {
-                if (isElement(e) && e.children.length > 0 && isText(e.children[0])) {
-                  return /* @__PURE__ */ jsxs(
-                    "li",
-                    {
-                      ...baseProps,
-                      className: bem("li", void 0, baseProps == null ? void 0 : baseProps.className),
-                      children: [
-                        /* @__PURE__ */ jsx("i", { className: bem("ol__decimal"), children: index + 1 }),
-                        renderAnimation(/* @__PURE__ */ jsx("span", { children: e.children[0].value }))
-                      ]
-                    },
-                    `item-${e.children[0].value}`
-                  );
-                }
-                return null;
-              })
-            }
-          ), "ol"),
-          li: /* @__PURE__ */ __name((props2) => /* @__PURE__ */ jsxs(
-            "li",
-            {
-              ...baseProps,
-              className: bem("li", void 0, baseProps == null ? void 0 : baseProps.className),
-              children: [
-                /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    className: bem("li__icon"),
-                    color: variant,
-                    name: "ArrowRight01Icon",
-                    size: 18
-                  }
-                ),
-                renderAnimation(/* @__PURE__ */ jsx("span", { children: props2 == null ? void 0 : props2.children }))
-              ]
-            }
-          ), "li")
-        },
-        ...props,
-        children
-      }
-    );
-  }
-);
-RichText.displayName = "RichText";
+import { createIsland } from "../../helpers/createIsland.js";
+import { RichTextServer } from "./RichText.server.js";
+const RichText = createIsland({
+  name: "RichText",
+  Server: RichTextServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./RichText.lazy.js"), "loadLazy"),
+  isInteractive: /* @__PURE__ */ __name((props) => Boolean(props.overrideParagraph) || Boolean(props.animated), "isInteractive")
+});
 export {
   RichText
 };

package/dist/components/rich-text/RichText.lazy.js

@@ -0,0 +1,18 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createLazyWrapper } from "../../helpers/createLazyWrapper.js";
+import { RichTextClient } from "./RichText.client.js";
+import { RichTextServer } from "./RichText.server.js";
+const RichText_lazy = createLazyWrapper({
+  name: "RichText",
+  Client: RichTextClient,
+  Server: RichTextServer,
+  hydrateOnVisible: true,
+  // only hydrate when it scrolls into view
+  ioOptions: { threshold: 0.1 },
+  isInteractive: /* @__PURE__ */ __name((props) => Boolean(props.overrideParagraph) || Boolean(props.animated), "isInteractive")
+});
+export {
+  RichText_lazy as default
+};

package/dist/components/rich-text/RichText.server.js

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { l as libExports } from "../../_virtual/index.js";
+import { create } from "../../helpers/bem.js";
+import styles from "./RichText.module.scss.js";
+import MarkdownIt from "../../node_modules/.pnpm/markdown-it@14.1.0/node_modules/markdown-it/lib/index.js";
+const bem = create(styles, "RichText");
+const md = new MarkdownIt({ html: false, linkify: true, breaks: true });
+function RichTextServer(props) {
+  const {
+    children,
+    className,
+    schema = {},
+    // eslint-disable-next-line  @typescript-eslint/no-unused-vars
+    itemProp,
+    // eslint-disable-next-line  @typescript-eslint/no-unused-vars
+    overrideParagraph,
+    // We ignore `animated`, `linkComponent`, etc. on the server for now.
+    ...restProps
+  } = props;
+  const rawHtml = md.render(children ?? "");
+  const safeHtml = libExports.filterXSS(rawHtml);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: bem(void 0, void 0, className),
+      ...schema,
+      ...restProps,
+      dangerouslySetInnerHTML: { __html: safeHtml }
+    }
+  );
+}
+__name(RichTextServer, "RichTextServer");
+export {
+  RichTextServer
+};