@x-plat/design-system 0.1.1

package/dist/components/HtmlTypeWriter/index.cjs

@@ -0,0 +1,172 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/HtmlTypeWriter/index.ts
+var HtmlTypeWriter_exports = {};
+__export(HtmlTypeWriter_exports, {
+  HtmlTypewriter: () => HtmlTypeWriter_default
+});
+module.exports = __toCommonJS(HtmlTypeWriter_exports);
+
+// src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
+var import_react2 = __toESM(require("react"), 1);
+
+// src/components/HtmlTypeWriter/utils.ts
+var import_react = __toESM(require("react"), 1);
+var voidTags = /* @__PURE__ */ new Set([
+  "br",
+  "img",
+  "hr",
+  "input",
+  "meta",
+  "link",
+  "area",
+  "base",
+  "col",
+  "embed",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+function decodeHtmlEntities(str) {
+  return str.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#x27;/g, "'").replace(/&#39;/g, "'").replace(/&#(\d+);/g, (_, code) => String.fromCharCode(Number(code))).replace(
+    /&#x([0-9a-fA-F]+);/g,
+    (_, code) => String.fromCharCode(parseInt(code, 16))
+  );
+}
+function buildRangeMap(root) {
+  const rangeMap = /* @__PURE__ */ new WeakMap();
+  let index = 0;
+  function assign(node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const len = (node.textContent || "").length;
+      rangeMap.set(node, { start: index, end: index + len });
+      index += len;
+      return;
+    }
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const el = node;
+      const tag = el.tagName.toLowerCase();
+      const start = index;
+      if (voidTags.has(tag)) {
+        rangeMap.set(node, { start: index, end: index + 1 });
+        index += 1;
+        return;
+      }
+      Array.from(el.childNodes).forEach(assign);
+      rangeMap.set(node, { start, end: index });
+      return;
+    }
+    rangeMap.set(node, { start: index, end: index });
+  }
+  Array.from(root.childNodes).forEach(assign);
+  return { rangeMap, totalLength: index };
+}
+function convertNodeToReactWithRange(node, typedLen, rangeMap) {
+  const range = rangeMap.get(node);
+  if (!range) return null;
+  if (range.start >= typedLen) return null;
+  if (node.nodeType === Node.TEXT_NODE) {
+    const text = node.textContent || "";
+    if (range.end <= typedLen) return text;
+    return text.slice(0, typedLen - range.start);
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) return null;
+  const element = node;
+  const tag = element.tagName.toLowerCase();
+  const props = {};
+  Array.from(element.attributes).forEach((attr) => {
+    props[attr.name] = attr.value;
+  });
+  if (voidTags.has(tag)) {
+    return import_react.default.createElement(tag, props);
+  }
+  const children = Array.from(element.childNodes).map((child) => convertNodeToReactWithRange(child, typedLen, rangeMap)).filter((n) => n != null);
+  return import_react.default.createElement(tag, props, ...children);
+}
+function htmlToReactProgressive(root, typedLen, rangeMap) {
+  const nodes = Array.from(root.childNodes).map((child, idx) => {
+    const node = convertNodeToReactWithRange(child, typedLen, rangeMap);
+    return node == null ? null : import_react.default.createElement(import_react.default.Fragment, { key: idx }, node);
+  }).filter(Boolean);
+  return nodes.length === 0 ? null : nodes;
+}
+
+// src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var HtmlTypeWriter = ({
+  html,
+  duration = 20,
+  onDone,
+  onChange
+}) => {
+  const [typedLen, setTypedLen] = import_react2.default.useState(0);
+  const doneCalledRef = import_react2.default.useRef(false);
+  const { doc, rangeMap, totalLength } = import_react2.default.useMemo(() => {
+    const decoded = decodeHtmlEntities(html);
+    const doc2 = new DOMParser().parseFromString(decoded, "text/html");
+    const { rangeMap: rangeMap2, totalLength: totalLength2 } = buildRangeMap(doc2.body);
+    return { doc: doc2, rangeMap: rangeMap2, totalLength: totalLength2 };
+  }, [html]);
+  import_react2.default.useEffect(() => {
+    setTypedLen(0);
+    doneCalledRef.current = false;
+  }, [html]);
+  import_react2.default.useEffect(() => {
+    if (!totalLength) return;
+    if (typedLen >= totalLength) return;
+    const timer = window.setInterval(() => {
+      setTypedLen((prev) => Math.min(prev + 1, totalLength));
+    }, duration);
+    return () => window.clearInterval(timer);
+  }, [typedLen, totalLength, duration]);
+  import_react2.default.useEffect(() => {
+    if (typedLen > 0 && typedLen < totalLength) {
+      onChange?.();
+    }
+  }, [typedLen, totalLength, onChange]);
+  import_react2.default.useEffect(() => {
+    if (typedLen === totalLength && totalLength > 0 && !doneCalledRef.current) {
+      doneCalledRef.current = true;
+      onDone?.();
+    }
+  }, [typedLen, totalLength, onDone]);
+  const parsed = import_react2.default.useMemo(
+    () => htmlToReactProgressive(doc.body, typedLen, rangeMap),
+    [doc.body, typedLen, rangeMap]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
+};
+HtmlTypeWriter.displayName = "HtmlTypeWriter";
+var HtmlTypeWriter_default = HtmlTypeWriter;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  HtmlTypewriter
+});

