@khanacademy/math-input 0.7.2 → 1.0.0

package/dist/store/echo-reducer.d.ts

@@ -0,0 +1,5 @@
+import type { EchoState } from "./types";
+declare const echoReducer: (state: {
+    readonly echoes: readonly [];
+} | undefined, action: any) => EchoState;
+export default echoReducer;

package/dist/store/echo-reducer.js.flow

@@ -0,0 +1,14 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import type { EchoState } from "./types";
+declare var echoReducer: (
+  state: {|
+    +echoes: [],
+  |} | void,
+  action: any
+) => EchoState;
+declare export default typeof echoReducer;

package/dist/store/index.d.ts

@@ -1 +1,46 @@
-export declare const createStore: () => any;
+import * as Redux from "redux";
+import GestureManager from "../components/gesture-manager";
+import type { GestureState } from "./types";
+export declare const createStore: () => Redux.Store<Redux.EmptyObject & {
+    input: import("./types").InputState;
+    keypad: import("./types").KeypadState | {
+        readonly extraKeys: readonly ["x", "y", "THETA", "PI"];
+        readonly keypadType: "EXPRESSION";
+        readonly active: false;
+    };
+    pager: import("./types").PagerState | {
+        readonly animateToPosition: false;
+        readonly currentPage: number;
+        readonly dx: 0;
+        readonly numPages: number;
+        readonly pageWidthPx: 0;
+        readonly velocityTracker: import("../components/velocity-tracker").default;
+    };
+    gestures: GestureState | {
+        readonly popover: null;
+        readonly focus: null;
+        readonly gestureManager: GestureManager;
+    };
+    echoes: import("./types").EchoState | {
+        readonly echoes: readonly [];
+    };
+    layout: import("./types").LayoutState | {
+        readonly gridDimensions: {
+            readonly numRows: number;
+            readonly numColumns: number;
+            readonly numMaxVisibleRows: number;
+            readonly numPages: number;
+        };
+        readonly buttonDimensions: {
+            readonly widthPx: 48;
+            readonly heightPx: 48;
+        };
+        readonly pageDimensions: {
+            readonly pageWidthPx: 0;
+            readonly pageHeightPx: 0;
+        };
+        readonly layoutMode: "FULLSCREEN";
+        readonly paginationEnabled: false;
+        readonly navigationPadEnabled: false;
+    };
+}, Redux.AnyAction>;

package/dist/store/index.js.flow

@@ -4,4 +4,67 @@
  * Flowgen v1.21.0
  * @flow
  */
-declare export var createStore: () => any;
+import * as $Flowgen$Import$_2e__2f_types from "./types";
+import * as $Flowgen$Import$_2e__2e__2f_components_2f_velocity_2d_tracker from "../components/velocity-tracker";
+import * as Redux from "redux";
+import GestureManager from "../components/gesture-manager";
+import type { GestureState } from "./types";
+declare export var createStore: () => Redux.Store<
+  {|
+    ...Redux.EmptyObject,
+    ...{|
+      input: $Flowgen$Import$_2e__2f_types.InputState,
+      keypad:
+        | $Flowgen$Import$_2e__2f_types.KeypadState
+        | {|
+            +extraKeys: ["x", "y", "THETA", "PI"],
+            +keypadType: "EXPRESSION",
+            +active: false,
+          |},
+      pager:
+        | $Flowgen$Import$_2e__2f_types.PagerState
+        | {|
+            +animateToPosition: false,
+            +currentPage: number,
+            +dx: 0,
+            +numPages: number,
+            +pageWidthPx: 0,
+            +velocityTracker: $Flowgen$Import$_2e__2e__2f_components_2f_velocity_2d_tracker.default,
+          |},
+      gestures:
+        | GestureState
+        | {|
+            +popover: null,
+            +focus: null,
+            +gestureManager: GestureManager,
+          |},
+      echoes:
+        | $Flowgen$Import$_2e__2f_types.EchoState
+        | {|
+            +echoes: [],
+          |},
+      layout:
+        | $Flowgen$Import$_2e__2f_types.LayoutState
+        | {|
+            +gridDimensions: {|
+              +numRows: number,
+              +numColumns: number,
+              +numMaxVisibleRows: number,
+              +numPages: number,
+            |},
+            +buttonDimensions: {|
+              +widthPx: 48,
+              +heightPx: 48,
+            |},
+            +pageDimensions: {|
+              +pageWidthPx: 0,
+              +pageHeightPx: 0,
+            |},
+            +layoutMode: "FULLSCREEN",
+            +paginationEnabled: false,
+            +navigationPadEnabled: false,
+          |},
+    |},
+  |},
+  Redux.AnyAction
+>;

