@khanacademy/math-input 15.1.0 → 16.0.0

package/src/components/keypad-legacy/store/keypad-reducer.ts

@@ -1,58 +0,0 @@
-import KeyConfigs from "../../../data/key-configs";
-
-import {defaultKeypadType} from "./shared";
-
-import type {Action} from "./actions";
-import type {KeypadState} from "./types";
-
-const initialKeypadState = {
-    extraKeys: ["x", "y", "THETA", "PI"] as const,
-    keypadType: defaultKeypadType,
-    active: false,
-} as const;
-
-const keypadReducer = function (
-    state: KeypadState = initialKeypadState,
-    action: Action,
-): KeypadState {
-    switch (action.type) {
-        case "DismissKeypad":
-            return {
-                ...state,
-                active: false,
-            };
-
-        case "ActivateKeypad":
-            return {
-                ...state,
-                active: true,
-            };
-
-        case "ConfigureKeypad":
-            return {
-                ...state,
-                // Default `extraKeys` to the empty array.
-                extraKeys: [],
-                ...action.configuration,
-            };
-
-        case "PressKey":
-            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
-            // don't know what they can do--instead, the store is
-            // responsible for interpreting key presses and triggering the
-            // right actions when they occur. Hence, we figure off a
-            // dismissal here rather than dispatching a dismiss action in
-            // the first place.
-            if (keyConfig.id === "DISMISS") {
-                return keypadReducer(state, {type: "DismissKeypad"});
-            }
-            return state;
-
-        default:
-            return state;
-    }
-};
-
-export default keypadReducer;

package/src/components/keypad-legacy/store/layout-reducer.test.ts

