@khanacademy/math-input 17.0.3 → 17.0.5

package/src/data/keys.ts

@@ -1,123 +0,0 @@
-export const KeyArray = [
-    "PLUS",
-    "MINUS",
-    "NEGATIVE",
-    "TIMES",
-    "DIVIDE",
-    "DECIMAL",
-    "PERIOD",
-    "PERCENT",
-    "CDOT",
-    "EQUAL",
-    "NEQ",
-    "GT",
-    "LT",
-    "GEQ",
-    "LEQ", // mobile native only
-    "FRAC_INCLUSIVE", // mobile native only
-    "FRAC_EXCLUSIVE", // mobile native only
-    "FRAC",
-    "EXP",
-    "EXP_2",
-    "EXP_3",
-    "SQRT",
-    "CUBE_ROOT",
-    "RADICAL",
-    "LEFT_PAREN",
-    "RIGHT_PAREN",
-    "LN",
-    "LOG",
-    "LOG_N",
-    "SIN",
-    "COS", // TODO(charlie): Add in additional Greek letters.,
-    "TAN",
-    "PI",
-    "THETA",
-    "UP",
-    "RIGHT",
-    "DOWN",
-    "LEFT",
-    "BACKSPACE",
-    "DISMISS",
-    "JUMP_OUT_PARENTHESES",
-    "JUMP_OUT_EXPONENT",
-    "JUMP_OUT_BASE",
-    "JUMP_INTO_NUMERATOR",
-    "JUMP_OUT_NUMERATOR",
-    "JUMP_OUT_DENOMINATOR", // Multi-functional keys.
-    "NOOP", // mobile native only
-    "MANY", // A custom key that captures an arbitrary number of symbols but has no 'default' symbol or action.
-    "NUM_0",
-    "NUM_1",
-    "NUM_2",
-    "NUM_3",
-    "NUM_4",
-    "NUM_5",
-    "NUM_6",
-    "NUM_7",
-    "NUM_8",
-    "NUM_9",
-    "a",
-    "b",
-    "c",
-    "d",
-    "e",
-    "f",
-    "g",
-    "h",
-    "i",
-    "j",
-    "k",
-    "l",
-    "m",
-    "n",
-    "o",
-    "p",
-    "q",
-    "r",
-    "s",
-    "t",
-    "u",
-    "v",
-    "w",
-    "x",
-    "y",
-    "z",
-    "A",
-    "B",
-    "C",
-    "D",
-    "E",
-    "F",
-    "G",
-    "H",
-    "I",
-    "J",
-    "K",
-    "L",
-    "M",
-    "N",
-    "O",
-    "P",
-    "Q",
-    "R",
-    "S",
-    "T",
-    "U",
-    "V",
-    "W",
-    "X",
-    "Y",
-    "Z",
-
-    // Currently only used by
-    // Perseus' Expression MathInput
-    "PHI",
-    "NTHROOT3",
-    "POW",
-    "LOG_B",
-] as const;
-
-type Key = typeof KeyArray[number];
-
-export default Key;

package/src/enums.ts

@@ -1,27 +0,0 @@
-/**
- * Constants that are shared between multiple files.
- */
-
-export enum KeypadType {
-    FRACTION = "FRACTION",
-    EXPRESSION = "EXPRESSION",
-}
-
-export const KeyTypes = [
-    "EMPTY",
-    // 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
-    // deletion).
-    "INPUT_NAVIGATION",
-    // 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
-    // themselves.
-    "MANY",
-];
-export type KeyType = typeof KeyTypes[number];

package/src/fake-react-native-web/index.ts

@@ -1,11 +0,0 @@
-/**
- * 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
- * React Native.
- *
- * Inspired by https://github.com/necolas/react-native-web. We use aphrodite
- * StyleSheets instead.
- */
-
-export {default as Text} from "./text";
-export {default as View} from "./view";

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

@@ -1,55 +0,0 @@
-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 = {
-    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?: StyleType;
-};
-
-class Text extends React.Component<Props> {
-    render(): React.ReactNode {
-        const {numberOfLines, style} = this.props;
-
-        const className = css(
-            styles.initial,
-            ...(Array.isArray(style) ? style : [style]),
-            numberOfLines === 1 && styles.singleLineStyle,
-        );
-
-        return (
-            <span className={className} style={this.props.dynamicStyle}>
-                {this.props.children}
-            </span>
-        );
-    }
-}
-
-// https://github.com/necolas/react-native-web/blob/master/src/components/Text/index.js
-const styles = StyleSheet.create({
-    initial: {
-        color: "inherit",
-        display: "inline",
-        font: "inherit",
-        margin: 0,
-        padding: 0,
-        textDecorationLine: "none",
-        wordWrap: "break-word",
-    },
-    singleLineStyle: {
-        maxWidth: "100%",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-    },
-});
-
-export default Text;

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

