Improve typecheck (logged-out-message, login-prompt-panel, sidebar-panel)

src/sidebar/components/logged-out-message.js

@@ -6,10 +6,20 @@ import { withServices } from '../util/service-context';
 import Button from './button';
 import SvgIcon from '../../shared/components/svg-icon';
 
+/** @typedef {import('../services/service-url').ServiceUrlGetter} ServiceUrlGetter */
+
+/**
+ * @typedef LoggedOutMessageProps
+ * @prop {() => any} onLogin
+ * @prop {ServiceUrlGetter} serviceUrl
+ */
+
 /**
  * Render a call-to-action to log in or sign up. This message is intended to be
  * displayed to non-auth'd users when viewing a single annotation in a
  * direct-linked context (i.e. URL with syntax `/#annotations:<annotation_id>`)
+ *
+ * @param {LoggedOutMessageProps} props
  */
 function LoggedOutMessage({ onLogin, serviceUrl }) {
   return (

src/sidebar/components/login-prompt-panel.js

@@ -7,8 +7,16 @@ import uiConstants from '../ui-constants';
 import Button from './button';
 import SidebarPanel from './sidebar-panel';
 
+/**
+ * @typedef LoginPromptPanelProps
+ * @prop {() => any} onLogin
+ * @prop {() => any} onSignUp
+ */
+
 /**
  * A sidebar panel that prompts a user to log in (or sign up) to annotate.
+ *
+ * @param {LoginPromptPanelProps} props
  */
 export default function LoginPromptPanel({ onLogin, onSignUp }) {
   const isLoggedIn = useStore(store => store.isLoggedIn());

src/sidebar/components/sidebar-panel.js

@@ -9,12 +9,26 @@ import Button from './button';
 import Slider from './slider';
 import SvgIcon from '../../shared/components/svg-icon';
 
+/**
+ * @typedef SidebarPanelProps
+ * @prop {Object} [children]
+ * @prop {string} [icon] - An optional icon name for display next to the panel's title
+ * @prop {string} panelName -
+ *   A string identifying this panel. Only one `panelName` may be active at any time.
+ *   Multiple panels with the same `panelName` would be "in sync", opening and closing together.
+ * @prop {string} title - The panel's title: rendered in its containing visual "frame"
+ * @prop {(active: boolean) => any} [onActiveChanged] -
+ *   Optional callback to invoke when this panel's active status changes
+ */
+
 /**
  * Base component for a sidebar panel.
  *
  * This component provides a basic visual container for sidebar panels, as well
  * as providing a close button. Only one sidebar panel (as defined by the panel's
  * `panelName`) is active at one time.
+ *
+ * @param {SidebarPanelProps} props
  */
 export default function SidebarPanel({
   children,
@@ -26,7 +40,7 @@ export default function SidebarPanel({
   const panelIsActive = useStore(store => store.isSidebarPanelOpen(panelName));
   const togglePanelFn = useStore(store => store.toggleSidebarPanel);
 
-  const panelElement = useRef();
+  const panelElement = useRef(/** @type {HTMLDivElement|null}*/ (null));
   const panelWasActive = useRef(panelIsActive);
 
   // Scroll the panel into view if it has just been opened
@@ -68,22 +82,8 @@ export default function SidebarPanel({
 
 SidebarPanel.propTypes = {
   children: propTypes.any,
-
-  /**
-   * An optional icon name for display next to the panel's title
-   */
   icon: propTypes.string,
-
-  /**
-   * A string identifying this panel. Only one `panelName` may be active at
-   * any time. Multiple panels with the same `panelName` would be "in sync",
-   * opening and closing together.
-   */
   panelName: propTypes.string.isRequired,
-
-  /** The panel's title: rendered in its containing visual "frame" */
   title: propTypes.string.isRequired,
-
-  /** Optional callback to invoke when this panel's active status changes */
   onActiveChanged: propTypes.func,
 };

src/sidebar/services/service-url.js

@@ -22,7 +22,7 @@ import * as urlUtil from '../util/url';
  *
  * @callback ServiceUrlGetter
  * @param {string} linkName - The name of the link to expand
- * @param {object} params - The params with which to expand the link
+ * @param {object} [params] - The params with which to expand the link
  * @returns {string} The expanded absolute URL, or an empty string if the
  *                   links haven't been received from the API yet
  * @throws {Error} If the links have been received from the API but the given

src/tsconfig.json

@@ -46,8 +46,6 @@
     "sidebar/components/group-list.js",
     "sidebar/components/help-panel.js",
     "sidebar/components/hypothesis-app.js",
-    "sidebar/components/logged-out-message.js",
-    "sidebar/components/login-prompt-panel.js",
     "sidebar/components/moderation-banner.js",
     "sidebar/components/new-note-btn.js",
     "sidebar/components/search-status-bar.js",
@@ -55,7 +53,6 @@
     "sidebar/components/share-annotations-panel.js",
     "sidebar/components/sidebar-content-error.js",
     "sidebar/components/sidebar-content.js",
-    "sidebar/components/sidebar-panel.js",
     "sidebar/components/sort-menu.js",
     "sidebar/components/stream-content.js",
     "sidebar/components/stream-search-input.js",