link-stack/packages/ui/components/TextField.tsx

import { FC } from "react";
import {
  TextField as InternalTextField,
  InputAdornment,
  IconButton,
} from "@mui/material";
import { Refresh as RefreshIcon } from "@mui/icons-material";
import { colors, fonts } from "../styles/theme";

type TextFieldProps = {
  name: string;
  label: string;
  formState: Record<string, any>;
  refreshable?: boolean;
  disabled?: boolean;
  required?: boolean;
  lines?: number;
  helperText?: string;
  updateFormState?: (field: string, value: any) => void;
};

export const TextField: FC<TextFieldProps> = ({
  name,
  label,
  formState,
  refreshable = false,
  disabled = false,
  required = false,
  lines = 1,
  helperText,
  updateFormState,
}) => {
  const { darkMediumGray, white } = colors;
  const { roboto } = fonts;

  return (
    <InternalTextField
      fullWidth
      name={name}
      label={label}
      size="small"
      disabled={disabled}
      multiline={lines > 1}
      rows={lines}
      required={required}
      defaultValue={formState.values[name]}
      onChange={(e: any) => updateFormState?.(name, e.target.value)}
      error={Boolean(formState.errors[name])}
      helperText={formState.errors[name] ?? helperText}
      InputProps={{
        endAdornment: refreshable ? (
          <InputAdornment position="end">
            <IconButton
              onClick={() => {}}
              size="small"
              color="primary"
              sx={{ p: 0, color: darkMediumGray }}
            >
              <RefreshIcon />
            </IconButton>
          </InputAdornment>
        ) : null,

        sx: {
          fontFamily: roboto.style.fontFamily,
          backgroundColor: white,
        },
      }}
    />
  );
};