@valbuild/react 0.18.0 → 0.20.0

package/dist/{ValUI-d33998d0.esm.js → ValUI-4cf199a2.esm.js}

@@ -7,7 +7,6 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useValApi } from './valbuild-react.esm.js';
 import './defineProperty-b209a901.esm.js';
 import '@valbuild/core/fp';
-import 'style-to-object';
 
 function ShadowContent(_ref) {
   var root = _ref.root,
@@ -15,7 +14,8 @@ function ShadowContent(_ref) {
   return /*#__PURE__*/createPortal(children, root);
 }
 var ShadowRoot = function ShadowRoot(_ref2) {
-  var children = _ref2.children;
+  var children = _ref2.children,
+    style = _ref2.style;
   var node = useRef(null);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -35,6 +35,7 @@ var ShadowRoot = function ShadowRoot(_ref2) {
   }, []);
   return /*#__PURE__*/jsx("div", {
     ref: node,
+    style: style,
     children: root && /*#__PURE__*/jsx(ShadowContent, {
       root: root,
       children: children
@@ -82,6 +83,12 @@ function ValUI() {
   }
   return /*#__PURE__*/jsx(Fragment, {
     children: /*#__PURE__*/jsxs(ShadowRoot, {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        zIndex: 8999 // 1 less than the NextJS error z-index: 9000
+      },
       children: [/*#__PURE__*/jsx("link", {
         rel: "preconnect",
         href: "https://fonts.googleapis.com"

package/dist/{ValUI-9ac161d2.cjs.dev.js → ValUI-7d465071.cjs.dev.js}

@@ -9,7 +9,6 @@ var ReactJSXRuntime = require('react/jsx-runtime');
 var dist_valbuildReact = require('./valbuild-react.cjs.dev.js');
 require('./defineProperty-c82a49b0.cjs.dev.js');
 require('@valbuild/core/fp');
-require('style-to-object');
 
 function ShadowContent(_ref) {
   var root = _ref.root,
@@ -17,7 +16,8 @@ function ShadowContent(_ref) {
   return /*#__PURE__*/reactDom.createPortal(children, root);
 }
 var ShadowRoot = function ShadowRoot(_ref2) {
-  var children = _ref2.children;
+  var children = _ref2.children,
+    style = _ref2.style;
   var node = React.useRef(null);
   var _useState = React.useState(null),
     _useState2 = slicedToArray._slicedToArray(_useState, 2),
@@ -37,6 +37,7 @@ var ShadowRoot = function ShadowRoot(_ref2) {
   }, []);
   return /*#__PURE__*/ReactJSXRuntime.jsx("div", {
     ref: node,
+    style: style,
     children: root && /*#__PURE__*/ReactJSXRuntime.jsx(ShadowContent, {
       root: root,
       children: children
@@ -84,6 +85,12 @@ function ValUI() {
   }
   return /*#__PURE__*/ReactJSXRuntime.jsx(ReactJSXRuntime.Fragment, {
     children: /*#__PURE__*/ReactJSXRuntime.jsxs(ShadowRoot, {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        zIndex: 8999 // 1 less than the NextJS error z-index: 9000
+      },
       children: [/*#__PURE__*/ReactJSXRuntime.jsx("link", {
         rel: "preconnect",
         href: "https://fonts.googleapis.com"

package/dist/{ValUI-64e3e5f2.browser.esm.js → ValUI-b51ca60e.browser.esm.js}

@@ -7,7 +7,6 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useValApi } from './valbuild-react.browser.esm.js';
 import './defineProperty-034d0378.browser.esm.js';
 import '@valbuild/core/fp';
-import 'style-to-object';
 
 function ShadowContent(_ref) {
   var root = _ref.root,
@@ -15,7 +14,8 @@ function ShadowContent(_ref) {
   return /*#__PURE__*/createPortal(children, root);
 }
 var ShadowRoot = function ShadowRoot(_ref2) {
-  var children = _ref2.children;
+  var children = _ref2.children,
+    style = _ref2.style;
   var node = useRef(null);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -35,6 +35,7 @@ var ShadowRoot = function ShadowRoot(_ref2) {
   }, []);
   return /*#__PURE__*/jsx("div", {
     ref: node,
+    style: style,
     children: root && /*#__PURE__*/jsx(ShadowContent, {
       root: root,
       children: children
@@ -82,6 +83,12 @@ function ValUI() {
   }
   return /*#__PURE__*/jsx(Fragment, {
     children: /*#__PURE__*/jsxs(ShadowRoot, {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        zIndex: 8999 // 1 less than the NextJS error z-index: 9000
+      },
       children: [/*#__PURE__*/jsx("link", {
         rel: "preconnect",
         href: "https://fonts.googleapis.com"

package/dist/{ValUI-3e00aae3.cjs.prod.js → ValUI-b5f81233.cjs.prod.js}

@@ -9,7 +9,6 @@ var ReactJSXRuntime = require('react/jsx-runtime');
 var dist_valbuildReact = require('./valbuild-react.cjs.prod.js');
 require('./defineProperty-36ed93cd.cjs.prod.js');
 require('@valbuild/core/fp');
-require('style-to-object');
 
 function ShadowContent(_ref) {
   var root = _ref.root,
@@ -17,7 +16,8 @@ function ShadowContent(_ref) {
   return /*#__PURE__*/reactDom.createPortal(children, root);
 }
 var ShadowRoot = function ShadowRoot(_ref2) {
-  var children = _ref2.children;
+  var children = _ref2.children,
+    style = _ref2.style;
   var node = React.useRef(null);
   var _useState = React.useState(null),
     _useState2 = slicedToArray._slicedToArray(_useState, 2),
@@ -37,6 +37,7 @@ var ShadowRoot = function ShadowRoot(_ref2) {
   }, []);
   return /*#__PURE__*/ReactJSXRuntime.jsx("div", {
     ref: node,
+    style: style,
     children: root && /*#__PURE__*/ReactJSXRuntime.jsx(ShadowContent, {
       root: root,
       children: children
@@ -84,6 +85,12 @@ function ValUI() {
   }
   return /*#__PURE__*/ReactJSXRuntime.jsx(ReactJSXRuntime.Fragment, {
     children: /*#__PURE__*/ReactJSXRuntime.jsxs(ShadowRoot, {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        zIndex: 8999 // 1 less than the NextJS error z-index: 9000
+      },
       children: [/*#__PURE__*/ReactJSXRuntime.jsx("link", {
         rel: "preconnect",
         href: "https://fonts.googleapis.com"

package/dist/declarations/src/ValRichText.d.ts

@@ -1,5 +1,23 @@
 /// <reference types="react" />
-import { RichText } from "@valbuild/core";
-export declare function ValRichText({ children }: {
-    children: RichText;
+import { RichText, RichTextOptions } from "@valbuild/core";
+type Tags = keyof Pick<RichTextOptions, "img" | "ul" | "ol">;
+type Classes = keyof Pick<RichTextOptions, "bold" | "italic" | "lineThrough">;
+type ThemeOptions<O extends RichTextOptions> = {
+    tags: (O["headings"] extends Array<unknown> ? {
+        [Key in O["headings"][number]]: string;
+    } : {}) & {
+        [Key in Tags & keyof O as O[Key] extends true ? Key extends "ul" | "ol" ? Key | "li" : Key : never]: string;
+    } & {
+        p?: string;
+    };
+    classes: {
+        [Key in Classes & keyof O as O[Key] extends true ? Key : never]: string;
+    } & (O["img"] extends true ? {
+        imgContainer?: string;
+    } : {});
+};
+export declare function ValRichText<O extends RichTextOptions>({ theme, children, }: {
+    theme: ThemeOptions<O>;
+    children: RichText<O>;
 }): JSX.Element;
+export {};

package/dist/declarations/src/stega/index.d.ts

@@ -1,2 +1,2 @@
 export { autoTagJSX } from "./autoTagJSX.js";
-export { transform, getModuleIds, type ValEncodedString, type StegaOfSource, } from "./transform.js";
+export { stegaEncode, getModuleIds, type ValEncodedString, type StegaOfSource, } from "./stegaEncode.js";

package/dist/declarations/src/stega/{transform.d.ts → stegaEncode.d.ts}

@@ -14,12 +14,12 @@ declare const brand: unique symbol;
 export type ValEncodedString = string & {
     [brand]: "ValEncodedString";
 };
-export type StegaOfSource<T extends Source> = Json extends T ? Json : T extends RichTextSource ? RichText : T extends FileSource ? {
+export type StegaOfSource<T extends Source> = Json extends T ? Json : T extends RichTextSource<infer O> ? RichText<O> : T extends FileSource ? {
     url: ValEncodedString;
 } : T extends SourceObject ? {
     [key in keyof T]: StegaOfSource<T[key]>;
 } : T extends SourceArray ? StegaOfSource<T[number]>[] : T extends string ? ValEncodedString : T extends JsonPrimitive ? T : never;
-export declare function transform(input: any, opts: {
+export declare function stegaEncode(input: any, opts: {
     getModule?: (moduleId: string) => any;
     disabled?: boolean;
 }): any;

package/dist/valbuild-react.browser.esm.js

@@ -1,10 +1,9 @@
-import React, { useContext, useMemo, lazy, createElement } from 'react';
+import React, { useContext, useMemo, lazy } from 'react';
 import { _ as _unsupportedIterableToArray, a as _slicedToArray } from './slicedToArray-0cbb3d34.browser.esm.js';
 import { _ as _toPropertyKey, a as _defineProperty } from './defineProperty-034d0378.browser.esm.js';
 import { result } from '@valbuild/core/fp';
 import { ValApi } from '@valbuild/core';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import parse from 'style-to-object';
 
 function _createForOfIteratorHelper(o, allowArrayLike) {
   var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
@@ -599,7 +598,7 @@ var ValContext = /*#__PURE__*/React.createContext({
   }
 });
 var ValUI = /*#__PURE__*/lazy(function () {
-  return import('./ValUI-64e3e5f2.browser.esm.js');
+  return import('./ValUI-b51ca60e.browser.esm.js');
 }) ;
 function ValProvider(_ref) {
   var _ref$host = _ref.host,
@@ -620,136 +619,138 @@ function ValProvider(_ref) {
   });
 }
 
+/* eslint-disable @typescript-eslint/ban-types */
 function ValRichText(_ref) {
-  var children = _ref.children;
+  var theme = _ref.theme,
+    children = _ref.children;
   var root = children;
-  var path = root.valPath;
-  return /*#__PURE__*/jsx("div", {
-    "data-val-path": path,
-    children: root.children.map(function (child, i) {
-      var childType = child.type;
-      var childPath = "".concat(path, ".").concat(i);
-      switch (childType) {
-        case "heading":
-          return /*#__PURE__*/jsx(HeadingNodeComponent, {
-            path: childPath,
-            node: child
-          }, childPath);
-        case "paragraph":
-          return /*#__PURE__*/jsx(ParagraphNodeComponent, {
-            path: childPath,
-            node: child
-          }, childPath);
-        case "list":
-          return /*#__PURE__*/jsx(ListNodeComponent, {
-            path: childPath,
-            node: child
-          }, childPath);
-        default:
-          throw Error("Unknown root node type: " + childType);
-      }
-    })
-  });
-}
-function TextNodeComponent(_ref2) {
-  var _parse, _node$format;
-  var node = _ref2.node;
-  var styleProps = node.style ? (_parse = parse(node.style)) !== null && _parse !== void 0 ? _parse : {} : {};
-  // TODO: Ugly! We should do this before serializing instead
-  if (styleProps["font-family"]) {
-    styleProps["fontFamily"] = styleProps["font-family"];
-    delete styleProps["font-family"];
-  }
-  if (styleProps["font-size"]) {
-    styleProps["fontSize"] = styleProps["font-size"];
-    delete styleProps["font-size"];
-  }
-  var bitmask = (_node$format = node.format) === null || _node$format === void 0 ? void 0 : _node$format.toString(2);
-  var bitmaskOffset = bitmask ? bitmask.length - 1 : 0;
-  function isBitOne(bit) {
-    if (!bitmask) {
-      return false;
+  function withRenderTag(clazz, current) {
+    var renderClass = theme.tags[clazz];
+    if (renderClass && current) {
+      return [current, renderClass].join(" ");
     }
-    return bitmask.length >= bitmaskOffset - bit && bitmask[bitmaskOffset - bit] === "1";
-  }
-  if (isBitOne(0)) {
-    styleProps["fontWeight"] = "bold";
-  }
-  if (isBitOne(1)) {
-    styleProps["fontStyle"] = "italic";
+    if (renderClass) {
+      return renderClass;
+    }
+    return current;
   }
-  if (isBitOne(2)) {
-    if (!styleProps["textDecoration"]) {
-      styleProps["textDecoration"] = "line-through";
-    } else {
-      styleProps["textDecoration"] += " line-through";
+  function withRenderClass(clazz, current) {
+    var renderClass = theme.classes[clazz];
+    if (renderClass && current) {
+      return [current, renderClass].join(" ");
+    }
+    if (renderClass) {
+      return renderClass;
     }
+    return current;
   }
-  if (isBitOne(3)) {
-    if (!styleProps["textDecoration"]) {
-      styleProps["textDecoration"] = "underline";
-    } else {
-      styleProps["textDecoration"] += " underline";
+  function toReact(node, key) {
+    var _anyNode$class, _anyNode$children;
+    if (typeof node === "string") {
+      return node;
+    }
+    if (node.tag === "p") {
+      return /*#__PURE__*/jsx("p", {
+        className: withRenderTag("p"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "img") {
+      return /*#__PURE__*/jsx("div", {
+        className: withRenderClass("imgContainer"),
+        children: /*#__PURE__*/jsx("img", {
+          className: withRenderTag("img"),
+          src: node.src
+        })
+      }, key);
+    }
+    // if (node.tag === "blockquote") {
+    //   return <blockquote key={key}>{node.children.map(toReact)}</blockquote>;
+    // }
+    if (node.tag === "ul") {
+      return /*#__PURE__*/jsx("ul", {
+        className: withRenderTag("ul"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "ol") {
+      return /*#__PURE__*/jsx("ol", {
+        className: withRenderTag("ol"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "li") {
+      return /*#__PURE__*/jsx("li", {
+        className: withRenderTag("li"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "span") {
+      return /*#__PURE__*/jsx("span", {
+        className: node.classes.map(function (nodeClass) {
+          switch (nodeClass) {
+            case "bold":
+              return withRenderClass("bold");
+            case "line-through":
+              return withRenderClass("lineThrough");
+            case "italic":
+              return withRenderClass("italic");
+          }
+        }).join(" "),
+        children: node.children.map(toReact)
+      }, key);
     }
+    if (node.tag === "h1") {
+      return /*#__PURE__*/jsx("h1", {
+        className: withRenderTag("h1"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h2") {
+      return /*#__PURE__*/jsx("h2", {
+        className: withRenderTag("h2"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h3") {
+      return /*#__PURE__*/jsx("h3", {
+        className: withRenderTag("h3"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h4") {
+      return /*#__PURE__*/jsx("h4", {
+        className: withRenderTag("h4"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h5") {
+      return /*#__PURE__*/jsx("h5", {
+        className: withRenderTag("h5"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h6") {
+      return /*#__PURE__*/jsx("h6", {
+        className: withRenderTag("h6"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    console.error("Unknown tag", node.tag);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var anyNode = node;
+    if (!(anyNode !== null && anyNode !== void 0 && anyNode.tag)) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(anyNode.tag, {
+      key: key,
+      className: (_anyNode$class = anyNode["class"]) === null || _anyNode$class === void 0 ? void 0 : _anyNode$class.join(" "),
+      children: (_anyNode$children = anyNode.children) === null || _anyNode$children === void 0 ? void 0 : _anyNode$children.map(toReact)
+    });
   }
-  return /*#__PURE__*/jsx("span", {
-    style: styleProps,
-    children: node.text
-  });
-}
-function HeadingNodeComponent(_ref3) {
-  var node = _ref3.node,
-    path = _ref3.path;
-  return /*#__PURE__*/createElement(node.tag, {}, node.children.map(function (child, i) {
-    var childPath = "".concat(path, ".").concat(i);
-    return /*#__PURE__*/jsx(TextNodeComponent, {
-      node: child
-    }, childPath);
-  }));
-}
-function ParagraphNodeComponent(_ref4) {
-  var node = _ref4.node,
-    path = _ref4.path;
-  return /*#__PURE__*/jsx("p", {
-    children: node.children.map(function (child, i) {
-      var childPath = "".concat(path, ".").concat(i);
-      switch (child.type) {
-        case "text":
-          return /*#__PURE__*/jsx(TextNodeComponent, {
-            node: child
-          }, childPath);
-        default:
-          throw Error("Unknown paragraph node type: " + (child === null || child === void 0 ? void 0 : child.type));
-      }
-    })
-  });
-}
-function ListNodeComponent(_ref5) {
-  var node = _ref5.node,
-    path = _ref5.path;
-  return /*#__PURE__*/createElement(node.tag, {}, node.children.map(function (child, i) {
-    var childPath = "".concat(path, ".").concat(i);
-    return /*#__PURE__*/jsx(ListItemComponent, {
-      path: childPath,
-      node: child
-    }, childPath);
-  }));
-}
-function ListItemComponent(_ref6) {
-  var node = _ref6.node,
-    path = _ref6.path;
-  return /*#__PURE__*/jsx("li", {
-    children: node.children.map(function (child, i) {
-      var childPath = "".concat(path, ".").concat(i);
-      switch (child.type) {
-        case "text":
-          return /*#__PURE__*/jsx(TextNodeComponent, {
-            node: child
-          }, childPath);
-        default:
-          throw Error("Unknown list item node type: " + (child === null || child === void 0 ? void 0 : child.type));
-      }
-    })
+  return /*#__PURE__*/jsx("div", {
+    "data-val-path": root.valPath,
+    children: root.children.map(toReact)
   });
 }