@01.software/sdk 0.2.9-dev.260305.4f1735b → 0.2.9-dev.260306.4e16dd4

package/dist/components.js

@@ -17,6 +17,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -39,34 +51,205 @@ var __async = (__this, __arguments, generator) => {
 };
 
 // src/components/RichTextContent/index.tsx
-import React from "react";
+import React2 from "react";
 import {
   defaultJSXConverters,
   LinkJSXConverter,
-  RichText
+  RichText,
+  TextJSXConverter
 } from "@payloadcms/richtext-lexical/react";
+
+// src/components/RichTextContent/styled.tsx
+import React from "react";
+function createComponentConverters(components, internalDocToHref) {
+  const converters = {};
+  if (components.Heading) {
+    const Heading = components.Heading;
+    converters.heading = ({ node, nodesToJSX }) => /* @__PURE__ */ React.createElement(Heading, { tag: node.tag, node }, nodesToJSX({ nodes: node.children }));
+  }
+  if (components.Paragraph) {
+    const Paragraph = components.Paragraph;
+    converters.paragraph = ({ node, nodesToJSX }) => {
+      const children = nodesToJSX({ nodes: node.children });
+      return /* @__PURE__ */ React.createElement(Paragraph, { isEmpty: !(children == null ? void 0 : children.length), node }, (children == null ? void 0 : children.length) ? children : /* @__PURE__ */ React.createElement("br", null));
+    };
+  }
+  if (components.Blockquote) {
+    const Blockquote = components.Blockquote;
+    converters.quote = ({ node, nodesToJSX }) => /* @__PURE__ */ React.createElement(Blockquote, { node }, nodesToJSX({ nodes: node.children }));
+  }
+  if (components.List) {
+    const List = components.List;
+    converters.list = ({ node, nodesToJSX }) => /* @__PURE__ */ React.createElement(List, { tag: node.tag, listType: node.listType, node }, nodesToJSX({ nodes: node.children }));
+  }
+  if (components.ListItem) {
+    const ListItem = components.ListItem;
+    converters.listitem = ({ node, nodesToJSX }) => {
+      const hasSubLists = node.children.some(
+        (child) => child.type === "list"
+      );
+      return /* @__PURE__ */ React.createElement(
+        ListItem,
+        {
+          hasSubLists,
+          checked: node.checked,
+          value: node.value,
+          node
+        },
+        nodesToJSX({ nodes: node.children })
+      );
+    };
+  }
+  if (components.Link) {
+    const Link = components.Link;
+    const resolveHref = (node) => {
+      var _a;
+      if (node.fields.linkType === "internal") {
+        return internalDocToHref ? internalDocToHref({ linkNode: node }) : "#";
+      }
+      return (_a = node.fields.url) != null ? _a : "";
+    };
+    converters.link = ({ node, nodesToJSX }) => /* @__PURE__ */ React.createElement(
+      Link,
+      {
+        href: resolveHref(node),
+        rel: node.fields.newTab ? "noopener noreferrer" : void 0,
+        target: node.fields.newTab ? "_blank" : void 0,
+        node
+      },
+      nodesToJSX({ nodes: node.children })
+    );
+    converters.autolink = ({ node, nodesToJSX }) => {
+      var _a;
+      return /* @__PURE__ */ React.createElement(
+        Link,
+        {
+          href: (_a = node.fields.url) != null ? _a : "",
+          rel: node.fields.newTab ? "noopener noreferrer" : void 0,
+          target: node.fields.newTab ? "_blank" : void 0,
+          node
+        },
+        nodesToJSX({ nodes: node.children })
+      );
+    };
+  }
+  if (components.HorizontalRule) {
+    const HorizontalRule = components.HorizontalRule;
+    converters.horizontalrule = /* @__PURE__ */ React.createElement(HorizontalRule, null);
+  }
+  if (components.Upload) {
+    const Upload = components.Upload;
+    converters.upload = ({ node }) => {
+      var _a;
+      const uploadNode = node;
+      if (typeof uploadNode.value !== "object") return null;
+      const doc = uploadNode.value;
+      return /* @__PURE__ */ React.createElement(
+        Upload,
+        {
+          src: doc.url,
+          alt: ((_a = uploadNode.fields) == null ? void 0 : _a.alt) || (doc == null ? void 0 : doc.alt) || "",
+          width: doc.width,
+          height: doc.height,
+          mimeType: doc.mimeType,
+          filename: doc.filename,
+          sizes: doc.sizes,
+          node
+        }
+      );
+    };
+  }
+  if (components.Table) {
+    const Table = components.Table;
+    converters.table = ({ node, nodesToJSX }) => /* @__PURE__ */ React.createElement(Table, { node }, nodesToJSX({ nodes: node.children }));
+  }
+  if (components.TableRow) {
+    const TableRow = components.TableRow;
+    converters.tablerow = ({ node, nodesToJSX }) => /* @__PURE__ */ React.createElement(TableRow, { node }, nodesToJSX({ nodes: node.children }));
+  }
+  if (components.TableCell) {
+    const TableCell = components.TableCell;
+    converters.tablecell = ({ node, nodesToJSX }) => /* @__PURE__ */ React.createElement(
+      TableCell,
+      {
+        tag: node.headerState > 0 ? "th" : "td",
+        colSpan: node.colSpan > 1 ? node.colSpan : void 0,
+        rowSpan: node.rowSpan > 1 ? node.rowSpan : void 0,
+        backgroundColor: node.backgroundColor || void 0,
+        node
+      },
+      nodesToJSX({ nodes: node.children })
+    );
+  }
+  return converters;
+}
+function StyledRichTextContent(_a) {
+  var _b = _a, {
+    components = {},
+    internalDocToHref,
+    blocks,
+    textState
+  } = _b, props = __objRest(_b, [
+    "components",
+    "internalDocToHref",
+    "blocks",
+    "textState"
+  ]);
+  const converters = createComponentConverters(components, internalDocToHref);
+  return /* @__PURE__ */ React.createElement(
+    RichTextContent,
+    __spreadProps(__spreadValues({}, props), {
+      internalDocToHref,
+      converters,
+      blocks,
+      textState
+    })
+  );
+}
+
+// src/components/RichTextContent/index.tsx
+function hyphenToCamel(str) {
+  return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+function createTextStateConverter(state) {
+  const defaultTextConverter = TextJSXConverter.text;
+  return (_a) => {
+    var _b = _a, { node } = _b, rest = __objRest(_b, ["node"]);
+    var _a2, _b2;
+    const base = defaultTextConverter(__spreadValues({ node }, rest));
+    const nodeState = node.$;
+    if (!nodeState || typeof nodeState !== "object") return base;
+    const style = {};
+    for (const stateKey in nodeState) {
+      const stateValue = nodeState[stateKey];
+      if (!stateValue) continue;
+      const css = (_b2 = (_a2 = state[stateKey]) == null ? void 0 : _a2[stateValue]) == null ? void 0 : _b2.css;
+      if (css) {
+        for (const prop in css) {
+          const val = css[prop];
+          if (val) style[hyphenToCamel(prop)] = val;
+        }
+      }
+    }
+    if (Object.keys(style).length === 0) return base;
+    return /* @__PURE__ */ React2.createElement("span", { style }, base);
+  };
+}
 function RichTextContent({
   data,
   className,
   internalDocToHref,
-  blocks
+  converters,
+  blocks,
+  disableDefaultConverters,
+  textState
 }) {
-  return /* @__PURE__ */ React.createElement(
-    RichText,
-    {
-      data,
-      className,
-      converters: __spreadProps(__spreadValues(__spreadValues({}, defaultJSXConverters), LinkJSXConverter({
-        internalDocToHref
-      })), {
-        blocks: blocks ? blocks : void 0
-      })
-    }
-  );
+  const baseConverters = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, disableDefaultConverters ? {} : defaultJSXConverters), LinkJSXConverter({ internalDocToHref })), textState ? { text: createTextStateConverter(textState) } : {}), converters), blocks ? { blocks } : {});
+  return /* @__PURE__ */ React2.createElement(RichText, { data, className, converters: baseConverters });
 }
 
 // src/components/FormRenderer/index.tsx
