@lumx/core 3.20.1-alpha.27 → 3.20.1-alpha.28

package/js/utils/className/getBasicClass.js

@@ -1,4 +1,4 @@
-import kebabCase from 'lodash/kebabCase';
+import { kebabCase } from '../string/kebabCase.js';
 
 /**
  * Get the basic CSS class for the given type.

package/js/utils/className/getBasicClass.test.js

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

package/js/utils/className/getBasicClass.ts

@@ -1,4 +1,4 @@
-import kebabCase from 'lodash/kebabCase';
+import { kebabCase } from '../string/kebabCase';
 
 /**
  * Get the basic CSS class for the given type.

package/js/utils/className/getRootClassName.js

@@ -1,5 +1,5 @@
-import kebabCase from 'lodash/kebabCase';
 import { CSS_PREFIX } from '../../constants/index.js';
+import { kebabCase } from '../string/kebabCase.js';
 import '../../constants/keycodes.js';
 
 // See https://regex101.com/r/YjS1uI/3

package/js/utils/className/getRootClassName.test.js

@@ -1,7 +1,7 @@
 import { getRootClassName } from './getRootClassName.js';
-import 'lodash/kebabCase';
 import '../../constants/index.js';
 import '../../constants/keycodes.js';
+import '../string/kebabCase.js';
 
 describe(getRootClassName, () => {
   it('should transform the component name into a lumx class', () => {

package/js/utils/className/getRootClassName.ts

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

package/js/utils/className/handleBasicClasses.js

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { isEmpty } from '@lumx/core/js/utils/collection/isEmpty';
 import { getBasicClass } from './getBasicClass.js';
-import 'lodash/kebabCase';
+import '../string/kebabCase.js';
 
 /**
  * Enhance isEmpty method to also works with numbers.

package/js/utils/className/handleBasicClasses.test.js

@@ -2,7 +2,7 @@ import { handleBasicClasses } from './handleBasicClasses.js';
 import 'classnames';
 import '@lumx/core/js/utils/collection/isEmpty';
 import './getBasicClass.js';
-import 'lodash/kebabCase';
+import '../string/kebabCase.js';
 
 describe(handleBasicClasses, () => {
   it('should return correct combined CSS classes based on props', () => {

package/js/utils/className/index.js

@@ -6,6 +6,6 @@ export { fontColorClass } from './fontColorClass.js';
 export { resolveColorWithVariants } from './resolveColorWithVariants.js';
 import 'classnames';
 import '@lumx/core/js/utils/collection/isEmpty';
-import 'lodash/kebabCase';
+import '../string/kebabCase.js';
 import '../../constants/index.js';
 import '../../constants/keycodes.js';

package/js/utils/collection/isEmpty.test.js

@@ -1,20 +1,20 @@
-import { isEmpty } from './isEmpty';
+import { isEmpty } from './isEmpty.js';
 
 describe(isEmpty, () => {
-    it('should return true for falsy values', () => {
-        expect(isEmpty(undefined)).toBe(true);
-        expect(isEmpty(null)).toBe(true);
-        expect(isEmpty(0)).toBe(true);
-        expect(isEmpty('')).toBe(true);
-    });
-
-    it('should return true for empty object or array', () => {
-        expect(isEmpty([])).toBe(true);
-        expect(isEmpty({})).toBe(true);
-    });
-
-    it('should return false for non empty object or array', () => {
-        expect(isEmpty([''])).toBe(false);
-        expect(isEmpty({ foo: false })).toBe(false);
-    });
+  it('should return true for falsy values', () => {
+    expect(isEmpty(undefined)).toBe(true);
+    expect(isEmpty(null)).toBe(true);
+    expect(isEmpty(0)).toBe(true);
+    expect(isEmpty('')).toBe(true);
+  });
+  it('should return true for empty object or array', () => {
+    expect(isEmpty([])).toBe(true);
+    expect(isEmpty({})).toBe(true);
+  });
+  it('should return false for non empty object or array', () => {
+    expect(isEmpty([''])).toBe(false);
+    expect(isEmpty({
+      foo: false
+    })).toBe(false);
+  });
 });

package/js/utils/collection/isEmpty.test.ts

@@ -0,0 +1,20 @@
+import { isEmpty } from './isEmpty';
+
+describe(isEmpty, () => {
+    it('should return true for falsy values', () => {
+        expect(isEmpty(undefined)).toBe(true);
+        expect(isEmpty(null)).toBe(true);
+        expect(isEmpty(0)).toBe(true);
+        expect(isEmpty('')).toBe(true);
+    });
+
+    it('should return true for empty object or array', () => {
+        expect(isEmpty([])).toBe(true);
+        expect(isEmpty({})).toBe(true);
+    });
+
+    it('should return false for non empty object or array', () => {
+        expect(isEmpty([''])).toBe(false);
+        expect(isEmpty({ foo: false })).toBe(false);
+    });
+});

package/js/utils/collection/isEmpty.ts

@@ -1,4 +1,4 @@
-import { Falsy } from '../../types';
+import type { Falsy } from '../../types';
 
 /** Check if object or array is empty (true on falsy values) */