@@ -1,171 +0,0 @@
-import {KeypadType} from "../../../enums";
-
-import {configureKeypad, setPageSize} from "./actions";
-import layoutReducer from "./layout-reducer";
-
-function initState() {
-    // This is just simulating the Redux action that initializes state
-    // @ts-expect-error TS2345
-    let state = layoutReducer(undefined, {type: "@redux-init"});
-    state = layoutReducer(
-        state,
-        configureKeypad({keypadType: KeypadType.EXPRESSION}),
-    );
-    return state;
-}
-
-describe("layout reducer", () => {
-    it("enables pagination on small screens portrait (iPhone)", () => {
-        // Arrange
-        let state = initState();
-
-        // Act
-        state = layoutReducer(state, setPageSize(375, 812, 375, 812));
-
-        // Assert
-        expect(state.paginationEnabled).toBe(true);
-    });
-
-    it("does not enable navigation pad on small screens portrait (iPhone)", () => {
-        // Arrange
-        let state = initState();
-
-        // Act
-        state = layoutReducer(state, setPageSize(375, 812, 375, 812));
-
-        // Assert
-        expect(state.navigationPadEnabled).toBe(false);
-    });
-
-    it("does not enable pagination on medium screens portrait (iPad Mini)", () => {
-        // Arrange
-        let state = initState();
-
-        // Act
-        state = layoutReducer(state, setPageSize(768, 1024, 768, 1024));
-
-        // Assert
-        expect(state.paginationEnabled).toBe(false);
-    });
-
-    it("does not enable navigation pad on medium screens portrait (iPad Mini)", () => {
-        // Arrange
-        let state = initState();
-
-        // Act
-        state = layoutReducer(state, setPageSize(768, 1024, 768, 1024));
-
-        // Assert
-        expect(state.navigationPadEnabled).toBe(false);
-    });
-
-    it("does not enable pagination on large screens portrait (iPad)", () => {
-        // Arrange
-        let state = initState();
-
-        // Act
-        state = layoutReducer(state, setPageSize(810, 1080, 810, 1080));
-
-        // Assert
-        expect(state.paginationEnabled).toBe(false);
-    });
-
-    it("does enable navigation pad on large screens portrait (iPad)", () => {
-        // Arrange
-        let state = initState();
-
-        // Act
-        state = layoutReducer(state, setPageSize(810, 1080, 810, 1080));
-
-        // Assert
-        expect(state.navigationPadEnabled).toBe(true);
-    });
-
-    it("does not enable pagination on small screens landscape (iPhone)", () => {
-        // Arrange
-        let state = initState();
-
-        // Act
-        state = layoutReducer(state, setPageSize(812, 375, 812, 375));
-
-        // Assert
-        expect(state.paginationEnabled).toBe(false);
-    });
-
-    it("does enable navigation pad on small screens landscape (iPhone)", () => {
-        // Arrange
-        let state = initState();
-
-        // Act
-        state = layoutReducer(state, setPageSize(812, 375, 812, 375));
-
-        // Assert
-        expect(state.navigationPadEnabled).toBe(true);
-    });
-
-    it("does not enable pagination on medium screens landscape (iPad Mini)", () => {
-        // Arrange
-        let state = initState();
-
-        // Act
-        state = layoutReducer(state, setPageSize(1024, 768, 1024, 768));
-
-        // Assert
-        expect(state.paginationEnabled).toBe(false);
-    });
-
-    it("does enable navigation pad on medium screens landscape (iPad Mini)", () => {
-        // Arrange
-        let state = initState();
-
-        // Act
-        state = layoutReducer(state, setPageSize(1024, 768, 1024, 768));
-
-        // Assert
-        expect(state.navigationPadEnabled).toBe(true);
-    });
-
-    it("does not enable pagination on large screens landscape (iPad)", () => {
-        // Arrange
-        let state = initState();
-
-        // Act
-        state = layoutReducer(state, setPageSize(1080, 810, 1080, 810));
-
-        // Assert
-        expect(state.paginationEnabled).toBe(false);
-    });
-
-    it("does enable navigation pad on large screens landscape (iPad)", () => {
-        // Arrange
-        let state = initState();
-
-        // Act
-        state = layoutReducer(state, setPageSize(1080, 810, 1080, 810));
-
-        // Assert
-        expect(state.navigationPadEnabled).toBe(true);
-    });
-
-    it("does enable pagination in small containers on big screens", () => {
-        // Arrange
-        let state = initState();
-
-        // Act
-        state = layoutReducer(state, setPageSize(2000, 2000, 300, 300));
-
-        // Assert
-        expect(state.paginationEnabled).toBe(true);
-    });
-
-    it("does not enable navigation in small containers on big screens", () => {
-        // Arrange
-        let state = initState();
-
-        // Act
-        state = layoutReducer(state, setPageSize(2000, 2000, 300, 300));
-
-        // Assert
-        expect(state.navigationPadEnabled).toBe(false);
-    });
-});

package/src/components/keypad-legacy/store/layout-reducer.ts

