@khanacademy/math-input 4.2.0 → 4.3.0

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

@@ -1,12 +0,0 @@
-import * as React from "react";
-import type { StyleType } from "@khanacademy/wonder-blocks-core";
-export type Props = {
-    onPress: () => void;
-    children: React.ReactNode;
-    ariaLabel: string;
-    style?: StyleType;
-    tintColor?: string;
-};
-export default class Button extends React.Component<Props> {
-    render(): React.ReactNode;
-}

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

@@ -1,18 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import * as React from "react";
-import type { StyleType } from "@khanacademy/wonder-blocks-core";
-export type Props = {|
-  onPress: () => void,
-  children: React.Node,
-  ariaLabel: string,
-  style?: StyleType,
-  tintColor?: string,
-|};
-declare export default class Button extends React.Component<Props> {
-  render(): React.Node;
-}

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

@@ -1,10 +0,0 @@
-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

@@ -1,15 +0,0 @@
-/**
- * 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,9 +0,0 @@
-import * as React from "react";
-import { ClickKeyCallback } from "../../../types";
-type Props = {
-    onClickKey: ClickKeyCallback;
-};
-export default class GeometryPage extends React.Component<Props> {
-    render(): React.ReactNode;
-}
-export {};

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

@@ -1,14 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import * as React from "react";
-import { ClickKeyCallback } from "../../../types";
-declare type Props = {|
-  onClickKey: ClickKeyCallback,
-|};
-declare export default class GeometryPage extends React.Component<Props> {
-  render(): React.Node;
-}

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

@@ -1,26 +0,0 @@
-import * as React from "react";
-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;
-type SharedButtonProps = {
-    keyConfig: KeyConfig;
-    style?: StyleType;
-    onClickKey: ClickKeyCallback;
-};
-export type KeypadButtonProps = SharedButtonProps & {
-    tintColor?: string;
-};
-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.
- */
-export declare const PlaceHolderButtons: ({ count, }: {
-    count?: number | undefined;
-}) => React.ReactElement;
-export {};

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

@@ -1,40 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import * as React from "react";
-import { KeyConfig, ClickKeyCallback } from "../../types";
-import type { StyleType } from "@khanacademy/wonder-blocks-core";
-declare type KeypadPageContainerProps = {|
-  children: React.Node,
-|};
-declare export var KeypadPageContainer: (
-  x: KeypadPageContainerProps
-) => React.Element<any>;
-declare type SharedButtonProps = {|
-  keyConfig: KeyConfig,
-  style?: StyleType,
-  onClickKey: ClickKeyCallback,
-|};
-export type KeypadButtonProps = {|
-  ...SharedButtonProps,
-  ...{|
-    tintColor?: string,
-  |},
-|};
-declare export var KeypadButton: (x: KeypadButtonProps) => React.Element<any>;
-declare export var SecondaryKeypadButton: (
-  x: SharedButtonProps
-) => React.Element<any>;
-declare export var KeypadActionButton: (
-  x: SharedButtonProps
-) => React.Element<any>;
-/**
- * A placeholder button for the keypad. Optional count prop to render multiple
- * buttons. Defaults to 1.
- */
-declare export var PlaceHolderButtons: (x: {|
-  count?: number | void,
-|}) => React.Element<any>;

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

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

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

@@ -1,18 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import * as React from "react";
-import { ClickKeyCallback } from "../../../types";
-import { NumbersPageOptions } from "./types";
-declare type Props = {|
-  ...{|
-    onClickKey: ClickKeyCallback,
-  |},
-  ...NumbersPageOptions,
-|};
-declare export default class NumbersPage extends React.Component<Props> {
-  render(): React.Node;
-}

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

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

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

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

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

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

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

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

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

@@ -1,18 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import * as React from "react";
-import { ClickKeyCallback } from "../../../types";
-import { OperatorsButtonSets } from "./types";
-declare type Props = {|
-  ...{|
-    onClickKey: ClickKeyCallback,
-  |},
-  ...OperatorsButtonSets,
-|};
-declare export default class OperatorsPage extends React.Component<Props> {
-  render(): React.Node;
-}

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

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

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

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

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

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

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

@@ -1,12 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-export type OperatorsButtonSets = {|
-  preAlgebra?: boolean,
-  logarithms?: boolean,
-  basicRelations?: boolean,
-  advancedRelations?: boolean,
-|};

package/src/components/keypad/__tests__/Button.test.tsx