package/dist/store/input-reducer.d.ts

@@ -0,0 +1,7 @@
+import type { Cursor, KeyHandler } from "../types";
+import type { InputState } from "./types";
+declare const inputReducer: (state: {
+    keyHandler: KeyHandler | null;
+    cursor: Cursor;
+} | undefined, action: any) => InputState;
+export default inputReducer;

package/dist/store/input-reducer.js.flow

@@ -0,0 +1,16 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import type { Cursor, KeyHandler } from "../types";
+import type { InputState } from "./types";
+declare var inputReducer: (
+  state: {|
+    keyHandler: KeyHandler | null,
+    cursor: Cursor,
+  |} | void,
+  action: any
+) => InputState;
+declare export default typeof inputReducer;

package/dist/store/keypad-reducer.d.ts

@@ -0,0 +1,9 @@
+import type { KeypadState } from "./types";
+declare const keypadReducer: (state: {
+    readonly extraKeys: readonly ["x", "y", "THETA", "PI"];
+    readonly keypadType: "EXPRESSION";
+    readonly active: false;
+} | undefined, action: {
+    type: string;
+}) => KeypadState;
+export default keypadReducer;

package/dist/store/keypad-reducer.js.flow

@@ -0,0 +1,18 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import type { KeypadState } from "./types";
+declare var keypadReducer: (
+  state: {|
+    +extraKeys: ["x", "y", "THETA", "PI"],
+    +keypadType: "EXPRESSION",
+    +active: false,
+  |} | void,
+  action: {|
+    type: string,
+  |}
+) => KeypadState;
+declare export default typeof keypadReducer;

package/dist/store/layout-reducer.d.ts

@@ -0,0 +1,21 @@
+import type { LayoutState } from "./types";
+declare const layoutReducer: (state: {
+    readonly gridDimensions: {
+        readonly numRows: number;
+        readonly numColumns: number;
+        readonly numMaxVisibleRows: number;
+        readonly numPages: number;
+    };
+    readonly buttonDimensions: {
+        readonly widthPx: 48;
+        readonly heightPx: 48;
+    };
+    readonly pageDimensions: {
+        readonly pageWidthPx: 0;
+        readonly pageHeightPx: 0;
+    };
+    readonly layoutMode: "FULLSCREEN";
+    readonly paginationEnabled: false;
+    readonly navigationPadEnabled: false;
+} | undefined, action: any) => LayoutState;
+export default layoutReducer;

package/dist/store/layout-reducer.js.flow

@@ -0,0 +1,30 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import type { LayoutState } from "./types";
+declare var layoutReducer: (
+  state: {|
+    +gridDimensions: {|
+      +numRows: number,
+      +numColumns: number,
+      +numMaxVisibleRows: number,
+      +numPages: number,
+    |},
+    +buttonDimensions: {|
+      +widthPx: 48,
+      +heightPx: 48,
+    |},
+    +pageDimensions: {|
+      +pageWidthPx: 0,
+      +pageHeightPx: 0,
+    |},
+    +layoutMode: "FULLSCREEN",
+    +paginationEnabled: false,
+    +navigationPadEnabled: false,
+  |} | void,
+  action: any
+) => LayoutState;
+declare export default typeof layoutReducer;

package/dist/store/pager-reducer.d.ts