-export const isEmpty = (obj: object | Falsy) => !obj || Object.entries(obj).length === 0;
+export const isEmpty = (obj: {} | Falsy) => !obj || Object.entries(obj).length === 0;

package/js/utils/collection/range.test.js

@@ -1,9 +1,9 @@
-import { range } from './range';
+import { range } from './range.js';
 
 describe(range, () => {
-    it('should generate a number range', () => {
-        expect(range(0)).toEqual([]);
-        expect(range(1)).toEqual([0]);
-        expect(range(5)).toEqual([0, 1, 2, 3, 4]);
-    });
+  it('should generate a number range', () => {
+    expect(range(0)).toEqual([]);
+    expect(range(1)).toEqual([0]);
+    expect(range(5)).toEqual([0, 1, 2, 3, 4]);
+  });
 });

package/js/utils/collection/range.test.ts

@@ -0,0 +1,9 @@
+import { range } from './range';
+
+describe(range, () => {
+    it('should generate a number range', () => {
+        expect(range(0)).toEqual([]);
+        expect(range(1)).toEqual([0]);
+        expect(range(5)).toEqual([0, 1, 2, 3, 4]);
+    });
+});

package/js/utils/index.js

@@ -6,7 +6,7 @@ export { fontColorClass } from './className/fontColorClass.js';
 export { resolveColorWithVariants } from './className/resolveColorWithVariants.js';
 import 'classnames';
 import '@lumx/core/js/utils/collection/isEmpty';
-import 'lodash/kebabCase';
+import './string/kebabCase.js';
 import '../constants/index.js';
 import '../constants/keycodes.js';
 

package/js/utils/string/kebabCase.js

@@ -0,0 +1,28 @@
+/**
+ * Converts a string to kebab-case.
+ *
+ * @param str The string to convert
+ * @returns The kebab-cased string
+ *
+ * @example
+ * kebabCase('fooBar') // 'foo-bar'
+ * kebabCase('FooBar') // 'foo-bar'
+ * kebabCase('foo_bar') // 'foo-bar'
+ * kebabCase('foo bar') // 'foo-bar'
+ * kebabCase('FOO_BAR') // 'foo-bar'
+ */
+function kebabCase(str) {
+  return str
+  // Insert a hyphen before any uppercase letter that follows a lowercase letter or number
+  .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+  // Insert a hyphen before any uppercase letter that is followed by a lowercase letter and preceded by an uppercase letter
+  .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+  // Replace spaces and underscores with hyphens
+  .replace(/[\s_]+/g, '-')
+  // Convert to lowercase
+  .toLowerCase()
+  // Remove leading/trailing hyphens
+  .replace(/^-+|-+$/g, '');
+}
+
+export { kebabCase };

package/js/utils/string/kebabCase.test.js

@@ -0,0 +1,41 @@
+import { kebabCase } from '@lumx/core/js/utils/string/kebabCase';
+
+describe(kebabCase, () => {
+  it('should convert camelCase to kebab-case', () => {
+    expect(kebabCase('fooBar')).toBe('foo-bar');
+    expect(kebabCase('fooBarBaz')).toBe('foo-bar-baz');
+  });
+  it('should convert PascalCase to kebab-case', () => {
+    expect(kebabCase('FooBar')).toBe('foo-bar');
+    expect(kebabCase('FooBarBaz')).toBe('foo-bar-baz');
+  });
+  it('should convert snake_case to kebab-case', () => {
+    expect(kebabCase('foo_bar')).toBe('foo-bar');
+    expect(kebabCase('foo_bar_baz')).toBe('foo-bar-baz');
+  });
+  it('should convert spaces to hyphens', () => {
+    expect(kebabCase('foo bar')).toBe('foo-bar');
+    expect(kebabCase('foo bar baz')).toBe('foo-bar-baz');
+  });
+  it('should handle UPPERCASE strings', () => {
+    expect(kebabCase('FOO_BAR')).toBe('foo-bar');
+    expect(kebabCase('FOOBAR')).toBe('foobar');
+  });
+  it('should handle mixed formats', () => {
+    expect(kebabCase('fooBar_baz qux')).toBe('foo-bar-baz-qux');
+  });
+  it('should handle strings that are already kebab-case', () => {
+    expect(kebabCase('foo-bar')).toBe('foo-bar');
+  });
+  it('should handle empty strings', () => {
+    expect(kebabCase('')).toBe('');
+  });
+  it('should handle single words', () => {
+    expect(kebabCase('foo')).toBe('foo');
+    expect(kebabCase('Foo')).toBe('foo');
+  });
+  it('should remove leading and trailing hyphens', () => {
+    expect(kebabCase('_foo_bar_')).toBe('foo-bar');
+    expect(kebabCase(' foo bar ')).toBe('foo-bar');
+  });
+});

