@khanacademy/wonder-blocks-form 2.2.1

package/src/components/text-field.stories.js

@@ -0,0 +1,513 @@
+// @flow
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+
+import {View, Text} from "@khanacademy/wonder-blocks-core";
+import Color from "@khanacademy/wonder-blocks-color";
+import {Strut} from "@khanacademy/wonder-blocks-layout";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {TextField} from "@khanacademy/wonder-blocks-form";
+import Button from "@khanacademy/wonder-blocks-button";
+
+import type {StoryComponentType} from "@storybook/react";
+
+export default {
+    title: "Form / TextField",
+};
+
+export const text: StoryComponentType = () => {
+    const [value, setValue] = React.useState("");
+
+    const handleChange = (newValue: string) => {
+        setValue(newValue);
+    };
+
+    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            event.currentTarget.blur();
+        }
+    };
+
+    return (
+        <TextField
+            id="tf-1"
+            type="text"
+            value={value}
+            placeholder="Text"
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+        />
+    );
+};
+
+export const number: StoryComponentType = () => {
+    const [value, setValue] = React.useState("12345");
+
+    const handleChange = (newValue: string) => {
+        setValue(newValue);
+    };
+
+    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            event.currentTarget.blur();
+        }
+    };
+
+    return (
+        <TextField
+            id="tf-1"
+            type="number"
+            value={value}
+            placeholder="Number"
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+        />
+    );
+};
+
+export const password: StoryComponentType = () => {
+    const [value, setValue] = React.useState("Password123");
+    const [errorMessage, setErrorMessage] = React.useState();
+    const [focused, setFocused] = React.useState(false);
+
+    const handleChange = (newValue: string) => {
+        setValue(newValue);
+    };
+
+    const validate = (value: string) => {
+        if (value.length < 8) {
+            return "Password must be at least 8 characters long";
+        }
+        if (!/\d/.test(value)) {
+            return "Password must contain a numeric value";
+        }
+    };
+
+    const handleValidate = (errorMessage: ?string) => {
+        setErrorMessage(errorMessage);
+    };
+
+    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            event.currentTarget.blur();
+        }
+    };
+
+    const handleFocus = () => {
+        setFocused(true);
+    };
+
+    const handleBlur = () => {
+        setFocused(false);
+    };
+
+    return (
+        <View>
+            <TextField
+                id="tf-1"
+                type="password"
+                value={value}
+                placeholder="Password"
+                validate={validate}
+                onValidate={handleValidate}
+                onChange={handleChange}
+                onKeyDown={handleKeyDown}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+            />
+            {!focused && errorMessage && (
+                <View>
+                    <Strut size={Spacing.xSmall_8} />
+                    <Text style={styles.errorMessage}>{errorMessage}</Text>
+                </View>
+            )}
+        </View>
+    );
+};
+
+export const email: StoryComponentType = () => {
+    const [value, setValue] = React.useState("khan@khanacademy.org");
+    const [errorMessage, setErrorMessage] = React.useState();
+    const [focused, setFocused] = React.useState(false);
+
+    const handleChange = (newValue: string) => {
+        setValue(newValue);
+    };
+
+    const validate = (value: string) => {
+        const emailRegex = /^[^@\s]+@[^@\s.]+\.[^@.\s]+$/;
+        if (!emailRegex.test(value)) {
+            return "Please enter a valid email";
+        }
+    };
+
+    const handleValidate = (errorMessage: ?string) => {
+        setErrorMessage(errorMessage);
+    };
+
+    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            event.currentTarget.blur();
+        }
+    };
+
+    const handleFocus = () => {
+        setFocused(true);
+    };
+
+    const handleBlur = () => {
+        setFocused(false);
+    };
+
+    return (
+        <View>
+            <TextField
+                id="tf-1"
+                type="email"
+                value={value}
+                placeholder="Email"
+                validate={validate}
+                onValidate={handleValidate}
+                onChange={handleChange}
+                onKeyDown={handleKeyDown}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+            />
+            {!focused && errorMessage && (
+                <View>
+                    <Strut size={Spacing.xSmall_8} />
+                    <Text style={styles.errorMessage}>{errorMessage}</Text>
+                </View>
+            )}
+        </View>
+    );
+};
+
+export const telephone: StoryComponentType = () => {
+    const [value, setValue] = React.useState("123-456-7890");
+    const [errorMessage, setErrorMessage] = React.useState();
+    const [focused, setFocused] = React.useState(false);
+
+    const handleChange = (newValue: string) => {
+        setValue(newValue);
+    };
+
+    const validate = (value: string) => {
+        const telRegex = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
+        if (!telRegex.test(value)) {
+            return "Invalid US telephone number";
+        }
+    };
+
+    const handleValidate = (errorMessage: ?string) => {
+        setErrorMessage(errorMessage);
+    };
+
+    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            event.currentTarget.blur();
+        }
+    };
+
+    const handleFocus = () => {
+        setFocused(true);
+    };
+
+    const handleBlur = () => {
+        setFocused(false);
+    };
+
+    return (
+        <View>
+            <TextField
+                id="tf-1"
+                type="tel"
+                value={value}
+                placeholder="Telephone"
+                validate={validate}
+                onValidate={handleValidate}
+                onChange={handleChange}
+                onKeyDown={handleKeyDown}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+            />
+            {!focused && errorMessage && (
+                <View>
+                    <Strut size={Spacing.xSmall_8} />
+                    <Text style={styles.errorMessage}>{errorMessage}</Text>
+                </View>
+            )}
+        </View>
+    );
+};
+
+export const error: StoryComponentType = () => {
+    const [value, setValue] = React.useState("khan");
+    const [errorMessage, setErrorMessage] = React.useState();
+    const [focused, setFocused] = React.useState(false);
+
+    const handleChange = (newValue: string) => {
+        setValue(newValue);
+    };
+
+    const validate = (value: string) => {
+        const emailRegex = /^[^@\s]+@[^@\s.]+\.[^@.\s]+$/;
+        if (!emailRegex.test(value)) {
+            return "Please enter a valid email";
+        }
+    };
+
+    const handleValidate = (errorMessage: ?string) => {
+        setErrorMessage(errorMessage);
+    };
+
+    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            event.currentTarget.blur();
+        }
+    };
+
+    const handleFocus = () => {
+        setFocused(true);
+    };
+
+    const handleBlur = () => {
+        setFocused(false);
+    };
+
+    return (
+        <View>
+            <TextField
+                id="tf-1"
+                type="email"
+                value={value}
+                placeholder="Email"
+                validate={validate}
+                onValidate={handleValidate}
+                onChange={handleChange}
+                onKeyDown={handleKeyDown}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+            />
+            {!focused && errorMessage && (
+                <View>
+                    <Strut size={Spacing.xSmall_8} />
+                    <Text style={styles.errorMessage}>{errorMessage}</Text>
+                </View>
+            )}
+        </View>
+    );
+};
+
+export const disabled: StoryComponentType = () => (
+    <TextField
+        id="tf-1"
+        value=""
+        placeholder="This field is disabled."
+        onChange={() => {}}
+        disabled={true}
+    />
+);
+
+export const light: StoryComponentType = () => {
+    const [value, setValue] = React.useState("khan@khanacademy.org");
+    const [errorMessage, setErrorMessage] = React.useState();
+    const [focused, setFocused] = React.useState(false);
+
+    const handleChange = (newValue: string) => {
+        setValue(newValue);
+    };
+
+    const validate = (value: string) => {
+        const emailRegex = /^[^@\s]+@[^@\s.]+\.[^@.\s]+$/;
+        if (!emailRegex.test(value)) {
+            return "Please enter a valid email";
+        }
+    };
+
+    const handleValidate = (errorMessage: ?string) => {
+        setErrorMessage(errorMessage);
+    };
+
+    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            event.currentTarget.blur();
+        }
+    };
+
+    const handleFocus = () => {
+        setFocused(true);
+    };
+
+    const handleBlur = () => {
+        setFocused(false);
+    };
+
+    return (
+        <View style={styles.darkBackground}>
+            <TextField
+                id="tf-1"
+                type="email"
+                value={value}
+                placeholder="Email"
+                light={true}
+                validate={validate}
+                onValidate={handleValidate}
+                onChange={handleChange}
+                onKeyDown={handleKeyDown}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+            />
+            {!focused && errorMessage && (
+                <View>
+                    <Strut size={Spacing.xSmall_8} />
+                    <Text style={styles.errorMessageLight}>{errorMessage}</Text>
+                </View>
+            )}
+        </View>
+    );
+};
+
+export const customStyle: StoryComponentType = () => {
+    const [value, setValue] = React.useState("");
+
+    const handleChange = (newValue: string) => {
+        setValue(newValue);
+    };
+
+    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            event.currentTarget.blur();
+        }
+    };
+
+    return (
+        <TextField
+            id="tf-1"
+            style={styles.customField}
+            type="text"
+            value={value}
+            placeholder="Text"
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+        />
+    );
+};
+
+export const ref: StoryComponentType = () => {
+    const [value, setValue] = React.useState("");
+    const inputRef: RefObject<typeof HTMLInputElement> = React.createRef();
+
+    const handleChange = (newValue: string) => {
+        setValue(newValue);
+    };
+
+    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            event.currentTarget.blur();
+        }
+    };
+
+    const handleSubmit = () => {
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    };
+
+    return (
+        <View>
+            <TextField
+                id="tf-1"
+                type="text"
+                value={value}
+                placeholder="Text"
+                onChange={handleChange}
+                onKeyDown={handleKeyDown}
+                ref={inputRef}
+            />
+            <Strut size={Spacing.medium_16} />
+            <Button style={styles.button} onClick={handleSubmit}>
+                Focus Input
+            </Button>
+        </View>
+    );
+};
+
+export const readOnly: StoryComponentType = () => {
+    const [value, setValue] = React.useState("Khan");
+
+    const handleChange = (newValue: string) => {
+        setValue(newValue);
+    };
+
+    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            event.currentTarget.blur();
+        }
+    };
+
+    return (
+        <TextField
+            id="tf-1"
+            type="text"
+            value={value}
+            placeholder="Text"
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            readOnly={true}
+        />
+    );
+};
+
+export const autoComplete: StoryComponentType = () => {
+    const [value, setValue] = React.useState("");
+
+    const handleChange = (newValue: string) => {
+        setValue(newValue);
+    };
+
+    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            event.currentTarget.blur();
+        }
+    };
+
+    return (
+        <TextField
+            id="tf-1"
+            type="text"
+            value={value}
+            placeholder="Name"
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            autoComplete="name"
+        />
+    );
+};
+
+const styles = StyleSheet.create({
+    errorMessage: {
+        color: Color.red,
+        paddingLeft: Spacing.xxxSmall_4,
+    },
+    errorMessageLight: {
+        color: Color.white,
+        paddingLeft: Spacing.xxxSmall_4,
+    },
+    darkBackground: {
+        backgroundColor: Color.darkBlue,
+        padding: Spacing.medium_16,
+    },
+    customField: {
+        backgroundColor: Color.darkBlue,
+        color: Color.white,
+        border: "none",
+        maxWidth: 250,
+        "::placeholder": {
+            color: Color.white64,
+        },
+    },
+    button: {
+        maxWidth: 150,
+    },
+});

