improve typechecking

- help-panel
- stream-search-input
- toast-messages
- version-info

src/sidebar/components/help-panel.js

@@ -12,8 +12,16 @@ import SvgIcon from '../../shared/components/svg-icon';
 import Tutorial from './tutorial';
 import VersionInfo from './version-info';
 
+/**
+ * @typedef {import('../components/user-menu').AuthState} AuthState
+ */
+
 /**
  * External link "tabs" inside of the help panel.
+ *
+ * @param {Object} props
+ *   @param {string} props.linkText - What the tab's link should say
+ *   @param {string} props.url - Where the tab's link should go
  */
 function HelpPanelTab({ linkText, url }) {
   return (
@@ -36,14 +44,20 @@ function HelpPanelTab({ linkText, url }) {
 }
 
 HelpPanelTab.propTypes = {
-  /* What the tab's link should say */
   linkText: propTypes.string.isRequired,
-  /* Where the tab's link should go */
   url: propTypes.string.isRequired,
 };
 
+/**
+ * @typedef HelpPanelProps
+ * @prop {AuthState} auth - Object with auth and user information
+ * @prop {Object} session - Injected service
+ */
+
 /**
  * A help sidebar panel with two sub-panels: tutorial and version info.
+ *
+ * @param {HelpPanelProps} props
  */
 function HelpPanel({ auth, session }) {
   const mainFrame = useStore(store => store.mainFrame());
@@ -61,7 +75,7 @@ function HelpPanel({ auth, session }) {
 
   // Build version details about this session/app
   const versionData = useMemo(() => {
-    const userInfo = auth || {};
+    const userInfo = auth || { status: 'logged-out' };
     const documentInfo = mainFrame || {};
     return new VersionData(userInfo, documentInfo);
   }, [auth, mainFrame]);
@@ -149,7 +163,6 @@ function HelpPanel({ auth, session }) {
 }
 
 HelpPanel.propTypes = {
-  /* Object with auth and user information */
   auth: propTypes.object.isRequired,
   session: propTypes.object.isRequired,
 };

src/sidebar/components/search-input.js

@@ -13,9 +13,9 @@ import Spinner from './spinner';
  * @prop {boolean} [alwaysExpanded] -
  *   If true, the input field is always shown. If false, the input field is only shown
  *   if the query is non-empty.
- * @prop {string} [query] - The currently active filter query.
+ * @prop {string} [query] - The currently active filter query
  * @prop {(value: string) => any} [onSearch] -
- *   Callback to invoke when the current filter query changes.
+ *   Callback to invoke when the current filter query changes
  */
 
 /**

src/sidebar/components/stream-search-input.js

@@ -6,10 +6,17 @@ import { withServices } from '../util/service-context';
 
 import SearchInput from './search-input';
 
+/**
+ * @typedef StreamSearchInputProps
+ * @prop {Object} router - Injected service
+ */
+
 /**
  * Search input for the single annotation view and stream.
  *
  * This displays and updates the "q" query param in the URL.
+ *
+ * @param {StreamSearchInputProps} props
  */
 function StreamSearchInput({ router }) {
   const query = useStore(store => store.routeParams().q);

src/sidebar/components/toast-messages.js

@@ -7,11 +7,23 @@ import { withServices } from '../util/service-context';
 
 import SvgIcon from '../../shared/components/svg-icon';
 
+/**
+ * @typedef {import('../store/modules/toast-messages').ToastMessage} ToastMessage
+ */
+
+/**
+ * @typedef ToastMessageProps
+ * @prop {ToastMessage} message - The message object to render
+ * @prop {(id: string) => any} onDismiss
+ */
+
 /**
  * An individual toast message—a brief and transient success or error message.
  * The message may be dismissed by clicking on it.
  * Otherwise, the `toastMessenger` service handles removing messages after a
  * certain amount of time.
+ *
+ * @param {ToastMessageProps} props
  */
 function ToastMessage({ message, onDismiss }) {
   // Capitalize the message type for prepending
@@ -66,14 +78,20 @@ function ToastMessage({ message, onDismiss }) {
 }
 
 ToastMessage.propTypes = {
-  // The message object to render
   message: propTypes.object.isRequired,
   onDismiss: propTypes.func,
 };
 
+/**
+ * @typedef ToastMessagesProps
+ * @prop {Object} toastMessenger - Injected service
+ */
+
 /**
  * A collection of toast messages. These are rendered within an `aria-live`
  * region for accessibility with screen readers.
+ *
+ * @param {ToastMessagesProps} props
  */
 function ToastMessages({ toastMessenger }) {
   const messages = useStore(store => store.getToastMessages());
@@ -97,7 +115,6 @@ function ToastMessages({ toastMessenger }) {
 }
 
 ToastMessages.propTypes = {
-  // Injected services
   toastMessenger: propTypes.object.isRequired,
 };
 

src/sidebar/components/version-info.js

@@ -6,8 +6,16 @@ import { withServices } from '../util/service-context';
 
 import Button from './button';
 
+/**
+ * @typedef VersionInfoProps
+ * @prop {import('../util/version-data').default} versionData - Object with version information
+ * @prop {Object} toastMessenger - Injected service
+ */
+
 /**
  * Display current client version info
+ *
+ * @param {VersionInfoProps} props
  */
 function VersionInfo({ toastMessenger, versionData }) {
   const copyVersionData = () => {
@@ -47,14 +55,7 @@ function VersionInfo({ toastMessenger, versionData }) {
 }
 
 VersionInfo.propTypes = {
-  /**
-   * Object with version information
-   *
-   * @type {import('../util/version-info').VersionData}
-   */
   versionData: propTypes.object.isRequired,
-
-  /** injected properties */
   toastMessenger: propTypes.object.isRequired,
 };
 

src/sidebar/store/modules/toast-messages.js

@@ -6,6 +6,7 @@ import * as util from '../util';
  * @prop {string} id
  * @prop {string} message
  * @prop {string} moreInfoURL
+ * @prop {boolean} isDismissed
  */
 
 /**

src/sidebar/util/version-data.js

 /**
- * An object representing user info
- *
- * @typedef {Object} UserInfo
- * @property {string=} userid
- * @property {string=} displayName
+ * @typedef {import('../components/user-menu').AuthState} AuthState
  */
 
 /**
- * An object representing document metadata
+ * An object representing document metadata.
  *
  * @typedef {Object} DocMetadata
- * @property {string=} documentFingerprint - optional PDF fingerprint for
- *                     current document
+ * @prop {string=} documentFingerprint - Optional PDF fingerprint for current document
  */
 
 /**
- * An object representing document info
+ * An object representing document info.
  *
  * @typedef {Object} DocumentInfo
- * @property {string=} uri - current document URL
- * @property {DocMetadata} metadata - document metadata
+ * @prop {string=} [uri] - Current document URL
+ * @prop {DocMetadata} [metadata] - Document metadata
  */
 
 export default class VersionData {
   /**
-   * @param {UserInfo} userInfo
+   * @param {AuthState} userInfo
    * @param {DocumentInfo} documentInfo
    * @param {Window} window_ - test seam
    */

src/tsconfig.json

@@ -30,18 +30,14 @@
     "sidebar/components/annotation-viewer-content.js",
     "sidebar/components/annotation.js",
     "sidebar/components/filter-status.js",
-    "sidebar/components/help-panel.js",
     "sidebar/components/hypothesis-app.js",
     "sidebar/components/share-annotations-panel.js",
     "sidebar/components/sidebar-content-error.js",
     "sidebar/components/sidebar-content.js",
     "sidebar/components/stream-content.js",
-    "sidebar/components/stream-search-input.js",
     "sidebar/components/thread-card.js",
     "sidebar/components/thread-list.js",
     "sidebar/components/thread.js",
-    "sidebar/components/toast-messages.js",
-    "sidebar/components/top-bar.js",
-    "sidebar/components/version-info.js"
+    "sidebar/components/top-bar.js"
   ]
 }