@khanacademy/math-input 1.0.0 → 2.0.0

package/src/enums.ts

@@ -0,0 +1,74 @@
+/**
+ * Constants that are shared between multiple files.
+ */
+
+export enum KeypadType {
+    FRACTION = "FRACTION",
+    EXPRESSION = "EXPRESSION",
+}
+
+export enum KeyType {
+    EMPTY = "EMPTY",
+    // For numerals, variables, and any other characters that themselves
+    // compose 'values'.
+    VALUE = "VALUE",
+    // For buttons that insert or adjust math in an input.
+    OPERATOR = "OPERATOR",
+    // For buttons that move the cursor in an input (including via
+    // deletion).
+    INPUT_NAVIGATION = "INPUT_NAVIGATION",
+    // For buttons that modify the broader keypad state (e.g., by changing
+    // the visible pane).
+    KEYPAD_NAVIGATION = "KEYPAD_NAVIGATION",
+    // For buttons that house multiple buttons and have no action
+    // themselves.
+    MANY = "MANY",
+    // For the echo animation that appears on press.
+    ECHO = "ECHO",
+}
+
+export enum DeviceOrientation {
+    LANDSCAPE = "LANDSCAPE",
+    PORTRAIT = "PORTRAIT",
+}
+
+export enum DeviceType {
+    PHONE = "PHONE",
+    TABLET = "TABLET",
+}
+
+export enum LayoutMode {
+    FULLSCREEN = "FULLSCREEN",
+    COMPACT = "COMPACT",
+}
+
+export enum BorderDirection {
+    LEFT = "LEFT",
+    BOTTOM = "BOTTOM",
+}
+
+export const BorderStyles: {
+    [style: string]: ReadonlyArray<BorderDirection>;
+} = {
+    LEFT: [BorderDirection.LEFT],
+    BOTTOM: [BorderDirection.BOTTOM],
+    ALL: [BorderDirection.LEFT, BorderDirection.BOTTOM],
+    NONE: [],
+};
+
+export enum IconType {
+    MATH = "MATH",
+    SVG = "SVG",
+    TEXT = "TEXT",
+}
+
+export enum DecimalSeparator {
+    COMMA = "COMMA",
+    PERIOD = "PERIOD",
+}
+
+export enum EchoAnimationType {
+    SLIDE_AND_FADE = "SLIDE_AND_FADE",
+    FADE_ONLY = "FADE_ONLY",
+    LONG_FADE_ONLY = "LONG_FADE_ONLY",
+}

package/src/index.ts

@@ -4,16 +4,10 @@
 
 import "../less/main.less";
 
+export {CursorContext} from "./components/input/cursor-contexts";
 export {default as KeypadInput} from "./components/input/math-input";
 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";
-
-import * as CursorContexts from "./components/input/cursor-contexts";
-
-export {CursorContexts};
-
-export type {KeypadType, KeyType} from "./consts";
-export type {Key} from "./data/keys";
-export type {CursorContext} from "./components/input/cursor-contexts";
+export {default as Keys} from "./data/keys";
+export {KeyType, KeypadType} from "./enums";

package/src/math-input.stories.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+
+import {Keypad, KeypadInput, KeypadType} from "./index";
+
+export default {
+    title: "Full MathInput",
+};
+
+export const Basic = () => {
+    const [value, setValue] = React.useState("");
+    const [keypadElement, setKeypadElement] = React.useState<any>(null);
+    const [keypadType, setKeypadType] = React.useState<KeypadType>(
+        KeypadType.FRACTION,
+    );
+
+    React.useEffect(() => {
+        keypadElement?.configure({
+            keypadType: keypadType,
+            extraKeys: ["x", "y", "PI", "THETA"],
+        });
+    }, [keypadElement, keypadType]);
+
+    function handleChangeKeypadType() {
+        setKeypadType(
+            keypadType === KeypadType.FRACTION
+                ? KeypadType.EXPRESSION
+                : KeypadType.FRACTION,
+        );
+    }
+
+    return (
+        <div>
+            <div style={{padding: "1rem 0"}}>
+                <button onClick={handleChangeKeypadType}>
+                    {`Use ${
+                        keypadType === KeypadType.FRACTION
+                            ? "Expression"
+                            : "Fraction"
+                    } Keypad`}
+                </button>
+            </div>
+
+            <KeypadInput
+                value={value}
+                keypadElement={keypadElement}
+                onChange={(newValue, callback) => {
+                    setValue(newValue);
+                    callback();
+                }}
+                onFocus={() => {
+                    keypadElement?.activate();
+                }}
+                onBlur={() => {
+                    keypadElement?.dismiss();
+                }}
+            />
+
+            <Keypad
+                onElementMounted={(node) => {
+                    if (node && !keypadElement) {
+                        setKeypadElement(node);
+                    }
+                }}
+            />
+        </div>
+    );
+};

