@prokodo/ui 0.1.10 → 0.1.12

package/README.md

@@ -186,6 +186,7 @@ export default function GalleryPage() {
 | Loading             |               ✅               |                 –                  |
 | Lottie              |               ❌               |                 ✅                 |
 | Map                 |               ❌               |                 ✅                 |
+| Pagination          |               ✅               |                 ✅                 |
 | PostItem            |               ✅               |                 ✅                 |
 | PostTeaser          |               ✅               |                 ✅                 |
 | PostWidget          |               ✅               |                 ✅                 |
@@ -194,6 +195,7 @@ export default function GalleryPage() {
 | Quote               |               ✅               |                 –                  |
 | Rating              |               ✅               |                 ✅                 |
 | RichText            |               ✅               |                 ✅                 |
+| RTE (Beta)          |               ✅               |                 ✅                 |
 | Select              |               ✅               |                 ✅                 |
 | SideNav             |               ✅               |                 ✅                 |
 | Skeleton            |               ✅               |                 –                  |
@@ -203,6 +205,7 @@ export default function GalleryPage() {
 | Switch              |               ✅               |                 ✅                 |
 | Table               |               ✅               |                 –                  |
 | Teaser              |               ✅               |                 -                  |
+| Tooltip             |               ✅               |                 ✅                 |
 
 ## Since Next.js 16
 

package/dist/_virtual/_commonjsHelpers.js

@@ -1,9 +1,11 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
 __name(getDefaultExportFromCjs, "getDefaultExportFromCjs");
 export {
+  commonjsGlobal,
   getDefaultExportFromCjs
 };

package/dist/_virtual/quill.js

@@ -0,0 +1,34 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
+import { __require as requireQuill } from "../node_modules/.pnpm/quill@2.0.3/node_modules/quill/dist/quill.js";
+function _mergeNamespaces(n, m) {
+  for (var i = 0; i < m.length; i++) {
+    const e = m[i];
+    if (typeof e !== "string" && !Array.isArray(e)) {
+      for (const k in e) {
+        if (k !== "default" && !(k in n)) {
+          const d = Object.getOwnPropertyDescriptor(e, k);
+          if (d) {
+            Object.defineProperty(n, k, d.get ? d : {
+              enumerable: true,
+              get: /* @__PURE__ */ __name(() => e[k], "get")
+            });
+          }
+        }
+      }
+    }
+  }
+  return Object.freeze(Object.defineProperty(n, Symbol.toStringTag, { value: "Module" }));
+}
+__name(_mergeNamespaces, "_mergeNamespaces");
+var quillExports = /* @__PURE__ */ requireQuill();
+const quill = /* @__PURE__ */ getDefaultExportFromCjs(quillExports);
+const quill$1 = /* @__PURE__ */ _mergeNamespaces({
+  __proto__: null,
+  default: quill
+}, [quillExports]);
+export {
+  quill as default,
+  quill$1 as q
+};

package/dist/_virtual/quill2.js

@@ -0,0 +1,4 @@
+var quill = { exports: {} };
+export {
+  quill as __module
+};

package/dist/components/RTE/RTE.client.js

@@ -0,0 +1,367 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { jsx } from "react/jsx-runtime";
+import { memo, useRef, useEffect, useState, useCallback } from "react";
+import { handleValidation } from "../input/InputValidation.js";
+import { create } from "../../helpers/bem.js";
+import { isString, isNull } from "../../helpers/validations.js";
+import styles from "./RTE.module.scss.js";
+import { ensureQuillSnowStyles } from "./RTE.styles.js";
+import cssText from "../../node_modules/.pnpm/quill@2.0.3/node_modules/quill/dist/quill.snow.css.js";
+import { cleanupQuill, addClasses, decorateToolbar, syncPickerSelected } from "./RTE.utils.js";
+import { RTEView } from "./RTE.view.js";
+const bem = create(styles, "RTE");
+const ALLOWED_FORMATS = [
+  "header",
+  "bold",
+  "italic",
+  "underline",
+  "strike",
+  "list",
+  "link",
+  "code-block",
+  "image"
+];
+function RTEClient(props) {
+  const {
+    name,
+    value,
+    onChange,
+    onValidate,
+    required,
+    maxLength,
+    errorTranslations,
+    errorText,
+    disabled,
+    readOnly,
+    placeholder,
+    rteOptions,
+    rteToolbar,
+    ...rest
+  } = props;
+  const mountRef = useRef(null);
+  const surfaceRef = useRef(null);
+  const quillRef = useRef(null);
+  const htmlRef = useRef(value ?? "");
+  const onChangeRef = useRef(onChange);
+  const onValidateRef = useRef(onValidate);
+  const validationCfgRef = useRef({ name, required, errorTranslations });
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  useEffect(() => {
+    onValidateRef.current = onValidate;
+  }, [onValidate]);
+  useEffect(() => {
+    validationCfgRef.current = { name, required, errorTranslations };
+  }, [name, required, errorTranslations]);
+  const rteOptionsRef = useRef(rteOptions);
+  const rteToolbarRef = useRef(rteToolbar);
+  useEffect(() => {
+    rteOptionsRef.current = rteOptions;
+  }, [rteOptions]);
+  useEffect(() => {
+    rteToolbarRef.current = rteToolbar;
+  }, [rteToolbar]);
+  const startYRef = useRef(0);
+  const startHRef = useRef(0);
+  const rootClickHandlerRef = useRef(null);
+  const [err, setErr] = useState(errorText);
+  const lastEmittedHtmlRef = useRef("");
+  useEffect(() => {
+    if (isString(errorText)) setErr(errorText);
+  }, [errorText]);
+  const emitValidation = useCallback((plainText) => {
+    const cfg = validationCfgRef.current;
+    handleValidation(
+      "text",
+      cfg.name,
+      plainText,
+      cfg.required,
+      void 0,
+      void 0,
+      void 0,
+      cfg.errorTranslations,
+      (n, e) => {
+        var _a;
+        setErr(e);
+        (_a = onValidateRef.current) == null ? void 0 : _a.call(onValidateRef, n, e);
+      }
+    );
+  }, []);
+  const syncFromQuill = useCallback(() => {
+    var _a, _b, _c;
+    const q = quillRef.current;
+    if (!q) return;
+    const html = q.root.innerHTML;
+    const text = ((_b = (_a = q.getText()) == null ? void 0 : _a.trim) == null ? void 0 : _b.call(_a)) ?? "";
+    htmlRef.current = html;
+    lastEmittedHtmlRef.current = html;
+    emitValidation(text);
+    (_c = onChangeRef.current) == null ? void 0 : _c.call(onChangeRef, html, { text });
+  }, [emitValidation]);
+  const getQuillContainer = useCallback(() => {
+    const surface = surfaceRef.current;
+    if (!surface) return null;
+    return surface.querySelector(".ql-container");
+  }, []);
+  const startResize = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (Boolean(disabled) || Boolean(readOnly)) return;
+      const container = getQuillContainer();
+      if (!container) return;
+      startYRef.current = e.clientY;
+      startHRef.current = container.getBoundingClientRect().height;
+      const onMove = /* @__PURE__ */ __name((ev) => {
+        const dy = ev.clientY - startYRef.current;
+        const next = Math.max(160, startHRef.current + dy);
+        container.style.height = `${next}px`;
+      }, "onMove");
+      const onUp = /* @__PURE__ */ __name(() => {
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      }, "onUp");
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+    },
+    [disabled, readOnly, getQuillContainer]
+  );
+  useEffect(() => {
+    ensureQuillSnowStyles(cssText);
+    let cancelled = false;
+    const mountEl = mountRef.current;
+    const surfaceEl = surfaceRef.current;
+    async function init() {
+      var _a, _b, _c, _d, _e, _f;
+      if (!mountEl || !surfaceEl) return;
+      if (Boolean(disabled) || Boolean(readOnly)) return;
+      cleanupQuill(surfaceEl, mountEl);
+      const QuillImport = await import("../../_virtual/quill.js").then((n) => n.q);
+      const Quill = (QuillImport == null ? void 0 : QuillImport.default) ?? QuillImport;
+      if (cancelled) return;
+      try {
+        const BaseImage = Quill.import("formats/image");
+        const _ImageWithAlt = class _ImageWithAlt extends BaseImage {
+          static formats(domNode) {
+            var _a2;
+            const formats = ((_a2 = super.formats) == null ? void 0 : _a2.call(this, domNode)) ?? {};
+            const alt = domNode.getAttribute("alt");
+            const title = domNode.getAttribute("title");
+            if (alt != null) formats.alt = alt;
+            if (title != null) formats.title = title;
+            return formats;
+          }
+          format(name2, value2) {
+            if (name2 === "alt") {
+              const v = typeof value2 === "string" ? value2.trim() : "";
+              if (v) this.domNode.setAttribute("alt", v);
+              else this.domNode.removeAttribute("alt");
+              return;
+            }
+            if (name2 === "title") {
+              const v = typeof value2 === "string" ? value2.trim() : "";
+              if (v) this.domNode.setAttribute("title", v);
+              else this.domNode.removeAttribute("title");
+              return;
+            }
+            super.format(name2, value2);
+          }
+        };
+        __name(_ImageWithAlt, "ImageWithAlt");
+        __publicField(_ImageWithAlt, "blotName", "image");
+        __publicField(_ImageWithAlt, "tagName", "IMG");
+        let ImageWithAlt = _ImageWithAlt;
+        Quill.register("formats/image", ImageWithAlt, true);
+      } catch {
+      }
+      const opts = rteOptionsRef.current;
+      const extraToolbar = rteToolbarRef.current;
+      const baseToolbar = [
+        [{ header: [3, 4, false] }],
+        ["bold", "italic", "underline", "strike"],
+        [{ list: "ordered" }, { list: "bullet" }],
+        ["link", "code-block", "image"],
+        ["clean"]
+      ];
+      const toolbarContainer = Array.isArray(extraToolbar) && extraToolbar.length ? [...baseToolbar, extraToolbar] : baseToolbar;
+      const q = new Quill(mountEl, {
+        ...opts,
+        theme: "snow",
+        placeholder: placeholder ?? "",
+        formats: ALLOWED_FORMATS,
+        modules: {
+          history: {
+            delay: 1e3,
+            maxStack: 200,
+            userOnly: true,
+            ...((_a = opts == null ? void 0 : opts.modules) == null ? void 0 : _a.history) ?? {}
+          },
+          ...opts == null ? void 0 : opts.modules,
+          toolbar: toolbarContainer,
+          clipboard: {
+            ...((_b = opts == null ? void 0 : opts.modules) == null ? void 0 : _b.clipboard) ?? {}
+          }
+        }
+      });
+      quillRef.current = q;
+      const Keyboard = q.getModule("keyboard");
+      (_c = Keyboard == null ? void 0 : Keyboard.addBinding) == null ? void 0 : _c.call(
+        Keyboard,
+        {
+          key: 13,
+          // Enter
+          shiftKey: false,
+          collapsed: true
+        },
+        (range, ctx) => {
+          var _a2;
+          const header = (_a2 = ctx == null ? void 0 : ctx.format) == null ? void 0 : _a2.header;
+          if (!header) return true;
+          q.insertText(range.index, "\n", "user");
+          q.formatLine(range.index + 1, 1, { header: false }, "user");
+          q.setSelection(range.index + 1, 0, "silent");
+          return false;
+        }
+      );
+      (_d = opts == null ? void 0 : opts.onInit) == null ? void 0 : _d.call(opts, q);
+      addClasses(q.root, bem("editor"));
+      const toolbarModule = q.getModule("toolbar");
+      addClasses((toolbarModule == null ? void 0 : toolbarModule.container) ?? null, bem("toolbar"));
+      const toolbarEl = (toolbarModule == null ? void 0 : toolbarModule.container) ?? null;
+      if (toolbarEl) {
+        decorateToolbar(toolbarEl);
+        syncPickerSelected(toolbarEl);
+        const obs = new MutationObserver(() => syncPickerSelected(toolbarEl));
+        obs.observe(toolbarEl, {
+          subtree: true,
+          attributes: true,
+          attributeFilter: ["class"]
+        });
+      }
+      const tooltipEl = q.container.querySelector(
+        ".ql-tooltip"
+      );
+      addClasses(tooltipEl, bem("tooltip"));
+      const mo = new MutationObserver(() => {
+        const t = q.container.querySelector(".ql-tooltip");
+        if (t) addClasses(t, bem("tooltip"));
+      });
+      mo.observe(q.container, { subtree: true, childList: true });
+      const container = getQuillContainer();
+      if (container && !container.style.height) container.style.height = "220px";
+      if (htmlRef.current)
+        q.clipboard.dangerouslyPasteHTML(htmlRef.current, "silent");
+      emitValidation(((_f = (_e = q.getText()) == null ? void 0 : _e.trim) == null ? void 0 : _f.call(_e)) ?? "");
+      q.on("text-change", (_d2, _o, source) => {
+        if (source === "user") syncFromQuill();
+      });
+      const root = q.root;
+      const onRootClick = /* @__PURE__ */ __name((ev) => {
+        var _a2, _b2;
+        if (Boolean(disabled) || Boolean(readOnly)) return;
+        const el = ev.target;
+        if (!el || el.tagName !== "IMG") return;
+        const img = el;
+        const currentAlt = img.getAttribute("alt") ?? "";
+        const nextAlt = window.prompt("Alt text", currentAlt);
+        if (nextAlt == null) return;
+        const v = nextAlt.trim();
+        try {
+          const blot = Quill.find(img);
+          if (!isNull(blot == null ? void 0 : blot.format)) {
+            blot.format("alt", v);
+            (_a2 = q.update) == null ? void 0 : _a2.call(q, "user");
+            syncFromQuill();
+            return;
+          }
+        } catch {
+        }
+        if (v) img.setAttribute("alt", v);
+        else img.removeAttribute("alt");
+        (_b2 = q.update) == null ? void 0 : _b2.call(q, "user");
+        syncFromQuill();
+      }, "onRootClick");
+      rootClickHandlerRef.current = onRootClick;
+      root.addEventListener("click", onRootClick);
+    }
+    __name(init, "init");
+    void init();
+    return () => {
+      cancelled = true;
+      const q = quillRef.current;
+      const h = rootClickHandlerRef.current;
+      if ((q == null ? void 0 : q.root) && h) q.root.removeEventListener("click", h);
+      rootClickHandlerRef.current = null;
+      quillRef.current = null;
+      cleanupQuill(surfaceEl, mountEl);
+    };
+  }, [
+    disabled,
+    readOnly,
+    placeholder,
+    emitValidation,
+    syncFromQuill,
+    getQuillContainer
+  ]);
+  useEffect(() => {
+    var _a, _b, _c;
+    if (isNull(value)) return;
+    const q = quillRef.current;
+    if (Boolean((_a = q == null ? void 0 : q.hasFocus) == null ? void 0 : _a.call(q))) return;
+    const next = String(value);
+    if (next === htmlRef.current) return;
+    if (next === lastEmittedHtmlRef.current) {
+      htmlRef.current = next;
+      return;
+    }
+    htmlRef.current = next;
+    if (q) {
+      q.clipboard.dangerouslyPasteHTML(next, "silent");
+      emitValidation(((_c = (_b = q.getText()) == null ? void 0 : _b.trim) == null ? void 0 : _c.call(_b)) ?? "");
+    }
+  }, [value, emitValidation]);
+  return /* @__PURE__ */ jsx(
+    RTEView,
+    {
+      ...rest,
+      disabled,
+      errorText: err,
+      errorTranslations,
+      htmlValue: htmlRef.current,
+      maxLength,
+      mountRef,
+      name,
+      placeholder,
+      readOnly,
+      required,
+      rteToolbar,
+      showResize: !Boolean(disabled) && !Boolean(readOnly),
+      surfaceRef,
+      value: htmlRef.current,
+      onChange,
+      onStartResize: startResize,
+      onValidate,
+      onBlur: /* @__PURE__ */ __name((e) => {
+        var _a, _b, _c;
+        const q = quillRef.current;
+        if (q) emitValidation(((_b = (_a = q.getText()) == null ? void 0 : _a.trim) == null ? void 0 : _b.call(_a)) ?? "");
+        (_c = rest.onBlur) == null ? void 0 : _c.call(rest, e);
+      }, "onBlur"),
+      onFocus: /* @__PURE__ */ __name((e) => {
+        var _a;
+        (_a = rest.onFocus) == null ? void 0 : _a.call(rest, e);
+      }, "onFocus")
+    }
+  );
+}
+__name(RTEClient, "RTEClient");
+const RTEClient$1 = memo(RTEClient);
+export {
+  bem,
+  RTEClient$1 as default
+};