Migrate timeline typescript (#1809)

Co-authored-by: Kyle Holmberg <[email protected]>

components/Modal/Modal.tsx

@@ -35,6 +35,10 @@ export type ModalPropsType = {
    * Applies style classes to the child content.
    */
   childrenClassName?: string;
+  /**
+   * Applies classNames to the overlay.
+   */
+  overlayClassName?: string;
 };
 
 function Modal({

components/Timeline/Timeline.js → components/Timeline/Timeline.tsx

@@ -1,11 +1,12 @@
 import historyData from './historyData';
 import styles from './Timeline.module.css';
 import TimelineEvent from './TimelineEvent/TimelineEvent';
+import { objectKeys } from 'utils/types';
 
 function Timeline() {
   return (
     <div className={styles.timeline}>
-      {Object.keys(historyData).map(year => (
+      {objectKeys(historyData).map(year => (
         <div className={styles.segment} key={year}>
           <div className={styles.date}>
             <h3>{year}</h3>

components/Timeline/TimelineEvent/TimelineEvent.js → components/Timeline/TimelineEvent/TimelineEvent.tsx

@@ -1,12 +1,11 @@
-import { array, node, oneOfType, string } from 'prop-types';
 import styles from './TimelineEvent.module.css';
 
-TimelineEvent.propTypes = {
-  content: oneOfType([string, array, node]).isRequired,
-  title: string.isRequired,
+export type TimelineEventPropsType = {
+  content: React.ReactNode | React.ReactNode[];
+  title: string;
 };
 
-function TimelineEvent({ content, title }) {
+function TimelineEvent({ content, title }: TimelineEventPropsType) {
   return (
     <div className="mb-8 border-1 border-solid border-[#c5c5c5] p-5 rounded-md">
       <h4 className="capitalize md:text-2xl">{title}</h4>

components/Timeline/TimelineNav/TimelineNav.js → components/Timeline/TimelineNav/TimelineNav.tsx

@@ -1,3 +1,4 @@
+// @ts-expect-error
 import { Link } from 'react-scroll';
 import historyData from '../historyData';
 

components/UpgradeBrowserOverlay/__stories__/UpgradeBrowserOverlay.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import UpgradeBrowserOverlay from '../UpgradeBrowserOverlay';
+
+type UpgradeBrowserOverlayStoryType = StoryObj<typeof UpgradeBrowserOverlay>;
+
+const meta: Meta<typeof UpgradeBrowserOverlay> = {
+  title: 'UpgradeBrowserOverlay',
+  component: UpgradeBrowserOverlay,
+};
+
+export default meta;
+
+export const Default: UpgradeBrowserOverlayStoryType = {
+  render: () => <UpgradeBrowserOverlay />,
+};