@khanacademy/math-input 17.0.3 → 17.0.5

package/src/components/keypad/index.tsx

@@ -1,2 +0,0 @@
-export {default} from "./keypad";
-export {MobileKeypad} from "./mobile-keypad";

package/src/components/keypad/keypad-button.stories.tsx

@@ -1,81 +0,0 @@
-import {action} from "@storybook/addon-actions";
-import * as React from "react";
-
-import KeyConfigs from "../../data/key-configs";
-
-import {KeypadButton} from "./keypad-button";
-
-import type {KeypadButtonProps} from "./keypad-button";
-import type {ComponentStory} from "@storybook/react";
-
-export default {
-    title: "math-input/components/Keypad Button",
-    args: {
-        keyConfig: KeyConfigs["PLUS"],
-        tintColor: "#F6F6F7",
-        coord: [0, 0],
-    },
-    argTypes: {
-        keyConfig: {
-            control: "select",
-            options: {...KeyConfigs},
-        },
-        tintColor: {
-            control: "color",
-        },
-    },
-};
-
-const Template: ComponentStory<typeof KeypadButton> = ({
-    ...args
-}: KeypadButtonProps): React.ReactElement => (
-    <div
-        style={{
-            width: 200,
-            height: 200,
-            backgroundColor: "#DBDCDD",
-            display: "flex",
-        }}
-    >
-        <div
-            style={{
-                width: 58,
-                margin: "auto",
-            }}
-        >
-            <KeypadButton {...args} onClickKey={action("pressed")} />
-        </div>
-    </div>
-);
-export const Default = Template.bind({});
-
-export const AllButtons: ComponentStory<typeof KeypadButton> = ({
-    ...args
-}: KeypadButtonProps): React.ReactElement => (
-    <div
-        style={{
-            backgroundColor: "#DBDCDD",
-            display: "grid",
-            gridTemplateColumns: "repeat(6, 1fr)",
-            gap: "25px",
-        }}
-    >
-        {Object.keys(KeyConfigs).map((key) => (
-            <div
-                key={key}
-                style={{
-                    width: 58,
-                    margin: "auto",
-                    overflowWrap: "break-word",
-                }}
-            >
-                {key}
-                <KeypadButton
-                    keyConfig={KeyConfigs[key]}
-                    onClickKey={action("pressed")}
-                    coord={[0, 0]}
-                />
-            </div>
-        ))}
-    </div>
-);

package/src/components/keypad/keypad-button.tsx

