Merge branch 'dev' into hotfix-optional-dependencies

client/.eslintrc.cjs

@@ -7,6 +7,7 @@ module.exports = {
     'plugin:react-hooks/recommended',
     'plugin:storybook/recommended',
     'plugin:react/recommended',
+    'plugin:jsdoc/recommended',
     'prettier',
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
@@ -19,5 +20,8 @@ module.exports = {
       'warn',
       { allowConstantExport: true },
     ],
+    'jsdoc/require-returns-description': 'off',
+    'jsdoc/require-param-description': 'off',
+    'jsdoc/require-returns': 'off',
   },
 };

client/package.json

@@ -36,6 +36,7 @@
     "@vitejs/plugin-react-swc": "^3.6.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-jsdoc": "^48.2.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",

client/src/App.jsx

@@ -4,6 +4,9 @@ import Index from './pages';
 import Login from './pages/login';
 import NavBar from './components/NavBar';
 
+/**
+ * Top-level application component.
+ */
 function App() {
   return (
     <>

client/src/components/NavBar.jsx

@@ -1,5 +1,8 @@
 import React from 'react';
 
+/**
+ * Primary navigation component.
+ */
 function NavBar() {
   return (
     <nav>

client/src/pages/index.jsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import { useQuery } from '@tanstack/react-query';
 
+/**
+ * Home page component.
+ */
 function Index() {
   const { isFetching, error } = useQuery({
     queryKey: ['users'],

client/src/pages/login.jsx

@@ -1,5 +1,8 @@
 import React from 'react';
 
+/**
+ * Login page component.
+ */
 function Login() {
   return <div>Login page works</div>;
 }

client/src/stories/Button/Button.jsx

@@ -4,6 +4,7 @@ import './button.css';
 
 /**
  * Primary UI component for user interaction
+ * @param {PropTypes.InferProps<typeof ButtonProps> & React.ButtonHTMLAttributes<HTMLButtonElement>} props extends HTMLButtonElement
  */
 export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
   const mode = primary
@@ -23,7 +24,7 @@ export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
   );
 };
 
-Button.propTypes = {
+const ButtonProps = {
   /**
    * Is this the principal call to action on the page?
    */
@@ -46,6 +47,8 @@ Button.propTypes = {
   onClick: PropTypes.func,
 };
 
+Button.propTypes = ButtonProps;
+
 Button.defaultProps = {
   backgroundColor: null,
   primary: false,

client/src/stories/Header/Header.jsx

@@ -1,9 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Button } from '../Button/Button';
+import { Button } from '../Button/Button.jsx';
 import './header.css';
 
+/**
+ * Main Header
+ * @param {PropTypes.InferProps<typeof HeaderProps>} props MainHeader props
+ */
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
   <header>
     <div className="storybook-header">
@@ -55,7 +59,7 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
   </header>
 );
 
-Header.propTypes = {
+const HeaderProps = {
   user: PropTypes.shape({
     name: PropTypes.string.isRequired,
   }),
@@ -64,6 +68,7 @@ Header.propTypes = {
   onCreateAccount: PropTypes.func.isRequired,
 };
 
+Header.propTypes = HeaderProps;
 Header.defaultProps = {
   user: null,
 };

client/src/stories/Page/Page.jsx

@@ -1,17 +1,22 @@
 import React from 'react';
 
-import { Header } from '../Header/Header';
+import { Header } from '../Header/Header.jsx';
 import './page.css';
 
+/**
+ * Storybook demo page component.
+ * @typedef User
+ * @property {string} name Full name of the User.
+ */
 export const Page = () => {
-  const [user, setUser] = React.useState();
+  const [user, setUser] = React.useState(/** @type {?User} */ (null));
 
   return (
     <article>
       <Header
         user={user}
         onLogin={() => setUser({ name: 'Jane Doe' })}
-        onLogout={() => setUser(undefined)}
+        onLogout={() => setUser(null)}
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 

jsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    // "checkJs": true,
+    "jsx": "react",
+    "noImplicitAny": false,
+    "strictNullChecks": true
+  },
+  "exclude": ["node_modules", "**/node_modules/*"]
+}