@khanacademy/math-input 2.0.0 → 3.0.0

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>
+    );

package/src/components/keypad/{pre-algebra-page.tsx → operators-page/index.tsx}

@@ -1,39 +1,31 @@
 import * as React from "react";
 
-import Keys from "../../data/key-configs";
-
+import Keys from "../../../data/key-configs";
 import {
     KeypadPageContainer,
     SecondaryKeypadButton,
     KeypadActionButton,
-    PlaceHolderButton,
-} from "./keypad-page-items";
+} from "../keypad-page-items";
+
+import {AdvancedRelations} from "./advanced-relations-buttons";
+import {BasicRelations} from "./basic-relations-buttons";
+import {Logarithms} from "./logarithms-buttons";
+import {PreAlgebra} from "./pre-algebra-buttons";
+import {OperatorsButtonSets} from "./types";
 
 type Props = {
     onClickKey: (keyConfig: string) => void;
-};
+} & OperatorsButtonSets;
 
-export default class PreAlgebraPage extends React.Component<Props> {
+export default class OperatorsPage extends React.Component<Props> {
     render(): React.ReactNode {
         const {onClickKey} = this.props;
         return (
             <KeypadPageContainer>
                 {/* Row 1 */}
-                <SecondaryKeypadButton
-                    keyConfig={Keys.EXP_2}
-                    onClickKey={onClickKey}
-                />
-                <SecondaryKeypadButton
-                    keyConfig={Keys.EXP}
-                    onClickKey={onClickKey}
-                />
-                <SecondaryKeypadButton
-                    keyConfig={Keys.SQRT}
-                    onClickKey={onClickKey}
-                />
-                <SecondaryKeypadButton
-                    keyConfig={Keys.RADICAL}
+                <PreAlgebra
                     onClickKey={onClickKey}
+                    placeholder={!this.props.preAlgebra}
                 />
 
                 <SecondaryKeypadButton
@@ -45,9 +37,10 @@ export default class PreAlgebraPage extends React.Component<Props> {
                     onClickKey={onClickKey}
                 />
                 {/* Row 2 */}
-                <PlaceHolderButton />
-                <PlaceHolderButton />
-                <PlaceHolderButton />
+                <Logarithms
+                    onClickKey={onClickKey}
+                    placeholder={!this.props.logarithms}
+                />
                 <SecondaryKeypadButton
                     keyConfig={Keys.X}
                     onClickKey={onClickKey}
@@ -63,9 +56,11 @@ export default class PreAlgebraPage extends React.Component<Props> {
                     }}
                 />
                 {/* Row 3 */}
-                <PlaceHolderButton />
-                <PlaceHolderButton />
-                <PlaceHolderButton />
+                {/* TODO: implement relatons buttons */}
+                <BasicRelations
+                    onClickKey={onClickKey}
+                    placeholder={!this.props.basicRelations}
+                />
                 <SecondaryKeypadButton
                     keyConfig={Keys.PI}
                     onClickKey={onClickKey}
@@ -81,9 +76,10 @@ export default class PreAlgebraPage extends React.Component<Props> {
                     onClickKey={onClickKey}
                 />
                 {/* Row 4 */}
-                <PlaceHolderButton />
-                <PlaceHolderButton />
-                <PlaceHolderButton />
+                <AdvancedRelations
+                    onClickKey={onClickKey}
+                    placeholder={!this.props.advancedRelations}
+                />
                 <KeypadActionButton
                     keyConfig={Keys.DISMISS}
                     style={{

package/src/components/keypad/operators-page/logarithms-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 Logarithms = ({
+    onClickKey,
+    placeholder,
+}: Props): React.ReactElement =>
+    placeholder ? (
+        <PlaceHolderButtons count={3} />
+    ) : (
+        <React.Fragment>
+            <SecondaryKeypadButton
+                keyConfig={Keys.LOG}
+                onClickKey={onClickKey}
+            />
+            <SecondaryKeypadButton
+                keyConfig={Keys.LOG_N}
+                onClickKey={onClickKey}
+            />
+            <SecondaryKeypadButton
+                keyConfig={Keys.LN}
+                onClickKey={onClickKey}
+            />
+        </React.Fragment>
+    );

package/src/components/keypad/operators-page/pre-algebra-buttons.tsx

@@ -0,0 +1,36 @@
+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 PreAlgebra = ({
+    onClickKey,
+    placeholder,
+}: Props): React.ReactElement =>
+    placeholder ? (
+        <PlaceHolderButtons count={4} />
+    ) : (
+        <React.Fragment>
+            <SecondaryKeypadButton
+                keyConfig={Keys.EXP_2}
+                onClickKey={onClickKey}
+            />
+            <SecondaryKeypadButton
+                keyConfig={Keys.EXP}
+                onClickKey={onClickKey}
+            />
+            <SecondaryKeypadButton
+                keyConfig={Keys.SQRT}
+                onClickKey={onClickKey}
+            />
+            <SecondaryKeypadButton
+                keyConfig={Keys.RADICAL}
+                onClickKey={onClickKey}
+            />
+        </React.Fragment>
+    );

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

@@ -0,0 +1,6 @@
+export type OperatorsButtonSets = {
+    preAlgebra?: boolean;
+    logarithms?: boolean;
+    basicRelations?: boolean;
+    advancedRelations?: boolean;
+};

package/src/components/{__tests__ → keypad-legacy/__tests__}/two-page-keypad.test.tsx

@@ -8,7 +8,6 @@ describe("<TwoPageKeyPage />", () => {
         // Arrange
         const wrapper = mount(
             <TwoPageKeypad
-                currentPage={1}
                 leftPage={<p>Left Page</p>}
                 rightPage={<p>Right Page</p>}
             />,
@@ -23,7 +22,6 @@ describe("<TwoPageKeyPage />", () => {
         // Arrange
         const wrapper = mount(
             <TwoPageKeypad
-                currentPage={0}
                 leftPage={<p>Left Page</p>}
                 rightPage={<p>Right Page</p>}
             />,

package/src/components/{compute-layout-parameters.ts → keypad-legacy/compute-layout-parameters.ts}

@@ -19,14 +19,13 @@
  * might need to be.
  */
 
-import {DeviceType, DeviceOrientation, LayoutMode} from "../enums";
-
+import {DeviceType, DeviceOrientation, LayoutMode} from "../../enums";
 import {
     pageIndicatorHeightPx,
     toolbarHeightPx,
     navigationPadWidthPx,
     innerBorderWidthPx,
-} from "./common-style";
+} from "../common-style";
 
 const minButtonHeight = 48;
 const maxButtonSize = 64;

package/src/components/{corner-decal.tsx → keypad-legacy/corner-decal.tsx}

@@ -5,9 +5,8 @@
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import {View} from "../fake-react-native-web/index";
-
-import {offBlack} from "./common-style";
+import {View} from "../../fake-react-native-web/index";
+import {offBlack} from "../common-style";
 
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 

package/src/components/{echo-manager.tsx → keypad-legacy/echo-manager.tsx}

@@ -5,18 +5,17 @@
 import * as React from "react";
 import {TransitionGroup, CSSTransition} from "react-transition-group";
 
-import KeyConfigs from "../data/key-configs";
-import Keys from "../data/keys";
-import {KeyType, EchoAnimationType} from "../enums";
+import KeyConfigs from "../../data/key-configs";
+import Keys from "../../data/keys";
+import {KeyType, EchoAnimationType} from "../../enums";
 
 import KeypadButton from "./keypad-button";
 import * as zIndexes from "./z-indexes";
 
-import type {Border, Bound} from "../types";
+import type {Bound, Echo as EchoType} from "../../types";
 
 type EchoProps = {
     animationDurationMs: number;
-    borders: Border;
     id: Keys;
     initialBounds: Bound;
     onAnimationFinish: () => void;
@@ -34,7 +33,7 @@ class Echo extends React.Component<EchoProps> {
     }
 
     render() {
-        const {borders, id, initialBounds} = this.props;
+        const {id, initialBounds} = this.props;
         const {icon} = KeyConfigs[id];
 
         const containerStyle: any = {
@@ -51,26 +50,14 @@ class Echo extends React.Component<EchoProps> {
         // applied via StyleSheet, will override our inlines.
         return (
             <div style={containerStyle}>
-                <KeypadButton
-                    icon={icon}
-                    type={KeyType.ECHO}
-                    borders={borders}
-                />
+                <KeypadButton icon={icon} type={KeyType.ECHO} />
             </div>
         );
     }
 }
 
-type EchoPropType = {
-    animationId: string;
-    animationType: EchoAnimationType;
-    borders: Border;
-    id: Keys;
-    initialBounds: Bound;
-};
-
 type EchoManagerProps = {
-    echoes: ReadonlyArray<EchoPropType>;
+    echoes: ReadonlyArray<EchoType>;
     onAnimationFinish?: (animationId: string) => void;
 };
 

package/src/components/{empty-keypad-button.tsx → keypad-legacy/empty-keypad-button.tsx}

@@ -5,12 +5,12 @@
 import * as React from "react";
 import {connect} from "react-redux";
 
-import KeyConfigs from "../data/key-configs";
+import KeyConfigs from "../../data/key-configs";
 
 import GestureManager from "./gesture-manager";
 import KeypadButton from "./keypad-button";
 
-import type {State} from "../store/types";
+import type {State} from "./store/types";
 
 interface ReduxProps {
     gestureManager: GestureManager;

package/src/components/{expression-keypad.tsx → keypad-legacy/expression-keypad.tsx}

@@ -6,25 +6,24 @@ import {StyleSheet} from "aphrodite";
 import * as React from "react";
 import {connect} from "react-redux";
 
-import KeyConfigs from "../data/key-configs";
-import {BorderStyles} from "../enums";
-import {View} from "../fake-react-native-web/index";
+import KeyConfigs from "../../data/key-configs";
+import {BorderStyles} from "../../enums";
+import {View} from "../../fake-react-native-web/index";
+import {valueGrey, controlGrey} from "../common-style";
+import {CursorContext} from "../input/cursor-contexts";
 
-import {valueGrey, controlGrey} from "./common-style";
-import {CursorContext} from "./input/cursor-contexts";
 import ManyKeypadButton from "./many-keypad-button";
 import Styles from "./styles";
 import TouchableKeypadButton from "./touchable-keypad-button";
 import TwoPageKeypad from "./two-page-keypad";
 
-import type {State} from "../store/types";
-import type {KeypadLayout} from "../types";
+import type {KeypadLayout} from "../../types";
+import type {State} from "./store/types";
 
 const {row, column, oneColumn, fullWidth, roundedTopLeft, roundedTopRight} =
     Styles;
 
 interface ReduxProps {
-    currentPage: number;
     cursorContext?: CursorContext;
     dynamicJumpOut: boolean;
 }
@@ -48,7 +47,6 @@ export const expressionKeypadLayout: KeypadLayout = {
 class ExpressionKeypad extends React.Component<Props> {
     render() {
         const {
-            currentPage,
             cursorContext,
             dynamicJumpOut,
             extraKeys,
@@ -286,13 +284,7 @@ class ExpressionKeypad extends React.Component<Props> {
             </View>
         );
 
-        return (
-            <TwoPageKeypad
-                currentPage={currentPage}
-                rightPage={rightPage}
-                leftPage={leftPage}
-            />
-        );
+        return <TwoPageKeypad rightPage={rightPage} leftPage={leftPage} />;
     }
 }
 
@@ -313,7 +305,6 @@ const styles = StyleSheet.create({
 
 const mapStateToProps = (state: State): ReduxProps => {
     return {
-        currentPage: state.pager.currentPage,
         cursorContext: state.input.cursor?.context,
         dynamicJumpOut: !state.layout.navigationPadEnabled,
     };

package/src/components/{fraction-keypad.tsx → keypad-legacy/fraction-keypad.tsx}

@@ -6,17 +6,17 @@
 import * as React from "react";
 import {connect} from "react-redux";
 
-import KeyConfigs from "../data/key-configs";
-import {BorderStyles} from "../enums";
-import {View} from "../fake-react-native-web/index";
+import KeyConfigs from "../../data/key-configs";
+import {BorderStyles} from "../../enums";
+import {View} from "../../fake-react-native-web/index";
+import {CursorContext} from "../input/cursor-contexts";
 
-import {CursorContext} from "./input/cursor-contexts";
 import Keypad from "./keypad";
 import Styles from "./styles";
 import TouchableKeypadButton from "./touchable-keypad-button";
 
-import type {State} from "../store/types";
-import type {KeypadLayout} from "../types";
+import type {KeypadLayout} from "../../types";
+import type {State} from "./store/types";
 
 const {row, roundedTopLeft, roundedTopRight} = Styles;
 

package/src/components/{gesture-manager.ts → keypad-legacy/gesture-manager.ts}

@@ -198,8 +198,8 @@ class GestureManager {
      *                              intercepting touch events
      * @param {object} borders - an opaque object describing the node's borders
      */
-    registerDOMNode(id, domNode, childIds, borders) {
-        this.nodeManager.registerDOMNode(id, domNode, childIds, borders);
+    registerDOMNode(id, domNode, childIds) {
+        this.nodeManager.registerDOMNode(id, domNode, childIds);
         this.popoverStateMachine.registerPopover(id, childIds);
     }