Ts components chunk 1

packages/components/package.json

@@ -82,6 +82,7 @@
     "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-dom": "^16.9.8",
     "@types/react-transition-group": "^4.4.0",
+    "@types/shortid": "0.0.29",
     "bootstrap": "4.4.1",
     "classnames": "^2.2.6",
     "cross-env": "^7.0.2",

packages/components/src/AutoResizeTextarea.jsx → packages/components/src/AutoResizeTextarea.tsx

@@ -4,34 +4,43 @@ import classNames from 'classnames';
 
 import './AutoResizeTextarea.scss';
 
+interface AutoResizeTextareaProps {
+  value: string;
+  onChange: (val: string) => void;
+  className?: string;
+  spellCheck?: boolean;
+  placeholder?: string;
+  disabled?: boolean;
+  delimiter?: string;
+  id?: string;
+}
+
 /**
  * Makes a textarea that auto resizes based on contents, its height grows with new lines.
  * If a delimeter is set, such as " -" or " ", as used by jvm args or env vars
  * then the field will also "explode" the value by the delimiter over new lines
  * on focus, and implode on blur. By default, it doesn't word wrap.
  */
-const AutoResizeTextarea = props => {
-  const {
-    className,
-    value: propsValue,
-    onChange,
-    spellCheck,
-    placeholder,
-    disabled,
-    delimiter,
-    id,
-  } = props;
-
+const AutoResizeTextarea = ({
+  className = '',
+  value: propsValue,
+  onChange,
+  spellCheck = false,
+  placeholder = '',
+  disabled = false,
+  delimiter = '',
+  id = '',
+}: AutoResizeTextareaProps): JSX.Element => {
   const [value, setValue] = useState(propsValue);
   const [isPastedChange, setIsPastedChange] = useState(false);
-  const element = useRef(null);
+  const element = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
     // keep state value in sync with prop changes
     setValue(propsValue);
   }, [propsValue]);
 
-  function explode(input) {
+  function explode(input: string) {
     // split by delimiter, commonly " " or " -"
     // strip empty strings (if delimiter is space, and there are multiple spaces in a row)
     // and join with new line and a trimmed delimeter (get rid of leading spaces)
@@ -42,14 +51,17 @@ const AutoResizeTextarea = props => {
       .join(`\n${delimiter.trim()}`);
   }
 
-  function implode(input) {
+  function implode(input: string) {
     return input
       .split('\n')
       .map(string => string.trim())
       .join(' ');
   }
 
   function reCalculateLayout() {
+    if (!element.current) {
+      return;
+    }
     element.current.style.height = 'auto'; // needed to allow component to shrink
     const resizedHeight =
       element.current.scrollHeight +
@@ -58,7 +70,7 @@ const AutoResizeTextarea = props => {
     if (resizedHeight > 0) element.current.style.height = `${resizedHeight}px`;
   }
 
-  function handleChange(event) {
+  function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
     let newValue = event.target.value;
     if (isPastedChange) {
       if (delimiter) newValue = explode(newValue);
@@ -69,6 +81,9 @@ const AutoResizeTextarea = props => {
   }
 
   function handleFocus() {
+    if (!element.current) {
+      return;
+    }
     if (delimiter) {
       setValue(explode(value));
       reCalculateLayout();
@@ -99,7 +114,7 @@ const AutoResizeTextarea = props => {
       className={classNames(className, 'auto-resize-textarea form-control')}
       placeholder={placeholder}
       value={value}
-      rows="1"
+      rows={1}
       onChange={handleChange}
       onFocus={handleFocus}
       onBlur={handleBlur}

packages/components/src/BasicModal.jsx → packages/components/src/BasicModal.tsx

@@ -4,20 +4,34 @@ import PropTypes from 'prop-types';
 import ButtonGroup from './ButtonGroup';
 import Button from './Button';
 
+interface BasicModalProps {
+  isOpen: boolean;
+  headerText: string;
+  bodyText: string | (() => string);
+  onCancel?: () => void;
+  onConfirm: () => void;
+  onDiscard?: () => void;
+  onModalDisable?: () => void;
+  cancelButtonText?: string;
+  confirmButtonText?: string;
+  discardButtonText?: string;
+  children?: React.ReactNode;
+}
+
 /**
  * A basic modal dialog with two buttons: cancel / confirm.
  *
- * @param {boolean} isOpen indicates if the modal dialog is open
- * @param {string} headerText text displayed in the modal header
- * @param {string} bodyText text displayed in the modal body
- * @param {func} onCancel callback for the cancel button; if not provided, button not shown
- * @param {func} onConfirm callback for the confirm button
- * @param {func} onDiscard callback for the discard button; if not provided, button not shown
- * @param {string} cancelButtonText optional text for the cancel button, defaults to 'Cancel'
- * @param {string} confirmButtonText optional text for the confirm button, defaults to 'Okay'
- * @param {string} discardButtonText optional text for the discard button, defaults to 'Discard'
+ * @param isOpen indicates if the modal dialog is open
+ * @param headerText text displayed in the modal header
+ * @param bodyText text displayed in the modal body
+ * @param onCancel callback for the cancel button; if not provided, button not shown
+ * @param onConfirm callback for the confirm button
+ * @param onDiscard callback for the discard button; if not provided, button not shown
+ * @param cancelButtonText optional text for the cancel button, defaults to 'Cancel'
+ * @param confirmButtonText optional text for the confirm button, defaults to 'Okay'
+ * @param discardButtonText optional text for the discard button, defaults to 'Discard'
  */
-const BasicModal = props => {
+const BasicModal: React.FC<BasicModalProps> = props => {
   const {
     isOpen,
     headerText,
@@ -26,18 +40,18 @@ const BasicModal = props => {
     onConfirm,
     onDiscard,
     onModalDisable,
-    cancelButtonText,
-    confirmButtonText,
-    discardButtonText,
+    cancelButtonText = 'Cancel',
+    confirmButtonText = 'Okay',
+    discardButtonText = 'Discard',
     children,
   } = props;
 
-  const confirmButton = useRef(null);
+  const confirmButton = useRef<HTMLButtonElement>(null);
 
-  const disableModalCheckbox = useRef(null);
+  const disableModalCheckbox = useRef<HTMLInputElement>(null);
 
   const onConfirmClicked = useCallback(() => {
-    if (disableModalCheckbox.current && disableModalCheckbox.current.checked) {
+    if (disableModalCheckbox.current?.checked && onModalDisable) {
       onModalDisable();
     }
     onConfirm();
@@ -53,7 +67,7 @@ const BasicModal = props => {
       isOpen={isOpen}
       className="theme-bg-light"
       onOpened={() => {
-        confirmButton.current.focus();
+        confirmButton.current?.focus();
       }}
     >
       <ModalHeader>{headerText}</ModalHeader>
@@ -126,10 +140,9 @@ BasicModal.defaultProps = {
   cancelButtonText: 'Cancel',
   confirmButtonText: 'Okay',
   discardButtonText: 'Discard',
-
-  onCancel: null,
-  onDiscard: null,
-  onModalDisable: null,
+  onCancel: undefined,
+  onDiscard: undefined,
+  onModalDisable: undefined,
 };
 
 export default BasicModal;