chore(gatsby-cli): migrate messages to typescript (#22084)

* migrate constant.js to ts

* migrate messages component and utils to typescript

* change constant objects to enums

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

Co-Authored-By: Michaël De Boey <info@michaeldeboey.be>

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

Co-Authored-By: Michaël De Boey <info@michaeldeboey.be>

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

Co-Authored-By: Michaël De Boey <info@michaeldeboey.be>

* formatted

Co-authored-by: Michaël De Boey <info@michaeldeboey.be>

Author: cola119

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

@@ -0,0 +1,44 @@
+export enum Actions {
+  LogAction = `LOG_ACTION`,
+  SetStatus = `SET_STATUS`,
+  Log = `LOG`,
+  SetLogs = `SET_LOGS`,
+
+  StartActivity = `ACTIVITY_START`,
+  EndActivity = `ACTIVITY_END`,
+  UpdateActivity = `ACTIVITY_UPDATE`,
+  PendingActivity = `ACTIVITY_PENDING`,
+  CancelActivity = `ACTIVITY_CANCEL`,
+  ActivityErrored = `ACTIVITY_ERRORED`,
+}
+
+export enum LogLevels {
+  Debug = `DEBUG`,
+  Success = `SUCCESS`,
+  Info = `INFO`,
+  Warning = `WARNING`,
+  Log = `LOG`,
+  Error = `ERROR`,
+}
+
+export enum ActivityLogLevels {
+  Success = `ACTIVITY_SUCCESS`,
+  Failed = `ACTIVITY_FAILED`,
+  Interrupted = `ACTIVITY_INTERRUPTED`,
+}
+
+export enum ActivityStatuses {
+  InProgress = `IN_PROGRESS`,
+  NotStarted = `NOT_STARTED`,
+  Interrupted = `INTERRUPTED`,
+  Failed = `FAILED`,
+  Success = `SUCCESS`,
+  Cancelled = `CANCELLED`,
+}
+
+export enum ActivityTypes {
+  Spinner = `spinner`,
+  Hidden = `hidden`,
+  Progress = `progress`,
+  Pending = `pending`,
+}

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

@@ -0,0 +1,70 @@
+import React, { FunctionComponent } from "react"
+import { Box, Color, ColorProps } from "ink"
+
+import { ActivityLogLevels, LogLevels } from "../../../constants"
+
+const ColorSwitcher: FunctionComponent<ColorProps> = ({
+  children,
+  ...props
+}) => <Color {...props}>{children}</Color>
+
+const createLabel = (
+  text: string,
+  color: string
+): FunctionComponent<ColorProps> => (...props): JSX.Element => (
+  <ColorSwitcher {...{ [color]: true, ...props }}>{text}</ColorSwitcher>
+)
+
+const getLabel = (
+  level: ActivityLogLevels | 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: ActivityLogLevels | 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>
+    )
+  }
+)