@khanacademy/math-input 0.7.2 → 1.0.0

package/src/components/{navigation-pad.js → navigation-pad.tsx}

@@ -4,7 +4,6 @@
  */
 
 import {StyleSheet} from "aphrodite";
-import PropTypes from "prop-types";
 import * as React from "react";
 
 import {BorderStyles} from "../consts";
@@ -20,14 +19,16 @@ import {
 import Styles from "./styles";
 import TouchableKeypadButton from "./touchable-keypad-button";
 
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
+
 const {row, column, centered, stretch, roundedTopLeft} = Styles;
 
-class NavigationPad extends React.Component {
-    static propTypes = {
-        roundTopLeft: PropTypes.bool,
-        style: PropTypes.any,
-    };
+type Props = {
+    roundTopLeft: boolean;
+    style: StyleType;
+};
 
+class NavigationPad extends React.Component<Props> {
     render() {
         // TODO(charlie): Disable the navigational arrows depending on the
         // cursor context.

package/src/components/{node-manager.js → node-manager.ts}

@@ -1,3 +1,4 @@
+import type {Border} from "../types";
 /**
  * A manager for our node-to-ID system. In particular, this class is
  * responsible for maintaing a mapping between DOM nodes and node IDs, and
@@ -7,6 +8,11 @@
  */
 
 class NodeManager {
+    _nodesById: Record<string, HTMLElement>;
+    _bordersById: Record<string, Border>;
+    _orderedIds: ReadonlyArray<string>;
+    _cachedBoundingBoxesById: Record<string, DOMRect>;
+
     constructor() {
         // A mapping from IDs to DOM nodes.
         this._nodesById = {};
@@ -43,7 +49,12 @@ class NodeManager {
      * @param {node} domNode - the DOM node linked to the identifier
      * @param {object} borders - an opaque object describing the node's borders
      */
-    registerDOMNode(id, domNode, childIds, borders) {
+    registerDOMNode(
+        id: string,
+        domNode: HTMLElement,
+        childIds: ReadonlyArray<string>,
+        borders: Border,
+    ) {
         this._nodesById[id] = domNode;
         this._bordersById[id] = borders;
 
@@ -57,6 +68,7 @@ class NodeManager {
         const seenIds = {};
         for (const id of allIds) {
             if (!seenIds[id]) {
+                // @ts-expect-error TS2345
                 orderedIds.push(id);
                 seenIds[id] = true;
             }
@@ -70,7 +82,7 @@ class NodeManager {
      *
      * @param {string} id - the identifier of the node to unregister
      */
-    unregisterDOMNode(id) {
+    unregisterDOMNode(id: string) {
         delete this._nodesById[id];
     }
 
@@ -83,7 +95,7 @@ class NodeManager {
      * @returns {null|string} - null or the identifier of the topmost node at
      *                          the given coordinates
      */
-    idForCoords(x, y) {
+    idForCoords(x: number, y: number): string | void {
         for (const id of this._orderedIds) {
             const domNode = this._nodesById[id];
             if (domNode) {
@@ -110,7 +122,7 @@ class NodeManager {
      * @returns {object} - the bounding client rect for the given node, along
      *                     with its borders
      */
-    layoutPropsForId(id) {
+    layoutPropsForId(id: string): {initialBounds: DOMRect; borders: Border} {
         if (!this._cachedBoundingBoxesById[id]) {
             const node = this._nodesById[id];
 

package/src/components/{popover-manager.js → popover-manager.tsx}

@@ -3,32 +3,29 @@
  * multi-functional keys.
  */
 
-import PropTypes from "prop-types";
 import * as React from "react";
 import {CSSTransition} from "react-transition-group";
 
 import KeyConfigs from "../data/key-configs";
 
 import MultiSymbolPopover from "./multi-symbol-popover";
-import {
-    boundingBoxPropType,
-    keyConfigPropType,
-    popoverPropType,
-} from "./prop-types";
+
+import type {Popover, KeyConfig} from "../types";
 
 // NOTE(charlie): These must be kept in sync with the transition durations and
 // classnames specified in popover.less.
 const animationTransitionName = "popover";
 const animationDurationMs = 200;
 
+type Props = {
+    // TODO(matthewc) should be something like Bound, but couldn't fix errors
+    bounds: any;
+    childKeys: ReadonlyArray<KeyConfig>;
+};
+
 // A container component used to position a popover absolutely at a specific
 // position.
-class PopoverContainer extends React.Component {
-    static propTypes = {
-        bounds: boundingBoxPropType.isRequired,
-        childKeys: PropTypes.arrayOf(keyConfigPropType).isRequired,
-    };
-
+class PopoverContainer extends React.Component<Props> {
     render() {
         const {bounds, childKeys} = this.props;
 
@@ -45,11 +42,11 @@ class PopoverContainer extends React.Component {
     }
 }
 
-class PopoverManager extends React.Component {
-    static propTypes = {
-        popover: popoverPropType,
-    };
+type PopoverManagerProps = {
+    popover: Popover | null;
+};
 
+class PopoverManager extends React.Component<PopoverManagerProps> {
     render() {
         const {popover} = this.props;
 

package/src/components/{popover-state-machine.js → popover-state-machine.ts}

@@ -5,7 +5,26 @@
  * is present.
  */
 
+type ActiveNodesObjPopover = {
+    parentId: string;
+    childIds: ReadonlyArray<string>;
+};
+
+type ActiveNodesObj = {
+    popover: ActiveNodesObjPopover | null;
+    focus: string | null;
+};
+
+type Handlers = {
+    onActiveNodesChanged: (activeNodes: ActiveNodesObj) => void;
+    onClick: (keyId: string, domNodeId: string, inPopover: boolean) => void;
+};
+
 class PopoverStateMachine {
+    handlers: Handlers;
+    popovers: Record<string, ReadonlyArray<string>>;
+    activePopover: string | null;
+
     constructor(handlers) {
         this.handlers = handlers;
 
@@ -104,8 +123,8 @@ class PopoverStateMachine {
             this.activePopover = id;
             this.handlers.onActiveNodesChanged({
                 popover: {
-                    parentId: this.activePopover,
-                    childIds: this.popovers[this.activePopover],
+                    parentId: id,
+                    childIds: this.popovers[id],
                 },
                 focus: this._defaultNodeForPopover(this.activePopover),
             });

package/src/components/prop-types.js

@@ -4,38 +4,8 @@
 
 import PropTypes from "prop-types";
 
-import {
-    BorderDirections,
-    EchoAnimationTypes,
-    IconTypes,
-    KeyTypes,
-    KeypadTypes,
-} from "../consts";
-import KeyConfigs from "../data/key-configs";
-
-import * as CursorContexts from "./input/cursor-contexts";
-
-export const iconPropType = PropTypes.shape({
-    type: PropTypes.oneOf(Object.keys(IconTypes)).isRequired,
-    data: PropTypes.string.isRequired,
-});
-
-export const keyIdPropType = PropTypes.oneOf(Object.keys(KeyConfigs));
-
-export const keyConfigPropType = PropTypes.shape({
-    ariaLabel: PropTypes.string,
-    id: keyIdPropType.isRequired,
-    type: PropTypes.oneOf(Object.keys(KeyTypes)).isRequired,
-    childKeyIds: PropTypes.arrayOf(keyIdPropType),
-    icon: iconPropType.isRequired,
-});
-
-export const keypadConfigurationPropType = PropTypes.shape({
-    keypadType: PropTypes.oneOf(Object.keys(KeypadTypes)).isRequired,
-    extraKeys: PropTypes.arrayOf(keyIdPropType),
-});
-
 // NOTE(jared): This is no longer guaranteed to be React element
+// NOTE(matthewc): only seems to be used in Perseus
 export const keypadElementPropType = PropTypes.shape({
     activate: PropTypes.func.isRequired,
     dismiss: PropTypes.func.isRequired,
@@ -44,39 +14,3 @@ export const keypadElementPropType = PropTypes.shape({
     setKeyHandler: PropTypes.func.isRequired,
     getDOMNode: PropTypes.func.isRequired,
 });
-
-export const bordersPropType = PropTypes.arrayOf(
-    PropTypes.oneOf(Object.keys(BorderDirections)),
-);
-
-export const boundingBoxPropType = PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number,
-    top: PropTypes.number,
-    right: PropTypes.number,
-    bottom: PropTypes.number,
-    left: PropTypes.number,
-});
-
-export const echoPropType = PropTypes.shape({
-    animationId: PropTypes.string.isRequired,
-    animationType: PropTypes.oneOf(Object.keys(EchoAnimationTypes)).isRequired,
-    borders: bordersPropType,
-    id: keyIdPropType.isRequired,
-    initialBounds: boundingBoxPropType.isRequired,
-});
-
-export const cursorContextPropType = PropTypes.oneOf(
-    Object.keys(CursorContexts),
-);
-
-export const popoverPropType = PropTypes.shape({
-    parentId: keyIdPropType.isRequired,
-    bounds: boundingBoxPropType.isRequired,
-    childKeyIds: PropTypes.arrayOf(keyIdPropType).isRequired,
-});
-
-export const childrenPropType = PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-]);

package/src/components/provided-keypad.tsx

@@ -14,17 +14,17 @@ import {createStore} from "../store/index";
 
 import KeypadContainer from "./keypad-container";
 
-import type {CSSProperties} from "aphrodite";
+import type {Cursor, KeypadConfiguration, KeyHandler} from "../types";
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 type Props = {
     onElementMounted?: (arg1: any) => void;
-    onDismiss?: () => unknown;
-    style?: CSSProperties;
+    onDismiss?: () => void;
+    style?: StyleType;
 };
 
 class ProvidedKeypad extends React.Component<Props> {
-    // @ts-expect-error [FEI-5003] - TS2564 - Property 'mounted' has no initializer and is not definitely assigned in the constructor.
-    mounted: boolean;
+    mounted?: boolean;
     store: any;
 
     UNSAFE_componentWillMount() {
@@ -47,8 +47,10 @@ class ProvidedKeypad extends React.Component<Props> {
         this.store.dispatch(dismissKeypad());
     };
 
-    // @ts-expect-error [FEI-5003] - TS2322 - Type '(configuration: any, cb: any) => void' is not assignable to type '() => void'.
-    configure: () => void = (configuration, cb) => {
+    configure: (configuration: KeypadConfiguration, cb: () => void) => void = (
+        configuration,
+        cb,
+    ) => {
         this.store.dispatch(configureKeypad(configuration));
 
         // HACK(charlie): In Perseus, triggering a focus causes the keypad to
@@ -61,12 +63,11 @@ class ProvidedKeypad extends React.Component<Props> {
         setTimeout(() => cb && cb());
     };
 
-    // @ts-expect-error [FEI-5003] - TS2322 - Type '(cursor: any) => void' is not assignable to type '() => void'.
-    setCursor: () => void = (cursor) => {
+    setCursor: (cursor: Cursor) => void = (cursor) => {
         this.store.dispatch(setCursor(cursor));
     };
 
-    setKeyHandler: (keyHandler: any) => void = (keyHandler) => {
+    setKeyHandler: (keyHandler: KeyHandler) => void = (keyHandler) => {
         this.store.dispatch(setKeyHandler(keyHandler));
     };
 
@@ -75,7 +76,7 @@ class ProvidedKeypad extends React.Component<Props> {
     };
 
     render(): React.ReactNode {
-        const {onElementMounted, ...rest} = this.props;
+        const {onElementMounted, onDismiss, style} = this.props;
 
         return (
             <Provider store={this.store}>
@@ -95,7 +96,8 @@ class ProvidedKeypad extends React.Component<Props> {
                         onElementMounted &&
                             onElementMounted(elementWithDispatchMethods);
                     }}
-                    {...rest}
+                    onDismiss={onDismiss}
+                    style={style}
                 />
             </Provider>
         );

package/src/components/{svg-icon.js → svg-icon.tsx}

@@ -2,17 +2,16 @@
  * A component that renders a single SVG icon.
  */
 
-import PropTypes from "prop-types";
 import * as React from "react";
 
 import * as Iconography from "./iconography/index";
 
-class SvgIcon extends React.Component {
-    static propTypes = {
-        color: PropTypes.string.isRequired,
-        name: PropTypes.string.isRequired,
-    };
+type Props = {
+    color: string;
+    name: string;
+};
 
+class SvgIcon extends React.Component<Props> {
     render() {
         const {color, name} = this.props;
 

package/src/components/tabbar/icons.tsx

@@ -2,10 +2,12 @@ import * as React from "react";
 
 import type {TabbarItemType} from "./types";
 
-const IconAsset: React.FC<{
+type Props = {
     tintColor: string;
     type: TabbarItemType;
-}> = function ({tintColor, type}): React.ReactElement {
+};
+
+const IconAsset = function ({tintColor, type}: Props): React.ReactElement {
     if (type === "Geometry") {
         return (
             <svg

package/src/components/tabbar/item.tsx

@@ -76,9 +76,7 @@ type Props = {
     itemType: TabbarItemType;
 };
 
-type State = Record<any, any>;
-
-class TabbarItem extends React.Component<Props, State> {
+class TabbarItem extends React.Component<Props> {
     render(): React.ReactNode {
         const {onClick, itemType, itemState} = this.props;
         return (

package/src/components/tabbar/{tabbar.stories.js → tabbar.stories.tsx}

@@ -5,6 +5,8 @@ import * as React from "react";
 import {TabbarItemForTesting as TabbarItem} from "./item";
 import Tabbar from "./tabbar";
 
+import type {TabbarItemType} from "./types";
+
 export default {title: "Tab Bar", decorators: [withKnobs]};
 
 export const InactiveBarItem = () => (
@@ -49,12 +51,19 @@ export const DisabledBarItem = () => (
             "Numbers",
         )}
         itemState="disabled"
+        onClick={action("onClick")}
     />
 );
 
 export const FullTabbar = () => (
     <Tabbar
-        items={array("items", ["Numbers", "Geometry", "Operators"])}
+        items={
+            array("items", [
+                "Numbers",
+                "Geometry",
+                "Operators",
+            ]) as ReadonlyArray<TabbarItemType>
+        }
         onSelect={action("selected-item")}
     />
 );

package/src/components/tabbar/tabbar.tsx

@@ -23,12 +23,12 @@ type TabbarState = {
     selectedItem: number;
 };
 
-type TabbarProps = {
-    items: Array<TabbarItemType>;
+type Props = {
+    items: ReadonlyArray<TabbarItemType>;
     onSelect: (item: TabbarItemType) => void;
 };
 
-class Tabbar extends React.Component<TabbarProps, TabbarState> {
+class Tabbar extends React.Component<Props, TabbarState> {
     state: TabbarState = {
         selectedItem: 0,
     };

package/src/components/{text-icon.js → text-icon.tsx}

@@ -3,7 +3,6 @@
  */
 
 import {StyleSheet} from "aphrodite";
-import PropTypes from "prop-types";
 import * as React from "react";
 
 import {View, Text} from "../fake-react-native-web/index";
@@ -11,14 +10,16 @@ import {View, Text} from "../fake-react-native-web/index";
 import {iconSizeHeightPx, iconSizeWidthPx} from "./common-style";
 import Styles from "./styles";
 
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
+
 const {row, centered} = Styles;
 
-class TextIcon extends React.Component {
-    static propTypes = {
-        character: PropTypes.string.isRequired,
-        style: PropTypes.any,
-    };
+type Props = {
+    character: string;
+    style?: StyleType;
+};
 
+class TextIcon extends React.Component<Props> {
     render() {
         const {character, style} = this.props;
 

package/src/components/{touchable-keypad-button.js → touchable-keypad-button.tsx}

@@ -5,31 +5,34 @@
  */
 
 import {StyleSheet} from "aphrodite";
-import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import {connect} from "react-redux";
 
-import {KeyTypes} from "../consts";
+import {KeyType, KeyTypes} from "../consts";
 import KeyConfigs from "../data/key-configs";
 
 import GestureManager from "./gesture-manager";
 import KeypadButton from "./keypad-button";
-import {bordersPropType, keyIdPropType} from "./prop-types";
-
-class TouchableKeypadButton extends React.Component {
-    static propTypes = {
-        borders: bordersPropType,
-        childKeyIds: PropTypes.arrayOf(keyIdPropType),
-        disabled: PropTypes.bool,
-        focused: PropTypes.bool,
-        gestureManager: PropTypes.instanceOf(GestureManager),
-        id: keyIdPropType.isRequired,
-        popoverEnabled: PropTypes.bool,
-        style: PropTypes.any,
-        type: PropTypes.oneOf(Object.keys(KeyTypes)).isRequired,
-    };
 
+import type {Key} from "../data/keys";
+import type {Border, Icon} from "../types";
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
+
+type Props = {
+    borders: Border;
+    childKeyIds: ReadonlyArray<Key>;
+    disabled: boolean;
+    focused: boolean;
+    gestureManager: GestureManager;
+    id: Key;
+    popoverEnabled: boolean;
+    style: StyleType;
+    type: KeyType;
+    icon: Icon;
+};
+
+class TouchableKeypadButton extends React.Component<Props> {
     shouldComponentUpdate(newProps) {
         // We take advantage of a few different properties of our key
         // configuration system. Namely, we know that the other props flow

package/src/components/{two-page-keypad.js → two-page-keypad.tsx}

@@ -3,7 +3,6 @@
  */
 
 import {StyleSheet} from "aphrodite";
-import PropTypes from "prop-types";
 import * as React from "react";
 import {connect} from "react-redux";
 
@@ -19,16 +18,21 @@ import Keypad from "./keypad";
 import Styles from "./styles";
 import Tabbar from "./tabbar/tabbar";
 
+import type {State} from "../store/types";
+
 const {column, row, fullWidth} = Styles;
 
-class TwoPageKeypad extends React.Component {
-    static propTypes = {
-        currentPage: PropTypes.oneOf([0, 1]).isRequired,
-        leftPage: PropTypes.node.isRequired,
-        paginationEnabled: PropTypes.bool.isRequired,
-        rightPage: PropTypes.node.isRequired,
-    };
+interface ReduxProps {
+    paginationEnabled: boolean;
+}
+
+interface Props extends ReduxProps {
+    currentPage: number;
+    leftPage: React.ReactNode;
+    rightPage: React.ReactNode;
+}
 
+class TwoPageKeypad extends React.Component<Props> {
     state = {
         selectedPage: "Numbers",
     };
@@ -88,7 +92,7 @@ const styles = StyleSheet.create({
     },
 });
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state: State): ReduxProps => {
     return {
         paginationEnabled: state.layout.paginationEnabled,
     };

package/src/components/{velocity-tracker.js → velocity-tracker.ts}

@@ -7,8 +7,18 @@
 
 import now from "performance-now";
 
+type Event = {
+    x: number;
+    t: number;
+};
+
 class VelocityTracker {
-    constructor(options) {
+    options: {
+        velocityTimeout: number;
+    };
+    _events: Array<Event>;
+
+    constructor(options?) {
         this.options = {
             velocityTimeout: 100,
             ...options,
@@ -24,7 +34,7 @@ class VelocityTracker {
      *
      * @param {number} x - the cumulative displacement of the event
      */
-    push(x) {
+    push(x: number) {
         this._events.push({
             x,
             t: now(),
@@ -42,7 +52,7 @@ class VelocityTracker {
      *
      * @returns {number} the velocity associated with the tracker
      */
-    getVelocity() {
+    getVelocity(): number {
         const events = this._getEvents();
 
         if (events.length < 2) {
@@ -63,7 +73,7 @@ class VelocityTracker {
      *                     that occurred in the past `velocityTimeout`
      *                     milliseconds
      */
-    _getEvents() {
+    _getEvents(): ReadonlyArray<Event> {
         const threshold = now() - this.options.velocityTimeout;
         const recentEvents = this._events.filter((event) => {
             return event.t > threshold;

package/src/fake-react-native-web/text.tsx

@@ -1,6 +1,7 @@
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
 import type {CSSProperties} from "aphrodite";
 
 type Props = {
@@ -11,7 +12,7 @@ type Props = {
     // a StyleSheet.
     dynamicStyle?: CSSProperties;
     numberOfLines?: number;
-    style?: CSSProperties;
+    style?: StyleType;
 };
 
 class Text extends React.Component<Props> {

package/src/fake-react-native-web/view.tsx

@@ -1,11 +1,12 @@
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
 import type {CSSProperties} from "aphrodite";
 
 type Props = {
     ariaLabel?: string;
-    children: React.ReactNode;
+    children?: React.ReactNode;
     // The `dynamicStyle` prop is provided for animating dynamic
     // properties, as creating Aphrodite StyleSheets in animation loops is
     // expensive. `dynamicStyle` should be a raw style object, rather than
@@ -24,7 +25,7 @@ type Props = {
     onTouchMove?: (arg1: React.TouchEvent<HTMLDivElement>) => void;
     onTouchStart?: (arg1: React.TouchEvent<HTMLDivElement>) => void;
     role?: string;
-    style?: CSSProperties;
+    style?: StyleType;
 };
 
 class View extends React.Component<Props> {

package/src/index.ts

@@ -5,10 +5,7 @@
 import "../less/main.less";
 
 export {default as KeypadInput} from "./components/input/math-input";
-export {
-    keypadConfigurationPropType,
-    keypadElementPropType,
-} from "./components/prop-types";
+export {keypadElementPropType} from "./components/prop-types";
 export {default as Keypad} from "./components/provided-keypad";
 export {KeypadTypes} from "./consts";
 export {default as KeyConfigs} from "./data/key-configs";