fix(Table)!: removing spacing prop in favor of Tailwind classes (#831)

versini-org · Dec 29, 2024 · 88ccc05 · 88ccc05
1 parent ffe1486
commit 88ccc05
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 75 deletions.
diff --git a/packages/ui-styles/src/plugins/tailwindcss/tailwindPlugin.ts b/packages/ui-styles/src/plugins/tailwindcss/tailwindPlugin.ts
@@ -94,6 +94,7 @@ const componentsWithNoSpacingProp = [
 	"ui-pill",
 	"ui-spinner",
 	"ui-svgicon",
+	"ui-table",
 	"ui-truncate",
 ];
 

diff --git a/packages/ui-table/package.json b/packages/ui-table/package.json
@@ -14,9 +14,7 @@
 	"type": "module",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
-	"files": [
-		"dist"
-	],
+	"files": ["dist"],
 	"scripts": {
 		"build:check": "tsc",
 		"build:js": "vite build",
@@ -41,12 +39,9 @@
 		"@tailwindcss/typography": "0.5.15",
 		"@versini/ui-button": "workspace:../ui-button",
 		"@versini/ui-icons": "workspace:../ui-icons",
-		"@versini/ui-spacing": "workspace:../ui-spacing",
 		"@versini/ui-types": "workspace:../ui-types",
 		"clsx": "2.1.1",
 		"tailwindcss": "3.4.17"
 	},
-	"sideEffects": [
-		"**/*.css"
-	]
+	"sideEffects": ["**/*.css"]
 }
