fix(Main)!: removing spacing prop in favor of Tailwind classes (#825)

packages/ui-main/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",
@@ -39,11 +37,8 @@
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.15",
-		"@versini/ui-spacing": "workspace:../ui-spacing",
 		"@versini/ui-types": "workspace:../ui-types",
 		"tailwindcss": "3.4.17"
 	},
-	"sideEffects": [
-		"**/*.css"
-	]
+	"sideEffects": ["**/*.css"]
 }

packages/ui-main/src/components/Main/Main.tsx

@@ -1,18 +1,16 @@
-import { getSpacing } from "@versini/ui-spacing";
 import clsx from "clsx";
 
 import { MAIN_CLASSNAME } from "../../common/constants";
 import type { MainProps } from "./MainTypes";
 
-export const Main = ({
-	children,
-	className,
-	raw = false,
-	spacing,
-}: MainProps) => {
-	const mainClass = clsx(className, MAIN_CLASSNAME, getSpacing(spacing), {
-		"mt-2 flex w-full flex-col p-2 sm:mt-3 md:mx-auto md:max-w-4xl": !raw,
-	});
+export const Main = ({ children, className, raw = false }: MainProps) => {
+	const mainClass = clsx(
+		MAIN_CLASSNAME,
+		{
+			"mt-2 flex w-full flex-col p-2 sm:mt-3 md:mx-auto md:max-w-4xl": !raw,
+		},
+		className,
+	);
 
 	return <main className={mainClass}>{children}</main>;
 };

packages/ui-main/src/components/Main/MainTypes.d.ts

@@ -1,5 +1,3 @@
-import type { SpacingTypes } from "@versini/ui-types";
-
 export type MainProps = {
 	/**
 	 * The children to render.
@@ -14,4 +12,4 @@ export type MainProps = {
 	 * @default false
 	 */
 	raw?: boolean;
-} & SpacingTypes.Props;
+};

packages/ui-main/src/components/Main/__tests__/Main.test.tsx

@@ -9,6 +9,16 @@ describe("Main (exceptions)", () => {
 	});
 });
 
+describe("Main spacing", () => {
+	it("should render a button with a right margin spacing", async () => {
+		render(<Main className="mr-2">hello</Main>);
+		const main = await screen.findByRole("main");
+		// not only it should be there, but it should be the last entry
+		expect(main.className).toContain("mr-2");
+		expect(main.className.slice(-4)).toBe("mr-2");
+	});
+});
+
 describe("Main modifiers", () => {
 	it("should render a responsive main tag", async () => {
 		render(<Main>hello</Main>);

packages/ui-main/tailwind.config.js

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

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

@@ -82,12 +82,14 @@ const customPlugins = [
  * don't need to be added to the safelist.
  */
 const componentsWithNoSpacingProp = [
-	"ui-button",
-	"ui-truncate",
 	"ui-bubble",
+	"ui-button",
 	"ui-card",
 	"ui-footer",
 	"ui-header",
+	"ui-main",
+	"ui-svgicon",
+	"ui-truncate",
 ];
 
 /**