package/src/store/actions.ts

@@ -0,0 +1,179 @@
+import Keys from "../data/keys";
+
+import type {
+    KeypadConfiguration,
+    KeyHandler,
+    Cursor,
+    ActiveNodesObj,
+    Border,
+} from "../types";
+
+// naming convention: verb + noun
+// the noun should be one of the other properties in the object that's
+// being dispatched
+
+type DismissKeypadAction = {
+    type: "DismissKeypad";
+};
+
+export const dismissKeypad = (): DismissKeypadAction => {
+    return {
+        type: "DismissKeypad",
+    };
+};
+
+type ActivateKeypadAction = {
+    type: "ActivateKeypad";
+};
+
+export const activateKeypad = (): ActivateKeypadAction => {
+    return {
+        type: "ActivateKeypad",
+    };
+};
+
+/**
+ * Configure the keypad with the provided configuration parameters.
+ */
+type ConfigureKeypadAction = {
+    type: "ConfigureKeypad";
+    configuration: KeypadConfiguration;
+};
+
+export const configureKeypad = (
+    configuration: KeypadConfiguration,
+): ConfigureKeypadAction => {
+    return {
+        type: "ConfigureKeypad",
+        configuration,
+    };
+};
+
+type SetPageSizeAction = {
+    type: "SetPageSize";
+    pageWidthPx: number;
+    pageHeightPx: number;
+};
+
+export const setPageSize = (
+    pageWidthPx: number,
+    pageHeightPx: number,
+): SetPageSizeAction => {
+    return {
+        type: "SetPageSize",
+        pageWidthPx,
+        pageHeightPx,
+    };
+};
+
+type RemoveEchoAction = {
+    type: "RemoveEcho";
+    animationId: string;
+};
+
+export const removeEcho = (animationId: string): RemoveEchoAction => {
+    return {
+        type: "RemoveEcho",
+        animationId,
+    };
+};
+
+// Input-related actions.
+type SetKeyHandlerAction = {
+    type: "SetKeyHandler";
+    keyHandler: KeyHandler;
+};
+
+export const setKeyHandler = (keyHandler: KeyHandler): SetKeyHandlerAction => {
+    return {
+        type: "SetKeyHandler",
+        keyHandler,
+    };
+};
+
+type SetCursorAction = {
+    type: "SetCursor";
+    cursor: Cursor;
+};
+
+export const setCursor = (cursor: Cursor): SetCursorAction => {
+    return {
+        type: "SetCursor",
+        cursor,
+    };
+};
+
+// Gesture actions
+type OnSwipeChangeAction = {
+    type: "OnSwipeChange";
+    dx: number;
+};
+
+export const onSwipeChange = (dx: number): OnSwipeChangeAction => {
+    return {
+        type: "OnSwipeChange",
+        dx,
+    };
+};
+
+type OnSwipeEndAction = {
+    type: "OnSwipeEnd";
+    dx: number;
+};
+
+export const onSwipeEnd = (dx: number): OnSwipeEndAction => {
+    return {
+        type: "OnSwipeEnd",
+        dx,
+    };
+};
+
+type SetActiveNodesAction = {
+    type: "SetActiveNodes";
+    activeNodes: any;
+};
+
+export const setActiveNodes = (
+    activeNodes: ActiveNodesObj,
+): SetActiveNodesAction => {
+    return {
+        type: "SetActiveNodes",
+        activeNodes,
+    };
+};
+
+type PressKeyAction = {
+    type: "PressKey";
+    key: Keys;
+    borders: Border;
+    initialBounds: DOMRect;
+    inPopover: boolean;
+};
+
+export const pressKey = (
+    key: Keys,
+    borders: Border,
+    initialBounds: DOMRect,
+    inPopover: any,
+): PressKeyAction => {
+    return {
+        type: "PressKey",
+        key,
+        borders,
+        initialBounds,
+        inPopover,
+    };
+};
+
+export type Action =
+    | DismissKeypadAction
+    | ActivateKeypadAction
+    | ConfigureKeypadAction
+    | SetPageSizeAction
+    | RemoveEchoAction
+    | SetKeyHandlerAction
+    | SetCursorAction
+    | OnSwipeChangeAction
+    | OnSwipeEndAction
+    | SetActiveNodesAction
+    | PressKeyAction;

package/src/store/echo-reducer.ts

@@ -1,6 +1,7 @@
-import {EchoAnimationTypes, KeyTypes} from "../consts";
 import KeyConfigs from "../data/key-configs";
+import {EchoAnimationType, KeyType} from "../enums";
 
