@uniformdev/canvas-next-rsc 19.173.0 → 19.173.2-alpha.210

package/dist/component.js

@@ -48,12 +48,13 @@ var DefaultNotImplementedComponent = ({ component }) => {
 };
 
 // src/components/UniformRichText.tsx
-var import_richtext5 = require("@uniformdev/richtext");
-var import_react11 = __toESM(require("react"));
+var import_canvas = require("@uniformdev/canvas");
+var import_richtext6 = require("@uniformdev/richtext");
+var import_react12 = __toESM(require("react"));
 
 // src/components/UniformRichTextNode.tsx
-var import_richtext4 = require("@uniformdev/richtext");
-var import_react10 = __toESM(require("react"));
+var import_richtext5 = require("@uniformdev/richtext");
+var import_react11 = __toESM(require("react"));
 
 // src/components/nodes/HeadingRichTextNode.tsx
 var import_react2 = __toESM(require("react"));
@@ -107,25 +108,34 @@ var ParagraphRichTextNode = ({ children, node }) => {
   );
 };
 
-// src/components/nodes/TabRichTextNode.tsx
+// src/components/nodes/TableCellRichTextNode.tsx
+var import_richtext3 = require("@uniformdev/richtext");
 var import_react8 = __toESM(require("react"));
+var TableCellRichTextNode = ({ children, node }) => {
+  const { headerState } = node;
+  const TableCellTag = (0, import_richtext3.getRichTextTagFromTableCellHeaderState)(headerState);
+  return /* @__PURE__ */ import_react8.default.createElement(TableCellTag, null, children);
+};
+
+// src/components/nodes/TabRichTextNode.tsx
+var import_react9 = __toESM(require("react"));
 var TabRichTextNode = () => {
-  return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, "	");
+  return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, "	");
 };
 
 // src/components/nodes/TextRichTextNode.tsx
