From 82275ddf3edc3479a3103771b7d76b099c0b166b Mon Sep 17 00:00:00 2001
From: Kar Rui Lau <karrui@open.gov.sg>
Date: Wed, 7 Aug 2024 12:55:17 +0800
Subject: [PATCH] feat: turn on noUncheckedIndexedAccess to remove class of
 bugs

---
 .../ArticlePageHeader/ArticlePageHeader.tsx   |  2 +-
 .../internal/Breadcrumb/Breadcrumb.tsx        | 12 +++++----
 .../next/components/native/Table/Table.tsx    | 27 ++++++++++---------
 packages/components/tsconfig.json             |  1 +
 4 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/packages/components/src/templates/next/components/internal/ArticlePageHeader/ArticlePageHeader.tsx b/packages/components/src/templates/next/components/internal/ArticlePageHeader/ArticlePageHeader.tsx
index f07dc69e94..3380fcc3ac 100644
--- a/packages/components/src/templates/next/components/internal/ArticlePageHeader/ArticlePageHeader.tsx
+++ b/packages/components/src/templates/next/components/internal/ArticlePageHeader/ArticlePageHeader.tsx
@@ -25,7 +25,7 @@ const ArticlePageHeader = ({
         <p className="text-sm text-gray-800">{date}</p>
 
         <div className="text-xl tracking-tight text-gray-500 md:text-2xl">
-          {summary.length === 1 ? (
+          {summary.length === 1 && summary[0] ? (
             <BaseParagraph content={summary[0]} />
           ) : (
             <ul className="list-disc ps-7">
diff --git a/packages/components/src/templates/next/components/internal/Breadcrumb/Breadcrumb.tsx b/packages/components/src/templates/next/components/internal/Breadcrumb/Breadcrumb.tsx
index f562379f4c..a47f5b9395 100644
--- a/packages/components/src/templates/next/components/internal/Breadcrumb/Breadcrumb.tsx
+++ b/packages/components/src/templates/next/components/internal/Breadcrumb/Breadcrumb.tsx
@@ -20,11 +20,13 @@ const Breadcrumb = ({ links, LinkComponent = "a" }: BreadcrumbProps) => {
   return (
     <nav aria-label="Breadcrumb">
       <ol role="list" className={compoundStyles.nav()}>
-        <li className={compoundStyles.container()}>
-          <LinkComponent href={root.url} className={compoundStyles.link()}>
-            {root.title}
-          </LinkComponent>
-        </li>
+        {root && (
+          <li className={compoundStyles.container()}>
+            <LinkComponent href={root.url} className={compoundStyles.link()}>
+              {root.title}
+            </LinkComponent>
+          </li>
+        )}
         {rest.map((link, index) => {
           return (
             <li key={index} className={compoundStyles.container()}>
diff --git a/packages/components/src/templates/next/components/native/Table/Table.tsx b/packages/components/src/templates/next/components/native/Table/Table.tsx
index fdcdedfb49..a3ae290035 100644
--- a/packages/components/src/templates/next/components/native/Table/Table.tsx
+++ b/packages/components/src/templates/next/components/native/Table/Table.tsx
@@ -29,18 +29,19 @@ const getStickyRowIndexes = (tableRows: TableProps["content"]) => {
 
   tableRows
     .map((row) => row.content[0])
-    .forEach(({ attrs }, index) => {
-      if (!stickyRowIndexes.includes(index)) {
-        // Index has already been removed by an earlier rowSpan
-        return
-      }
-
-      if (attrs?.rowspan) {
-        // Exclude the next few rows that are covered by the rowSpan
-        stickyRowIndexes = stickyRowIndexes.filter(
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          (value) => value <= index || value >= index + attrs.rowspan!,
-        )
+    .forEach((row, index) => {
+      if (row?.attrs) {
+        if (!stickyRowIndexes.includes(index)) {
+          // Index has already been removed by an earlier rowSpan
+          return
+        }
+        const rowspan = row.attrs.rowspan
+        if (rowspan !== undefined) {
+          // Exclude the next few rows that are covered by the rowSpan
+          stickyRowIndexes = stickyRowIndexes.filter(
+            (value) => value <= index || value >= index + rowspan,
+          )
+        }
       }
     })
 
@@ -78,7 +79,7 @@ const Table = ({ attrs: { caption }, content }: TableProps) => {
         <tbody>
           {content.map((row, index) => {
             const TableCellTag =
-              row.content[0].type === "tableHeader" ? "th" : "td"
+              row.content[0]?.type === "tableHeader" ? "th" : "td"
 
             return (
               <tr
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index 4ff1d2636c..cf629494cd 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -12,6 +12,7 @@
     "resolveJsonModule": true /* Include modules imported with .json extension. */,
     "strictBindCallApply": true /* Enable strict 'bind', 'call', and 'apply' methods on functions. */,
     "strict": true /* Enable all strict type-checking options. */,
+    "noUncheckedIndexedAccess": true,
     "skipLibCheck": true,
     /* Strict Type-Checking Options */
     // "noImplicitAny": true,