@@ -1,51 +0,0 @@
-import {render, screen} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import * as React from "react";
-import "@testing-library/jest-dom";
-
-import Button from "../button";
-
-describe("<Button />", () => {
-    it("uses the aria label", () => {
-        // Arrange
-        render(
-            <Button onPress={() => {}} ariaLabel="Oranges">
-                <p />
-            </Button>,
-        );
-
-        // Assert
-        expect(
-            screen.getByRole("button", {name: "Oranges"}),
-        ).toBeInTheDocument();
-    });
-
-    it("handles callback on press", () => {
-        // Arrange
-        const mockPressCallback = jest.fn();
-        render(
-            <Button onPress={mockPressCallback} ariaLabel="Oranges">
-                <p />
-            </Button>,
-        );
-
-        // Act
-        userEvent.click(screen.getByRole("button", {name: "Oranges"}));
-
-        // Assert
-        expect(mockPressCallback).toHaveBeenCalled();
-    });
-
-    it("renders child", () => {
-        // Arrange
-        render(
-            <Button onPress={() => {}} ariaLabel="Test">
-                <img aria-label="child1" />
-            </Button>,
-        );
-
-        // Assert
-        expect(screen.getByRole("button", {name: "Test"})).toBeInTheDocument();
-        expect(screen.getByRole("img", {name: "child1"})).toBeInTheDocument();
-    });
-});

package/src/components/keypad/button.tsx

