feat: enhance component injection logic and add label sanitization for component names

Author: NoOne7135

adminforth/commands/createCustomComponent/configUpdater.js

@@ -294,7 +294,7 @@ export async function injectGlobalComponent(indexFilePath, injectionType, compon
     });
 
     let updated = false;
-
+    console.log(JSON.stringify(injectionType));
     recast.visit(ast, {
         visitNewExpression(path) {
             if (
@@ -332,27 +332,41 @@ export async function injectGlobalComponent(indexFilePath, injectionType, compon
 
                 const injectionsValue = globalInjections.value;
                 if (!n.ObjectExpression.check(injectionsValue)) return false;
-
+                console.log(JSON.stringify(injectionType));
                 let injectionProp = injectionsValue.properties.find(
                     p => n.ObjectProperty.check(p) && n.Identifier.check(p.key) && p.key.name === injectionType
                 );
-
                 if (injectionProp) {
-                    const injectionArray = injectionProp.value.elements;
-                    injectionArray.push(b.stringLiteral(componentPath));
-                    console.log(chalk.dim(`Added '${componentPath}' to '${injectionType}'`));
-                } else {
+                    const currentValue = injectionProp.value;
+          
+                    if (n.ArrayExpression.check(currentValue)) {
+                      currentValue.elements.push(b.stringLiteral(componentPath));
+                      console.log(chalk.dim(`Added '${componentPath}' to existing array in '${injectionType}'`));
+                    } else if (n.StringLiteral.check(currentValue)) {
+                      // Преобразовать строку в массив
+                      injectionProp.value = b.arrayExpression([
+                        b.stringLiteral(currentValue.value),
+                        b.stringLiteral(componentPath)
+                      ]);
+                      console.log(chalk.dim(`Converted '${injectionType}' from string to array and added '${componentPath}'`));
+                    } else {
+                      throw new Error(`Unsupported value type for '${injectionType}'. Must be string or array.`);
+                    }
+                  } else {
                     injectionsValue.properties.push(
-                        b.objectProperty(b.identifier(injectionType), b.arrayExpression([b.stringLiteral(componentPath)]))
+                      b.objectProperty(
+                        b.identifier(injectionType),
+                        b.arrayExpression([b.stringLiteral(componentPath)])
+                      )
                     );
-                    console.log(chalk.dim(`Added '${injectionType}': [${componentPath}]`));
+                    console.log(chalk.dim(`Added new array for '${injectionType}' with '${componentPath}'`));
+                  }
+          
+                  updated = true;
+                  this.abort();
                 }
-
-                updated = true;
-                this.abort();
-            }
-            return false;
-        }
+                return false;
+              }
     });
 
     if (!updated) {

adminforth/commands/createCustomComponent/main.js

@@ -5,6 +5,14 @@ import { loadAdminForthConfig } from './configLoader.js'; // Helper to load conf
 import { generateComponentFile, generateLoginOrGlobalComponentFile, generateCrudInjectionComponent } from './fileGenerator.js'; // Helper to create the .vue file
 import { updateResourceConfig, injectLoginComponent, injectGlobalComponent, updateCrudInjectionConfig } from './configUpdater.js'; // Helper to modify resource .ts file
 
+function sanitizeLabel(input){
+  return input
+    .replace(/[^a-zA-Z0-9\s]/g, '')
+    .split(' ')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())  // Переводим первую букву в верхний регистр
+    .join('');
+}
+
 export default async function createComponent(args) {
   console.log('This command will help you to generate boilerplate for component.\n');
 
@@ -88,8 +96,8 @@ async function handleFieldComponentCreation(config, resources) {
    console.log(chalk.dim(`One-line alternative: |adminforth component fields.${fieldType}.${resourceId}.${columnName}|`));
 
 
-  const safeResourceLabel = selectedResource.label.replace(/[^a-zA-Z0-9]/g, '');
-  const safeColumnLabel = selectedColumn.label.replace(/[^a-zA-Z0-9]/g, '');
+  const safeResourceLabel = sanitizeLabel(selectedResource.label)
+  const safeColumnLabel = sanitizeLabel(selectedColumn.label)
   const componentFileName = `${safeResourceLabel}${safeColumnLabel}${fieldType.charAt(0).toUpperCase() + fieldType.slice(1)}.vue`; // e.g., UserEmailShow.vue
   const componentPathForConfig = `@@/${componentFileName}`; // Path relative to custom dir for config
 
@@ -106,7 +114,10 @@ async function handleFieldComponentCreation(config, resources) {
 
       await updateResourceConfig(selectedResource.resourceId, columnName, fieldType, componentPathForConfig);
       console.log(chalk.green(`\n✅ Successfully created component ${componentPathForConfig} and updated configuration.`));
-      console.log(`\nYou can now open the component in your IDE: ${absoluteComponentPath}`);
+      console.log(
+        chalk.bold.greenBright('You can now open the component in your IDE:'),
+        chalk.underline.cyanBright(absoluteComponentPath)
+      );
     }
     process.exit(0);
 }catch (error) {
@@ -168,7 +179,7 @@ async function handleCrudPageInjectionCreation(config, resources) {
     ],
   });
 
