feat: moving private components to ui-private

.release-please-manifest.json

@@ -2,5 +2,6 @@
 	"packages/eslint-plugin-client": "1.0.1",
 	"packages/ui-components": "5.1.0",
 	"packages/ui-hooks": "2.2.0",
-	"packages/ui-system": "1.0.0"
+	"packages/ui-system": "1.0.0",
+	"packages/ui-private": "0.0.0"
 }

packages/ui-components/lib/buildIcons.js

@@ -38,7 +38,8 @@ const iconTemplate = ({
  *
  */
 
-import { SvgIcon } from "../private/SvgIcon/SvgIcon";
+import { SvgIcon } from "@versini/ui-private";
+
 import type { IconsProps } from "./IconsTypes";
 
 export const ${name} = ({

packages/ui-components/package.json

@@ -39,20 +39,17 @@
 		"test": "vitest run"
 	},
 	"peerDependencies": {
+		"@floating-ui/react": "0.26.9",
+		"fast-equals": "5.0.1",
+		"micro-memoize": "4.1.2",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},
-	"devDependencies": {
-		"react": "18.2.0",
-		"react-dom": "18.2.0"
-	},
 	"dependencies": {
-		"@floating-ui/react": "0.26.9",
 		"@tailwindcss/typography": "0.5.10",
 		"@versini/ui-hooks": ">=2.1.1",
+		"@versini/ui-private": "workspace:../ui-private",
 		"clsx": "2.1.0",
-		"fast-equals": "5.0.1",
-		"micro-memoize": "4.1.2",
 		"tailwindcss": "3.4.1"
 	},
 	"sideEffects": [

packages/ui-components/src/common/__tests__/utilities.test.tsx

@@ -1,26 +1,8 @@
 import { describe, expect, it } from "vitest";
 
-import { getSpacing, isEmpty, truncate } from "../utilities";
+import { isEmpty, truncate } from "../utilities";
 
 describe("Non-DOM tests", () => {
-	describe("getSpacing", () => {
-		it("should return the correct spacing class", () => {
-			expect(getSpacing(123)).toBe("m-123");
-			expect(getSpacing("123")).toBe("m-123");
-
-			expect(getSpacing({ t: 123 })).toBe("mt-123");
-			expect(getSpacing({ r: 123 })).toBe("mr-123");
-			expect(getSpacing({ b: 123 })).toBe("mb-123");
-			expect(getSpacing({ l: 123 })).toBe("ml-123");
-			expect(getSpacing({ t: 123, r: 456 })).toBe("mt-123 mr-456");
-			expect(getSpacing({ t: 123, b: 456 })).toBe("mt-123 mb-456");
-			expect(getSpacing({ t: 123, l: 456 })).toBe("mt-123 ml-456");
-			expect(getSpacing({ r: 123, b: 456 })).toBe("mr-123 mb-456");
-			expect(getSpacing({ r: 123, l: 456 })).toBe("mr-123 ml-456");
-			expect(getSpacing({ b: 123, l: 456 })).toBe("mb-123 ml-456");
-		});
-	});
-
 	describe("truncate", () => {
 		it("should truncate according to plan", () => {
 			const STR = "hello world";

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

@@ -1,26 +1,10 @@
-import { deepEqual } from "fast-equals";
-import memoize from "micro-memoize";
-
-import type { SpacingType } from ".";
-
 const hasOwnProperty = Object.prototype.hasOwnProperty;
 const toString = Object.prototype.toString;
 const objectProto = Object.prototype;
 
 export const isProd = process.env.NODE_ENV === "production";
 export const isDev = !isProd;
 
-/**
- * Memoize function calls with arguments that are
- * complex objects (hence "deep"). Do not use for
- * standard types.
- * @param {Function} fct - the function to optimize.
- * @returns the optimized function.
- */
-export function memoizeDeep(fct: any) {
-	return memoize(fct, { isEqual: deepEqual });
-}
-
 /**
  * Checks if `value` is a valid array-like length.
  */
@@ -93,52 +77,3 @@ export const truncate = (fullString: string, maxLength: number) => {
 		fullString,
 	};
 };
-
-/**
- * This method returns a string that can be used as a tailwind class relying
- * on margins definitions (m, mt, mb, etc.).
- * Please refer to: https://tailwindcss.com/docs/margin
- *
- * It accepts a number, a string or an object.
- * If a number is passed, it will be converted to a string and prefixed with "m-".
- * If a string is passed, it will be prefixed with "m-".
- * If an object is passed, it will be converted to a string like this:
- * { t: 4, r: 1, b: 3, l: 5} => "mt-4 mr-1 mb-3 ml-5"
- *
- */
-export const getSpacing = memoizeDeep((spacing: SpacingType): string => {
-	let spacingClass = "";
-	/**
-	 * In this case, spacing is a number or a string. For example:
-	 * spacing = 4
-	 * which will be converted to:
-	 * "m-4"
-	 */
-	if (typeof spacing === "number" || typeof spacing === "string") {
-		spacingClass = "m-" + spacing;
-	} else {
-		/**
-		 * in this case spacing is an object like this:
-		 * spacing = { t: 4, r: 1, b: 3, l: 5}
-		 * All keys are optional.
-		 * The following lines will transform this object into a string like this:
-		 * "mt-4 mr-1 mb-3 ml-5"
-		 */
-		const classes = [];
-		if (spacing?.t !== undefined) {
-			classes.push(`mt-${spacing.t}`);
-		}
-		if (spacing?.r !== undefined) {
-			classes.push(`mr-${spacing.r}`);
-		}
-		if (spacing?.b !== undefined) {
-			classes.push(`mb-${spacing.b}`);
-		}
-		if (spacing?.l !== undefined) {
-			classes.push(`ml-${spacing.l}`);
-		}
-		spacingClass = classes.join(" ");
-	}
-
-	return spacingClass;
-});

packages/ui-components/src/components/Bubble/BubbleTypes.d.ts

@@ -1,4 +1,4 @@
-import type { SpacingProps } from "../../common";
+import type { SpacingProps } from "@versini/ui-private/dist/utilities";
 
 export type BubbleProps = {
 	/**

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

@@ -1,8 +1,8 @@
+import type { SpacingProps } from "@versini/ui-private/dist/utilities";
+import { getSpacing } from "@versini/ui-private/dist/utilities";
 import clsx from "clsx";
 
-import type { SpacingProps } from "../../common";
 import { BUBBLE_CLASSNAME } from "../../common/constants";
-import { getSpacing } from "../../common/utilities";
 
 const getBubbleSizesClasses = () => {
 	return "p-4 sm:max-w-md md:max-w-2xl";

packages/ui-components/src/components/Button/ButtonTypes.d.ts

@@ -1,4 +1,4 @@
-import type { SpacingProps } from "../../common";
+import type { SpacingProps } from "@versini/ui-private/dist/utilities";
 
 export type CommonButtonProps = {
 	/**

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

@@ -1,8 +1,8 @@
+import type { SpacingProps } from "@versini/ui-private/dist/utilities";
+import { getSpacing } from "@versini/ui-private/dist/utilities";
 import clsx from "clsx";
 
-import type { SpacingProps } from "../../common";
 import { BUTTON_CLASSNAME } from "../../common/constants";
-import { getSpacing } from "../../common/utilities";
 
 export const TYPE_ICON = "icon";
 export const TYPE_BUTTON = "button";

packages/ui-components/src/components/Card/CardTypes.d.ts

@@ -1,4 +1,4 @@
-import type { SpacingProps } from "../../common";
+import type { SpacingProps } from "@versini/ui-private/dist/utilities";
 
 export type CardProps = {
 	/**

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

@@ -1,8 +1,8 @@
+import type { SpacingProps } from "@versini/ui-private/dist/utilities";
+import { getSpacing } from "@versini/ui-private/dist/utilities";
 import clsx from "clsx";
 
-import type { SpacingProps } from "../../common";
 import { CARD_CLASSNAME } from "../../common/constants";
-import { getSpacing } from "../../common/utilities";
 
 type getCardClassesProps = {
 	className?: string;

packages/ui-components/src/components/Footer/Footer.tsx

@@ -1,7 +1,7 @@
+import { getSpacing } from "@versini/ui-private/dist/utilities";
 import clsx from "clsx";
 
 import { FOOTER_CLASSNAME } from "../../common/constants";
-import { getSpacing } from "../../common/utilities";
 import type { FooterProps } from "./FooterTypes";
 
 export const Footer = ({

packages/ui-components/src/components/Footer/FooterTypes.d.ts

@@ -1,4 +1,4 @@
-import type { SpacingProps } from "../../common";
+import type { SpacingProps } from "@versini/ui-private/dist/utilities";
 
 export type FooterProps = {
 	/**

packages/ui-components/src/components/Header/Header.tsx

@@ -1,7 +1,7 @@
+import { getSpacing } from "@versini/ui-private/dist/utilities";
 import clsx from "clsx";
 
 import { HEADER_CLASSNAME } from "../../common/constants";
-import { getSpacing } from "../../common/utilities";
 import { HeaderProps } from "./HeaderTypes";
 
 export const Header = ({

packages/ui-components/src/components/Header/HeaderTypes.d.ts

@@ -1,4 +1,4 @@
-import type { SpacingProps } from "../../common";
+import type { SpacingProps } from "@versini/ui-private/dist/utilities";
 
 export type HeaderProps = {
 	/**

packages/ui-components/src/components/Icons/IconBack.tsx

@@ -10,7 +10,8 @@
  *
  */
 
-import { SvgIcon } from "../private/SvgIcon/SvgIcon";
+import { SvgIcon } from "@versini/ui-private";
+
 import type { IconsProps } from "./IconsTypes";
 
 export const IconBack = ({

packages/ui-components/src/components/Icons/IconChart.tsx

@@ -10,7 +10,8 @@
  *
  */
 
-import { SvgIcon } from "../private/SvgIcon/SvgIcon";
+import { SvgIcon } from "@versini/ui-private";
+
 import type { IconsProps } from "./IconsTypes";
 
 export const IconChart = ({

packages/ui-components/src/components/Icons/IconClose.tsx

@@ -10,7 +10,8 @@
  *
  */
 
-import { SvgIcon } from "../private/SvgIcon/SvgIcon";
+import { SvgIcon } from "@versini/ui-private";
+
 import type { IconsProps } from "./IconsTypes";
 
 export const IconClose = ({

packages/ui-components/src/components/Icons/IconCopied.tsx

@@ -10,7 +10,8 @@
  *
  */
 
-import { SvgIcon } from "../private/SvgIcon/SvgIcon";
+import { SvgIcon } from "@versini/ui-private";
+
 import type { IconsProps } from "./IconsTypes";
 
 export const IconCopied = ({

packages/ui-components/src/components/Icons/IconCopy.tsx

@@ -10,7 +10,8 @@
  *
  */
 
-import { SvgIcon } from "../private/SvgIcon/SvgIcon";
+import { SvgIcon } from "@versini/ui-private";
+
 import type { IconsProps } from "./IconsTypes";
 
 export const IconCopy = ({

packages/ui-components/src/components/Icons/IconDelete.tsx

@@ -10,7 +10,8 @@
  *
  */
 
-import { SvgIcon } from "../private/SvgIcon/SvgIcon";
+import { SvgIcon } from "@versini/ui-private";
+
 import type { IconsProps } from "./IconsTypes";
 
 export const IconDelete = ({

packages/ui-components/src/components/Icons/IconDog.tsx

@@ -1,4 +1,5 @@
-import { SvgIcon } from "../private/SvgIcon/SvgIcon";
+import { SvgIcon } from "@versini/ui-private";
+
 import type { IconsProps } from "./IconsTypes";
 
 export const IconDog = ({

packages/ui-components/src/components/Icons/IconEdit.tsx

@@ -10,7 +10,8 @@
  *
  */
 
-import { SvgIcon } from "../private/SvgIcon/SvgIcon";
+import { SvgIcon } from "@versini/ui-private";
+
 import type { IconsProps } from "./IconsTypes";
 
 export const IconEdit = ({

packages/ui-components/src/components/Icons/IconGitHub.tsx

@@ -10,7 +10,8 @@
  *
  */
 
-import { SvgIcon } from "../private/SvgIcon/SvgIcon";
+import { SvgIcon } from "@versini/ui-private";
+
 import type { IconsProps } from "./IconsTypes";
 
 export const IconGitHub = ({

packages/ui-components/src/components/Icons/IconHide.tsx

@@ -10,7 +10,8 @@
  *
  */
 
-import { SvgIcon } from "../private/SvgIcon/SvgIcon";
+import { SvgIcon } from "@versini/ui-private";
+
 import type { IconsProps } from "./IconsTypes";
 
 export const IconHide = ({

packages/ui-components/src/components/Icons/IconHistory.tsx

@@ -10,7 +10,8 @@
  *
  */
 
-import { SvgIcon } from "../private/SvgIcon/SvgIcon";
+import { SvgIcon } from "@versini/ui-private";
+
 import type { IconsProps } from "./IconsTypes";
 
 export const IconHistory = ({

packages/ui-components/src/components/Icons/IconInfo.tsx

@@ -10,7 +10,8 @@
  *
  */
 
-import { SvgIcon } from "../private/SvgIcon/SvgIcon";
+import { SvgIcon } from "@versini/ui-private";
+
 import type { IconsProps } from "./IconsTypes";
 
 export const IconInfo = ({

packages/ui-components/src/components/Icons/IconNext.tsx

@@ -10,7 +10,8 @@
  *
  */
 
-import { SvgIcon } from "../private/SvgIcon/SvgIcon";
+import { SvgIcon } from "@versini/ui-private";
+
 import type { IconsProps } from "./IconsTypes";
 
 export const IconNext = ({

packages/ui-components/src/components/Icons/IconPrevious.tsx

@@ -10,7 +10,8 @@
  *
  */
 
-import { SvgIcon } from "../private/SvgIcon/SvgIcon";
+import { SvgIcon } from "@versini/ui-private";
+
 import type { IconsProps } from "./IconsTypes";
 
 export const IconPrevious = ({

packages/ui-components/src/components/Icons/IconProfile.tsx

@@ -10,7 +10,8 @@
  *
  */
 
-import { SvgIcon } from "../private/SvgIcon/SvgIcon";
+import { SvgIcon } from "@versini/ui-private";
+
 import type { IconsProps } from "./IconsTypes";
 
 export const IconProfile = ({

packages/ui-components/src/components/Icons/IconRestore.tsx

@@ -10,7 +10,8 @@
  *
  */
 
-import { SvgIcon } from "../private/SvgIcon/SvgIcon";
+import { SvgIcon } from "@versini/ui-private";
+
 import type { IconsProps } from "./IconsTypes";
 
 export const IconRestore = ({

packages/ui-components/src/components/Icons/IconSettings.tsx

@@ -10,7 +10,8 @@
  *
  */
 
-import { SvgIcon } from "../private/SvgIcon/SvgIcon";
+import { SvgIcon } from "@versini/ui-private";
+
 import type { IconsProps } from "./IconsTypes";
 
 export const IconSettings = ({