@khanacademy/math-input 0.6.8 → 0.7.0

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

@@ -1,16 +1,11 @@
-// @flow
-
 import * as React from "react";
 
-import type {TabbarItemType} from "./types.js";
+import type {TabbarItemType} from "./types";
 
-function IconAsset({
-    tintColor,
-    type,
-}: {
-    tintColor: string,
-    type: TabbarItemType,
-}): React.Node {
+const IconAsset: React.FC<{
+    tintColor: string;
+    type: TabbarItemType;
+}> = function ({tintColor, type}): React.ReactElement {
     if (type === "Geometry") {
         return (
             <svg
@@ -62,8 +57,8 @@ function IconAsset({
         );
     }
 
-    (type: empty);
+    // type as never;
     throw new Error("Invalid icon type");
-}
+};
 
 export default IconAsset;

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

@@ -1,12 +1,10 @@
-// @flow
-
 import Clickable from "@khanacademy/wonder-blocks-clickable";
 import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import IconAsset from "./icons.js";
+import IconAsset from "./icons";
 
 import type {TabbarItemType} from "./types";
 
@@ -73,15 +71,15 @@ function imageTintColor(
 }
 export type ItemState = "active" | "inactive" | "disabled";
 type Props = {
-    onClick: () => void,
-    itemState: ItemState,
-    itemType: TabbarItemType,
+    onClick: () => void;
+    itemState: ItemState;
+    itemType: TabbarItemType;
 };
 
-type State = {};
+type State = Record<any, any>;
 
 class TabbarItem extends React.Component<Props, State> {
-    render(): React.Node {
+    render(): React.ReactNode {
         const {onClick, itemType, itemState} = this.props;
         return (
             <Clickable onClick={onClick} disabled={itemState === "disabled"}>

package/src/components/tabbar/tabbar.stories.js

@@ -2,8 +2,8 @@ import {action} from "@storybook/addon-actions";
 import {withKnobs, select, array} from "@storybook/addon-knobs";
 import * as React from "react";
 
-import {TabbarItemForTesting as TabbarItem} from "./item.js";
-import Tabbar from "./tabbar.js";
+import {TabbarItemForTesting as TabbarItem} from "./item";
+import Tabbar from "./tabbar";
 
 export default {title: "Tab Bar", decorators: [withKnobs]};
 

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

@@ -1,13 +1,11 @@
-// @flow
-
 import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import TabbarItem from "./item.js";
+import TabbarItem from "./item";
 
-import type {TabbarItemType} from "./types.js";
+import type {TabbarItemType} from "./types";
 
 const styles = StyleSheet.create({
     tabbar: {
@@ -22,19 +20,19 @@ const styles = StyleSheet.create({
 });
 
 type TabbarState = {
-    selectedItem: number,
+    selectedItem: number;
 };
 
 type TabbarProps = {
-    items: Array<TabbarItemType>,
-    onSelect: (item: TabbarItemType) => void,
+    items: Array<TabbarItemType>;
+    onSelect: (item: TabbarItemType) => void;
 };
 
 class Tabbar extends React.Component<TabbarProps, TabbarState> {
     state: TabbarState = {
         selectedItem: 0,
     };
-    render(): React.Node {
+    render(): React.ReactNode {
         const {items, onSelect} = this.props;
         return (
             <View style={styles.tabbar}>

package/src/components/tabbar/types.ts

@@ -0,0 +1 @@
+export type TabbarItemType = "Geometry" | "Operators" | "Numbers";

package/src/components/text-icon.js

@@ -6,10 +6,10 @@ import {StyleSheet} from "aphrodite";
 import PropTypes from "prop-types";
 import * as React from "react";
 
-import {View, Text} from "../fake-react-native-web/index.js";
+import {View, Text} from "../fake-react-native-web/index";
 
-import {iconSizeHeightPx, iconSizeWidthPx} from "./common-style.js";
-import Styles from "./styles.js";
+import {iconSizeHeightPx, iconSizeWidthPx} from "./common-style";
+import Styles from "./styles";
 
 const {row, centered} = Styles;
 

package/src/components/touchable-keypad-button.js

@@ -10,12 +10,12 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import {connect} from "react-redux";
 
-import {KeyTypes} from "../consts.js";
-import KeyConfigs from "../data/key-configs.js";
+import {KeyTypes} from "../consts";
+import KeyConfigs from "../data/key-configs";
 
-import GestureManager from "./gesture-manager.js";
-import KeypadButton from "./keypad-button.js";
-import {bordersPropType, keyIdPropType} from "./prop-types.js";
+import GestureManager from "./gesture-manager";
+import KeypadButton from "./keypad-button";
+import {bordersPropType, keyIdPropType} from "./prop-types";
 
 class TouchableKeypadButton extends React.Component {
     static propTypes = {

package/src/components/two-page-keypad.js

@@ -7,17 +7,17 @@ import PropTypes from "prop-types";
 import * as React from "react";
 import {connect} from "react-redux";
 
-import {View} from "../fake-react-native-web/index.js";
+import {View} from "../fake-react-native-web/index";
 
 import {
     innerBorderColor,
     innerBorderStyle,
     innerBorderWidthPx,
     offBlack16,
-} from "./common-style.js";
-import Keypad from "./keypad.js";
-import Styles from "./styles.js";
-import Tabbar from "./tabbar/tabbar.js";
+} from "./common-style";
+import Keypad from "./keypad";
+import Styles from "./styles";
+import Tabbar from "./tabbar/tabbar";
 
 const {column, row, fullWidth} = Styles;
 

package/src/components/{z-indexes.js → z-indexes.ts}

@@ -1,4 +1,3 @@
-// @flow
 /**
  * This file contains all of the z-index values used throughout the math-input
  * component and its children.

package/src/{consts.js → consts.ts}

@@ -1,4 +1,3 @@
-// @flow
 /**
  * Constants that are shared between multiple files.
  */
@@ -9,25 +8,19 @@ export type KeypadType = "FRACTION" | "EXPRESSION";
 export const KeypadTypes = {
     FRACTION: "FRACTION",
     EXPRESSION: "EXPRESSION",
-};
+} as const;
 
-export type KeyType =
-    | "EMPTY"
-    // For numerals, variables, and any other characters that themselves
+export type KeyType = // For numerals, variables, and any other characters that themselves
     // compose 'values'.
-    | "VALUE"
-    // For buttons that insert or adjust math in an input.
-    | "OPERATOR"
-    // For buttons that move the cursor in an input (including via
+    | "EMPTY" // For buttons that insert or adjust math in an input.
+    | "VALUE" // For buttons that move the cursor in an input (including via
     // deletion).
-    | "INPUT_NAVIGATION"
-    // For buttons that modify the broader keypad state (e.g., by changing
+    | "OPERATOR" // For buttons that modify the broader keypad state (e.g., by changing
     // the visible pane).
-    | "KEYPAD_NAVIGATION"
-    // For buttons that house multiple buttons and have no action
+    | "INPUT_NAVIGATION" // For buttons that house multiple buttons and have no action
     // themselves.
+    | "KEYPAD_NAVIGATION" // For the echo animation that appears on press.
     | "MANY"
-    // For the echo animation that appears on press.
     | "ECHO";
 
 export const KeyTypes = {
@@ -48,30 +41,32 @@ export const KeyTypes = {
     MANY: "MANY",
     // For the echo animation that appears on press.
     ECHO: "ECHO",
-};
+} as const;
 
 export const DeviceOrientations = {
     LANDSCAPE: "LANDSCAPE",
     PORTRAIT: "PORTRAIT",
-};
+} as const;
 
 export const DeviceTypes = {
     PHONE: "PHONE",
     TABLET: "TABLET",
-};
+} as const;
 
 export const LayoutModes = {
     FULLSCREEN: "FULLSCREEN",
     COMPACT: "COMPACT",
-};
+} as const;
 
 export const BorderDirections = {
-    LEFT: ("LEFT": "LEFT"),
-    BOTTOM: ("BOTTOM": "BOTTOM"),
-};
-export const BorderStyles: {|
-    [style: string]: $ReadOnlyArray<$Values<typeof BorderDirections>>,
-|} = {
+    LEFT: "LEFT" as const,
+    BOTTOM: "BOTTOM" as const,
+} as const;
+export const BorderStyles: {
+    [style: string]: ReadonlyArray<
+        typeof BorderDirections[keyof typeof BorderDirections]
+    >;
+} = {
     LEFT: ["LEFT"],
     BOTTOM: ["BOTTOM"],
     ALL: ["LEFT", "BOTTOM"],
@@ -82,15 +77,15 @@ export const IconTypes = {
     MATH: "MATH",
     SVG: "SVG",
     TEXT: "TEXT",
-};
+} as const;
 
 export const DecimalSeparators = {
     COMMA: "COMMA",
     PERIOD: "PERIOD",
-};
+} as const;
 
 export const EchoAnimationTypes = {
     SLIDE_AND_FADE: "SLIDE_AND_FADE",
     FADE_ONLY: "FADE_ONLY",
     LONG_FADE_ONLY: "LONG_FADE_ONLY",
-};
+} as const;

package/src/data/{key-configs.js → key-configs.ts}

@@ -1,21 +1,20 @@
-// @flow
 /**
  * This file contains configuration settings for the buttons in the keypad.
  */
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 
-import {DecimalSeparators, IconTypes, KeyTypes} from "../consts.js";
-import {decimalSeparator} from "../utils.js";
+import {DecimalSeparators, IconTypes, KeyTypes} from "../consts";
+import {decimalSeparator} from "../utils";
 
-import Keys from "./keys.js";
+import Keys from "./keys";
 
 export type KeyConfig = {
-    id: string,
-    type: string,
-    ariaLabel: string,
+    id: string;
+    type: string;
+    ariaLabel: string;
 };
 
-const KeyConfigs: Object = {
+const KeyConfigs: any = {
     // Basic math keys.
     [Keys.PLUS]: {
         type: KeyTypes.OPERATOR,

package/src/data/{keys.js → keys.ts}

@@ -1,4 +1,3 @@
-// @flow
 /**
  * This file contains constants for keypad buttons that aren't single
  * alphanumeric characters.
@@ -19,9 +18,9 @@ export type Key =
     | "GT"
     | "LT"
     | "GEQ"
-    | "LEQ"
+    | "LEQ" // mobile native only
     | "FRAC_INCLUSIVE" // mobile native only
-    | "FRAC_EXCLUSIVE" // mobile native only
+    | "FRAC_EXCLUSIVE"
     | "FRAC"
     | "EXP"
     | "EXP_2"
@@ -35,10 +34,8 @@ export type Key =
     | "LOG"
     | "LOG_N"
     | "SIN"
-    | "COS"
+    | "COS" // TODO(charlie): Add in additional Greek letters.
     | "TAN"
-
-    // TODO(charlie): Add in additional Greek letters.
     | "PI"
     | "THETA"
     | "UP"
@@ -52,14 +49,11 @@ export type Key =
     | "JUMP_OUT_BASE"
     | "JUMP_INTO_NUMERATOR"
     | "JUMP_OUT_NUMERATOR"
-    | "JUMP_OUT_DENOMINATOR"
-    | "NOOP"
-
-    // Multi-functional keys.
-    | "FRAC_MULTI" // mobile native only
-
+    | "JUMP_OUT_DENOMINATOR" // Multi-functional keys.
+    | "NOOP" // mobile native only
     // A custom key that captures an arbitrary number of symbols but has no
     // 'default' symbol or action.
+    | "FRAC_MULTI"
     | "MANY";
 
 // TODO(charlie): There's duplication between this file and key-configs.js.
@@ -125,6 +119,6 @@ const Keys = {
     // A custom key that captures an arbitrary number of symbols but has no
     // 'default' symbol or action.
     MANY: "MANY",
-};
+} as const;
 
 export default Keys;

package/src/demo.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import ReactDOM from "react-dom";
 
-import App from "./components/app.js";
+import App from "./components/app";
 
 import "../less/main.less";
 

package/src/fake-react-native-web/{index.js → index.ts}

@@ -1,4 +1,3 @@
-// @flow
 /**
  * This file exports components View and Text which wrap <div> and <span>.
  * We do this so that someday in the future we can use these components with
@@ -8,5 +7,5 @@
  * StyleSheets instead.
  */
 
-export {default as Text} from "./text.js";
-export {default as View} from "./view.js";
+export {default as Text} from "./text";
+export {default as View} from "./view";

package/src/fake-react-native-web/{text.js → text.tsx}

@@ -1,23 +1,21 @@
-// @flow
-
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
 import type {CSSProperties} from "aphrodite";
 
-type Props = {|
-    children: React.Node,
+type Props = {
+    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
     // a StyleSheet.
-    dynamicStyle?: CSSProperties,
-    numberOfLines?: number,
-    style?: CSSProperties,
-|};
+    dynamicStyle?: CSSProperties;
+    numberOfLines?: number;
+    style?: CSSProperties;
+};
 
 class Text extends React.Component<Props> {
-    render(): React.Element<"span"> {
+    render(): React.ReactNode {
         const {numberOfLines, style} = this.props;
 
         const className = css(

package/src/fake-react-native-web/{view.js → view.tsx}

@@ -1,33 +1,31 @@
-// @flow
-
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
 import type {CSSProperties} from "aphrodite";
 
-type Props = {|
-    ariaLabel?: string,
-    children: React.Node,
+type Props = {
+    ariaLabel?: string;
+    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
     // a StyleSheet.
-    dynamicStyle?: CSSProperties,
+    dynamicStyle?: CSSProperties;
     // The `extraClassName` prop should almost never be used. It gives the
     // client a way to provide an additional CSS class name, to augment
     // the class name generated by Aphrodite. (Right now, it's only used to
     // disable some externally-applied CSS that would otherwise be far too
     // difficult to override with inline styles.)
-    extraClassName?: string,
-    numberOfLines?: number,
-    onClick?: (SyntheticEvent<HTMLDivElement>) => void,
-    onTouchCancel?: (SyntheticTouchEvent<HTMLDivElement>) => void,
-    onTouchEnd?: (SyntheticTouchEvent<HTMLDivElement>) => void,
-    onTouchMove?: (SyntheticTouchEvent<HTMLDivElement>) => void,
-    onTouchStart?: (SyntheticTouchEvent<HTMLDivElement>) => void,
-    role?: string,
-    style?: CSSProperties,
-|};
+    extraClassName?: string;
+    numberOfLines?: number;
+    onClick?: (arg1: React.SyntheticEvent<HTMLDivElement>) => void;
+    onTouchCancel?: (arg1: React.TouchEvent<HTMLDivElement>) => void;
+    onTouchEnd?: (arg1: React.TouchEvent<HTMLDivElement>) => void;
+    onTouchMove?: (arg1: React.TouchEvent<HTMLDivElement>) => void;
+    onTouchStart?: (arg1: React.TouchEvent<HTMLDivElement>) => void;
+    role?: string;
+    style?: CSSProperties;
+};
 
 class View extends React.Component<Props> {
     // $FlowFixMe[signature-verification-failure]
@@ -60,7 +58,7 @@ class View extends React.Component<Props> {
         },
     });
 
-    render(): React.Element<"div"> {
+    render(): React.ReactNode {
         const className =
             css(
                 View.styles.initial,

package/src/{index.js → index.ts}

@@ -1,23 +1,22 @@
-// @flow
 /**
  * A single entry-point for all of the external-facing functionality.
  */
 
 import "../less/main.less";
 
-export {default as KeypadInput} from "./components/input/math-input.js";
+export {default as KeypadInput} from "./components/input/math-input";
 export {
     keypadConfigurationPropType,
     keypadElementPropType,
-} from "./components/prop-types.js";
-export {default as Keypad} from "./components/provided-keypad.js";
-export {KeypadTypes} from "./consts.js";
-export {default as KeyConfigs} from "./data/key-configs.js";
+} from "./components/prop-types";
+export {default as Keypad} from "./components/provided-keypad";
+export {KeypadTypes} from "./consts";
+export {default as KeyConfigs} from "./data/key-configs";
 
-import * as CursorContexts from "./components/input/cursor-contexts.js";
+import * as CursorContexts from "./components/input/cursor-contexts";
 
 export {CursorContexts};
 
-export type {KeypadType, KeyType} from "./consts.js";
-export type {Key} from "./data/keys.js";
-export type {CursorContext} from "./components/input/cursor-contexts.js";
+export type {KeypadType, KeyType} from "./consts";
+export type {Key} from "./data/keys";
+export type {CursorContext} from "./components/input/cursor-contexts";

package/src/native-app.js

@@ -1,10 +1,10 @@
 import * as React from "react";
 import ReactDOM from "react-dom";
 
-import KeyConfigs from "./data/key-configs.js";
-import {View} from "./fake-react-native-web/index.js";
+import KeyConfigs from "./data/key-configs";
+import {View} from "./fake-react-native-web/index";
 
-import {KeypadInput} from "./index.js";
+import {KeypadInput} from "./index";
 
 // eslint-disable-next-line react/prop-types
 const ManualInput = ({handler}) => {