@@ -1,129 +0,0 @@
-import {DeviceOrientation, LayoutMode} from "../../../enums";
-import {computeLayoutParameters} from "../compute-layout-parameters";
-
-import {defaultKeypadType, keypadForType} from "./shared";
-
-import type {Action} from "./actions";
-import type {GridDimensions, LayoutState, WidthHeight} from "./types";
-
-const expandedViewThreshold = 682;
-const navigationViewThreshold = 800;
-
-const initialLayoutState: LayoutState = {
-    gridDimensions: {
-        numRows: keypadForType[defaultKeypadType].rows,
-        numColumns: keypadForType[defaultKeypadType].columns,
-        numMaxVisibleRows: keypadForType[defaultKeypadType].maxVisibleRows,
-        numPages: keypadForType[defaultKeypadType].numPages,
-    },
-    buttonDimensions: {
-        width: 48,
-        height: 48,
-    },
-    pageDimensions: {
-        width: 0,
-        height: 0,
-    },
-    containerDimensions: {
-        width: 0,
-        height: 0,
-    },
-    layoutMode: LayoutMode.FULLSCREEN,
-    paginationEnabled: false,
-    navigationPadEnabled: false,
-} as const;
-
-/**
- * Compute the additional layout state based on the provided page and grid
- * dimensions.
- */
-const layoutParametersForDimensions = (
-    pageDimensions: WidthHeight,
-    containerDimensions: WidthHeight,
-    gridDimensions: GridDimensions,
-) => {
-    // Determine the device type and orientation.
-    const deviceOrientation =
-        containerDimensions.width > containerDimensions.height
-            ? DeviceOrientation.LANDSCAPE
-            : DeviceOrientation.PORTRAIT;
-
-    // Using that information, make some decisions (or assumptions)
-    // about the resulting layout.
-    const navigationPadEnabled =
-        containerDimensions.width > navigationViewThreshold;
-    const paginationEnabled = containerDimensions.width < expandedViewThreshold;
-    const toolbarEnabled = true;
-
-    return {
-        ...computeLayoutParameters(
-            gridDimensions,
-            pageDimensions,
-            containerDimensions,
-            deviceOrientation,
-            navigationPadEnabled,
-            paginationEnabled,
-            toolbarEnabled,
-        ),
-        // Pass along some of the layout information, so that other
-        // components in the heirarchy can adapt appropriately.
-        navigationPadEnabled,
-        paginationEnabled,
-    };
-};
-
-const layoutReducer = function (
-    state: LayoutState = initialLayoutState,
-    action: Action,
-): LayoutState {
-    switch (action.type) {
-        case "ConfigureKeypad":
-            const {keypadType} = action.configuration;
-            const gridDimensions = {
-                numRows: keypadForType[keypadType].rows,
-                numColumns: keypadForType[keypadType].columns,
-                numMaxVisibleRows: keypadForType[keypadType].maxVisibleRows,
-                numPages: keypadForType[keypadType].numPages,
-            } as const;
-
-            const layoutParams = layoutParametersForDimensions(
-                state.pageDimensions,
-                state.containerDimensions,
-                gridDimensions,
-            );
-
-            return {
-                ...state,
-                ...layoutParams,
-                gridDimensions,
-            };
-
-        case "SetPageSize":
-            const {pageWidth, pageHeight, containerWidth, containerHeight} =
-                action;
-            const pageDimensions = {
-                width: pageWidth,
-                height: pageHeight,
-            } as const;
-            const containerDimensions = {
-                width: containerWidth,
-                height: containerHeight,
-            } as const;
-
-            return {
-                ...state,
-                ...layoutParametersForDimensions(
-                    pageDimensions,
-                    containerDimensions,
-                    state.gridDimensions,
-                ),
-                pageDimensions,
-                containerDimensions,
-            };
-
-        default:
-            return state;
-    }
-};
-
-export default layoutReducer;

package/src/components/keypad-legacy/store/shared.ts

@@ -1,12 +0,0 @@
-import {KeypadType} from "../../../enums";
-import {expressionKeypadLayout} from "../expression-keypad";
-import {fractionKeypadLayout} from "../fraction-keypad";
-
-const defaultKeypadType = KeypadType.EXPRESSION;
-
-const keypadForType = {
-    [KeypadType.FRACTION]: fractionKeypadLayout,
-    [KeypadType.EXPRESSION]: expressionKeypadLayout,
-} as const;
-
-export {keypadForType, defaultKeypadType};

package/src/components/keypad-legacy/store/types.ts