diff --git a/packages/ui-table/src/components/Table/Table.tsx b/packages/ui-table/src/components/Table/Table.tsx
@@ -35,7 +35,6 @@ export const Table = ({
 	maxHeight,
 	stickyHeader,
 	stickyFooter,
-	spacing,
 	...otherProps
 }: TableProps) => {
 	const tableClass = getTableClasses({
@@ -44,7 +43,6 @@ export const Table = ({
 		wrapperClassName,
 		stickyHeader,
 		stickyFooter,
-		spacing,
 	});
 	return (
 		<TableContext.Provider

diff --git a/packages/ui-table/src/components/Table/TableTypes.d.ts b/packages/ui-table/src/components/Table/TableTypes.d.ts
@@ -1,4 +1,3 @@
-import type { SpacingTypes } from "@versini/ui-types";
 import React from "react";
 
 import { TableCellSortDirections } from "./utilities";
@@ -44,8 +43,7 @@ export type TableProps = {
 	 * CSS class to apply to the table wrapper.
 	 */
 	wrapperClassName?: string;
-} & SpacingTypes.Props &
-	React.HTMLAttributes<HTMLTableElement>;
+} & React.HTMLAttributes<HTMLTableElement>;
 
 export type TableRowProps = React.HTMLAttributes<HTMLTableRowElement>;
 export type TableBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;

diff --git a/packages/ui-table/src/components/Table/utilities.ts b/packages/ui-table/src/components/Table/utilities.ts
@@ -1,5 +1,3 @@
-import { getSpacing } from "@versini/ui-spacing";
-import type { SpacingTypes } from "@versini/ui-types";
 import clsx from "clsx";
 
 export const CELL_WRAPPER_HEAD = "thead";
@@ -17,18 +15,16 @@ export const getTableClasses = ({
 	wrapperClassName,
 	stickyHeader,
 	stickyFooter,
-	spacing,
 }: {
 	mode: string;
 	className?: string;
 	stickyFooter?: boolean;
 	stickyHeader?: boolean;
 	wrapperClassName?: string;
-} & SpacingTypes.Props) => {
+}) => {
 	return {
 		wrapper: clsx(
 			"not-prose relative w-full rounded-lg shadow-md",
-			getSpacing(spacing),
 			{
 				"overflow-x-auto": !stickyHeader && !stickyFooter,
 				"overflow-y-scroll": stickyHeader || stickyFooter,
@@ -65,17 +61,20 @@ export const getTableHeadClasses = ({
 	className?: string;
 	stickyHeader?: boolean;
 }) => {
-	return clsx(className, {
-		"sticky top-0 z-10": stickyHeader,
-		"shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]":
-			stickyHeader && mode === "dark",
-		"shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]":
-			stickyHeader && mode === "system",
-		"shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]":
-			stickyHeader && mode === "light",
-		"shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]":
-			stickyHeader && mode === "alt-system",
-	});
+	return clsx(
+		{
+			"sticky top-0 z-10": stickyHeader,
+			"shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]":
+				stickyHeader && mode === "dark",
+			"shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]":
+				stickyHeader && mode === "system",
+			"shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]":
+				stickyHeader && mode === "light",
+			"shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]":
+				stickyHeader && mode === "alt-system",
+		},
+		className,
+	);
 };
 
 export const getTableFooterClasses = ({
@@ -87,17 +86,20 @@ export const getTableFooterClasses = ({
 	className?: string;
 	stickyFooter?: boolean;
 }) => {
-	return clsx(className, {
-		"sticky bottom-0 z-10": stickyFooter,
-		"shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]":
-			stickyFooter && mode === "dark",
-		"shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]":
-			stickyFooter && mode === "system",
-		"shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]":
-			stickyFooter && mode === "light",
-		"shadow-[rgb(65_65_65_/30%)_-0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]":
-			stickyFooter && mode === "alt-system",
-	});
+	return clsx(
+		{
+			"sticky bottom-0 z-10": stickyFooter,
+			"shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]":
+				stickyFooter && mode === "dark",
+			"shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]":
+				stickyFooter && mode === "system",
+			"shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]":
+				stickyFooter && mode === "light",
+			"shadow-[rgb(65_65_65_/30%)_-0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]":
+				stickyFooter && mode === "alt-system",
+		},
+		className,
+	);
 };
 
 export const getTableRowClasses = ({
@@ -113,30 +115,37 @@ export const getTableRowClasses = ({
 		cellWrapper === CELL_WRAPPER_HEAD ||
 		cellWrapper === CELL_WRAPPER_FOOTER
 	) {
-		return clsx({
-			"bg-table-head-dark": mode === "dark",
-			"bg-table-head-light": mode === "light",
-			"bg-table-head-dark dark:bg-table-head-light": mode === "system",
-			"bg-table-head-light dark:bg-table-head-dark": mode === "alt-system",
-		});
+		return clsx(
+			{
+				"bg-table-head-dark": mode === "dark",
+				"bg-table-head-light": mode === "light",
+				"bg-table-head-dark dark:bg-table-head-light": mode === "system",
+				"bg-table-head-light dark:bg-table-head-dark": mode === "alt-system",
+			},
+			className,
+		);
 	}
-	return clsx("border-b last:border-0", className, {
-		"border-table-dark": mode === "dark",
-		"odd:bg-table-dark-odd even:bg-table-dark-even":
-			cellWrapper === CELL_WRAPPER_BODY && mode === "dark",
+	return clsx(
+		"border-b last:border-0",
+		{
+			"border-table-dark": mode === "dark",
+			"odd:bg-table-dark-odd even:bg-table-dark-even":
+				cellWrapper === CELL_WRAPPER_BODY && mode === "dark",
 
-		"border-table-light": mode === "light",
-		"odd:bg-table-light-odd even:bg-table-light-even":
-			cellWrapper === CELL_WRAPPER_BODY && mode === "light",
+			"border-table-light": mode === "light",
+			"odd:bg-table-light-odd even:bg-table-light-even":
+				cellWrapper === CELL_WRAPPER_BODY && mode === "light",
 
-		"border-table-dark dark:border-table-light": mode === "system",
-		"odd:bg-table-dark-odd even:bg-table-dark-even dark:odd:bg-table-light-odd dark:even:bg-table-light-even":
-			cellWrapper === CELL_WRAPPER_BODY && mode === "system",
+			"border-table-dark dark:border-table-light": mode === "system",
+			"odd:bg-table-dark-odd even:bg-table-dark-even dark:odd:bg-table-light-odd dark:even:bg-table-light-even":
+				cellWrapper === CELL_WRAPPER_BODY && mode === "system",
 
-		"border-table-light dark:border-table-dark": mode === "alt-system",
-		"odd:bg-table-light-odd even:bg-table-light-even dark:odd:bg-table-dark-odd dark:even:bg-table-dark-even":
-			cellWrapper === CELL_WRAPPER_BODY && mode === "alt-system",
-	});
+			"border-table-light dark:border-table-dark": mode === "alt-system",
+			"odd:bg-table-light-odd even:bg-table-light-even dark:odd:bg-table-dark-odd dark:even:bg-table-dark-even":
+				cellWrapper === CELL_WRAPPER_BODY && mode === "alt-system",
+		},
+		className,
+	);
 };
 
 export const getTableCellClasses = ({
@@ -150,18 +159,21 @@ export const getTableCellClasses = ({
 	className?: string;
 	compact?: boolean;
 }) => {
-	return clsx(className, {
-		"text-copy-light": mode === "dark",
-		"text-copy-dark": mode === "light",
-		"text-copy-light dark:text-copy-dark": mode === "system",
-		"text-copy-dark dark:text-copy-light": mode === "alt-system",
-		"px-4 py-3":
-			!compact &&
-			(cellWrapper === CELL_WRAPPER_HEAD ||
-				cellWrapper === CELL_WRAPPER_FOOTER),
-		"p-4": !compact && cellWrapper === CELL_WRAPPER_BODY,
-		"px-2 py-1.5": compact,
-	});
+	return clsx(
+		{
+			"text-copy-light": mode === "dark",
+			"text-copy-dark": mode === "light",
+			"text-copy-light dark:text-copy-dark": mode === "system",
+			"text-copy-dark dark:text-copy-light": mode === "alt-system",
+			"px-4 py-3":
+				!compact &&
+				(cellWrapper === CELL_WRAPPER_HEAD ||
+					cellWrapper === CELL_WRAPPER_FOOTER),
+			"p-4": !compact && cellWrapper === CELL_WRAPPER_BODY,
+			"px-2 py-1.5": compact,
+		},
+		className,
+	);
 };
 
 export const getTableCellSortButtonClasses = ({

diff --git a/packages/ui-table/tailwind.config.js b/packages/ui-table/tailwind.config.js
@@ -1,2 +1,2 @@
 import { commonTailwindConfigForComponent } from "../../configuration/tailwind.common";
-export default commonTailwindConfigForComponent();
+export default commonTailwindConfigForComponent("ui-table");
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml