refactor: improve prop types and fix mobx

client/components/Button.jsx

@@ -1,9 +1,22 @@
 import cls from "classnames";
+import PropTypes from "prop-types";
 import PureComponent from "../lib/PureComponent.jsx";
 
 import * as styles from "./Button.css";
 
 export default class Button extends PureComponent {
+  static propTypes = {
+    className: PropTypes.string,
+
+    active: PropTypes.bool,
+    toggle: PropTypes.bool,
+    disabled: PropTypes.bool,
+
+    onClick: PropTypes.func.isRequired,
+
+    children: PropTypes.node,
+  };
+
   render({ active, className, children, ...props }) {
     const classes = cls(className, {
       [styles.button]: true,
@@ -25,12 +38,15 @@ export default class Button extends PureComponent {
   }
 
   get disabled() {
-    const { props } = this;
-    return props.disabled || (props.active && !props.toggle);
+    const { disabled, active, toggle } = this.props;
+    return disabled || (active && !toggle);
   }
 
   handleClick = (event) => {
-    this.elem.blur();
+    if (this.elem) {
+      this.elem.blur();
+    }
+
     this.props.onClick(event);
   };
 

client/components/Checkbox.jsx

@@ -1,9 +1,20 @@
 import cls from "classnames";
 import { Component } from "preact";
+import PropTypes from "prop-types";
 
 import * as styles from "./Checkbox.css";
 
 export default class Checkbox extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+
+    checked: PropTypes.bool,
+
+    onChange: PropTypes.func.isRequired,
+
+    children: PropTypes.node,
+  };
+
   render() {
     const { checked, className, children } = this.props;
 
@@ -15,7 +26,7 @@ export default class Checkbox extends Component {
           checked={checked}
           onChange={this.handleChange}
         />
-        <span className={styles.itemText}>{children}</span>
+        {children && <span className={styles.itemText}>{children}</span>}
       </label>
     );
   }

client/components/CheckboxList.jsx

@@ -1,10 +1,21 @@
+import PropTypes from "prop-types";
 import PureComponent from "../lib/PureComponent.jsx";
 import * as styles from "./CheckboxList.css";
 import CheckboxListItem from "./CheckboxListItem.jsx";
+import { ViewerDataType } from "./types.js";
 
 const ALL_ITEM = Symbol("ALL_ITEM");
 
 export default class CheckboxList extends PureComponent {
+  static propTypes = {
+    label: PropTypes.string.isRequired,
+    renderLabel: PropTypes.func.isRequired,
+    items: PropTypes.oneOfType([ViewerDataType, PropTypes.symbol]),
+    checkedItems: PropTypes.oneOfType([ViewerDataType, PropTypes.symbol]),
+
+    onChange: PropTypes.func.isRequired,
+  };
+
   static ALL_ITEM = ALL_ITEM;
 
   constructor(props) {

client/components/CheckboxListItem.jsx

@@ -1,10 +1,21 @@
 import { Component } from "preact";
+import PropTypes from "prop-types";
 
 import Checkbox from "./Checkbox.jsx";
 import * as styles from "./CheckboxList.css";
 import CheckboxList from "./CheckboxList.jsx";
+import { ViewerDataItemType } from "./types.js";
 
 export default class CheckboxListItem extends Component {
+  static propTypes = {
+    item: PropTypes.oneOfType([ViewerDataItemType, PropTypes.symbol])
+      .isRequired,
+
+    onChange: PropTypes.func.isRequired,
+
+    children: PropTypes.func,
+  };
+
   render() {
     return (
       <div className={styles.item}>
@@ -17,7 +28,6 @@ export default class CheckboxListItem extends Component {
 
   renderLabel() {
     const { children, item } = this.props;
-
     if (children) {
       return children(item);
     }

client/components/ContextMenu.jsx

@@ -1,11 +1,25 @@
 import cls from "classnames";
+import PropTypes from "prop-types";
 import PureComponent from "../lib/PureComponent.jsx";
 import { store } from "../store.js";
 import { elementIsOutside } from "../utils.js";
 import * as styles from "./ContextMenu.css";
 import ContextMenuItem from "./ContextMenuItem.jsx";
+import { ViewerDataItemType } from "./types.js";
 
 export default class ContextMenu extends PureComponent {
+  static propTypes = {
+    visible: PropTypes.bool,
+
+    chunk: ViewerDataItemType,
+    coords: PropTypes.shape({
+      x: PropTypes.number,
+      y: PropTypes.number,
+    }).isRequired,
+
+    onHide: PropTypes.func,
+  };
+
   componentDidMount() {
     this.boundingRect = this.node.getBoundingClientRect();
   }
@@ -68,24 +82,25 @@ export default class ContextMenu extends PureComponent {
       const filteredChunks = store.selectedChunks.filter(
         (chunk) => chunk.label !== selectedChunk.label,
       );
-      store.selectedChunks = filteredChunks;
+      store.setSelectedChunks(filteredChunks);
     }
     this.hide();
   };
 
   handleClickFilterToChunk = () => {
     const { chunk: selectedChunk } = this.props;
+
     if (selectedChunk && selectedChunk.label) {
       const filteredChunks = store.allChunks.filter(
         (chunk) => chunk.label === selectedChunk.label,
       );
-      store.selectedChunks = filteredChunks;
+      store.setSelectedChunks(filteredChunks);
     }
     this.hide();
   };
 
   handleClickShowAllChunks = () => {
-    store.selectedChunks = store.allChunks;
+    store.setSelectedChunks(store.allChunks);
     this.hide();
   };
 

client/components/ContextMenuItem.jsx

@@ -1,4 +1,5 @@
 import cls from "classnames";
+import PropTypes from "prop-types";
 
 import * as styles from "./ContextMenuItem.css";
 
@@ -18,3 +19,11 @@ export default function ContextMenuItem({ children, disabled, onClick }) {
     </li>
   );
 }
+
+ContextMenuItem.propTypes = {
+  disabled: PropTypes.bool,
+
+  children: PropTypes.node.isRequired,
+
+  onClick: PropTypes.func,
+};

client/components/Dropdown.jsx

@@ -1,9 +1,16 @@
 import { createRef } from "preact";
+import PropTypes from "prop-types";
 import PureComponent from "../lib/PureComponent.jsx";
 
 import * as styles from "./Dropdown.css";
 
 export default class Dropdown extends PureComponent {
+  static propTypes = {
+    label: PropTypes.string.isRequired,
+    options: PropTypes.arrayOf(PropTypes.string).isRequired,
+    onSelectionChange: PropTypes.func.isRequired,
+  };
+
   input = createRef();
 
   state = {

client/components/Icon.jsx

@@ -1,4 +1,5 @@
 import cls from "classnames";
+import PropTypes from "prop-types";
 import iconArrowRight from "../assets/icon-arrow-right.svg";
 import iconMoon from "../assets/icon-moon.svg";
 import iconPin from "../assets/icon-pin.svg";
@@ -27,6 +28,14 @@ const ICONS = {
 };
 
 export default class Icon extends PureComponent {
+  static propTypes = {
+    className: PropTypes.string,
+
+    name: PropTypes.string.isRequired,
+    size: PropTypes.number,
+    rotate: PropTypes.number,
+  };
+
   render({ className }) {
     return <i className={cls(styles.icon, className)} style={this.style} />;
   }

client/components/ModuleItem.jsx

@@ -2,11 +2,22 @@ import cls from "classnames";
 import escapeRegExp from "escape-string-regexp";
 import { filesize } from "filesize";
 import { escape } from "html-escaper";
+import PropTypes from "prop-types";
 import PureComponent from "../lib/PureComponent.jsx";
-
 import * as styles from "./ModuleItem.css";
+import { ModuleType, SizeType } from "./types.js";
 
 export default class ModuleItem extends PureComponent {
+  static propTypes = {
+    module: ModuleType.isRequired,
+    showSize: SizeType.isRequired,
+    highlightedText: PropTypes.instanceOf(RegExp),
+
+    isVisible: PropTypes.func.isRequired,
+
+    onClick: PropTypes.func.isRequired,
+  };
+
   state = {
     visible: true,
   };

client/components/ModulesList.jsx

@@ -1,10 +1,22 @@
 import cls from "classnames";
+import PropTypes from "prop-types";
 import PureComponent from "../lib/PureComponent.jsx";
 import ModuleItem from "./ModuleItem.jsx";
-
 import * as styles from "./ModulesList.css";
+import { ModuleType, SizeType } from "./types.js";
 
 export default class ModulesList extends PureComponent {
+  static propTypes = {
+    className: PropTypes.string,
+
+    modules: PropTypes.arrayOf(ModuleType).isRequired,
+    showSize: SizeType.isRequired,
+    highlightedText: PropTypes.instanceOf(RegExp),
+
+    isModuleVisible: PropTypes.func.isRequired,
+    onModuleClick: PropTypes.func.isRequired,
+  };
+
   render({ modules, showSize, highlightedText, isModuleVisible, className }) {
     return (
       <div className={cls(styles.container, className)}>

client/components/ModulesTreemap.jsx

@@ -173,7 +173,9 @@ class ModulesTreemap extends Component {
           onGroupSecondaryClick={this.handleTreemapGroupSecondaryClick}
           onResize={this.handleResize}
         />
-        <Tooltip visible={showTooltip}>{tooltipContent}</Tooltip>
+        {tooltipContent && (
+          <Tooltip visible={showTooltip}>{tooltipContent}</Tooltip>
+        )}
         <ContextMenu
           visible={showChunkContextMenu}
           chunk={selectedChunk}
@@ -264,12 +266,14 @@ class ModulesTreemap extends Component {
 
   handleSelectionChange = (selected) => {
     if (!selected) {
-      store.selectedChunks = store.allChunks;
+      store.setSelectedChunks(store.allChunks);
       return;
     }
 
-    store.selectedChunks = store.allChunks.filter(
-      (chunk) => chunk.isInitialByEntrypoint[selected] ?? false,
+    store.setSelectedChunks(
+      store.allChunks.filter(
+        (chunk) => chunk.isInitialByEntrypoint[selected] ?? false,
+      ),
     );
   };
 
@@ -314,15 +318,15 @@ class ModulesTreemap extends Component {
   };
 
   handleSizeSwitch = (sizeSwitchItem) => {
-    store.selectedSize = sizeSwitchItem.prop;
+    store.setSelectedSize(sizeSwitchItem.prop);
   };
 
   handleQueryChange = (query) => {
-    store.searchQuery = query;
+    store.setSearchQuery(query);
   };
 
   handleSelectedChunksChange = (selectedChunks) => {
-    store.selectedChunks = selectedChunks;
+    store.setSelectedSize(selectedChunks);
   };
 
   handleMouseLeaveTreemap = () => {

client/components/Search.jsx

@@ -1,12 +1,24 @@
 // TODO: switch to a more modern debounce package once we drop Node.js 10 support
 import debounce from "debounce";
 
+import PropTypes from "prop-types";
 import PureComponent from "../lib/PureComponent.jsx";
 import Button from "./Button.jsx";
 
 import * as styles from "./Search.css";
 
 export default class Search extends PureComponent {
+  static propTypes = {
+    className: PropTypes.string,
+
+    label: PropTypes.string.isRequired,
+    query: PropTypes.string.isRequired,
+
+    autofocus: PropTypes.bool,
+
+    onQueryChange: PropTypes.func.isRequired,
+  };
+
   componentDidMount() {
     if (this.props.autofocus) {
       this.focus();

client/components/Sidebar.jsx

@@ -1,6 +1,6 @@
 import cls from "classnames";
 import { Component } from "preact";
-
+import PropTypes from "prop-types";
 import Button from "./Button.jsx";
 import Icon from "./Icon.jsx";
 import * as styles from "./Sidebar.css";
@@ -9,6 +9,17 @@ import ThemeToggle from "./ThemeToggle.jsx";
 const toggleTime = Number.parseInt(styles.toggleTime, 10);
 
 export default class Sidebar extends Component {
+  static propTypes = {
+    pinned: PropTypes.bool.isRequired,
+    position: PropTypes.string,
+
+    onToggle: PropTypes.func.isRequired,
+    onResize: PropTypes.func.isRequired,
+    onPinStateChange: PropTypes.func.isRequired,
+
+    children: PropTypes.node.isRequired,
+  };
+
   static defaultProps = {
     pinned: false,
     position: "left",