Add support for custom messages and icons in recipes (#2510)

Adds ability to customize the success message icon in recipes (patch)

Co-authored-by: Nicolas <[email protected]>

packages/installer/src/executors/executor.tsx

@@ -3,6 +3,7 @@ import * as React from "react"
 import {Newline} from "../components/newline"
 
 export interface ExecutorConfig {
+  successIcon?: string
   stepId: string | number
   stepName: string
   stepType: string

packages/installer/src/executors/print-message-executor.tsx

@@ -0,0 +1,36 @@
+import {Box, Text} from "ink"
+import * as React from "react"
+import {Newline} from "../components/newline"
+import {useEnterToContinue} from "../utils/use-enter-to-continue"
+import {Executor, executorArgument, ExecutorConfig, getExecutorArgument} from "./executor"
+
+export interface Config extends ExecutorConfig {
+  message: executorArgument<string>
+}
+
+export const type = "print-message"
+
+export const Commit: Executor["Commit"] = ({cliArgs, onChangeCommitted, step}) => {
+  const generatorArgs = React.useMemo(
+    () => ({
+      message: getExecutorArgument((step as Config).message, cliArgs),
+      stepName: getExecutorArgument((step as Config).stepName, cliArgs),
+    }),
+    [cliArgs, step],
+  )
+
+  const handleChangeCommitted = React.useCallback(() => {
+    onChangeCommitted(generatorArgs.stepName)
+  }, [onChangeCommitted, generatorArgs])
+
+  useEnterToContinue(handleChangeCommitted)
+
+  return (
+    <Box flexDirection="column">
+      {/* eslint-disable-next-line jsx-a11y/accessible-emoji */}
+      <Text>{generatorArgs.message}</Text>
+      <Newline />
+      <Text bold>Press ENTER to continue</Text>
+    </Box>
+  )
+}

packages/installer/src/index.ts

@@ -4,6 +4,8 @@ export * from "./executors/executor"
 export {type as AddDependencyType} from "./executors/add-dependency-executor"
 export {type as FileTransformType} from "./executors/file-transform-executor"
 export {type as NewFileType} from "./executors/new-file-executor"
+export {type as PrintMessageType} from "./executors/print-message-executor"
+
 export * from "./utils/paths"
 export * from "./transforms"
 export {customTsParser} from "./utils/transform"

packages/installer/src/recipe-builder.ts

@@ -1,12 +1,16 @@
 import * as AddDependencyExecutor from "./executors/add-dependency-executor"
 import * as TransformFileExecutor from "./executors/file-transform-executor"
 import * as NewFileExecutor from "./executors/new-file-executor"
+import * as PrintMessageExecutor from "./executors/print-message-executor"
 import {ExecutorConfigUnion, RecipeExecutor} from "./recipe-executor"
 import {RecipeMeta} from "./types"
 
 export interface IRecipeBuilder {
   setName(name: string): IRecipeBuilder
   setDescription(description: string): IRecipeBuilder
+  printMessage(
+    step: Omit<Omit<PrintMessageExecutor.Config, "stepType">, "explanation">,
+  ): IRecipeBuilder
   setOwner(owner: string): IRecipeBuilder
   setRepoLink(repoLink: string): IRecipeBuilder
   addAddDependenciesStep(step: Omit<AddDependencyExecutor.Config, "stepType">): IRecipeBuilder
@@ -28,6 +32,13 @@ export function RecipeBuilder(): IRecipeBuilder {
       meta.description = description
       return this
     },
+    printMessage(step: Omit<PrintMessageExecutor.Config, "stepType">) {
+      steps.push({
+        stepType: PrintMessageExecutor.type,
+        ...step,
+      })
+      return this
+    },
     setOwner(owner: string) {
       meta.owner = owner
       return this

packages/installer/src/recipe-executor.tsx

@@ -4,6 +4,7 @@ import React from "react"
 import * as AddDependencyExecutor from "./executors/add-dependency-executor"
 import * as FileTransformExecutor from "./executors/file-transform-executor"
 import * as NewFileExecutor from "./executors/new-file-executor"
+import * as PrintMessageExecutor from "./executors/print-message-executor"
 import {RecipeRenderer} from "./recipe-renderer"
 import {RecipeMeta} from "./types"
 // const debug = require('debug')("blitz:installer")
@@ -12,6 +13,7 @@ type ExecutorConfig =
   | AddDependencyExecutor.Config
   | FileTransformExecutor.Config
   | NewFileExecutor.Config
+  | PrintMessageExecutor.Config
 
 export type {ExecutorConfig as ExecutorConfigUnion}
 

packages/installer/src/recipe-renderer.tsx

@@ -5,6 +5,7 @@ import * as AddDependencyExecutor from "./executors/add-dependency-executor"
 import {Executor, ExecutorConfig, Frontmatter} from "./executors/executor"
 import * as FileTransformExecutor from "./executors/file-transform-executor"
 import * as NewFileExecutor from "./executors/new-file-executor"
+import * as PrintMessageExecutor from "./executors/print-message-executor"
 import {RecipeMeta} from "./types"
 import {useEnterToContinue} from "./utils/use-enter-to-continue"
 
@@ -27,6 +28,7 @@ enum Status {
 const ExecutorMap: {[key: string]: Executor} = {
   [AddDependencyExecutor.type]: AddDependencyExecutor,
   [NewFileExecutor.type]: NewFileExecutor,
+  [PrintMessageExecutor.type]: PrintMessageExecutor,
   [FileTransformExecutor.type]: FileTransformExecutor,
 } as const
 
@@ -177,13 +179,14 @@ export function RecipeRenderer({cliArgs, steps, recipeMeta}: RecipeProps) {
     }
   })
 
-  const messages = state.steps.map((step) => step.successMsg).filter((s) => s)
-
+  const messages = state.steps
+    .map((step) => ({msg: step.successMsg, icon: step.executor.successIcon ?? "✅"}))
+    .filter((s) => s.msg)
   return (
     <DispatchContext.Provider value={dispatch}>
-      {messages.map((msg, index) => (
+      {messages.map(({msg, icon}, index) => (
         <Text key={msg + index} color="green">
-          {msg === "\n" ? "" : "✅"} {msg}
+          {msg === "\n" ? "" : icon} {msg}
         </Text>
       ))}
       {state.current === -1 ? <WelcomeMessage recipeMeta={recipeMeta} /> : null}

packages/installer/test/executors/__snapshots__/print-message-executor.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Executor should render PrintMessageExecutor 1`] = `
+"My message
+
+Press ENTER to continue"
+`;

packages/installer/test/executors/print-message-executor.test.tsx

@@ -0,0 +1,29 @@
+import {render} from "ink-testing-library"
+import React from "react"
+import stripAnsi from "strip-ansi"
+import {Commit as PrintMessageExecutor} from "../../src/executors/print-message-executor"
+
+describe("Executor", () => {
+  const executorConfig = {
+    stepId: "printMessage",
+    stepName: "Print message",
+    stepType: "print-message",
+    explanation: "Testing text for a print message",
+    message: "My message",
+  }
+  it("should render PrintMessageExecutor", () => {
+    const {lastFrame} = render(
+      <PrintMessageExecutor cliArgs={null} onChangeCommitted={() => {}} step={executorConfig} />,
+    )
+
+    expect(stripAnsi(lastFrame())).toMatchSnapshot()
+  })
+
+  it("should contain a step name and explanation", () => {
+    const {frames} = render(
+      <PrintMessageExecutor cliArgs={null} onChangeCommitted={() => {}} step={executorConfig} />,
+    )
+
+    expect(frames[0].includes("My message")).toBeTruthy()
+  })
+})