package/src/index.js

@@ -0,0 +1,18 @@
+// @flow
+import Checkbox from "./components/checkbox.js";
+import Radio from "./components/radio.js";
+import Choice from "./components/choice.js";
+import CheckboxGroup from "./components/checkbox-group.js";
+import RadioGroup from "./components/radio-group.js";
+import TextField from "./components/text-field.js";
+import LabeledTextField from "./components/labeled-text-field.js";
+
+export {
+    Checkbox,
+    Radio,
+    Choice,
+    CheckboxGroup,
+    RadioGroup,
+    TextField,
+    LabeledTextField,
+};

package/src/util/types.js

@@ -0,0 +1,77 @@
+// @flow
+// NOTE(sophie): Unfortunately, styleguidist does not pull prop definitions
+// from imported types. We've duplicated the shared props for each component
+// they apply to, so that the prop definitions will show up on the generated
+// guide.
+import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
+
+import typeof Choice from "../components/choice.js";
+
+// Shared props for radio-core and checkbox-core
+export type ChoiceCoreProps = {|
+    ...AriaProps,
+    /** Whether this component is checked */
+    checked: boolean,
+    /** Whether this component is disabled */
+    disabled: boolean,
+    /** Whether this component should show an error state */
+    error: boolean,
+    /** Name for the checkbox or radio button group */
+    groupName?: string,
+    /** Unique identifier attached to the HTML input element. If used, need to
+     * guarantee that the ID is unique within everything rendered on a page.
+     * Used to match <label> with <input> elements for screenreaders. */
+    id?: string,
+    /** Optional test ID for e2e testing */
+    testId?: string,
+|};
+
+// Props for checkbox and radio button
+export type ChoiceComponentProps = {|
+    ...ChoiceCoreProps,
+    /** Callback when this component is selected. The newCheckedState is the
+     * new checked state of the component. */
+    onChange: (newCheckedState: boolean) => mixed,
+    /** Optional label for the field. */
+    label?: string,
+    /** Optional description for the field. */
+    description?: string,
+    /** Ignored because only applicable to Choice components in a group. */
+    value?: string,
+    /** Optional styling for the container. Does not style the component. */
+    style?: StyleType,
+|};
+
+export type SharedGroupProps = {|
+    /** Children should be Choice components. */
+    children: Choice,
+    /** Group name for this checkbox or radio group. Should be unique for all
+     * such groups displayed on a page. */
+    groupName: string,
+    /** Optional label for the group. This label is optional to allow for
+     * greater flexibility in implementing checkbox and radio groups. */
+    label?: string,
+    /** Optional description for the group. */
+    description?: string,
+    /** Optional error message. If supplied, the group will be displayed in an
+     * error state, along with this error message. If no error state is desired,
+     * simply do not supply this prop, or pass along null. */
+    errorMessage?: string,
+    /** Custom styling for this group of checkboxes. */
+    style?: StyleType,
+|};
+
+export type CheckboxGroupProps = {|
+    /** Callback for when selection of the group has changed. Passes the newly
+     * selected values. */
+    onChange: (selectedValues: Array<string>) => mixed,
+    /** An array of the values of the selected values in this checkbox group. */
+    selectedValues: Array<string>,
+|};
+
+export type RadioGroupProps = {|
+    /** Callback for when the selected value of the radio group has changed. */
+    onChange: (selectedValue: string) => mixed,
+    /** Value of the selected radio item. */
+    selectedValue: string,
+|};