Merge pull request #1516 from umbraco/feature/function/from-camel-case

Feature: `fromCamelCase` function

src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/collection/extension-collection.element.ts

@@ -1,5 +1,6 @@
 import { umbExtensionsRegistry } from '../registry.js';
 import { html, customElement, css } from '@umbraco-cms/backoffice/external/lit';
+import { fromCamelCase } from '@umbraco-cms/backoffice/utils';
 import { UMB_DEFAULT_COLLECTION_CONTEXT, UmbCollectionDefaultElement } from '@umbraco-cms/backoffice/collection';
 import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection';
 import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
@@ -22,18 +23,11 @@ export class UmbExtensionCollectionElement extends UmbCollectionDefaultElement {
 
 		this.observe(umbExtensionsRegistry.extensions, (extensions) => {
 			const types = [...new Set(extensions.map((x) => x.type))];
-			const options = types.sort().map((x) => ({ name: this.#camelCaseToWords(x), value: x }));
+			const options = types.sort().map((x) => ({ name: fromCamelCase(x), value: x }));
 			this.#options = [{ name: 'All', value: '' }, ...options];
 		});
 	}
 
-	// TODO: make this a utility function, please check that we do not already have on for this: [NL]
-	// credit: https://stackoverflow.com/a/7225450/12787 [LK]
-	#camelCaseToWords(input: string) {
-		const result = input.replace(/([A-Z])/g, ' $1');
-		return result.charAt(0).toUpperCase() + result.slice(1);
-	}
-
 	#onChange(event: UUISelectEvent) {
 		const extensionType = event.target.value;
 		this.#collectionContext?.setFilter({ type: extensionType });

src/Umbraco.Web.UI.Client/src/packages/core/utils/index.ts

@@ -12,4 +12,5 @@ export * from './string/increment-string.function.js';
 export * from './string/split-string-to-array.js';
 export * from './type/diff.type.js';
 export * from './string/to-camel-case/to-camel-case.function.js';
+export * from './string/from-camel-case.function.js';
 export * from './debounce/debounce.function.js';

src/Umbraco.Web.UI.Client/src/packages/core/utils/string/from-camel-case.function.ts

@@ -0,0 +1,21 @@
+/**
+ * Converts a string from camelCase to human-readable labels.
+ *
+ * This function has been adapted from the following Stack Overflow answer:
+ * https://stackoverflow.com/a/7225450/12787
+ * Licensed under the permissions of the CC BY-SA 4.0 DEED.
+ * https://creativecommons.org/licenses/by-sa/4.0/
+ * Modifications are licensed under the MIT License.
+ * Copyright © 2024 Umbraco HQ.
+ *
+ * @param {string} str - The camelCased string to convert.
+ * @returns {string} - The converted human-readable label.
+ *
+ * @example
+ * const label = fromCamelCase('workspaceActionMenuItem');
+ * // label: 'Workspace Action Menu Item'
+ */
+export const fromCamelCase = (str: string) => {
+	const s = str.replace(/([A-Z])/g, ' $1');
+	return s.charAt(0).toUpperCase() + s.slice(1);
+};