-import React2, { useState, useCallback, useEffect, useRef } from "react";
+import React3, { useState, useCallback, useEffect, useRef } from "react";
 
 // src/components/FormRenderer/countries.ts
 var COUNTRIES = [
@@ -437,14 +620,14 @@ function FormRenderer({
       value: (_a2 = values[field.name]) != null ? _a2 : "",
       onChange: (v) => handleChange(field.name, v)
     };
-    const el = /* @__PURE__ */ React2.createElement(
+    const el = /* @__PURE__ */ React3.createElement(
       "div",
       {
         key: (_b = field.id) != null ? _b : field.name,
         className: fieldClassName,
         style
       },
-      field.label && /* @__PURE__ */ React2.createElement("label", { htmlFor: field.name }, field.label),
+      field.label && /* @__PURE__ */ React3.createElement("label", { htmlFor: field.name }, field.label),
       input
     );
     return renderField ? renderField(field, context, el) : el;
@@ -454,7 +637,7 @@ function FormRenderer({
     return wrapField(
       field,
       style,
-      /* @__PURE__ */ React2.createElement(
+      /* @__PURE__ */ React3.createElement(
         "select",
         {
           id: field.name,
@@ -463,8 +646,8 @@ function FormRenderer({
           required: (_b = field.required) != null ? _b : false,
           onChange: (e) => handleChange(field.name, e.target.value)
         },
-        /* @__PURE__ */ React2.createElement("option", { value: "" }, placeholder || "Select\u2026"),
-        options.map((opt) => /* @__PURE__ */ React2.createElement("option", { key: opt.value, value: opt.value }, opt.label))
+        /* @__PURE__ */ React3.createElement("option", { value: "" }, placeholder || "Select\u2026"),
+        options.map((opt) => /* @__PURE__ */ React3.createElement("option", { key: opt.value, value: opt.value }, opt.label))
       )
     );
   };
@@ -476,7 +659,7 @@ function FormRenderer({
         return wrapField(
           field,
           style,
-          /* @__PURE__ */ React2.createElement(
+          /* @__PURE__ */ React3.createElement(
             "input",
             {
               type: "text",
@@ -493,7 +676,7 @@ function FormRenderer({
         return wrapField(
           field,
           style,
-          /* @__PURE__ */ React2.createElement(
+          /* @__PURE__ */ React3.createElement(
             "input",
             {
               type: "email",
@@ -509,7 +692,7 @@ function FormRenderer({
         return wrapField(
           field,
           style,
-          /* @__PURE__ */ React2.createElement(
+          /* @__PURE__ */ React3.createElement(
             "input",
             {
               type: "number",
@@ -530,7 +713,7 @@ function FormRenderer({
         return wrapField(
           field,
           style,
-          /* @__PURE__ */ React2.createElement(
+          /* @__PURE__ */ React3.createElement(
             "textarea",
             {
               id: field.name,
@@ -546,14 +729,14 @@ function FormRenderer({
           value: (_j = values[field.name]) != null ? _j : false,
           onChange: (v) => handleChange(field.name, v)
         };
-        const el = /* @__PURE__ */ React2.createElement(
+        const el = /* @__PURE__ */ React3.createElement(
           "div",
           {
             key: (_k = field.id) != null ? _k : field.name,
             className: fieldClassName,
             style
           },
-          /* @__PURE__ */ React2.createElement("label", { htmlFor: field.name }, /* @__PURE__ */ React2.createElement(
+          /* @__PURE__ */ React3.createElement("label", { htmlFor: field.name }, /* @__PURE__ */ React3.createElement(
             "input",
             {
               type: "checkbox",
@@ -563,7 +746,7 @@ function FormRenderer({
               required: (_l = field.required) != null ? _l : false,
               onChange: (e) => handleChange(field.name, e.target.checked)
             }
-          ), field.label && /* @__PURE__ */ React2.createElement("span", null, field.label))
+          ), field.label && /* @__PURE__ */ React3.createElement("span", null, field.label))
         );
         return renderField ? renderField(field, context, el) : el;
       }
@@ -580,7 +763,7 @@ function FormRenderer({
         return renderSelectField(field, style, US_STATES);
       case "message":
         if (renderMessage && field.message) {
-          return /* @__PURE__ */ React2.createElement(React2.Fragment, { key: (_p = (_o = field.id) != null ? _o : field.blockName) != null ? _p : "message" }, renderMessage(field.message));
+          return /* @__PURE__ */ React3.createElement(React3.Fragment, { key: (_p = (_o = field.id) != null ? _o : field.blockName) != null ? _p : "message" }, renderMessage(field.message));
         }
         return null;
       default:
@@ -588,7 +771,7 @@ function FormRenderer({
     }
   };
   const buttonLabel = form.submitButtonLabel || "Submit";
-  return /* @__PURE__ */ React2.createElement("form", { onSubmit: handleSubmit, className }, (_a = form.fields) == null ? void 0 : _a.map((field) => renderFieldElement(field)), renderButton ? renderButton({ isSubmitting, label: buttonLabel }) : /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement("form", { onSubmit: handleSubmit, className }, (_a = form.fields) == null ? void 0 : _a.map((field) => renderFieldElement(field)), renderButton ? renderButton({ isSubmitting, label: buttonLabel }) : /* @__PURE__ */ React3.createElement(
     "button",
     {
       type: "submit",
@@ -600,7 +783,7 @@ function FormRenderer({
 }
 
 // src/components/Image/index.tsx
-import React3, { useCallback as useCallback2, useRef as useRef2, useState as useState2 } from "react";
+import React4, { useCallback as useCallback2, useRef as useRef2, useState as useState2 } from "react";
 
 // src/utils/image.ts
 var IMAGE_SIZES = [384, 768, 1536];
@@ -715,7 +898,7 @@ function Image({
     opacity: loaded ? 1 : 0,
     transition: "opacity 0.3s ease"
   }), imgStyle);
-  return /* @__PURE__ */ React3.createElement("div", { className, style: containerStyle }, hasLqip && /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement("div", { className, style: containerStyle }, hasLqip && /* @__PURE__ */ React4.createElement(
     "img",
     {
       "aria-hidden": true,
@@ -728,7 +911,7 @@ function Image({
         transform: "scale(1.1)"
       })
     }
-  ), placeholderColor && /* @__PURE__ */ React3.createElement(
+  ), placeholderColor && /* @__PURE__ */ React4.createElement(
     "div",
     {
       "aria-hidden": true,
@@ -736,7 +919,7 @@ function Image({
         backgroundColor: placeholderColor
       })
     }
-  ), /* @__PURE__ */ React3.createElement(
+  ), /* @__PURE__ */ React4.createElement(
     "img",
     {
       ref: imgRef,
@@ -754,10 +937,139 @@ function Image({
     }
   ));
 }
+
+// src/components/CodeBlock/index.tsx
+import React5, { useEffect as useEffect2, useState as useState3 } from "react";
+
+// src/components/CodeBlock/highlight.ts
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { toJsxRuntime } from "hast-util-to-jsx-runtime";
+import { codeToHast } from "shiki";
+var LANGUAGE_ALIASES = {
+  js: "javascript",
+  ts: "typescript",
+  sh: "bash",
+  shell: "bash",
+  yml: "yaml",
+  py: "python",
+  rb: "ruby",
+  plaintext: "text"
+};
+function normalizeLanguage(lang) {
+  return LANGUAGE_ALIASES[lang] || lang;
+}
+function highlight(code, lang, theme = "github-dark") {
+  return __async(this, null, function* () {
+    const normalized = normalizeLanguage(lang);
+    try {
+      const hast = yield codeToHast(code, {
+        lang: normalized,
+        theme
+      });
+      return toJsxRuntime(hast, { Fragment, jsx, jsxs });
+    } catch (e) {
+      const hast = yield codeToHast(code, { lang: "text", theme });
+      return toJsxRuntime(hast, { Fragment, jsx, jsxs });
+    }
+  });
+}
+
+// src/components/CodeBlock/index.tsx
+function CodeBlock({
+  code,
+  language = "typescript",
+  theme = "github-dark",
+  className,
+  initial,
+  showLineNumbers = false,
+  showCopyButton = true
+}) {
+  const [nodes, setNodes] = useState3(initial);
+  const [copied, setCopied] = useState3(false);
+  useEffect2(() => {
+    let cancelled = false;
+    void highlight(code, language, theme).then((el) => {
+      if (!cancelled) setNodes(el);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [code, language, theme]);
+  const handleCopy = () => {
+    void navigator.clipboard.writeText(code).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }, () => {
+    });
+  };
+  return /* @__PURE__ */ React5.createElement("div", { className, style: { position: "relative" } }, showCopyButton && /* @__PURE__ */ React5.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handleCopy,
+      "aria-label": "Copy code",
+      style: {
+        position: "absolute",
+        top: 8,
+        right: 8,
+        zIndex: 1,
+        padding: "4px 8px",
+        fontSize: 12,
+        lineHeight: 1,
+        border: "1px solid rgba(255,255,255,0.2)",
+        borderRadius: 4,
+        background: "rgba(0,0,0,0.3)",
+        color: "#ccc",
+        cursor: "pointer",
+        opacity: 0.7,
+        transition: "opacity 0.15s"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.opacity = "1";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.opacity = "0.7";
+      }
+    },
+    copied ? "Copied!" : "Copy"
+  ), showLineNumbers && nodes ? /* @__PURE__ */ React5.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      "aria-hidden": true,
+      style: {
+        padding: "1em 0.5em 1em 1em",
+        textAlign: "right",
+        userSelect: "none",
+        color: "rgba(255,255,255,0.3)",
+        fontFamily: "monospace",
+        fontSize: 13,
+        lineHeight: 1.5
+      }
+    },
+    code.split("\n").map((_, i) => /* @__PURE__ */ React5.createElement("div", { key: i }, i + 1))
+  ), /* @__PURE__ */ React5.createElement("div", { style: { flex: 1, overflow: "auto" } }, nodes)) : nodes != null ? nodes : /* @__PURE__ */ React5.createElement(
+    "pre",
+    {
+      style: {
+        margin: 0,
+        padding: "1em",
+        overflow: "auto",
+        fontFamily: "monospace",
+        fontSize: 13,
+        lineHeight: 1.5
+      }
+    },
+    /* @__PURE__ */ React5.createElement("code", null, code)
+  ));
+}
 export {
+  CodeBlock,
   FormRenderer,
   Image,
   RichTextContent,
+  StyledRichTextContent,
+  highlight,
   toSubmissionData
 };
 //# sourceMappingURL=components.js.map