[legacy-framework] Allow user to select a recipe with blitz install command

packages/cli/src/commands/install.ts

@@ -1,5 +1,5 @@
 import {getConfig} from "@blitzjs/config"
-import {log} from "@blitzjs/display"
+import {log, table as Table} from "@blitzjs/display"
 import type {RecipeExecutor} from "@blitzjs/installer"
 import {flags} from "@oclif/command"
 import {bootstrap} from "global-agent"
@@ -66,19 +66,36 @@ interface RecipeMeta {
   location: RecipeLocation
 }
 
+interface Tree {
+  path: string
+  mode: string
+  type: string
+  sha: string
+  size: number
+  url: string
+}
+
+interface GithubRepoAPITrees {
+  sha: string
+  url: string
+  tree: Tree[]
+  truncated: boolean
+}
+
 export class Install extends Command {
   static description = "Install a Recipe into your Blitz app"
   static aliases = ["i"]
   static strict = false
 
   static flags = {
     help: flags.help({char: "h"}),
+    list: flags.boolean({char: "l", description: "show all official recipe list", default: false}),
   }
 
   static args = [
     {
       name: "recipe",
-      required: true,
+      required: false,
       description:
         "Name of a Blitz recipe from @blitzjs/blitz/recipes, or a file path to a local recipe definition",
     },
@@ -126,6 +143,53 @@ export class Install extends Command {
     }
   }
 
+  async getOfficialRecipeList(): Promise<string[]> {
+    return await gotJSON(`${API_ROOT}blitz-js/blitz/git/trees/canary?recursive=1`).then(
+      (release: GithubRepoAPITrees) =>
+        release.tree.reduce((recipieList: string[], item) => {
+          const filePath = item.path.split("/")
+          const [directory, recipieName] = filePath
+          if (directory === "recipes" && filePath.length === 2 && item.type === "tree") {
+            recipieList.push(recipieName)
+          }
+          return recipieList
+        }, []),
+    )
+  }
+
+  async officialRecipeListTable(recipesList: string[]): Promise<string> {
+    const recipesTable = new Table({
+      columns: [
+        {
+          name: "Recipe name",
+          alignment: "left",
+        },
+        {
+          name: "Install command",
+          alignment: "left",
+        },
+      ],
+    })
+    debug("recipesList", recipesList)
+    recipesTable.addRows(
+      recipesList.map((recipe) => {
+        return {
+          "Recipe name": recipe,
+          "Install command": `blitz install ${recipe}`,
+        }
+      }),
+    )
+
+    const installRecipe: any = await this.enquirer.prompt({
+      type: "select",
+      name: "recipeName",
+      message: "Select a recipe to install",
+      choices: recipesList,
+    })
+
+    return installRecipe.recipeName
+  }
+
   /**
    * Clones the repository into a temp directory, returning the path to the new directory
    *
@@ -204,12 +268,21 @@ export class Install extends Command {
 
     await this.setupProxySupport()
 
-    const {args} = this.parse(Install)
+    const {args, flags} = this.parse(Install)
+    debug(`flags`, flags)
+    let recipeInfo
+    // show all official recipes
+    if (flags.list || !args.recipe) {
+      const officialRecipeList = await this.getOfficialRecipeList()
+      recipeInfo = this.normalizeRecipePath(await this.officialRecipeListTable(officialRecipeList))
+    } else {
+      recipeInfo = this.normalizeRecipePath(args.recipe)
+    }
+
     const originalCwd = process.cwd()
-    const recipeInfo = this.normalizeRecipePath(args.recipe)
+
     debug("recipeInfo", recipeInfo)
     const chalk = (await import("chalk")).default
-
     if (recipeInfo.location === RecipeLocation.Remote) {
       const apiUrl = recipeInfo.path.replace(GH_ROOT, API_ROOT)
       const rawUrl = recipeInfo.path.replace(GH_ROOT, RAW_ROOT)

packages/cli/test/commands/install.test.ts

@@ -1,3 +1,4 @@
+import {expect as oclifExpect, test as oclifTest} from "@oclif/test"
 import * as path from "path"
 import {Install, RecipeLocation} from "../../src/commands/install"
 import tempRecipe from "../__fixtures__/installer"
@@ -29,4 +30,39 @@ describe("`install` command", () => {
       location: RecipeLocation.Remote,
     })
   })
+  describe("run official recipes list flag ", () => {
+    it("list of official recipes ", () => {
+      const getOfficialRecipeList = Install.prototype.getOfficialRecipeList
+      return getOfficialRecipeList().then((recipeList) => {
+        expect(recipeList).toEqual(
+          expect.arrayContaining([
+            "base-web",
+            "bumbag-ui",
+            "chakra-ui",
+            "emotion",
+            "gh-action-yarn-mariadb",
+            "gh-action-yarn-postgres",
+            "ghost",
+            "graphql-apollo-server",
+            "logrocket",
+            "material-ui",
+            "quirrel",
+            "reflexjs",
+            "render",
+            "secureheaders",
+            "stitches",
+            "styled-components",
+            "tailwind",
+            "theme-ui",
+          ]),
+        )
+      })
+    })
+    it("not to be included tsconfig.json of official recipes", () => {
+      const getOfficialRecipeList = Install.prototype.getOfficialRecipeList
+      return getOfficialRecipeList().then((recipeList) => {
+        expect(recipeList).toEqual(expect.not.arrayContaining(["tsconfig.json"]))
+      })
+    })
+  })
 })