@@ -0,0 +1,13 @@
+import VelocityTracker from "../components/velocity-tracker";
+import type { PagerState } from "./types";
+declare const pagerReducer: (state: {
+    readonly animateToPosition: false;
+    readonly currentPage: number;
+    readonly dx: 0;
+    readonly numPages: number;
+    readonly pageWidthPx: 0;
+    readonly velocityTracker: VelocityTracker;
+} | undefined, action: {
+    type: string;
+}) => PagerState;
+export default pagerReducer;

package/dist/store/pager-reducer.js.flow

@@ -0,0 +1,22 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import VelocityTracker from "../components/velocity-tracker";
+import type { PagerState } from "./types";
+declare var pagerReducer: (
+  state: {|
+    +animateToPosition: false,
+    +currentPage: number,
+    +dx: 0,
+    +numPages: number,
+    +pageWidthPx: 0,
+    +velocityTracker: VelocityTracker,
+  |} | void,
+  action: {|
+    type: string,
+  |}
+) => PagerState;
+declare export default typeof pagerReducer;

package/dist/store/shared.d.ts

@@ -0,0 +1,6 @@
+declare const defaultKeypadType: "EXPRESSION";
+declare const keypadForType: {
+    readonly FRACTION: import("../types").KeypadLayout;
+    readonly EXPRESSION: import("../types").KeypadLayout;
+};
+export { keypadForType, defaultKeypadType };

package/dist/store/shared.js.flow

@@ -0,0 +1,13 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as $Flowgen$Import$_2e__2e__2f_types from "../types";
+declare var defaultKeypadType: "EXPRESSION";
+declare var keypadForType: {|
+  +FRACTION: $Flowgen$Import$_2e__2e__2f_types.KeypadLayout,
+  +EXPRESSION: $Flowgen$Import$_2e__2e__2f_types.KeypadLayout,
+|};
+declare export { keypadForType, defaultKeypadType };

package/dist/store/types.d.ts

@@ -0,0 +1,57 @@
+import GestureManager from "../components/gesture-manager";
+import VelocityTracker from "../components/velocity-tracker";
+import { LayoutModes } from "../consts";
+import type { Key } from "../data/keys";
+import type { Cursor, KeyHandler, Popover, Echo } from "../types";
+export interface InputState {
+    keyHandler: KeyHandler | null;
+    cursor: Cursor | undefined;
+}
+export interface KeypadState {
+    extraKeys: ReadonlyArray<string>;
+    keypadType: any;
+    active: boolean;
+}
+export interface PagerState {
+    animateToPosition: boolean;
+    currentPage: number;
+    dx: number;
+    numPages: number;
+    pageWidthPx: number;
+    velocityTracker: VelocityTracker;
+}
+export interface GestureState {
+    popover: Popover | null;
+    focus: Key | null;
+    gestureManager: GestureManager;
+}
+export interface EchoState {
+    echoes: ReadonlyArray<Echo>;
+}
+export interface LayoutState {
+    gridDimensions: {
+        numRows: number;
+        numColumns: number;
+        numMaxVisibleRows: number;
+        numPages: number;
+    };
+    buttonDimensions: {
+        widthPx: number;
+        heightPx: number;
+    };
+    pageDimensions: {
+        pageWidthPx: number;
+        pageHeightPx: number;
+    };
+    layoutMode: keyof typeof LayoutModes;
+    paginationEnabled: boolean;
+    navigationPadEnabled: boolean;
+}
+export interface State {
+    input: InputState;
+    keypad: KeypadState;
+    pager: PagerState;
+    gestures: GestureState;
+    echoes: EchoState;
+    layout: LayoutState;
+}

package/dist/store/types.js.flow