@@ -1,78 +0,0 @@
-import type Key from "../../../data/keys";
-import type {LayoutMode, KeypadType} from "../../../enums";
-import type {Cursor, KeyHandler, Popover, Echo} from "../../../types";
-import type GestureManager from "../gesture-manager";
-
-// Interaction between keypad and input
-export interface InputState {
-    // This is the callback to tell the input
-    // that a key was pressed. It returns information
-    // about where the cursor is
-    keyHandler: KeyHandler | null;
-    // Information about where the cursor is, which we use to
-    // conditionally render buttons to help navigate
-    // where the cursor should go next
-    cursor: Cursor | undefined;
-}
-
-// Managing high-level keypad state
-export interface KeypadState {
-    // Additional symbols that get grouped in a
-    // ManyKeypadButton; for variables and
-    // special symbols (pi)
-    extraKeys: ReadonlyArray<string>;
-    // Keypad variations (Fraction vs Expression)
-    keypadType: KeypadType;
-    // Whether or not to show the keypad
-    active: boolean;
-}
-
-// Handles things like:
-// long-press: to open multikey popover
-// swipe: for pagination
-// press: regular pushing of a button
-export interface GestureState {
-    // The current multikey popover?
-    popover: Popover | null;
-    // ?? Maybe which key is currently focused?
-    focus: Key | null;
-    // Complex object that interprets touches as actions
-    gestureManager: GestureManager;
-}
-
-// Manages the animations for pressing keys
-export interface EchoState {
-    // Which echoes are in the process of animating
-    echoes: ReadonlyArray<Echo>;
-}
-
-export type GridDimensions = {
-    numRows: number;
-    numColumns: number;
-    numMaxVisibleRows: number;
-    numPages: number;
-};
-
-export type WidthHeight = {
-    width: number;
-    height: number;
-};
-
-// Layout (size, where to put buttons, etc)
-export interface LayoutState {
-    gridDimensions: GridDimensions;
-    buttonDimensions: WidthHeight;
-    containerDimensions: WidthHeight;
-    pageDimensions: WidthHeight;
-    layoutMode: LayoutMode;
-    paginationEnabled: boolean;
-    navigationPadEnabled: boolean;
-}
-
-export interface State {
-    input: InputState;
-    keypad: KeypadState;
-    gestures: GestureState;
-    echoes: EchoState;
-    layout: LayoutState;
-}

package/src/components/keypad-legacy/styles.ts

@@ -1,38 +0,0 @@
-/**
- * Common styles shared across components.
- */
-
-import {StyleSheet} from "aphrodite";
-
-import {compactKeypadBorderRadiusPx} from "../common-style";
-
-export default StyleSheet.create({
-    row: {
-        flexDirection: "row",
-    },
-    column: {
-        flexDirection: "column",
-    },
-    oneColumn: {
-        flexGrow: 1,
-    },
-    fullWidth: {
-        width: "100%",
-    },
-    stretch: {
-        alignItems: "stretch",
-    },
-    centered: {
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    centeredText: {
-        textAlign: "center",
-    },
-    roundedTopLeft: {
-        borderTopLeftRadius: compactKeypadBorderRadiusPx,
-    },
-    roundedTopRight: {
-        borderTopRightRadius: compactKeypadBorderRadiusPx,
-    },
-});

package/src/components/keypad-legacy/svg-icon.tsx

@@ -1,24 +0,0 @@
-/**
- * A component that renders a single SVG icon.
- */
-
-import * as React from "react";
-
-import * as Iconography from "./iconography/index";
-
-type Props = {
-    color: string;
-    name: string;
-};
-
-class SvgIcon extends React.Component<Props> {
-    render() {
-        const {color, name} = this.props;
-
-        // eslint-disable-next-line import/namespace
-        const SvgForName = Iconography[name];
-        return <SvgForName color={color} />;
-    }
-}
-
-export default SvgIcon;

package/src/components/keypad-legacy/text-icon.tsx

@@ -1,53 +0,0 @@
-/**
- * A component that renders a text-based icon.
- */
-
-import {StyleSheet} from "aphrodite";
-import * as React from "react";
-
-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;
-
-type Props = {
-    character: string;
-    style?: StyleType;
-};
-
-class TextIcon extends React.Component<Props> {
-    render() {
-        const {character, style} = this.props;
-
-        const containerStyle = [
-            row,
-            centered,
-            styles.size,
-            styles.base,
-            ...(Array.isArray(style) ? style : [style]),
-        ];
-        return (
-            <View style={containerStyle}>
-                <Text>{character}</Text>
-            </View>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    size: {
-        height: iconSizeHeightPx,
-        width: iconSizeWidthPx,
-    },
-
-    base: {
-        fontFamily: "'Lato', sans-serif",
-        fontSize: 25,
-    },
-});
-
-export default TextIcon;