@jakubmazanec/cli 0.1.0-a500263 → 0.1.0-c2efc51

package/src/program/Program.ts

@@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any -- needed */
 import {type ParametersConfig, type Argv, type OptionsConfig} from '@jakubmazanec/args';
+import {type ComponentType} from 'react';
+import {type FallbackProps} from 'react-error-boundary';
 
 import {type Command} from './Command.js';
 import {ProgramError} from './ProgramError.js';
@@ -9,7 +11,7 @@ import {Wrapper} from '../ui/internals.js';
 import {Failure, Help} from '../ui.js';
 
 /**
- * Program manages and executes {@linkcode Program} instances attached to it based on parsing command line arguments.
+ * Program manages and executes {@link Command} instances attached to it based on parsing command line arguments.
  */
 export class Program {
   /** Program name. */
@@ -37,7 +39,10 @@ export class Program {
     stdout: process.stdout,
   };
 
-  constructor({name, version, description, bin}: ProgramOptions) {
+  /** Custom error boundary fallback component */
+  ErrorBoundaryFallbackComponent: ComponentType<FallbackProps>;
+
+  constructor({name, version, description, bin, ErrorBoundaryFallbackComponent}: ProgramOptions) {
     if (name) {
       this.name = name;
     }
@@ -53,6 +58,12 @@ export class Program {
     if (bin) {
       this.bin = bin;
     }
+
+    if (ErrorBoundaryFallbackComponent) {
+      this.ErrorBoundaryFallbackComponent = ErrorBoundaryFallbackComponent;
+    } else {
+      this.ErrorBoundaryFallbackComponent = Failure;
+    }
   }
 
   /**
@@ -70,6 +81,8 @@ export class Program {
 
   /**
    * Renders a React element using Ink and outputs to the configured streams.
+   *
+   * @param element The React element to render.
    */
   async renderElement(element: React.ReactElement): Promise<void> {
     if (this.isRendering) {
@@ -92,7 +105,9 @@ export class Program {
       });
     } catch (error: unknown) {
       if (error instanceof Error) {
-        await this.renderElement(createElement(Failure, {error}));
+        await this.renderElement(
+          createElement(this.ErrorBoundaryFallbackComponent, {error, resetErrorBoundary: () => {}}),
+        );
       }
     } finally {
       this.isRendering = false;
@@ -117,10 +132,28 @@ export class Program {
           let {createElement} = await import('react');
 
           for (let error of parsedArgs.errors) {
-            await this.renderElement(createElement(Failure, {error}));
+            await this.renderElement(
+              createElement(this.ErrorBoundaryFallbackComponent, {
+                error,
+                resetErrorBoundary: () => {},
+              }),
+            );
           }
         } else {
-          await command.run(parsedArgs, this);
+          try {
+            await command.run(parsedArgs, this);
+          } catch (error: unknown) {
+            let {createElement} = await import('react');
+
+            if (error instanceof Error) {
+              await this.renderElement(
+                createElement(this.ErrorBoundaryFallbackComponent, {
+                  error,
+                  resetErrorBoundary: () => {},
+                }),
+              );
+            }
+          }
 
           break;
         }

package/src/program/ProgramOptions.ts

@@ -1,5 +1,8 @@
+import {type ComponentType} from 'react';
+import {type FallbackProps} from 'react-error-boundary';
+
 /**
- * Options for creating new {@linkcode Program} instance.
+ * {@link Project.constructor | Program constructor} options parameter.
  */
 export type ProgramOptions = {
   /** Program name. */
@@ -13,4 +16,7 @@ export type ProgramOptions = {
 
   /** Program executable name. */
   bin?: string | undefined;
+
+  /** Custom error boundary fallback component */
+  ErrorBoundaryFallbackComponent?: ComponentType<FallbackProps>;
 };

package/src/program/ProgramStreams.ts

@@ -1,5 +1,5 @@
 /**
- * {@linkcode Program} streams;
+ * {@link Program} streams;
  */
 export type ProgramStreams = {
   stderr: NodeJS.WriteStream;

package/src/ui/Failure.tsx

@@ -7,10 +7,10 @@ import {Header} from './Header.js';
 import * as icons from './icons.js';
 
 /**
- * {@linkcode Failure} component props.
+ * {@link Failure} component props.
  */
 export type FailureProps = BoxProps & {
-  /** Error that describes a failure state. Function {@linkcode getErrorDetail} is used for getting all the information from the error; you can use it to implement own retrieval logic and pass the result as `errorDetail` prop. */
+  /** Error that describes a failure state. Function {@link getErrorDetail} is used for getting all the information from the error; you can use it to implement own retrieval logic and pass the result as `errorDetail` prop. */
   error: Error;
 
   /** Information about the failure state. Overrides information retireved from `error` prop. */

package/src/ui/Header.tsx

@@ -4,7 +4,7 @@ import {type PropsWithChildren} from 'react';
 import {Spinner} from './Spinner.js';
 
 /**
- * {@linkcode Header} component props.
+ * {@link Header} component props.
  */
 export type HeaderProps = BoxProps & {
   /** Icon (recommended is 1 character) to render before the header itself. */

package/src/ui/Help.tsx

@@ -7,10 +7,10 @@ import * as icons from './icons.js';
 import {type Program} from '../program.js';
 
 /**
- * {@linkcode Help} component props.
+ * {@link Help} component props.
  */
 export type HelpProps = BoxProps & {
-  /** {@linkcode Program} instance. */
+  /** {@link Program} instance. */
   program: Program;
 };
 

package/src/ui/form/SelectInput.tsx

@@ -1,6 +1,6 @@
 import {Box, type BoxProps, Text, useInput, type Key} from 'ink';
 import _ from 'lodash';
-import {useState, useEffect, useRef, useCallback} from 'react';
+import {useState, useEffect, useRef} from 'react';
 
 import {type SelectInputItem} from './SelectInputItem.js';
 import * as colors from '../colors.js';
@@ -8,7 +8,7 @@ import * as icons from '../icons.js';
 import {rotate} from '../internals.js';
 
 /**
- * Select input component props.
+ * {@linkcode SelectInput} component props.
  */
 type SelectInputProps = BoxProps & {
   /** Text to display as a label. */
@@ -17,7 +17,7 @@ type SelectInputProps = BoxProps & {
   /** Items to display in a list. */
   items: SelectInputItem[];
 
-  /** Should component listen to Listen to user's input? Useful in case there are multiple input components at the same time and input must be "routed" to a specific component. */
+  /** Should component listen to user's input? Useful in case there are multiple input components at the same time and input must be handled only by a specific component. */
   focus?: boolean | undefined;
 
   /** Index of initially selected item. */
@@ -44,17 +44,16 @@ export function SelectInput({
   items = [],
   focus = true,
   initialIndex = 0,
-  limit: customLimit,
+  limit: userDefinedLimit,
   onSelect,
   onHighlight,
-  marginTop = 0,
   isComplete,
   ...boxProps
 }: SelectInputProps): JSX.Element {
-  let [rotateIndex, setRotateIndex] = useState(0);
+  let [rotatedIndex, setRotatedIndex] = useState(0);
   let [selectedIndex, setSelectedIndex] = useState(initialIndex);
-  let hasLimit = typeof customLimit === 'number' && items.length > customLimit;
-  let limit = hasLimit ? Math.min(customLimit as number, items.length) : items.length;
+  let hasLimit = typeof userDefinedLimit === 'number' && items.length > userDefinedLimit;
+  let limit = hasLimit ? Math.min(userDefinedLimit as number, items.length) : items.length;
   let previousItems = useRef<SelectInputItem[]>(items);
 
   useEffect(() => {
@@ -64,26 +63,26 @@ export function SelectInput({
         items.map((item) => item.value),
       )
     ) {
-      setRotateIndex(0);
+      setRotatedIndex(0);
       setSelectedIndex(0);
     }
 
     previousItems.current = items;
   }, [items]);
 
-  let inputHandler = useCallback(
+  useInput(
     (input: string, key: Key) => {
       if (input === 'k' || key.upArrow) {
         let lastIndex = (hasLimit ? limit : items.length) - 1;
-        let atFirstIndex = selectedIndex === 0;
+        let isAtFirstIndex = selectedIndex === 0;
         let nextIndex = hasLimit ? selectedIndex : lastIndex;
-        let nextRotateIndex = atFirstIndex ? rotateIndex + 1 : rotateIndex;
-        let nextSelectedIndex = atFirstIndex ? nextIndex : selectedIndex - 1;
+        let nextRotatedIndex = isAtFirstIndex ? rotatedIndex + 1 : rotatedIndex;
+        let nextSelectedIndex = isAtFirstIndex ? nextIndex : selectedIndex - 1;
 
-        setRotateIndex(nextRotateIndex);
+        setRotatedIndex(nextRotatedIndex);
         setSelectedIndex(nextSelectedIndex);
 
-        let slicedItems = hasLimit ? rotate(items, nextRotateIndex).slice(0, limit) : items;
+        let slicedItems = hasLimit ? rotate(items, nextRotatedIndex).slice(0, limit) : items;
 
         if (typeof onHighlight === 'function') {
           onHighlight(slicedItems[nextSelectedIndex] as SelectInputItem);
@@ -93,13 +92,13 @@ export function SelectInput({
       if (input === 'j' || key.downArrow) {
         let isAtLastIndex = selectedIndex === (hasLimit ? limit : items.length) - 1;
         let nextIndex = hasLimit ? selectedIndex : 0;
-        let nextRotateIndex = isAtLastIndex ? rotateIndex - 1 : rotateIndex;
+        let nextRotatedIndex = isAtLastIndex ? rotatedIndex - 1 : rotatedIndex;
         let nextSelectedIndex = isAtLastIndex ? nextIndex : selectedIndex + 1;
 
-        setRotateIndex(nextRotateIndex);
+        setRotatedIndex(nextRotatedIndex);
         setSelectedIndex(nextSelectedIndex);
 
-        let slicedItems = hasLimit ? rotate(items, nextRotateIndex).slice(0, limit) : items;
+        let slicedItems = hasLimit ? rotate(items, nextRotatedIndex).slice(0, limit) : items;
 
         if (typeof onHighlight === 'function') {
           onHighlight(slicedItems[nextSelectedIndex] as SelectInputItem);
@@ -107,20 +106,18 @@ export function SelectInput({
       }
 
       if (key.return) {
-        let slicedItems = hasLimit ? rotate(items, rotateIndex).slice(0, limit) : items;
+        let slicedItems = hasLimit ? rotate(items, rotatedIndex).slice(0, limit) : items;
 
         if (typeof onSelect === 'function') {
           onSelect(slicedItems[selectedIndex] as SelectInputItem);
         }
       }
     },
-    [hasLimit, limit, rotateIndex, selectedIndex, items, onSelect, onHighlight],
+    {isActive: focus},
   );
 
-  useInput(inputHandler, {isActive: focus});
-
-  let visibleItem: SelectInputItem[] = hasLimit
-    ? rotate(items, rotateIndex).slice(0, limit)
+  let visibleItems: SelectInputItem[] = hasLimit
+    ? rotate(items, rotatedIndex).slice(0, limit)
     : items;
 
   return (
@@ -139,7 +136,7 @@ export function SelectInput({
           </Text>
         ) : (
           <Box flexDirection="column">
-            {visibleItem.map((item, index) => {
+            {visibleItems.map((item, index) => {
               let isSelected = index === selectedIndex;
 
               return (
@@ -151,9 +148,7 @@ export function SelectInput({
                       <Text color={colors.unselected}>{icons.unselectedCircle}</Text>
                     )}
                   </Box>
-                  <Text
-                    color={isSelected ? colors.highlighted : colors.muted}
-                  >{`${item.label}`}</Text>
+                  <Text color={isSelected ? colors.highlighted : colors.muted}>{item.label}</Text>
                 </Box>
               );
             })}

package/src/ui/form/TextInput.tsx

@@ -20,7 +20,7 @@ export type TextInputProps = BoxProps & {
   /** Value. */
   value: string;
 
-  /** Should component listen to Listen to user's input? Useful in case there are multiple input components at the same time and input must be "routed" to a specific component. */
+  /** Should component listen to Listen to user's input? Useful in case there are multiple input components at the same time and input must be handled only by a specific component. */
   focus?: boolean | undefined;
 
   /** Replace all chars and mask the value. Useful for password inputs. */
@@ -87,7 +87,6 @@ export function TextInput({
   let renderedValue = value;
   let renderedPlaceholder = placeholder ? chalk[colors.muted](placeholder) : undefined;
 
-  // fake mouse cursor; dealing with with actual cursor and ANSI escape codes is inconvinient
   if (showCursor && focus) {
     renderedPlaceholder =
       placeholder.length > 0
@@ -96,16 +95,12 @@ export function TextInput({
 
     renderedValue = value.length > 0 ? '' : chalk.inverse(' ');
 
-    let i = 0;
-
-    for (let char of value) {
-      if (i >= state.cursorOffset && i <= state.cursorOffset) {
-        renderedValue += chalk.inverse(char);
+    for (let [i, character] of Object.entries(value)) {
+      if (Number(i) >= state.cursorOffset && Number(i) <= state.cursorOffset) {
+        renderedValue += chalk.inverse(character);
       } else {
-        renderedValue += char;
+        renderedValue += character;
       }
-
-      i += 1;
     }
 
     if (value.length > 0 && state.cursorOffset === value.length) {

package/src/ui/getErrorDetail.ts

@@ -1,4 +1,6 @@
 import {ValidationError, ParsingError} from '@jakubmazanec/args';
+import {zodIssuesToStrings} from '@jakubmazanec/zod-utils';
+import {ZodError} from 'zod';
 
 import {type ErrorDetail} from './ErrorDetail.js';
 
@@ -44,6 +46,15 @@ export function getErrorDetail(error: unknown): ErrorDetail {
     return errorDetail;
   }
 
+  if (error instanceof ZodError) {
+    let errorDetail: ErrorDetail = {
+      label: 'Error',
+      description: zodIssuesToStrings(error.issues).join('\n'),
+    };
+
+    return errorDetail;
+  }
+
   if (error instanceof Error) {
     let errorDetail: ErrorDetail = {
       label: 'Error',

package/src/ui/internals/Wrapper.tsx

@@ -1,20 +1,20 @@
 import {Box} from 'ink';
 import {useMemo, type FC, type PropsWithChildren} from 'react';
-import errorBoundary from 'react-error-boundary';
+import {ErrorBoundary} from 'react-error-boundary';
 
 import {programContext} from './programContext.js';
 import {type Program} from '../../program.js';
 import {Failure} from '../Failure.js';
 
 /**
- * {@linkcode Wrapper} component props.
+ * {@link Wrapper} component props.
  */
 export type WrapperProps = {
   program: Program;
 };
 
 /**
- * A component that wraps anything {@linkcode Program} tries to render with an error boundary and all neccessary providers.
+ * A component that wraps anything {@link Program} tries to render with an error boundary and all neccessary providers.
  */
 export const Wrapper: FC<PropsWithChildren<WrapperProps>> = ({program, children}) => {
   let programContextValue = useMemo(
@@ -25,10 +25,10 @@ export const Wrapper: FC<PropsWithChildren<WrapperProps>> = ({program, children}
   );
 
   return (
-    <errorBoundary.ErrorBoundary FallbackComponent={Failure}>
+    <ErrorBoundary FallbackComponent={Failure}>
       <programContext.Provider value={programContextValue}>
         <Box>{children}</Box>
       </programContext.Provider>
-    </errorBoundary.ErrorBoundary>
+    </ErrorBoundary>
   );
 };

package/src/ui/internals/programContext.ts

@@ -7,6 +7,6 @@ export type ProgramContext = {
 };
 
 /**
- * A React context that stores {@linkcode Program} instance.
+ * A React context that stores {@link Program} instance.
  */
 export const programContext = React.createContext<ProgramContext>({} as ProgramContext);

package/src/ui/useProgram.ts

@@ -1,14 +1,14 @@
 import {useApp} from 'ink';
 import {useCallback, useContext} from 'react';
-import errorBoundary from 'react-error-boundary';
+import {useErrorBoundary} from 'react-error-boundary';
 
 import {programContext} from './internals.js';
 
 /**
- * A React hook for accessing {@linkcode Program} instance and `exit` function that is used for showing an error (via an error boundary) and exiting.
+ * A React hook for accessing {@link Program} instance and `exit` function that is used for showing an error (via an error boundary) and exiting.
  */
 export function useProgram() {
-  let {showBoundary} = errorBoundary.useErrorBoundary();
+  let {showBoundary} = useErrorBoundary();
   let {exit: appExit} = useApp();
   let {program} = useContext(programContext);