package/js/utils/string/kebabCase.test.ts

@@ -0,0 +1,50 @@
+import { kebabCase } from '@lumx/core/js/utils/string/kebabCase';
+
+describe(kebabCase, () => {
+    it('should convert camelCase to kebab-case', () => {
+        expect(kebabCase('fooBar')).toBe('foo-bar');
+        expect(kebabCase('fooBarBaz')).toBe('foo-bar-baz');
+    });
+
+    it('should convert PascalCase to kebab-case', () => {
+        expect(kebabCase('FooBar')).toBe('foo-bar');
+        expect(kebabCase('FooBarBaz')).toBe('foo-bar-baz');
+    });
+
+    it('should convert snake_case to kebab-case', () => {
+        expect(kebabCase('foo_bar')).toBe('foo-bar');
+        expect(kebabCase('foo_bar_baz')).toBe('foo-bar-baz');
+    });
+
+    it('should convert spaces to hyphens', () => {
+        expect(kebabCase('foo bar')).toBe('foo-bar');
+        expect(kebabCase('foo bar baz')).toBe('foo-bar-baz');
+    });
+
+    it('should handle UPPERCASE strings', () => {
+        expect(kebabCase('FOO_BAR')).toBe('foo-bar');
+        expect(kebabCase('FOOBAR')).toBe('foobar');
+    });
+
+    it('should handle mixed formats', () => {
+        expect(kebabCase('fooBar_baz qux')).toBe('foo-bar-baz-qux');
+    });
+
+    it('should handle strings that are already kebab-case', () => {
+        expect(kebabCase('foo-bar')).toBe('foo-bar');
+    });
+
+    it('should handle empty strings', () => {
+        expect(kebabCase('')).toBe('');
+    });
+
+    it('should handle single words', () => {
+        expect(kebabCase('foo')).toBe('foo');
+        expect(kebabCase('Foo')).toBe('foo');
+    });
+
+    it('should remove leading and trailing hyphens', () => {
+        expect(kebabCase('_foo_bar_')).toBe('foo-bar');
+        expect(kebabCase(' foo bar ')).toBe('foo-bar');
+    });
+});

package/js/utils/string/kebabCase.ts

@@ -0,0 +1,28 @@
+/**
+ * Converts a string to kebab-case.
+ *
+ * @param str The string to convert
+ * @returns The kebab-cased string
+ *
+ * @example
+ * kebabCase('fooBar') // 'foo-bar'
+ * kebabCase('FooBar') // 'foo-bar'
+ * kebabCase('foo_bar') // 'foo-bar'
+ * kebabCase('foo bar') // 'foo-bar'
+ * kebabCase('FOO_BAR') // 'foo-bar'
+ */
+export function kebabCase(str: string): string {
+    return (
+        str
+            // Insert a hyphen before any uppercase letter that follows a lowercase letter or number
+            .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+            // Insert a hyphen before any uppercase letter that is followed by a lowercase letter and preceded by an uppercase letter
+            .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+            // Replace spaces and underscores with hyphens
+            .replace(/[\s_]+/g, '-')
+            // Convert to lowercase
+            .toLowerCase()
+            // Remove leading/trailing hyphens
+            .replace(/^-+|-+$/g, '')
+    );
+}

package/package.json

@@ -31,25 +31,30 @@
     "scripts": {
         "generate:design-tokens": "yarn node style-dictionary",
         "build": "rollup -c",
+        "test": "vitest run",
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "3.20.1-alpha.27",
+    "version": "3.20.1-alpha.28",
     "devDependencies": {
         "@babel/preset-typescript": "^7.26.0",
         "@rollup/plugin-babel": "^6.0.4",
-        "@rollup/plugin-commonjs": "^19.0.2",
+        "@rollup/plugin-commonjs": "^29.0.0",
         "@rollup/plugin-node-resolve": "16.0.0",
         "@types/react": "^17.0.2",
         "autoprefixer": "^9.7.4",
         "glob": "^7.1.6",
         "postcss": "^8.5.6",
-        "rollup": "^2.79.1",
+        "rollup": "3.29.5",
         "rollup-plugin-cleaner": "^1.0.0",
         "rollup-plugin-copy": "^3.5.0",
         "sass": "^1.54.0",
         "style-dictionary": "^3.9.0",
         "tinycolor2": "^1.4.1",
-        "version-changelog": "^3.1.1"
+        "typescript": "^5.4.3",
+        "version-changelog": "^3.1.1",
+        "vite": "^6.3.5",
+        "vite-tsconfig-paths": "^5.1.4",
+        "vitest": "^3.0.0"
     }
 }