@@ -0,0 +1,63 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import GestureManager from "../components/gesture-manager";
+import VelocityTracker from "../components/velocity-tracker";
+import { LayoutModes } from "../consts";
+import type { Key } from "../data/keys";
+import type { Cursor, KeyHandler, Popover, Echo } from "../types";
+export interface InputState {
+  keyHandler: KeyHandler | null;
+  cursor: Cursor | void;
+}
+export interface KeypadState {
+  extraKeys: $ReadOnlyArray<string>;
+  keypadType: any;
+  active: boolean;
+}
+export interface PagerState {
+  animateToPosition: boolean;
+  currentPage: number;
+  dx: number;
+  numPages: number;
+  pageWidthPx: number;
+  velocityTracker: VelocityTracker;
+}
+export interface GestureState {
+  popover: Popover | null;
+  focus: Key | null;
+  gestureManager: GestureManager;
+}
+export interface EchoState {
+  echoes: $ReadOnlyArray<Echo>;
+}
+export interface LayoutState {
+  gridDimensions: {|
+    numRows: number,
+    numColumns: number,
+    numMaxVisibleRows: number,
+    numPages: number,
+  |};
+  buttonDimensions: {|
+    widthPx: number,
+    heightPx: number,
+  |};
+  pageDimensions: {|
+    pageWidthPx: number,
+    pageHeightPx: number,
+  |};
+  layoutMode: $Keys<typeof LayoutModes>;
+  paginationEnabled: boolean;
+  navigationPadEnabled: boolean;
+}
+export interface State {
+  input: InputState;
+  keypad: KeypadState;
+  pager: PagerState;
+  gestures: GestureState;
+  echoes: EchoState;
+  layout: LayoutState;
+}

package/dist/types.d.ts

@@ -0,0 +1,50 @@
+import { BorderDirections, EchoAnimationTypes, KeyTypes, IconTypes } from "./consts";
+import type { CursorContext } from "./components/input/cursor-contexts";
+import type { KeypadType } from "./consts";
+import type { Key } from "./data/keys";
+export type Border = Partial<Array<keyof typeof BorderDirections>>;
+export type Bound = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+    height: number;
+    width: number;
+};
+export type Popover = {
+    parentId: Key;
+    bounds: Partial<Bound>;
+    childKeyIds: Array<Key>;
+};
+export type Echo = {
+    animationId: string;
+    animationType: keyof typeof EchoAnimationTypes;
+    borders: Border;
+    id: Key;
+    initialBounds: DOMRect;
+};
+export type Icon = {
+    type: keyof typeof IconTypes;
+    data: string;
+};
+export type KeyConfig = {
+    ariaLabel: string;
+    id: Key;
+    type: keyof typeof KeyTypes;
+    childKeyIds: Array<Key>;
+    icon: Icon;
+};
+export type KeypadConfiguration = {
+    keypadType: KeypadType;
+    extraKeys?: ReadonlyArray<Key>;
+};
+export type KeyHandler = (key: Key) => Cursor;
+export type Cursor = {
+    context: CursorContext;
+};
+export type KeypadLayout = {
+    rows: number;
+    columns: number;
+    numPages: number;
+    maxVisibleRows: number;
+};

package/dist/types.js.flow

@@ -0,0 +1,61 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import {
+  BorderDirections,
+  EchoAnimationTypes,
+  KeyTypes,
+  IconTypes,
+} from "./consts";
+import type { CursorContext } from "./components/input/cursor-contexts";
+import type { KeypadType } from "./consts";
+import type { Key } from "./data/keys";
+export type Border = $Rest<Array<$Keys<typeof BorderDirections>>, {}>;
+export type Bound = {|
+  top: number,
+  right: number,
+  bottom: number,
+  left: number,
+  height: number,
+  width: number,
+|};
+export type Popover = {|
+  parentId: Key,
+  bounds: $Rest<Bound, {}>,
+  childKeyIds: Array<Key>,
+|};
+export type Echo = {|
+  animationId: string,
+  animationType: $Keys<typeof EchoAnimationTypes>,
+  borders: Border,
+  id: Key,
+  initialBounds: DOMRect,
+|};
+export type Icon = {|
+  type: $Keys<typeof IconTypes>,
+  data: string,
+|};
+export type KeyConfig = {|
+  ariaLabel: string,
+  id: Key,
+  type: $Keys<typeof KeyTypes>,
+  childKeyIds: Array<Key>,
+  icon: Icon,
+|};
+export type KeypadConfiguration = {|
+  keypadType: KeypadType,
+  extraKeys?: $ReadOnlyArray<Key>,
+|};
+export type KeyHandler = (key: Key) => Cursor;
+export type Cursor = {|
+  context: CursorContext,
+|};
+export type KeypadLayout = {|
+  rows: number,
+  columns: number,
+  numPages: number,
+  maxVisibleRows: number,
+|};

