feat(client): ts-migrate client/src/components/helpers/form and client/src/components/formHelpers (#42476)

* client(feat): migrate client/src/components/helpers/form

* compete migration

* migrate formHelpers

* migrate BlockSaveButton and BlockSaveWrapper

* finish migration

* kebab-caseify

* Update client/src/components/formHelpers/block-save-button.tsx

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix linting errors

* make props optional

Co-authored-by: Parth Parth <thecodingaviator@users.noreply.github.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/components/formHelpers/block-save-button.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import BlockSaveButton from './BlockSaveButton';
+import BlockSaveButton from './block-save-button';
 
 test('<BlockSaveButton /> snapshot', () => {
   const { container } = render(<BlockSaveButton />);

client/src/components/formHelpers/block-save-button.tsx

@@ -1,20 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Button } from '@freecodecamp/react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
-function BlockSaveButton(props) {
+function BlockSaveButton(props?: Record<string, unknown>): JSX.Element {
   const { t } = useTranslation();
   return (
     <Button block={true} bsStyle='primary' {...props} type='submit'>
-      {props.children || t('buttons.save')}
+      {props?.children || t('buttons.save')}
     </Button>
   );
 }
 
 BlockSaveButton.displayName = 'BlockSaveButton';
-BlockSaveButton.propTypes = {
-  children: PropTypes.any
-};
 
 export default BlockSaveButton;

client/src/components/formHelpers/block-save-wrapper.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import BlockSaveWrapper from './BlockSaveWrapper';
+import BlockSaveWrapper from './block-save-wrapper';
 
 test('<BlockSaveWrapper /> snapshot', () => {
   const { container } = render(<BlockSaveWrapper />);

client/src/components/formHelpers/block-save-wrapper.tsx

@@ -1,19 +1,17 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
-const propTypes = {
-  children: PropTypes.node
-};
 
 const style = {
   padding: '0 15px'
 };
 
-function BlockSaveWrapper({ children }) {
+function BlockSaveWrapper({
+  children
+}: {
+  children?: React.ReactElement;
+}): JSX.Element {
   return <div style={style}>{children}</div>;
 }
 
 BlockSaveWrapper.displayName = 'BlockSaveWrapper';
-BlockSaveWrapper.propTypes = propTypes;
 
 export default BlockSaveWrapper;

client/src/components/formHelpers/index.js

@@ -7,8 +7,8 @@ import {
   httpValidator
 } from './FormValidators';
 
-export { default as BlockSaveButton } from './BlockSaveButton.js';
-export { default as BlockSaveWrapper } from './BlockSaveWrapper.js';
+export { default as BlockSaveButton } from './block-save-button';
+export { default as BlockSaveWrapper } from './block-save-wrapper';
 export { default as Form } from './Form.js';
 export { default as FormFields } from './FormFields.js';
 

client/src/components/helpers/form/block-save-button.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Button } from '@freecodecamp/react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
-function BlockSaveButton({ children, ...restProps }) {
+function BlockSaveButton({
+  children,
+  ...restProps
+}: {
+  children?: React.ReactNode;
+}): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -20,8 +24,5 @@ function BlockSaveButton({ children, ...restProps }) {
 }
 
 BlockSaveButton.displayName = 'BlockSaveButton';
-BlockSaveButton.propTypes = {
-  children: PropTypes.any
-};
 
 export default BlockSaveButton;

client/src/components/helpers/form/block-save-wrapper.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
-const propTypes = {
-  children: PropTypes.node
-};
 
 const style = {
   padding: '0 15px'
 };
 
-function BlockSaveWrapper({ children, ...restProps }) {
+function BlockSaveWrapper({
+  children,
+  ...restProps
+}: {
+  children?: React.ReactNode;
+}): JSX.Element {
   return (
     <div style={style} {...restProps}>
       {children}
@@ -18,6 +18,5 @@ function BlockSaveWrapper({ children, ...restProps }) {
 }
 
 BlockSaveWrapper.displayName = 'BlockSaveWrapper';
-BlockSaveWrapper.propTypes = propTypes;
 
 export default BlockSaveWrapper;

client/src/components/settings/About.js

@@ -11,7 +11,7 @@ import {
 import { FullWidthRow, Spacer } from '../helpers';
 import ThemeSettings from './Theme';
 import UsernameSettings from './Username';
-import BlockSaveButton from '../helpers/form/BlockSaveButton';
+import BlockSaveButton from '../helpers/form/block-save-button';
 import { withTranslation } from 'react-i18next';
 
 const propTypes = {

client/src/components/settings/Email.js

@@ -20,7 +20,7 @@ import { maybeEmailRE } from '../../utils';
 import FullWidthRow from '../helpers/full-width-row';
 import Spacer from '../helpers/spacer';
 import SectionHeader from './SectionHeader';
-import BlockSaveButton from '../helpers/form/BlockSaveButton';
+import BlockSaveButton from '../helpers/form/block-save-button';
 import ToggleSetting from './ToggleSetting';
 
 const mapStateToProps = () => ({});

client/src/components/settings/Internet.js

@@ -15,7 +15,7 @@ import { maybeUrlRE } from '../../utils';
 
 import SectionHeader from './SectionHeader';
 import { FullWidthRow } from '../helpers';
-import BlockSaveButton from '../helpers/form/BlockSaveButton';
+import BlockSaveButton from '../helpers/form/block-save-button';
 
 const propTypes = {
   githubProfile: PropTypes.string,

client/src/components/settings/Portfolio.js

@@ -16,7 +16,7 @@ import { hasProtocolRE } from '../../utils';
 
 import { FullWidthRow, ButtonSpacer, Spacer } from '../helpers';
 import SectionHeader from './SectionHeader';
-import BlockSaveButton from '../helpers/form/BlockSaveButton';
+import BlockSaveButton from '../helpers/form/block-save-button';
 
 const propTypes = {
   picture: PropTypes.string,

client/src/components/settings/Username.js

@@ -16,8 +16,8 @@ import {
   usernameValidationSelector,
   submitNewUsername
 } from '../../redux/settings';
-import BlockSaveButton from '../helpers/form/BlockSaveButton';
 import FullWidthRow from '../helpers/full-width-row';
+import BlockSaveButton from '../helpers/form/block-save-button';
 import { isValidUsername } from '../../../../utils/validate';
 
 const propTypes = {