fix: HTML example code in showcases (#4987)

* fix(showcase): clean up names of showcase examples

* fix(showcase): remove spread operator for example code

* chore(showcase): remove console log

---------

Co-authored-by: Maximilian Franzke <[email protected]>

Author: michaelmkraus

showcases/patternhub/scripts/generate-example-jsx.js

@@ -1,5 +1,6 @@
 import FS from 'node:fs';
 import {
+	generateExampleKey,
 	getCodeByFramework,
 	getComponentName,
 	transformToUpperComponentName
@@ -35,12 +36,13 @@ const generateExampleJSX = () => {
 						true,
 						variant.children
 					);
-					examples.push(
-						`"${componentName}${variant.name}${
-							example.name
-							// eslint-disable-next-line unicorn/no-unnecessary-slice-end
-						}":renderToString(${code.slice(0, code.length)})`
+
+					const exampleKey = generateExampleKey(
+						componentName,
+						variant.name,
+						example.name
 					);
+					examples.push(`"${exampleKey}":renderToString(${[code]})`);
 				}
 			}
 		}

showcases/patternhub/scripts/get-code-files.js

@@ -2,7 +2,7 @@
 import FS from 'node:fs';
 import prettier from 'prettier';
 import { allExamples } from './generated/index.jsx';
-import { getCodeByFramework } from './utils.js';
+import { generateExampleKey, getCodeByFramework } from './utils.js';
 
 const sharedPath = '../shared';
 const reactPath = '../react-showcase/src/components';
@@ -66,10 +66,12 @@ const getExamplesAsMDX = async (componentName, variant) => {
 			if (example.code && example.code[framework]) {
 				exampleCode = example.code[framework];
 			} else if (framework === 'html') {
-				exampleCode =
-					allExamples[
-						`${componentName}${variant.name}${example.name}`
-					];
+				const exampleKey = generateExampleKey(
+					componentName,
+					variant.name,
+					example.name
+				);
+				exampleCode = allExamples[exampleKey];
 			} else {
 				exampleCode = getCodeByFramework(
 					componentName,

showcases/patternhub/scripts/utils.js

@@ -219,6 +219,29 @@ export const getColorVariants = () => [
 	'informational-transparent-semi'
 ];
 
+/**
+ * Clean names by removing spaces and special characters to create valid JavaScript property names
+ * @param {string} name - The name to clean
+ * @returns {string} - Cleaned name with only word characters
+ */
+export const cleanupName = (name) => {
+	if (!name) return '';
+	return name.replaceAll(/\s+/g, '').replaceAll(/\W/g, '');
+};
+
+/**
+ * Generate a consistent key for allExamples object
+ * @param {string} componentName - Component name
+ * @param {string} variantName - Variant name (will be cleaned)
+ * @param {string} exampleName - Example name (will be cleaned)
+ * @returns {string} - Clean key for allExamples
+ */
+export const generateExampleKey = (componentName, variantName, exampleName) => {
+	const cleanVariantName = cleanupName(variantName);
+	const cleanExampleName = cleanupName(exampleName);
+	return `${componentName}${cleanVariantName}${cleanExampleName}`;
+};
+
 export const transformToUpperComponentName = (componentName) =>
 	componentName
 		? componentName