@@ -1,108 +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 type {StyleType} from "@khanacademy/wonder-blocks-core";
-
-const styles = StyleSheet.create({
-    base: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        boxShadow: "0px 1px 0px rgba(33, 36, 44, 0.32)",
-        boxSizing: "border-box",
-        background: Color.white,
-        borderRadius: 4,
-        border: `1px solid transparent`,
-        flex: 1,
-        minHeight: 42,
-        minWidth: 42,
-        padding: 1,
-    },
-    hovered: {
-        border: `1px solid ${Color.blue}`,
-        padding: 1,
-        boxShadow: "none",
-    },
-    focused: {
-        border: `2px solid ${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",
-    },
-    outerBoxHover: {
-        border: `2px solid ${Color.blue}`,
-    },
-    outerBoxPressed: {
-        border: "2px solid #1B50B3",
-    },
-    clickable: {
-        width: "100%",
-        height: "100%",
-        boxSizing: "border-box",
-    },
-});
-
-export type Props = {
-    onPress: () => void;
-    children: React.ReactNode;
-    ariaLabel: string;
-    style?: StyleType;
-    tintColor?: string;
-};
-
-export default class Button extends React.Component<Props> {
-    render(): React.ReactNode {
-        const {onPress, ariaLabel, children, style, tintColor} = this.props;
-        return (
-            <View style={style}>
-                <Clickable
-                    onClick={onPress}
-                    style={styles.clickable}
-                    aria-label={ariaLabel}
-                >
-                    {({hovered, focused, pressed}) => {
-                        return (
-                            <View
-                                style={[
-                                    styles.outerBoxBase,
-                                    hovered && styles.outerBoxHover,
-                                    pressed && styles.outerBoxPressed,
-                                ]}
-                            >
-                                <View
-                                    style={[
-                                        styles.base,
-                                        tintColor != null
-                                            ? {background: tintColor}
-                                            : undefined,
-                                        hovered && styles.hovered,
-                                        focused && styles.focused,
-                                        pressed && styles.pressed,
-                                    ]}
-                                >
-                                    {children}
-                                </View>
-                            </View>
-                        );
-                    }}
-                </Clickable>
-            </View>
-        );
-    }
-}

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

@@ -1,27 +0,0 @@
-import * as React from "react";
-
-import Keys from "../../../data/key-configs";
-import Key from "../../../data/keys";
-import {KeypadPageContainer, KeypadButton} from "../keypad-page-items";
-
-type Props = {
-    extraKeys: ReadonlyArray<Key>;
-    onClickKey: (keyConfig: string) => void;
-};
-
-export default class ExtrasPage extends React.Component<Props> {
-    render(): React.ReactNode {
-        const {extraKeys, onClickKey} = this.props;
-        return (
-            <KeypadPageContainer>
-                {extraKeys.map((key) => (
-                    <KeypadButton
-                        key={key}
-                        keyConfig={Keys[key]}
-                        onClickKey={onClickKey}
-                    />
-                ))}
-            </KeypadPageContainer>
-        );
-    }
-}

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

@@ -1,89 +0,0 @@
-import * as React from "react";
-
-import Keys from "../../../data/key-configs";
-import {ClickKeyCallback} from "../../../types";
-import {
-    KeypadPageContainer,
-    SecondaryKeypadButton,
-    KeypadActionButton,
-} from "../keypad-page-items";
-
-type Props = {
-    onClickKey: ClickKeyCallback;
-};
-
-export default class GeometryPage extends React.Component<Props> {
-    render(): React.ReactNode {
-        const {onClickKey} = this.props;
-        return (
-            <KeypadPageContainer>
-                {/* Row 1 */}
-                <SecondaryKeypadButton
-                    keyConfig={Keys.SIN}
-                    onClickKey={onClickKey}
-                />
-                <SecondaryKeypadButton
-                    keyConfig={Keys.COS}
-                    onClickKey={onClickKey}
-                />
-                <SecondaryKeypadButton
-                    keyConfig={Keys.TAN}
-                    onClickKey={onClickKey}
-                />
-
-                <SecondaryKeypadButton
-                    keyConfig={Keys.LEFT_PAREN}
-                    onClickKey={onClickKey}
-                    style={{
-                        gridColumn: 5,
-                    }}
-                />
-                <SecondaryKeypadButton
-                    keyConfig={Keys.RIGHT_PAREN}
-                    onClickKey={onClickKey}
-                    style={{
-                        gridColumn: 6,
-                    }}
-                />
-                {/* Row 2 */}
-                <SecondaryKeypadButton
-                    keyConfig={Keys.x}
-                    onClickKey={onClickKey}
-                    style={{
-                        gridColumn: 5,
-                    }}
-                />
-                <SecondaryKeypadButton
-                    keyConfig={Keys.FRAC_INCLUSIVE}
-                    onClickKey={onClickKey}
-                    style={{
-                        gridColumn: 6,
-                    }}
-                />
-                {/* Row 3 */}
-                <SecondaryKeypadButton
-                    keyConfig={Keys.PI}
-                    onClickKey={onClickKey}
-                    style={{
-                        gridColumn: 5,
-                    }}
-                />
-                <KeypadActionButton
-                    keyConfig={Keys.BACKSPACE}
-                    style={{
-                        gridColumn: "6",
-                    }}
-                    onClickKey={onClickKey}
-                />
-                {/* Row 4 */}
-                <KeypadActionButton
-                    keyConfig={Keys.DISMISS}
-                    style={{
-                        gridColumn: "6",
-                    }}
-                    onClickKey={onClickKey}
-                />
-            </KeypadPageContainer>
-        );
-    }
-}

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

@@ -1,118 +0,0 @@
-import {View} from "@khanacademy/wonder-blocks-core";
-import * as React from "react";
-
-import {KeyConfig, ClickKeyCallback} from "../../types";
-
-import Button from "./button";
-import ButtonAsset from "./button-assets";
-
-import type {StyleType} from "@khanacademy/wonder-blocks-core";
-
-type KeypadPageContainerProps = {
-    children: React.ReactNode;
-};
-
-export const KeypadPageContainer = ({
-    children,
-}: KeypadPageContainerProps): React.ReactElement => (
-    <View
-        style={{
-            backgroundColor: "#DBDCDD",
-            width: "100%",
-            height: 192,
-
-            display: "grid",
-            gridTemplateColumns: "repeat(6, 1fr)",
-            gridTemplateRows: "repeat(4, 1fr)",
-        }}
-    >
-        {children}
-    </View>
-);
-
-type SharedButtonProps = {
-    keyConfig: KeyConfig;
-    style?: StyleType;
-    onClickKey: ClickKeyCallback;
-};
-
-export type KeypadButtonProps = SharedButtonProps & {
-    tintColor?: string;
-};
-
-export const KeypadButton = ({
-    keyConfig,
-    onClickKey,
-    tintColor,
-    style,
-}: KeypadButtonProps): React.ReactElement => (
-    <Button
-        onPress={() => onClickKey(keyConfig.id)}
-        tintColor={tintColor}
-        style={style}
-        ariaLabel={keyConfig.ariaLabel}
-    >
-        <ButtonAsset id={keyConfig.id} />
-    </Button>
-);
-
-export const SecondaryKeypadButton = ({
-    keyConfig,
-    onClickKey,
-    style,
-}: SharedButtonProps): React.ReactElement => (
-    <KeypadButton
-        keyConfig={keyConfig}
-        onClickKey={onClickKey}
-        style={style}
-        tintColor={"#F6F6F7"}
-    />
-);
-
-export const KeypadActionButton = ({
-    keyConfig,
-    onClickKey,
-    style,
-}: SharedButtonProps): React.ReactElement => (
-    <KeypadButton
-        keyConfig={keyConfig}
-        onClickKey={onClickKey}
-        style={style}
-        tintColor={"#DBDCDD"}
-    />
-);
-
-/**
- * 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>
-);