refactor(cli): Upgrade to ink3 and migrate code (#161)

Bojagi · Feb 17, 2021 · 6a86668 · 6a86668
1 parent 6deff13
commit 6a86668
Show file tree

Hide file tree

Showing 17 changed files with 205 additions and 224 deletions.
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
   "license" : "BSD-3-Clause",
   "devDependencies": {
     "@types/jest": "24.0.15",
+    "@types/react": "16.9.41",
     "@types/node": "12.12.6",
     "@types/request-promise": "4.1.45",
     "@typescript-eslint/eslint-plugin": "2.21.0",
@@ -38,6 +39,9 @@
     "tslint-plugin-prettier": "2.1.0",
     "typescript": "3.8.2"
   },
+  "resolutions": {
+    "@types/react": "16.9.41"
+  },
   "workspaces": [
     "packages/*"
   ]

diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -35,12 +35,11 @@
     "expose-loader": "^0.7.5",
     "express": "^4.17.1",
     "glob": "^7.1.6",
-    "ink": "^2.7.1",
-    "ink-box": "^1.0.0",
-    "ink-link": "^1.1.0",
-    "ink-select-input": "^3.1.2",
-    "ink-spinner": "^3.0.1",
-    "ink-text-input": "^3.3.0",
+    "ink": "^3.0.8",
+    "ink-link": "^2.0.0",
+    "ink-select-input": "^4.2.0",
+    "ink-spinner": "^4.0.1",
+    "ink-text-input": "^4.0.1",
     "jsdom": "^16.3.0",
     "jsdom-global": "^3.0.2",
     "memory-fs": "^0.5.0",
@@ -54,12 +53,12 @@
   "devDependencies": {
     "@types/axios": "0.14.0",
     "@types/node-emoji": "1.8.1",
-    "@types/react": "16.9.34",
     "@types/react-intl": "3.0.0",
     "@types/webpack": "4.41.22",
     "@types/webpack-dev-server": "3.10.1",
     "react": "16.13.1",
-    "typescript": "3.7.3",
+    "react-dom": "16.13.1",
+    "typescript": "^4.1.5",
     "webpack": "4.44.2"
   },
   "peerDependencies": {

diff --git a/packages/cli/src/components/Emoji.tsx b/packages/cli/src/components/Emoji.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Box } from 'ink';
+import { Box, Text } from 'ink';
 import * as nodeEmoji from 'node-emoji';
 
 export type EmojiCode = keyof typeof nodeEmoji.emoji | 'woman-shrugging';
@@ -14,7 +14,7 @@ export function Emoji({ code, marginRight = 0 }: EmojiProps) {
 
   return (
     <Box marginRight={marginRight} width={getEmojiWidth(code, emoji)}>
-      {emoji}
+      <Text>{emoji}</Text>
     </Box>
   );
 }

diff --git a/packages/cli/src/components/ErrorMessage.tsx b/packages/cli/src/components/ErrorMessage.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-empty-function */
 import * as React from 'react';
-import { Box, Color } from 'ink';
+import { Box, Text } from 'ink';
 import { Message } from './Message';
 import { NonVerboseError } from '../errors';
 
@@ -24,7 +24,7 @@ export function ErrorMessage({ error }: ErrorMessageProps) {
       <Message emoji="x">Error: {error.message}</Message>
       {error.stack && !(error as NonVerboseError).hideStackTrace && (
         <Box marginX={3} marginBottom={1}>
-          <Color red>{error.stack}</Color>
+          <Text color="red">{error.stack}</Text>
         </Box>
       )}
     </Box>

diff --git a/packages/cli/src/components/Inkuirer/index.tsx b/packages/cli/src/components/Inkuirer/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text, Color, Box } from 'ink';
+import { Text, Box } from 'ink';
 import { InputQuestion } from './InputQuestion';
 import { SelectQuestion } from './SelectQuestion';
 import { Question, Answer } from './types';
@@ -48,9 +48,7 @@ export function Inkuirer({ questions, onCompletion }: InkuirerProps) {
       {answers.map(answer => (
         <Box marginBottom={1} key={answer.name}>
           <Box marginRight={1}>
-            <Text>
-              <Color gray>{answer.message}:</Color>
-            </Text>
+            <Text color="gray">{answer.message}:</Text>
           </Box>
           <Text>{getDisplayableValue(answer)}</Text>
         </Box>
@@ -59,7 +57,8 @@ export function Inkuirer({ questions, onCompletion }: InkuirerProps) {
         <Box flexDirection="column">
           <Box marginBottom={1}>
             <Text>
-              {currentQuestion.message} <Color gray>({getDisplayableValue(currentQuestion)})</Color>
+              {currentQuestion.message}{' '}
+              <Text color="gray">({getDisplayableValue(currentQuestion)})</Text>
             </Text>
           </Box>
           {currentQuestion.type === 'input' && (

diff --git a/packages/cli/src/components/Message.tsx b/packages/cli/src/components/Message.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Box } from 'ink';
+import { Box, Text } from 'ink';
 import { Emoji, EmojiCode } from './Emoji';
 
 export type MessageProps = {
@@ -11,7 +11,9 @@ export function Message({ children, emoji }: MessageProps) {
   return (
     <Box marginX={3} marginBottom={1}>
       <Emoji code={emoji} marginRight={1} />
-      <Box flexGrow={1}>{children}</Box>
+      <Box flexGrow={1}>
+        <Text>{children}</Text>
+      </Box>
     </Box>
   );
 }
diff --git a/packages/cli/src/components/Step.tsx b/packages/cli/src/components/Step.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Color, Box } from 'ink';
+import { Text, Box } from 'ink';
 import Spinner from 'ink-spinner';
 import { Emoji, EmojiCode } from './Emoji';
 
@@ -38,13 +38,15 @@ export function Step({
         <StepStateComponent state={state} />
       </Box>
       <Emoji code={emoji} marginRight={1} />
-      <Box>{children}</Box>
+      <Box>
+        <Text>{children}</Text>
+      </Box>
       {!hideStepCount && maxSteps !== 1 && (
         <Box marginLeft={1}>
-          <Color grey>
+          <Text color="grey">
             ({stepNumber}
             {maxSteps && <>/{maxSteps}</>})
-          </Color>
+          </Text>
         </Box>
       )}
     </Box>

diff --git a/packages/cli/src/components/Steps.tsx b/packages/cli/src/components/Steps.tsx
@@ -7,22 +7,24 @@ export type StepsProps = {
 };
 
 export function Steps({ children }: StepsProps) {
-  const [innerChildren, setInnerChildren] = React.useState<React.ReactElement<StepProps>[]>([]);
-  React.useEffect(() => {
-    setInnerChildren(
-      children.map((child, i) =>
-        React.cloneElement(child, {
-          stepNumber: i + 1,
-          maxSteps: children.length,
-          ...child.props,
-          key: child.props.name,
-        })
-      )
-    );
-  }, [children, setInnerChildren]);
+  const stepChildren = React.useMemo(() => children.map(mapChild), [children]);
+
   return (
     <Box flexDirection="column" marginX={1}>
-      {innerChildren}
+      {stepChildren}
     </Box>
   );
 }
+
+function mapChild(
+  child: React.ReactElement<StepProps>,
+  i: number,
+  children: React.ReactElement<StepProps>[]
+) {
+  return React.cloneElement(child, {
+    stepNumber: i + 1,
+    maxSteps: children.length,
+    ...child.props,
+    key: child.props.name,
+  });
+}
diff --git a/packages/cli/src/components/SuccessMessage.tsx b/packages/cli/src/components/SuccessMessage.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Color } from 'ink';
+import { Text } from 'ink';
 import { Message } from './Message';
 
 export type SuccessMessageProps = {
@@ -9,7 +9,7 @@ export type SuccessMessageProps = {
 export function SuccessMessage({ runtime }: SuccessMessageProps) {
   return (
     <Message emoji="raised_hands">
-      We're done! Have a nice day! {runtime && <Color gray>Done in {runtime} seconds.</Color>}
+      We're done! Have a nice day! {runtime && <Text color="gray">Done in {runtime} seconds.</Text>}
     </Message>
   );
 }
diff --git a/packages/cli/src/containers/PreviewContainer/DevServerMessage.tsx b/packages/cli/src/containers/PreviewContainer/DevServerMessage.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Box, Color } from 'ink';
+import { Box, Text, Newline } from 'ink';
 import Spinner from 'ink-spinner';
 import { Message } from '../../components/Message';
 
@@ -13,10 +13,14 @@ export function DevServerMessage({
 }) {
   if (setupError) {
     return (
-      <Box marginX={3} marginBottom={1} flexDirection="column">
-        <Color red>Something went wrong:</Color>
-        <Box>{setupError.message}</Box>
-        <Box>{setupError.stack}</Box>
+      <Box marginX={3} marginBottom={1}>
+        <Text>
+          <Text color="red">Something went wrong:</Text>
+          <Newline />
+          {setupError.message}
+          <Newline />
+          {setupError.stack}
+        </Text>
       </Box>
     );
   }
@@ -40,9 +44,11 @@ export function DevServerMessage({
   if (errors.length > 0) {
     return (
       <Box marginX={3} marginBottom={1} flexDirection="column">
-        <Color red>Following compile errors happened:</Color>
+        <Text color="red">Following compile errors happened:</Text>
         {errors.map(err => (
-          <Box key={err.message}>{err.message}</Box>
+          <Box key={err.message}>
+            <Text>{err.message}</Text>
+          </Box>
         ))}
       </Box>
     );

diff --git a/packages/cli/src/containers/PreviewContainer/index.tsx b/packages/cli/src/containers/PreviewContainer/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Box, Color, Text } from 'ink';
+import { Box, Text } from 'ink';
 import { Message } from '../../components/Message';
 import { useWebpackDevServer } from './useWebpackDevServer';
 import { useConfig } from '../../config/configContext';
@@ -13,8 +13,6 @@ import { storybookStep } from '../../steps/storybook';
 import { getStepOutputFiles } from '../../utils/getOutputFiles';
 import { FileContent, OutputFileContent } from '../../types';
 
-import BorderBox = require('ink-box');
-
 export type PreviewContainerProps = {};
 
 const steps: StepRunnerStep[] = [
@@ -57,17 +55,14 @@ export function PreviewContainer() {
         setupError={setupError}
       />
       {devServer && (
-        <BorderBox
-          borderStyle="round"
-          borderColor="grey"
-          padding={1}
-          margin={{ left: 3, right: 3, bottom: 1 }}
-        >
-          Preview Server <Color green>running</Color> on{' '}
-          <Color cyan>
-            <Text underline>http://localhost:{config.previewPort}</Text>
-          </Color>
-        </BorderBox>
+        <Box borderStyle="round" borderColor="grey" padding={1} marginX={3} marginBottom={1}>
+          <Text>
+            Preview Server <Text color="green">running</Text> on{' '}
+            <Text color="cyan">
+              <Text underline>http://localhost:{config.previewPort}</Text>
+            </Text>
+          </Text>
+        </Box>
       )}
     </Box>
   );

diff --git a/packages/cli/src/steps/compile/index.tsx b/packages/cli/src/steps/compile/index.tsx
@@ -1,4 +1,4 @@
-import MemoryFS from 'memory-fs';
+import * as MemoryFS from 'memory-fs';
 import * as path from 'path';
 import { StoryFileWithMetadata, FileContent, OutputFileContent } from '../../types';
 import { StepRunnerStep, StepRunnerActionOptions, StepOutput } from '../../containers/StepRunner';

diff --git a/packages/cli/src/steps/scan/index.tsx b/packages/cli/src/steps/scan/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Color } from 'ink';
+import { Text } from 'ink';
 import * as path from 'path';
 import { StoryWithMetadata } from '../../types';
 import { StepRunnerStep, StepRunnerActionOptions, StepOutput } from '../../containers/StepRunner';
@@ -25,7 +25,7 @@ export const scanStep: StepRunnerStep<ScanStepOutput> = {
     running: () => 'Searching for stories',
     success: ({ storyFileCount }) => (
       <>
-        We found <Color green>{storyFileCount}</Color> story files
+        We found <Text color="green">{storyFileCount}</Text> story files
       </>
     ),
     error: () => 'No stories found',

diff --git a/packages/cli/src/steps/validate/index.tsx b/packages/cli/src/steps/validate/index.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable max-classes-per-file */
 import * as React from 'react';
 import axios from 'axios';
-import { Color } from 'ink';
+import { Text } from 'ink';
 import { StepRunnerStep, StepRunnerActionOptions, StepOutput } from '../../containers/StepRunner';
 import { MANIFEST_VERSION } from '../../constants';
 import { Emoji } from '../../components/Emoji';
@@ -116,7 +116,7 @@ function SuccessResponse({
   if (status === VersionStatuses.DEPRECATED) {
     return (
       <>
-        <Emoji code="warning" /> <Color yellow>{deprecationMessage}</Color> (support ends{' '}
+        <Emoji code="warning" /> <Text color="yellow">{deprecationMessage}</Text> (support ends{' '}
         {supportEnd})
       </>
     );

diff --git a/packages/cli/tsconfig.json b/packages/cli/tsconfig.json
@@ -3,8 +3,7 @@
   "compilerOptions": {
     "rootDir": "src",
     "outDir": "lib",
-    "jsx": "react",
-    "esModuleInterop": true
+    "jsx": "react"
   },
   "include": [
     "src/**/*"

diff --git a/tsconfig.settings.json b/tsconfig.settings.json
@@ -6,7 +6,7 @@
     "declarationMap": true,
     "sourceMap": true,
     // These settings are totally up to you
-    "allowSyntheticDefaultImports": false,
+    "allowSyntheticDefaultImports": true,
     "allowJs": true,
     "target": "ES5",
     "module": "commonjs",