package/package.json

@@ -3,7 +3,7 @@
     "description": "Khan Academy's new expression editor for the mobile web.",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "0.7.2",
+    "version": "1.0.0",
     "publishConfig": {
         "access": "public"
     },

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

@@ -1,3 +1,5 @@
+import type {KeypadConfiguration, KeyHandler} from "../types";
+
 // naming convention: verb + noun
 // the noun should be one of the other properties in the object that's
 // being dispatched
@@ -16,17 +18,15 @@ export const activateKeypad = () => {
 
 /**
  * Configure the keypad with the provided configuration parameters.
- *
- * See: `prop-types.js#keypadConfigurationPropType`.
  */
-export const configureKeypad = (configuration) => {
+export const configureKeypad = (configuration: KeypadConfiguration) => {
     return {
         type: "ConfigureKeypad",
         configuration,
     };
 };
 
-export const setPageSize = (pageWidthPx, pageHeightPx) => {
+export const setPageSize = (pageWidthPx: number, pageHeightPx: number) => {
     return {
         type: "SetPageSize",
         pageWidthPx,
@@ -42,7 +42,7 @@ export const removeEcho = (animationId) => {
 };
 
 // Input-related actions.
-export const setKeyHandler = (keyHandler) => {
+export const setKeyHandler = (keyHandler: KeyHandler) => {
     return {
         type: "SetKeyHandler",
         keyHandler,

package/src/components/__tests__/{gesture-state-machine_test.js → gesture-state-machine.test.ts}

@@ -1,5 +1,7 @@
 import GestureStateMachine from "../gesture-state-machine";
 
+import type {Handlers} from "../gesture-state-machine";
+
 const swipeThresholdPx = 5;
 const longPressWaitTimeMs = 5;
 const holdIntervalMs = 5;
@@ -20,10 +22,11 @@ const eventTrackers = (buffer) => {
     ];
     callbackNames.forEach((callbackName) => {
         handlers[callbackName] = function () {
+            // eslint-disable-next-line prefer-rest-params
             buffer.push([callbackName, ...arguments]);
         };
     });
-    return handlers;
+    return handlers as Handlers;
 };
 
 // Arbitrary node IDs (representative of arbitrary keys) to be used in testing.
@@ -48,6 +51,7 @@ describe("GestureStateMachine", () => {
                 longPressWaitTimeMs,
                 holdIntervalMs,
             },
+            // @ts-expect-error TS2322
             [NodeIds.swipeDisabled],
             [NodeIds.multiPressable],
         );

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

@@ -8,7 +8,6 @@ describe("<TwoPageKeyPage />", () => {
         // Arrange
         const wrapper = mount(
             <TwoPageKeypad
-                paginationEnabled={true}
                 currentPage={1}
                 leftPage={<p>Left Page</p>}
                 rightPage={<p>Right Page</p>}
@@ -24,7 +23,6 @@ describe("<TwoPageKeyPage />", () => {
         // Arrange
         const wrapper = mount(
             <TwoPageKeypad
-                paginationEnabled={true}
                 currentPage={0}
                 leftPage={<p>Left Page</p>}
                 rightPage={<p>Right Page</p>}

package/src/components/{corner-decal.js → corner-decal.tsx}

@@ -3,18 +3,19 @@
  */
 
 import {StyleSheet} from "aphrodite";
-import PropTypes from "prop-types";
 import * as React from "react";
 
 import {View} from "../fake-react-native-web/index";
 
 import {offBlack} from "./common-style";
 
-class CornerDecal extends React.Component {
-    static propTypes = {
-        style: PropTypes.any,
-    };
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
+type Props = {
+    style: StyleType;
+};
+
+class CornerDecal extends React.Component<Props> {
     render() {
         const {style} = this.props;