@jakubmazanec/cli 0.1.0-11dd4a3

package/src/ui/Failure.tsx

@@ -0,0 +1,59 @@
+import {Box, Text, type BoxProps} from 'ink';
+
+import * as colors from './colors.js';
+import {type ErrorDetail} from './ErrorDetail.js';
+import {getErrorDetail} from './getErrorDetail.js';
+import {Header} from './Header.js';
+import * as icons from './icons.js';
+
+/**
+ * {@linkcode 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: Error;
+
+  /** Information about the failure state. Overrides information retireved from `error` prop. */
+  errorDetail?: ErrorDetail;
+};
+
+/**
+ * A component that renders a failure state.
+ */
+export function Failure({error, errorDetail, ...boxProps}: FailureProps) {
+  let {label, description, stack, cause} = errorDetail ?? getErrorDetail(error);
+
+  return (
+    <Box {...boxProps} flexDirection="column">
+      <Header icon={icons.error}>
+        <Text color={colors.highlighted}>{label}</Text>
+      </Header>
+
+      {description ? (
+        <Box flexDirection="column" marginLeft={2}>
+          <Text color={colors.failure}>{description}</Text>
+        </Box>
+      ) : null}
+
+      {stack ? (
+        <Box flexDirection="column" marginTop={1} marginLeft={2}>
+          <Text color={colors.muted}>{stack}</Text>
+        </Box>
+      ) : null}
+
+      {cause ? (
+        <>
+          <Box flexDirection="column" marginTop={1} marginLeft={2}>
+            <Text color={colors.muted}>{cause.description}</Text>
+          </Box>
+
+          {cause.stack ? (
+            <Box flexDirection="column" marginTop={1} marginLeft={2}>
+              <Text color={colors.muted}>{cause.stack}</Text>
+            </Box>
+          ) : null}
+        </>
+      ) : null}
+    </Box>
+  );
+}

package/src/ui/Header.tsx

@@ -0,0 +1,37 @@
+import {Box, type BoxProps, Text} from 'ink';
+import {type PropsWithChildren} from 'react';
+
+import {Spinner} from './Spinner.js';
+
+/**
+ * {@linkcode Header} component props.
+ */
+export type HeaderProps = BoxProps & {
+  /** Icon (recommended is 1 character) to render before the header itself. */
+  icon?: string;
+
+  /** Show spinner instead of the icon. */
+  showSpinner?: boolean;
+};
+
+/**
+ * Header component.
+ */
+export function Header({
+  children,
+  icon,
+  showSpinner = false,
+  ...boxProps
+}: PropsWithChildren<HeaderProps>) {
+  return (
+    <Box {...boxProps}>
+      {icon || showSpinner ? (
+        <Box marginRight={1}>
+          {showSpinner ? <Spinner /> : null}
+          {!showSpinner && icon ? <Text>{icon}</Text> : null}
+        </Box>
+      ) : null}
+      <Box>{children}</Box>
+    </Box>
+  );
+}

package/src/ui/Help.tsx

@@ -0,0 +1,68 @@
+import chalk from 'chalk';
+import {Box, Text, type BoxProps} from 'ink';
+
+import * as colors from './colors.js';
+import {Header} from './Header.js';
+import * as icons from './icons.js';
+import {type Program} from '../program.js';
+
+/**
+ * {@linkcode Help} component props.
+ */
+export type HelpProps = BoxProps & {
+  /** {@linkcode Program} instance. */
+  program: Program;
+};
+
+/**
+ * A component that renders help information.
+ */
+export function Help({program, ...boxProps}: HelpProps) {
+  return (
+    <Box {...boxProps} flexDirection="column">
+      <Text>{`${chalk[colors.notice](program.name ?? '?')} ${chalk[colors.muted](
+        program.version ?? '?',
+      )}`}</Text>
+      <Text color={colors.body}>{program.description}</Text>
+
+      {program.commands.length ? (
+        <>
+          <Header icon={icons.info} marginTop={1}>
+            <Text color={colors.highlighted}>Usage</Text>
+          </Header>
+          {program.commands.map((command) => {
+            let line = `${chalk[colors.muted](program.bin ?? '?')} ${command.name}`;
+
+            if (command.parameters) {
+              if (command.parameters.some((parameterConfig) => !!parameterConfig.required)) {
+                line += ` ${chalk[colors.muted]('<parameters>')}`;
+              } else {
+                line += ` ${chalk[colors.muted]('[<parameters>]')}`;
+              }
+            }
+
+            if (command.options) {
+              if (
+                Object.entries(command.options).some(([, optionConfig]) => !!optionConfig.required)
+              ) {
+                line += ` ${chalk[colors.muted]('<options>')}`;
+              } else {
+                line += ` ${chalk[colors.muted]('[<options>]')}`;
+              }
+            }
+
+            if (command.description) {
+              line += ` ${command.description}`;
+            }
+
+            return (
+              <Box key={command.name} marginLeft={2} flexDirection="column">
+                <Text>{line}</Text>
+              </Box>
+            );
+          })}
+        </>
+      ) : null}
+    </Box>
+  );
+}

