code review updates

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

@@ -4,34 +4,10 @@ import { useContext } from "react";
 import {
 	FLEXGRID_GAP_RATIO,
 	FLEXGRID_ITEM_CLASSNAME,
-	FLEXGRID_MAX_COLUMNS,
 } from "../../common/constants";
 import { FlexgridContext } from "./FlexgridContext";
 import type { FlexgridItemProps } from "./FlexgridTypes";
-
-function getBasis(span?: number | string) {
-	if (!span) {
-		return {
-			flexBasis: "auto",
-		};
-	}
-
-	if (span === "auto") {
-		return {
-			flexBasis: "auto",
-			flexGrow: 1,
-			maxWidth: "100%",
-		};
-	}
-
-	if (typeof span === "number") {
-		const basis = `${(span * 100) / FLEXGRID_MAX_COLUMNS}%`;
-		return {
-			flexBasis: `${basis}`,
-			maxWidth: `${basis}`,
-		};
-	}
-}
+import { getBasis } from "./utilities";
 
 /**
  * FlexgridItem is a child of Flexgrid. It is used to define the width of a
@@ -44,15 +20,12 @@ export const FlexgridItem = ({
 	span,
 	...otherProps
 }: FlexgridItemProps) => {
-	const context = useContext(FlexgridContext);
-	const flexBasis = getBasis(span);
-
+	const { columnGap, rowGap } = useContext(FlexgridContext);
 	const cssRoot = {
-		...flexBasis,
-		paddingLeft: context.columnGap * FLEXGRID_GAP_RATIO + "rem",
-		paddingTop: context.rowGap * FLEXGRID_GAP_RATIO + "rem",
+		...getBasis(span),
+		paddingLeft: columnGap * FLEXGRID_GAP_RATIO + "rem",
+		paddingTop: rowGap * FLEXGRID_GAP_RATIO + "rem",
 	};
-
 	const flexgridItemClassName = clsx(
 		className,
 		FLEXGRID_ITEM_CLASSNAME,

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

@@ -73,5 +73,5 @@ export type FlexgridItemProps = {
 	className?: string;
 
 	/** The item will span across the provided number of grid tracks. */
-	span?: number | string;
+	span?: number | "auto";
 };

packages/ui-components/src/components/Flexgrid/utilities.ts

@@ -1,59 +1,27 @@
-import clsx from "clsx";
+import { FLEXGRID_MAX_COLUMNS } from "../../common/constants";
 
-const tailwindDirectionMap: { [key: string]: string } = {
-	row: "row",
-	column: "col",
-	"row-reverse": "row-reverse",
-	"column-reverse": "col-reverse",
-};
+export const getBasis = (span?: number | "auto") => {
+	const flexBasis = "auto";
 
-const tailwindJustifyMap: { [key: string]: string } = {
-	"flex-start": "justify-start",
-	center: "justify-center",
-	"flex-end": "justify-end",
-	"space-between": "justify-between",
-	"space-around": "justify-around",
-	"space-evenly": "justify-evenly",
-};
+	if (!span) {
+		return {
+			flexBasis,
+		};
+	}
 
-const tailwindAlignMap: { [key: string]: string } = {
-	"flex-start": "items-start",
-	center: "items-center",
-	"flex-end": "items-end",
-	stretch: "items-stretch",
-	baseline: "items-baseline",
-};
+	if (span === "auto") {
+		return {
+			flexBasis,
+			flexGrow: 1,
+			maxWidth: "100%",
+		};
+	}
 
-export const getFlexgridClasses = ({
-	className,
-	columnGap,
-	rowGap,
-	direction,
-	alignHorizontal,
-	alignVertical,
-	height,
-	width,
-}: {
-	className?: string;
-	columnGap: number;
-	rowGap: number;
-	direction: string;
-	alignHorizontal: string;
-	alignVertical: string;
-	height: string;
-	width: string;
-}) => {
-	return clsx(
-		className,
-		"box-border flex flex-wrap",
-		`flex-${tailwindDirectionMap[direction]}`,
-		`${tailwindJustifyMap[alignHorizontal]}`,
-		`${tailwindAlignMap[alignVertical]}`,
-		{
-			[`h-[${height}]`]: height,
-			[`w-[${width}]`]: width,
-			[`gap-x-${columnGap}`]: columnGap,
-			[`gap-y-${rowGap}`]: rowGap,
-		},
-	);
+	if (typeof span === "number") {
+		const basis = `${(span * 100) / FLEXGRID_MAX_COLUMNS}%`;
+		return {
+			flexBasis: `${basis}`,
+			maxWidth: `${basis}`,
+		};
+	}
 };