Merge pull request #1349 from lumapps/chore/utilities-to-core

chore(lumx): move className utilities into lumx/core

Author: juanigalan91

CHANGELOG.md

@@ -11,8 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 -   `@lumx/core`
     -   Moved all non React related types and enums into the package
+    -   Moved `className` utilities into the package
 -   `@lumx/react`:
     -   Import types and constants from `@lumx/core` and re-export
+    -   Import `className` utilities from `@lumx/core`
 
 ## [3.19.0][] - 2025-11-07
 

packages/lumx-core/package.json

@@ -38,6 +38,7 @@
         "@rollup/plugin-commonjs": "^19.0.2",
         "@rollup/plugin-terser": "^0.4.4",
         "@rollup/plugin-typescript": "^12.1.4",
+        "@types/react": "^17.0.2",
         "autoprefixer": "^9.7.4",
         "glob": "^7.1.6",
         "postcss": "^8.5.6",

packages/lumx-react/src/utils/className/fontColorClass.test.ts renamed to packages/lumx-core/src/js/utils/className/fontColorClass.test.ts

@@ -1,4 +1,4 @@
-import { fontColorClass } from '@lumx/react/utils/className/fontColorClass';
+import { fontColorClass } from './fontColorClass';
 
 describe(fontColorClass, () => {
     it('should get lumx class for font color', () => {

packages/lumx-react/src/utils/className/fontColorClass.ts renamed to packages/lumx-core/src/js/utils/className/fontColorClass.ts

@@ -1,5 +1,5 @@
-import { ColorVariant, ColorWithVariants } from '@lumx/react';
-import { resolveColorWithVariants } from '@lumx/react/utils/className';
+import { ColorVariant, ColorWithVariants } from '../../constants';
+import { resolveColorWithVariants } from './resolveColorWithVariants';
 
 /**
  * Returns the classname associated to the given color and variant.

packages/lumx-react/src/utils/className/getBasicClass.test.ts renamed to packages/lumx-core/src/js/utils/className/getBasicClass.test.ts

@@ -1,4 +1,4 @@
-import { getBasicClass } from '@lumx/core/js/utils';
+import { getBasicClass } from './getBasicClass';
 
 describe(getBasicClass, () => {
     it('should return correct basic CSS class for different types and values', () => {

packages/lumx-core/src/js/utils/className/getBasicClass.ts

@@ -0,0 +1,36 @@
+import isBoolean from 'lodash/isBoolean';
+import kebabCase from 'lodash/kebabCase';
+
+/**
+ * Get the basic CSS class for the given type.
+ *
+ * @param  prefix The class name prefix for the generated CSS class.
+ * @param  type   The type of CSS class we want to generate (e.g.: 'color', 'variant', ...).
+ * @param  value  The value of the type of the CSS class (e.g.: 'primary', 'button', ...).
+ * @return The basic CSS class.
+ */
+export function getBasicClass({
+    prefix,
+    type,
+    value,
+}: {
+    prefix: string;
+    type: string;
+    value: string | number | boolean | undefined;
+}): string {
+    if (isBoolean(value)) {
+        if (!value) {
+            // False value should not return a class.
+            return '';
+        }
+        const booleanPrefixes = ['has', 'is'];
+
+        if (booleanPrefixes.some((booleanPrefix) => type.toString().startsWith(booleanPrefix))) {
+            return `${prefix}--${kebabCase(type)}`;
+        }
+
+        return `${prefix}--is-${kebabCase(type)}`;
+    }
+
+    return `${prefix}--${kebabCase(type)}-${value}`;
+}

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

@@ -1,4 +1,4 @@
-import { getRootClassName } from '@lumx/react/utils/className/getRootClassName';
+import { getRootClassName } from './getRootClassName';
 
 describe(getRootClassName, () => {
     it('should transform the component name into a lumx class', () => {

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

@@ -1,6 +1,7 @@
-import { CSS_PREFIX } from '@lumx/core/js/constants';
 import kebabCase from 'lodash/kebabCase';
 
+import { CSS_PREFIX } from '../../constants';
+
 // See https://regex101.com/r/YjS1uI/3
 const LAST_PART_CLASSNAME = /^(.*)-(.+)$/gi;
 

packages/lumx-react/src/utils/className/getTypographyClassName.test.ts renamed to packages/lumx-core/src/js/utils/className/getTypographyClassName.test.ts

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

packages/lumx-react/src/utils/className/getTypographyClassName.ts renamed to packages/lumx-core/src/js/utils/className/getTypographyClassName.ts

@@ -1,4 +1,4 @@
-import { Typography } from '@lumx/react';
+import { Typography } from '../../constants';
 
 /**
  * Returns the classname associated to the given typography.