chore: minor example/typescript/eslint updates for React 18 bump

example/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: [
+    '@edx/eslint-config',
+  ],
+  root: true, // Don't also import the paragon eslint config in the parent directory.
+};

example/src/MyComponent.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Button, Form, Icon, Bubble, Stack, Container } from '@openedx/paragon'; // eslint-disable-line
 import { FavoriteBorder } from '@openedx/paragon/icons'; // eslint-disable-line
 
-const MyComponent = () => {
+function MyComponent() {
   const [value, setValue] = useState('');
   const handleChange = (e) => setValue(e.target.value);
   const handleClick = () => alert('Form is submitted!'); // eslint-disable-line no-alert
@@ -26,6 +26,6 @@ const MyComponent = () => {
       </Form>
     </Container>
   );
-};
+}
 
 export default MyComponent;

example/src/index.jsx

@@ -1,6 +1,3 @@
-import 'core-js/stable';
-import 'regenerator-runtime/runtime';
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {

src/Bubble/index.tsx

@@ -38,6 +38,7 @@ const Bubble = React.forwardRef<HTMLDivElement, BubbleProps>(({
 
 Bubble.propTypes = {
   /** Specifies contents of the component. */
+  // @ts-ignore
   children: PropTypes.node,
   /** The `Bubble` style variant to use. */
   variant: PropTypes.oneOf(STYLE_VARIANTS),

src/Chip/index.tsx

@@ -94,6 +94,7 @@ const Chip = React.forwardRef(({
 
 Chip.propTypes = {
   /** Specifies the content of the `Chip`. */
+  // @ts-ignore
   children: PropTypes.node.isRequired,
   /** Specifies an additional `className` to add to the base element. */
   className: PropTypes.string,

src/Form/FormGroupContext.tsx

@@ -60,7 +60,7 @@ function FormGroupContextProvider({
   const [labelledByIds, registerLabelerId] = useIdList(controlId);
   const [isControlGroup, useSetIsControlGroupEffect] = useStateEffect(false);
 
-  const getControlProps = useCallback((controlProps) => {
+  const getControlProps = useCallback((controlProps: Record<string, any>) => {
     // labelledByIds from the list above should only be added to a control
     // if it the control is a group. We prefer adding a condition here because:
     //    - Hooks cannot be called inside conditionals

src/Hyperlink/index.tsx

@@ -114,6 +114,7 @@ Hyperlink.propTypes = {
   /** specifies the URL */
   destination: PropTypes.string.isRequired,
   /** Content of the hyperlink */
+  // @ts-ignore
   children: PropTypes.node.isRequired,
   /** Custom class names for the hyperlink */
   className: PropTypes.string,

src/Modal/index.jsx

@@ -50,6 +50,8 @@ class Modal extends React.Component {
 
   componentWillUnmount() {
     if (this.parentElement) {
+      // TODO: update this to use the new createRoot() compatible APIs.
+      // eslint-disable-next-line react/no-deprecated
       ReactDOM.unmountComponentAtNode(this.parentElement);
     }
   }