refactor: Use formik and yup, and simplify hooks

This change converts the Image Editor Modal to typescript and simplifies the hooks switching to Formik + Yup for form validation.

It updates the tests to check the behaviour of the component as a whole rather than testing small components.

Author: xitij2000

src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/AltTextControls.test.tsx

@@ -1,3 +1,4 @@
+<<<<<<< Updated upstream
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -67,6 +68,60 @@ AltTextControls.propTypes = {
     show: PropTypes.bool,
   }).isRequired,
   value: PropTypes.string.isRequired,
+||||||| Stash base
+=======
+import { useFormikContext } from 'formik';
+import React from 'react';
+
+import { Form } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  ImageConfig,
+} from './types';
+
+import messages from './messages';
+
+const AltTextControls = () => {
+  const intl = useIntl();
+  const formik = useFormikContext<ImageConfig>();
+  return (
+    <>
+      <Form.Group className="mt-1.5">
+        <Form.Label>
+          {intl.formatMessage(messages.accessibilityLabel)}
+        </Form.Label>
+        <Form.Control
+          name="altText"
+          className="mt-1.5"
+          floatingLabel={intl.formatMessage(messages.altTextFloatingLabel)}
+          disabled={formik.values.isDecorative}
+          isInvalid={formik.errors.altText}
+          onChange={formik.handleChange}
+          type="input"
+          value={formik.values.altText}
+        />
+        {formik.errors.altText
+      && (
+        <Form.Control.Feedback type="invalid">
+          {formik.errors.altText}
+        </Form.Control.Feedback>
+      )}
+      </Form.Group>
+      <Form.Group>
+        <Form.Checkbox
+          name="isDecorative"
+          checked={formik.values.isDecorative}
+          className="mt-2.5 decorative-control-label"
+          onChange={formik.handleChange}
+        >
+          <Form.Label>
+            {intl.formatMessage(messages.decorativeAltTextCheckboxLabel)}
+          </Form.Label>
+        </Form.Checkbox>
+      </Form.Group>
+    </>
+  );
+>>>>>>> Stashed changes
 };
 
 export const AltTextControlsInternal = AltTextControls; // For testing only

src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/AltTextControls.tsx

@@ -1,3 +1,4 @@
+<<<<<<< Updated upstream
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
@@ -88,5 +89,103 @@ DimensionControls.propTypes = ({
   unlock: PropTypes.func.isRequired,
   updateDimensions: PropTypes.func.isRequired,
 });
+||||||| Stash base
+=======
+import { useFormikContext } from 'formik';
+import React from 'react';
+import {
+  Form,
+  Icon,
+  IconButton,
+} from '@openedx/paragon';
+import {
+  Locked,
+  Unlocked,
+} from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  ImageConfig,
+} from './types';
+
+import messages from './messages';
+
+/**
+ * Wrapper for image dimension inputs and the lock checkbox.
+ * @param {ImageDimensions} originalDimensions - original dimensions of the image
+ */
+const DimensionControls = ({ originalWidth, originalHeight }: {
+  originalWidth: number,
+  originalHeight: number,
+}) => {
+  const intl = useIntl();
+  const formik = useFormikContext<ImageConfig>();
+  if (!(originalWidth && originalHeight)) {
+    return null;
+  }
+  const handleUpdateDimensions = async ({ target }) => {
+    const { name } = target;
+    let { value } = target;
+    // If dimensions are locked just set the value and return.
+    await formik.setFieldValue(name, value);
+    if (!formik.values.isLocked) {
+      return;
+    }
+    // For percentages, both values need to be ratio is locked
+    if (value.trim().endsWith('%')) {
+      await formik.setFieldValue('width', value);
+      await formik.setFieldValue('height', value);
+      return;
+    }
+    // For numerical values we calculate the other dimension based on the original ratio.
+    value = parseInt(value, 10);
+    if (name === 'height') {
+      await formik.setFieldValue('width', Math.round((value / originalHeight) * originalWidth));
+    } else if (name === 'width') {
+      await formik.setFieldValue('height', Math.round((value / originalWidth) * originalHeight));
+    }
+  };
+  return (
+    <>
+      <Form.Label>
+        {intl.formatMessage(messages.imageDimensionsLabel)}
+      </Form.Label>
+      <div className="mb-4.5 d-flex">
+        <Form.Group>
+          <Form.Control
+            name="width"
+            className="dimension-input"
+            value={formik.values.width}
+            onChange={handleUpdateDimensions}
+            onBlur={formik.handleBlur}
+            floatingLabel={intl.formatMessage(messages.widthFloatingLabel)}
+          />
+        </Form.Group>
+        <Form.Group>
+          <Form.Control
+            name="height"
+            className="dimension-input"
+            value={formik.values.height}
+            onChange={handleUpdateDimensions}
+            onBlur={formik.handleBlur}
+            floatingLabel={intl.formatMessage(messages.heightFloatingLabel)}
+          />
+        </Form.Group>
+        <IconButton
+          name="isLocked"
+          className="d-inline-block"
+          alt={
+            formik.values.isLocked
+              ? intl.formatMessage(messages.unlockDimensionsLabel)
+              : intl.formatMessage(messages.lockDimensionsLabel)
+        }
+          iconAs={Icon}
+          src={formik.values.isLocked ? Locked : Unlocked}
+          onClick={() => formik.setFieldValue('isLocked', !formik.values.isLocked)}
+        />
+      </div>
+    </>
+  );
+};
+>>>>>>> Stashed changes
 
 export default DimensionControls;