Merge pull request #272 from contentstack/feat/DX-544-add-boilerplates

Feat/dx 544 add boilerplates

Author: harshithad0703

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentstack/apps-cli",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "App ClI",
   "author": "Contentstack CLI",
   "homepage": "https://github.com/contentstack/contentstack-apps-cli",

package.json

@@ -21,18 +21,19 @@ import {
   flags,
   HttpClient,
   configHandler,
-  FlagInput
+  FlagInput,
 } from "@contentstack/cli-utilities";
 
 import { BaseCommand } from "../../base-command";
-import { AppManifest, AppType } from "../../types";
+import { AppManifest, AppType, BoilerplateAppType } from "../../types";
 import { appCreate, commonMsg } from "../../messages";
 import {
   getOrg,
   getAppName,
   getDirName,
   getOrgAppUiLocation,
-  sanitizePath
+  sanitizePath,
+  selectedBoilerplate,
 } from "../../util";
 
 export default class Create extends BaseCommand<typeof Create> {
@@ -96,7 +97,18 @@ export default class Create extends BaseCommand<typeof Create> {
           message: this.messages.CONFIRM_CLONE_BOILERPLATE,
         }))
       ) {
-        await this.boilerplateFlow();
+        const boilerplate: BoilerplateAppType = await selectedBoilerplate();
+
+        if (boilerplate) {
+          this.sharedConfig.boilerplateName = boilerplate.name
+            .toLowerCase()
+            .replace(/ /g, "-");
+          this.sharedConfig.appBoilerplateGithubUrl = boilerplate.link;
+          this.sharedConfig.appName = await getAppName(
+            this.sharedConfig.boilerplateName
+          );
+          await this.boilerplateFlow();
+        }
       } else {
         this.manageManifestToggeling();
         await this.registerTheAppOnDeveloperHub(false);
@@ -198,7 +210,11 @@ export default class Create extends BaseCommand<typeof Create> {
     const zip = new AdmZip(filepath);
     const dataDir = this.flags["data-dir"] ?? process.cwd();
     let targetPath = resolve(dataDir, this.sharedConfig.appName);
-    const sourcePath = resolve(dataDir, this.sharedConfig.boilerplateName);
+
+    // Get the directory inside the zip file
+    const zipEntries = zip.getEntries();
+    const firstEntry = zipEntries[0];
+    const sourcePath = resolve(dataDir, firstEntry.entryName.split("/")[0]);
 
     if (this.flags["data-dir"] && !existsSync(this.flags["data-dir"])) {
       mkdirSync(this.flags["data-dir"], { recursive: true });
@@ -235,10 +251,7 @@ export default class Create extends BaseCommand<typeof Create> {
    */
   manageManifestToggeling() {
     // NOTE Use boilerplate manifest if exist
-    const manifestPath = resolve(
-      this.sharedConfig.folderPath || "",
-      "manifest.json"
-    );
+    const manifestPath = resolve(this.sharedConfig.folderPath, "manifest.json");
 
     if (existsSync(manifestPath)) {
       this.sharedConfig.manifestPath = manifestPath;
@@ -301,7 +314,10 @@ export default class Create extends BaseCommand<typeof Create> {
         this.appData = merge(this.appData, pick(response, validKeys));
         if (saveManifest) {
           writeFileSync(
-            resolve(this.sharedConfig.folderPath, "manifest.json"),
+            resolve(
+              this.sharedConfig.folderPath,
+              "manifest.json"
+            ),
             JSON.stringify(this.appData),
             {
               encoding: "utf8",

src/commands/app/create.ts

@@ -8,6 +8,7 @@ const config = {
   appBoilerplateGithubUrl:
     "https://codeload.github.com/contentstack/marketplace-app-boilerplate/zip/refs/heads/main",
   defaultAppFileName: "manifest",
+  boilerplatesUrl: 'https://marketplace-artifacts.contentstack.com/cli/starter-template.json'
 };
 
 export default config;

src/config/index.ts

@@ -140,3 +140,12 @@ export interface LaunchProjectRes {
   environmentUid: any;
   developerHubAppUid: any;
 }
+
+export interface BoilerplateAppType {
+  name: string;
+  description?: string;
+  link: string;
+  tags?: string[];
+  created_at?: string;
+  updated_at?: string;
+}

src/types/app.ts

@@ -7,6 +7,7 @@ import {
   cliux,
   Stack,
   FsUtility,
+  HttpClient,
 } from "@contentstack/cli-utilities";
 import { projectsQuery } from "../graphql/queries";
 import { apiRequestHandler } from "./api-request-handler";
@@ -19,6 +20,7 @@ import {
 } from "../types";
 import { askProjectName } from "./inquirer";
 import { deployAppMsg } from "../messages";
+import config from "../config";
 
 export type CommonOptions = {
   log: LogFn;
@@ -396,6 +398,14 @@ const handleProjectNameConflict = async (
   }
   return projectName;
 };
+async function fetchBoilerplateDetails(): Promise<Record<string, any>[]> {
+  try {
+    const content = await new HttpClient().get(config.boilerplatesUrl);
+    return content?.data?.templates ?? [];
+  } catch (error) {
+    throw error;
+  }
+}
 
 export {
   getOrganizations,
@@ -418,4 +428,5 @@ export {
   disconnectApp,
   formatUrl,
   handleProjectNameConflict,
+  fetchBoilerplateDetails
 };

src/util/common-utils.ts

@@ -27,6 +27,7 @@ import {
   fetchApps,
   sanitizePath,
   MarketPlaceOptions,
+  fetchBoilerplateDetails,
 } from "./common-utils";
 import { LaunchProjectRes } from "../types";
 
@@ -385,6 +386,21 @@ function inquireRequireValidation(input: any): string | boolean {
   return true;
 }
 
+const selectedBoilerplate = async (): Promise<any> => {
+  const boilerplates = await fetchBoilerplateDetails();
+
+  return await cliux
+    .inquire({
+      type: "search-list",
+      name: "App",
+      choices: boilerplates.map((bp) => bp.name),
+      message: "Select a boilerplate from search list",
+    })
+    .then((name) => {
+      return find(boilerplates, (boilerplate) => boilerplate.name === name);
+    });
+};
+
 export {
   getOrg,
   getAppName,
@@ -399,5 +415,6 @@ export {
   askProjectType,
   askConfirmation,
   selectProject,
-  askProjectName
+  askProjectName,
+  selectedBoilerplate,
 };