@jakubmazanec/cli 0.1.0-9029e49

package/src/ui/form/TextInput.tsx

@@ -0,0 +1,228 @@
+// TODO: resolve
+/* eslint-disable complexity -- TODO */
+import chalk from 'chalk';
+import {Box, type BoxProps, Text, useInput} from 'ink';
+import {useEffect, useState} from 'react';
+
+import * as colors from '../colors.js';
+import * as icons from '../icons.js';
+
+/**
+ * Text input component props.
+ */
+export type TextInputProps = BoxProps & {
+  /** Text to display as a label. */
+  label: string;
+
+  /** Text to display when `value` is empty. */
+  placeholder?: string | undefined;
+
+  /** 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. */
+  focus?: boolean | undefined;
+
+  /** Replace all chars and mask the value. Useful for password inputs. */
+  mask?: string | undefined;
+
+  /** Show cursor and allow navigation using arrow keys. */
+  showCursor?: boolean | undefined;
+
+  /** Validation function that is called when value changes. If this function throws an error*/
+  validate?: ((value: string) => void) | undefined;
+
+  /** Handler function that is called when value changes. */
+  onChange: (value: string) => void;
+
+  /** Handler function that is called when enter is pressed. */
+  onSubmit?: ((value: string) => void) | undefined;
+
+  /** Indicates whether value has been accepted. Component then doesn't accept more input. */
+  isComplete?: boolean | undefined;
+};
+
+/**
+ * Text input component.
+ */
+export function TextInput({
+  label,
+  validate,
+  isComplete,
+  value: originalValue,
+  placeholder = '',
+  focus = true,
+  mask,
+  showCursor = true,
+  onChange,
+  onSubmit,
+  ...boxProps
+}: TextInputProps) {
+  let [validationError, setValidationError] = useState('');
+  let [state, setState] = useState({
+    cursorOffset: (originalValue || '').length,
+    cursorWidth: 0,
+  });
+
+  useEffect(() => {
+    setState((previousState) => {
+      if (!focus || !showCursor) {
+        return previousState;
+      }
+
+      let newValue = originalValue || '';
+
+      if (previousState.cursorOffset > newValue.length - 1) {
+        return {
+          cursorOffset: newValue.length,
+          cursorWidth: 0,
+        };
+      }
+
+      return previousState;
+    });
+  }, [originalValue, focus, showCursor]);
+
+  let value = mask ? mask.repeat(originalValue.length) : originalValue;
+  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
+        ? chalk.inverse(placeholder[0]) + chalk[colors.muted](placeholder.slice(1))
+        : chalk.inverse(' ');
+
+    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);
+      } else {
+        renderedValue += char;
+      }
+
+      i += 1;
+    }
+
+    if (value.length > 0 && state.cursorOffset === value.length) {
+      renderedValue += chalk.inverse(' ');
+    }
+  }
+
+  useInput(
+    (input, key) => {
+      if (
+        key.upArrow ||
+        key.downArrow ||
+        (key.ctrl && input === 'c') ||
+        (key.shift && key.tab) ||
+        key.tab
+      ) {
+        return;
+      }
+
+      if (key.return) {
+        if (onSubmit) {
+          if (validate) {
+            try {
+              validate(originalValue);
+            } catch (error: unknown) {
+              setValidationError((error as Error).message);
+
+              return;
+            }
+          }
+
+          if (validationError) {
+            setValidationError('');
+          } else {
+            onSubmit(originalValue);
+          }
+        }
+
+        return;
+      }
+
+      let nextCursorOffset = state.cursorOffset;
+      let nextValue = originalValue;
+      let nextCursorWidth = 0;
+
+      if (key.leftArrow) {
+        if (showCursor) {
+          nextCursorOffset -= 1;
+        }
+      } else if (key.rightArrow) {
+        if (showCursor) {
+          nextCursorOffset += 1;
+        }
+      } else if (key.backspace || key.delete) {
+        if (state.cursorOffset > 0) {
+          nextValue =
+            originalValue.slice(0, state.cursorOffset - 1) +
+            originalValue.slice(state.cursorOffset, originalValue.length);
+
+          nextCursorOffset -= 1;
+        }
+      } else {
+        nextValue =
+          originalValue.slice(0, state.cursorOffset) +
+          input +
+          originalValue.slice(state.cursorOffset, originalValue.length);
+
+        nextCursorOffset += input.length;
+
+        if (input.length > 1) {
+          nextCursorWidth = input.length;
+        }
+      }
+
+      if (state.cursorOffset < 0) {
+        nextCursorOffset = 0;
+      }
+
+      if (state.cursorOffset > originalValue.length) {
+        nextCursorOffset = originalValue.length;
+      }
+
+      setState({
+        cursorOffset: nextCursorOffset,
+        cursorWidth: nextCursorWidth,
+      });
+
+      if (nextValue !== originalValue) {
+        onChange(nextValue);
+      }
+    },
+    {isActive: focus},
+  );
+
+  return (
+    <Box {...boxProps}>
+      <Box marginRight={1}>
+        <Text>{isComplete ? icons.success : icons.question}</Text>
+      </Box>
+
+      <Box flexDirection="column">
+        <Box marginRight={1}>
+          <Text color={colors.highlighted}>{label}</Text>
+        </Box>
+        {isComplete ? (
+          <Text color={colors.body}>{value}</Text>
+        ) : (
+          <Text color={colors.highlighted}>
+            {placeholder ? (value.length > 0 ? renderedValue : renderedPlaceholder) : renderedValue}
+          </Text>
+        )}
+        {validationError ? (
+          <Box marginTop={0}>
+            <Text color={colors.warning}>{validationError}</Text>
+          </Box>
+        ) : null}
+      </Box>
+    </Box>
+  );
+}