@@ -1,91 +0,0 @@
-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;
-    // 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;
-    // 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?: (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?: StyleType;
-    forwardRef?: React.RefObject<HTMLDivElement>;
-};
-
-class View extends React.Component<Props> {
-    static styles = StyleSheet.create({
-        // From: https://github.com/necolas/react-native-web/blob/master/src/components/View/index.js
-        // eslint-disable-next-line react-native/no-unused-styles
-        initial: {
-            alignItems: "stretch",
-            borderWidth: 0,
-            borderStyle: "solid",
-            boxSizing: "border-box",
-            display: "flex",
-            flexBasis: "auto",
-            flexDirection: "column",
-            margin: 0,
-            padding: 0,
-            position: "relative",
-            // button and anchor reset
-            backgroundColor: "transparent",
-            color: "inherit",
-            font: "inherit",
-            textAlign: "inherit",
-            textDecorationLine: "none",
-            // list reset
-            listStyle: "none",
-            // fix flexbox bugs
-            maxWidth: "100%",
-            minHeight: 0,
-            minWidth: 0,
-        },
-    });
-
-    render(): React.ReactNode {
-        const className =
-            css(
-                View.styles.initial,
-                ...(Array.isArray(this.props.style)
-                    ? this.props.style
-                    : [this.props.style]),
-            ) +
-            (this.props.extraClassName ? ` ${this.props.extraClassName}` : "");
-
-        return (
-            <div
-                className={className}
-                style={this.props.dynamicStyle}
-                onClick={this.props.onClick}
-                onTouchCancel={this.props.onTouchCancel}
-                onTouchEnd={this.props.onTouchEnd}
-                onTouchMove={this.props.onTouchMove}
-                onTouchStart={this.props.onTouchStart}
-                aria-label={this.props.ariaLabel}
-                role={this.props.role}
-                ref={this.props.forwardRef}
-            >
-                {this.props.children}
-            </div>
-        );
-    }
-}
-
-export default View;

package/src/full-keypad.stories.tsx

@@ -1,142 +0,0 @@
-import {action} from "@storybook/addon-actions";
-import {INITIAL_VIEWPORTS} from "@storybook/addon-viewport";
-import * as React from "react";
-
-import Keypad from "./components/keypad";
-
-import type {PropsFor} from "@khanacademy/wonder-blocks-core";
-import type {ComponentStory} from "@storybook/react";
-
-const opsPage = "Operators Page";
-const numsPage = "Numbers Page";
-const geoPage = "Geometry Page";
-const fracPage = "Fractions Page";
-
-export default {
-    title: "math-input/Full Keypad",
-    parameters: {
-        backgrounds: {
-            values: [{name: "light background", value: "white", default: true}],
-        },
-        viewport: {defaultViewport: "iphone6", viewports: INITIAL_VIEWPORTS},
-    },
-    component: Keypad,
-    args: {
-        advancedRelations: false,
-        basicRelations: false,
-        divisionKey: false,
-        logarithms: false,
-        fractionsOnly: false,
-        convertDotToTimes: false,
-        preAlgebra: false,
-        trigonometry: false,
-        sendEvent: () => {},
-        onAnalyticsEvent: async () => {},
-    },
-    argTypes: {
-        advancedRelations: {
-            control: "boolean",
-            table: {
-                category: opsPage,
-            },
-        },
-        basicRelations: {
-            control: "boolean",
-            table: {
-                category: opsPage,
-            },
-        },
-        divisionKey: {
-            control: "boolean",
-            table: {
-                category: numsPage,
-            },
-        },
-        logarithms: {
-            control: "boolean",
-            table: {
-                category: opsPage,
-            },
-        },
-        fractionsOnly: {
-            control: "boolean",
-            table: {
-                category: fracPage,
-            },
-        },
-        multiplicationDot: {
-            control: "boolean",
-            table: {
-                category: numsPage,
-            },
-        },
-        preAlgebra: {
-            control: "boolean",
-            table: {
-                category: opsPage,
-            },
-        },
-        trigonometry: {
-            control: "boolean",
-            table: {
-                category: geoPage,
-            },
-        },
-    },
-};
-
-const Template: ComponentStory<typeof Keypad> = (
-    args: PropsFor<typeof Keypad>,
-): React.ReactElement => (
-    <Keypad
-        {...args}
-        onClickKey={action("onClickKey")}
-        onAnalyticsEvent={async (e) => action("onAnalyticsEvent")(e)}
-    />
-);
-
-export const Default = Template.bind({});
-
-export const PreAlgebra = Template.bind({});
-PreAlgebra.args = {
-    preAlgebra: true,
-};
-
-export const Trigonometry = Template.bind({});
-Trigonometry.args = {
-    preAlgebra: true,
-    trigonometry: true,
-};
-
-export const FractionsOnly = Template.bind({});
-FractionsOnly.args = {
-    fractionsOnly: true,
-};
-
-export const Everything = Template.bind({});
-Everything.args = {
-    advancedRelations: true,
-    basicRelations: true,
-    divisionKey: true,
-    logarithms: true,
-    convertDotToTimes: false,
-    preAlgebra: true,
-    trigonometry: true,
-    expandedView: true,
-    showDismiss: true,
-    extraKeys: ["a", "b", "c"],
-};
-
-export const EverythingMinusNavigationPad = Template.bind({});
-EverythingMinusNavigationPad.args = {
-    advancedRelations: true,
-    basicRelations: true,
-    divisionKey: true,
-    logarithms: true,
-    convertDotToTimes: false,
-    preAlgebra: true,
-    trigonometry: true,
-    expandedView: false,
-    showDismiss: true,
-    extraKeys: ["a", "b", "c"],
-};

