fix(components): prefer mjml enum type over CSSProperties (#85)

In the previous version enum was being pre-empted by CSSProperties. This resulted in some values not passing type checking when using validationLevel: "strict". Fixes #81

Author: IanEdington

scripts/generate-mjml-react-utils/getPropTypeFromMjmlAttributeType.ts

@@ -0,0 +1,63 @@
+export const ATTRIBUTES_TO_USE_CSSProperties_WITH = new Set([
+  "color",
+  "textDecoration",
+  "textTransform",
+
+  "border",
+  "borderRadius",
+  "borderColor",
+  "borderStyle",
+
+  "backgroundColor",
+  "backgroundPosition",
+  "backgroundSize",
+]);
+
+/**
+ * Converts an mjml type definition into a typescript type definition
+ * Handles boolean, integer, enum, and
+ * This is used to generate the types on the React <> mjml binding component.
+ */
+export function getPropTypeFromMjmlAttributeType(
+  attribute: string,
+  mjmlAttributeType: string
+): string {
+  if (mjmlAttributeType === "boolean") {
+    return "boolean";
+  }
+  if (mjmlAttributeType === "integer") {
+    return "number";
+  }
+  // e.g. "vertical-align": "enum(top,bottom,middle)"
+  if (mjmlAttributeType.startsWith("enum(")) {
+    return transformEnumType(mjmlAttributeType);
+  }
+  if (ATTRIBUTES_TO_USE_CSSProperties_WITH.has(attribute)) {
+    // When possible prefer using the CSSProperties definitions over the
+    // less helpful "string" or "string | number" type definitions.
+    return `React.CSSProperties["${attribute}"]`;
+  }
+  if (
+    mjmlAttributeType.startsWith("unit") &&
+    mjmlAttributeType.includes("px")
+  ) {
+    return "string | number";
+  }
+  return "string";
+}
+
+/**
+ * Converts an mjml enum type definition into a typescript string literal type.
+ * Strings like `"enum(a,b,c)"` become `"a" | "b" | "c"`.
+ * This is used to generate the types on the React <> mjml binding component.
+ */
+function transformEnumType(mjmlAttributeType: string): string {
+  return (
+    mjmlAttributeType
+      .match(/\(.*\)/)?.[0]
+      ?.slice(1, -1)
+      .split(",")
+      .map((str) => '"' + str + '"')
+      .join(" | ") ?? "unknown"
+  );
+}

scripts/generate-mjml-react.ts

@@ -11,6 +11,8 @@ import camelCase from "lodash.camelcase";
 import upperFirst from "lodash.upperfirst";
 import * as path from "path";
 
+import { getPropTypeFromMjmlAttributeType } from "./generate-mjml-react-utils/getPropTypeFromMjmlAttributeType";
+
 const MJML_REACT_DIR = "src";
 
 const UTILS_FILE = "utils";
@@ -23,7 +25,7 @@ const GENERATED_HEADER_TSX = `
  */
 `;
 
-interface IMjmlComponent {
+export interface IMjmlComponent {
   componentName: string;
   allowedAttributes?: Record<string, string>;
   defaultAttributes?: Record<string, string>;
@@ -52,30 +54,14 @@ const MJML_COMPONENT_NAMES = MJML_COMPONENTS_TO_GENERATE.map(
   (component) => component.componentName
 );
 
-const ATTRIBUTES_TO_USE_CSSProperties_WITH = new Set([
-  "color",
-  "textAlign",
-  "verticalAlign",
-  "textDecoration",
-  "textTransform",
-
-  "border",
-  "borderRadius",
-  "borderColor",
-  "borderStyle",
-
-  "backgroundColor",
-  "backgroundPosition",
-  "backgroundRepeat",
-  "backgroundSize",
-]);
-
 const TYPE_OVERRIDE: { [componentName: string]: { [prop: string]: string } } = {
   mjml: { owa: "string", lang: "string" },
   "mj-style": { inline: "boolean" },
   "mj-class": { name: "string" },
   "mj-table": { cellspacing: "string", cellpadding: "string" },
   "mj-selector": { path: "string" },
+  "mj-section": { fullWidth: "boolean" },
+  "mj-wrapper": { fullWidth: "boolean" },
   "mj-html-attribute": { name: "string" },
   "mj-include": { path: "string" },
   "mj-breakpoint": { width: "string" },
@@ -117,42 +103,6 @@ const ALLOW_ANY_PROPERTY = new Set(
   )
 );
 
-function getPropTypeFromMjmlAttributeType(
-  attribute: string,
-  mjmlAttributeType: string
-): string {
-  if (attribute === "fullWidth") {
-    return "boolean";
-  }
-  if (ATTRIBUTES_TO_USE_CSSProperties_WITH.has(attribute)) {
-    return `React.CSSProperties["${attribute}"]`;
-  }
-  if (
-    mjmlAttributeType.startsWith("unit") &&
-    mjmlAttributeType.includes("px")
-  ) {
-    return "string | number";
-  }
-  if (mjmlAttributeType === "boolean") {
-    return "boolean";
-  }
-  if (mjmlAttributeType === "integer") {
-    return "number";
-  }
-  // e.g. "vertical-align": "enum(top,bottom,middle)"
-  if (mjmlAttributeType.startsWith("enum")) {
-    return (
-      mjmlAttributeType
-        .match(/\(.*\)/)?.[0]
-        ?.slice(1, -1)
-        .split(",")
-        .map((str) => "'" + str + "'")
-        .join(" | ") ?? "unknown"
-    );
-  }
-  return "string";
-}
-
 function buildTypesForComponent(mjmlComponent: IMjmlComponent): string {
   const {
     componentName,