@unlayer/react-elements 0.1.9 → 0.1.11

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;
     }
@@ -1619,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: {