@khanacademy/math-input 2.0.0 → 4.0.0

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

@@ -1,29 +1,77 @@
 import {action} from "@storybook/addon-actions";
-import {withKnobs} from "@storybook/addon-knobs";
+import {ComponentStory} from "@storybook/react";
 import * as React from "react";
 
-import KeypadButton from "./button";
+import KeyConfigs from "../../data/key-configs";
+
+import {KeypadButton, KeypadButtonProps} from "./keypad-page-items";
 
 export default {
     title: "Keypad Button",
-    decorators: [withKnobs],
-    parameters: {
-        backgrounds: {
-            values: [
-                {name: "dark background", value: "#DBDCDD", default: true},
-            ],
+    args: {
+        keyConfig: KeyConfigs["PLUS"],
+        tintColor: "#F6F6F7",
+    },
+    argTypes: {
+        keyConfig: {
+            control: "select",
+            options: {...KeyConfigs},
+        },
+        tintColor: {
+            control: "color",
         },
     },
 };
 
-export const Button = () => (
+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={{
-            width: 58,
+            backgroundColor: "#DBDCDD",
+            display: "grid",
+            gridTemplateColumns: "repeat(6, 1fr)",
+            gap: "25px",
         }}
     >
-        <KeypadButton onPress={action("pressed")}>
-            <p>1</p>
-        </KeypadButton>
+        {Object.keys(KeyConfigs).map((key) => (
+            <div
+                key={key}
+                style={{
+                    width: 58,
+                    margin: "auto",
+                    overflowWrap: "break-word",
+                }}
+            >
+                {key}
+                <KeypadButton
+                    keyConfig={KeyConfigs[key]}
+                    onClickKey={action("pressed")}
+                />
+            </div>
+        ))}
     </div>
 );

package/src/components/keypad/button.tsx

@@ -58,7 +58,7 @@ const styles = StyleSheet.create({
     },
 });
 
-type Props = {
+export type Props = {
     onPress: () => void;
     children: React.ReactNode;
     style?: StyleType;

package/src/components/keypad/{trigonometry-page.tsx → geometry-page/index.tsx}

@@ -1,18 +1,17 @@
 import * as React from "react";
 
-import Keys from "../../data/key-configs";
-
+import Keys from "../../../data/key-configs";
 import {
     KeypadPageContainer,
     SecondaryKeypadButton,
     KeypadActionButton,
-} from "./keypad-page-items";
+} from "../keypad-page-items";
 
 type Props = {
     onClickKey: (keyConfig: string) => void;
 };
 
-export default class TrigonometryInputPage extends React.Component<Props> {
+export default class GeometryPage extends React.Component<Props> {
     render(): React.ReactNode {
         const {onClickKey} = this.props;
         return (
@@ -47,7 +46,7 @@ export default class TrigonometryInputPage extends React.Component<Props> {
                 />
                 {/* Row 2 */}
                 <SecondaryKeypadButton
-                    keyConfig={Keys.X}
+                    keyConfig={Keys.x}
                     onClickKey={onClickKey}
                     style={{
                         gridColumn: 5,

package/src/components/keypad/index.tsx

@@ -3,17 +3,19 @@ import * as React from "react";
 
 import Tabbar from "../tabbar/tabbar";
 
-import NumericInputPage from "./numeric-input-page";
-import PreAlgebraPage from "./pre-algebra-page";
-import TrigonometryPage from "./trigonometry-page";
+import GeometryPage from "./geometry-page";
+import NumbersPage from "./numbers-page";
+import {NumbersPageOptions} from "./numbers-page/types";
+import OperatorsPage from "./operators-page";
+import {OperatorsButtonSets} from "./operators-page/types";
 
 import type {TabbarItemType} from "../tabbar/types";
 
-type Props = {
+export type Props = {
     onClickKey: (keyConfig: string) => void;
-    preAlgebra: boolean;
-    trigonometry: boolean;
-};
+    trigonometry?: boolean;
+} & OperatorsButtonSets &
+    NumbersPageOptions;
 type State = {
     selectedPage: TabbarItemType;
 };
@@ -21,7 +23,13 @@ type State = {
 const allPages = function (props: Props): React.ReactElement {
     const pages: Array<TabbarItemType> = ["Numbers"];
 
-    if (props.preAlgebra) {
+    if (
+        // OperatorsButtonSets
+        props.preAlgebra ||
+        props.logarithms ||
+        props.basicRelations ||
+        props.advancedRelations
+    ) {
         pages.push("Operators");
     }
     if (props.trigonometry) {
@@ -37,7 +45,6 @@ export default class Keypad extends React.Component<Props, State> {
     };
     render(): React.ReactNode {
         const {selectedPage} = this.state;
-        const {onClickKey} = this.props;
 
         const availablePages = allPages(this.props);
 
@@ -50,14 +57,12 @@ export default class Keypad extends React.Component<Props, State> {
                         this.setState({selectedPage: tabbarItem});
                     }}
                 />
-                {selectedPage === "Numbers" && (
-                    <NumericInputPage onClickKey={onClickKey} />
-                )}
+                {selectedPage === "Numbers" && <NumbersPage {...this.props} />}
                 {selectedPage === "Operators" && (
-                    <PreAlgebraPage onClickKey={onClickKey} />
+                    <OperatorsPage {...this.props} />
                 )}
                 {selectedPage === "Geometry" && (
-                    <TrigonometryPage onClickKey={onClickKey} />
+                    <GeometryPage {...this.props} />
                 )}
             </View>
         );

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

@@ -0,0 +1,69 @@
+import MathQuill from "mathquill";
+import * as React from "react";
+
+import Key from "../../data/keys";
+import keyTranslator from "../key-translator";
+
+import Keypad from "./index";
+
+export default {
+    title: "v2 Keypad With Mathquill",
+};
+
+const mathQuillConfig = {
+    autoCommands: "pi theta phi sqrt nthroot",
+    charsThatBreakOutOfSupSub: "+-*/=<>≠≤≥",
+    supSubsRequireOperand: true,
+    spaceBehavesLikeTab: true,
+};
+
+export function V2KeypadWithMathquill() {
+    const mathquillWrapperRef = React.useRef<HTMLDivElement>(null);
+    const [mathQuill, setMathQuill] = React.useState<MathQuill>();
+
+    React.useEffect(() => {
+        if (!mathQuill && mathquillWrapperRef.current) {
+            const MQ = MathQuill.getInterface(2);
+            const mathQuillInstance = MQ.MathField(
+                mathquillWrapperRef.current,
+                mathQuillConfig,
+            );
+            setMathQuill(mathQuillInstance);
+        }
+    }, [mathQuill]);
+
+    function handleClickKey(key: Key) {
+        if (!mathQuill) {
+            return;
+        }
+
+        const mathQuillCallback = keyTranslator[key];
+        if (mathQuillCallback) {
+            mathQuillCallback(mathQuill, key);
+        } else {
+            // eslint-disable-next-line no-console
+            console.warn(`No translation to Mathquill for: ${key}`);
+        }
+    }
+
+    return (
+        <div style={{maxWidth: "400px", margin: "2em"}}>
+            <div
+                ref={mathquillWrapperRef}
+                style={{width: "100%", marginBottom: "1em"}}
+            />
+            <div>
+                <Keypad
+                    onClickKey={handleClickKey}
+                    advancedRelations
+                    basicRelations
+                    divisionKey
+                    logarithms
+                    multiplicationDot
+                    preAlgebra
+                    trigonometry
+                />
+            </div>
+        </div>
+    );
+}

package/src/components/keypad/keypad-page-items.tsx

@@ -1,10 +1,11 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import * as React from "react";
 
+import {KeyConfig} from "../../types";
+
 import Button from "./button";
 import ButtonAsset from "./button-assets";
 
-import type {KeyConfig} from "../../data/key-configs";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 type KeypadPageContainerProps = {
@@ -29,7 +30,7 @@ export const KeypadPageContainer = ({
     </View>
 );
 
-type KeypadButtonProps = {
+export type KeypadButtonProps = {
     keyConfig: KeyConfig;
     tintColor?: string;
     style?: StyleType;
@@ -89,24 +90,37 @@ export const KeypadActionButton = ({
     />
 );
 
-export const PlaceHolderButton = (): React.ReactElement => (
-    <View
-        style={{
-            height: "100%",
-            width: "100%",
-            boxSizing: "border-box",
-            borderRadius: 7,
-            border: "4px solid transparent",
-        }}
-    >
-        <View
-            style={{
-                background: "rgba(33, 36, 44, 0.04)",
-                width: "100%",
-                height: "100%",
-                borderRadius: 4,
-                border: `1px solid transparent`,
-            }}
-        />
-    </View>
+/**
+ * A placeholder button for the keypad. Optional count prop to render multiple
+ * buttons. Defaults to 1.
+ */
+export const PlaceHolderButtons = ({
+    count = 1,
+}: {
+    count?: number;
+}): React.ReactElement => (
+    <React.Fragment>
+        {Array.from({length: count}).map((_, index) => (
+            <View
+                key={index}
+                style={{
+                    height: "100%",
+                    width: "100%",
+                    boxSizing: "border-box",
+                    borderRadius: 7,
+                    border: "4px solid transparent",
+                }}
+            >
+                <View
+                    style={{
+                        background: "rgba(33, 36, 44, 0.04)",
+                        width: "100%",
+                        height: "100%",
+                        borderRadius: 4,
+                        border: `1px solid transparent`,
+                    }}
+                />
+            </View>
+        ))}
+    </React.Fragment>
 );

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

@@ -2,9 +2,9 @@ import {action} from "@storybook/addon-actions";
 import {withKnobs} from "@storybook/addon-knobs";
 import * as React from "react";
 
-import NumericInputPage from "./numeric-input-page";
-import PrealgebraInputPage from "./pre-algebra-page";
-import TrigonometryInputPage from "./trigonometry-page";
+import GeometryInputPage from "./geometry-page";
+import NumbersPage from "./numbers-page";
+import PrealgebraInputPage from "./operators-page";
 
 export default {
     title: "Keypad pages",
@@ -18,7 +18,7 @@ export default {
 };
 
 export const NumericInput = (): React.ReactElement => (
-    <NumericInputPage onClickKey={action("onClickKey")} />
+    <NumbersPage onClickKey={action("onClickKey")} />
 );
 
 export const PreAlgebraInput = (): React.ReactElement => (
@@ -26,5 +26,5 @@ export const PreAlgebraInput = (): React.ReactElement => (
 );
 
 export const TrigonometryInput = (): React.ReactElement => (
-    <TrigonometryInputPage onClickKey={action("onClickKey")} />
+    <GeometryInputPage onClickKey={action("onClickKey")} />
 );

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

@@ -1,33 +1,91 @@
 import {action} from "@storybook/addon-actions";
-import {withKnobs} from "@storybook/addon-knobs";
 import {INITIAL_VIEWPORTS} from "@storybook/addon-viewport";
+import {ComponentStory} from "@storybook/react";
 import * as React from "react";
 
-import Keypad from "./index";
+import Keypad, {Props as KeypadProps} from "./index";
+
+const opsPage = "Operators Page";
+const numsPage = "Numbers Page";
+const geoPage = "Geometry Page";
 
 export default {
     title: "Full Keypad",
-    decorators: [withKnobs],
     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,
+        multiplicationDot: false,
+        preAlgebra: false,
+        trigonometry: false,
+    },
+    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,
+            },
+        },
+        multiplicationDot: {
+            control: "boolean",
+            table: {
+                category: numsPage,
+            },
+        },
+        preAlgebra: {
+            control: "boolean",
+            table: {
+                category: opsPage,
+            },
+        },
+        trigonometry: {
+            control: "boolean",
+            table: {
+                category: geoPage,
+            },
+        },
+    },
 };
 
-export const PreAlgebra = (): React.ReactElement => (
-    <Keypad
-        onClickKey={action("onClickKey")}
-        preAlgebra={true}
-        trigonometry={false}
-    />
-);
+const Template: ComponentStory<typeof Keypad> = (
+    args: KeypadProps,
+): React.ReactElement => <Keypad {...args} onClickKey={action("onClickKey")} />;
+
+export const Default = Template.bind({});
 
-export const Trigonometry = (): React.ReactElement => (
-    <Keypad
-        onClickKey={action("onClickKey")}
-        preAlgebra={true}
-        trigonometry={true}
-    />
-);
+export const PreAlgebra = Template.bind({});
+PreAlgebra.args = {
+    preAlgebra: true,
+};
+
+export const Trigonometry = Template.bind({});
+Trigonometry.args = {
+    preAlgebra: true,
+    trigonometry: true,
+};

package/src/components/keypad/{numeric-input-page.tsx → numbers-page/index.tsx}

@@ -1,19 +1,20 @@
 import * as React from "react";
 
-import Keys from "../../data/key-configs";
-
+import Keys from "../../../data/key-configs";
 import {
     KeypadPageContainer,
     KeypadButton,
     SecondaryKeypadButton,
     KeypadActionButton,
-} from "./keypad-page-items";
+} from "../keypad-page-items";
+
+import {NumbersPageOptions} from "./types";
 
 type Props = {
     onClickKey: (keyConfig: string) => void;
-};
+} & NumbersPageOptions;
 
-export default class NumericInputPage extends React.Component<Props> {
+export default class NumbersPage extends React.Component<Props> {
     render(): React.ReactNode {
         const {onClickKey} = this.props;
         return (
@@ -23,7 +24,29 @@ export default class NumericInputPage extends React.Component<Props> {
                 <KeypadButton keyConfig={Keys.NUM_8} onClickKey={onClickKey} />
                 <KeypadButton keyConfig={Keys.NUM_9} onClickKey={onClickKey} />
                 <SecondaryKeypadButton
-                    keyConfig={Keys.TIMES}
+                    keyConfig={Keys.DIVIDE}
+                    style={
+                        this.props.divisionKey
+                            ? {
+                                  gridColumn: "4",
+                                  gridRow: "1",
+                              }
+                            : {
+                                  display: "none",
+                              }
+                    }
+                    onClickKey={onClickKey}
+                />
+                <SecondaryKeypadButton
+                    keyConfig={
+                        this.props.multiplicationDot ? Keys.CDOT : Keys.TIMES
+                    }
+                    style={
+                        this.props.divisionKey && {
+                            gridColumn: "4",
+                            gridRow: "2",
+                        }
+                    }
                     onClickKey={onClickKey}
                 />
                 <SecondaryKeypadButton
@@ -42,6 +65,12 @@ export default class NumericInputPage extends React.Component<Props> {
 
                 <SecondaryKeypadButton
                     keyConfig={Keys.MINUS}
+                    style={
+                        this.props.divisionKey && {
+                            gridColumn: "4",
+                            gridRow: "3",
+                        }
+                    }
                     onClickKey={onClickKey}
                 />
 
@@ -59,11 +88,18 @@ export default class NumericInputPage extends React.Component<Props> {
 
                 <SecondaryKeypadButton
                     keyConfig={Keys.PLUS}
-                    style={{
-                        gridColumn: "4",
-                        gridRowStart: "3",
-                        gridRowEnd: "5",
-                    }}
+                    style={
+                        this.props.divisionKey
+                            ? {
+                                  gridColumn: "4",
+                                  gridRow: "4",
+                              }
+                            : {
+                                  gridColumn: "4",
+                                  gridRowStart: "3",
+                                  gridRowEnd: "5",
+                              }
+                    }
                     onClickKey={onClickKey}
                 />
 

package/src/components/keypad/numbers-page/types.ts

@@ -0,0 +1,4 @@
+export type NumbersPageOptions = {
+    multiplicationDot?: boolean;
+    divisionKey?: boolean;
+};

package/src/components/keypad/operators-page/advanced-relations-buttons.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import Keys from "../../../data/key-configs";
+import {PlaceHolderButtons, SecondaryKeypadButton} from "../keypad-page-items";
+
+type Props = {
+    onClickKey: (keyConfig: string) => void;
+    placeholder?: boolean;
+};
+
+export const AdvancedRelations = ({
+    onClickKey,
+    placeholder,
+}: Props): React.ReactElement =>
+    placeholder ? (
+        <PlaceHolderButtons count={3} />
+    ) : (
+        <React.Fragment>
+            <SecondaryKeypadButton
+                keyConfig={Keys.NEQ}
+                onClickKey={onClickKey}
+            />
+            <SecondaryKeypadButton
+                keyConfig={Keys.LEQ}
+                onClickKey={onClickKey}
+            />
+            <SecondaryKeypadButton
+                keyConfig={Keys.GEQ}
+                onClickKey={onClickKey}
+            />
+        </React.Fragment>
+    );

package/src/components/keypad/operators-page/basic-relations-buttons.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import Keys from "../../../data/key-configs";
+import {PlaceHolderButtons, SecondaryKeypadButton} from "../keypad-page-items";
+
+type Props = {
+    onClickKey: (keyConfig: string) => void;
+    placeholder?: boolean;
+};
+
+export const BasicRelations = ({
+    onClickKey,
+    placeholder,
+}: Props): React.ReactElement =>
+    placeholder ? (
+        <PlaceHolderButtons count={3} />
+    ) : (
+        <React.Fragment>
+            <SecondaryKeypadButton
+                keyConfig={Keys.EQUAL}
+                onClickKey={onClickKey}
+            />
+            <SecondaryKeypadButton
+                keyConfig={Keys.LT}
+                onClickKey={onClickKey}
+            />
+            <SecondaryKeypadButton
+                keyConfig={Keys.GT}
+                onClickKey={onClickKey}
+            />
+        </React.Fragment>
+    );