@01.software/sdk 0.2.8 → 0.2.9-dev.260305.35fd2d4

package/dist/components.cjs

@@ -22,6 +22,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 __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -70,35 +82,206 @@ __export(components_exports, {
   FormRenderer: () => FormRenderer,
   Image: () => Image,
   RichTextContent: () => RichTextContent,
+  StyledRichTextContent: () => StyledRichTextContent,
   toSubmissionData: () => toSubmissionData
 });
 module.exports = __toCommonJS(components_exports);
 
 // src/components/RichTextContent/index.tsx
+var import_react2 = __toESM(require("react"), 1);
+var import_react3 = require("@payloadcms/richtext-lexical/react");
+
+// src/components/RichTextContent/styled.tsx
 var import_react = __toESM(require("react"), 1);
-var import_react2 = require("@payloadcms/richtext-lexical/react");
+function createComponentConverters(components, internalDocToHref) {
+  const converters = {};
+  if (components.Heading) {
+    const Heading = components.Heading;
+    converters.heading = ({ node, nodesToJSX }) => /* @__PURE__ */ import_react.default.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__ */ import_react.default.createElement(Paragraph, { isEmpty: !(children == null ? void 0 : children.length), node }, (children == null ? void 0 : children.length) ? children : /* @__PURE__ */ import_react.default.createElement("br", null));
+    };
+  }
+  if (components.Blockquote) {
+    const Blockquote = components.Blockquote;
+    converters.quote = ({ node, nodesToJSX }) => /* @__PURE__ */ import_react.default.createElement(Blockquote, { node }, nodesToJSX({ nodes: node.children }));
+  }
+  if (components.List) {
+    const List = components.List;
+    converters.list = ({ node, nodesToJSX }) => /* @__PURE__ */ import_react.default.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__ */ import_react.default.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__ */ import_react.default.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__ */ import_react.default.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__ */ import_react.default.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__ */ import_react.default.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__ */ import_react.default.createElement(Table, { node }, nodesToJSX({ nodes: node.children }));
+  }
+  if (components.TableRow) {
+    const TableRow = components.TableRow;
+    converters.tablerow = ({ node, nodesToJSX }) => /* @__PURE__ */ import_react.default.createElement(TableRow, { node }, nodesToJSX({ nodes: node.children }));
+  }
+  if (components.TableCell) {
+    const TableCell = components.TableCell;
+    converters.tablecell = ({ node, nodesToJSX }) => /* @__PURE__ */ import_react.default.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__ */ import_react.default.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 = import_react3.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__ */ import_react2.default.createElement("span", { style }, base);
+  };
+}
 function RichTextContent({
   data,
   className,
   internalDocToHref,
-  blocks
+  converters,
+  blocks,
+  disableDefaultConverters,
+  textState
 }) {
-  return /* @__PURE__ */ import_react.default.createElement(
-    import_react2.RichText,
-    {
-      data,
-      className,
-      converters: __spreadProps(__spreadValues(__spreadValues({}, import_react2.defaultJSXConverters), (0, import_react2.LinkJSXConverter)({
-        internalDocToHref
-      })), {
-        blocks: blocks ? blocks : void 0
-      })
-    }
-  );
+  const baseConverters = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, disableDefaultConverters ? {} : import_react3.defaultJSXConverters), (0, import_react3.LinkJSXConverter)({ internalDocToHref })), textState ? { text: createTextStateConverter(textState) } : {}), converters), blocks ? { blocks } : {});
+  return /* @__PURE__ */ import_react2.default.createElement(import_react3.RichText, { data, className, converters: baseConverters });
 }
 
 // src/components/FormRenderer/index.tsx
