From ae018f5176f944e4884225e7889ff2c782cbe8fc Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 8 Jun 2024 03:52:56 +0900
Subject: [PATCH] feat(cli): add Choice component

This commit includes the addition of a new component, Choice, that presents two options yes or no to the user. The user can interact with this component using the up and down arrow keys. Based on this selection, different actions can be submitted. The feature also supports unicode if the environment supports it.
---
 packages/cli/src/components/Choice.tsx | 63 ++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 packages/cli/src/components/Choice.tsx

diff --git a/packages/cli/src/components/Choice.tsx b/packages/cli/src/components/Choice.tsx
new file mode 100644
index 0000000..3821961
--- /dev/null
+++ b/packages/cli/src/components/Choice.tsx
@@ -0,0 +1,63 @@
+import React, {useState} from 'react'
+import {Box, Text, useInput} from 'ink'
+
+function isUnicodeSupported() {
+  if (process.platform !== 'win32') {
+    return process.env['TERM'] !== 'linux' // Linux console (kernel)
+  }
+
+  return (
+    Boolean(process.env['WT_SESSION']) || // Windows Terminal
+    Boolean(process.env['TERMINUS_SUBLIME']) || // Terminus (<0.2.27)
+    process.env['ConEmuTask'] === '{cmd::Cmder}' || // ConEmu and cmder
+    process.env['TERM_PROGRAM'] === 'Terminus-Sublime' ||
+    process.env['TERM_PROGRAM'] === 'vscode' ||
+    process.env['TERM'] === 'xterm-256color' ||
+    process.env['TERM'] === 'alacritty' ||
+    process.env['TERMINAL_EMULATOR'] === 'JetBrains-JediTerm'
+  )
+}
+
+const shouldUseMain = isUnicodeSupported()
+const SELECTED: string = shouldUseMain ? '◉' : '(*)'
+const UNSELECTED: string = shouldUseMain ? '◯' : '( )'
+
+export function Choice({
+  question,
+  yes,
+  no,
+  onSubmit,
+  initial,
+}: {
+  question: string
+  yes: string
+  no: string
+  onSubmit?: (vaule: 'yes' | 'no') => void
+  initial?: 'yes' | 'no'
+}) {
+  const [state, setState] = useState<'yes' | 'no'>(initial ?? 'yes')
+
+  useInput((_, k) => {
+    if (k.upArrow) {
+      setState('yes')
+    } else if (k.downArrow) {
+      setState('no')
+    }
+
+    if (k.return) {
+      onSubmit?.(state)
+    }
+  })
+
+  return (
+    <Box display={'flex'} flexDirection={'column'}>
+      <Text color={'greenBright'}>{question}</Text>
+      <Text color={state === 'yes' ? undefined : 'gray'}>
+        {state === 'yes' ? SELECTED : UNSELECTED} {yes}
+      </Text>
+      <Text color={state === 'no' ? undefined : 'gray'}>
+        {state === 'no' ? SELECTED : UNSELECTED} {no}
+      </Text>
+    </Box>
+  )
+}