refactor: replace proptypes with jsdoc

Author: steveoh

eslint.config.js

@@ -1,3 +1,10 @@
 import { browser } from '@ugrc/eslint-config';
 
-export default browser;
+export default [
+  ...browser,
+  {
+    rules: {
+      'react/prop-types': 'off',
+    },
+  },
+];

package.json

@@ -112,7 +112,6 @@
     "prettier-plugin-organize-imports": "^4.3.0",
     "prettier-plugin-packagejson": "^3.0.0",
     "prettier-plugin-tailwindcss": "^0.7.2",
-    "prop-types": "^15.8.1",
     "storybook": "^10.2.8",
     "tailwindcss": "^4.1.18",
     "vite": "^7.3.1",
@@ -149,6 +148,7 @@
       "lodash@>=4.0.0 <=4.17.22": ">=4.17.23",
       "lodash-es@>=4.0.0 <=4.17.22": ">=4.17.23",
       "on-headers@<1.1.0": ">=1.1.0",
+      "qs@>=6.7.0 <=6.14.1": ">=6.14.2",
       "qs@<6.14.1": ">=6.14.1",
       "tar@<7.5.7": ">=7.5.7",
       "tar@<=7.5.2": ">=7.5.3",

pnpm-lock.yaml

@@ -1,19 +1,22 @@
 import { useMachine } from '@xstate/react';
-import PropTypes from 'prop-types';
 import { createContext } from 'react';
 import { submissionMachine } from '../machines';
 
 export const SubmissionContext = createContext({});
 
+/**
+ * @typedef {Object} SubmissionProviderProps
+ * @property {React.ReactNode} children
+ * @property {Object} [context]
+ */
+
+/**
+ * @type {React.FC<SubmissionProviderProps>}
+ */
 export const SubmissionProvider = ({ children, context }) => {
   const [state, send] = useMachine(submissionMachine, {
     input: { ...context },
   });
 
   return <SubmissionContext.Provider value={[state, send]}>{children}</SubmissionContext.Provider>;
 };
-
-SubmissionProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-  context: PropTypes.object,
-};

src/components/contexts/SubmissionContext.jsx

@@ -1,8 +1,15 @@
 import { ExclamationCircleIcon } from '@heroicons/react/20/solid';
 import { useFirebaseAuth } from '@ugrc/utah-design-system';
 import { clsx } from 'clsx';
-import PropTypes from 'prop-types';
 
+/**
+ * @typedef {Object} LogInButtonProps
+ * @property {string} [className]
+ */
+
+/**
+ * @type {React.FC<LogInButtonProps>}
+ */
 export const LogInButton = () => {
   const { login } = useFirebaseAuth();
 
@@ -73,10 +80,15 @@ export const LogInButton = () => {
     </Button>
   );
 };
-LogInButton.propTypes = {
-  className: PropTypes.string,
-};
 
+/**
+ * @typedef {Object} LogOutButtonProps
+ * @property {string} [className]
+ */
+
+/**
+ * @type {React.FC<LogOutButtonProps>}
+ */
 export const LogOutButton = () => {
   const { logout } = useFirebaseAuth();
 
@@ -90,9 +102,6 @@ export const LogOutButton = () => {
     </Button>
   );
 };
-LogOutButton.propTypes = {
-  className: PropTypes.string,
-};
 
 const primaryClasses =
   'h-8 border-sky-600 bg-sky-500 text-white hover:border-sky-700 hover:bg-sky-600 focus:border-sky-500 focus:ring-sky-600/50 active:bg-sky-700';