package/src/ui/form/createForm.tsx

@@ -0,0 +1,89 @@
+import {Box, type BoxProps} from 'ink';
+import {useCallback} from 'react';
+
+import {type Form} from './Form.js';
+import {type FormConfig} from './FormConfig.js';
+import {type FormProps} from './FormProps.js';
+import {FormRow} from './FormRow.js';
+
+/**
+ * Creates form component that contains individual rows with inputs based on the provided config.
+ *
+ * @param formConfig Form configuration.
+ * @returns Form component.
+ */
+export function createForm<C extends FormConfig>(formConfig: C): Form<C> {
+  let Form = ({
+    rows,
+    values: results,
+    onChange,
+    onComplete: onFinish,
+    ...boxProps
+  }: FormProps<C>) => {
+    let handleChange = useCallback(
+      (value: unknown, rowName: keyof C['rows']) => {
+        if (onChange) {
+          onChange({
+            ...results,
+            [rowName]: {
+              ...results[rowName],
+              value,
+            },
+          });
+        }
+      },
+      [onChange, results],
+    );
+
+    let handleFinish = useCallback(
+      (value: unknown, rowName: keyof C['rows']) => {
+        onFinish({
+          ...results,
+          [rowName]: {
+            value,
+            isComplete: true,
+          },
+        });
+      },
+      [onFinish, results],
+    );
+
+    let inputElements = [];
+    let activeInputName: string | null = null;
+
+    for (let [rowName] of Object.entries(formConfig.rows)) {
+      if (!results[rowName as keyof C['rows']].isComplete) {
+        activeInputName = String(rowName);
+
+        break;
+      }
+    }
+
+    for (let [rowName, input] of Object.entries(formConfig.rows)) {
+      if (results[rowName as keyof C['rows']].isComplete || rowName === activeInputName) {
+        inputElements.push(
+          <FormRow
+            key={rowName}
+            marginTop={inputElements.length === 0 ? 0 : 1}
+            focus={rowName === activeInputName}
+            isComplete={results[rowName as keyof C['rows']].isComplete}
+            config={input}
+            rows={rows}
+            rowName={rowName}
+            value={results[rowName as keyof C['rows']].value}
+            onChange={handleChange}
+            onComplete={handleFinish}
+          />,
+        );
+      }
+    }
+
+    return (
+      <Box {...(boxProps as BoxProps)} flexDirection="column">
+        {inputElements}
+      </Box>
+    );
+  };
+
+  return Object.assign(Form, {config: formConfig});
+}

package/src/ui/form.ts

@@ -0,0 +1,13 @@
+export * from './form/Form.js';
+export * from './form/FormConfig.js';
+export * from './form/FormProps.js';
+export * from './form/FormRowConfig.js';
+export * from './form/FormRowsConfig.js';
+export * from './form/FormValue.js';
+export * from './form/FormValues.js';
+export * from './form/FormResult.js';
+export * from './form/createForm.js';
+export * from './form/FormRow.js';
+export * from './form/SelectInput.js';
+export * from './form/SelectInputItem.js';
+export * from './form/TextInput.js';