-var import_richtext3 = require("@uniformdev/richtext");
-var import_react9 = __toESM(require("react"));
+var import_richtext4 = require("@uniformdev/richtext");
+var import_react10 = __toESM(require("react"));
 var TextRichTextNode = ({ node }) => {
   const { text, format } = node;
-  const tags = (0, import_richtext3.getRichTextTagsFromTextFormat)(format);
-  return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ import_react9.default.createElement(Tag, null, children), text) : text);
+  const tags = (0, import_richtext4.getRichTextTagsFromTextFormat)(format);
+  return /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ import_react10.default.createElement(Tag, null, children), text) : text);
 };
 
 // src/components/UniformRichTextNode.tsx
 function UniformRichTextNode({ node, ...props }) {
   var _a;
-  if (!(0, import_richtext4.isRichTextNode)(node)) return null;
+  if (!(0, import_richtext5.isRichTextNode)(node)) return null;
   let NodeRenderer = (_a = props.resolveRichTextRenderer) == null ? void 0 : _a.call(props, node);
   if (typeof NodeRenderer === "undefined") {
     NodeRenderer = resolveRichTextDefaultRenderer(node);
@@ -133,8 +143,8 @@ function UniformRichTextNode({ node, ...props }) {
   if (!NodeRenderer) {
     return null;
   }
-  const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ import_react10.default.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
-  return /* @__PURE__ */ import_react10.default.createElement(NodeRenderer, { node }, children);
+  const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ import_react11.default.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
+  return /* @__PURE__ */ import_react11.default.createElement(NodeRenderer, { node }, children);
 }
 var rendererMap = /* @__PURE__ */ new Map([
   ["heading", HeadingRichTextNode],
@@ -143,26 +153,58 @@ var rendererMap = /* @__PURE__ */ new Map([
   ["list", ListRichTextNode],
   ["listitem", ListItemRichTextNode],
   ["paragraph", ParagraphRichTextNode],
-  ["quote", ({ children }) => /* @__PURE__ */ import_react10.default.createElement("blockquote", null, children)],
+  ["quote", ({ children }) => /* @__PURE__ */ import_react11.default.createElement("blockquote", null, children)],
   [
     "code",
-    ({ children }) => /* @__PURE__ */ import_react10.default.createElement("pre", null, /* @__PURE__ */ import_react10.default.createElement("code", null, children))
+    ({ children }) => /* @__PURE__ */ import_react11.default.createElement("pre", null, /* @__PURE__ */ import_react11.default.createElement("code", null, children))
   ],
-  ["root", ({ children }) => /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, children)],
+  ["root", ({ children }) => /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, children)],
   ["text", TextRichTextNode],
-  ["tab", TabRichTextNode]
+  ["tab", TabRichTextNode],
+  [
+    "table",
+    ({ children }) => /* @__PURE__ */ import_react11.default.createElement("table", null, /* @__PURE__ */ import_react11.default.createElement("tbody", null, children))
+  ],
+  ["tablerow", ({ children }) => /* @__PURE__ */ import_react11.default.createElement("tr", null, children)],
+  ["tablecell", TableCellRichTextNode]
 ]);
 var resolveRichTextDefaultRenderer = (node) => {
   return rendererMap.get(node.type);
 };
 
 // src/components/UniformRichText.tsx
-var UniformRichText = import_react11.default.forwardRef(function UniformRichText2({ parameterId, component, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
-  var _a;
-  const parameter = (_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[parameterId];
-  const value = parameter == null ? void 0 : parameter.value;
-  if (!value || !(0, import_richtext5.isRichTextValue)(value) || (0, import_richtext5.isRichTextValueConsideredEmpty)(value)) return null;
-  return Tag === null ? /* @__PURE__ */ import_react11.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ import_react11.default.createElement(Tag, { ref, ...props }, /* @__PURE__ */ import_react11.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }));
+var UniformRichText = import_react12.default.forwardRef(function UniformRichText2({
+  parameterId,
+  component,
+  resolveRichTextRenderer,
+  as: Tag = "div",
+  context,
+  placeholder,
+  ...props
+}, ref) {
+  var _a, _b;
+  const isContextualEditing = (_a = context == null ? void 0 : context.isContextualEditing) != null ? _a : false;
+  const parameter = (_b = component == null ? void 0 : component.parameters) == null ? void 0 : _b[parameterId];
+  if (!parameter) {
+    return null;
+  }
+  const computedPlaceholder = typeof placeholder === "function" ? placeholder({ id: parameterId }) : placeholder;
+  const value = parameter.value;
+  if (!value || !(0, import_richtext6.isRichTextValue)(value)) return null;
+  if (!isContextualEditing && (0, import_richtext6.isRichTextValueConsideredEmpty)(value)) return null;
+  return Tag === null ? /* @__PURE__ */ import_react12.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ import_react12.default.createElement(
+    Tag,
+    {
+      ref,
+      ...props,
+      ...isContextualEditing ? {
+        [import_canvas.ATTRIBUTE_COMPONENT_ID]: component._id,
+        [import_canvas.ATTRIBUTE_PARAMETER_ID]: parameterId,
+        [import_canvas.ATTRIBUTE_PARAMETER_TYPE]: "richText"
+      } : {}
+    },
+    (0, import_richtext6.isRichTextValueConsideredEmpty)(value) ? /* @__PURE__ */ import_react12.default.createElement("p", null, /* @__PURE__ */ import_react12.default.createElement("i", null, computedPlaceholder)) : /* @__PURE__ */ import_react12.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
+  );
 });
 
 // src/components/UniformSlot.tsx
@@ -193,9 +235,9 @@ var UniformSlot = ({ data, slot, children }) => {
 
 // src/components/UniformText.tsx
 var import_core = require("@uniformdev/canvas-react/core");
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var UniformText = ({ context, ...rest }) => {
-  return /* @__PURE__ */ import_react12.default.createElement(
+  return /* @__PURE__ */ import_react13.default.createElement(
     import_core.PureUniformText,
     {
       ...rest,

package/dist/component.mjs

@@ -6,14 +6,16 @@ var DefaultNotImplementedComponent = ({ component }) => {
 
 // src/components/UniformRichText.tsx
 import {
-  isRichTextValue,
-  isRichTextValueConsideredEmpty
-} from "@uniformdev/richtext";
-import React11 from "react";
+  ATTRIBUTE_COMPONENT_ID,
+  ATTRIBUTE_PARAMETER_ID,
+  ATTRIBUTE_PARAMETER_TYPE
+} from "@uniformdev/canvas";
+import { isRichTextValue, isRichTextValueConsideredEmpty } from "@uniformdev/richtext";
+import React12 from "react";
 
 // src/components/UniformRichTextNode.tsx
 import { isRichTextNode } from "@uniformdev/richtext";
-import React10 from "react";
+import React11 from "react";
 
 // src/components/nodes/HeadingRichTextNode.tsx
 import React2 from "react";
@@ -67,19 +69,28 @@ var ParagraphRichTextNode = ({ children, node }) => {
   );
 };
 
-// src/components/nodes/TabRichTextNode.tsx
+// src/components/nodes/TableCellRichTextNode.tsx
+import { getRichTextTagFromTableCellHeaderState } from "@uniformdev/richtext";
 import React8 from "react";
+var TableCellRichTextNode = ({ children, node }) => {
+  const { headerState } = node;
+  const TableCellTag = getRichTextTagFromTableCellHeaderState(headerState);
+  return /* @__PURE__ */ React8.createElement(TableCellTag, null, children);
+};
+
+// src/components/nodes/TabRichTextNode.tsx
+import React9 from "react";
 var TabRichTextNode = () => {
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, "	");
+  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, "	");
 };
 
 // src/components/nodes/TextRichTextNode.tsx
 import { getRichTextTagsFromTextFormat } from "@uniformdev/richtext";
-import React9 from "react";
+import React10 from "react";
 var TextRichTextNode = ({ node }) => {
   const { text, format } = node;
   const tags = getRichTextTagsFromTextFormat(format);
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ React9.createElement(Tag, null, children), text) : text);
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ React10.createElement(Tag, null, children), text) : text);
 };
 
 // src/components/UniformRichTextNode.tsx
@@ -93,8 +104,8 @@ function UniformRichTextNode({ node, ...props }) {
   if (!NodeRenderer) {
     return null;
   }
-  const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ React10.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
-  return /* @__PURE__ */ React10.createElement(NodeRenderer, { node }, children);
+  const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ React11.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
+  return /* @__PURE__ */ React11.createElement(NodeRenderer, { node }, children);
 }
 var rendererMap = /* @__PURE__ */ new Map([
   ["heading", HeadingRichTextNode],
@@ -103,26 +114,58 @@ var rendererMap = /* @__PURE__ */ new Map([
   ["list", ListRichTextNode],
   ["listitem", ListItemRichTextNode],
   ["paragraph", ParagraphRichTextNode],
-  ["quote", ({ children }) => /* @__PURE__ */ React10.createElement("blockquote", null, children)],
+  ["quote", ({ children }) => /* @__PURE__ */ React11.createElement("blockquote", null, children)],
   [
     "code",
-    ({ children }) => /* @__PURE__ */ React10.createElement("pre", null, /* @__PURE__ */ React10.createElement("code", null, children))
+    ({ children }) => /* @__PURE__ */ React11.createElement("pre", null, /* @__PURE__ */ React11.createElement("code", null, children))
   ],
-  ["root", ({ children }) => /* @__PURE__ */ React10.createElement(React10.Fragment, null, children)],
+  ["root", ({ children }) => /* @__PURE__ */ React11.createElement(React11.Fragment, null, children)],
   ["text", TextRichTextNode],
-  ["tab", TabRichTextNode]
+  ["tab", TabRichTextNode],
+  [
+    "table",
+    ({ children }) => /* @__PURE__ */ React11.createElement("table", null, /* @__PURE__ */ React11.createElement("tbody", null, children))
+  ],
+  ["tablerow", ({ children }) => /* @__PURE__ */ React11.createElement("tr", null, children)],
+  ["tablecell", TableCellRichTextNode]
 ]);
 var resolveRichTextDefaultRenderer = (node) => {
   return rendererMap.get(node.type);
 };
 
 // src/components/UniformRichText.tsx
-var UniformRichText = React11.forwardRef(function UniformRichText2({ parameterId, component, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
-  var _a;
-  const parameter = (_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[parameterId];
-  const value = parameter == null ? void 0 : parameter.value;
-  if (!value || !isRichTextValue(value) || isRichTextValueConsideredEmpty(value)) return null;
-  return Tag === null ? /* @__PURE__ */ React11.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React11.createElement(Tag, { ref, ...props }, /* @__PURE__ */ React11.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }));
+var UniformRichText = React12.forwardRef(function UniformRichText2({
+  parameterId,
+  component,
+  resolveRichTextRenderer,
+  as: Tag = "div",
+  context,
+  placeholder,
+  ...props
+}, ref) {
+  var _a, _b;
+  const isContextualEditing = (_a = context == null ? void 0 : context.isContextualEditing) != null ? _a : false;
+  const parameter = (_b = component == null ? void 0 : component.parameters) == null ? void 0 : _b[parameterId];
+  if (!parameter) {
+    return null;
+  }
+  const computedPlaceholder = typeof placeholder === "function" ? placeholder({ id: parameterId }) : placeholder;
+  const value = parameter.value;
+  if (!value || !isRichTextValue(value)) return null;
+  if (!isContextualEditing && isRichTextValueConsideredEmpty(value)) return null;
+  return Tag === null ? /* @__PURE__ */ React12.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React12.createElement(
+    Tag,
+    {
+      ref,
+      ...props,
+      ...isContextualEditing ? {
+        [ATTRIBUTE_COMPONENT_ID]: component._id,
+        [ATTRIBUTE_PARAMETER_ID]: parameterId,
+        [ATTRIBUTE_PARAMETER_TYPE]: "richText"
+      } : {}
+    },
+    isRichTextValueConsideredEmpty(value) ? /* @__PURE__ */ React12.createElement("p", null, /* @__PURE__ */ React12.createElement("i", null, computedPlaceholder)) : /* @__PURE__ */ React12.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
+  );
 });
 
 // src/components/UniformSlot.tsx
@@ -153,9 +196,9 @@ var UniformSlot = ({ data, slot, children }) => {
 
 // src/components/UniformText.tsx
 import { PureUniformText } from "@uniformdev/canvas-react/core";
-import React12 from "react";
+import React13 from "react";
 var UniformText = ({ context, ...rest }) => {
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(
     PureUniformText,
     {
       ...rest,

package/dist/components/DefaultNotImplementedComponent.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps } from './UniformComponent';
+export declare function DefaultNotImplementedComponent(
+  props: ComponentProps
+): import('react/jsx-runtime').JSX.Element | null;

package/dist/components/DefaultNotImplementedComponent.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CANVAS_LOCALIZATION_TYPE } from '@uniformdev/canvas';
+const wrapperStyles = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0.5rem',
+    borderLeft: '4px solid #e42535',
+    padding: '16px',
+    fontSize: '16px',
+    borderRadius: '0 8px 8px 0',
+    margin: '8px',
+    backgroundColor: 'rgba(255, 255, 255, 0.45)',
+    color: '#1d3557',
+};
+export function DefaultNotImplementedComponent(props) {
+    var _a, _b, _c;
+    const componentType = (_a = props.component) === null || _a === void 0 ? void 0 : _a.type;
+    if (!componentType) {
+        return null;
+    }
+    if (componentType === CANVAS_LOCALIZATION_TYPE) {
+        return (_jsx("div", { style: wrapperStyles, children: _jsxs("p", { children: ["Seems like localization is not enabled in your application. Please read our documentation on how to", ' ', _jsx("a", { href: "https://docs.uniform.app/guides/composition/localization#activate-front-end", target: "_blank", style: { fontWeight: 'bolder', textDecoration: 'underline' }, rel: "noreferrer", children: "enable localization in your front-end application." })] }) }));
+    }
+    const proposedFileName = `${componentType[0].toUpperCase()}${componentType.substring(1)}`;
+    const probableProps = Object.keys((_b = props.component.parameters) !== null && _b !== void 0 ? _b : {});
+    const probableSlots = Object.keys((_c = props.component.slots) !== null && _c !== void 0 ? _c : {});
+    return (_jsxs("div", { style: wrapperStyles, children: [_jsx("h2", { style: { fontSize: '1.2rem' }, children: "Unknown Component" }), _jsxs("p", { children: ["Received request from Uniform to render a component with the public ID: ", _jsx("code", { children: componentType }), "."] }), _jsxs("p", { children: [_jsx("code", { children: "<UniformComposition />" }), " does not have ", _jsx("code", { children: componentType }), " mapped to a React component yet."] }), _jsx("p", { children: "To teach your app how to render this component:" }), ' ', _jsxs("ul", { style: {
+                    listStyleType: 'disc',
+                    marginLeft: '1rem',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '0.5rem',
+                }, children: [_jsxs("li", { children: ["Create a React component and register it with Uniform, for example", _jsx("pre", { children: `function ${proposedFileName}(${probableProps.length > 0 ? `{ ${probableProps.join(', ')} }` : ''}) {
+  return (
+    <div>
+      ${proposedFileName}!
+      ${probableSlots.length > 0
+                                    ? probableSlots.map((slot) => `<UniformSlot name="${slot}" />`).join('\n      ')
+                                    : ''}
+    </div>
+  )
+}
+
+registerUniformComponent({ type: "${componentType}", component: ${proposedFileName} })` }), _jsxs("details", { children: [_jsx("summary", { style: { cursor: 'pointer' }, children: "Props that your React component will receive" }), _jsx("pre", { children: JSON.stringify(props, null, 2) })] })] }), _jsxs("li", { children: ["Import the component into the file where ", _jsx("code", { children: "<UniformComposition />" }), " is defined, for example ", _jsx("pre", { children: `import "../components/${proposedFileName}.tsx"` })] })] }), ' ', _jsxs("p", { children: ["Need more help?", ' ', _jsx("a", { href: "https://docs.uniform.app/docs/guides/composition/rendering", target: "_blank", rel: "noreferrer", style: { textDecoration: 'underline' }, children: "Check out the documentation." })] })] }));
+}

package/dist/components/GoogleTagManagerAnalytics.d.ts

@@ -0,0 +1,3 @@
+export declare const GoogleTagManagerAnalytics: (props?: {
+  measurementId?: string;
+}) => import('react/jsx-runtime').JSX.Element;

package/dist/components/GoogleTagManagerAnalytics.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Script from 'next/script';
+import { useEffect } from 'react';
+import { useUniformContext } from '../hooks/useUniformContext';
+const isGtagConfigured = () => {
+    return typeof window !== 'undefined' && typeof window.gtag === 'function';
+};
+export const GoogleTagManagerAnalytics = (props) => {
+    const { seenComponents } = useUniformContext();
+    useEffect(() => {
+        if (!(seenComponents === null || seenComponents === void 0 ? void 0 : seenComponents.length)) {
+            return;
+        }
+        if (!isGtagConfigured()) {
+            // eslint-disable-next-line no-console
+            console.warn('Google Tag Manager is not configured. Please add the gtag script to your site.');
+            return;
+        }
+        seenComponents.forEach((component) => {
+            var _a, _b, _c, _d, _e;
+            if (component.type === 'personalization') {
+                (_b = (_a = window).gtag) === null || _b === void 0 ? void 0 : _b.call(_a, 'event', component.id, {
+                    event_category: 'Uniform Personalization',
+                    event_label: component.variants.join(', '),
+                    is_control_group: component.control ? 1 : 0,
+                });
+            }
+            else if (component.type === 'test') {
+                (_d = (_c = window).gtag) === null || _d === void 0 ? void 0 : _d.call(_c, 'event', component.id, {
+                    event_category: 'Uniform AB Testing',
+                    event_label: (_e = component.variant) !== null && _e !== void 0 ? _e : 'No Variant',
+                });
+            }
+        });
+    }, [seenComponents]);
+    return (_jsx(_Fragment, { children: Boolean(props === null || props === void 0 ? void 0 : props.measurementId) && (_jsxs(_Fragment, { children: [_jsx(Script, { src: `https://www.googletagmanager.com/gtag/js?id=${props.measurementId}`, strategy: "afterInteractive" }), _jsx(Script, { id: "google-analytics", strategy: "afterInteractive", children: `
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){window.dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', '${props.measurementId}');
+    ` })] })) }));
+};

package/dist/components/UniformComponent.d.ts

@@ -0,0 +1,35 @@
+import {
+  type ComponentInstance,
+  type RootComponentInstance,
+  RouteGetResponseComposition,
+} from '@uniformdev/canvas';
+import { ReactNode } from 'react';
+export type CompositionContext = Omit<RouteGetResponseComposition, 'compositionApiResponse'> & {
+  composition: RootComponentInstance;
+  path: string;
+  state?: number;
+  searchParams:
+    | {
+        [key: string]: string | undefined;
+      }
+    | undefined;
+  cookieValue: string | undefined;
+  isDraftMode: boolean;
+  isContextualEditing: boolean;
+};
+export type ComponentProps<TProps = unknown> = TProps & {
+  component: ComponentInstance;
+  context: CompositionContext;
+};
+export type UniformComponentProps<TRenderProps = unknown> = {
+  data: ComponentInstance;
+  context: CompositionContext;
+  children?: ReactNode | ((props: ComponentProps<TRenderProps>) => JSX.Element);
+};
+export declare function UniformComponent({
+  data,
+  children,
+  context,
+}: UniformComponentProps): import('react').FunctionComponentElement<{
+  children?: ReactNode;
+}>;

package/dist/components/UniformComponent.js

@@ -0,0 +1,14 @@
+import { createElement, Fragment } from 'react';
+import { componentStoreResolver } from '../register/componentStoreResolver';
+import { resolveChildren } from '../resolve/resolveChildren';
+export function UniformComponent({ data, children, context }) {
+    const resolvedChildren = resolveChildren({
+        children,
+        data,
+        context,
+        hasParentLayout: false,
+        resolveRenderer: componentStoreResolver,
+    });
+    const childrenToRender = [resolvedChildren];
+    return createElement(Fragment, {}, childrenToRender);
+}

package/dist/components/UniformComposition.d.ts

@@ -0,0 +1,47 @@
+import { ContextState } from '@uniformdev/context';
+import { ReactNode } from 'react';
+export type SuspenseOptions =
+  | {
+      mode: 'off';
+    }
+  | {
+      mode: 'fallback';
+      fallback: React.ReactNode;
+    };
+export type UniformCompositionProps = {
+  /**
+   * The params object from Next.js router. Used to resolve a composition.
+   */
+  params: {
+    slug: string | string[];
+  };
+  /**
+   * The searchParams object from Next.js router. Used for signal evaluation.
+   */
+  searchParams?: {
+    [key: string]: string | undefined;
+  };
+  /**
+   * Behavior of root Suspense component.
+   */
+  suspense?:
+    | {
+        mode: 'off';
+      }
+    | {
+        mode: 'fallback';
+        fallback: ReactNode;
+      };
+  /**
+   * Update state that should be added to the call to update before composition evaluation
+   */
+  update?: Partial<ContextState>;
+  /**
+   * The children of the UniformComposition component.
+   */
+  children?: ReactNode;
+};
+export declare const UniformComposition: ({
+  suspense,
+  ...props
+}: UniformCompositionProps) => import('react/jsx-runtime').JSX.Element;

package/dist/components/UniformComposition.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense } from 'react';
+import { isDraftModeEnabled, isIncontextEditingEnabled } from '../utils/draft';
+import { resolveComposition } from './retrieveRoute';
+import { UniformComponent } from './UniformComponent';
+import { UniformProvider } from './UniformContext';
+import { UniformScript } from './UniformScript';
+export const UniformComposition = ({ suspense = {
+    mode: 'off',
+}, ...props }) => (_jsx(ConditionalWrapper, { options: suspense, children: _jsx(UniformCompositionInner, { ...props }) }));
+const ConditionalWrapper = ({ children, options }) => {
+    if (options.mode === 'off') {
+        return _jsx(_Fragment, { children: children });
+    }
+    return _jsx(Suspense, { fallback: options.fallback, children: children });
+};
+const UniformCompositionInner = async ({ params, searchParams, update, children, }) => {
+    const { composition: evaluatedComposition, cookieValue, path, searchParams: evaluatedSearchParams, seenComponents, isCanvasEditing, ...rest } = await resolveComposition({
+        params,
+        searchParams,
+        update,
+    });
+    const context = {
+        composition: evaluatedComposition,
+        path,
+        searchParams,
+        cookieValue,
+        isDraftMode: isDraftModeEnabled({ searchParams }),
+        isContextualEditing: isIncontextEditingEnabled({
+            searchParams,
+        }),
+        ...rest,
+    };
+    return (_jsxs(UniformProvider, { cookieValue: cookieValue, seenComponents: seenComponents, children: [_jsx(UniformScript, { enabled: isCanvasEditing }), _jsx(UniformComponent, { data: evaluatedComposition, context: context }), Boolean(children) && children] }));
+};

package/dist/components/UniformContext.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+
+import { SeenUniformComponent } from '../models';
+export type UniformContextProps = {
+  cookieValue: string | undefined;
+  seenComponents: SeenUniformComponent[] | undefined;
+};
+export declare const UniformContext: import('react').Context<UniformContextProps>;
+export declare const UniformProvider: ({
+  children,
+  cookieValue,
+  seenComponents,
+}: PropsWithChildren<UniformContextProps>) => import('react/jsx-runtime').JSX.Element;

package/dist/components/UniformContext.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useEffect } from 'react';
+import { removeUniformCookie, setUniformCookie } from '../cookie';
+export const UniformContext = createContext({
+    cookieValue: undefined,
+    seenComponents: undefined,
+});
+export const UniformProvider = ({ children, cookieValue, seenComponents, }) => {
+    useEffect(() => {
+        if (cookieValue) {
+            setUniformCookie(cookieValue);
+        }
+        else {
+            removeUniformCookie();
+        }
+    }, [cookieValue]);
+    return (_jsx(UniformContext.Provider, { value: { cookieValue, seenComponents }, children: children }));
+};

package/dist/components/UniformRichText.d.ts

@@ -0,0 +1,42 @@
+import { ComponentInstance } from '@uniformdev/canvas';
+import React from 'react';
+
+import { RenderRichTextComponentResolver } from './types';
+export type UniformRichTextProps = {
+  /**
+   * The name of the  HTML tag to render.
+   * @default "div"
+   */
+  as?: React.ElementType;
+  /** The ID of the parameter. */
+  parameterId: string;
+  /**
+   * A function which can provide a custom react component
+   * for rendering a rich text node
+   */
+  resolveRichTextRenderer?: RenderRichTextComponentResolver;
+  /** The component instance. */
+  component: ComponentInstance;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
+/**
+ * Adds rendering support for Uniform Rich Text parameters
+ */
+export declare const UniformRichText: React.ForwardRefExoticComponent<
+  {
+    /**
+     * The name of the  HTML tag to render.
+     * @default "div"
+     */
+    as?: React.ElementType<any> | undefined;
+    /** The ID of the parameter. */
+    parameterId: string;
+    /**
+     * A function which can provide a custom react component
+     * for rendering a rich text node
+     */
+    resolveRichTextRenderer?: RenderRichTextComponentResolver | undefined;
+    /** The component instance. */
+    component: ComponentInstance;
+  } & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> &
+    React.RefAttributes<unknown>
+>;

package/dist/components/UniformRichText.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isRichTextValue, isRichTextValueConsideredEmpty, } from '@uniformdev/richtext';
+import React from 'react';
+import { UniformRichTextNode } from './UniformRichTextNode';
+/**
+ * Adds rendering support for Uniform Rich Text parameters
+ */
+export const UniformRichText = React.forwardRef(function UniformRichText({ parameterId, component, resolveRichTextRenderer, as: Tag = 'div', ...props }, ref) {
+    var _a;
+    const parameter = (_a = component === null || component === void 0 ? void 0 : component.parameters) === null || _a === void 0 ? void 0 : _a[parameterId];
+    const value = parameter === null || parameter === void 0 ? void 0 : parameter.value;
+    if (!value || !isRichTextValue(value) || isRichTextValueConsideredEmpty(value))
+        return null;
+    return Tag === null ? (_jsx(UniformRichTextNode, { node: value.root, resolveRichTextRenderer: resolveRichTextRenderer })) : (_jsx(Tag, { ref: ref, ...props, children: _jsx(UniformRichTextNode, { node: value.root, resolveRichTextRenderer: resolveRichTextRenderer }) }));
+});

package/dist/components/UniformRichTextNode.d.ts

@@ -0,0 +1,14 @@
+import { RichTextNode } from '@uniformdev/richtext';
+
+import { RenderRichTextComponentResolver } from './types';
+export type UniformRichTextNodeProps = {
+  node: RichTextNode;
+  resolveRichTextRenderer?: RenderRichTextComponentResolver;
+};
+/**
+ * Render a single RichText node
+ */
+export declare function UniformRichTextNode({
+  node,
+  ...props
+}: UniformRichTextNodeProps): import('react/jsx-runtime').JSX.Element | null;