@@ -111,7 +120,7 @@ const buttonGroupMiddle = 'border-x-0';
 const buttonClasses = (style, buttonGroup) => {
   return clsx(
     style !== 'link' &&
-      'flex min-h-[2rem] w-fit cursor-pointer items-center justify-center border-2 px-7 py-1 transition-all duration-200 ease-in-out focus:ring-2 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+      'flex min-h-8 w-fit cursor-pointer items-center justify-center border-2 px-7 py-1 transition-all duration-200 ease-in-out focus:ring-2 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
     style === 'primary' && primaryClasses,
     style === 'secondary' && secondaryClasses,
     style === 'alternate' && alternateClasses,
@@ -122,6 +131,23 @@ const buttonClasses = (style, buttonGroup) => {
     buttonGroup?.right && buttonGroupRight,
   );
 };
+
+/**
+ * @typedef {Object} ButtonProps
+ * @property {string} [name] - The property name used by react hook form
+ * @property {React.ReactNode} children - The children to display on the button
+ * @property {'primary'|'secondary'|'alternate'|'link'} [style] - The style of button
+ * @property {'idle'|'disabled'|'pending'|'success'|'error'} [state] - The state of button
+ * @property {'button'|'submit'|'reset'} [type] - The property name used by react hook form
+ * @property {function} [inputRef] - The ref property for use with registering with react hook form
+ * @property {function} [onClick] - The function to execute when the button is clicked
+ * @property {boolean} [dark]
+ * @property {Object} [buttonGroup]
+ */
+
+/**
+ * @type {React.FC<ButtonProps>}
+ */
 export const Button = ({
   children,
   name,
@@ -162,39 +188,19 @@ export const Button = ({
   );
 };
 
-Button.propTypes = {
-  /**
-   * The property name used by react hook form
-   */
-  name: PropTypes.string,
-  /**
-   * The children to display on the button
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * The style of button
-   */
-  style: PropTypes.oneOf(['primary', 'secondary', 'alternate', 'link']),
-  /**
-   * The state of button
-   */
-  state: PropTypes.oneOf(['idle', 'disabled', 'pending', 'success', 'error']),
-  /**
-   * The property name used by react hook form
-   */
-  type: PropTypes.oneOf(['button', 'submit', 'reset']),
-  /**
-   * The ref property for use with registering with react hook form
-   */
-  inputRef: PropTypes.func,
-  /**
-   * The function to execute when the button is clicked
-   */
-  onClick: PropTypes.func,
-  dark: PropTypes.bool,
-  buttonGroup: PropTypes.object,
-};
+/**
+ * @typedef {Object} LinkProps
+ * @property {React.ReactNode} children
+ * @property {string} [href]
+ * @property {string} [target]
+ * @property {string} [rel]
+ * @property {'primary'|'secondary'|'alternate'|'link'} [style] - The style of button
+ * @property {Object} [buttonGroup]
+ */
 
+/**
+ * @type {React.FC<LinkProps>}
+ */
 export const Link = ({ href, children, target, rel, buttonGroup, style = 'link' }) => {
   const attributes = {
     target,
@@ -205,14 +211,3 @@ export const Link = ({ href, children, target, rel, buttonGroup, style = 'link'
 
   return <a {...attributes}>{children}</a>;
 };
-Link.propTypes = {
-  children: PropTypes.node.isRequired,
-  href: PropTypes.string,
-  target: PropTypes.string,
-  rel: PropTypes.string,
-  /**
-   * The style of button
-   */
-  style: PropTypes.oneOf(['primary', 'secondary', 'alternate', 'link']),
-  buttonGroup: PropTypes.object,
-};

src/components/formElements/Buttons.jsx

@@ -1,12 +1,15 @@
-import PropTypes from 'prop-types';
+/**
+ * @typedef {Object} CardProps
+ * @property {React.ReactNode} [children]
+ */
 
+/**
+ * @type {React.FC<CardProps>}
+ */
 export default function Card({ children }) {
   return (
     <section className="inline-grid w-full gap-2 rounded-lg border border-slate-400 bg-white p-4 text-sm shadow-md">
       {children}
     </section>
   );
 }
-Card.propTypes = {
-  children: PropTypes.node,
-};

src/components/formElements/Card.jsx

@@ -1,7 +1,6 @@
 import { useFirebaseStorage } from '@ugrc/utah-design-system';
 import { clsx } from 'clsx';
 import { deleteObject, getDownloadURL, ref, uploadBytesResumable } from 'firebase/storage';
-import PropTypes from 'prop-types';
 import { useEffect, useRef, useState } from 'react';
 import { Button } from './Buttons.jsx';
 
@@ -21,6 +20,20 @@ const validateSize = (actualSize, megabytes) => {
   return actualSize > megabytes * 1024 * 1024;
 };
 
+/**
+ * @typedef {Object} FileUploadProps
+ * @property {string} [id]
+ * @property {string} path
+ * @property {string} [defaultFileName]
+ * @property {function} [onChange]
+ * @property {string} [value]
+ * @property {Array<{name: string, value: string}>} [contentTypes]
+ * @property {number} [maxFileSize]
+ */
+
+/**
+ * @type {React.FC<FileUploadProps>}
+ */
 const FileUpload = ({ id, defaultFileName, path, contentTypes, maxFileSize, value, onChange }) => {
   const { storage } = useFirebaseStorage();
   const uploadReference = useRef();
@@ -140,21 +153,16 @@ const FileUpload = ({ id, defaultFileName, path, contentTypes, maxFileSize, valu
     </div>
   );
 };
-FileUpload.propTypes = {
-  id: PropTypes.string,
-  path: PropTypes.string.isRequired,
-  defaultFileName: PropTypes.string,
-  onChange: PropTypes.func,
-  value: PropTypes.string,
-  contentTypes: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string,
-      value: PropTypes.string,
-    }),
-  ),
-  maxFileSize: PropTypes.number,
-};
 
+/**
+ * @typedef {Object} ObjectPreviewProps
+ * @property {string} url
+ * @property {React.ReactNode} [children]
+ */
+
+/**
+ * @type {React.FC<ObjectPreviewProps>}
+ */
 export const ObjectPreview = ({ url, children }) => {
   return (
     <div className="flex w-full flex-col rounded-sm border border-slate-400 bg-slate-50 text-slate-400 shadow-sm">
@@ -172,20 +180,21 @@ export const ObjectPreview = ({ url, children }) => {
     </div>
   );
 };
-ObjectPreview.propTypes = {
-  url: PropTypes.string.isRequired,
-  children: PropTypes.node,
-};
 
+/**
+ * @typedef {Object} AttachmentProps
+ * @property {function} [onClick]
+ */
+
+/**
+ * @type {React.FC<AttachmentProps>}
+ */
 export const Attachment = ({ onClick }) => (
   <div className="flex justify-between">
     <Button style="secondary" onClick={onClick}>
       Remove
     </Button>
   </div>
 );
-Attachment.propTypes = {
-  onClick: PropTypes.func,
-};
 
 export default FileUpload;

src/components/formElements/FileUpload.jsx

@@ -1,5 +1,12 @@
-import PropTypes from 'prop-types';
+/**
+ * @typedef {Object} NumberedFormProps
+ * @property {React.ReactNode} children
+ * @property {function} [onSubmit]
+ */
 
+/**
+ * @type {React.FC<NumberedFormProps>}
+ */
 export function NumberedForm({ children, onSubmit }) {
   return (
     <form onSubmit={onSubmit} className="mb-10 flex w-full flex-col items-center justify-center">
@@ -9,11 +16,17 @@ export function NumberedForm({ children, onSubmit }) {
     </form>
   );
 }
-NumberedForm.propTypes = {
-  children: PropTypes.node.isRequired,
-  onSubmit: PropTypes.func,
-};
 
+/**
+ * @typedef {Object} NumberedFormSectionProps
+ * @property {React.ReactNode} children
+ * @property {number} number
+ * @property {string} [title]
+ */
+
+/**
+ * @type {React.FC<NumberedFormSectionProps>}
+ */
 export function NumberedFormSection({ children, number, title }) {
   return (
     <>
@@ -27,8 +40,3 @@ export function NumberedFormSection({ children, number, title }) {
     </>
   );
 }
-NumberedFormSection.propTypes = {
-  children: PropTypes.node.isRequired,
-  number: PropTypes.number.isRequired,
-  title: PropTypes.string,
-};