fix(global): 🐛 add valid props for all CoreTable related components

add valid props and sanitizations for all CoreTable related components

ref: #336

package/components/dataDisplay/CoreTable.js

@@ -23,7 +23,7 @@ export default function CoreTable(props) {
   } = props;
 
   return (
-    <NativeTable 
+    <NativeTable
       component={component}
       padding={padding}
       size={size}
@@ -34,6 +34,8 @@ export default function CoreTable(props) {
   );
 }
 
+CoreTable.displayName = "CoreTable";
+
 CoreTable.validProps = [
   {
     description: "The content of the table, normally TableHead and TableBody.",

package/components/dataDisplay/CoreTableBody.js

@@ -4,6 +4,24 @@ import React from "react";
 // eslint-disable-next-line import/no-unresolved
 import { NativeTableBody } from "@wrappid/native";
 
+import { sanitizeComponentProps } from "../../utils/componentUtil";
+
 export default function CoreTableBody(props) {
-  return <NativeTableBody {...props}>{props.children}</NativeTableBody>;
+  props = sanitizeComponentProps(CoreTableBody, props);
+  return <NativeTableBody {...props}>{props?.children}</NativeTableBody>;
 }
+
+CoreTableBody.displayName = "CoreTableBody";
+CoreTableBody.validProps = [
+  {
+    description: "The content of the component, normally CoreTableRow.",
+    name       : "children",
+    types      : [{ type: "node" }]
+  },
+  {
+    description: "The component used for the root node. Either a string to use a HTML element or a component.",
+    name       : "component",
+    types      : [{ type: "elementType" }]
+  }
+];
+CoreTableBody.invalidProps = [];

package/components/dataDisplay/CoreTableCell.js

@@ -4,6 +4,99 @@ import React from "react";
 // eslint-disable-next-line import/no-unresolved
 import { NativeTableCell } from "@wrappid/native";
 
+import { sanitizeComponentProps } from "../../utils/componentUtil";
+
 export default function CoreTableCell(props) {
+  props = sanitizeComponentProps(CoreTableCell, props);
   return <NativeTableCell {...props} />;
 }
+
+CoreTableCell.displayName = "CoreTableCell";
+
+CoreTableCell.validProps = [
+  {
+    description: "Set the text-align on the table cell content. Monetary or generally number fields should be right aligned as that allows you to add them up quickly in your head without having to worry about decimals.",
+    name       : "align",
+    types      : [
+      {
+        default    : "inherit",
+        type       : "string",
+        validValues: [
+          "left",
+          "center",
+          "right",
+          "justify",
+          "inherit"
+        ]
+      }
+    ]
+  },
+  {
+    description: "The content of the component.",
+    name       : "children",
+    types      : [{ type: "node" }]
+  },
+  {
+    description: "The component used for the root node. Either a string to use a HTML element or a component.",
+    name       : "component",
+    types      : [{ type: "elementType" }]
+  },
+  {
+    description: "Set the padding applied to the cell. By default, the Table parent component set the padding to 16px. Set padding to 'checkbox' to have padding for the checkbox.",
+    name       : "padding",
+    types      : [
+      {
+        default    : "normal",
+        type       : "string",
+        validValues: ["normal", "checkbox", "none"]
+      }
+    ]
+  },
+  {
+    description: "Set the scope attribute.",
+    name       : "scope",
+    types      : [{ type: "string" }]
+  },
+  {
+    description: "Specify the size of the cell. The prop defaults to the value ('medium') inherited from the parent CoreTable component.",
+    name       : "size",
+    types      : [
+      {
+        default    : "medium",
+        type       : "string",
+        validValues: ["small", "medium"]
+      }
+    ]
+  },
+  {
+    description: "Set aria-sort direction.",
+    name       : "sortDirection",
+    types      : [
+      {
+        type       : "string",
+        validValues: ["asc", "desc", "false"]
+      },
+      {
+        default      : false,
+        isDefaultType: true,
+        type         : "boolean",
+        validValues  : [false]
+      }
+    ]
+  },
+  {
+    description: "Specify the cell type. The prop defaults to the value inherited from the parent CoreTableHead, CoreTableBody, or CoreTableFooter components.",
+    name       : "variant",
+    types      : [
+      {
+        default    : "body",
+        type       : "string",
+        validValues: ["body", "footer", "head"]
+      }
+    ]
+  }
+
+];
+
+CoreTableCell.invalidProps = [];
+

package/components/dataDisplay/CoreTableContainer.js

@@ -4,6 +4,25 @@ import React from "react";
 // eslint-disable-next-line import/no-unresolved
 import { NativeTableContainer } from "@wrappid/native";
 
+import { sanitizeComponentProps } from "../../utils/componentUtil";
+
 export default function CoreTableContainer(props) {
-  return <NativeTableContainer {...props}>{props.children}</NativeTableContainer>;
+  props = sanitizeComponentProps(CoreTableContainer, props);
+  return <NativeTableContainer {...props}>{props?.children}</NativeTableContainer>;
 }
+
+CoreTableContainer.displayName = "CoreTableContainer";
+CoreTableContainer.validProps = [
+  {
+    description: "The content of the component, normally CoreTable.",
+    name       : "children",
+    types      : [{ type: "node" }]
+  },
+  {
+    description: "The component used for the root node. Either a string to use a HTML element or a component.",
+    name       : "component",
+    types      : [{ type: "elementType" }]
+  }
+];
+
+CoreTableContainer.invalidProps = [];

package/components/dataDisplay/CoreTableFooter.js

@@ -4,6 +4,24 @@ import React from "react";
 // eslint-disable-next-line import/no-unresolved
 import { NativeTableFooter } from "@wrappid/native";
 
+import { sanitizeComponentProps } from "../../utils/componentUtil";
+
 export default function CoreTableFooter(props) {
-  return <NativeTableFooter {...props}>{props.children}</NativeTableFooter>;
+  props = sanitizeComponentProps(CoreTableFooter, props);
+  return <NativeTableFooter {...props}>{props?.children}</NativeTableFooter>;
 }
+CoreTableFooter.displayName = "CoreTableFooter";
+CoreTableFooter.validProps = [
+  {
+    description: "The content of the component, normally CoreTableRow.",
+    name       : "children",
+    types      : [{ type: "node" }]
+  },
+  {
+    description: "The component used for the root node. Either a string to use a HTML element or a component.",
+    name       : "component",
+    types      : [{ type: "elementType" }]
+  }
+];
+
+CoreTableFooter.invalidProps = [];

package/components/dataDisplay/CoreTableHead.js

@@ -4,6 +4,25 @@ import React from "react";
 // eslint-disable-next-line import/no-unresolved
 import { NativeTableHead } from "@wrappid/native";
 
+import { sanitizeComponentProps } from "../../utils/componentUtil";
+
 export default function CoreTableHead(props) {
+  props = sanitizeComponentProps(CoreTableHead, props);
   return <NativeTableHead {...props}>{props.children}</NativeTableHead>;
 }
+
+CoreTableHead.displayName = "CoreTableHead";
+CoreTableHead.validProps = [
+  {
+    description: "The content of the component, normally CoreTableRow.",
+    name       : "children",
+    types      : [{ type: "node" }]
+  },
+  {
+    description: "The component used for the root node. Either a string to use a HTML element or a component.",
+    name       : "component",
+    types      : [{ type: "elementType" }]
+  }
+];
+
+CoreTableHead.invalidProps = [];

package/components/dataDisplay/CoreTablePagination.js

@@ -4,9 +4,12 @@ import React from "react";
 // eslint-disable-next-line import/no-unresolved
 import { NativeTablePagination } from "@wrappid/native";
 
+import CoreTableCell from "./CoreTableCell";
 import { DATA_TABLE_CONST } from "../../config/dataTableConstants";
+import { sanitizeComponentProps } from "../../utils/componentUtil";
 
 export default function CoreTablePagination(props) {
+  props = sanitizeComponentProps(CoreTablePagination, props);
   return (
     <NativeTablePagination
       component={"div"}
@@ -16,3 +19,151 @@ export default function CoreTablePagination(props) {
     />
   );
 }
+
+CoreTablePagination.displayName = "CoreTablePagination";
+CoreTablePagination.validProps = [
+  ...CoreTableCell.validProps,
+  {
+    description: "The total number of rows. To enable server side pagination for an unknown number of items, provide -1.",
+    name       : "count",
+    types      : [{ type: "integer" }]
+  },
+  {
+    description: `Callback fired when the page is changed.
+Signature:
+function(event: React.MouseEvent | null, page: number) => void
+
+  - event The event source of the callback.
+  - page The page selected.`,
+    name : "onPageChange",
+    types: [{ type: "function" }]
+  },
+  {
+    description: "The zero-based index of the current page.",
+    name       : "page",
+    types      : [{ type: "integer" }]
+  },
+  {
+    decription: "The number of rows per page. Set -1 to display all the rows.",
+    name      : "rowsPerPage",
+    types     : [{ type: "integer" }]
+  },
+  {
+    description: "The component used for displaying the actions. Either a string to use a HTML element or a component.",
+    name       : "ActionsComponent",
+    types      : [
+      {
+        default: "TablePaginationActions",
+        type   : "elementType"
+      }
+    ]
+  },
+  {
+    description: "If true, the component is disabled.",
+    name       : "disabled",
+    types      : [
+      {
+        default    : false,
+        type       : "boolean",
+        validValues: [true, false]
+      }
+    ]
+  },
+  {
+    description: `Accepts a function which returns a string value that provides a user-friendly name for the current page. This is important for screen reader users.
+Signature:
+function(type: string) => string
+
+  - type The link or button type to format ('first' | 'last' | 'next' | 'previous').`,
+    name : "getItemAriaLabel",
+    types: [
+      {
+        // eslint-disable-next-line etc/no-commented-out-code
+        // default: "function defaultGetAriaLabel(type) { return `Go to ${type} page`; }",
+        type: "function",
+      }
+    ]
+  },
+  {
+    description: "Customize the displayed rows label. Invoked with a { from, to, count, page } object.",
+    name       : "labelDisplayedRows",
+    types      : [
+      {
+        // eslint-disable-next-line etc/no-commented-out-code
+        // default: "function defaultLabelDisplayedRows({ from, to, count }) { return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`; }",
+        type: "function"
+      }
+    ]
+  },
+  {
+    description: "Customize the rows per page label",
+    name       : "labelRowsPerPage",
+    types      : [
+      {
+        default: "Rows per page:",
+        type   : "node"
+      }
+    ]
+  },
+  {
+    description: `Callback fired when the number of rows per page is changed.
+Signature:
+function(event: React.ChangeEvent) => void
+
+  - event The event source of the callback.`,
+    name : "onRowsPerPageChange",
+    types: [{ type: "function" }]
+  },
+  {
+    description: "Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed. Use -1 for the value with a custom label to show all the rows.",
+    name       : "rowsPerPageOptions",
+    types      : [
+      {
+        default: DATA_TABLE_CONST.ROWS_PER_PAGE_OPTIONS,
+        type   : "any"
+      }
+    ]
+  },
+  {
+    description: "If true, show the first-page button.",
+    name       : "showFirstButton",
+    types      : [
+      {
+        default    : false,
+        type       : "boolean",
+        validValues: [true, false]
+      }
+    ]
+  },
+  {
+    description: "If true, show the last-page button.",
+    name       : "showLastButton",
+    types      : [
+      {
+        default    : false,
+        type       : "boolean",
+        validValues: [true, false]
+      }
+    ]
+  },
+  {
+    description: "The props used for each slot inside the CoreTablePagination.",
+    name       : "slotProps",
+    types      : [
+      {
+        default: {},
+        type   : "object"
+      }
+    ]
+  },
+  {
+    description: "The components used for each slot inside the CoreTablePagination. Either a string to use a HTML element or a component.",
+    name       : "slots",
+    types      : [
+      {
+        default: {},
+        type   : "object"
+      }
+    ]
+  }
+];