package/dist/components/HtmlTypeWriter/index.css

@@ -0,0 +1,23 @@
+/* src/components/HtmlTypeWriter/htmlTypeWriter.scss */
+.lib-xplat-htmlTypewriter {
+  font-size: 16px;
+}
+.lib-xplat-htmlTypewriter h1,
+.lib-xplat-htmlTypewriter h2,
+.lib-xplat-htmlTypewriter h3,
+.lib-xplat-htmlTypewriter h4,
+.lib-xplat-htmlTypewriter h5,
+.lib-xplat-htmlTypewriter h6 {
+  font-weight: 600;
+}
+.lib-xplat-htmlTypewriter h3 {
+  font-size: 28px;
+}
+.lib-xplat-htmlTypewriter h4 {
+  font-size: 20px;
+}
+.lib-xplat-htmlTypewriter hr {
+  color: #E5E5E5;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}

package/dist/components/HtmlTypeWriter/index.d.cts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface HtmlTypewriterProps {
+    html: string;
+    duration?: number;
+    onDone?: () => void;
+    onChange?: () => void;
+}
+declare const HtmlTypeWriter: {
+    ({ html, duration, onDone, onChange, }: HtmlTypewriterProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { HtmlTypeWriter as HtmlTypewriter };

package/dist/components/HtmlTypeWriter/index.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface HtmlTypewriterProps {
+    html: string;
+    duration?: number;
+    onDone?: () => void;
+    onChange?: () => void;
+}
+declare const HtmlTypeWriter: {
+    ({ html, duration, onDone, onChange, }: HtmlTypewriterProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { HtmlTypeWriter as HtmlTypewriter };

package/dist/components/HtmlTypeWriter/index.js

@@ -0,0 +1,135 @@
+// src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
+import React2 from "react";
+
+// src/components/HtmlTypeWriter/utils.ts
+import React from "react";
+var voidTags = /* @__PURE__ */ new Set([
+  "br",
+  "img",
+  "hr",
+  "input",
+  "meta",
+  "link",
+  "area",
+  "base",
+  "col",
+  "embed",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+function decodeHtmlEntities(str) {
+  return str.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#x27;/g, "'").replace(/&#39;/g, "'").replace(/&#(\d+);/g, (_, code) => String.fromCharCode(Number(code))).replace(
+    /&#x([0-9a-fA-F]+);/g,
+    (_, code) => String.fromCharCode(parseInt(code, 16))
+  );
+}
+function buildRangeMap(root) {
+  const rangeMap = /* @__PURE__ */ new WeakMap();
+  let index = 0;
+  function assign(node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const len = (node.textContent || "").length;
+      rangeMap.set(node, { start: index, end: index + len });
+      index += len;
+      return;
+    }
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const el = node;
+      const tag = el.tagName.toLowerCase();
+      const start = index;
+      if (voidTags.has(tag)) {
+        rangeMap.set(node, { start: index, end: index + 1 });
+        index += 1;
+        return;
+      }
+      Array.from(el.childNodes).forEach(assign);
+      rangeMap.set(node, { start, end: index });
+      return;
+    }
+    rangeMap.set(node, { start: index, end: index });
+  }
+  Array.from(root.childNodes).forEach(assign);
+  return { rangeMap, totalLength: index };
+}
+function convertNodeToReactWithRange(node, typedLen, rangeMap) {
+  const range = rangeMap.get(node);
+  if (!range) return null;
+  if (range.start >= typedLen) return null;
+  if (node.nodeType === Node.TEXT_NODE) {
+    const text = node.textContent || "";
+    if (range.end <= typedLen) return text;
+    return text.slice(0, typedLen - range.start);
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) return null;
+  const element = node;
+  const tag = element.tagName.toLowerCase();
+  const props = {};
+  Array.from(element.attributes).forEach((attr) => {
+    props[attr.name] = attr.value;
+  });
+  if (voidTags.has(tag)) {
+    return React.createElement(tag, props);
+  }
+  const children = Array.from(element.childNodes).map((child) => convertNodeToReactWithRange(child, typedLen, rangeMap)).filter((n) => n != null);
+  return React.createElement(tag, props, ...children);
+}
+function htmlToReactProgressive(root, typedLen, rangeMap) {
+  const nodes = Array.from(root.childNodes).map((child, idx) => {
+    const node = convertNodeToReactWithRange(child, typedLen, rangeMap);
+    return node == null ? null : React.createElement(React.Fragment, { key: idx }, node);
+  }).filter(Boolean);
+  return nodes.length === 0 ? null : nodes;
+}
+
+// src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
+import { jsx } from "react/jsx-runtime";
+var HtmlTypeWriter = ({
+  html,
+  duration = 20,
+  onDone,
+  onChange
+}) => {
+  const [typedLen, setTypedLen] = React2.useState(0);
+  const doneCalledRef = React2.useRef(false);
+  const { doc, rangeMap, totalLength } = React2.useMemo(() => {
+    const decoded = decodeHtmlEntities(html);
+    const doc2 = new DOMParser().parseFromString(decoded, "text/html");
+    const { rangeMap: rangeMap2, totalLength: totalLength2 } = buildRangeMap(doc2.body);
+    return { doc: doc2, rangeMap: rangeMap2, totalLength: totalLength2 };
+  }, [html]);
+  React2.useEffect(() => {
+    setTypedLen(0);
+    doneCalledRef.current = false;
+  }, [html]);
+  React2.useEffect(() => {
+    if (!totalLength) return;
+    if (typedLen >= totalLength) return;
+    const timer = window.setInterval(() => {
+      setTypedLen((prev) => Math.min(prev + 1, totalLength));
+    }, duration);
+    return () => window.clearInterval(timer);
+  }, [typedLen, totalLength, duration]);
+  React2.useEffect(() => {
+    if (typedLen > 0 && typedLen < totalLength) {
+      onChange?.();
+    }
+  }, [typedLen, totalLength, onChange]);
+  React2.useEffect(() => {
+    if (typedLen === totalLength && totalLength > 0 && !doneCalledRef.current) {
+      doneCalledRef.current = true;
+      onDone?.();
+    }
+  }, [typedLen, totalLength, onDone]);
+  const parsed = React2.useMemo(
+    () => htmlToReactProgressive(doc.body, typedLen, rangeMap),
+    [doc.body, typedLen, rangeMap]
+  );
+  return /* @__PURE__ */ jsx("div", { className: "lib-xplat-htmlTypewriter", children: parsed });
+};
+HtmlTypeWriter.displayName = "HtmlTypeWriter";
+var HtmlTypeWriter_default = HtmlTypeWriter;
+export {
+  HtmlTypeWriter_default as HtmlTypewriter
+};