chore(cli): migrate messages to typescript

packages/gatsby-cli/src/reporter/constants.js → packages/gatsby-cli/src/reporter/constants.ts

@@ -10,7 +10,7 @@ export const Actions = {
   PendingActivity: `ACTIVITY_PENDING`,
   CancelActivity: `ACTIVITY_CANCEL`,
   ActivityErrored: `ACTIVITY_ERRORED`,
-}
+} as const
 
 export const LogLevels = {
   Debug: `DEBUG`,
@@ -19,13 +19,13 @@ export const LogLevels = {
   Warning: `WARNING`,
   Log: `LOG`,
   Error: `ERROR`,
-}
+} as const
 
 export const ActivityLogLevels = {
   Success: `ACTIVITY_SUCCESS`,
   Failed: `ACTIVITY_FAILED`,
   Interrupted: `ACTIVITY_INTERRUPTED`,
-}
+} as const
 
 export const ActivityStatuses = {
   InProgress: `IN_PROGRESS`,
@@ -34,11 +34,11 @@ export const ActivityStatuses = {
   Failed: `FAILED`,
   Success: `SUCCESS`,
   Cancelled: `CANCELLED`,
-}
+} as const
 
 export const ActivityTypes = {
   Spinner: `spinner`,
   Hidden: `hidden`,
   Progress: `progress`,
   Pending: `pending`,
-}
+} as const

packages/gatsby-cli/src/reporter/loggers/ink/components/messages.tsx

@@ -0,0 +1,70 @@
+import React from "react"
+import { Box, Color, ColorProps } from "ink"
+
+import { ActivityLogLevels, LogLevels } from "../../../constants"
+
+const ColorSwitcher: React.FC<ColorProps> = ({ children, ...props }) => (
+  <Color {...props}>{children}</Color>
+)
+
+const createLabel = (text: string, color: string): React.FC<ColorProps> => (
+  ...props
+): JSX.Element => (
+  <ColorSwitcher {...{ [color]: true, ...props }}>{text}</ColorSwitcher>
+)
+
+type ValueOf<T> = T[keyof T]
+
+const getLabel = (
+  level: ValueOf<typeof ActivityLogLevels> | ValueOf<typeof LogLevels>
+): ReturnType<typeof createLabel> => {
+  switch (level) {
+    case ActivityLogLevels.Success:
+    case LogLevels.Success:
+      return createLabel(`success`, `green`)
+    case LogLevels.Warning:
+      return createLabel(`warn`, `yellow`)
+    case LogLevels.Debug:
+      return createLabel(`verbose`, `gray`)
+    case LogLevels.Info:
+      return createLabel(`info`, `blue`)
+    case ActivityLogLevels.Failed:
+      return createLabel(`failed`, `red`)
+    case ActivityLogLevels.Interrupted:
+      return createLabel(`not finished`, `gray`)
+
+    default:
+      return createLabel(level, `blue`)
+  }
+}
+
+interface IProps {
+  level: ValueOf<typeof ActivityLogLevels> | ValueOf<typeof LogLevels>
+  text: string
+  duration: number
+  statusText: string
+}
+export const Message = React.memo<IProps>(
+  ({ level, text, duration, statusText }) => {
+    let message = text
+    if (duration) {
+      message += ` - ${duration.toFixed(3)}s`
+    }
+    if (statusText) {
+      message += ` - ${statusText}`
+    }
+    if (!level || level === `LOG`) {
+      return <>{message}</>
+    }
+
+    const TextLabel = getLabel(level)
+
+    return (
+      <Box textWrap="wrap" flexDirection="row">
+        <TextLabel />
+        {` `}
+        {message}
+      </Box>
+    )
+  }
+)