package/src/ui/getErrorDetail.ts

@@ -0,0 +1,73 @@
+import {ValidationError, ParsingError} from '@jakubmazanec/args';
+
+import {type ErrorDetail} from './ErrorDetail.js';
+
+/**
+ * Creates detailed information about an error.
+ */
+export function getErrorDetail(error: unknown): ErrorDetail {
+  // TODO: add all codes
+  if (error instanceof ParsingError) {
+    switch (error.code) {
+      default: {
+        return {
+          label: 'Parsing error',
+          description: error.message,
+        };
+      }
+    }
+  }
+
+  // TODO: add all codes
+  if (error instanceof ValidationError) {
+    switch (error.code) {
+      default: {
+        return {
+          label: 'Validation error',
+          description: error.message,
+        };
+      }
+    }
+  }
+
+  // TODO: add all built-in errors
+  if (error instanceof ReferenceError) {
+    let errorDetail: ErrorDetail = {
+      label: 'Error',
+      description: error.message,
+    };
+
+    if (error.stack) {
+      errorDetail.stack = error.stack;
+    }
+
+    return errorDetail;
+  }
+
+  if (error instanceof Error) {
+    let errorDetail: ErrorDetail = {
+      label: 'Error',
+      description: error.message,
+    };
+
+    if (error.stack) {
+      errorDetail.stack = error.stack;
+    }
+
+    if (error.cause instanceof Error) {
+      errorDetail.cause = {
+        description: error.cause.message,
+      };
+
+      if (error.cause.stack) {
+        errorDetail.cause.stack = error.cause.stack;
+      }
+    }
+
+    return errorDetail;
+  }
+
+  return {
+    label: 'Error',
+  };
+}

package/src/ui/icons.ts

@@ -0,0 +1,13 @@
+import chalk from 'chalk';
+
+import * as colors from './colors.js';
+
+export const question = chalk[colors.notice]('?');
+export const info = chalk[colors.info]('i');
+export const success = chalk[colors.success]('✓');
+export const warning = chalk[colors.warning]('▲');
+export const error = chalk[colors.failure]('×');
+export const unselectedSquare = chalk[colors.unselected]('◻');
+export const selectedSquare = chalk[colors.selected]('◼');
+export const unselectedCircle = chalk[colors.unselected]('○');
+export const selectedCircle = chalk[colors.selected]('●');

package/src/ui/internals/Wrapper.tsx

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

package/src/ui/internals/programContext.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import {type Program} from '../../program/Program.js';
+
+export type ProgramContext = {
+  program: Program;
+};
+
+/**
+ * A React context that stores {@linkcode Program} instance.
+ */
+export const programContext = React.createContext<ProgramContext>({} as ProgramContext);

package/src/ui/internals/rotate.ts

@@ -0,0 +1,12 @@
+/**
+ * Rotate an array by `n` places.
+ *
+ * @param value An array to rotate.
+ * @param n By how many places the items should move.
+ * @returns The new item with items rotated.
+ */
+export function rotate<T>(value: T[], n: number) {
+  let x = [...value];
+
+  return [...x.splice(-n % x.length), ...x];
+}

package/src/ui/internals.ts

@@ -0,0 +1,3 @@
+export * from './internals/programContext.js';
+export * from './internals/rotate.js';
+export * from './internals/Wrapper.js';

package/src/ui/useProgram.ts

@@ -0,0 +1,24 @@
+import {useApp} from 'ink';
+import {useCallback, useContext} from 'react';
+import errorBoundary 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.
+ */
+export function useProgram() {
+  let {showBoundary} = errorBoundary.useErrorBoundary();
+  let {exit: appExit} = useApp();
+  let {program} = useContext(programContext);
+
+  let exit = useCallback(
+    (error: unknown) => {
+      showBoundary(error);
+      appExit(error as Error);
+    },
+    [appExit, showBoundary],
+  );
+
+  return {program, exit};
+}

package/src/ui.ts

@@ -0,0 +1,10 @@
+export * as colors from './ui/colors.js';
+export * from './ui/ErrorDetail.js';
+export * from './ui/form.js';
+export * from './ui/getErrorDetail.js';
+export * as icons from './ui/icons.js';
+export * from './ui/useProgram.js';
+export * from './ui/Failure.js';
+export * from './ui/Header.js';
+export * from './ui/Help.js';
+export * from './ui/Spinner.js';