@khanacademy/math-input 4.0.0 → 4.1.1

package/.eslintrc.js

@@ -6,7 +6,13 @@ module.exports = {
     rules: {
         "import/no-extraneous-dependencies": [
             "error",
-            {packageDir: [__dirname, path.join(__dirname, "../../")]},
+            {
+                packageDir: [__dirname, path.join(__dirname, "../../")],
+                // note(matthewc): I changed this in a time pinch and I'm not sure
+                // it's right so I made a ticket to circle back to it
+                // https://khanacademy.atlassian.net/browse/LC-864
+                devDependencies: ["**/*.stories.tsx", "**/*.test.tsx"],
+            },
         ],
     },
 };

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @khanacademy/math-input
 
+## 4.1.1
+
+### Patch Changes
+
+-   31ed8380: Add math-input v2 keypad tests
+-   937d2308: Added basic Cypress testing for the v2 math-input keypad
+
+## 4.1.0
+
+### Minor Changes
+
+-   a7f56710: add support for extraKeys to the v2 MathInput Keypad
+-   a7f56710: Make tabbar accept styles, create v2 keypad popover example
+
 ## 4.0.0
 
 ### Major Changes

package/dist/components/keypad/button.d.ts

@@ -3,6 +3,7 @@ import type { StyleType } from "@khanacademy/wonder-blocks-core";
 export type Props = {
     onPress: () => void;
     children: React.ReactNode;
+    ariaLabel: string;
     style?: StyleType;
     tintColor?: string;
 };

package/dist/components/keypad/button.js.flow

@@ -9,6 +9,7 @@ import type { StyleType } from "@khanacademy/wonder-blocks-core";
 export type Props = {|
   onPress: () => void,
   children: React.Node,
+  ariaLabel: string,
   style?: StyleType,
   tintColor?: string,
 |};

package/dist/components/keypad/extras-page/index.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import Key from "../../../data/keys";
+type Props = {
+    extraKeys: ReadonlyArray<Key>;
+    onClickKey: (keyConfig: string) => void;
+};
+export default class ExtrasPage extends React.Component<Props> {
+    render(): React.ReactNode;
+}
+export {};

package/dist/components/keypad/extras-page/index.js.flow

@@ -0,0 +1,15 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+import Key from "../../../data/keys";
+declare type Props = {|
+  extraKeys: $ReadOnlyArray<Key>,
+  onClickKey: (keyConfig: string) => void,
+|};
+declare export default class ExtrasPage extends React.Component<Props> {
+  render(): React.Node;
+}

