@khanacademy/wonder-blocks-form 4.9.1 → 4.9.3

package/src/components/text-field.tsx

@@ -1,437 +0,0 @@
-import * as React from "react";
-import {StyleSheet} from "aphrodite";
-
-import {IDProvider, addStyle} from "@khanacademy/wonder-blocks-core";
-import {border, color, mix, spacing} from "@khanacademy/wonder-blocks-tokens";
-import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
-
-import type {StyleType, AriaProps} from "@khanacademy/wonder-blocks-core";
-import {OmitConstrained} from "../util/types";
-
-export type TextFieldType = "text" | "password" | "email" | "number" | "tel";
-
-type WithForwardRef = {
-    forwardedRef: React.ForwardedRef<HTMLInputElement>;
-};
-
-const defaultErrorMessage = "This field is required.";
-
-const StyledInput = addStyle("input");
-
-type CommonProps = AriaProps & {
-    /**
-     * An optional unique identifier for the TextField.
-     * If no id is specified, a unique id will be auto-generated.
-     */
-    id?: string;
-    /**
-     * The input value.
-     */
-    value: string;
-    /**
-     * The name for the input control. This is submitted along with
-     * the form data.
-     */
-    name?: string;
-    /**
-     * Makes a read-only input field that cannot be focused. Defaults to false.
-     */
-    disabled: boolean;
-    /**
-     * Provide a validation for the input value.
-     * Return a string error message or null | void for a valid input.
-     */
-    validate?: (value: string) => string | null | void;
-    /**
-     * Called right after the TextField input is validated.
-     */
-    onValidate?: (errorMessage?: string | null | undefined) => unknown;
-    /**
-     * Called when the value has changed.
-     */
-    onChange: (newValue: string) => unknown;
-    /**
-     * Called when a key is pressed.
-     */
-    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
-    /**
-     * Called when the element has been focused.
-     */
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
-    /**
-     * Called when the element has been blurred.
-     */
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
-    /**
-     * Provide hints or examples of what to enter.
-     */
-    placeholder?: string;
-    /**
-     * Whether this field is required to to continue, or the error message to
-     * render if this field is left blank.
-     *
-     * This can be a boolean or a string.
-     *
-     * String:
-     * Please pass in a translated string to use as the error message that will
-     * render if the user leaves this field blank. If this field is required,
-     * and a string is not passed in, a default untranslated string will render
-     * upon error.
-     * Note: The string will not be used if a `validate` prop is passed in.
-     *
-     * Example message: i18n._("A password is required to log in.")
-     *
-     * Boolean:
-     * True/false indicating whether this field is required. Please do not pass
-     * in `true` if possible - pass in the error string instead.
-     * If `true` is passed, and a `validate` prop is not passed, that means
-     * there is no corresponding message and the default untranlsated message
-     * will be used.
-     */
-    required?: boolean | string;
-    /**
-     * Change the default focus ring color to fit a dark background.
-     */
-    light: boolean;
-    /**
-     * Custom styles for the input.
-     */
-    style?: StyleType;
-    /**
-     * Optional test ID for e2e testing.
-     */
-    testId?: string;
-    /**
-     * Specifies if the input field is read-only.
-     */
-    readOnly?: boolean;
-    /**
-     * Whether this field should autofocus on page load.
-     */
-    autoFocus?: boolean;
-    /**
-     * Specifies if the input field allows autocomplete.
-     */
-    autoComplete?: string;
-};
-
-type OtherInputProps = CommonProps & {
-    type: "text" | "password" | "email" | "tel";
-};
-
-// Props that are only available for inputs of type "number".
-export type NumericInputProps = {
-    type: "number";
-    /**
-     * The minimum numeric value for the input.
-     */
-    min?: number;
-    /**
-     * The maximum numeric value for the input.
-     */
-    max?: number;
-    /**
-     * The numeric value to increment or decrement by.
-     * Requires the input to be multiples of this value.
-     */
-    step?: number;
-};
-
-type FullNumericInputProps = CommonProps & NumericInputProps;
-type Props = OtherInputProps | FullNumericInputProps;
-type PropsWithForwardRef = Props & WithForwardRef;
-
-type DefaultProps = {
-    type: PropsWithForwardRef["type"];
-    disabled: PropsWithForwardRef["disabled"];
-    light: PropsWithForwardRef["light"];
-};
-
-type State = {
-    /**
-     * Displayed when the validation fails.
-     */
-    error: string | null | undefined;
-};
-
-/**
- * A TextField is an element used to accept a single line of text from the user.
- */
-class TextField extends React.Component<PropsWithForwardRef, State> {
-    static defaultProps: DefaultProps = {
-        type: "text",
-        disabled: false,
-        light: false,
-    };
-
-    constructor(props: PropsWithForwardRef) {
-        super(props);
-        if (props.validate && props.value !== "") {
-            // Ensures error is updated on unmounted server-side renders
-            this.state.error = props.validate(props.value) || null;
-        }
-    }
-
-    state: State = {
-        error: null,
-    };
-
-    componentDidMount() {
-        if (this.props.value !== "") {
-            this.maybeValidate(this.props.value);
-        }
-    }
-
-    maybeValidate: (newValue: string) => void = (newValue) => {
-        const {validate, onValidate, required} = this.props;
-
-        if (validate) {
-            const maybeError = validate(newValue) || null;
-            this.setState({error: maybeError}, () => {
-                if (onValidate) {
-                    onValidate(maybeError);
-                }
-            });
-        } else if (required) {
-            const requiredString =
-                typeof required === "string" ? required : defaultErrorMessage;
-            const maybeError = newValue ? null : requiredString;
-            this.setState({error: maybeError}, () => {
-                if (onValidate) {
-                    onValidate(maybeError);
-                }
-            });
-        }
-    };
-
-    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown = (
-        event,
-    ) => {
-        const {onChange} = this.props;
-        const newValue = event.target.value;
-        this.maybeValidate(newValue);
-        onChange(newValue);
-    };
-
-    handleFocus: (event: React.FocusEvent<HTMLInputElement>) => unknown = (
-        event,
-    ) => {
-        const {onFocus} = this.props;
-        if (onFocus) {
-            onFocus(event);
-        }
-    };
-
-    handleBlur: (event: React.FocusEvent<HTMLInputElement>) => unknown = (
-        event,
-    ) => {
-        const {onBlur} = this.props;
-        if (onBlur) {
-            onBlur(event);
-        }
-    };
-
-    getStyles = (): StyleType => {
-        const {disabled, light} = this.props;
-        const {error} = this.state;
-        // Base styles are the styles that apply regardless of light mode
-        const baseStyles = [styles.input, typographyStyles.LabelMedium];
-        const defaultStyles = [
-            styles.default,
-            !disabled && styles.defaultFocus,
-            disabled && styles.disabled,
-            !!error && styles.error,
-        ];
-        const lightStyles = [
-            styles.light,
-            !disabled && styles.lightFocus,
-            disabled && styles.lightDisabled,
-            !!error && styles.lightError,
-        ];
-        return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
-    };
-
-    render(): React.ReactNode {
-        const {
-            id,
-            type,
-            value,
-            name,
-            disabled,
-            onKeyDown,
-            placeholder,
-            style,
-            testId,
-            readOnly,
-            autoFocus,
-            autoComplete,
-            forwardedRef,
-            // The following props are being included here to avoid
-            // passing them down to the otherProps spread
-            /* eslint-disable @typescript-eslint/no-unused-vars */
-            light,
-            onFocus,
-            onBlur,
-            onValidate,
-            validate,
-            onChange,
-            required,
-            /* eslint-enable @typescript-eslint/no-unused-vars */
-            // Should only include Aria related props
-            ...otherProps
-        } = this.props;
-
-        return (
-            <IDProvider id={id} scope="text-field">
-                {(uniqueId) => (
-                    <StyledInput
-                        style={[this.getStyles(), style]}
-                        id={uniqueId}
-                        type={type}
-                        placeholder={placeholder}
-                        value={value}
-                        name={name}
-                        disabled={disabled}
-                        onChange={this.handleChange}
-                        onKeyDown={onKeyDown}
-                        onFocus={this.handleFocus}
-                        onBlur={this.handleBlur}
-                        data-testid={testId}
-                        readOnly={readOnly}
-                        autoFocus={autoFocus}
-                        autoComplete={autoComplete}
-                        ref={forwardedRef}
-                        {...otherProps}
-                        aria-invalid={this.state.error ? "true" : "false"}
-                    />
-                )}
-            </IDProvider>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    input: {
-        width: "100%",
-        height: 40,
-        borderRadius: border.radius.medium_4,
-        boxSizing: "border-box",
-        paddingLeft: spacing.medium_16,
-        margin: 0,
-    },
-    default: {
-        background: color.white,
-        border: `1px solid ${color.offBlack50}`,
-        color: color.offBlack,
-        "::placeholder": {
-            color: color.offBlack64,
-        },
-    },
-    defaultFocus: {
-        ":focus-visible": {
-            borderColor: color.blue,
-            outline: `1px solid ${color.blue}`,
-            outlineOffset: 0, // Explicitly set outline offset to 0 because Safari sets a default offset
-        },
-    },
-    error: {
-        background: color.fadedRed8,
-        border: `1px solid ${color.red}`,
-        color: color.offBlack,
-        "::placeholder": {
-            color: color.offBlack64,
-        },
-        ":focus-visible": {
-            outlineColor: color.red,
-            borderColor: color.red,
-        },
-    },
-    disabled: {
-        background: color.offWhite,
-        border: `1px solid ${color.offBlack16}`,
-        color: color.offBlack64,
-        "::placeholder": {
-            color: color.offBlack64,
-        },
-        cursor: "not-allowed",
-        ":focus-visible": {
-            outline: "none",
-            boxShadow: `0 0 0 1px ${color.white}, 0 0 0 3px ${color.offBlack32}`,
-        },
-    },
-    light: {
-        background: color.white,
-        border: `1px solid ${color.offBlack16}`,
-        color: color.offBlack,
-        "::placeholder": {
-            color: color.offBlack64,
-        },
-    },
-    lightFocus: {
-        ":focus-visible": {
-            outline: `1px solid ${color.blue}`,
-            outlineOffset: 0, // Explicitly set outline offset to 0 because Safari sets a default offset
-            borderColor: color.blue,
-            boxShadow: `0px 0px 0px 2px ${color.blue}, 0px 0px 0px 3px ${color.white}`,
-        },
-    },
-    lightDisabled: {
-        backgroundColor: "transparent",
-        border: `1px solid ${color.white32}`,
-        color: color.white64,
-        "::placeholder": {
-            color: color.white64,
-        },
-        cursor: "not-allowed",
-        ":focus-visible": {
-            borderColor: mix(color.white32, color.blue),
-            outline: "none",
-            boxShadow: `0 0 0 1px ${color.offBlack32}, 0 0 0 3px ${color.fadedBlue}`,
-        },
-    },
-    lightError: {
-        background: color.fadedRed8,
-        border: `1px solid ${color.red}`,
-        boxShadow: `0px 0px 0px 1px ${color.red}, 0px 0px 0px 2px ${color.white}`,
-        color: color.offBlack,
-        "::placeholder": {
-            color: color.offBlack64,
-        },
-        ":focus-visible": {
-            outlineColor: color.red,
-            borderColor: color.red,
-            boxShadow: `0px 0px 0px 2px ${color.red}, 0px 0px 0px 3px ${color.white}`,
-        },
-    },
-});
-
-type ExportProps = OmitConstrained<
-    JSX.LibraryManagedAttributes<
-        typeof TextField,
-        React.ComponentProps<typeof TextField>
-    >,
-    "forwardedRef"
->;
-
-/**
- * A TextField is an element used to accept a single line of text from the user.
- *
- * ### Usage
- *
- * ```jsx
- * import {TextField} from "@khanacademy/wonder-blocks-form";
- *
- * const [value, setValue] = React.useState("");
- *
- * <TextField
- *     id="some-unique-text-field-id"
- *     value={value}
- *     onChange={setValue}
- * />
- * ```
- */
-export default React.forwardRef<HTMLInputElement, ExportProps>((props, ref) => (
-    <TextField {...props} forwardedRef={ref} />
-)) as React.ForwardRefExoticComponent<
-    ExportProps & React.RefAttributes<HTMLInputElement>
->;

package/src/index.ts

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

package/src/util/types.ts

@@ -1,85 +0,0 @@
-// 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 Choice from "../components/choice";
-
-// Checkbox is in indeterminate state when `checked` is `null` | `undefined`
-export type Checked = boolean | null | undefined;
-
-// Shared props for radio-core and checkbox-core
-export type ChoiceCoreProps = AriaProps & {
-    /** Whether this component is checked */
-    checked: Checked;
-    /** 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;
-    /** Function that executes when the choice is clicked. */
-    onClick: () => void;
-};
-
-// 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) => unknown;
-    /** 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: typeof 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>) => unknown;
-    /** 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) => unknown;
-    /** Value of the selected radio item. */
-    selectedValue: string;
-};
-
-// For more information, see:
-// https://github.com/microsoft/TypeScript/wiki/FAQ#add-a-key-constraint-to-omit
-export type OmitConstrained<T, K> = {
-    [P in keyof T as Exclude<P, K & keyof any>]: T[P];
-};

package/tsconfig-build.json

@@ -1,19 +0,0 @@
-{
-    "exclude": ["dist"],
-    "extends": "../tsconfig-shared.json",
-    "compilerOptions": {
-        "outDir": "./dist",
-        "rootDir": "src",
-    },
-    "references": [
-        {"path": "../wonder-blocks-button/tsconfig-build.json"},
-        {"path": "../wonder-blocks-clickable/tsconfig-build.json"},
-        {"path": "../wonder-blocks-core/tsconfig-build.json"},
-        {"path": "../wonder-blocks-i18n/tsconfig-build.json"},
-        {"path": "../wonder-blocks-icon/tsconfig-build.json"},
-        {"path": "../wonder-blocks-layout/tsconfig-build.json"},
-        {"path": "../wonder-blocks-link/tsconfig-build.json"},
-        {"path": "../wonder-blocks-tokens/tsconfig-build.json"},
-        {"path": "../wonder-blocks-typography/tsconfig-build.json"},
-    ]
-}