feat: remove tableComponents prop (#220)

* feat: remove `tableComponents` prop * chore: update prismic-client dep * fix: combine tableComponents and components in tests --------- Co-authored-by: Levi Mykel Gable <[email protected]>
prismicio · Feb 20, 2025 · 5d43f00 · 5d43f00
1 parent 88f60b3
commit 5d43f00
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 37 deletions.
diff --git a/e2e-projects/nextjs/app/PrismicTable/page.tsx b/e2e-projects/nextjs/app/PrismicTable/page.tsx
@@ -28,7 +28,7 @@ export default async function Page() {
 			<div data-testid="custom-table">
 				<PrismicTable
 					field={tests.filled}
-					tableComponents={{
+					components={{
 						table: ({ children }) => <div className="table">{children}</div>,
 						thead: ({ children }) => <div className="head">{children}</div>,
 						tbody: ({ children }) => <div className="body">{children}</div>,
@@ -42,12 +42,10 @@ export default async function Page() {
 			<div data-testid="custom-cell-content">
 				<PrismicTable
 					field={tests.filled}
-					tableComponents={{
+					components={{
 						table: ({ children }) => (
 							<table className="table">{children}</table>
 						),
-					}}
-					components={{
 						paragraph: ({ children }) => (
 							<p className="paragraph">{children}</p>
 						),

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
 	"devDependencies": {
 		"@eslint/js": "^9.19.0",
 		"@playwright/test": "^1.50.0",
-		"@prismicio/client": "^7.16.0",
+		"@prismicio/client": "^7.16.1",
 		"@rollup/plugin-typescript": "^12.1.2",
 		"@size-limit/preset-small-lib": "^11.1.6",
 		"@types/react": "^19.0.8",

diff --git a/src/PrismicTable.tsx b/src/PrismicTable.tsx
@@ -1,15 +1,16 @@
 import { ReactNode } from "react";
-import { isFilled, TableField } from "@prismicio/client";
-import { JSXMapSerializer, PrismicRichText } from "./PrismicRichText.js";
+import {
+	isFilled,
+	TableField,
+	TableFieldHead,
+	TableFieldHeadRow,
+	TableFieldBody,
+	TableFieldBodyRow,
+	TableFieldHeaderCell,
+	TableFieldDataCell,
+} from "@prismicio/client";
 
-type TableFieldHead = NonNullable<TableField<"filled">["head"]>;
-type TableFieldBody = TableField<"filled">["body"];
-type TableFieldRow =
-	| TableFieldHead["rows"][number]
-	| TableFieldBody["rows"][number];
-type TableFieldCell = TableFieldRow["cells"][number];
-type TableFieldHeaderCell = Extract<TableFieldCell, { type: "header" }>;
-type TableFieldDataCell = Extract<TableFieldCell, { type: "data" }>;
+import { JSXMapSerializer, PrismicRichText } from "./PrismicRichText.js";
 
 type TableComponents = {
 	table?: (props: {
@@ -18,15 +19,18 @@ type TableComponents = {
 	}) => ReactNode;
 	thead?: (props: { head: TableFieldHead; children: ReactNode }) => ReactNode;
 	tbody?: (props: { body: TableFieldBody; children: ReactNode }) => ReactNode;
-	tr?: (props: { row: TableFieldRow; children: ReactNode }) => ReactNode;
+	tr?: (props: {
+		row: TableFieldHeadRow | TableFieldBodyRow;
+		children: ReactNode;
+	}) => ReactNode;
 	th?: (props: {
 		cell: TableFieldHeaderCell;
 		children: ReactNode;
 	}) => ReactNode;
 	td?: (props: { cell: TableFieldDataCell; children: ReactNode }) => ReactNode;
 };
 
-const defaultTableComponents: Required<TableComponents> = {
+const defaultComponents: Required<TableComponents> = {
 	table: ({ children }) => <table>{children}</table>,
 	thead: ({ children }) => <thead>{children}</thead>,
 	tbody: ({ children }) => <tbody>{children}</tbody>,
@@ -37,23 +41,22 @@ const defaultTableComponents: Required<TableComponents> = {
 
 export type PrismicTableProps = {
 	field: TableField;
-	components?: JSXMapSerializer;
-	tableComponents?: TableComponents;
+	components?: JSXMapSerializer & TableComponents;
 	fallback?: ReactNode;
 };
 
 export function PrismicTable(props: PrismicTableProps) {
-	const { field, components, tableComponents, fallback = null } = props;
+	const { field, components, fallback = null } = props;
 
 	if (!isFilled.table(field)) {
-		return fallback ?? null;
+		return fallback;
 	}
 
 	const {
 		table: Table,
 		thead: Thead,
 		tbody: Tbody,
-	} = { ...defaultTableComponents, ...tableComponents };
+	} = { ...defaultComponents, ...components };
 
 	return (
 		<Table table={field}>
@@ -64,7 +67,6 @@ export function PrismicTable(props: PrismicTableProps) {
 							key={JSON.stringify(row)}
 							row={row}
 							components={components}
-							tableComponents={tableComponents}
 						/>
 					))}
 				</Thead>
@@ -75,7 +77,6 @@ export function PrismicTable(props: PrismicTableProps) {
 						key={JSON.stringify(row)}
 						row={row}
 						components={components}
-						tableComponents={tableComponents}
 					/>
 				))}
 			</Tbody>
@@ -84,19 +85,14 @@ export function PrismicTable(props: PrismicTableProps) {
 }
 
 type TableRowProps = {
-	row: TableFieldRow;
-	components?: JSXMapSerializer;
-	tableComponents?: TableComponents;
+	row: TableFieldHeadRow | TableFieldBodyRow;
+	components?: JSXMapSerializer & TableComponents;
 };
 
 function TableRow(props: TableRowProps) {
-	const { row, components, tableComponents } = props;
+	const { row, components } = props;
 
-	const {
-		tr: Tr,
-		th: Th,
-		td: Td,
-	} = { ...defaultTableComponents, ...tableComponents };
+	const { tr: Tr, th: Th, td: Td } = { ...defaultComponents, ...components };
 
 	return (
 		<Tr row={row}>