package/src/full-mobile-input.stories.tsx

@@ -1,115 +0,0 @@
-import {action} from "@storybook/addon-actions";
-import * as React from "react";
-
-import {
-    KeypadInput,
-    KeypadType,
-    MobileKeypad,
-    StatefulKeypadContextProvider,
-    KeypadContext,
-} from "./index";
-
-export default {
-    title: "math-input/Full Mobile MathInput",
-    parameters: {
-        backgrounds: {
-            default: "light background",
-            values: [
-                // We want a slightly darker default bg so that we can
-                // see the top of the keypad when it is open
-                {name: "light background", value: "lightgrey", default: true},
-            ],
-        },
-    },
-};
-
-const Basic = ({keypadElement, setKeypadElement}) => {
-    const [value, setValue] = React.useState("");
-    // Whether to use Expression or Fraction keypad
-    const [expression, setExpression] = React.useState<boolean>(false);
-    // Whether to use CDOT or TIMES
-    const [times, setTimes] = React.useState<boolean>(true);
-    // Whether to use v1 or v2 keypad
-    const [v2Keypad, setV2Keypad] = React.useState<boolean>(true);
-
-    const input = React.useRef<KeypadInput>(null);
-
-    const timesLabel = times ? "CDOT" : "TIMES";
-
-    React.useEffect(() => {
-        keypadElement?.configure(
-            {
-                keypadType: expression
-                    ? KeypadType.EXPRESSION
-                    : KeypadType.FRACTION,
-                extraKeys: expression ? ["x", "y", "PI", "THETA"] : [],
-                times: times,
-            },
-            () => {},
-        );
-    }, [keypadElement, expression, times]);
-
-    return (
-        <div style={{padding: "1rem 2rem"}}>
-            <div>
-                <div>
-                    NOTE: To properly test the input interaction, you will need
-                    to simulate a device using the dev tools. MathInput requires
-                    touch events (not click events).
-                </div>
-                <div style={{padding: "1rem 0"}}>
-                    <button onClick={() => setExpression(!expression)}>
-                        {`Use ${expression ? "Fraction" : "Expression"} Keypad`}
-                    </button>
-                    <button onClick={() => setV2Keypad(!v2Keypad)}>
-                        {`Use ${v2Keypad ? "Legacy" : "New"} Keypad`}
-                    </button>
-                    <button onClick={() => setTimes(!times)}>
-                        {`Toggle to ` + timesLabel}
-                    </button>
-                </div>
-            </div>
-
-            <KeypadInput
-                value={value}
-                ref={input}
-                keypadElement={keypadElement}
-                onChange={(newValue, callback) => {
-                    setValue(newValue);
-                    callback?.();
-                }}
-                onFocus={() => {
-                    keypadElement?.activate();
-                }}
-                onBlur={() => {
-                    keypadElement?.dismiss();
-                }}
-            />
-
-            <MobileKeypad
-                onElementMounted={(node) => {
-                    if (node) {
-                        setKeypadElement(node);
-                    }
-                }}
-                onDismiss={() => {}}
-                onAnalyticsEvent={async (e) => action("onAnalyticsEvent")(e)}
-            />
-        </div>
-    );
-};
-
-export function Wrapped() {
-    return (
-        <StatefulKeypadContextProvider>
-            <KeypadContext.Consumer>
-                {({keypadElement, setKeypadElement}) => (
-                    <Basic
-                        keypadElement={keypadElement}
-                        setKeypadElement={setKeypadElement}
-                    />
-                )}
-            </KeypadContext.Consumer>
-        </StatefulKeypadContextProvider>
-    );
-}