package/dist/components/keypad/geometry-page/index.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
+import { ClickKeyCallback } from "../../../types";
 type Props = {
-    onClickKey: (keyConfig: string) => void;
+    onClickKey: ClickKeyCallback;
 };
 export default class GeometryPage extends React.Component<Props> {
     render(): React.ReactNode;

package/dist/components/keypad/geometry-page/index.js.flow

@@ -5,8 +5,9 @@
  * @flow
  */
 import * as React from "react";
+import { ClickKeyCallback } from "../../../types";
 declare type Props = {|
-  onClickKey: (keyConfig: string) => void,
+  onClickKey: ClickKeyCallback,
 |};
 declare export default class GeometryPage extends React.Component<Props> {
   render(): React.Node;

package/dist/components/keypad/index.d.ts

@@ -1,16 +1,23 @@
 import * as React from "react";
+import Key from "../../data/keys";
+import { ClickKeyCallback } from "../../types";
+import { TabbarItemType } from "../tabbar/types";
 import { NumbersPageOptions } from "./numbers-page/types";
 import { OperatorsButtonSets } from "./operators-page/types";
-import type { TabbarItemType } from "../tabbar/types";
 export type Props = {
-    onClickKey: (keyConfig: string) => void;
+    onClickKey: ClickKeyCallback;
     trigonometry?: boolean;
+    extraKeys: ReadonlyArray<Key>;
 } & OperatorsButtonSets & NumbersPageOptions;
 type State = {
     selectedPage: TabbarItemType;
 };
+type DefaultProps = {
+    extraKeys: Props["extraKeys"];
+};
 export default class Keypad extends React.Component<Props, State> {
     state: State;
+    static defaultProps: DefaultProps;
     render(): React.ReactNode;
 }
 export {};

package/dist/components/keypad/index.js.flow

@@ -5,13 +5,16 @@
  * @flow
  */
 import * as React from "react";
+import Key from "../../data/keys";
+import { ClickKeyCallback } from "../../types";
+import { TabbarItemType } from "../tabbar/types";
 import { NumbersPageOptions } from "./numbers-page/types";
 import { OperatorsButtonSets } from "./operators-page/types";
-import type { TabbarItemType } from "../tabbar/types";
 export type Props = {|
   ...{|
-    onClickKey: (keyConfig: string) => void,
+    onClickKey: ClickKeyCallback,
     trigonometry?: boolean,
+    extraKeys: $ReadOnlyArray<Key>,
   |},
   ...OperatorsButtonSets,
   ...NumbersPageOptions,
@@ -19,7 +22,11 @@ export type Props = {|
 declare type State = {|
   selectedPage: TabbarItemType,
 |};
+declare type DefaultProps = {|
+  extraKeys: $PropertyType<Props, "extraKeys">,
+|};
 declare export default class Keypad extends React.Component<Props, State> {
   state: State;
+  static defaultProps: DefaultProps;
   render(): React.Node;
 }

package/dist/components/keypad/keypad-page-items.d.ts

@@ -1,29 +1,21 @@
 import * as React from "react";
-import { KeyConfig } from "../../types";
+import { KeyConfig, ClickKeyCallback } from "../../types";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 type KeypadPageContainerProps = {
     children: React.ReactNode;
 };
 export declare const KeypadPageContainer: ({ children, }: KeypadPageContainerProps) => React.ReactElement;
-export type KeypadButtonProps = {
-    keyConfig: KeyConfig;
-    tintColor?: string;
-    style?: StyleType;
-    onClickKey: (keyConfig: string) => void;
-};
-export declare const KeypadButton: ({ keyConfig, onClickKey, tintColor, style, }: KeypadButtonProps) => React.ReactElement;
-type SecondaryKeypadButtonProps = {
+type SharedButtonProps = {
     keyConfig: KeyConfig;
     style?: StyleType;
-    onClickKey: (keyConfig: string) => void;
+    onClickKey: ClickKeyCallback;
 };
-export declare const SecondaryKeypadButton: ({ keyConfig, onClickKey, style, }: SecondaryKeypadButtonProps) => React.ReactElement;
-type KeypadActionButtonProps = {
-    keyConfig: KeyConfig;
-    style?: StyleType;
-    onClickKey: (keyConfig: string) => void;
+export type KeypadButtonProps = SharedButtonProps & {
+    tintColor?: string;
 };
-export declare const KeypadActionButton: ({ keyConfig, onClickKey, style, }: KeypadActionButtonProps) => React.ReactElement;
+export declare const KeypadButton: ({ keyConfig, onClickKey, tintColor, style, }: KeypadButtonProps) => React.ReactElement;
+export declare const SecondaryKeypadButton: ({ keyConfig, onClickKey, style, }: SharedButtonProps) => React.ReactElement;
+export declare const KeypadActionButton: ({ keyConfig, onClickKey, style, }: SharedButtonProps) => React.ReactElement;
 /**
  * A placeholder button for the keypad. Optional count prop to render multiple
  * buttons. Defaults to 1.

package/dist/components/keypad/keypad-page-items.js.flow

@@ -5,7 +5,7 @@
  * @flow
  */
 import * as React from "react";
-import { KeyConfig } from "../../types";
+import { KeyConfig, ClickKeyCallback } from "../../types";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 declare type KeypadPageContainerProps = {|
   children: React.Node,
@@ -13,28 +13,23 @@ declare type KeypadPageContainerProps = {|
 declare export var KeypadPageContainer: (
   x: KeypadPageContainerProps
 ) => React.Element<any>;
-export type KeypadButtonProps = {|
+declare type SharedButtonProps = {|
   keyConfig: KeyConfig,
-  tintColor?: string,
   style?: StyleType,
-  onClickKey: (keyConfig: string) => void,
+  onClickKey: ClickKeyCallback,
 |};
-declare export var KeypadButton: (x: KeypadButtonProps) => React.Element<any>;
-declare type SecondaryKeypadButtonProps = {|
-  keyConfig: KeyConfig,
-  style?: StyleType,
-  onClickKey: (keyConfig: string) => void,
+export type KeypadButtonProps = {|
+  ...SharedButtonProps,
+  ...{|
+    tintColor?: string,
+  |},
 |};
+declare export var KeypadButton: (x: KeypadButtonProps) => React.Element<any>;
 declare export var SecondaryKeypadButton: (
-  x: SecondaryKeypadButtonProps
+  x: SharedButtonProps
 ) => React.Element<any>;
-declare type KeypadActionButtonProps = {|
-  keyConfig: KeyConfig,
-  style?: StyleType,
-  onClickKey: (keyConfig: string) => void,
-|};
 declare export var KeypadActionButton: (
-  x: KeypadActionButtonProps
+  x: SharedButtonProps
 ) => React.Element<any>;
 /**
  * A placeholder button for the keypad. Optional count prop to render multiple

package/dist/components/keypad/numbers-page/index.d.ts

@@ -1,7 +1,8 @@
 import * as React from "react";
+import { ClickKeyCallback } from "../../../types";
 import { NumbersPageOptions } from "./types";
 type Props = {
-    onClickKey: (keyConfig: string) => void;
+    onClickKey: ClickKeyCallback;
 } & NumbersPageOptions;
 export default class NumbersPage extends React.Component<Props> {
     render(): React.ReactNode;

package/dist/components/keypad/numbers-page/index.js.flow

@@ -5,10 +5,11 @@
  * @flow
  */
 import * as React from "react";
+import { ClickKeyCallback } from "../../../types";
 import { NumbersPageOptions } from "./types";
 declare type Props = {|
   ...{|
-    onClickKey: (keyConfig: string) => void,
+    onClickKey: ClickKeyCallback,
   |},
   ...NumbersPageOptions,
 |};

package/dist/components/keypad/operators-page/advanced-relations-buttons.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
+import { ClickKeyCallback } from "../../../types";
 type Props = {
-    onClickKey: (keyConfig: string) => void;
+    onClickKey: ClickKeyCallback;
     placeholder?: boolean;
 };
 export declare const AdvancedRelations: ({ onClickKey, placeholder, }: Props) => React.ReactElement;

package/dist/components/keypad/operators-page/advanced-relations-buttons.js.flow

@@ -5,8 +5,9 @@
  * @flow
  */
 import React from "react";
+import { ClickKeyCallback } from "../../../types";
 declare type Props = {|
-  onClickKey: (keyConfig: string) => void,
+  onClickKey: ClickKeyCallback,
   placeholder?: boolean,
 |};
 declare export var AdvancedRelations: (x: Props) => React.ReactElement;

package/dist/components/keypad/operators-page/basic-relations-buttons.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
+import { ClickKeyCallback } from "../../../types";
 type Props = {
-    onClickKey: (keyConfig: string) => void;
+    onClickKey: ClickKeyCallback;
     placeholder?: boolean;
 };
 export declare const BasicRelations: ({ onClickKey, placeholder, }: Props) => React.ReactElement;

package/dist/components/keypad/operators-page/basic-relations-buttons.js.flow

@@ -5,8 +5,9 @@
  * @flow
  */
 import React from "react";
+import { ClickKeyCallback } from "../../../types";
 declare type Props = {|
-  onClickKey: (keyConfig: string) => void,
+  onClickKey: ClickKeyCallback,
   placeholder?: boolean,
 |};
 declare export var BasicRelations: (x: Props) => React.ReactElement;

package/dist/components/keypad/operators-page/index.d.ts

@@ -1,7 +1,8 @@
 import * as React from "react";
+import { ClickKeyCallback } from "../../../types";
 import { OperatorsButtonSets } from "./types";
 type Props = {
-    onClickKey: (keyConfig: string) => void;
+    onClickKey: ClickKeyCallback;
 } & OperatorsButtonSets;
 export default class OperatorsPage extends React.Component<Props> {
     render(): React.ReactNode;

package/dist/components/keypad/operators-page/index.js.flow

@@ -5,10 +5,11 @@
  * @flow
  */
 import * as React from "react";
+import { ClickKeyCallback } from "../../../types";
 import { OperatorsButtonSets } from "./types";
 declare type Props = {|
   ...{|
-    onClickKey: (keyConfig: string) => void,
+    onClickKey: ClickKeyCallback,
   |},
   ...OperatorsButtonSets,
 |};

package/dist/components/keypad/operators-page/logarithms-buttons.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
+import { ClickKeyCallback } from "../../../types";
 type Props = {
-    onClickKey: (keyConfig: string) => void;
+    onClickKey: ClickKeyCallback;
     placeholder?: boolean;
 };
 export declare const Logarithms: ({ onClickKey, placeholder, }: Props) => React.ReactElement;

package/dist/components/keypad/operators-page/logarithms-buttons.js.flow

@@ -5,8 +5,9 @@
  * @flow
  */
 import React from "react";
+import { ClickKeyCallback } from "../../../types";
 declare type Props = {|
-  onClickKey: (keyConfig: string) => void,
+  onClickKey: ClickKeyCallback,
   placeholder?: boolean,
 |};
 declare export var Logarithms: (x: Props) => React.ReactElement;

package/dist/components/keypad/operators-page/pre-algebra-buttons.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
+import { ClickKeyCallback } from "../../../types";
 type Props = {
-    onClickKey: (keyConfig: string) => void;
+    onClickKey: ClickKeyCallback;
     placeholder?: boolean;
 };
 export declare const PreAlgebra: ({ onClickKey, placeholder, }: Props) => React.ReactElement;

package/dist/components/keypad/operators-page/pre-algebra-buttons.js.flow

@@ -5,8 +5,9 @@
  * @flow
  */
 import React from "react";
+import { ClickKeyCallback } from "../../../types";
 declare type Props = {|
-  onClickKey: (keyConfig: string) => void,
+  onClickKey: ClickKeyCallback,
   placeholder?: boolean,
 |};
 declare export var PreAlgebra: (x: Props) => React.ReactElement;

package/dist/components/keypad-legacy/two-page-keypad.d.ts

@@ -2,6 +2,7 @@
  * A keypad with two pages of keys.
  */
 import * as React from "react";
+import { TabbarItemType } from "../tabbar/types";
 interface ReduxProps {
     paginationEnabled: boolean;
 }
@@ -9,10 +10,11 @@ interface Props extends ReduxProps {
     leftPage: React.ReactNode;
     rightPage: React.ReactNode;
 }
-declare class TwoPageKeypad extends React.Component<Props> {
-    state: {
-        selectedPage: string;
-    };
+type State = {
+    selectedPage: TabbarItemType;
+};
+declare class TwoPageKeypad extends React.Component<Props, State> {
+    state: State;
     render(): JSX.Element;
 }
 declare const _default: import("react-redux").ConnectedComponent<typeof TwoPageKeypad, import("react-redux").Omit<React.ClassAttributes<TwoPageKeypad> & Props, "paginationEnabled">>;

package/dist/components/keypad-legacy/two-page-keypad.js.flow

@@ -6,6 +6,7 @@
  */
 import * as $Flowgen$Import$react_2d_redux from "react-redux";
 import * as React from "react";
+import { TabbarItemType } from "../tabbar/types";
 declare interface ReduxProps {
   paginationEnabled: boolean;
 }
@@ -13,10 +14,11 @@ declare type Props = {
   leftPage: React.Node,
   rightPage: React.Node,
 } & ReduxProps;
-declare class TwoPageKeypad extends React.Component<Props> {
-  state: {|
-    selectedPage: string,
-  |};
+declare type State = {|
+  selectedPage: TabbarItemType,
+|};
+declare class TwoPageKeypad extends React.Component<Props, State> {
+  state: State;
   render(): React$Node;
 }
 declare var _default: $Flowgen$Import$react_2d_redux.ConnectedComponent<

package/dist/components/tabbar/tabbar.d.ts

@@ -1,14 +1,11 @@
+import { StyleType } from "@khanacademy/wonder-blocks-core";
 import * as React from "react";
-import type { TabbarItemType } from "./types";
-type TabbarState = {
-    selectedItem: number;
-};
+import { TabbarItemType } from "./types";
 type Props = {
     items: ReadonlyArray<TabbarItemType>;
-    onSelect: (item: TabbarItemType) => void;
+    selectedItem: TabbarItemType;
+    onSelectItem: (item: TabbarItemType) => void;
+    style?: StyleType;
 };
-declare class Tabbar extends React.Component<Props, TabbarState> {
-    state: TabbarState;
-    render(): React.ReactNode;
-}
+declare function Tabbar(props: Props): React.ReactElement;
 export default Tabbar;

package/dist/components/tabbar/tabbar.js.flow

@@ -4,17 +4,14 @@
  * Flowgen v1.21.0
  * @flow
  */
+import { StyleType } from "@khanacademy/wonder-blocks-core";
 import * as React from "react";
-import type { TabbarItemType } from "./types";
-declare type TabbarState = {|
-  selectedItem: number,
-|};
+import { TabbarItemType } from "./types";
 declare type Props = {|
   items: $ReadOnlyArray<TabbarItemType>,
-  onSelect: (item: TabbarItemType) => void,
+  selectedItem: TabbarItemType,
+  onSelectItem: (item: TabbarItemType) => void,
+  style?: StyleType,
 |};
-declare class Tabbar extends React.Component<Props, TabbarState> {
-  state: TabbarState;
-  render(): React.Node;
-}
+declare function Tabbar(props: Props): React.Element<any>;
 declare export default typeof Tabbar;

package/dist/components/tabbar/types.d.ts

@@ -1 +1 @@
-export type TabbarItemType = "Geometry" | "Operators" | "Numbers";
+export type TabbarItemType = "Geometry" | "Operators" | "Numbers" | "Extras";

package/dist/components/tabbar/types.js.flow

@@ -4,4 +4,4 @@
  * Flowgen v1.21.0
  * @flow
  */
-export type TabbarItemType = "Geometry" | "Operators" | "Numbers";
+export type TabbarItemType = "Geometry" | "Operators" | "Numbers" | "Extras";