fix: insert React component instead of factory function call (#4132)

packages/cli-plugin-scaffold-extensions/src/generators/admin.ts

@@ -1,12 +1,12 @@
-import { addPluginToReactApp } from "./utils/addPluginToReactApp";
+import { addPluginToAdminApp } from "./utils/addPluginToAdminApp";
 import { PluginGenerator } from "~/types";
 import path from "path";
 import readJson from "load-json-file";
 import { PackageJson } from "@webiny/cli-plugin-scaffold/types";
 import writeJson from "write-json-file";
 
 export const adminGenerator: PluginGenerator = async ({ input }) => {
-    await addPluginToReactApp(input);
+    await addPluginToAdminApp(input);
 
     // Update dependencies list in package.json.
     const packageJsonPath = path.join("apps", "admin", "package.json");

packages/cli-plugin-scaffold-extensions/src/generators/utils/addPluginToReactApp.tsx → packages/cli-plugin-scaffold-extensions/src/generators/utils/addPluginToAdminApp.tsx

@@ -7,13 +7,15 @@ interface Params {
     packageName: string;
 }
 
-export const addPluginToReactApp = async (params: Params): Promise<void> => {
+export const addPluginToAdminApp = async (params: Params): Promise<void> => {
     const { name, packageName } = params;
 
     const extensionsFilePath = path.join("apps", "admin", "src", "Extensions.tsx");
 
-    const extensionFactory = name + "ExtensionFactory";
-    const importName = "{ createExtension as " + extensionFactory + " }";
+    const ucFirstName = name.charAt(0).toUpperCase() + name.slice(1);
+    const componentName = ucFirstName + "Extension";
+
+    const importName = "{ Extension as " + componentName + " }";
     const importPath = packageName;
 
     const project = new Project();
@@ -75,7 +77,7 @@ export const addPluginToReactApp = async (params: Params): Promise<void> => {
         .trim();
 
     extensionsArrowFnFragment.replaceWithText(
-        `<>{${name}ExtensionFactory()}${extensionsArrowFnFragmentChildrenText}</>`
+        `<><${componentName}/>${extensionsArrowFnFragmentChildrenText}</>`
     );
 
     await source.save();

packages/cli-plugin-scaffold-extensions/src/index.ts

@@ -185,7 +185,7 @@ export default (): CliCommandScaffoldTemplate<Input> => ({
                             packageJson.dependencies[packageName] = `^${stdout}`;
                         } catch (e) {
                             throw new Error(
-                                `Could not find ${log.red.hl(
+                                `Could not find ${log.error.hl(
                                     packageName
                                 )} NPM package. Please double-check the package name and try again.`,
                                 { cause: e }

packages/cli-plugin-scaffold-extensions/templates/admin/package.json

@@ -1,5 +1,8 @@
 {
   "name": "PACKAGE_NAME",
   "main": "src/index.tsx",
-  "version": "1.0.0"
+  "version": "1.0.0",
+  "dependencies": {
+    "react": "18.2.0"
+  }
 }

packages/cli-plugin-scaffold-extensions/templates/admin/src/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
 
-export const createExtension = () => {
+export const Extension = () => {
     return <>{/* Your code here. */}</>;
 };