@unlayer/react-elements 0.1.8 → 0.1.10

package/README.md

@@ -51,14 +51,17 @@ function WelcomeEmail() {
 
 These props have non-obvious shapes that **must** be followed exactly:
 
-- **fontFamily**: Must be `{ label: string, value: string }`, NOT a plain string.
+- **fontFamily**: Accepts a plain family-name string (`fontFamily="Georgia"`) or, for a full stack, `{ label, value }` (recommended).
   ```tsx
   fontFamily={{ label: "Arial", value: "arial, sans-serif" }}
   ```
-- **fontWeight**: Must be a number (`400`, `700`), NOT a string (`"400"`).
+- **fontWeight**: Accepts a number (`700`), a numeric string (`"700"`), or a CSS keyword (`"bold"`).
+- **fontSize / padding**: Accept a CSS string (`"28px"`, `"20px 40px"`) or a bare number (treated as px: `fontSize={28}` → `28px`).
+- **lineHeight**: Accepts a CSS string (`"1.4"`, `"140%"`) or a bare number (kept **unitless**: `lineHeight={1.4}` → `"1.4"`).
 - **Wrapper component**: Use `<Email>`, `<Page>`, or `<Document>` as root — they set the rendering mode automatically.
 - **href**: Can be a plain string URL (auto-wrapped) or `{ name: "web", values: { href, target } }`.
-- **Image src**: Can be a plain string URL (auto-wrapped) or `{ url, width?, autoWidth?, maxWidth? }`.
+- **Image sizing**: `src` is a plain URL string or `{ url, width?, height?, ... }`, where `width`/`height` are the image's **natural** size. By default an image is **responsive** — it fills its container, capped at its natural size. For a **fixed** display size, use a **percent**: `width="50%"` or `maxWidth="50%"`. A px/number `width` is treated as the natural size, so `width="300px"` shows the image at up to 300px (responsive).
+- **Heading level**: `headingType` (or its alias `level`) accepts `h1`–`h6`.
 - **children**: Text components accept children as shorthand. `<Heading>Hello</Heading>` sets the heading text. `<Paragraph>` supports children for plain text.
 - **Paragraph text**: Use `html` prop for text content (supports inline formatting like `<b>`, `<a>`). Use children for plain text.
 
@@ -154,6 +157,7 @@ Must be child of Row. Count must match layout.
 - `fontFamily?: { label: string, value: string }`
 - `padding?: string` — `"10px 20px"`
 - `borderRadius?: string` — `"4px"`
+- `width?: number | string` — display width; `width="100%"` makes the button full-width, `width="200px"` pins it
 - `textAlign?: "left" | "center" | "right"` — `"center"`
 
 ### Paragraph
@@ -439,13 +443,12 @@ const monoFont = { label: "Monospace", value: "'SF Mono', 'Fira Code', 'Roboto M
 
 ## Common Mistakes
 
-1. **fontFamily as string** — `fontFamily="Arial"` → Must be `fontFamily={{ label: "Arial", value: "arial, sans-serif" }}`
-2. **fontWeight as string** — `fontWeight="700"` → Must be `fontWeight={700}`
-3. **Column count mismatch** — `TwoEqual` layout requires exactly 2 `<Column>` children
-4. **Missing Column** — Items must be inside `<Column>`, never directly in `<Row>`
-5. **Missing Row** — Columns must be inside `<Row>`, never directly in `<Email>`/`<Page>`/`<Document>`
-6. **Paragraph text prop** — Use `html` prop or children, not `text` (which is not typed for Paragraph)
-7. **padding without units** — Use `padding="0px"` not `padding="0"` — the type requires the `px` suffix for consistency
+1. **Column count mismatch** — `TwoEqual` layout requires exactly 2 `<Column>` children
+2. **Missing Column** — Items must be inside `<Column>`, never directly in `<Row>`
+3. **Missing Row** — Columns must be inside `<Row>`, never directly in `<Email>`/`<Page>`/`<Document>`
+4. **JSX formatting in children** — `<Heading>Hi <b>x</b></Heading>` is flattened to plain text (the formatting is **not** preserved). For inline formatting use `<Paragraph html="Hi <b>x</b>" />`.
+
+> Note: the CSS-idiom forms that used to be mistakes now work — a string `fontFamily`, a string/number `fontWeight`, a numeric `fontSize`, `padding="0"`, and `<Paragraph text="..." />` are all accepted and normalized. The object/numeric forms above are still recommended for clarity.
 
 ## Development
 

package/dist/index.cjs

@@ -208,16 +208,53 @@ function analyzeNestedStructure(defaultValues) {
   nestedStructureCache.set(defaultValues, nestedGroups);
   return nestedGroups;
 }
+var PX_SIZE_KEYS = [
+  "fontSize",
+  "padding",
+  "containerPadding",
+  "borderRadius",
+  "letterSpacing"
+];
+function normalizeCssProps(props) {
+  if (typeof props.fontFamily === "string") {
+    const v = props.fontFamily;
+    props.fontFamily = { label: v, value: v };
+  }
+  if (typeof props.fontWeight === "string" && /^\d+$/.test(props.fontWeight.trim())) {
+    props.fontWeight = Number(props.fontWeight.trim());
+  }
+  if (typeof props.lineHeight === "number") {
+    props.lineHeight = String(props.lineHeight);
+  }
+  for (const key of PX_SIZE_KEYS) {
+    const v = props[key];
+    if (typeof v === "number") {
+      props[key] = `${v}px`;
+    } else if (typeof v === "string" && /^\d+$/.test(v.trim())) {
+      props[key] = `${v.trim()}px`;
+    }
+  }
+}
+function flattenChildrenText(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(flattenChildrenText).join("");
+  if (typeof node === "object" && "props" in node) {
+    return flattenChildrenText(node.props?.children);
+  }
+  return "";
+}
 function mapSemanticProps(props, defaultValues, componentType) {
   const { children, values, ...restProps } = props;
   const userProps = { ...restProps };
   const result = values ? { ...values } : {};
   if (children !== void 0 && !result.text && !result.textJson) {
+    const textContent = typeof children === "string" ? children : flattenChildrenText(children);
     if (componentType === "Paragraph") {
-      const textContent = typeof children === "string" ? children : String(children);
       result.textJson = textToTextJson(textContent);
     } else {
-      result.text = children;
+      result.text = textContent;
     }
   }
   const textFromEscapeHatch = result.text;
@@ -243,6 +280,7 @@ function mapSemanticProps(props, defaultValues, componentType) {
       };
     }
   }
+  normalizeCssProps(userProps);
   const nestedGroups = analyzeNestedStructure(defaultValues);
   const nested = {};
   const flat = {};
@@ -277,6 +315,19 @@ function mapSemanticProps(props, defaultValues, componentType) {
       };
     }
   }
