From 19bc3fd2ab6aef59cd543dce1ed788e6e50eceeb Mon Sep 17 00:00:00 2001
From: Michael Stedman <46408716+recondesigns@users.noreply.github.com>
Date: Sat, 2 Mar 2024 15:41:59 -0600
Subject: [PATCH 01/14] migrated Card component files to ts

---
 components/Cards/Card/{Card.js => Card.tsx}   | 18 ++++++------------
 .../Cards/Card/__stories__/Card.stories.js    | 15 ---------------
 .../Cards/Card/__stories__/Card.stories.tsx   | 19 +++++++++++++++++++
 .../__tests__/{Card.test.js => Card.test.tsx} |  1 -
 .../{Card.test.js.snap => Card.test.tsx.snap} |  0
 5 files changed, 25 insertions(+), 28 deletions(-)
 rename components/Cards/Card/{Card.js => Card.tsx} (67%)
 delete mode 100644 components/Cards/Card/__stories__/Card.stories.js
 create mode 100644 components/Cards/Card/__stories__/Card.stories.tsx
 rename components/Cards/Card/__tests__/{Card.test.js => Card.test.tsx} (99%)
 rename components/Cards/Card/__tests__/__snapshots__/{Card.test.js.snap => Card.test.tsx.snap} (100%)

diff --git a/components/Cards/Card/Card.js b/components/Cards/Card/Card.tsx
similarity index 67%
rename from components/Cards/Card/Card.js
rename to components/Cards/Card/Card.tsx
index 4576efd36..03427f406 100644
--- a/components/Cards/Card/Card.js
+++ b/components/Cards/Card/Card.tsx
@@ -1,26 +1,20 @@
-import { bool, node, string } from 'prop-types';
 import { twMerge } from 'tailwind-merge';
 import { getDataAttributes } from 'common/utils/prop-utils';
 