-  const safeResourceLabel = selectedResource.label.replace(/[^a-zA-Z0-9]/g, '');
+  const safeResourceLabel = sanitizeLabel(selectedResource.label)
   const componentFileName = `${safeResourceLabel}${crudType.charAt(0).toUpperCase() + crudType.slice(1)}${injectionPosition.charAt(0).toUpperCase() + injectionPosition.slice(1)}.vue`;
   const componentPathForConfig = `@@/${componentFileName}`;
 
@@ -192,7 +203,10 @@ async function handleCrudPageInjectionCreation(config, resources) {
       );
 
       console.log(chalk.green(`\n✅ Successfully created component ${componentPathForConfig} and updated configuration.`));
-      console.log(`\nYou can now open the component in your IDE: ${absoluteComponentPath}`);
+      console.log(
+        chalk.bold.greenBright('You can now open the component in your IDE:'),
+        chalk.underline.cyanBright(absoluteComponentPath)
+      );
     }
     process.exit(0);
   } catch (error) {
@@ -224,7 +238,7 @@ async function handleLoginPageInjectionCreation(config) {
 
 
   try {
-    const safeName = reason.replace(/[^a-zA-Z0-9]/g, '');
+    const safeName = sanitizeLabel(reason)
     const componentFileName = `CustomLogin${safeName}.vue`;
 
     const context = { reason };
@@ -240,8 +254,11 @@ async function handleLoginPageInjectionCreation(config) {
       console.log(chalk.dim(`Injecting component: ${configFilePath}, ${componentFileName}`));
       await injectLoginComponent(configFilePath, `@@/${componentFileName}`);
 
-      console.log(chalk.green(`\n✅ Successfully created component ${componentPathForConfig} and updated configuration.`));
-      console.log(`\nYou can now open the component in your IDE: ${absoluteComponentPath}`);
+      console.log(chalk.green(`\n✅ Successfully created component ${componentFileName} and updated configuration.`));
+      console.log(
+        chalk.bold.greenBright('You can now open the component in your IDE:'),
+        chalk.underline.cyanBright(absoluteComponentPath)
+      );
     }
     process.exit(0);
   }catch (error) {
@@ -277,7 +294,7 @@ async function handleGlobalInjectionCreation(config) {
   console.log(chalk.grey(`Selected ❯ 🌍 Global page injections ❯ ${injectionType} ❯ ${reason}`));
 
   try {
-    const safeName = reason.replace(/[^a-zA-Z0-9]/g, '');
+    const safeName = sanitizeLabel(reason)
     const componentFileName = `CustomGlobal${safeName}.vue`;
 
     const context = { reason };
@@ -298,7 +315,10 @@ async function handleGlobalInjectionCreation(config) {
       await injectGlobalComponent(configFilePath, injectionType, `@@/${componentFileName}`);
 
       console.log(chalk.green(`\n✅ Successfully created component ${componentFileName} and updated configuration.`));
-      console.log(`\nYou can now open the component in your IDE: ${absoluteComponentPath}`);
+      console.log(
+        chalk.bold.greenBright('You can now open the component in your IDE:'),
+        chalk.underline.cyanBright(absoluteComponentPath)
+      );
     }
     process.exit(0);
   } catch (error) {

adminforth/commands/createCustomComponent/templates/global/everyPageBottom.vue.hbs

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
+  <div class="flex items-center justify-center text-gray-900 dark:text-gray-400 p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
     {{reason}}
   </div>
 </template>
@@ -8,4 +8,4 @@
     defineProps({
         reason: String
     });
-</script>
+</script>

adminforth/commands/createCustomComponent/templates/global/sidebar.vue.hbs

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-center text-gray-500 text-sm mt-4">
+  <div class="display-flex justify-center text-lightSidebarIcons text-center dark:text-darkSidebarIcons">
     {{reason}}
   </div>
 </template>