refactor(utils): split className utils in modules

Author: gcornut

packages/lumx-react/src/utils/className/getBasicClass.test.ts

@@ -0,0 +1,20 @@
+import { getBasicClass } from '@lumx/core/js/utils';
+
+describe(getBasicClass, () => {
+    it('should return correct basic CSS class for different types and values', () => {
+        // Test cases with different inputs
+        expect(getBasicClass({ prefix: 'test', type: 'color', value: 'primary' })).toBe('test--color-primary');
+        expect(getBasicClass({ prefix: 'test', type: 'variant', value: 'button' })).toBe('test--variant-button');
+        expect(getBasicClass({ prefix: 'test', type: 'isDark', value: true })).toBe('test--is-dark');
+        expect(getBasicClass({ prefix: 'test', type: 'dark', value: true })).toBe('test--is-dark');
+        expect(getBasicClass({ prefix: 'test', type: 'hasDark', value: true })).toBe('test--has-dark');
+        expect(getBasicClass({ prefix: 'test', type: 'isActive', value: false })).toBe('');
+
+        // Additional tests for boolean types
+        expect(getBasicClass({ prefix: 'test', type: 'hasBorder', value: true })).toBe('test--has-border');
+        expect(getBasicClass({ prefix: 'test', type: 'isVisible', value: false })).toBe('');
+
+        // Tests for undefined
+        expect(getBasicClass({ prefix: 'test', type: 'variant', value: undefined })).toBe('test--variant-undefined');
+    });
+});

packages/lumx-react/src/utils/className/getFontColorClassName.test.ts

@@ -0,0 +1,11 @@
+import { getFontColorClassName } from '@lumx/react/utils/className/getFontColorClassName';
+
+describe(getFontColorClassName, () => {
+    it('should get lumx class for font color', () => {
+        expect(getFontColorClassName('dark')).toBe('lumx-color-font-dark-N');
+    });
+
+    it('should get lumx class for font color with variant', () => {
+        expect(getFontColorClassName('red', 'L2')).toBe('lumx-color-font-red-L2');
+    });
+});

packages/lumx-react/src/utils/className/getFontColorClassName.ts

@@ -0,0 +1,9 @@
+import { ColorPalette, ColorVariant } from '@lumx/react';
+
+/**
+ * Returns the classname associated to the given color and variant.
+ * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-l2`
+ */
+export const getFontColorClassName = (color: ColorPalette, colorVariant: ColorVariant = ColorVariant.N) => {
+    return `lumx-color-font-${color}-${colorVariant}`;
+};

packages/lumx-react/src/utils/className/getRootClassName.test.ts

@@ -0,0 +1,11 @@
+import { getRootClassName } from '@lumx/react/utils/className/getRootClassName';
+
+describe(getRootClassName, () => {
+    it('should transform the component name into a lumx class', () => {
+        expect(getRootClassName('Table')).toBe('lumx-table');
+    });
+
+    it('should transform the sub component name into a lumx class', () => {
+        expect(getRootClassName('TableBody', true)).toBe('lumx-table__body');
+    });
+});

packages/lumx-react/src/utils/className.ts renamed to packages/lumx-react/src/utils/className/getRootClassName.ts

@@ -1,13 +1,9 @@
-import { CSS_PREFIX } from '@lumx/react/constants';
-
+import { CSS_PREFIX } from '@lumx/core/js/constants';
 import kebabCase from 'lodash/kebabCase';
-import { ColorPalette, ColorVariant, Typography } from '@lumx/react/components';
 
 // See https://regex101.com/r/YjS1uI/3
 const LAST_PART_CLASSNAME = /^(.*)-(.+)$/gi;
 
-export { getBasicClass, handleBasicClasses } from '@lumx/core/js/utils';
-
 /**
  * Get the name of the root CSS class of a component based on its name.
  *
@@ -26,19 +22,3 @@ export function getRootClassName(componentName: string, subComponent?: boolean):
     }
     return formattedClassName;
 }
-
-/**
- * Returns the classname associated to the given color and variant.
- * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-l2`
- */
-export const getFontColorClassName = (color: ColorPalette, colorVariant: ColorVariant = ColorVariant.N) => {
-    return `lumx-color-font-${color}-${colorVariant}`;
-};
-
-/**
- * Returns the classname associated to the given typography.
- * For example, for `Typography.title` it returns `lumx-typography-title`
- */
-export const getTypographyClassName = (typography: Typography) => {
-    return `lumx-typography-${typography}`;
-};

packages/lumx-react/src/utils/className/getTypographyClassName.test.ts

@@ -0,0 +1,7 @@
+import { getTypographyClassName } from '@lumx/react/utils/className/getTypographyClassName';
+
+describe(getTypographyClassName, () => {
+    it('should generate lumx typography class', () => {
+        expect(getTypographyClassName('title')).toBe('lumx-typography-title');
+    });
+});

packages/lumx-react/src/utils/className/getTypographyClassName.ts

@@ -0,0 +1,9 @@
+import { Typography } from '@lumx/react';
+
+/**
+ * Returns the classname associated to the given typography.
+ * For example, for `Typography.title` it returns `lumx-typography-title`
+ */
+export const getTypographyClassName = (typography: Typography) => {
+    return `lumx-typography-${typography}`;
+};

packages/lumx-react/src/utils/className/handleBasicClasses.test.ts

@@ -0,0 +1,28 @@
+import { handleBasicClasses } from '@lumx/core/js/utils';
+
+describe(handleBasicClasses, () => {
+    it('should return correct combined CSS classes based on props', () => {
+        const className = handleBasicClasses({
+            prefix: 'test',
+            // Undefined
+            undefined,
+            // Null
+            null: null,
+            // Empty string
+            emptyString: '',
+            // Empty array
+            emptyArray: [],
+            // Empty object
+            emptyObject: {},
+            // String
+            color: 'red',
+            // False property
+            isDisabled: false,
+            // Boolean without a prefix (is or has)
+            visible: true,
+            // Has prefix
+            hasButton: true,
+        });
+        expect(className).toBe('test test--color-red test--is-visible test--has-button');
+    });
+});

packages/lumx-react/src/utils/className/index.ts

@@ -0,0 +1,4 @@
+export { getBasicClass, handleBasicClasses } from '@lumx/core/js/utils';
+export { getRootClassName } from './getRootClassName';
+export { getTypographyClassName } from './getTypographyClassName';
+export { getFontColorClassName } from './getFontColorClassName';