+import type {Action} from "./actions";
 import type {EchoState} from "./types";
 
 // Used to generate unique animation IDs for the echo animations. The actual
@@ -11,7 +12,10 @@ const initialEchoState = {
     echoes: [],
 } as const;
 
-const echoReducer = function (state = initialEchoState, action): EchoState {
+const echoReducer = function (
+    state: EchoState = initialEchoState,
+    action: Action,
+): EchoState {
     switch (action.type) {
         case "PressKey":
             const keyConfig = KeyConfigs[action.key];
@@ -19,8 +23,8 @@ const echoReducer = function (state = initialEchoState, action): EchoState {
             // Add in the echo animation if the user performs a math
             // operation.
             if (
-                keyConfig.type === KeyTypes.VALUE ||
-                keyConfig.type === KeyTypes.OPERATOR
+                keyConfig.type === KeyType.VALUE ||
+                keyConfig.type === KeyType.OPERATOR
             ) {
                 return {
                     ...state,
@@ -29,8 +33,8 @@ const echoReducer = function (state = initialEchoState, action): EchoState {
                         {
                             animationId: "" + _lastAnimationId++,
                             animationType: action.inPopover
-                                ? EchoAnimationTypes.LONG_FADE_ONLY
-                                : EchoAnimationTypes.FADE_ONLY,
+                                ? EchoAnimationType.LONG_FADE_ONLY
+                                : EchoAnimationType.FADE_ONLY,
                             borders: action.borders,
                             id: keyConfig.id,
                             initialBounds: action.initialBounds,
@@ -42,7 +46,6 @@ const echoReducer = function (state = initialEchoState, action): EchoState {
 
         case "RemoveEcho":
             const remainingEchoes = state.echoes.filter((echo) => {
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'animationId' does not exist on type 'never'.
                 return echo.animationId !== action.animationId;
             });
             return {

package/src/store/index.ts

@@ -3,6 +3,7 @@ import * as Redux from "redux";
 import GestureManager from "../components/gesture-manager";
 import Keys from "../data/keys";
 
+import {onSwipeChange, onSwipeEnd, setActiveNodes, pressKey} from "./actions";
 import echoReducer from "./echo-reducer";
 import inputReducer from "./input-reducer";
 import keypadReducer from "./keypad-reducer";
@@ -10,6 +11,8 @@ import layoutReducer from "./layout-reducer";
 import pagerReducer from "./pager-reducer";
 import {defaultKeypadType, keypadForType} from "./shared";
 
+import type {LayoutProps, ActiveNodesObj} from "../types";
+import type {Action} from "./actions";
 import type {GestureState} from "./types";
 
 export const createStore = () => {
@@ -21,31 +24,28 @@ export const createStore = () => {
                 swipeEnabled,
             },
             {
-                onSwipeChange: (dx) => {
-                    store.dispatch({
-                        type: "OnSwipeChange",
-                        dx,
-                    });
+                onSwipeChange: (dx: number) => {
+                    store.dispatch(onSwipeChange(dx));
                 },
-                onSwipeEnd: (dx) => {
-                    store.dispatch({
-                        type: "OnSwipeEnd",
-                        dx,
-                    });
+                onSwipeEnd: (dx: number) => {
+                    store.dispatch(onSwipeEnd(dx));
                 },
-                onActiveNodesChanged: (activeNodes) => {
-                    store.dispatch({
-                        type: "SetActiveNodes",
-                        activeNodes,
-                    });
+                onActiveNodesChanged: (activeNodes: ActiveNodesObj) => {
+                    store.dispatch(setActiveNodes(activeNodes));
                 },
-                onClick: (key, layoutProps, inPopover) => {
-                    store.dispatch({
-                        type: "PressKey",
-                        key,
-                        ...layoutProps,
-                        inPopover,
-                    });
+                onClick: (
+                    key: Keys,
+                    layoutProps: LayoutProps,
+                    inPopover: boolean,
+                ) => {
+                    store.dispatch(
+                        pressKey(
+                            key,
+                            layoutProps.borders,
+                            layoutProps.initialBounds,
+                            inPopover,
+                        ),
+                    );
                 },
             },
             [],
@@ -62,8 +62,8 @@ export const createStore = () => {
     } as const;
 
     const gestureReducer = function (
-        state = initialGestureState,
-        action: any,
+        state: GestureState = initialGestureState,
+        action: Action,
     ): GestureState {
         switch (action.type) {
             case "DismissKeypad":

package/src/store/input-reducer.ts

@@ -1,8 +1,9 @@
-import * as CursorContexts from "../components/input/cursor-contexts";
-import {KeyTypes} from "../consts";
+import {CursorContext} from "../components/input/cursor-contexts";
 import KeyConfigs from "../data/key-configs";
+import {KeyType} from "../enums";
 
 import type {Cursor, KeyHandler} from "../types";
+import type {Action} from "./actions";
 import type {InputState} from "./types";
 
 const initialInputState: {
@@ -11,13 +12,13 @@ const initialInputState: {
 } = {
     keyHandler: null,
     cursor: {
-        context: CursorContexts.NONE,
+        context: CursorContext.NONE,
     },
 };
 
 const inputReducer = function (
-    state = initialInputState,
-    action: any,
+    state: InputState = initialInputState,
+    action: Action,
 ): InputState {
     switch (action.type) {
         case "SetKeyHandler":
@@ -28,7 +29,7 @@ const inputReducer = function (
 
         case "PressKey":
             const keyConfig = KeyConfigs[action.key];
-            if (keyConfig.type !== KeyTypes.KEYPAD_NAVIGATION) {
+            if (keyConfig.type !== KeyType.KEYPAD_NAVIGATION) {
                 // This is probably an anti-pattern but it works for the
                 // case where we don't actually control the state but we
                 // still want to communicate with the other object

package/src/store/keypad-reducer.ts

@@ -3,6 +3,7 @@ import Keys from "../data/keys";
 
 import {defaultKeypadType} from "./shared";
 
+import type {Action} from "./actions";
 import type {KeypadState} from "./types";
 
 const initialKeypadState = {
@@ -12,10 +13,8 @@ const initialKeypadState = {
 } as const;
 
 const keypadReducer = function (
-    state = initialKeypadState,
-    action: {
-        type: string;
-    },
+    state: KeypadState = initialKeypadState,
+    action: Action,
 ): KeypadState {
     switch (action.type) {
         case "DismissKeypad":
@@ -35,12 +34,10 @@ const keypadReducer = function (
                 ...state,
                 // Default `extraKeys` to the empty array.
                 extraKeys: [],
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'configuration' does not exist on type '{ type: string; }'.
                 ...action.configuration,
             };
 
         case "PressKey":
-            // @ts-expect-error [FEI-5003] - TS2339 - Property 'key' does not exist on type '{ type: string; }'.
             const keyConfig = KeyConfigs[action.key];
             // NOTE(charlie): Our keypad system operates by triggering key
             // presses with key IDs in a dumb manner, such that the keys

package/src/store/layout-reducer.ts

@@ -1,9 +1,10 @@
 import {tabletCutoffPx} from "../components/common-style";
 import {computeLayoutParameters} from "../components/compute-layout-parameters";
-import {DeviceOrientations, DeviceTypes, LayoutModes} from "../consts";
+import {DeviceOrientation, DeviceType, LayoutMode} from "../enums";
 
 import {defaultKeypadType, keypadForType} from "./shared";
 
+import type {Action} from "./actions";
 import type {LayoutState} from "./types";
 
 const initialLayoutState = {
@@ -21,7 +22,7 @@ const initialLayoutState = {
         pageWidthPx: 0,
         pageHeightPx: 0,
     },
-    layoutMode: LayoutModes.FULLSCREEN,
+    layoutMode: LayoutMode.FULLSCREEN,
     paginationEnabled: false,
     navigationPadEnabled: false,
 } as const;
@@ -47,19 +48,19 @@ const layoutParametersForDimensions = (
     // Determine the device type and orientation.
     const deviceOrientation =
         pageWidthPx > pageHeightPx
-            ? DeviceOrientations.LANDSCAPE
-            : DeviceOrientations.PORTRAIT;
+            ? DeviceOrientation.LANDSCAPE
+            : DeviceOrientation.PORTRAIT;
     const deviceType =
         Math.min(pageWidthPx, pageHeightPx) > tabletCutoffPx
-            ? DeviceTypes.TABLET
-            : DeviceTypes.PHONE;
+            ? DeviceType.TABLET
+            : DeviceType.PHONE;
 
     // Using that information, make some decisions (or assumptions)
     // about the resulting layout.
-    const navigationPadEnabled = deviceType === DeviceTypes.TABLET;
+    const navigationPadEnabled = deviceType === DeviceType.TABLET;
     const paginationEnabled =
-        deviceType === DeviceTypes.PHONE &&
-        deviceOrientation === DeviceOrientations.PORTRAIT;
+        deviceType === DeviceType.PHONE &&
+        deviceOrientation === DeviceOrientation.PORTRAIT;
 
     const deviceInfo = {deviceOrientation, deviceType} as const;
     const layoutOptions = {
@@ -90,8 +91,8 @@ const layoutParametersForDimensions = (
 };
 
 const layoutReducer = function (
-    state = initialLayoutState,
-    action: any,
+    state: LayoutState = initialLayoutState,
+    action: Action,
 ): LayoutState {
     switch (action.type) {
         case "ConfigureKeypad":