From c5c48aa2aed9c4e583d83bbe58783a93db40977a Mon Sep 17 00:00:00 2001
From: Braden MacDonald <braden@opencraft.com>
Date: Thu, 16 Jan 2025 11:23:00 -0800
Subject: [PATCH] chore: minor example/typescript/eslint updates for React 18
 bump

---
 example/.eslintrc.js          | 6 ++++++
 example/src/MyComponent.jsx   | 4 ++--
 example/src/index.jsx         | 3 ---
 src/Bubble/index.tsx          | 1 +
 src/Chip/index.tsx            | 1 +
 src/Form/FormGroupContext.tsx | 2 +-
 src/Hyperlink/index.tsx       | 1 +
 src/Modal/index.jsx           | 2 ++
 8 files changed, 14 insertions(+), 6 deletions(-)
 create mode 100644 example/.eslintrc.js

diff --git a/example/.eslintrc.js b/example/.eslintrc.js
new file mode 100644
index 0000000000..f8f4502ac5
--- /dev/null
+++ b/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.
+};
diff --git a/example/src/MyComponent.jsx b/example/src/MyComponent.jsx
index 96ddd2cb92..aa3e03fb6d 100644
--- a/example/src/MyComponent.jsx
+++ b/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;
diff --git a/example/src/index.jsx b/example/src/index.jsx
index cb33202538..9ce67d7ced 100644
--- a/example/src/index.jsx
+++ b/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 {
diff --git a/src/Bubble/index.tsx b/src/Bubble/index.tsx
index a1de32cc03..4c21f7bf9e 100644
--- a/src/Bubble/index.tsx
+++ b/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),
diff --git a/src/Chip/index.tsx b/src/Chip/index.tsx
index 81be775f78..7cd2c332a3 100644
--- a/src/Chip/index.tsx
+++ b/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,
diff --git a/src/Form/FormGroupContext.tsx b/src/Form/FormGroupContext.tsx
index bbe7051e89..0ff3821d07 100644
--- a/src/Form/FormGroupContext.tsx
+++ b/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
diff --git a/src/Hyperlink/index.tsx b/src/Hyperlink/index.tsx
index 5229f73f8f..fe5dfb02ae 100644
--- a/src/Hyperlink/index.tsx
+++ b/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,
diff --git a/src/Modal/index.jsx b/src/Modal/index.jsx
index 8e2070c38e..1fc74ec49c 100644
--- a/src/Modal/index.jsx
+++ b/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);
     }
   }