@khanacademy/math-input 2.0.0 → 3.0.0

package/dist/types.d.ts

@@ -2,14 +2,14 @@ import Keys from "./data/keys";
 import { BorderDirection, EchoAnimationType, IconType, KeyType, KeypadType } from "./enums";
 import type { CursorContext } from "./components/input/cursor-contexts";
 export type Border = Partial<ReadonlyArray<BorderDirection>>;
-export type Bound = {
+export interface Bound {
     top: number;
     right: number;
     bottom: number;
     left: number;
     height: number;
     width: number;
-};
+}
 export type Popover = {
     parentId: Keys;
     bounds: Partial<Bound>;
@@ -18,21 +18,26 @@ export type Popover = {
 export type Echo = {
     animationId: string;
     animationType: EchoAnimationType;
-    borders: Border;
     id: Keys;
-    initialBounds: DOMRect;
+    initialBounds: Bound;
 };
 export type IconConfig = {
     type: IconType;
     data: string;
 };
-export type KeyConfig = {
-    ariaLabel: string;
+export type NonManyKeyConfig = {
     id: Keys;
     type: KeyType;
-    childKeyIds: Array<Keys>;
     icon: IconConfig;
+    ariaLabel: string;
+};
+export type ManyKeyConfig = {
+    id: "MANY";
+    type: KeyType.MANY;
+    childKeyIds: ReadonlyArray<string>;
+    ariaLabel?: string;
 };
+export type KeyConfig = NonManyKeyConfig | ManyKeyConfig;
 export type KeypadConfiguration = {
     keypadType: KeypadType;
     extraKeys?: ReadonlyArray<Keys>;
@@ -56,7 +61,6 @@ export type ActiveNodesObj = {
     focus: string | null;
 };
 export type LayoutProps = {
-    initialBounds: DOMRect;
-    borders: Border;
+    initialBounds: Bound;
 };
 export {};

package/dist/types.js.flow

@@ -14,14 +14,14 @@ import {
 } from "./enums";
 import type { CursorContext } from "./components/input/cursor-contexts";
 export type Border = $Rest<$ReadOnlyArray<BorderDirection>, {}>;
-export type Bound = {|
-  top: number,
-  right: number,
-  bottom: number,
-  left: number,
-  height: number,
-  width: number,
-|};
+export interface Bound {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+  height: number;
+  width: number;
+}
 export type Popover = {|
   parentId: Keys,
   bounds: $Rest<Bound, {}>,
@@ -30,21 +30,26 @@ export type Popover = {|
 export type Echo = {|
   animationId: string,
   animationType: EchoAnimationType,
-  borders: Border,
   id: Keys,
-  initialBounds: DOMRect,
+  initialBounds: Bound,
 |};
 export type IconConfig = {|
   type: IconType,
   data: string,
 |};
-export type KeyConfig = {|
-  ariaLabel: string,
+export type NonManyKeyConfig = {|
   id: Keys,
   type: KeyType,
-  childKeyIds: Array<Keys>,
   icon: IconConfig,
+  ariaLabel: string,
+|};
+export type ManyKeyConfig = {|
+  id: "MANY",
+  type: KeyType.MANY,
+  childKeyIds: $ReadOnlyArray<string>,
+  ariaLabel?: string,
 |};
+export type KeyConfig = NonManyKeyConfig | ManyKeyConfig;
 export type KeypadConfiguration = {|
   keypadType: KeypadType,
   extraKeys?: $ReadOnlyArray<Keys>,
@@ -68,6 +73,5 @@ export type ActiveNodesObj = {|
   focus: string | null,
 |};
 export type LayoutProps = {|
-  initialBounds: DOMRect,
-  borders: Border,
+  initialBounds: Bound,
 |};

package/package.json

@@ -3,7 +3,7 @@
     "description": "Khan Academy's new expression editor for the mobile web.",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "2.0.0",
+    "version": "3.0.0",
     "publishConfig": {
         "access": "public"
     },

package/src/components/input/math-input.tsx

@@ -13,7 +13,7 @@ import {
     wonderBlocksBlue,
     offBlack,
 } from "../common-style";
-import ProvidedKeypad from "../provided-keypad";
+import ProvidedKeypad from "../keypad-legacy/provided-keypad";
 
 import CursorHandle from "./cursor-handle";
 import DragListener from "./drag-listener";

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

@@ -181,9 +181,9 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     <path
                         d="M22 10C17 16 17 24 22 30"
                         stroke="#21242C"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
                     />
                 </svg>
             );
@@ -199,9 +199,9 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     <path
                         d="M19 10C24 16 24 24 19 30"
                         stroke="#21242C"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
                     />
                 </svg>
             );
@@ -217,9 +217,9 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     <path
                         d="M27 20H13"
                         stroke="#21242C"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
                     />
                 </svg>
             );
@@ -235,16 +235,16 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     <path
                         d="M27 20H13"
                         stroke="#21242C"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
                     />
                     <path
                         d="M20 13V27"
                         stroke="#21242C"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
                     />
                 </svg>
             );
@@ -260,16 +260,16 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     <path
                         d="M24.9498 24.9493L15.0503 15.0498"
                         stroke="#21242C"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
                     />
                     <path
                         d="M24.9498 15.0507L15.0503 24.9502"
                         stroke="#21242C"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
                     />
                 </svg>
             );
@@ -284,8 +284,8 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     xmlns="http://www.w3.org/2000/svg"
                 >
                     <path
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
+                        fillRule="evenodd"
+                        clipRule="evenodd"
                         d="M10 20L16 14H28.1716V26L16 26L10 20ZM8.58579 18.5858L14.5858 12.5858C14.9609 12.2107 15.4696 12 16 12H28.1716C29.2761 12 30.1716 12.8954 30.1716 14V26C30.1716 27.1046 29.2761 28 28.1716 28H16C15.4696 28 14.9609 27.7893 14.5858 27.4142L8.58579 21.4142C7.80474 20.6332 7.80474 19.3668 8.58579 18.5858ZM22.4645 17.2929L21.1716 18.5858L19.8787 17.2929C19.4882 16.9024 18.855 16.9024 18.4645 17.2929C18.074 17.6834 18.074 18.3166 18.4645 18.7071L19.7574 20L18.4645 21.2929C18.074 21.6834 18.074 22.3166 18.4645 22.7071C18.855 23.0976 19.4882 23.0976 19.8787 22.7071L21.1716 21.4142L22.4645 22.7071C22.855 23.0976 23.4882 23.0976 23.8787 22.7071C24.2693 22.3166 24.2693 21.6834 23.8787 21.2929L22.5858 20L23.8787 18.7071C24.2693 18.3166 24.2693 17.6834 23.8787 17.2929C23.4882 16.9024 22.855 16.9024 22.4645 17.2929Z"
                         fill="#21242C"
                     />
@@ -301,8 +301,8 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     xmlns="http://www.w3.org/2000/svg"
                 >
                     <path
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
+                        fillRule="evenodd"
+                        clipRule="evenodd"
                         d="M10 12C10 10.8954 10.8954 10 12 10H28C29.1046 10 30 10.8954 30 12V21H28V12L12 12V21H10V12ZM19 14C19 13.4477 19.4477 13 20 13C20.5523 13 21 13.4477 21 14C21 14.5523 20.5523 15 20 15C19.4477 15 19 14.5523 19 14ZM17 13C16.4477 13 16 13.4477 16 14C16 14.5523 16.4477 15 17 15C17.5523 15 18 14.5523 18 14C18 13.4477 17.5523 13 17 13ZM13 14C13 13.4477 13.4477 13 14 13C14.5523 13 15 13.4477 15 14C15 14.5523 14.5523 15 14 15C13.4477 15 13 14.5523 13 14ZM20 16C19.4477 16 19 16.4477 19 17C19 17.5523 19.4477 18 20 18C20.5523 18 21 17.5523 21 17C21 16.4477 20.5523 16 20 16ZM16 17C16 16.4477 16.4477 16 17 16C17.5523 16 18 16.4477 18 17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17ZM14 16C13.4477 16 13 16.4477 13 17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17C15 16.4477 14.5523 16 14 16ZM22 14C22 13.4477 22.4477 13 23 13C23.5523 13 24 13.4477 24 14C24 14.5523 23.5523 15 23 15C22.4477 15 22 14.5523 22 14ZM23 16C22.4477 16 22 16.4477 22 17C22 17.5523 22.4477 18 23 18C23.5523 18 24 17.5523 24 17C24 16.4477 23.5523 16 23 16ZM25 14C25 13.4477 25.4477 13 26 13C26.5523 13 27 13.4477 27 14C27 14.5523 26.5523 15 26 15C25.4477 15 25 14.5523 25 14ZM26 16C25.4477 16 25 16.4477 25 17C25 17.5523 25.4477 18 26 18C26.5523 18 27 17.5523 27 17C27 16.4477 26.5523 16 26 16ZM16 20C16 19.4477 16.4477 19 17 19H23C23.5523 19 24 19.4477 24 20C24 20.5523 23.5523 21 23 21H17C16.4477 21 16 20.5523 16 20ZM26.7071 25.7071C27.0976 25.3166 27.0976 24.6834 26.7071 24.2929C26.3166 23.9024 25.6834 23.9024 25.2929 24.2929L20 29.5858L14.7071 24.2929C14.3166 23.9024 13.6834 23.9024 13.2929 24.2929C12.9024 24.6834 12.9024 25.3166 13.2929 25.7071L19.2929 31.7071C19.6834 32.0976 20.3166 32.0976 20.7071 31.7071L26.7071 25.7071Z"
                         fill="#21242C"
                     />
@@ -318,8 +318,8 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     xmlns="http://www.w3.org/2000/svg"
                 >
                     <path
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
+                        fillRule="evenodd"
+                        clipRule="evenodd"
                         d="M16 10C16 9.44772 16.4477 9 17 9H23C23.5523 9 24 9.44772 24 10V16C24 16.5523 23.5523 17 23 17H17C16.4477 17 16 16.5523 16 16V10ZM18 11H22V15H18V11ZM14 20C14 19.4477 14.4477 19 15 19H25C25.5523 19 26 19.4477 26 20C26 20.5523 25.5523 21 25 21H15C14.4477 21 14 20.5523 14 20ZM17 23C16.4477 23 16 23.4477 16 24V30C16 30.5523 16.4477 31 17 31H23C23.5523 31 24 30.5523 24 30V24C24 23.4477 23.5523 23 23 23H17ZM22 25H18V29H22V25Z"
                         fill="#21242C"
                     />
@@ -335,8 +335,8 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     xmlns="http://www.w3.org/2000/svg"
                 >
                     <path
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
+                        fillRule="evenodd"
+                        clipRule="evenodd"
                         d="M12.9571 13.2929C13.3476 13.6834 13.3476 14.3166 12.9571 14.7071C11.6871 15.9771 11 17.9485 11 20C11 22.0515 11.6871 24.0229 12.9571 25.2929C13.3476 25.6834 13.3476 26.3166 12.9571 26.7071C12.5666 27.0976 11.9334 27.0976 11.5429 26.7071C9.81292 24.9771 9 22.4485 9 20C9 17.5515 9.81292 15.0229 11.5429 13.2929C11.9334 12.9024 12.5666 12.9024 12.9571 13.2929ZM14 20C14 19.4477 14.4477 19 15 19H25C25.5523 19 26 19.4477 26 20C26 20.5523 25.5523 21 25 21H15C14.4477 21 14 20.5523 14 20ZM28.4571 13.2929C28.0666 12.9024 27.4334 12.9024 27.0429 13.2929C26.6524 13.6834 26.6524 14.3166 27.0429 14.7071C28.3129 15.9771 29 17.9485 29 20C29 22.0515 28.3129 24.0229 27.0429 25.2929C26.6524 25.6834 26.6524 26.3166 27.0429 26.7071C27.4334 27.0976 28.0666 27.0976 28.4571 26.7071C30.1871 24.9771 31 22.4485 31 20C31 17.5515 30.1871 15.0229 28.4571 13.2929Z"
                         fill="#21242C"
                     />
@@ -351,7 +351,7 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     fill="none"
                     xmlns="http://www.w3.org/2000/svg"
                 >
-                    <g clip-path="url(#clip0)">
+                    <g clipPath="url(#clip0)">
                         <circle cx="20" cy="20" r="1.5" fill="#21242C" />
                     </g>
                     <defs>
@@ -374,8 +374,8 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     xmlns="http://www.w3.org/2000/svg"
                 >
                     <path
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
+                        fillRule="evenodd"
+                        clipRule="evenodd"
                         d="M9.00012 9C9.00012 8.44772 9.44784 8 10.0001 8H16.0001C16.5524 8 17.0001 8.44772 17.0001 9V15C17.0001 15.5523 16.5524 16 16.0001 16H10.0001C9.44784 16 9.00012 15.5523 9.00012 15V9ZM11.0001 10H15.0001V14H11.0001V10ZM23.0001 12C22.6598 12 22.3429 12.173 22.1589 12.4592L13.9849 25.1744L10.8322 20.4453C10.5258 19.9858 9.90493 19.8616 9.44541 20.1679C8.98588 20.4743 8.8617 21.0952 9.16806 21.5547L13.1681 27.5547C13.3552 27.8354 13.6711 28.0028 14.0084 28C14.3457 27.9972 14.6589 27.8245 14.8413 27.5408L23.5461 14H30.0001C30.5524 14 31.0001 13.5523 31.0001 13C31.0001 12.4477 30.5524 12 30.0001 12H23.0001Z"
                         fill="#21242C"
                     />
@@ -393,9 +393,9 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     <path
                         d="M10 21L14 27L23 13H30"
                         stroke="#21242C"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
                     />
                 </svg>
             );
@@ -409,8 +409,8 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     xmlns="http://www.w3.org/2000/svg"
                 >
                     <path
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
+                        fillRule="evenodd"
+                        clipRule="evenodd"
                         d="M33.5791 13.7461C33.4874 13.6545 33.3591 13.6086 33.1941 13.6086H31.4011C31.2397 13.6086 31.0674 13.6251 30.8841 13.6581C30.7007 13.6875 30.5156 13.7296 30.3286 13.7846L32.0226 12.0521C32.2352 11.8358 32.4369 11.6213 32.6276 11.4086C32.8182 11.196 32.9851 10.9778 33.1281 10.7541C33.2747 10.5268 33.3902 10.2885 33.4746 10.0391C33.5589 9.78981 33.6011 9.51847 33.6011 9.22514C33.6011 8.88414 33.5406 8.57247 33.4196 8.29014C33.2986 8.00781 33.1281 7.76764 32.9081 7.56964C32.6881 7.36797 32.4222 7.21214 32.1106 7.10214C31.8026 6.98847 31.4597 6.93164 31.0821 6.93164C30.7227 6.93164 30.3872 6.98114 30.0756 7.08014C29.7639 7.17547 29.4871 7.32031 29.2451 7.51464C29.0031 7.70897 28.8014 7.95281 28.6401 8.24614C28.4787 8.53947 28.3687 8.88047 28.3101 9.26914L29.1131 9.41214C29.3184 9.44514 29.4761 9.43231 29.5861 9.37364C29.6997 9.31131 29.7896 9.18847 29.8556 9.00514C29.8886 8.88781 29.9399 8.77964 30.0096 8.68064C30.0792 8.58164 30.1617 8.49547 30.2571 8.42214C30.3561 8.34881 30.4661 8.29197 30.5871 8.25164C30.7117 8.20764 30.8474 8.18564 30.9941 8.18564C31.3277 8.18564 31.5862 8.27914 31.7696 8.46614C31.9529 8.64947 32.0446 8.91897 32.0446 9.27464C32.0446 9.47631 32.0189 9.66881 31.9676 9.85214C31.9162 10.0355 31.8392 10.217 31.7366 10.3966C31.6339 10.5726 31.5056 10.7541 31.3516 10.9411C31.1976 11.1245 31.0197 11.317 30.8181 11.5186L28.4531 13.8891C28.3577 13.9808 28.2899 14.0835 28.2496 14.1971C28.2092 14.3071 28.1891 14.4098 28.1891 14.5051V15.0001H33.7221V14.1091C33.7221 13.9588 33.6744 13.8378 33.5791 13.7461ZM14 13.0001C14 12.4479 14.4477 12.0001 15 12.0001H25C25.5523 12.0001 26 12.4479 26 13.0001V27.0001C26 27.5524 25.5523 28.0001 25 28.0001H15C14.4477 28.0001 14 27.5524 14 27.0001V13.0001ZM16 14.0001H24V26.0001H16V14.0001Z"
                         fill="#21242C"
                     />
@@ -426,8 +426,8 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                     xmlns="http://www.w3.org/2000/svg"
                 >
                     <path
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
+                        fillRule="evenodd"
+                        clipRule="evenodd"
                         d="M28 8C28 7.44772 28.4477 7 29 7H35C35.5523 7 36 7.44772 36 8V14C36 14.5523 35.5523 15 35 15H29C28.4477 15 28 14.5523 28 14V8ZM30 9H34V13H30V9ZM14 13C14 12.4477 14.4477 12 15 12H25C25.5523 12 26 12.4477 26 13V27C26 27.5523 25.5523 28 25 28H15C14.4477 28 14 27.5523 14 27V13ZM16 14H24V26H16V14Z"
                         fill="#21242C"
                     />
@@ -487,6 +487,31 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
             );
 
         default:
-            throw new Error(`Invalid asset ${id}`);
+            // placeholder
+            return (
+                <svg
+                    width="40"
+                    height="40"
+                    viewBox="0 0 40 40"
+                    fill="black"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <text
+                        y="20"
+                        textLength="100%"
+                        lengthAdjust="spacingAndGlyphs"
+                    >
+                        {id}
+                    </text>
+                    <text
+                        y="35"
+                        textLength="100%"
+                        lengthAdjust="spacingAndGlyphs"
+                        fill="red"
+                    >
+                        placeholder
+                    </text>
+                </svg>
+            );
     }
 }

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 (

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-page-items.tsx

@@ -29,7 +29,7 @@ export const KeypadPageContainer = ({
     </View>
 );
 
-type KeypadButtonProps = {
+export type KeypadButtonProps = {
     keyConfig: KeyConfig;
     tintColor?: string;
     style?: StyleType;
@@ -89,24 +89,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")} />
 );