From 0586551250cebf0486a8f3b8cdf51d3a139d978d Mon Sep 17 00:00:00 2001 From: Arno V Date: Sun, 29 Dec 2024 15:48:13 -0500 Subject: [PATCH] fix(System)!: removing spacing prop in favor of Tailwind classes (#836) --- .../src/plugins/tailwindcss/tailwindPlugin.ts | 1 + packages/ui-system/package.json | 9 ++----- .../src/components/Flexgrid/Flexgrid.tsx | 19 +++++--------- .../components/Flexgrid/FlexgridTypes.d.ts | 4 +-- .../Flexgrid/__tests__/Flexgrid.test.tsx | 8 +++--- .../ThemeProvider/ThemeProvider.tsx | 17 ++++--------- .../ThemeProvider/ThemeProviderTypes.d.ts | 4 +-- .../__tests__/ThemeProvider.test.tsx | 25 ------------------- pnpm-lock.yaml | 3 --- 9 files changed, 21 insertions(+), 69 deletions(-) diff --git a/packages/ui-styles/src/plugins/tailwindcss/tailwindPlugin.ts b/packages/ui-styles/src/plugins/tailwindcss/tailwindPlugin.ts index f6d29b92..d453b915 100644 --- 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-system", "ui-table", "ui-textarea", "ui-textinput", diff --git a/packages/ui-system/package.json b/packages/ui-system/package.json index 91c0ec1c..a12e104a 100644 --- a/packages/ui-system/package.json +++ b/packages/ui-system/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", @@ -38,12 +36,9 @@ "react-dom": "^18.3.1 || ^19.0.0" }, "dependencies": { - "@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-system/src/components/Flexgrid/Flexgrid.tsx b/packages/ui-system/src/components/Flexgrid/Flexgrid.tsx index 8d7d610e..5e1b02b9 100644 --- a/packages/ui-system/src/components/Flexgrid/Flexgrid.tsx +++ b/packages/ui-system/src/components/Flexgrid/Flexgrid.tsx @@ -1,7 +1,5 @@ import clsx from "clsx"; -import { getSpacing } from "@versini/ui-spacing"; -import React from "react"; import { FLEXGRID_CLASSNAME, FLEXGRID_GAP_RATIO } from "../../common/constants"; import { FlexgridContext } from "./FlexgridContext"; import type { FlexgridProps } from "./FlexgridTypes"; @@ -18,8 +16,6 @@ export const Flexgrid = ({ alignHorizontal = "normal", alignVertical = "normal", - spacing, - ...otherProps }: FlexgridProps) => { const cssRoot = { @@ -39,21 +35,18 @@ export const Flexgrid = ({ const flexgridClassName = clsx( FLEXGRID_CLASSNAME, - className, "box-border flex flex-wrap", + className, ); const context = { columnGap, rowGap }; - const Component = spacing ? "div" : React.Fragment; return ( - -
- - {children} - -
- +
+ + {children} + +
); }; diff --git a/packages/ui-system/src/components/Flexgrid/FlexgridTypes.d.ts b/packages/ui-system/src/components/Flexgrid/FlexgridTypes.d.ts index be590804..e08adadf 100644 --- a/packages/ui-system/src/components/Flexgrid/FlexgridTypes.d.ts +++ b/packages/ui-system/src/components/Flexgrid/FlexgridTypes.d.ts @@ -1,5 +1,3 @@ -import type { SpacingTypes } from "@versini/ui-types"; - export type FlexgridProps = { /** * Children of the Flexgrid (FlexgridItem(s) or any other nodes). @@ -72,7 +70,7 @@ export type FlexgridProps = { * It follows the [CSS width property](https://developer.mozilla.org/en-US/docs/Web/CSS/width). */ width?: string; -} & SpacingTypes.Props; +}; export type FlexgridItemProps = { /** Children of the FlexgridItem. */ diff --git a/packages/ui-system/src/components/Flexgrid/__tests__/Flexgrid.test.tsx b/packages/ui-system/src/components/Flexgrid/__tests__/Flexgrid.test.tsx index 1afa7b46..5fee6a72 100644 --- a/packages/ui-system/src/components/Flexgrid/__tests__/Flexgrid.test.tsx +++ b/packages/ui-system/src/components/Flexgrid/__tests__/Flexgrid.test.tsx @@ -102,14 +102,16 @@ describe("Flexgrid props", () => { expectToHaveStyles(gridRoot, { "align-items": "stretch" }); }); - it("should respect the spacing prop", async () => { + it("should respect the spacing via className", async () => { render( - + hello , ); const gridRoot = await screen.findByTestId("grid-1"); expectToHaveStyles(gridRoot, { "align-items": "stretch" }); - expect(gridRoot.parentElement).toHaveClass("m-20"); + // not only it should be there, but it should be the last entry + expect(gridRoot).toHaveClass("mr-2"); + expect(gridRoot.className.slice(-4)).toBe("mr-2"); }); }); diff --git a/packages/ui-system/src/components/ThemeProvider/ThemeProvider.tsx b/packages/ui-system/src/components/ThemeProvider/ThemeProvider.tsx index c5a937b6..d67de344 100644 --- a/packages/ui-system/src/components/ThemeProvider/ThemeProvider.tsx +++ b/packages/ui-system/src/components/ThemeProvider/ThemeProvider.tsx @@ -1,7 +1,6 @@ import clsx from "clsx"; -import React, { useEffect, useRef } from "react"; +import { useEffect, useRef } from "react"; -import { getSpacing } from "@versini/ui-spacing"; import { THEMEPROVIDER_CLASSNAME } from "../../common/constants"; import { ThemeProviderProps } from "./ThemeProviderTypes"; @@ -10,11 +9,9 @@ export const ThemeProvider = ({ children, global, className, - spacing, }: ThemeProviderProps) => { const wrapperRef = useRef(null); const wrapperClass = clsx(THEMEPROVIDER_CLASSNAME, "contents", className); - const Component = spacing ? "div" : React.Fragment; useEffect(() => { const wrapper = global @@ -29,14 +26,10 @@ export const ThemeProvider = ({ }, [customTheme, global]); return customTheme || !global ? ( - -
- {children} -
- - ) : ( - +
{children} - +
+ ) : ( + <>{children} ); }; diff --git a/packages/ui-system/src/components/ThemeProvider/ThemeProviderTypes.d.ts b/packages/ui-system/src/components/ThemeProvider/ThemeProviderTypes.d.ts index e6756640..e1d16142 100644 --- a/packages/ui-system/src/components/ThemeProvider/ThemeProviderTypes.d.ts +++ b/packages/ui-system/src/components/ThemeProvider/ThemeProviderTypes.d.ts @@ -1,5 +1,3 @@ -import type { SpacingTypes } from "@versini/ui-types"; - export type ThemeProviderProps = { /** * The children to render. @@ -26,4 +24,4 @@ export type ThemeProviderProps = { * @default false */ global?: boolean; -} & SpacingTypes.Props; +}; diff --git a/packages/ui-system/src/components/ThemeProvider/__tests__/ThemeProvider.test.tsx b/packages/ui-system/src/components/ThemeProvider/__tests__/ThemeProvider.test.tsx index d4fe592a..3f4424be 100644 --- a/packages/ui-system/src/components/ThemeProvider/__tests__/ThemeProvider.test.tsx +++ b/packages/ui-system/src/components/ThemeProvider/__tests__/ThemeProvider.test.tsx @@ -23,31 +23,6 @@ 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( - - Hello World - , - ); - }); - 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( - - Hello World - , - ); - }); - const node = await screen.findByText("Hello World"); - expect(node).toHaveClass("m-20"); - }); }); describe("ThemeProvider injection tests", () => { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 19d4c7dd..2e887f4e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -771,9 +771,6 @@ importers: packages/ui-system: dependencies: - '@versini/ui-spacing': - specifier: workspace:../ui-spacing - version: link:../ui-spacing '@versini/ui-types': specifier: workspace:../ui-types version: link:../ui-types