package/src/ui/Spinner.tsx

@@ -0,0 +1,30 @@
+import {Text} from 'ink';
+import {useState, useEffect} from 'react';
+
+const SPINNER = {
+  interval: 80,
+  frames: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'],
+};
+
+/**
+ * Spinner component.
+ */
+export function Spinner() {
+  let [frame, setFrame] = useState(0);
+
+  useEffect(() => {
+    let timer = setInterval(() => {
+      setFrame((previousFrame) => {
+        let isLastFrame = previousFrame === SPINNER.frames.length - 1;
+
+        return isLastFrame ? 0 : previousFrame + 1;
+      });
+    }, SPINNER.interval);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return <Text>{SPINNER.frames[frame]}</Text>;
+}

package/src/ui/colors.ts

@@ -0,0 +1,13 @@
+export const body = 'white';
+export const highlighted = 'whiteBright';
+export const muted = 'gray';
+
+export const unselected = 'gray';
+export const selected = 'greenBright';
+
+export const notice = 'magenta';
+
+export const info = 'cyan';
+export const success = 'green';
+export const warning = 'yellow';
+export const failure = 'red';

package/src/ui/form/Form.ts

@@ -0,0 +1,9 @@
+import {type FC} from 'react';
+
+import {type FormConfig} from './FormConfig.js';
+import {type FormProps} from './FormProps.js';
+
+/**
+ * Form component.
+ */
+export type Form<C extends FormConfig> = FC<FormProps<C>> & {config: C};

package/src/ui/form/FormConfig.ts

@@ -0,0 +1,9 @@
+import {type FormRowsConfig} from './FormRowsConfig.js';
+
+/**
+ * Form configuration.
+ */
+export type FormConfig = {
+  /** Form rows configuration. */
+  rows: FormRowsConfig;
+};

package/src/ui/form/FormProps.ts

@@ -0,0 +1,67 @@
+import {type BoxProps} from 'ink';
+
+import {type FormConfig} from './FormConfig.js';
+import {type FormRowConfig} from './FormRowConfig.js';
+import {type FormValues} from './FormValues.js';
+
+/** A type that creates string literal union type with names of rows that need some props. */
+type FormRowWithPropsNames<C extends FormConfig> = {
+  [P in keyof C['rows']]: C['rows'][P]['type'] extends 'text'
+    ? never
+    : C['rows'][P]['type'] extends 'confirm'
+    ? never
+    : C['rows'][P]['type'] extends 'select'
+    ? P
+    : never;
+}[keyof C['rows']];
+
+type FormPropsRow<C extends FormRowConfig> = C['type'] extends 'text'
+  ? never
+  : C['type'] extends 'confirm'
+  ? never
+  : C['type'] extends 'select'
+  ? {
+      choices: Array<{value: string; label: string}>;
+    }
+  : never;
+
+type FormPropsRows<C extends FormConfig> = Pick<
+  {
+    [P in keyof C['rows']]: FormPropsRow<C['rows'][P]>;
+  },
+  FormRowWithPropsNames<C>
+>;
+
+/**
+ * Form component props.
+ */
+export type FormProps<C extends FormConfig> = FormPropsRows<C> extends Record<
+  number | string | symbol,
+  never
+>
+  ? BoxProps & {
+      /** Props for each row. */
+      rows?: null | undefined;
+
+      /** Form values */
+      values: FormValues<C>;
+
+      /** Handler function that is called when value changes. */
+      onChange?: ((formResult: FormValues<C>) => void) | undefined;
+
+      /** Handler function that is called when the value is accepted. */
+      onComplete: (formResult: FormValues<C>) => void;
+    }
+  : BoxProps & {
+      /** Props for each row. */
+      rows: FormPropsRows<C>;
+
+      /** Form values */
+      values: FormValues<C>;
+
+      /** Handler function that is called when value changes. */
+      onChange?: ((formResult: FormValues<C>) => void) | undefined;
+
+      /** Handler function that is called when the value is accepted. */
+      onComplete: (formResult: FormValues<C>) => void;
+    };

package/src/ui/form/FormResult.ts

@@ -0,0 +1,8 @@
+/* eslint-disable @typescript-eslint/no-explicit-any -- needed */
+import {type Form} from './Form.js';
+import {type FormValues} from './FormValues.js';
+
+/**
+ * Form result. It is the value of all form rows after the last one is accepted.
+ */
+export type FormResult<F extends Pick<Form<any>, 'config'>> = FormValues<F['config']>;

package/src/ui/form/FormRow.tsx

@@ -0,0 +1,119 @@
+import {type BoxProps} from 'ink';
+import {useCallback} from 'react';
+
+import {type FormConfig} from './FormConfig.js';
+import {type FormProps} from './FormProps.js';
+import {type FormRowConfig} from './FormRowConfig.js';
+import {SelectInput} from './SelectInput.js';
+import {TextInput} from './TextInput.js';
+
+/**
+ * Form row component props.
+ */
+type FormRowProps<C extends FormConfig> = BoxProps & {
+  /** Form row configuration. */
+  config: FormRowConfig;
+
+  // TODO: Should all rows props be passed to each row?
+  /** Props of all form rows. */
+  rows: FormProps<C>['rows'] | null;
+
+  /** Row name. */
+  rowName: keyof C['rows'];
+
+  /** Value. */
+  value: unknown;
+
+  /** 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;
+
+  /** Handler function that is called when value changes. */
+  onChange: (value: unknown, inputName: keyof C['rows']) => void;
+
+  /** Handler function that is called when the value is accepted. */
+  onComplete: (value: unknown, inputName: keyof C['rows']) => void;
+
+  /** Indicates whether value has been accepted. Component in the row then doesn't accept more input. */
+  isComplete: boolean;
+};
+
+/**
+ * Form row component.
+ */
+export function FormRow<C extends FormConfig>({
+  rowName,
+  config,
+  rows,
+  value,
+  focus,
+  isComplete,
+  onChange,
+  onComplete,
+  ...boxProps
+}: FormRowProps<C>) {
+  // TODO: Each input component handles values and events differently; the APIs should be adjusted.
+  let handleChange = useCallback(
+    (newValue: unknown) => {
+      onChange(newValue, rowName);
+    },
+    [rowName, onChange],
+  );
+
+  let handleFinish = useCallback(
+    (newValue: unknown) => {
+      onComplete(newValue, rowName);
+    },
+    [rowName, onComplete],
+  );
+
+  let handleSelectFinish = useCallback(
+    (item: {value: unknown}) => {
+      onComplete(item.value, rowName);
+    },
+    [rowName, onComplete],
+  );
+
+  switch (config.type) {
+    case 'text': {
+      return (
+        <TextInput
+          key={String(rowName)}
+          label={config.label ?? ''}
+          validate={config.validate}
+          value={value as string}
+          focus={focus}
+          isComplete={isComplete}
+          onChange={handleChange}
+          onSubmit={handleFinish}
+          {...boxProps}
+        />
+      );
+    }
+    case 'select': {
+      return (
+        <SelectInput
+          key={String(rowName)}
+          label={config.label ?? ''}
+          items={
+            rows
+              ? (
+                  (
+                    rows as {
+                      [key: string]: unknown;
+                    }
+                  )[rowName as string] as {choices: Array<{value: string; label: string}>}
+                ).choices
+              : []
+          }
+          focus={focus}
+          isComplete={isComplete}
+          onSelect={handleSelectFinish}
+          {...boxProps}
+        />
+      );
+    }
+    default: {
+      return null;
+    }
+  }
+}

package/src/ui/form/FormRowConfig.ts

@@ -0,0 +1,17 @@
+/**
+ * Form row configuration.
+ */
+export type FormRowConfig =
+  | {
+      type: 'confirm';
+      label?: string;
+    }
+  | {
+      type: 'select';
+      label?: string;
+    }
+  | {
+      type: 'text';
+      label?: string;
+      validate?: (value: string) => void;
+    };

package/src/ui/form/FormRowsConfig.ts

@@ -0,0 +1,6 @@
+import {type FormRowConfig} from './FormRowConfig.js';
+
+/**
+ * Form rows configuration.
+ */
+export type FormRowsConfig = Record<string, FormRowConfig>;

package/src/ui/form/FormValue.ts

@@ -0,0 +1,12 @@
+import {type FormRowConfig} from './FormRowConfig.js';
+
+export type StringFormValue = {value: string; isComplete: boolean};
+
+/**
+ * Form value.
+ */
+export type FormValue<C extends FormRowConfig> = C['type'] extends 'text'
+  ? StringFormValue
+  : C['type'] extends 'select'
+  ? StringFormValue
+  : never;

package/src/ui/form/FormValues.ts

@@ -0,0 +1,9 @@
+import {type FormConfig} from './FormConfig.js';
+import {type FormValue} from './FormValue.js';
+
+/**
+ * Form values.
+ */
+export type FormValues<C extends FormConfig> = {
+  [P in keyof C['rows']]: FormValue<C['rows'][P]>;
+};

package/src/ui/form/SelectInput.tsx

@@ -0,0 +1,165 @@
+import {Box, type BoxProps, Text, useInput, type Key} from 'ink';
+import _ from 'lodash';
+import {useState, useEffect, useRef, useCallback} from 'react';
+
+import {type SelectInputItem} from './SelectInputItem.js';
+import * as colors from '../colors.js';
+import * as icons from '../icons.js';
+import {rotate} from '../internals.js';
+
+/**
+ * Select input component props.
+ */
+type SelectInputProps = BoxProps & {
+  /** Text to display as a label. */
+  label: string;
+
+  /** 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. */
+  focus?: boolean | undefined;
+
+  /** Index of initially selected item. */
+  initialIndex?: number | undefined;
+
+  /** Number of items to display. */
+  limit?: number | undefined;
+
+  /** Handler function that is called when item is selected. */
+  onSelect?: ((item: SelectInputItem) => void) | undefined;
+
+  /** Handler function that is called when item is highlighted. */
+  onHighlight?: ((item: SelectInputItem) => void) | undefined;
+
+  /** Indicates whether value has been accepted. Component then doesn't accept more input. */
+  isComplete?: boolean | undefined;
+};
+
+/**
+ * Select input component.
+ */
+export function SelectInput({
+  label,
+  items = [],
+  focus = true,
+  initialIndex = 0,
+  limit: customLimit,
+  onSelect,
+  onHighlight,
+  marginTop = 0,
+  isComplete,
+  ...boxProps
+}: SelectInputProps): JSX.Element {
+  let [rotateIndex, setRotateIndex] = 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 previousItems = useRef<SelectInputItem[]>(items);
+
+  useEffect(() => {
+    if (
+      !_.isEqual(
+        previousItems.current.map((item) => item.value),
+        items.map((item) => item.value),
+      )
+    ) {
+      setRotateIndex(0);
+      setSelectedIndex(0);
+    }
+
+    previousItems.current = items;
+  }, [items]);
+
+  let inputHandler = useCallback(
+    (input: string, key: Key) => {
+      if (input === 'k' || key.upArrow) {
+        let lastIndex = (hasLimit ? limit : items.length) - 1;
+        let atFirstIndex = selectedIndex === 0;
+        let nextIndex = hasLimit ? selectedIndex : lastIndex;
+        let nextRotateIndex = atFirstIndex ? rotateIndex + 1 : rotateIndex;
+        let nextSelectedIndex = atFirstIndex ? nextIndex : selectedIndex - 1;
+
+        setRotateIndex(nextRotateIndex);
+        setSelectedIndex(nextSelectedIndex);
+
+        let slicedItems = hasLimit ? rotate(items, nextRotateIndex).slice(0, limit) : items;
+
+        if (typeof onHighlight === 'function') {
+          onHighlight(slicedItems[nextSelectedIndex] as SelectInputItem);
+        }
+      }
+
+      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 nextSelectedIndex = isAtLastIndex ? nextIndex : selectedIndex + 1;
+
+        setRotateIndex(nextRotateIndex);
+        setSelectedIndex(nextSelectedIndex);
+
+        let slicedItems = hasLimit ? rotate(items, nextRotateIndex).slice(0, limit) : items;
+
+        if (typeof onHighlight === 'function') {
+          onHighlight(slicedItems[nextSelectedIndex] as SelectInputItem);
+        }
+      }
+
+      if (key.return) {
+        let slicedItems = hasLimit ? rotate(items, rotateIndex).slice(0, limit) : items;
+
+        if (typeof onSelect === 'function') {
+          onSelect(slicedItems[selectedIndex] as SelectInputItem);
+        }
+      }
+    },
+    [hasLimit, limit, rotateIndex, selectedIndex, items, onSelect, onHighlight],
+  );
+
+  useInput(inputHandler, {isActive: focus});
+
+  let visibleItem: SelectInputItem[] = hasLimit
+    ? rotate(items, rotateIndex).slice(0, limit)
+    : items;
+
+  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}>
+            {items[selectedIndex]?.label ?? String(items[selectedIndex]?.value)}
+          </Text>
+        ) : (
+          <Box flexDirection="column">
+            {visibleItem.map((item, index) => {
+              let isSelected = index === selectedIndex;
+
+              return (
+                <Box key={item.value}>
+                  <Box marginRight={1}>
+                    {isSelected ? (
+                      <Text color={colors.selected}>{icons.selectedCircle}</Text>
+                    ) : (
+                      <Text color={colors.unselected}>{icons.unselectedCircle}</Text>
+                    )}
+                  </Box>
+                  <Text
+                    color={isSelected ? colors.highlighted : colors.muted}
+                  >{`${item.label}`}</Text>
+                </Box>
+              );
+            })}
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+}

package/src/ui/form/SelectInputItem.ts

@@ -0,0 +1,10 @@
+/**
+ * Select input item.
+ */
+export type SelectInputItem = {
+  /** Text to display as a label. */
+  label: string;
+
+  /** Value. */
+  value: string;
+};