Ink Image and Confirm input implementation

ink-confirm-input.tsx

/**
 * Credit to https://github.com/kevva/ink-confirm-input
 * This is a fork of the original component that is not maintained anymore
 */
import React, { useCallback } from "react";

import { UncontrolledTextInput } from "ink-text-input";
import yn from "yn";

type ConfirmInputProps = React.ComponentProps<typeof UncontrolledTextInput> & {
  isChecked?: boolean;
  onSubmit: (checked: boolean) => void;
};
export const ConfirmInput = ({
  isChecked,
  onSubmit,
  ...props
}: ConfirmInputProps) => {
  const handleSubmit = useCallback(
    (newValue: string) => {
      onSubmit(yn(newValue, { default: Boolean(isChecked), lenient: true }));
    },
    [isChecked, onSubmit]
  );

  return (
    <UncontrolledTextInput
      {...props}
      onSubmit={handleSubmit}
      placeholder={isChecked ? "Y" : "N"}
    />
  );
};

ink-image.tsx

import React, { useEffect, useState } from "react";

import { Box, Text } from "ink";
import terminalImage from "terminal-image";

type Dimension = string | number;

const cache = new Map<string, string>();

/**
 * Don't work very well with Iterm :/
 * I keep it here for reference.
 */
export const Image = ({
  src,
  height,
  width,
  alt,
  preserveAspectRatio,
}: {
  src: string;
  height?: Dimension;
  width?: Dimension;
  alt: string;
  preserveAspectRatio?: boolean;
}) => {
  const [img, setImg] = useState("");

  useEffect(() => {
    if (cache.has(src)) {
      setImg(cache.get(src) ?? "");
    } else {
      terminalImage
        .file(src, {
          height,
          width,
          preserveAspectRatio,
        })
        .then((asset) => {
          cache.set(src, asset);
          setImg(asset);
        })
        .catch(() => setImg(alt));
    }
  }, [alt, height, preserveAspectRatio, src, width]);

  return (
    <Box>
      <Text>{img}</Text>
    </Box>
  );
};