wip new init flow

cli/introspection/src/bin.ts

@@ -44,3 +44,7 @@ main()
     console.error(err)
     process.exit(1)
   })
+
+process.on('unhandledRejection', e => {
+  console.error(e)
+})

cli/introspection/src/commands/Introspect.ts

@@ -1,9 +1,9 @@
 import { arg, Command, Env, format, isError } from '@prisma/cli'
 import { Result } from 'arg'
 import chalk from 'chalk'
-import * as fs from 'fs'
+import fs from 'fs'
 import ora from 'ora'
-import * as path from 'path'
+import path from 'path'
 import { DatabaseType } from 'prisma-datamodel'
 import {
   assertSchemaExists,
@@ -315,9 +315,3 @@ Flags:
     )
   }
 }
-
-// async function run() {
-//   await Introspect.new().parse(process.argv.slice(2))
-// }
-
-// run()

cli/introspection/src/prompt/InteractivePrompt.tsx

@@ -1,5 +1,5 @@
 import { DatabaseType } from 'prisma-datamodel'
-import * as React from 'react'
+import React from 'react'
 import { ConnectorData } from '../introspect/util'
 import {
   DatabaseCredentials,

cli/introspection/src/prompt/components/BoxPrompt.tsx

@@ -1,8 +1,8 @@
 import { Box, Color, Text } from 'ink'
-import * as React from 'react'
+import React from 'react'
 import stripAnsi from 'strip-ansi'
 import { COLORS } from '../colors'
-import { Checkbox } from './Checkbox'
+import { Checkbox } from './inputs/Checkbox'
 import { Divider } from './Divider'
 import {
   ActionKey,
@@ -15,8 +15,7 @@ import {
   up,
 } from './helpers'
 import { RadioButton } from './RadioButton'
-import { SelectIndicator, SelectItem } from './SelectItem'
-import { TextInput } from './TextInput'
+import { TextInput } from './inputs/TextInput'
 import { CheckboxElement, InputElement, PromptElement, RadioElement, SpinnerState } from '../types'
 import { useStdin } from '../useStdin'
 
@@ -149,13 +148,11 @@ export const Prompt: React.FC<Props> = props => {
           if (isElementInput(e)) {
             return (
               <Box key={elemIndex} {...e.style}>
-                {hasFocus ? <SelectIndicator color={{ cyan: true }} /> : <Box marginLeft={1} marginRight={1} />}
                 <TextInput
                   {...e}
                   value={(props.formValues[e.identifier] && props.formValues[e.identifier].toString()) || ''}
-                  focus={hasFocus}
                   onChange={value => onInputChange(value, e)}
-                  keyPressed={lastKeyPressed}
+                  tabIndex={elemIndex}
                 />
               </Box>
             )
@@ -164,17 +161,11 @@ export const Prompt: React.FC<Props> = props => {
           if (isElementCheckbox(e)) {
             return (
               <Box key={elemIndex} {...e.style}>
-                {hasFocus ? (
-                  <SelectIndicator color={{ [COLORS.selection]: true }} />
-                ) : (
-                  <Box marginLeft={1} marginRight={1} />
-                )}
                 <Checkbox
                   {...e}
                   checked={props.formValues[e.identifier] || false}
                   onChange={value => onInputChange(value, e)}
-                  keyPressed={lastKeyPressed}
-                  focus={hasFocus}
+                  tabIndex={123}
                 />
               </Box>
             )
@@ -185,19 +176,13 @@ export const Prompt: React.FC<Props> = props => {
 
             return (
               <Box key={elemIndex} {...e.style}>
-                {hasFocus ? (
-                  <SelectIndicator color={{ [COLORS.selection]: true }} />
-                ) : (
-                  <Box marginLeft={1} marginRight={1} />
-                )}
                 <RadioButton
                   label={e.label}
                   value={e.value}
                   checked={checked}
-                  keyPressed={lastKeyPressed}
-                  focus={hasFocus}
                   description={e.description}
                   onChange={value => onInputChange(value, e)}
+                  tabIndex={54}
                 />
               </Box>
             )
@@ -212,38 +197,11 @@ export const Prompt: React.FC<Props> = props => {
           }
 
           if (isElementSelect(e)) {
-            return (
-              <Box key={elemIndex} {...e.style}>
-                <SelectItem
-                  {...e}
-                  focus={hasFocus}
-                  spinnerState={spinnersByCursor[elemIndex]}
-                  onSelect={async value => {
-                    const spinner = spinnersByCursor[elemIndex]
-
-                    if (!spinner || spinner.state !== 'running') {
-                      return submitPrompt(value, false, elemIndex)
-                    }
-                  }}
-                />
-              </Box>
-            )
+            return <Box key={elemIndex} {...e.style} />
           }
           return null
         })}
       </Box>
-      {props.withBackButton && (
-        <SelectItem
-          label={props.withBackButton.label}
-          description={props.withBackButton.description}
-          isBackButton
-          onSelect={() => {
-            submitPrompt(undefined, true, elementsWithBack.length - 1)
-          }}
-          focus={cursor === elementsWithBack.length - 1}
-          spinnerState={undefined}
-        />
-      )}
     </Box>
   )
 }

cli/introspection/src/prompt/components/Divider.tsx

@@ -1,5 +1,5 @@
 import { Box, Color } from 'ink'
-import * as React from 'react'
+import React from 'react'
 import stringWidth from 'string-width'
 
 interface Props {

cli/introspection/src/prompt/components/Link.tsx

@@ -0,0 +1,71 @@
+import { Box, Color } from 'ink'
+import React, { useContext, useEffect, useState } from 'react'
+import { BACK_SYMBOL } from './helpers'
+import figures = require('figures')
+import { TabIndexContext } from './TabIndex'
+import { Key } from 'readline'
+
+export type LinkKind = 'back' | 'forward'
+
+export interface Props {
+  label: string
+  value?: any
+  description?: string
+  kind?: LinkKind
+  padding?: number
+  tabIndex: number
+  href: string
+}
+
+function getSymbol(kind?: LinkKind) {
+  if (kind && kind === 'back') {
+    return BACK_SYMBOL
+  }
+
+  return figures.pointer
+}
+
+export const Link: React.FC<Props> = props => {
+  const { tabIndex, kind, description } = props
+
+  const [focussed, setFocussed] = useState(false)
+  const ctx = useContext(TabIndexContext)
+
+  useEffect(() => {
+    const args = {
+      tabIndex,
+      onFocus(focus: boolean) {
+        setFocussed(focus)
+      },
+      onKey(key: Key) {
+        // TODO: Add arrow left & arrow right
+        if (key.name === 'return') {
+          // DO SOMETHING
+        }
+      },
+    }
+    ctx.register(args)
+    return () => {
+      ctx.unregister(args)
+    }
+  })
+
+  const padding = props.padding || 20
+
+  const backOrForward = kind && (kind === 'back' || kind === 'forward')
+  const showSymbol = focussed || backOrForward
+
+  return (
+    <Box>
+      <Color cyan={focussed}>
+        <Box width={14} marginRight={2}>
+          <Color bold dim={!focussed && backOrForward}>
+            {showSymbol ? getSymbol(kind) : ' '}
+          </Color>{' '}
+          <Color {...{ bold: focussed }}>{props.label.padEnd(padding)}</Color>
+        </Box>
+        <Color dim>{description || ''}</Color>
+      </Color>
+    </Box>
+  )
+}

cli/introspection/src/prompt/components/RadioButton.tsx

@@ -1,36 +1,50 @@
-import * as figures from 'figures'
+import figures from 'figures'
 import { Box, Color } from 'ink'
-import * as React from 'react'
+import React, { useState, useContext, useEffect } from 'react'
 import { COLORS } from '../colors'
 import { KeyPressed } from './BoxPrompt'
+import { TabIndexContext } from './TabIndex'
+import { Key } from 'readline'
 
 interface Props {
   label: string
   value: string
   description?: string
-  keyPressed: KeyPressed
   checked: boolean
-  focus: boolean
   onChange: (value: string) => void
+  tabIndex: number
 }
 
 export const RadioButton: React.FC<Props> = props => {
-  const symbol = props.checked ? figures.radioOn : figures.radioOff
-  const { label, checked, focus, onChange, value, keyPressed } = props
+  const { label, checked, onChange, value, tabIndex } = props
 
-  React.useEffect(() => {
-    if (focus && keyPressed.key === 'submit') {
-      onChange(value)
+  const [focussed, setFocussed] = useState(false)
+  const ctx = useContext(TabIndexContext)
+
+  useEffect(() => {
+    const args = {
+      tabIndex,
+      onFocus(focus: boolean) {
+        setFocussed(focus)
+      },
+      onKey(key: Key) {
+        if (key.name === 'space') {
+          onChange(value)
+        }
+      },
+    }
+    ctx.register(args)
+    return () => {
+      ctx.unregister(args)
     }
-  }, [checked, focus, keyPressed.key])
+  })
 
   return (
     <Box>
-      {checked || focus ? <Color keyword={COLORS.selection}>{symbol}</Color> : symbol}
-      <Box marginLeft={1}>
-        {checked || focus ? <Color keyword={COLORS.selection}>{label.padEnd(20)}</Color> : label.padEnd(20)}
-      </Box>
-      <Color dim>{props.description ? props.description.padEnd(20) : ''}</Color>
+      <Color keyword={focussed ? COLORS.selection : 'visible'}>
+        {checked ? figures.radioOn : figures.radioOff} {label.padEnd(20)}
+        <Color dim>{props.description ? props.description.padEnd(20) : ''}</Color>
+      </Color>
     </Box>
   )
 }