+  if (defaultValues && typeof defaultValues === "object" && "border" in defaultValues) {
+    const borderSideRe = /^border(Top|Right|Bottom|Left)(Width|Style|Color)$/;
+    const collected = {};
+    for (const key of Object.keys(final)) {
+      if (borderSideRe.test(key)) {
+        collected[key] = final[key];
+        delete final[key];
+      }
+    }
+    if (Object.keys(collected).length > 0) {
+      final.border = { ...final.border || {}, ...collected };
+    }
+  }
   return final;
 }
 function normalizeLinkValue(value) {
@@ -545,7 +596,26 @@ var DEFAULT_VALUES = {
 var Button = createItemComponent({
   name: "Button",
   defaultValues: DEFAULT_VALUES,
-  propMapper: (props) => mapSemanticProps(props, DEFAULT_VALUES, "Button"),
+  propMapper: (props) => {
+    const mapped = mapSemanticProps(
+      props,
+      DEFAULT_VALUES,
+      "Button"
+    );
+    const size = mapped.size;
+    if (size && typeof size === "object" && !Array.isArray(size)) {
+      const s = size;
+      if (typeof s.width === "number") {
+        s.width = `${s.width}px`;
+      } else if (typeof s.width === "string" && /^\d+(?:\.\d+)?$/.test(s.width.trim())) {
+        s.width = `${s.width.trim()}px`;
+      }
+      if (s.width !== void 0 && s.autoWidth === void 0) {
+        s.autoWidth = false;
+      }
+    }
+    return mapped;
+  },
   displayName: "Button",
   exporters: exporters.ButtonExporters
 });
@@ -610,18 +680,46 @@ var Image = createItemComponent({
   defaultValues: DEFAULT_VALUES5,
   propMapper: (props) => {
     const { alt, src, ...rest } = props;
+    const restValues = rest.values;
+    const normalizedRest = restValues && typeof restValues.src === "string" ? { ...rest, values: { ...restValues, src: { url: restValues.src } } } : rest;
     const base = mapSemanticProps(
-      rest,
+      normalizedRest,
       DEFAULT_VALUES5,
       "Image"
     );
     if (alt !== void 0) {
       base.altText = alt;
     }
-    if (typeof src === "string") {
-      base.src = { url: src, autoWidth: true, maxWidth: "100%" };
-    } else if (src !== void 0) {
-      base.src = { ...DEFAULT_VALUES5.src, ...src };
+    const baseSrc = base.src;
+    const fromValues = baseSrc && typeof baseSrc === "object" && !Array.isArray(baseSrc) ? baseSrc : typeof baseSrc === "string" ? { url: baseSrc } : {};
+    const fromProp = typeof src === "string" ? { url: src } : src ?? {};
+    const userSrc = { ...fromValues, ...fromProp };
+    if (src !== void 0 || baseSrc !== void 0) {
+      const isStringUrl = typeof src === "string" || src === void 0 && typeof baseSrc === "string";
+      const start = isStringUrl ? { autoWidth: true, maxWidth: "100%" } : { ...DEFAULT_VALUES5.src };
+      const merged = { ...start, ...userSrc };
+      const pctRe = /^\d+(?:\.\d+)?%$/;
+      if (typeof merged.width === "string") {
+        const t = merged.width.trim();
+        if (pctRe.test(t)) {
+          if (userSrc.maxWidth === void 0) merged.maxWidth = t;
+          delete merged.width;
+        } else {
+          const px = /^(\d+(?:\.\d+)?)(?:px)?$/.exec(t);
+          if (px) merged.width = parseFloat(px[1]);
+        }
+      }
+      const displayPct = typeof merged.maxWidth === "string" && pctRe.test(merged.maxWidth.trim()) ? merged.maxWidth.trim() : void 0;
+      if (userSrc.autoWidth === void 0) {
+        if (displayPct && displayPct !== "100%") {
+          merged.autoWidth = false;
+          merged.maxWidth = displayPct;
+        } else {
+          merged.autoWidth = true;
+          merged.maxWidth = "100%";
+        }
+      }
+      base.src = merged;
     }
     return base;
   },
@@ -732,25 +830,37 @@ var Table = createItemComponent({
   name: "Table",
   defaultValues: DEFAULT_VALUES9,
   propMapper: (props) => {
-    const { headers, data, ...rest } = props;
-    if (headers || data) {
+    const { headers, data, columns, rows, ...rest } = props;
+    if (headers || data || typeof columns === "number" || typeof rows === "number") {
       const base = mapSemanticProps(
         rest,
         DEFAULT_VALUES9,
         "Table"
       );
+      const colCount = headers ? headers.length : typeof columns === "number" ? columns : data?.[0]?.length ?? 0;
+      const blankCells = (n) => Array.from({ length: n }, () => ({ text: "", width: 0 }));
       const tableHeaders = headers ? [{ cells: headers.map((text) => ({ text, width: 0 })), height: 0 }] : [];
       const tableRows = data ? data.map((row) => ({
         cells: row.map((text) => ({ text, width: 0 })),
         height: 0
-      })) : [];
+      })) : typeof rows === "number" ? (
+        // No data: build an empty grid sized by `columns` × `rows`.
+        Array.from({ length: rows }, () => ({
+          cells: blankCells(colCount),
+          height: 0
+        }))
+      ) : [];
       base.table = { headers: tableHeaders, rows: tableRows, footers: [] };
+      if (headers || typeof columns === "number") {
+        base.columns = colCount;
+      }
       if (headers) {
-        base.columns = headers.length;
         base.enableHeader = true;
       }
       if (data) {
         base.rows = data.length;
+      } else if (typeof rows === "number") {
+        base.rows = rows;
       }
       return base;
     }
@@ -911,13 +1021,23 @@ ${widths.map(({ value, className }) => `  .no-stack .u-col-${className} { width:
 }`;
   return baseCSS + "\n" + columnCSS + "\n" + responsiveCSS;
 }
+function toContentWidthPx(bodyValues, fallback = 500) {
+  const raw = bodyValues?.contentWidth;
+  if (typeof raw === "number" && Number.isFinite(raw)) return raw;
+  if (typeof raw === "string") {
+    const n = parseInt(raw, 10);
+    if (Number.isFinite(n)) return n;
+  }
+  return fallback;
+}
 function renderRowToHtml(innerHTML, values, bodyValues, mode, cells, collection = "rows") {
   const rowExporter = exporters.RowExporters[mode] || exporters.RowExporters.web;
   const html = rowExporter(innerHTML, values, bodyValues, {
     collection,
     variant: mode
   });
-  const css = generateGridCSS(cells, mode);
+  const contentWidth = toContentWidthPx(bodyValues);
+  const css = generateGridCSS(cells, mode, contentWidth);
   return css ? `<style>${css}</style>${html}` : html;
 }
 function processChildren(children, cells, bodyValues, rowValues, mode, _config) {
@@ -1015,11 +1135,16 @@ var Row = (props) => {
 };
 Row.displayName = "Row";
 var Row_default = Row;
+var DEFAULT_CONTAINER_PADDING = "10px";
 var DEFAULT_VALUES12 = COLUMN_DEFAULTS;
 function renderColumnToHtml(innerHTML, values, index, cells, bodyValues, rowValues, mode) {
   const columnExporter = exporters.ColumnExporters[mode] || exporters.ColumnExporters.web;
   return columnExporter(innerHTML, values, index, cells, bodyValues, rowValues);
 }
+function renderContentToHtml(innerHTML, values, bodyValues, mode) {
+  const contentExporter = exporters.ContentExporters[mode] || exporters.ContentExporters.web;
+  return contentExporter(innerHTML, values, bodyValues, {});
+}
 var Column = (props) => {
   const {
     children,
@@ -1062,10 +1187,22 @@ var Column = (props) => {
             if (rendered && typeof rendered === "object" && rendered.props && rendered.props.dangerouslySetInnerHTML) {
               const componentHTML = rendered.props.dangerouslySetInnerHTML.__html;
               const componentType = child.type;
-              const componentName = componentType?.displayName || componentType?.name || "component";
-              const componentProps = child.props;
-              const containerPadding = componentProps.values?.containerPadding || DEFAULT_VALUES12.padding || "10px";
-              innerHTML += `<div id="u_content_${componentName.toLowerCase()}_${childIndex + 1}" class="u_content_${componentName.toLowerCase()}" style="padding: ${containerPadding};">${componentHTML}</div>`;
+              const componentName = (componentType?.displayName || componentType?.name || "component").toLowerCase();
+              const childProps = child.props;
+              const containerPadding = childProps.containerPadding ?? childProps.values?.containerPadding ?? DEFAULT_CONTAINER_PADDING;
+              const contentValues = {
+                containerPadding,
+                _meta: {
+                  htmlID: `u_content_${componentName}_${childIndex + 1}`,
+                  htmlClassNames: `u_content_${componentName}`
+                }
+              };
+              innerHTML += renderContentToHtml(
+                componentHTML,
+                contentValues,
+                bodyValues,
+                mode
+              );
             } else if (rendered) {
               const name = child.type?.displayName || child.type?.name || "Unknown";
               console.warn(
@@ -1127,7 +1264,13 @@ function renderBodyToHtml(innerHTML, values, mode, previewText) {
     }
   }
   const bodyExporter = exporters.BodyExporters[mode] || exporters.BodyExporters.web;
-  const raw = mode === "document" ? bodyExporter(finalInnerHtml, values, { type: "" }) : bodyExporter(finalInnerHtml, values, values);
+  const raw = mode === "document" ? bodyExporter(finalInnerHtml, values, { type: "" }) : mode === "email" ? (
+    // The email body exporter reads body context (contentWidth,
+    // contentAlign) from the `bodyValues` field of its 3rd argument.
+    // Passing `values` directly left it undefined, so the Outlook (MSO)
+    // table fell back to 600px regardless of contentWidth.
+    bodyExporter(finalInnerHtml, values, { bodyValues: values })
+  ) : bodyExporter(finalInnerHtml, values, values);
   return raw.replace("min-height: 100vh; ", "").replace("min-height: 100vh;", "");
 }
 var Body = (props) => {
@@ -1135,7 +1278,10 @@ var Body = (props) => {
   const resolvedConfig = { ...DEFAULT_CONFIG, ...configProp };
   const mode = modeProp ?? resolvedConfig.mode ?? "web";
   const _config = { ...resolvedConfig, mode };
-  const values = mapSemanticProps(semanticProps, DEFAULT_VALUES13, "Body");
+  const values = mergeValues(
+    DEFAULT_VALUES13,
+    mapSemanticProps(semanticProps, DEFAULT_VALUES13, "Body")
+  );
   const valuesWithMeta = {
     ...values,
     _meta: {
@@ -1148,7 +1294,10 @@ var Body = (props) => {
   if (children) {
     enrichedChildren = React__default.default.Children.map(children, (child) => {
       if (React__default.default.isValidElement(child)) {
-        return React__default.default.cloneElement(child, { _config });
+        return React__default.default.cloneElement(child, {
+          _config,
+          bodyValues: values
+        });
       }
       return child;
     });
@@ -1580,6 +1729,10 @@ function processBody(element, counters) {
   const semanticProps = extractSemanticProps2(element.props);
   const mapped = mapSemanticProps(semanticProps, BODY_DEFAULTS, "Body");
   const values = mergeValues(BODY_DEFAULTS, mapped);
+  const previewText = element.props.previewText;
+  if (previewText !== void 0) {
+    values.preheaderText = previewText;
+  }
   const valuesWithMeta = {
     ...values,
     _meta: {