fix: do not error on invalid backgroundColor or textColor #2176 (#2179)

Author: nperez0111

packages/xl-docx-exporter/src/docx/defaultSchema/blocks.ts

@@ -35,16 +35,25 @@ function blockPropsToStyles(
         ? undefined
         : {
             type: ShadingType.SOLID,
-            color:
-              colors[
-                props.backgroundColor as keyof typeof colors
-              ].background.slice(1),
+            color: (() => {
+              const color = colors[props.backgroundColor]?.background;
+              if (!color) {
+                return undefined;
+              }
+              return color.slice(1);
+            })(),
           },
     run:
       props.textColor === "default" || !props.textColor
         ? undefined
         : {
-            color: colors[props.textColor as keyof typeof colors].text.slice(1),
+            color: (() => {
+              const color = colors[props.textColor]?.text;
+              if (!color) {
+                return undefined;
+              }
+              return color.slice(1);
+            })(),
           },
     alignment:
       !props.textAlignment || props.textAlignment === "left"

packages/xl-docx-exporter/src/docx/defaultSchema/styles.ts

@@ -43,23 +43,26 @@ export const docxStyleMappingForDefaultSchema: StyleMapping<
     if (!val) {
       return {};
     }
+    const color = exporter.options.colors[val]?.background;
+    if (!color) {
+      return {};
+    }
     return {
       shading: {
-        fill: exporter.options.colors[
-          val as keyof typeof exporter.options.colors
-        ].background.slice(1),
+        fill: color.slice(1),
       },
     };
   },
   textColor: (val, exporter) => {
     if (!val) {
       return {};
     }
+    const color = exporter.options.colors[val]?.text;
+    if (!color) {
+      return {};
+    }
     return {
-      color:
-        exporter.options.colors[
-          val as keyof typeof exporter.options.colors
-        ].text.slice(1),
+      color: color.slice(1),
     };
   },
   code: (val) => {

packages/xl-docx-exporter/src/docx/util/Table.tsx

@@ -55,11 +55,15 @@ export const Table = (
                 ? undefined
                 : {
                     type: ShadingType.SOLID,
-                    color:
-                      t.options.colors[
-                        cell.props
-                          .backgroundColor as keyof typeof t.options.colors
-                      ].background.slice(1),
+                    color: (() => {
+                      const color =
+                        t.options.colors[cell.props.backgroundColor]
+                          ?.background;
+                      if (!color) {
+                        return undefined;
+                      }
+                      return color.slice(1);
+                    })(),
                   },
             children: [
               new Paragraph({
@@ -88,9 +92,14 @@ export const Table = (
                   color:
                     cell.props.textColor === "default" || !cell.props.textColor
                       ? undefined
-                      : t.options.colors[
-                          cell.props.textColor as keyof typeof t.options.colors
-                        ].text.slice(1),
+                      : (() => {
+                          const color =
+                            t.options.colors[cell.props.textColor]?.text;
+                          if (!color) {
+                            return undefined;
+                          }
+                          return color.slice(1);
+                        })(),
                 },
               }),
             ],

packages/xl-email-exporter/src/react-email/reactEmailExporter.tsx

@@ -333,15 +333,11 @@ export class ReactEmailExporter<
       backgroundColor:
         props.backgroundColor === "default" || !props.backgroundColor
           ? undefined
-          : this.options.colors[
-              props.backgroundColor as keyof typeof this.options.colors
-            ].background,
+          : this.options.colors[props.backgroundColor]?.background,
       color:
         props.textColor === "default" || !props.textColor
           ? undefined
-          : this.options.colors[
-              props.textColor as keyof typeof this.options.colors
-            ].text,
+          : this.options.colors[props.textColor]?.text,
       alignItems:
         props.textAlignment === "right"
           ? "flex-end"

packages/xl-odt-exporter/src/odt/defaultSchema/blocks.tsx

@@ -41,9 +41,7 @@ const createParagraphStyle = (
 
   const backgroundColor =
     props.backgroundColor && props.backgroundColor !== "default"
-      ? exporter.options.colors[
-          props.backgroundColor as keyof typeof exporter.options.colors
-        ].background
+      ? exporter.options.colors[props.backgroundColor]?.background
       : undefined;
 
   if (backgroundColor) {
@@ -54,7 +52,7 @@ const createParagraphStyle = (
     const color =
       exporter.options.colors[
         props.textColor as keyof typeof exporter.options.colors
-      ].text;
+      ]?.text ?? props.textColor;
     textStyles["fo:color"] = color;
   }
 
@@ -115,18 +113,14 @@ const createTableCellStyle = (
           fo:background-color={
             cell.props.backgroundColor !== "default" &&
             cell.props.backgroundColor
-              ? exporter.options.colors[
-                  cell.props
-                    .backgroundColor as keyof typeof exporter.options.colors
-                ].background
+              ? exporter.options.colors?.[cell.props.backgroundColor]
+                  ?.background
               : undefined
           }
           // TODO This is not applying because the children set their own colors
           fo:color={
             cell.props.textColor !== "default" && cell.props.textColor
-              ? exporter.options.colors[
-                  cell.props.textColor as keyof typeof exporter.options.colors
-                ].text
+              ? exporter.options.colors[cell.props.textColor]?.text
               : undefined
           }
         />

packages/xl-odt-exporter/src/odt/defaultSchema/styles.ts

@@ -35,18 +35,21 @@ export const odtStyleMappingForDefaultSchema: StyleMapping<
     if (!val) {
       return {};
     }
-    const color =
-      exporter.options.colors[val as keyof typeof exporter.options.colors].text;
+    const color = exporter.options.colors[val]?.text;
+    if (!color) {
+      return {};
+    }
     return { "fo:color": color };
   },
 
   backgroundColor: (val, exporter): Record<string, string> => {
     if (!val) {
       return {};
     }
-    const color =
-      exporter.options.colors[val as keyof typeof exporter.options.colors]
-        .background;
+    const color = exporter.options.colors[val]?.background;
+    if (!color) {
+      return {};
+    }
     return { "fo:background-color": color };
   },
 

packages/xl-pdf-exporter/src/pdf/defaultSchema/styles.tsx

@@ -42,19 +42,15 @@ export const pdfStyleMappingForDefaultSchema: StyleMapping<
       return {};
     }
     return {
-      backgroundColor:
-        exporter.options.colors[val as keyof typeof exporter.options.colors]
-          .background,
+      backgroundColor: exporter.options.colors[val]?.background,
     };
   },
   textColor: (val, exporter) => {
     if (!val) {
       return {};
     }
     return {
-      color:
-        exporter.options.colors[val as keyof typeof exporter.options.colors]
-          .text,
+      color: exporter.options.colors[val]?.text,
     };
   },
   code: (val) => {

packages/xl-pdf-exporter/src/pdf/pdfExporter.tsx

@@ -296,15 +296,11 @@ export class PDFExporter<
       backgroundColor:
         props.backgroundColor === "default" || !props.backgroundColor
           ? undefined
-          : this.options.colors[
-              props.backgroundColor as keyof typeof this.options.colors
-            ].background,
+          : this.options.colors[props.backgroundColor]?.background,
       color:
         props.textColor === "default" || !props.textColor
           ? undefined
-          : this.options.colors[
-              props.textColor as keyof typeof this.options.colors
-            ].text,
+          : this.options.colors[props.textColor]?.text,
       alignItems:
         props.textAlignment === "right"
           ? "flex-end"

packages/xl-pdf-exporter/src/pdf/util/table/Table.tsx

@@ -88,17 +88,14 @@ export const Table = (props: {
                     color:
                       cell.props.textColor === "default"
                         ? undefined
-                        : props.transformer.options.colors[
-                            cell.props
-                              .textColor as keyof typeof props.transformer.options.colors
-                          ].text,
+                        : props.transformer.options.colors[cell.props.textColor]
+                            ?.text,
                     backgroundColor:
                       cell.props.backgroundColor === "default"
                         ? undefined
                         : props.transformer.options.colors[
-                            cell.props
-                              .backgroundColor as keyof typeof props.transformer.options.colors
-                          ].background,
+                            cell.props.backgroundColor
+                          ]?.background,
                     textAlign: cell.props.textAlignment,
                   },
                 ]}