feat: create unit workflow (#1741)

Implements the basic workflow to create a Unit in a Library.

src/generic/loading-button/LoadingButton.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   act,
   fireEvent,
@@ -9,7 +8,7 @@ import LoadingButton from '.';
 
 const buttonTitle = 'Button Title';
 
-const RootWrapper = (onClick) => (
+const RootWrapper = (onClick?: () => (Promise<void> | void)) => (
   <LoadingButton label={buttonTitle} onClick={onClick} />
 );
 
@@ -31,8 +30,8 @@ describe('<LoadingButton />', () => {
   });
 
   it('renders the spinner correctly', async () => {
-    let resolver;
-    const longFunction = () => new Promise((resolve) => {
+    let resolver: () => void;
+    const longFunction = () => new Promise<void>((resolve) => {
       resolver = resolve;
     });
     const { container, getByRole, getByText } = render(RootWrapper(longFunction));
@@ -51,8 +50,8 @@ describe('<LoadingButton />', () => {
   });
 
   it('renders the spinner correctly even with error', async () => {
-    let rejecter;
-    const longFunction = () => new Promise((_resolve, reject) => {
+    let rejecter: (err: Error) => void;
+    const longFunction = () => new Promise<void>((_resolve, reject) => {
       rejecter = reject;
     });
     const { container, getByRole, getByText } = render(RootWrapper(longFunction));

src/generic/loading-button/index.tsx

@@ -1,4 +1,3 @@
-// @ts-check
 import React, {
   useCallback,
   useEffect,
@@ -8,20 +7,20 @@ import React, {
 import {
   StatefulButton,
 } from '@openedx/paragon';
-import PropTypes from 'prop-types';
+
+interface LoadingButtonProps {
+  label: string;
+  onClick?: (e: any) => (Promise<void> | void);
+  disabled?: boolean;
+  size?: string;
+  variant?: string;
+  className?: string;
+}
 
 /**
-  * A button that shows a loading spinner when clicked.
-  * @param {object} props
-  * @param {string} props.label
-  * @param {function=} props.onClick
-  * @param {boolean=} props.disabled
-  * @param {string=} props.size
-  * @param {string=} props.variant
-  * @param {string=} props.className
-  * @returns {JSX.Element}
+  * A button that shows a loading spinner when clicked, if the onClick function returns a Promise.
   */
-const LoadingButton = ({
+const LoadingButton: React.FC<LoadingButtonProps> = ({
   label,
   onClick,
   disabled,
@@ -37,7 +36,7 @@ const LoadingButton = ({
     componentMounted.current = false;
   }, []);
 
-  const loadingOnClick = useCallback(async (e) => {
+  const loadingOnClick = useCallback(async (e: any) => {
     if (!onClick) {
       return;
     }
@@ -67,21 +66,4 @@ const LoadingButton = ({
   );
 };
 
-LoadingButton.propTypes = {
-  label: PropTypes.string.isRequired,
-  onClick: PropTypes.func,
-  disabled: PropTypes.bool,
-  size: PropTypes.string,
-  variant: PropTypes.string,
-  className: PropTypes.string,
-};
-
-LoadingButton.defaultProps = {
-  onClick: undefined,
-  disabled: undefined,
-  size: undefined,
-  variant: '',
-  className: '',
-};
-
 export default LoadingButton;