package/src/index.ts

@@ -1,52 +0,0 @@
-/**
- * A single entry-point for all of the external-facing functionality.
- */
-
-import "../less/main.less";
-
-export {libVersion} from "./version";
-
-// MathInput input field (MathQuill wrapper)
-export {default as KeypadInput} from "./components/input/math-input";
-
-export {
-    // Helper to create a MathQuill MathField
-    createMathField,
-    // Instance of the MathQuill library
-    mathQuillInstance,
-} from "./components/input/mathquill-instance";
-
-// MathQuill MathField type
-export {type MathFieldInterface} from "./components/input/mathquill-types";
-
-// Cursor context data: where in a forumla the cursor is in
-// ex: in numerator, in parenthesis, in subscript
-export {CursorContext} from "./components/input/cursor-contexts";
-
-// Helper to get cursor context from MathField
-export {getCursorContext} from "./components/input/mathquill-helpers";
-
-// Wrapper around v1 and v2 mobile keypads to switch between them
-export {MobileKeypad} from "./components/keypad";
-// Unwrapped v2 keypad for desktop
-export {default as DesktopKeypad} from "./components/keypad";
-
-// Context used to pass data/refs around
-export {
-    KeypadContext,
-    StatefulKeypadContextProvider,
-} from "./components/keypad-context";
-
-// External API of the "Provided" keypad component
-export {keypadElementPropType} from "./components/prop-types";
-export type {KeypadAPI, KeypadConfiguration} from "./types";
-export {convertDotToTimesByLocale} from "./utils";
-
-// Key list, configuration map, and types
-export type {default as Keys} from "./data/keys";
-export {KeyArray} from "./data/keys";
-export {default as KeyConfigs} from "./data/key-configs";
-export {type KeyType, KeypadType} from "./enums";
-
-// Helper to translate key pressed to MathField update
-export {default as keyTranslator} from "./components/key-handlers/key-translator";

package/src/types.ts

@@ -1,70 +0,0 @@
-import type {CursorContext} from "./components/input/cursor-contexts";
-import type Key from "./data/keys";
-import type {KeyType, KeypadType} from "./enums";
-import type {KeypadContextRendererInterface} from "@khanacademy/perseus-core";
-import type * as React from "react";
-import type ReactDOM from "react-dom";
-
-export type IconConfig = {
-    data: string;
-};
-
-export type NonManyKeyConfig = {
-    id: Key;
-    type: Exclude<KeyType, "MANY">;
-    icon: IconConfig;
-    ariaLabel: string;
-};
-
-export type ManyKeyConfig = Omit<NonManyKeyConfig, "type"> & {
-    type: Extract<KeyType, "MANY">;
-    childKeyIds: ReadonlyArray<string>;
-};
-
-export type KeyConfig = NonManyKeyConfig | ManyKeyConfig;
-
-export type KeypadConfiguration = {
-    keypadType: KeypadType;
-    extraKeys?: ReadonlyArray<Key>;
-    times?: boolean;
-};
-
-export type KeyHandler = (key: Key) => Cursor;
-
-export type Cursor = {
-    context: typeof CursorContext[keyof typeof CursorContext];
-};
-
-export type ClickKeyCallback = (key: Key, event?: React.SyntheticEvent) => void;
-
-export type KeypadPageType =
-    | "Geometry"
-    | "Operators"
-    | "Numbers"
-    | "Fractions"
-    | "Extras"
-    | "Dismiss";
-
-export interface KeypadAPI {
-    activate: () => void;
-    dismiss: () => void;
-    configure: (configuration: KeypadConfiguration, cb: () => void) => void;
-    setCursor: (cursor: Cursor) => void;
-    setKeyHandler: (keyHandler: KeyHandler) => void;
-    getDOMNode: () => ReturnType<typeof ReactDOM.findDOMNode>;
-}
-
-export type KeypadContextType = {
-    setKeypadActive: (keypadActive: boolean) => void;
-    keypadActive: boolean;
-    setKeypadElement: (keypadElement?: KeypadAPI) => void;
-    keypadElement: KeypadAPI | null | undefined;
-    setRenderer: (
-        renderer?: KeypadContextRendererInterface | null | undefined,
-    ) => void;
-    renderer: KeypadContextRendererInterface | null | undefined;
-    setScrollableElement: (
-        scrollableElement?: HTMLElement | null | undefined,
-    ) => void;
-    scrollableElement: HTMLElement | null | undefined;
-};