fix(Card)!: removing spacing prop in favor of Tailwind classes

packages/ui-card/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",
@@ -40,12 +38,9 @@
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.15",
 		"@versini/ui-hooks": "workspace:../ui-hooks",
-		"@versini/ui-spacing": "workspace:../ui-spacing",
 		"@versini/ui-types": "workspace:../ui-types",
 		"clsx": "2.1.1",
 		"tailwindcss": "3.4.17"
 	},
-	"sideEffects": [
-		"**/*.css"
-	]
+	"sideEffects": ["**/*.css"]
 }

packages/ui-card/src/components/Card/Card.tsx

@@ -37,7 +37,6 @@ export const Card = ({
 	className,
 	bodyClassName,
 	"aria-labelledby": ariaLabelledby,
-	spacing,
 	mode = "system",
 	compact = false,
 	noBorder = false,
@@ -55,7 +54,6 @@ export const Card = ({
 		headerClassName,
 		bodyClassName,
 		footerClassName,
-		spacing,
 		mode,
 		compact,
 		noBorder,

packages/ui-card/src/components/Card/__tests__/Card.test.tsx

@@ -12,6 +12,16 @@ describe("Card (exceptions)", () => {
 	});
 });
 
+describe("Card spacing", () => {
+	it("should render a button with a right margin spacing", async () => {
+		const { container } = render(<Card className="mr-2">{cardContent}</Card>);
+		const card = container.children[0];
+		// not only it should be there, but it should be the last entry
+		expect(card?.className).toContain("mr-2");
+		expect(card?.className.slice(-4)).toBe("mr-2");
+	});
+});
+
 describe("Card modifiers", () => {
 	it("should render a dark or light (system) card", async () => {
 		const { container } = render(<Card>{cardContent}</Card>);

packages/ui-card/src/components/Card/utilities.ts

@@ -1,5 +1,3 @@
-import { getSpacing } from "@versini/ui-spacing";
-import type { SpacingTypes } from "@versini/ui-types";
 import clsx from "clsx";
 
 import { CARD_CLASSNAME } from "../../common/constants";
@@ -12,23 +10,21 @@ type getCardClassesProps = {
 	headerClassName?: string;
 	mode?: "dark" | "light" | "system" | "alt-system" | "darker";
 	noBorder?: boolean;
-} & SpacingTypes.Props;
+};
 
 export const getCardClasses = ({
 	className,
 	headerClassName,
 	bodyClassName,
 	footerClassName,
-	spacing,
+
 	mode,
 	compact,
 	noBorder,
 }: getCardClassesProps) => {
 	const wrapper = clsx(
 		CARD_CLASSNAME,
-		className,
 		"rounded-md",
-		getSpacing(spacing),
 		{
 			"border-none": noBorder,
 			"border-2": !noBorder,
@@ -44,6 +40,7 @@ export const getCardClasses = ({
 			"border-border-accent bg-surface-dark text-copy-light dark:border-border-dark dark:bg-surface-lighter dark:text-copy-dark":
 				mode === "alt-system",
 		},
+		className,
 	);
 	const header = headerClassName
 		? headerClassName

packages/ui-card/tailwind.config.js

@@ -1,2 +1,2 @@
 import { commonTailwindConfigForComponent } from "../../configuration/tailwind.common";
-export default commonTailwindConfigForComponent();
+export default commonTailwindConfigForComponent("ui-card");

packages/ui-styles/src/plugins/tailwindcss/tailwindPlugin.ts

@@ -81,7 +81,12 @@ const customPlugins = [
  * anymore. They are using the new TailwindCSS classes, and therefore
  * don't need to be added to the safelist.
  */
-const componentsWithNoSpacingProp = ["ui-button", "ui-truncate", "ui-bubble"];
+const componentsWithNoSpacingProp = [
+	"ui-button",
+	"ui-truncate",
+	"ui-bubble",
+	"ui-card",
+];
 
 /**
  * The plugin "merge" function is used to merge the custom configuration with

packages/ui-types/src/card.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import type { SpacingTypes } from "./spacing";
 
 declare namespace CardTypes {
 	export type Props = {
@@ -49,7 +48,7 @@ declare namespace CardTypes {
 		 * @default false
 		 */
 		noBorder?: boolean;
-	} & SpacingTypes.Props;
+	};
 
 	export type HeaderProps = {
 		className: string;