@@ -1,124 +0,0 @@
-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 ButtonAsset from "./button-assets";
-
-import type {KeyConfig, ClickKeyCallback} from "../../types";
-import type {StyleType} from "@khanacademy/wonder-blocks-core";
-
-export type KeypadButtonProps = {
-    // 0 indexed [x, y] position in keypad CSS grid
-    coord: readonly [number, number];
-    keyConfig: KeyConfig;
-    onClickKey: ClickKeyCallback;
-    // Apply action button styles
-    action?: boolean;
-    // Apply secondary button styles
-    secondary?: boolean;
-    style?: StyleType;
-};
-
-export const KeypadButton = ({
-    coord,
-    keyConfig,
-    onClickKey,
-    style,
-    secondary,
-    action,
-}: KeypadButtonProps): React.ReactElement => {
-    const tintColor = secondary ? "#F6F6F7" : action ? "#DBDCDD" : undefined;
-
-    return (
-        <View
-            style={{
-                gridColumn: coord[0] + 1,
-                gridRow: coord[1] + 1,
-                ...style,
-            }}
-            // Unfortunately the CDOT and TIMES buttons are identical in the DOM
-            // apart from the ICON SVG, so we need to use testId.
-            testId={keyConfig.id}
-        >
-            <Clickable
-                onClick={(e) => onClickKey(keyConfig.id, e)}
-                style={styles.clickable}
-                aria-label={keyConfig.ariaLabel}
-            >
-                {({hovered, focused, pressed}) => {
-                    return (
-                        <View style={[styles.outerBoxBase]}>
-                            <View
-                                style={[
-                                    styles.base,
-                                    tintColor != null
-                                        ? {background: tintColor}
-                                        : undefined,
-                                    hovered && styles.hovered,
-                                    focused && styles.focused,
-                                    pressed && styles.pressed,
-                                ]}
-                            >
-                                <ButtonAsset id={keyConfig.id} />
-                            </View>
-                        </View>
-                    );
-                }}
-            </Clickable>
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    base: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        boxShadow: `0px 1px 0px ${Color.offBlack32}`,
-        boxSizing: "border-box",
-        background: Color.white,
-        borderRadius: 4,
-        borderWidth: 2,
-        borderStyle: "solid",
-        borderColor: "transparent",
-        flex: 1,
-        minHeight: 42,
-        minWidth: 42,
-        padding: 1,
-    },
-    hovered: {
-        borderColor: Color.blue,
-        padding: 1,
-        boxShadow: "none",
-    },
-    focused: {
-        borderColor: Color.blue,
-        padding: 0,
-        boxShadow: "none",
-    },
-    pressed: {
-        border: "2px solid #1B50B3",
-        padding: 0,
-        background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${Color.white}`,
-        boxShadow: "none",
-    },
-    outerBoxBase: {
-        padding: 1,
-        height: "100%",
-        width: "100%",
-        boxSizing: "border-box",
-        borderRadius: 7,
-        border: "2px solid transparent",
-    },
-    clickable: {
-        width: "100%",
-        height: "100%",
-        boxSizing: "border-box",
-
-        ":focus": {
-            outline: `none`,
-        },
-    },
-});

package/src/components/keypad/keypad-mathquill.stories.tsx

@@ -1,109 +0,0 @@
-import Color from "@khanacademy/wonder-blocks-color";
-import {Popover, PopoverContentCore} from "@khanacademy/wonder-blocks-popover";
-import * as React from "react";
-
-import {CursorContext} from "../input/cursor-contexts";
-import {getCursorContext} from "../input/mathquill-helpers";
-import {createMathField} from "../input/mathquill-instance";
-import keyTranslator from "../key-handlers/key-translator";
-
-import type Key from "../../data/keys";
-import type {MathFieldInterface} from "../input/mathquill-types";
-
-import Keypad from "./index";
-
-export default {
-    title: "math-input/components/v2 Keypad With Mathquill",
-};
-
-export function V2KeypadWithMathquill() {
-    const mathFieldWrapperRef = React.useRef<HTMLDivElement>(null);
-    const [mathField, setMathField] = React.useState<MathFieldInterface>();
-    const [keypadOpen, setKeypadOpen] = React.useState<boolean>(true);
-    const [cursorContext, setCursorContext] = React.useState<
-        typeof CursorContext[keyof typeof CursorContext]
-    >(CursorContext.NONE);
-
-    React.useEffect(() => {
-        if (!mathField && mathFieldWrapperRef.current) {
-            const mathFieldInstance = createMathField(
-                mathFieldWrapperRef.current,
-                (baseConfig) => ({
-                    ...baseConfig,
-                    handlers: {
-                        edit: (_mathField: MathFieldInterface) => {
-                            setCursorContext(getCursorContext(_mathField));
-                        },
-                    },
-                }),
-            );
-            setMathField(mathFieldInstance);
-        }
-    }, [mathField]);
-
-    function handleClickKey(key: Key) {
-        if (!mathField) {
-            return;
-        }
-
-        if (key === "DISMISS") {
-            setKeypadOpen(false);
-        }
-
-        const mathFieldCallback = keyTranslator[key];
-        if (mathFieldCallback) {
-            mathFieldCallback(mathField, key);
-            setCursorContext(getCursorContext(mathField));
-        } else {
-            // eslint-disable-next-line no-console
-            console.warn(`No translation to Mathquill for: ${key}`);
-        }
-    }
-
-    return (
-        <div style={{maxWidth: "400px", margin: "2em"}}>
-            <Popover
-                content={
-                    <PopoverContentCore
-                        style={{
-                            padding: 10,
-                            maxWidth: "initial",
-                        }}
-                    >
-                        <Keypad
-                            extraKeys={["x", "y", "PI", "THETA"]}
-                            onClickKey={handleClickKey}
-                            cursorContext={cursorContext}
-                            advancedRelations
-                            basicRelations
-                            divisionKey
-                            logarithms
-                            convertDotToTimes
-                            preAlgebra
-                            trigonometry
-                            onAnalyticsEvent={async (event) => {
-                                // eslint-disable-next-line no-console
-                                console.log("Send Event:", event);
-                            }}
-                            showDismiss
-                        />
-                    </PopoverContentCore>
-                }
-                dismissEnabled
-                opened={keypadOpen}
-            >
-                <div
-                    style={{
-                        width: "100%",
-                        marginBottom: "1em",
-                        border: `1px solid ${Color.offBlack16}`,
-                    }}
-                    ref={mathFieldWrapperRef}
-                />
-            </Popover>
-            <button onClick={() => setKeypadOpen(!keypadOpen)}>
-                {keypadOpen ? "close keypad" : "open keypad"}
-            </button>
-        </div>
-    );
-}

package/src/components/keypad/keypad-pages/extras-page.tsx

@@ -1,35 +0,0 @@
-import * as React from "react";
-
-import Keys from "../../../data/key-configs";
-import {KeypadButton} from "../keypad-button";
-
-import type Key from "../../../data/keys";
-import type {ClickKeyCallback} from "../../../types";
-
-type Props = {
-    extraKeys: ReadonlyArray<Key>;
-    onClickKey: ClickKeyCallback;
-};
-
-const columns = 3;
-
-export default function ExtrasPage(props: Props) {
-    const {extraKeys, onClickKey} = props;
-    return (
-        <>
-            {extraKeys.map((key, i) => {
-                // Map 1D array to Cartesian coordinates
-                const coordX = i % columns;
-                const coordY = i / columns;
-                return (
-                    <KeypadButton
-                        key={key}
-                        keyConfig={Keys[key]}
-                        onClickKey={onClickKey}
-                        coord={[coordX, coordY]}
-                    />
-                );
-            })}
-        </>
-    );
-}

package/src/components/keypad/keypad-pages/fractions-page.tsx

@@ -1,125 +0,0 @@
-import * as React from "react";
-
-import Keys from "../../../data/key-configs";
-import {KeypadButton} from "../keypad-button";
-import {getCursorContextConfig} from "../utils";
-
-import type {ClickKeyCallback} from "../../../types";
-import type {CursorContext} from "../../input/cursor-contexts";
-
-type Props = {
-    onClickKey: ClickKeyCallback;
-    cursorContext?: typeof CursorContext[keyof typeof CursorContext];
-};
-
-export default function FractionsPage(props: Props) {
-    const {onClickKey, cursorContext} = props;
-    const cursorKeyConfig = getCursorContextConfig(cursorContext);
-    // These keys are arranged sequentially so that tabbing follows numerical order. This
-    // allows us to visually mimic a keypad without affecting a11y. The visual order of the
-    // keys in the keypad is determined by their coordinates, not their order in the DOM.
-    return (
-        <>
-            {/* Row 4 */}
-            <KeypadButton
-                keyConfig={Keys.NUM_1}
-                onClickKey={onClickKey}
-                coord={[0, 2]}
-            />
-            <KeypadButton
-                keyConfig={Keys.NUM_2}
-                onClickKey={onClickKey}
-                coord={[1, 2]}
-            />
-            <KeypadButton
-                keyConfig={Keys.NUM_3}
-                onClickKey={onClickKey}
-                coord={[2, 2]}
-            />
-
-            {/* Row 3 */}
-            <KeypadButton
-                keyConfig={Keys.NUM_4}
-                onClickKey={onClickKey}
-                coord={[0, 1]}
-            />
-            <KeypadButton
-                keyConfig={Keys.NUM_5}
-                onClickKey={onClickKey}
-                coord={[1, 1]}
-            />
-            <KeypadButton
-                keyConfig={Keys.NUM_6}
-                onClickKey={onClickKey}
-                coord={[2, 1]}
-            />
-
-            {/* Row 2 */}
-            <KeypadButton
-                keyConfig={Keys.NUM_7}
-                onClickKey={onClickKey}
-                coord={[0, 0]}
-            />
-            <KeypadButton
-                keyConfig={Keys.NUM_8}
-                onClickKey={onClickKey}
-                coord={[1, 0]}
-            />
-            <KeypadButton
-                keyConfig={Keys.NUM_9}
-                onClickKey={onClickKey}
-                coord={[2, 0]}
-            />
-
-            {/* Row 1 */}
-            <KeypadButton
-                keyConfig={Keys.NUM_0}
-                onClickKey={onClickKey}
-                coord={[0, 3]}
-            />
-            <KeypadButton
-                keyConfig={Keys.DECIMAL}
-                onClickKey={onClickKey}
-                coord={[1, 3]}
-            />
-            <KeypadButton
-                keyConfig={Keys.NEGATIVE}
-                onClickKey={onClickKey}
-                coord={[2, 3]}
-            />
-            {/* Side Column */}
-            <KeypadButton
-                keyConfig={Keys.PERCENT}
-                onClickKey={onClickKey}
-                coord={[3, 0]}
-                secondary
-            />
-            <KeypadButton
-                keyConfig={Keys.PI}
-                onClickKey={onClickKey}
-                coord={[3, 1]}
-                secondary
-            />
-            <KeypadButton
-                keyConfig={Keys.FRAC}
-                onClickKey={onClickKey}
-                coord={[3, 2]}
-                secondary
-            />
-            {cursorKeyConfig && (
-                <KeypadButton
-                    keyConfig={cursorKeyConfig}
-                    onClickKey={onClickKey}
-                    coord={[3, 3]}
-                    secondary
-                />
-            )}
-            <KeypadButton
-                keyConfig={Keys.BACKSPACE}
-                onClickKey={onClickKey}
-                coord={[4, 3]}
-                action
-            />
-        </>
-    );
-}

package/src/components/keypad/keypad-pages/geometry-page.tsx

@@ -1,34 +0,0 @@
-import * as React from "react";
-
-import Keys from "../../../data/key-configs";
-import {KeypadButton} from "../keypad-button";
-
-import type {ClickKeyCallback} from "../../../types";
-
-type Props = {
-    onClickKey: ClickKeyCallback;
-};
-
-export default function GeometryPage(props: Props) {
-    const {onClickKey} = props;
-    return (
-        <>
-            {/* Row 1 */}
-            <KeypadButton
-                keyConfig={Keys.SIN}
-                onClickKey={onClickKey}
-                coord={[0, 0]}
-            />
-            <KeypadButton
-                keyConfig={Keys.COS}
-                onClickKey={onClickKey}
-                coord={[1, 0]}
-            />
-            <KeypadButton
-                keyConfig={Keys.TAN}
-                onClickKey={onClickKey}
-                coord={[2, 0]}
-            />
-        </>
-    );
-}

package/src/components/keypad/keypad-pages/keypad-pages.stories.tsx

@@ -1,37 +0,0 @@
-import {action} from "@storybook/addon-actions";
-import {withKnobs} from "@storybook/addon-knobs";
-import {INITIAL_VIEWPORTS} from "@storybook/addon-viewport";
-import * as React from "react";
-
-import GeometryInputPage from "./geometry-page";
-import NumbersPage from "./numbers-page";
-import PrealgebraInputPage from "./operators-page";
-
-export default {
-    title: "math-input/components/Keypad pages",
-    decorators: [withKnobs],
-    parameters: {
-        backgrounds: {
-            values: [{name: "light background", value: "white", default: true}],
-        },
-        viewport: {defaultViewport: "iphone6", viewports: INITIAL_VIEWPORTS},
-    },
-};
-
-export const NumericInput = (): React.ReactElement => (
-    <NumbersPage onClickKey={action("onClickKey")} />
-);
-
-export const PreAlgebraInput = (): React.ReactElement => (
-    <PrealgebraInputPage
-        onClickKey={action("onClickKey")}
-        preAlgebra={true}
-        logarithms={true}
-        basicRelations={true}
-        advancedRelations={true}
-    />
-);
-
-export const TrigonometryInput = (): React.ReactElement => (
-    <GeometryInputPage onClickKey={action("onClickKey")} />
-);

package/src/components/keypad/keypad-pages/numbers-page.tsx

@@ -1,94 +0,0 @@
-import * as React from "react";
-
-import Keys from "../../../data/key-configs";
-import {KeypadButton} from "../keypad-button";
-
-import type {ClickKeyCallback} from "../../../types";
-
-type Props = {
-    onClickKey: ClickKeyCallback;
-};
-
-export default function NumbersPage(props: Props) {
-    const {onClickKey} = props;
-    // These keys are arranged sequentially so that tabbing follows numerical order. This
-    // allows us to visually mimic a keypad without affecting a11y. The visual order of the
-    // keys in the keypad is determined by their coordinates, not their order in the DOM.
-    return (
-        <>
-            {/* Row 4 */}
-            <KeypadButton
-                keyConfig={Keys.NUM_1}
-                onClickKey={onClickKey}
-                coord={[0, 2]}
-            />
-            <KeypadButton
-                keyConfig={Keys.NUM_2}
-                onClickKey={onClickKey}
-                coord={[1, 2]}
-            />
-            <KeypadButton
-                keyConfig={Keys.NUM_3}
-                onClickKey={onClickKey}
-                coord={[2, 2]}
-            />
-
-            {/* Row 3 */}
-            <KeypadButton
-                keyConfig={Keys.NUM_4}
-                onClickKey={onClickKey}
-                coord={[0, 1]}
-            />
-            <KeypadButton
-                keyConfig={Keys.NUM_5}
-                onClickKey={onClickKey}
-                coord={[1, 1]}
-            />
-            <KeypadButton
-                keyConfig={Keys.NUM_6}
-                onClickKey={onClickKey}
-                coord={[2, 1]}
-            />
-
-            {/* Row 2 */}
-            <KeypadButton
-                keyConfig={Keys.NUM_7}
-                onClickKey={onClickKey}
-                coord={[0, 0]}
-            />
-            <KeypadButton
-                keyConfig={Keys.NUM_8}
-                onClickKey={onClickKey}
-                coord={[1, 0]}
-            />
-            <KeypadButton
-                keyConfig={Keys.NUM_9}
-                onClickKey={onClickKey}
-                coord={[2, 0]}
-            />
-
-            {/* Row 1 */}
-            <KeypadButton
-                keyConfig={Keys.NUM_0}
-                onClickKey={onClickKey}
-                coord={[0, 3]}
-            />
-            <KeypadButton
-                keyConfig={Keys.DECIMAL}
-                onClickKey={onClickKey}
-                coord={[1, 3]}
-            />
-            <KeypadButton
-                keyConfig={Keys.NEGATIVE}
-                onClickKey={onClickKey}
-                coord={[2, 3]}
-            />
-            <KeypadButton
-                keyConfig={Keys.PERCENT}
-                onClickKey={onClickKey}
-                coord={[3, 0]}
-                secondary
-            />
-        </>
-    );
-}