feat: adding support for spacing prop for Flexgrid and ThemeProvider

packages/documentation/nodemon.json

@@ -7,6 +7,7 @@
 		"../ui-components/lib/**/*.*",
 		"../ui-styles/src/**/*.*",
 		"../ui-form/src/**/*.*",
-		"../ui-icons/src/**/*.*"
+		"../ui-icons/src/**/*.*",
+		"../ui-system/src/**/*.*"
 	]
 }

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

@@ -5,6 +5,7 @@ const dynamicMargins = () => {
 	];
 	const margins: string[] = [];
 	allowed.forEach((num) => {
+		margins.push(`m-${num}`);
 		margins.push(`mt-${num}`);
 		margins.push(`mr-${num}`);
 		margins.push(`mb-${num}`);

packages/ui-system/package.json

@@ -46,6 +46,7 @@
 		"react-dom": "18.2.0"
 	},
 	"dependencies": {
+		"@versini/ui-private": "workspace:../ui-private",
 		"clsx": "2.1.1",
 		"tailwindcss": "3.4.3"
 	},

packages/ui-system/src/components/Flexgrid/Flexgrid.tsx

@@ -1,5 +1,7 @@
 import clsx from "clsx";
 
+import { getSpacing } from "@versini/ui-private/dist/utilities";
+import React from "react";
 import { FLEXGRID_CLASSNAME, FLEXGRID_GAP_RATIO } from "../../common/constants";
 import { FlexgridContext } from "./FlexgridContext";
 import type { FlexgridProps } from "./FlexgridTypes";
@@ -16,6 +18,8 @@ export const Flexgrid = ({
 	alignHorizontal = "normal",
 	alignVertical = "normal",
 
+	spacing,
+
 	...otherProps
 }: FlexgridProps) => {
 	const cssRoot = {
@@ -34,19 +38,22 @@ export const Flexgrid = ({
 	};
 
 	const flexgridClassName = clsx(
-		className,
 		FLEXGRID_CLASSNAME,
+		className,
 		"box-border flex flex-wrap",
 	);
 
 	const context = { columnGap, rowGap };
+	const Component = spacing ? "div" : React.Fragment;
 
 	return (
-		<div className={flexgridClassName} style={cssRoot} {...otherProps}>
-			<FlexgridContext.Provider value={context}>
-				{children}
-			</FlexgridContext.Provider>
-		</div>
+		<Component {...(spacing ? { className: getSpacing(spacing) } : {})}>
+			<div className={flexgridClassName} style={cssRoot} {...otherProps}>
+				<FlexgridContext.Provider value={context}>
+					{children}
+				</FlexgridContext.Provider>
+			</div>
+		</Component>
 	);
 };
 

packages/ui-system/src/components/Flexgrid/FlexgridTypes.d.ts

@@ -1,3 +1,5 @@
+import type { SpacingProps } from "@versini/ui-private/dist/utilities";
+
 export type FlexgridProps = {
 	/**
 	 * Children of the Flexgrid (FlexgridItem(s) or any other nodes).
@@ -70,7 +72,7 @@ export type FlexgridProps = {
 	 * It follows the [CSS width property](https://developer.mozilla.org/en-US/docs/Web/CSS/width).
 	 */
 	width?: string;
-};
+} & SpacingProps;
 
 export type FlexgridItemProps = {
 	/** Children of the FlexgridItem. */

packages/ui-system/src/components/Flexgrid/__tests__/Flexgrid.test.tsx

@@ -101,4 +101,15 @@ describe("Flexgrid props", () => {
 		const gridRoot = await screen.findByTestId("grid-1");
 		expectToHaveStyles(gridRoot, { "align-items": "stretch" });
 	});
+
+	it("should respect the spacing prop", async () => {
+		render(
+			<Flexgrid alignVertical="stretch" data-testid="grid-1" spacing={20}>
+				hello
+			</Flexgrid>,
+		);
+		const gridRoot = await screen.findByTestId("grid-1");
+		expectToHaveStyles(gridRoot, { "align-items": "stretch" });
+		expect(gridRoot.parentElement).toHaveClass("m-20");
+	});
 });

packages/ui-system/src/components/ThemeProvider/ThemeProvider.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
-import { useEffect, useRef } from "react";
+import React, { useEffect, useRef } from "react";
 
+import { getSpacing } from "@versini/ui-private/dist/utilities";
 import { THEMEPROVIDER_CLASSNAME } from "../../common/constants";
 import { ThemeProviderProps } from "./ThemeProviderTypes";
 
@@ -9,9 +10,11 @@ export const ThemeProvider = ({
 	children,
 	global,
 	className,
+	spacing,
 }: ThemeProviderProps) => {
 	const wrapperRef = useRef<HTMLDivElement>(null);
 	const wrapperClass = clsx(THEMEPROVIDER_CLASSNAME, "contents", className);
+	const Component = spacing ? "div" : React.Fragment;
 
 	useEffect(() => {
 		const wrapper = global
@@ -26,10 +29,14 @@ export const ThemeProvider = ({
 	}, [customTheme, global]);
 
 	return customTheme || !global ? (
-		<div ref={wrapperRef} className={wrapperClass}>
-			{children}
-		</div>
+		<Component {...(spacing ? { className: getSpacing(spacing) } : {})}>
+			<div ref={wrapperRef} className={wrapperClass}>
+				{children}
+			</div>
+		</Component>
 	) : (
-		children
+		<Component {...(spacing ? { className: getSpacing(spacing) } : {})}>
+			{children}
+		</Component>
 	);
 };

packages/ui-system/src/components/ThemeProvider/ThemeProviderTypes.d.ts

@@ -1,3 +1,5 @@
+import type { SpacingProps } from "@versini/ui-private/dist/utilities";
+
 export type ThemeProviderProps = {
 	/**
 	 * The children to render.
@@ -24,4 +26,4 @@ export type ThemeProviderProps = {
 	 * @default false
 	 */
 	global?: boolean;
-};
+} & SpacingProps;

packages/ui-system/src/components/ThemeProvider/__tests__/ThemeProvider.test.tsx

@@ -23,6 +23,31 @@ describe("ThemeProvider props tests", () => {
 		const node = await screen.findByText("Hello World");
 		expectToHaveClasses(node, [THEMEPROVIDER_CLASSNAME, "contents", "toto"]);
 	});
+
+	it("should respect the spacing prop", async () => {
+		await act(async () => {
+			render(
+				<ThemeProvider className="toto" spacing={20}>
+					Hello World
+				</ThemeProvider>,
+			);
+		});
+		const node = await screen.findByText("Hello World");
+		expectToHaveClasses(node, [THEMEPROVIDER_CLASSNAME, "contents", "toto"]);
+		expect(node.parentElement).toHaveClass("m-20");
+	});
+
+	it("should respect the spacing prop even if global is true", async () => {
+		await act(async () => {
+			render(
+				<ThemeProvider className="toto" spacing={20} global>
+					Hello World
+				</ThemeProvider>,
+			);
+		});
+		const node = await screen.findByText("Hello World");
+		expect(node).toHaveClass("m-20");
+	});
 });
 
 describe("ThemeProvider injection tests", () => {