-var import_react3 = __toESM(require("react"), 1);
+var import_react4 = __toESM(require("react"), 1);
 
 // src/components/FormRenderer/countries.ts
 var COUNTRIES = [
@@ -437,15 +620,15 @@ function FormRenderer({
   renderButton
 }) {
   var _a;
-  const [values, setValues] = (0, import_react3.useState)(
+  const [values, setValues] = (0, import_react4.useState)(
     () => getInitialValues(form.fields)
   );
-  const [isSubmitting, setIsSubmitting] = (0, import_react3.useState)(false);
-  const submittingRef = (0, import_react3.useRef)(false);
-  (0, import_react3.useEffect)(() => {
+  const [isSubmitting, setIsSubmitting] = (0, import_react4.useState)(false);
+  const submittingRef = (0, import_react4.useRef)(false);
+  (0, import_react4.useEffect)(() => {
     setValues(getInitialValues(form.fields));
   }, [form.id]);
-  const handleChange = (0, import_react3.useCallback)(
+  const handleChange = (0, import_react4.useCallback)(
     (name, value) => {
       setValues((prev) => __spreadProps(__spreadValues({}, prev), { [name]: value }));
     },
@@ -469,14 +652,14 @@ function FormRenderer({
       value: (_a2 = values[field.name]) != null ? _a2 : "",
       onChange: (v) => handleChange(field.name, v)
     };
-    const el = /* @__PURE__ */ import_react3.default.createElement(
+    const el = /* @__PURE__ */ import_react4.default.createElement(
       "div",
       {
         key: (_b = field.id) != null ? _b : field.name,
         className: fieldClassName,
         style
       },
-      field.label && /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: field.name }, field.label),
+      field.label && /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: field.name }, field.label),
       input
     );
     return renderField ? renderField(field, context, el) : el;
@@ -486,7 +669,7 @@ function FormRenderer({
     return wrapField(
       field,
       style,
-      /* @__PURE__ */ import_react3.default.createElement(
+      /* @__PURE__ */ import_react4.default.createElement(
         "select",
         {
           id: field.name,
@@ -495,8 +678,8 @@ function FormRenderer({
           required: (_b = field.required) != null ? _b : false,
           onChange: (e) => handleChange(field.name, e.target.value)
         },
-        /* @__PURE__ */ import_react3.default.createElement("option", { value: "" }, placeholder || "Select\u2026"),
-        options.map((opt) => /* @__PURE__ */ import_react3.default.createElement("option", { key: opt.value, value: opt.value }, opt.label))
+        /* @__PURE__ */ import_react4.default.createElement("option", { value: "" }, placeholder || "Select\u2026"),
+        options.map((opt) => /* @__PURE__ */ import_react4.default.createElement("option", { key: opt.value, value: opt.value }, opt.label))
       )
     );
   };
@@ -508,7 +691,7 @@ function FormRenderer({
         return wrapField(
           field,
           style,
-          /* @__PURE__ */ import_react3.default.createElement(
+          /* @__PURE__ */ import_react4.default.createElement(
             "input",
             {
               type: "text",
@@ -525,7 +708,7 @@ function FormRenderer({
         return wrapField(
           field,
           style,
-          /* @__PURE__ */ import_react3.default.createElement(
+          /* @__PURE__ */ import_react4.default.createElement(
             "input",
             {
               type: "email",
@@ -541,7 +724,7 @@ function FormRenderer({
         return wrapField(
           field,
           style,
-          /* @__PURE__ */ import_react3.default.createElement(
+          /* @__PURE__ */ import_react4.default.createElement(
             "input",
             {
               type: "number",
@@ -562,7 +745,7 @@ function FormRenderer({
         return wrapField(
           field,
           style,
-          /* @__PURE__ */ import_react3.default.createElement(
+          /* @__PURE__ */ import_react4.default.createElement(
             "textarea",
             {
               id: field.name,
@@ -578,14 +761,14 @@ function FormRenderer({
           value: (_j = values[field.name]) != null ? _j : false,
           onChange: (v) => handleChange(field.name, v)
         };
-        const el = /* @__PURE__ */ import_react3.default.createElement(
+        const el = /* @__PURE__ */ import_react4.default.createElement(
           "div",
           {
             key: (_k = field.id) != null ? _k : field.name,
             className: fieldClassName,
             style
           },
-          /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: field.name }, /* @__PURE__ */ import_react3.default.createElement(
+          /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: field.name }, /* @__PURE__ */ import_react4.default.createElement(
             "input",
             {
               type: "checkbox",
@@ -595,7 +778,7 @@ function FormRenderer({
               required: (_l = field.required) != null ? _l : false,
               onChange: (e) => handleChange(field.name, e.target.checked)
             }
-          ), field.label && /* @__PURE__ */ import_react3.default.createElement("span", null, field.label))
+          ), field.label && /* @__PURE__ */ import_react4.default.createElement("span", null, field.label))
         );
         return renderField ? renderField(field, context, el) : el;
       }
@@ -612,7 +795,7 @@ function FormRenderer({
         return renderSelectField(field, style, US_STATES);
       case "message":
         if (renderMessage && field.message) {
-          return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, { key: (_p = (_o = field.id) != null ? _o : field.blockName) != null ? _p : "message" }, renderMessage(field.message));
+          return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, { key: (_p = (_o = field.id) != null ? _o : field.blockName) != null ? _p : "message" }, renderMessage(field.message));
         }
         return null;
       default:
@@ -620,7 +803,7 @@ function FormRenderer({
     }
   };
   const buttonLabel = form.submitButtonLabel || "Submit";
-  return /* @__PURE__ */ import_react3.default.createElement("form", { onSubmit: handleSubmit, className }, (_a = form.fields) == null ? void 0 : _a.map((field) => renderFieldElement(field)), renderButton ? renderButton({ isSubmitting, label: buttonLabel }) : /* @__PURE__ */ import_react3.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement("form", { onSubmit: handleSubmit, className }, (_a = form.fields) == null ? void 0 : _a.map((field) => renderFieldElement(field)), renderButton ? renderButton({ isSubmitting, label: buttonLabel }) : /* @__PURE__ */ import_react4.default.createElement(
     "button",
     {
       type: "submit",
@@ -632,7 +815,7 @@ function FormRenderer({
 }
 
 // src/components/Image/index.tsx
-var import_react4 = __toESM(require("react"), 1);
+var import_react5 = __toESM(require("react"), 1);
 
 // src/utils/image.ts
 var IMAGE_SIZES = [384, 768, 1536];
@@ -697,8 +880,8 @@ function Image({
   imageRendering
 }) {
   var _a, _b;
-  const [loaded, setLoaded] = (0, import_react4.useState)(false);
-  const firedRef = (0, import_react4.useRef)(false);
+  const [loaded, setLoaded] = (0, import_react5.useState)(false);
+  const firedRef = (0, import_react5.useRef)(false);
   const isPixelRendering = imageRendering === "pixelated" || imageRendering === "crisp-edges";
   const placeholder = placeholderProp != null ? placeholderProp : isPixelRendering ? "none" : "blur";
   const loading = priority ? "eager" : loadingProp != null ? loadingProp : "lazy";
@@ -710,13 +893,13 @@ function Image({
     type: placeholder
   });
   const placeholderColor = !hasLqip && "backgroundColor" in placeholderStyle ? placeholderStyle.backgroundColor : void 0;
-  const fireLoad = (0, import_react4.useCallback)(() => {
+  const fireLoad = (0, import_react5.useCallback)(() => {
     if (firedRef.current) return;
     firedRef.current = true;
     setLoaded(true);
     onLoad == null ? void 0 : onLoad();
   }, [onLoad]);
-  const imgRef = (0, import_react4.useCallback)(
+  const imgRef = (0, import_react5.useCallback)(
     (node) => {
       if (node && node.complete && node.naturalWidth > 0) {
         fireLoad();
@@ -747,7 +930,7 @@ function Image({
     opacity: loaded ? 1 : 0,
     transition: "opacity 0.3s ease"
   }), imgStyle);
-  return /* @__PURE__ */ import_react4.default.createElement("div", { className, style: containerStyle }, hasLqip && /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement("div", { className, style: containerStyle }, hasLqip && /* @__PURE__ */ import_react5.default.createElement(
     "img",
     {
       "aria-hidden": true,
@@ -760,7 +943,7 @@ function Image({
         transform: "scale(1.1)"
       })
     }
-  ), placeholderColor && /* @__PURE__ */ import_react4.default.createElement(
+  ), placeholderColor && /* @__PURE__ */ import_react5.default.createElement(
     "div",
     {
       "aria-hidden": true,
@@ -768,7 +951,7 @@ function Image({
         backgroundColor: placeholderColor
       })
     }
-  ), /* @__PURE__ */ import_react4.default.createElement(
+  ), /* @__PURE__ */ import_react5.default.createElement(
     "img",
     {
       ref: imgRef,