-Card.propTypes = {
-  children: node.isRequired,
-  className: string,
-  hasAnimationOnHover: bool,
+export type CardPropsType = {
+  children: React.ReactNode;
+  className?: string;
+  hasAnimationOnHover?: boolean;
 };
 
-Card.defaultProps = {
-  className: undefined,
-  hasAnimationOnHover: false,
-};
-
-function Card({ children, className, ...props }) {
+function Card({ children, className, hasAnimationOnHover, ...props }: CardPropsType) {
   const customDataAttributes = getDataAttributes(props);
 
   return (
     <article
       className={twMerge(
         'items-center bg-white [&_svg]:fill-themeSecondary text-themeSecondary flex flex-col flex-nowrap justify-around m-4 min-h-[100px] min-w-[100px] p-6 shadow-md focus-visible:outline-none',
-        props.hasAnimationOnHover &&
+        hasAnimationOnHover &&
           'shadow-sm transition-shadow duration-200 ease-linear hover:shadow-lg focus-visible:shadow-lg',
         className,
       )}
diff --git a/components/Cards/Card/__stories__/Card.stories.js b/components/Cards/Card/__stories__/Card.stories.js
deleted file mode 100644
index 02b40d2b5..000000000
--- a/components/Cards/Card/__stories__/Card.stories.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { descriptions } from 'common/constants/descriptions';
-import Card from '../Card';
-
-export default {
-  component: Card,
-  title: 'Cards/Card',
-};
-
-const Template = arguments_ => <Card {...arguments_} />;
-
-// Default Card supplied with only required args
-export const Default = Template.bind({});
-Default.args = {
-  children: descriptions.medium,
-};
diff --git a/components/Cards/Card/__stories__/Card.stories.tsx b/components/Cards/Card/__stories__/Card.stories.tsx
new file mode 100644
index 000000000..9269fca6e
--- /dev/null
+++ b/components/Cards/Card/__stories__/Card.stories.tsx
@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { descriptions } from 'common/constants/descriptions';
+import Card from '../Card';
+
+type CardStoryType = StoryObj<typeof Card>;
+
+const meta: Meta<typeof Card> = {
+  title: 'Cards/Card',
+  component: Card,
+  args: {
+    children: descriptions.medium,
+  },
+};
+
+export default meta;
+
+export const Default: CardStoryType = {
+  render: args => <Card {...args} />,
+};
diff --git a/components/Cards/Card/__tests__/Card.test.js b/components/Cards/Card/__tests__/Card.test.tsx
similarity index 99%
rename from components/Cards/Card/__tests__/Card.test.js
rename to components/Cards/Card/__tests__/Card.test.tsx
index a2779cca7..82d967be4 100644
--- a/components/Cards/Card/__tests__/Card.test.js
+++ b/components/Cards/Card/__tests__/Card.test.tsx
@@ -1,5 +1,4 @@
 import createSnapshotTest from 'test-utils/createSnapshotTest';
-
 import Card from '../Card';
 
 describe('Card', () => {
diff --git a/components/Cards/Card/__tests__/__snapshots__/Card.test.js.snap b/components/Cards/Card/__tests__/__snapshots__/Card.test.tsx.snap
similarity index 100%
rename from components/Cards/Card/__tests__/__snapshots__/Card.test.js.snap
rename to components/Cards/Card/__tests__/__snapshots__/Card.test.tsx.snap

From 4e25ec2937ef04a522836ccb9b7d789cd76ad429 Mon Sep 17 00:00:00 2001
From: Michael Stedman <46408716+recondesigns@users.noreply.github.com>
Date: Sat, 2 Mar 2024 15:52:18 -0600
Subject: [PATCH 02/14] migrated ImageCard files to .tsx

---
 .../ImageCard/{ImageCard.js => ImageCard.tsx} | 41 +++++++++++--------
 .../__stories__/ImageCard.stories.js          | 18 --------
 .../__stories__/ImageCard.stories.tsx         | 22 ++++++++++
 .../{ImageCard.test.js => ImageCard.test.tsx} |  1 -
 ...d.test.js.snap => ImageCard.test.tsx.snap} |  6 +--
 5 files changed, 49 insertions(+), 39 deletions(-)
 rename components/Cards/ImageCard/{ImageCard.js => ImageCard.tsx} (52%)
 delete mode 100644 components/Cards/ImageCard/__stories__/ImageCard.stories.js
 create mode 100644 components/Cards/ImageCard/__stories__/ImageCard.stories.tsx
 rename components/Cards/ImageCard/__tests__/{ImageCard.test.js => ImageCard.test.tsx} (99%)
 rename components/Cards/ImageCard/__tests__/__snapshots__/{ImageCard.test.js.snap => ImageCard.test.tsx.snap} (83%)

diff --git a/components/Cards/ImageCard/ImageCard.js b/components/Cards/ImageCard/ImageCard.tsx
similarity index 52%
rename from components/Cards/ImageCard/ImageCard.js
rename to components/Cards/ImageCard/ImageCard.tsx
index e6da1c382..2452701d5 100644
--- a/components/Cards/ImageCard/ImageCard.js
+++ b/components/Cards/ImageCard/ImageCard.tsx
@@ -1,26 +1,35 @@
-import { bool, node, string } from 'prop-types';
+// import { bool, node, string } from 'prop-types';
 import { twMerge } from 'tailwind-merge';
 import Image from 'next/image';
-import Card from 'components/Cards/Card/Card';
+import Card, { CardPropsType } from 'components/Cards/Card/Card';
 
-ImageCard.propTypes = {
-  alt: string.isRequired,
-  children: node.isRequired,
-  className: string,
-  imageSource: string.isRequired,
-  isImageFirst: bool,
-};
+export type ImageCardPropsType = {
+  /**
+   * Includes alt text for the image.
+   */
+  alt: string;
+  /**
+   * Url for the image.
+   */
+  imageSource: string;
+  /**
+   * Sets whether the image is displayed inline before the content, or after.
+   * @default - true
+   */
+  isImageFirst?: boolean;
+} & Omit<CardPropsType, 'hasAnimationOnHover'>;
 
-ImageCard.defaultProps = {
-  className: undefined,
-  isImageFirst: true,
-};
-
-function ImageCard({ alt, children, className, imageSource, isImageFirst }) {
+function ImageCard({
+  alt,
+  children,
+  className,
+  imageSource,
+  isImageFirst = true,
+}: ImageCardPropsType) {
   const ImageComponent = <Image src={imageSource} alt={alt} layout="fill" objectFit="cover" />;
 
   const ContentComponent = (
-    <div className="flex items-center flex-col justify-start overflow-y-auto m-4">{children}</div>
+    <div className="flex flex-col items-center justify-start m-4 overflow-y-auto">{children}</div>
   );
 
   return (
diff --git a/components/Cards/ImageCard/__stories__/ImageCard.stories.js b/components/Cards/ImageCard/__stories__/ImageCard.stories.js
deleted file mode 100644
index 97f21d270..000000000
--- a/components/Cards/ImageCard/__stories__/ImageCard.stories.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { descriptions } from 'common/constants/descriptions';
-import { s3 } from 'common/constants/urls';
-import ImageCard from '../ImageCard';
-
-export default {
-  component: ImageCard,
-  title: 'Cards/ImageCard',
-};
-
-const Template = arguments_ => <ImageCard {...arguments_} />;
-
-// Default ImageCard supplied with only required args
-export const Default = Template.bind({});
-Default.args = {
-  alt: 'Image Card',
-  children: descriptions.long,
-  imageSource: `${s3}redesign/heroBanners/about.jpg`,
-};
diff --git a/components/Cards/ImageCard/__stories__/ImageCard.stories.tsx b/components/Cards/ImageCard/__stories__/ImageCard.stories.tsx
new file mode 100644
index 000000000..62d91525c
--- /dev/null
+++ b/components/Cards/ImageCard/__stories__/ImageCard.stories.tsx
@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { descriptions } from 'common/constants/descriptions';
+import { s3 } from 'common/constants/urls';
+import ImageCard from '../ImageCard';
+
+type ImageCardPropsType = StoryObj<typeof ImageCard>;
+
+const meta: Meta<typeof ImageCard> = {
+  title: 'Cards/ImageCard',
+  component: ImageCard,
+  args: {
+    alt: 'Image Card',
+    children: descriptions.long,
+    imageSource: `${s3}redesign/heroBanners/about.jpg`,
+  },
+};
+
+export default meta;
+
+export const Default: ImageCardPropsType = {
+  render: args => <ImageCard {...args} />
+};
diff --git a/components/Cards/ImageCard/__tests__/ImageCard.test.js b/components/Cards/ImageCard/__tests__/ImageCard.test.tsx
similarity index 99%
rename from components/Cards/ImageCard/__tests__/ImageCard.test.js
rename to components/Cards/ImageCard/__tests__/ImageCard.test.tsx
index 1954ee8cf..761d20a5c 100644
--- a/components/Cards/ImageCard/__tests__/ImageCard.test.js
+++ b/components/Cards/ImageCard/__tests__/ImageCard.test.tsx
@@ -1,5 +1,4 @@
 import createShallowSnapshotTest from 'test-utils/createShallowSnapshotTest';
-
 import ImageCard from '../ImageCard';
 
 describe('ImageCard', () => {
diff --git a/components/Cards/ImageCard/__tests__/__snapshots__/ImageCard.test.js.snap b/components/Cards/ImageCard/__tests__/__snapshots__/ImageCard.test.tsx.snap
similarity index 83%
rename from components/Cards/ImageCard/__tests__/__snapshots__/ImageCard.test.js.snap
rename to components/Cards/ImageCard/__tests__/__snapshots__/ImageCard.test.tsx.snap
index 245515295..be3d2c90d 100644
--- a/components/Cards/ImageCard/__tests__/__snapshots__/ImageCard.test.js.snap
+++ b/components/Cards/ImageCard/__tests__/__snapshots__/ImageCard.test.tsx.snap
@@ -3,11 +3,10 @@
 exports[`ImageCard > should render with many props assigned 1`] = `
 <Card
   className="md:flex-row flex-col md:h-56 md:w-[650px] md:max-w-none p-0 h-auto max-w-xs w-auto [&>*]:flex-[1_1_50%] test"
-  hasAnimationOnHover={false}
 >
   <React.Fragment>
     <div
-      className="flex items-center flex-col justify-start overflow-y-auto m-4"
+      className="flex flex-col items-center justify-start m-4 overflow-y-auto"
     >
       <p>
         Testing!
@@ -30,7 +29,6 @@ exports[`ImageCard > should render with many props assigned 1`] = `
 exports[`ImageCard > should render with required props 1`] = `
 <Card
   className="md:flex-row flex-col md:h-56 md:w-[650px] md:max-w-none p-0 h-auto max-w-xs w-auto [&>*]:flex-[1_1_50%]"
-  hasAnimationOnHover={false}
 >
   <React.Fragment>
     <div
@@ -44,7 +42,7 @@ exports[`ImageCard > should render with required props 1`] = `
       />
     </div>
     <div
-      className="flex items-center flex-col justify-start overflow-y-auto m-4"
+      className="flex flex-col items-center justify-start m-4 overflow-y-auto"
     >
       <p>
         Testing!

From c3c44e45b9c1199c5bc2dbfdd1aaeb1994d4a8c3 Mon Sep 17 00:00:00 2001
From: Michael Stedman <46408716+recondesigns@users.noreply.github.com>
Date: Sat, 2 Mar 2024 17:52:45 -0600
Subject: [PATCH 03/14] migrated ResourceCard files to .tsx

---
 .../{ResourceCard.js => ResourceCard.tsx}     | 153 ++++++++++++------
 .../__stories__/ResourceCard.stories.js       |  31 ----
 .../__stories__/ResourceCard.stories.tsx      |  35 ++++
 ...urceCard.test.js => ResourceCard.test.tsx} |  15 +-
 4 files changed, 151 insertions(+), 83 deletions(-)
 rename components/Cards/ResourceCard/{ResourceCard.js => ResourceCard.tsx} (65%)
 delete mode 100644 components/Cards/ResourceCard/__stories__/ResourceCard.stories.js
 create mode 100644 components/Cards/ResourceCard/__stories__/ResourceCard.stories.tsx
 rename components/Cards/ResourceCard/__tests__/{ResourceCard.test.js => ResourceCard.test.tsx} (92%)

diff --git a/components/Cards/ResourceCard/ResourceCard.js b/components/Cards/ResourceCard/ResourceCard.tsx
similarity index 65%
rename from components/Cards/ResourceCard/ResourceCard.js
rename to components/Cards/ResourceCard/ResourceCard.tsx
index 38fc9bdbf..b923e50ba 100644
--- a/components/Cards/ResourceCard/ResourceCard.js
+++ b/components/Cards/ResourceCard/ResourceCard.tsx
@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { string, number, func, oneOf, oneOfType, array, bool } from 'prop-types';
 import classNames from 'classnames';
 import Accordion from 'components/Accordion/Accordion';
 import OutboundLink from 'components/OutboundLink/OutboundLink';
@@ -18,16 +17,64 @@ import styles from './ResourceCard.module.css';
 
 const DESKTOP_VOTING_BLOCK = 'desktopVotingBlock';
 
-VotingBlock.propTypes = {
-  blockID: string.isRequired,
-  resourceID: string.isRequired,
-  upVotes: number.isRequired,
-  downVotes: number.isRequired,
-  handleVote: func.isRequired,
-  setUpVotes: func.isRequired,
-  setDownVotes: func.isRequired,
-  didUpvote: bool.isRequired,
-  didDownvote: bool.isRequired,
+type VoteDirectionType = 'upvote' | 'downvote';
+
+type HandleVoteType = (
+  /**
+   * Sets the vote to be up or down.
+   */
+  voteDirection: VoteDirectionType,
+  /**
+   * Sets which resource is gets the vote.
+   */
+  resourceID: number,
+  /**
+   * Function that sets the state value of "up" votes.
+   */
+  setUpVotes: VotingBlockPropsType['setUpVotes'],
+  /**
+   * Function that sets the state value of "down" votes.
+   */
+  setDownVotes: VotingBlockPropsType['setDownVotes'],
+) => void;
+
+type VotingBlockPropsType = {
+  /**
+   * Applies an id.
+   */
+  blockID: string;
+  /**
+   * Sets which resource is gets the vote.
+   */
+  resourceID: number;
+  /**
+   * Number of "up" votes.
+   */
+  upVotes: number;
+  /**
+   * Number of "down" votes.
+   */
+  downVotes: number;
+  /**
+   * Function to handle the vote.
+   */
+  handleVote: HandleVoteType | undefined;
+  /**
+   * Function that sets the state value of "up" votes.
+   */
+  setUpVotes: React.Dispatch<React.SetStateAction<number>>;
+  /**
+   * Function that sets the state value of "down" votes.
+   */
+  setDownVotes: React.Dispatch<React.SetStateAction<number>>;
+  /**
+   * Applies classes based on whether an "up" vote has occurred.
+   */
+  didUpvote: boolean;
+  /**
+   * Applies classes based on whether an "down" vote has occurred.
+   */
+  didDownvote: boolean;
 };
 
 function VotingBlock({
@@ -40,8 +87,9 @@ function VotingBlock({
   setDownVotes,
   didUpvote,
   didDownvote,
-}) {
-  const onVote = voteDirection => handleVote(voteDirection, resourceID, setUpVotes, setDownVotes);
+}: VotingBlockPropsType) {
+  const onVote = (voteDirection: VoteDirectionType) =>
+    handleVote?.(voteDirection, resourceID, setUpVotes, setDownVotes);
   const onUpvote = () => onVote('upvote');
   const onDownvote = () => onVote('downvote');
 
@@ -105,44 +153,58 @@ export const possibleUserVotes = {
   none: null,
 };
 
-ResourceCard.propTypes = {
-  description: string,
-  downvotes: number,
-  href: string.isRequired,
-  name: string.isRequired,
-  id: number.isRequired,
-  category: string,
-  languages: oneOfType([string, array]),
-  isFree: bool,
-  handleVote: func,
-  upvotes: number,
-  userVote: oneOf(Object.values(possibleUserVotes)),
-};
+// ResourceCard.propTypes = {
+//   description: string,
+//   downvotes: number,
+//   href: string.isRequired,
+//   name: string.isRequired,
+//   id: number.isRequired,
+//   category: string,
+//   languages: oneOfType([string, array]),
+//   isFree: bool,
+//   handleVote: func,
+//   upvotes: number,
+//   userVote: oneOf(Object.values(possibleUserVotes)),
+// };
 
-ResourceCard.defaultProps = {
-  description: '',
-  downvotes: 0,
-  category: '',
-  languages: [],
-  isFree: false,
-  handleVote: () => {},
-  upvotes: 0,
-  userVote: possibleUserVotes.none,
+export type ResourceCardPropType = {
+  href: string;
+  name: string;
+  id: number;
+  description?: string;
+  downvotes?: number;
+  category?: string;
+  languages?: string | string[];
+  isFree?: boolean;
+  handleVote?: () => void;
+  upvotes?: number;
+  userVote?: keyof typeof possibleUserVotes | null;
 };
 
+// ResourceCard.defaultProps = {
+//   description: '',
+//   downvotes: 0,
+//   category: '',
+//   languages: [],
+//   isFree: false,
+//   handleVote: () => {},
+//   upvotes: 0,
+//   userVote: possibleUserVotes.none,
+// };
+
 function ResourceCard({
-  description,
-  downvotes,
+  description = '',
+  downvotes = 0,
   href,
   name,
-  category,
-  languages,
-  isFree,
+  category = '',
+  languages = [],
+  isFree = false,
   handleVote,
-  upvotes,
-  userVote,
+  upvotes = 0,
+  userVote = possibleUserVotes.none,
   id,
-}) {
+}: ResourceCardPropType) {
   const [upVotes, setUpVotes] = useState(upvotes);
   const [downVotes, setDownVotes] = useState(downvotes);
   const didUpvote = userVote === possibleUserVotes.upvote;
@@ -157,7 +219,7 @@ function ResourceCard({
           <div
             data-testid={RESOURCE_CARD}
             data-test-category={category}
-            data-test-languages={languages.join('-')}
+            data-test-languages={Array.isArray(languages) ? languages.join('-') : languages}
             data-test-isfree={isFree}
             className={styles.header}
           >
@@ -191,7 +253,8 @@ function ResourceCard({
 
             <div className={styles.metadata}>
               <p>
-                <span className={styles.metadataLabel}>Languages:</span> {languages.join(', ')}
+                <span className={styles.metadataLabel}>Languages:</span>{' '}
+                {Array.isArray(languages) ? languages.join(', ') : languages}
               </p>
               <p>
                 <span className={styles.metadataLabel}>Category:</span> {category}
diff --git a/components/Cards/ResourceCard/__stories__/ResourceCard.stories.js b/components/Cards/ResourceCard/__stories__/ResourceCard.stories.js
deleted file mode 100644
index 2e68fcc3b..000000000
--- a/components/Cards/ResourceCard/__stories__/ResourceCard.stories.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { descriptions } from 'common/constants/descriptions';
-import ResourceCard from '../ResourceCard';
-
-export default {
-  component: ResourceCard,
-  title: 'Cards/ResourceCard',
-};
-
-const Template = arguments_ => <ResourceCard {...arguments_} />;
-
-// Default ResourceCard supplied with only required args
-export const Default = Template.bind({});
-Default.args = {
-  href: 'https://google.com/',
-  name: 'Name of Resource',
-};
-
-// ResourceCard supplied with a really long name
-export const WithLongName = Template.bind({});
-WithLongName.args = {
-  ...Default.args,
-  name: descriptions.medium,
-};
-
-// ResourceCard supplied with a number of upvotes/downvotes
-export const WithVotes = Template.bind({});
-WithVotes.args = {
-  ...Default.args,
-  downvotes: 25,
-  upvotes: 25,
-};
diff --git a/components/Cards/ResourceCard/__stories__/ResourceCard.stories.tsx b/components/Cards/ResourceCard/__stories__/ResourceCard.stories.tsx
new file mode 100644
index 000000000..f56a9dd00
--- /dev/null
+++ b/components/Cards/ResourceCard/__stories__/ResourceCard.stories.tsx
@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { descriptions } from 'common/constants/descriptions';
+import ResourceCard from '../ResourceCard';
+
+type ResourceCardStoryType = StoryObj<typeof ResourceCard>;
+
+const meta: Meta<typeof ResourceCard> = {
+  title: 'Cards/ResourceCard',
+  component: ResourceCard,
+  args: {
+    href: 'https://google.com/',
+    name: 'Name of resource',
+  },
+};
+
+export default meta;
+
+export const Default: ResourceCardStoryType = {
+  render: args => <ResourceCard {...args} />,
+};
+
+export const WithLongName: ResourceCardStoryType = {
+  ...Default,
+  args: {
+    name: descriptions.medium,
+  },
+};
+
+export const WithVotes: ResourceCardStoryType = {
+  ...Default,
+  args: {
+    downvotes: 25,
+    upvotes: 25,
+  },
+};
diff --git a/components/Cards/ResourceCard/__tests__/ResourceCard.test.js b/components/Cards/ResourceCard/__tests__/ResourceCard.test.tsx
similarity index 92%
rename from components/Cards/ResourceCard/__tests__/ResourceCard.test.js
rename to components/Cards/ResourceCard/__tests__/ResourceCard.test.tsx
index b497fd67b..eca7fca9a 100644
--- a/components/Cards/ResourceCard/__tests__/ResourceCard.test.js
+++ b/components/Cards/ResourceCard/__tests__/ResourceCard.test.tsx
@@ -1,6 +1,5 @@
 import { fireEvent, render } from '@testing-library/react';
 import { UPVOTE_BUTTON, DOWNVOTE_BUTTON } from 'common/constants/testIDs';
-
 import ResourceCard from '../ResourceCard';
 
 describe('ResourceCard', () => {
@@ -12,12 +11,13 @@ describe('ResourceCard', () => {
 
   it('fires appropriate method when upvote button clicked', () => {
     const handleVoteMock = vi.fn();
-
     const component = render(<ResourceCard {...requiredProps} handleVote={handleVoteMock} />);
-
     const UpvoteButton = component.queryByTestId(UPVOTE_BUTTON);
+
     expect(handleVoteMock).not.toHaveBeenCalled();
-    fireEvent.click(UpvoteButton);
+
+    UpvoteButton && fireEvent.click(UpvoteButton);
+
     expect(handleVoteMock).toHaveBeenCalledTimes(1);
     expect(handleVoteMock).toHaveBeenCalledWith(
       'upvote',
@@ -29,12 +29,13 @@ describe('ResourceCard', () => {
 
   it('fires appropriate method when downvote button clicked', () => {
     const handleVoteMock = vi.fn();
-
     const component = render(<ResourceCard {...requiredProps} handleVote={handleVoteMock} />);
-
     const DownvoteButton = component.queryByTestId(DOWNVOTE_BUTTON);
+
     expect(handleVoteMock).not.toHaveBeenCalled();
-    fireEvent.click(DownvoteButton);
+
+    DownvoteButton && fireEvent.click(DownvoteButton);
+
     expect(handleVoteMock).toHaveBeenCalledTimes(1);
     expect(handleVoteMock).toHaveBeenCalledWith(
       'downvote',

From b4acec30d6c2b75ad1c27eecf4ffddc7c5e810a0 Mon Sep 17 00:00:00 2001
From: Michael Stedman <46408716+recondesigns@users.noreply.github.com>
Date: Sat, 2 Mar 2024 18:02:24 -0600
Subject: [PATCH 04/14] migrated ResourceSkeletonCard files to .tsx

---
 ...eSkeletonCard.js => ResourceSkeletonCard.tsx} | 12 ++++++++----
 .../__stories__/ResourceSkeletonCard.stories.js  | 15 ---------------
 .../__stories__/ResourceSkeletonCard.stories.tsx | 16 ++++++++++++++++
 ...ard.test.js => ResourceSkeletonCard.test.tsx} |  1 +
 4 files changed, 25 insertions(+), 19 deletions(-)
 rename components/Cards/ResourceCard/{ResourceSkeletonCard.js => ResourceSkeletonCard.tsx} (67%)
 delete mode 100644 components/Cards/ResourceCard/__stories__/ResourceSkeletonCard.stories.js
 create mode 100644 components/Cards/ResourceCard/__stories__/ResourceSkeletonCard.stories.tsx
 rename components/Cards/ResourceCard/__tests__/{ResourceSkeletonCard.test.js => ResourceSkeletonCard.test.tsx} (99%)

diff --git a/components/Cards/ResourceCard/ResourceSkeletonCard.js b/components/Cards/ResourceCard/ResourceSkeletonCard.tsx
similarity index 67%
rename from components/Cards/ResourceCard/ResourceSkeletonCard.js
rename to components/Cards/ResourceCard/ResourceSkeletonCard.tsx
index aac7dbb70..48812955e 100644
--- a/components/Cards/ResourceCard/ResourceSkeletonCard.js
+++ b/components/Cards/ResourceCard/ResourceSkeletonCard.tsx
@@ -1,12 +1,16 @@
-import { number } from 'prop-types';
+// import { number } from 'prop-types';
 import { SKELETON_CARD } from '../../../common/constants/testIDs';
 import styles from './ResourceSkeletonCard.module.css';
 
-ResourceSkeletonCard.propTypes = {
-  numberOfSkeletons: number.isRequired,
+// ResourceSkeletonCard.propTypes = {
+//   numberOfSkeletons: number.isRequired,
+// };
+
+export type ResourceSkeletonCardPropsType = {
+  numberOfSkeletons: number;
 };
 
-function ResourceSkeletonCard({ numberOfSkeletons }) {
+function ResourceSkeletonCard({ numberOfSkeletons }: ResourceSkeletonCardPropsType) {
   return (
     <div className={styles.resourcesCardWrapper}>
       {[...Array(numberOfSkeletons)].map((skeleton, index) => (
diff --git a/components/Cards/ResourceCard/__stories__/ResourceSkeletonCard.stories.js b/components/Cards/ResourceCard/__stories__/ResourceSkeletonCard.stories.js
deleted file mode 100644
index 49b2bebaf..000000000
--- a/components/Cards/ResourceCard/__stories__/ResourceSkeletonCard.stories.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import ResourceSkeletonCard from '../ResourceSkeletonCard';
-
-export default {
-  component: ResourceSkeletonCard,
-  title: 'Cards/ResourceSkeletonCard',
-};
-
-const Template = arguments_ => <ResourceSkeletonCard {...arguments_} />;
-
-// Default ResourceSkeletonCard supplied with only required args
-// Should mimic a list of results loading
-export const Default = Template.bind({});
-Default.args = {
-  numberOfSkeletons: 10,
-};
diff --git a/components/Cards/ResourceCard/__stories__/ResourceSkeletonCard.stories.tsx b/components/Cards/ResourceCard/__stories__/ResourceSkeletonCard.stories.tsx
new file mode 100644
index 000000000..1d82790cb
--- /dev/null
+++ b/components/Cards/ResourceCard/__stories__/ResourceSkeletonCard.stories.tsx
@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react';
+import ResourceSkeletonCard from '../ResourceSkeletonCard';
+
+type ResourceSkeletonCardStoryType = StoryObj<typeof ResourceSkeletonCard>;
+
+const meta: Meta<typeof ResourceSkeletonCard> = {
+  title: 'Cards/ResourceSkeletonCard',
+  component: ResourceSkeletonCard,
+  args: { numberOfSkeletons: 10 },
+};
+
+export default meta;
+
+export const Default: ResourceSkeletonCardStoryType = {
+  render: args => <ResourceSkeletonCard {...args} />,
+};
diff --git a/components/Cards/ResourceCard/__tests__/ResourceSkeletonCard.test.js b/components/Cards/ResourceCard/__tests__/ResourceSkeletonCard.test.tsx
similarity index 99%
rename from components/Cards/ResourceCard/__tests__/ResourceSkeletonCard.test.js
rename to components/Cards/ResourceCard/__tests__/ResourceSkeletonCard.test.tsx
index bae647c11..24fec7511 100644
--- a/components/Cards/ResourceCard/__tests__/ResourceSkeletonCard.test.js
+++ b/components/Cards/ResourceCard/__tests__/ResourceSkeletonCard.test.tsx
@@ -4,6 +4,7 @@ import ResourceSkeletonCard from '../ResourceSkeletonCard';
 
 describe('ResourceSkeletonCard', () => {
   const numberOfSkeletons = 5;
+
   it('renders the correct amount of skeletons', () => {
     const component = render(<ResourceSkeletonCard numberOfSkeletons={numberOfSkeletons} />);
     const Skeletons = component.queryAllByTestId(SKELETON_CARD);

From 15c3ef4639baa78a12077108340f75541b6cc91e Mon Sep 17 00:00:00 2001
From: Michael Stedman <46408716+recondesigns@users.noreply.github.com>
Date: Sat, 2 Mar 2024 18:12:57 -0600
Subject: [PATCH 05/14] migrated ValueCard files to .tsx

---
 .../ValueCard/{ValueCard.js => ValueCard.tsx} |  9 +++----
 .../__stories__/ValueCard.stories.js          | 23 ----------------
 .../__stories__/ValueCard.stories.tsx         | 27 +++++++++++++++++++
 .../{ValueCard.test.js => ValueCard.test.tsx} |  1 -
 ...d.test.js.snap => ValueCard.test.tsx.snap} |  0
 5 files changed, 31 insertions(+), 29 deletions(-)
 rename components/Cards/ValueCard/{ValueCard.js => ValueCard.tsx} (65%)
 delete mode 100644 components/Cards/ValueCard/__stories__/ValueCard.stories.js
 create mode 100644 components/Cards/ValueCard/__stories__/ValueCard.stories.tsx
 rename components/Cards/ValueCard/__tests__/{ValueCard.test.js => ValueCard.test.tsx} (99%)
 rename components/Cards/ValueCard/__tests__/__snapshots__/{ValueCard.test.js.snap => ValueCard.test.tsx.snap} (100%)

diff --git a/components/Cards/ValueCard/ValueCard.js b/components/Cards/ValueCard/ValueCard.tsx
similarity index 65%
rename from components/Cards/ValueCard/ValueCard.js
rename to components/Cards/ValueCard/ValueCard.tsx
index a3faf5347..e771a84a3 100644
--- a/components/Cards/ValueCard/ValueCard.js
+++ b/components/Cards/ValueCard/ValueCard.tsx
@@ -1,12 +1,11 @@
-import { string } from 'prop-types';
 import Card from 'components/Cards/Card/Card';
 
-ValueCard.propTypes = {
-  name: string.isRequired,
-  description: string.isRequired,
+export type ValueCardPropsType = {
+  name: string;
+  description: string;
 };
 
-function ValueCard({ description, name }) {
+function ValueCard({ description, name }: ValueCardPropsType) {
   return (
     <Card
       className="!justify-start max-w-[400px] h-[400px] p-8 overflow-y-auto"
diff --git a/components/Cards/ValueCard/__stories__/ValueCard.stories.js b/components/Cards/ValueCard/__stories__/ValueCard.stories.js
deleted file mode 100644
index 2baa46795..000000000
--- a/components/Cards/ValueCard/__stories__/ValueCard.stories.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { descriptions } from 'common/constants/descriptions';
-import ValueCard from '../ValueCard';
-
-export default {
-  component: ValueCard,
-  title: 'Cards/ValueCard',
-};
-
-const Template = arguments_ => <ValueCard {...arguments_} />;
-
-// Default ValueCard supplied with only required args
-export const Default = Template.bind({});
-Default.args = {
-  name: 'Card name',
-  description: descriptions.short,
-};
-
-// ValueCard supplied with long description
-export const WithLongDescription = Template.bind({});
-WithLongDescription.args = {
-  ...Default.args,
-  description: descriptions.long,
-};
diff --git a/components/Cards/ValueCard/__stories__/ValueCard.stories.tsx b/components/Cards/ValueCard/__stories__/ValueCard.stories.tsx
new file mode 100644
index 000000000..78cd2dcc3
--- /dev/null
+++ b/components/Cards/ValueCard/__stories__/ValueCard.stories.tsx
@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { descriptions } from 'common/constants/descriptions';
+import ValueCard from '../ValueCard';
+
+type ValueCardStoryType = StoryObj<typeof ValueCard>;
+
+const meta: Meta<typeof ValueCard> = {
+  title: 'Cards/ValueCard',
+  component: ValueCard,
+  args: {
+    name: 'Card name',
+    description: descriptions.short,
+  },
+};
+
+export default meta;
+
+export const Default: ValueCardStoryType = {
+  render: args => <ValueCard {...args} />,
+};
+
+export const WithLongDescription: ValueCardStoryType = {
+  ...Default,
+  args: {
+    description: descriptions.long,
+  },
+};
diff --git a/components/Cards/ValueCard/__tests__/ValueCard.test.js b/components/Cards/ValueCard/__tests__/ValueCard.test.tsx
similarity index 99%
rename from components/Cards/ValueCard/__tests__/ValueCard.test.js
rename to components/Cards/ValueCard/__tests__/ValueCard.test.tsx
index 2164d8c6d..ed671a1b3 100644
--- a/components/Cards/ValueCard/__tests__/ValueCard.test.js
+++ b/components/Cards/ValueCard/__tests__/ValueCard.test.tsx
@@ -1,5 +1,4 @@
 import createSnapshotTest from 'test-utils/createSnapshotTest';
-
 import ValueCard from '../ValueCard';
 
 describe('ValueCard', () => {
diff --git a/components/Cards/ValueCard/__tests__/__snapshots__/ValueCard.test.js.snap b/components/Cards/ValueCard/__tests__/__snapshots__/ValueCard.test.tsx.snap
similarity index 100%
rename from components/Cards/ValueCard/__tests__/__snapshots__/ValueCard.test.js.snap
rename to components/Cards/ValueCard/__tests__/__snapshots__/ValueCard.test.tsx.snap

From 735074632baa1424cbab433f62a6a2eec62b843a Mon Sep 17 00:00:00 2001
From: Michael Stedman <46408716+recondesigns@users.noreply.github.com>
Date: Sat, 2 Mar 2024 18:13:34 -0600
Subject: [PATCH 06/14] added prop type description to ResourceSkeletonCard

---
 components/Cards/ResourceCard/ResourceSkeletonCard.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/Cards/ResourceCard/ResourceSkeletonCard.tsx b/components/Cards/ResourceCard/ResourceSkeletonCard.tsx
index 48812955e..de5328ef5 100644
--- a/components/Cards/ResourceCard/ResourceSkeletonCard.tsx
+++ b/components/Cards/ResourceCard/ResourceSkeletonCard.tsx
@@ -7,6 +7,9 @@ import styles from './ResourceSkeletonCard.module.css';
 // };
 
 export type ResourceSkeletonCardPropsType = {
+  /**
+   * Sets the number of UI "skeletons" to render.
+   */
   numberOfSkeletons: number;
 };
 

From 079433119471a0e162f31a77f80a4f22f0dca4fd Mon Sep 17 00:00:00 2001
From: Michael Stedman <46408716+recondesigns@users.noreply.github.com>
Date: Sat, 2 Mar 2024 18:14:25 -0600
Subject: [PATCH 07/14] removed commented out code

---
 components/Cards/ResourceCard/ResourceSkeletonCard.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/components/Cards/ResourceCard/ResourceSkeletonCard.tsx b/components/Cards/ResourceCard/ResourceSkeletonCard.tsx
index de5328ef5..c86399d47 100644
--- a/components/Cards/ResourceCard/ResourceSkeletonCard.tsx
+++ b/components/Cards/ResourceCard/ResourceSkeletonCard.tsx
@@ -1,11 +1,6 @@
-// import { number } from 'prop-types';
 import { SKELETON_CARD } from '../../../common/constants/testIDs';
 import styles from './ResourceSkeletonCard.module.css';
 
-// ResourceSkeletonCard.propTypes = {
-//   numberOfSkeletons: number.isRequired,
-// };
-
 export type ResourceSkeletonCardPropsType = {
   /**
    * Sets the number of UI "skeletons" to render.

From 27a9be0d0f17acc28a0e08fb31e46a089120ecd0 Mon Sep 17 00:00:00 2001
From: Michael Stedman <46408716+recondesigns@users.noreply.github.com>
Date: Sat, 2 Mar 2024 19:17:01 -0600
Subject: [PATCH 08/14] removed unused skeleton variable

---
 components/Cards/ResourceCard/ResourceSkeletonCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Cards/ResourceCard/ResourceSkeletonCard.tsx b/components/Cards/ResourceCard/ResourceSkeletonCard.tsx
index c86399d47..7aac61864 100644
--- a/components/Cards/ResourceCard/ResourceSkeletonCard.tsx
+++ b/components/Cards/ResourceCard/ResourceSkeletonCard.tsx
@@ -11,7 +11,7 @@ export type ResourceSkeletonCardPropsType = {
 function ResourceSkeletonCard({ numberOfSkeletons }: ResourceSkeletonCardPropsType) {
   return (
     <div className={styles.resourcesCardWrapper}>
-      {[...Array(numberOfSkeletons)].map((skeleton, index) => (
+      {[...Array(numberOfSkeletons)].map((index) => (
         // eslint-disable-next-line react/no-array-index-key
         <div data-testid={SKELETON_CARD} key={index} className={styles.Skeleton}>
           <div className={styles.loading}>

From 60f74759216fffdc67b2e8858cf06cd023fe1afd Mon Sep 17 00:00:00 2001
From: Michael Stedman <46408716+recondesigns@users.noreply.github.com>
Date: Sun, 3 Mar 2024 12:36:41 -0600
Subject: [PATCH 09/14] removed code comments and added prop type descriptions

---
 .../Cards/ResourceCard/ResourceCard.tsx       | 55 ++++++++++---------
 1 file changed, 30 insertions(+), 25 deletions(-)

diff --git a/components/Cards/ResourceCard/ResourceCard.tsx b/components/Cards/ResourceCard/ResourceCard.tsx
index b923e50ba..afc8fac68 100644
--- a/components/Cards/ResourceCard/ResourceCard.tsx
+++ b/components/Cards/ResourceCard/ResourceCard.tsx
@@ -153,45 +153,50 @@ export const possibleUserVotes = {
   none: null,
 };
 
-// ResourceCard.propTypes = {
-//   description: string,
-//   downvotes: number,
-//   href: string.isRequired,
-//   name: string.isRequired,
-//   id: number.isRequired,
-//   category: string,
-//   languages: oneOfType([string, array]),
-//   isFree: bool,
-//   handleVote: func,
-//   upvotes: number,
-//   userVote: oneOf(Object.values(possibleUserVotes)),
-// };
-
 export type ResourceCardPropType = {
+  /**
+   * Url path for the link.
+   */
   href: string;
+  /**
+   * Name of the resource applied to the resource title link.
+   */
   name: string;
+  /**
+   * Applies an id to the component.
+   */
   id: number;
+  /**
+   * Optional description of the resource.
+   */
   description?: string;
+  /**
+   * Number of "down" votes.
+   */
   downvotes?: number;
+  /**
+   * Sets the category text.
+   */
   category?: string;
+  /**
+   * Applies the resource languages.
+   */
   languages?: string | string[];
+  /**
+   * Sets indictor that resource is free.
+   */
   isFree?: boolean;
+  /**
+   * Function to handle the vote.
+   */
   handleVote?: () => void;
+  /**
+   * Number of "up" votes.
+   */
   upvotes?: number;
   userVote?: keyof typeof possibleUserVotes | null;
 };
 
-// ResourceCard.defaultProps = {
-//   description: '',
-//   downvotes: 0,
-//   category: '',
-//   languages: [],
-//   isFree: false,
-//   handleVote: () => {},
-//   upvotes: 0,
-//   userVote: possibleUserVotes.none,
-// };
-
 function ResourceCard({
   description = '',
   downvotes = 0,

From 709f835625ce5e2fa78a262b20108e7ca2097517 Mon Sep 17 00:00:00 2001
From: Michael Stedman <46408716+recondesigns@users.noreply.github.com>
Date: Sun, 3 Mar 2024 12:41:14 -0600
Subject: [PATCH 10/14] re-inserted skeleton argument

---
 components/Cards/ResourceCard/ResourceSkeletonCard.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/Cards/ResourceCard/ResourceSkeletonCard.tsx b/components/Cards/ResourceCard/ResourceSkeletonCard.tsx
index 7aac61864..2b7c0918a 100644
--- a/components/Cards/ResourceCard/ResourceSkeletonCard.tsx
+++ b/components/Cards/ResourceCard/ResourceSkeletonCard.tsx
@@ -11,7 +11,8 @@ export type ResourceSkeletonCardPropsType = {
 function ResourceSkeletonCard({ numberOfSkeletons }: ResourceSkeletonCardPropsType) {
   return (
     <div className={styles.resourcesCardWrapper}>
-      {[...Array(numberOfSkeletons)].map((index) => (
+      // @ts-expect-error -- 'skeleton' is declared but its value is never read.ts(6133)
+      {[...Array(numberOfSkeletons)].map((skeleton, index) => (
         // eslint-disable-next-line react/no-array-index-key
         <div data-testid={SKELETON_CARD} key={index} className={styles.Skeleton}>
           <div className={styles.loading}>

From 95f4a3f5c91cb55eb09d3858e23463cbf252825c Mon Sep 17 00:00:00 2001
From: Michael Stedman <46408716+recondesigns@users.noreply.github.com>
Date: Sun, 3 Mar 2024 12:46:54 -0600
Subject: [PATCH 11/14] removed conditionals from tests and applied non-null
 assertion

---
 components/Cards/ResourceCard/__tests__/ResourceCard.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Cards/ResourceCard/__tests__/ResourceCard.test.tsx b/components/Cards/ResourceCard/__tests__/ResourceCard.test.tsx
index eca7fca9a..80e84e586 100644
--- a/components/Cards/ResourceCard/__tests__/ResourceCard.test.tsx
+++ b/components/Cards/ResourceCard/__tests__/ResourceCard.test.tsx
@@ -16,7 +16,7 @@ describe('ResourceCard', () => {
 
     expect(handleVoteMock).not.toHaveBeenCalled();
 
-    UpvoteButton && fireEvent.click(UpvoteButton);
+    fireEvent.click(UpvoteButton!);
 
     expect(handleVoteMock).toHaveBeenCalledTimes(1);
     expect(handleVoteMock).toHaveBeenCalledWith(
@@ -34,7 +34,7 @@ describe('ResourceCard', () => {
 
     expect(handleVoteMock).not.toHaveBeenCalled();
 
-    DownvoteButton && fireEvent.click(DownvoteButton);
+    fireEvent.click(DownvoteButton!);
 
     expect(handleVoteMock).toHaveBeenCalledTimes(1);
     expect(handleVoteMock).toHaveBeenCalledWith(

From d3c1db654c868d51270fa70540b4ab196ae8d3e2 Mon Sep 17 00:00:00 2001
From: Michael Stedman <46408716+recondesigns@users.noreply.github.com>
Date: Sun, 3 Mar 2024 13:02:46 -0600
Subject: [PATCH 12/14] used proper comment for ts directive in JSX

---
 components/Cards/ResourceCard/ResourceSkeletonCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Cards/ResourceCard/ResourceSkeletonCard.tsx b/components/Cards/ResourceCard/ResourceSkeletonCard.tsx
index 2b7c0918a..e883a1f95 100644
--- a/components/Cards/ResourceCard/ResourceSkeletonCard.tsx
+++ b/components/Cards/ResourceCard/ResourceSkeletonCard.tsx
@@ -11,7 +11,7 @@ export type ResourceSkeletonCardPropsType = {
 function ResourceSkeletonCard({ numberOfSkeletons }: ResourceSkeletonCardPropsType) {
   return (
     <div className={styles.resourcesCardWrapper}>
-      // @ts-expect-error -- 'skeleton' is declared but its value is never read.ts(6133)
+      {/** @ts-expect-error */}
       {[...Array(numberOfSkeletons)].map((skeleton, index) => (
         // eslint-disable-next-line react/no-array-index-key
         <div data-testid={SKELETON_CARD} key={index} className={styles.Skeleton}>

From 5851c6db4bacf9a445a0ffd8b39298bd87858e74 Mon Sep 17 00:00:00 2001
From: Michael Stedman <46408716+recondesigns@users.noreply.github.com>
Date: Sun, 3 Mar 2024 19:52:57 -0600
Subject: [PATCH 13/14] removed unused imports

---
 components/Cards/ImageCard/ImageCard.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/Cards/ImageCard/ImageCard.tsx b/components/Cards/ImageCard/ImageCard.tsx
index 2452701d5..519bcde5e 100644
--- a/components/Cards/ImageCard/ImageCard.tsx
+++ b/components/Cards/ImageCard/ImageCard.tsx
@@ -1,4 +1,3 @@
-// import { bool, node, string } from 'prop-types';
 import { twMerge } from 'tailwind-merge';
 import Image from 'next/image';
 import Card, { CardPropsType } from 'components/Cards/Card/Card';

From a647ed35df61eb8c796018db9125720fb6b327f4 Mon Sep 17 00:00:00 2001
From: Michael Stedman <46408716+recondesigns@users.noreply.github.com>
Date: Sun, 3 Mar 2024 19:56:42 -0600
Subject: [PATCH 14/14] removed un-needed ts directive

---
 components/Cards/ResourceCard/ResourceSkeletonCard.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/Cards/ResourceCard/ResourceSkeletonCard.tsx b/components/Cards/ResourceCard/ResourceSkeletonCard.tsx
index e883a1f95..2e7ba1384 100644
--- a/components/Cards/ResourceCard/ResourceSkeletonCard.tsx
+++ b/components/Cards/ResourceCard/ResourceSkeletonCard.tsx
@@ -11,8 +11,7 @@ export type ResourceSkeletonCardPropsType = {
 function ResourceSkeletonCard({ numberOfSkeletons }: ResourceSkeletonCardPropsType) {
   return (
     <div className={styles.resourcesCardWrapper}>
-      {/** @ts-expect-error */}
-      {[...Array(numberOfSkeletons)].map((skeleton, index) => (
+      {[...Array(numberOfSkeletons)].map((_skeleton, index) => (
         // eslint-disable-next-line react/no-array-index-key
         <div data-testid={SKELETON_CARD} key={index} className={styles.Skeleton}>
           <div className={styles.loading}>