feat(colors): Add more chalk colors. And prepare for chalk upgrade

packages/api-server/src/logFormatter/formatters.ts

@@ -125,7 +125,8 @@ export const formatMessage = (logData: any) => {
     pretty = chalk.white(msg)
   }
   if (level === 'warn') {
-    pretty = chalk.magenta(msg)
+    const orange = '#ffa500'
+    pretty = chalk.hex(orange)(msg)
   }
   if (level === 'debug') {
     pretty = chalk.yellow(msg)

packages/cli-helpers/src/lib/colors.ts

@@ -2,20 +2,21 @@ import chalk from 'chalk'
 
 /**
  * To keep a consistent color/style palette between cli packages, such as
- * @redwood/cli and @redwood/create-redwood-app, please keep them compatible
- * with one and another. We'll might split up and refactor these into a
- * separate package when there is a strong motivation behind it.
- *
- * Current files:
- *
- * - packages/cli/src/lib/colors.js (this file)
- * - packages/create-redwood-app/src/create-redwood-app.js
+ * @redwood/cli and @redwood/create-redwood-app, please only use the colors
+ * defined here. If you *really* can't find a color that fits your needs,
+ * it's better to add it here than to introduce a new one-off color in whatever
+ * package you're going to use it in.
  */
 export const colors = {
   error: chalk.bold.red,
-  warning: chalk.keyword('orange'),
-  green: chalk.green,
+  warning: chalk.hex('#ffa500'),
+  success: chalk.green,
   info: chalk.grey,
   bold: chalk.bold,
   underline: chalk.underline,
+
+  note: chalk.blue,
+  tip: chalk.green,
+  important: chalk.cyan,
+  caution: chalk.red,
 }

packages/cli-packages/dataMigrate/src/commands/upHandler.ts

@@ -50,7 +50,7 @@ export async function handler({
   const pendingDataMigrations = await getPendingDataMigrations(db)
 
   if (!pendingDataMigrations.length) {
-    console.info(c.green(`\n${NO_PENDING_MIGRATIONS_MESSAGE}\n`))
+    console.info(c.success(`\n${NO_PENDING_MIGRATIONS_MESSAGE}\n`))
     process.exitCode = 0
     return
   }
@@ -221,7 +221,7 @@ function reportDataMigrations(counters: {
 }) {
   if (counters.run) {
     console.info(
-      c.green(`${counters.run} data migration(s) completed successfully.`),
+      c.success(`${counters.run} data migration(s) completed successfully.`),
     )
   }
   if (counters.error) {

packages/cli-packages/dataMigrate/src/lib/colors.ts

@@ -1,11 +1,18 @@
-// This file will eventually be deduplicated across the framework
+// TODO: This file should be deduplicated across the framework
 // when we take the time to make architectural changes.
 
 import chalk from 'chalk'
 
 export default {
   error: chalk.bold.red,
-  warning: chalk.keyword('orange'),
-  green: chalk.green,
+  warning: chalk.hex('#ffa500'),
+  success: chalk.green,
+  info: chalk.grey,
   bold: chalk.bold,
+  underline: chalk.underline,
+
+  note: chalk.blue,
+  tip: chalk.green,
+  important: chalk.cyan,
+  caution: chalk.red,
 }

packages/cli/src/commands/deploy/helpers/helpers.js

@@ -47,7 +47,7 @@ export const deployHandler = async ({ build, prisma, dm: dataMigrate }) => {
 
   const joinedCommands = commandSet.join(' && ')
 
-  console.log(c.green(`\nRunning:\n`) + `${joinedCommands} \n`)
+  console.log(c.note(`\nRunning:\n`) + `${joinedCommands} \n`)
 
   return execa(joinedCommands, {
     shell: true,

packages/cli/src/commands/generate/directive/directive.js

@@ -114,19 +114,19 @@ export const handler = async (args) => {
     rollback: args.rollback,
   })
 
-  const POST_RUN_INSTRUCTIONS = `Next steps...\n\n   ${c.warning(
+  const POST_RUN_INSTRUCTIONS = `Next steps...\n\n   ${c.note(
     'After modifying your directive, you can add it to your SDLs e.g.:',
   )}
     ${c.info('// example todo.sdl.js')}
     ${c.info('# Option A: Add it to a field')}
     type Todo {
       id: Int!
-      body: String! ${c.green(`@${args.name}`)}
+      body: String! ${c.tip(`@${args.name}`)}
     }
 
     ${c.info('# Option B: Add it to query/mutation')}
     type Query {
-      todos: [Todo] ${c.green(`@${args.name}`)}
+      todos: [Todo] ${c.tip(`@${args.name}`)}
     }
 `
 

packages/cli/src/commands/prismaHandler.js

@@ -61,7 +61,7 @@ export const handler = async ({ _, $0, commands = [], ...options }) => {
   }
 
   console.log()
-  console.log(c.green('Running Prisma CLI...'))
+  console.log(c.note('Running Prisma CLI...'))
   console.log(c.underline('$ yarn prisma ' + args.join(' ')))
   console.log()
 

packages/cli/src/commands/setup/cache/cacheHandler.js

@@ -56,7 +56,7 @@ export const handler = async ({ client, force }) => {
       title: 'One more thing...',
       task: (_ctx, task) => {
         task.title = `One more thing...\n
-          ${c.green('Check out the Service Cache docs for config and usage:')}
+          ${c.tip('Check out the Service Cache docs for config and usage:')}
           ${chalk.hex('#e8e8e8')('https://redwoodjs.com/docs/services#caching')}
         `
       },

packages/cli/src/commands/setup/custom-web-index/custom-web-index-handler.js

@@ -48,7 +48,7 @@ export const handler = async ({ force }) => {
         title: 'One more thing...',
         task: (_ctx, task) => {
           task.title = `One more thing...\n
-          ${c.green(
+          ${c.tip(
             'Quick link to the docs on configuring a custom entry point for your RW app',
           )}
           ${chalk.hex('#e8e8e8')('https://redwoodjs.com/docs/custom-web-index')}

packages/cli/src/commands/setup/i18n/i18nHandler.js

@@ -178,7 +178,7 @@ export const handler = async ({ force }) => {
         title: 'One more thing...',
         task: (_ctx, task) => {
           task.title = `One more thing...\n
-          ${c.green('Quick link to the docs:')}\n
+          ${c.tip('Quick link to the docs:')}\n
           ${chalk.hex('#e8e8e8')(
             'https://react.i18next.com/guides/quick-start/',
           )}

packages/cli/src/commands/setup/monitoring/sentry/sentryHandler.ts

@@ -144,7 +144,7 @@ export const handler = async ({ force }: Args) => {
       title: 'One more thing...',
       task: (ctx) => {
         notes.push(
-          colors.green(
+          colors.important(
             'You will need to add `SENTRY_DSN` to `includeEnvironmentVariables` in redwood.toml.',
           ),
         )

packages/cli/src/commands/setup/tsconfig/tsconfigHandler.js

@@ -50,7 +50,7 @@ export const handler = async ({ force }) => {
         title: 'One more thing...',
         task: (_ctx, task) => {
           task.title = `One more thing...\n
-          ${c.green('Quick link to the docs on configuring TypeScript')}
+          ${c.tip('Quick link to the docs on configuring TypeScript')}
           ${chalk.hex('#e8e8e8')('https://redwoodjs.com/docs/typescript')}
         `
         },

packages/cli/src/commands/setup/webpack/webpackHandler.js

@@ -36,7 +36,7 @@ export const handler = async ({ force }) => {
         title: 'One more thing...',
         task: (_ctx, task) => {
           task.title = `One more thing...\n
-          ${c.green(
+          ${c.tip(
             'Quick link to the docs on configuring custom webpack config:',
           )}
           ${chalk.hex('#e8e8e8')(

packages/cli/src/commands/test.js

@@ -33,7 +33,7 @@ export const builder = (yargs) => {
       default: true,
     })
     .epilogue(
-      `For all available flags, run jest cli directly ${c.green(
+      `For all available flags, run jest cli directly ${c.tip(
         'yarn jest --help',
       )}\n\nAlso see the ${terminalLink(
         'Redwood CLI Reference',

packages/cli/src/lib/colors.js

@@ -13,9 +13,14 @@ import chalk from 'chalk'
  */
 export default {
   error: chalk.bold.red,
-  warning: chalk.keyword('orange'),
-  green: chalk.green,
+  warning: chalk.hex('#ffa500'),
+  success: chalk.green,
   info: chalk.grey,
   bold: chalk.bold,
   underline: chalk.underline,
+
+  note: chalk.blue,
+  tip: chalk.green,
+  important: chalk.cyan,
+  caution: chalk.red,
 }

packages/cli/src/middleware/checkNodeVersion.js

@@ -18,7 +18,7 @@ export function checkNodeVersion() {
   checks.message = [
     `Your Node.js version is ${c.warning(
       pVersion,
-    )}, but Redwood requires ${c.green(`>=${LOWER_BOUND}`)}.`,
+    )}, but Redwood requires ${c.important(`>=${LOWER_BOUND}`)}.`,
     'Upgrade your Node.js version using `nvm` or a similar tool. See https://redwoodjs.com/docs/how-to/using-nvm.',
   ].join('\n')