@purpurds/text-field 3.0.0

package/src/text-field.tsx

@@ -0,0 +1,184 @@
+import React, {
+  ComponentPropsWithoutRef,
+  ForwardedRef,
+  forwardRef,
+  HTMLInputTypeAttribute,
+  ReactNode,
+} from "react";
+import { FieldErrorText } from "@purpurds/field-error-text";
+import { FieldHelperText } from "@purpurds/field-helper-text";
+import { checkCircleFilled, Icon } from "@purpurds/icon";
+import { Label } from "@purpurds/label";
+import { Spinner } from "@purpurds/spinner";
+import c from "classnames";
+
+import styles from "./text-field.module.scss";
+
+export type TextFieldProps = ComponentPropsWithoutRef<"input"> & {
+  id: string;
+  ["data-testid"]?: string;
+  className?: string;
+  /**
+   * Use to display e.g. a button after the text field.
+   *
+   * _NOTE: Should ideally only be used by other purpur components!_
+   */
+  afterField?: ReactNode;
+  /**
+   * Use to display e.g. an icon at the end inside of the text field.
+   *
+   * _NOTE: Should ideally only be used by other purpur components!_
+   */
+  endAdornment?: ReactNode;
+  /**
+   * Use to render error message below the text field. The text field renders with error appearance.
+   * */
+  errorText?: string;
+  /**
+   * Use to give context about the field's input. Renders below the field.
+   * */
+  helperText?: string;
+  /**
+   * The label of the text field.
+   * */
+  label?: string;
+  /**
+   *  Use to render a spinner at the end inside of the text field.
+   */
+  loading?: boolean;
+  /**
+   * Use to display e.g. an icon at the start inside of the text field.
+   *
+   * _NOTE: Should ideally only be used by other purpur components!_
+   */
+  startAdornment?: ReactNode;
+  /**
+   * Use to set the type of the field.
+   */
+  type?: Extract<
+    HTMLInputTypeAttribute,
+    "email" | "number" | "password" | "search" | "tel" | "text"
+  >;
+  /**
+   * Use to render text field with valid appearance. A check
+   * icon will render at the start inside of the input.
+   */
+  valid?: boolean;
+};
+
+const rootClassName = "purpur-text-field";
+
+const TextFieldComponent = (
+  {
+    ["data-testid"]: dataTestId,
+    className,
+    afterField,
+    endAdornment,
+    errorText,
+    helperText,
+    label,
+    loading = false,
+    startAdornment,
+    valid = false,
+    ...inputProps
+  }: TextFieldProps,
+  ref: ForwardedRef<HTMLInputElement>
+) => {
+  const getTestId = (name: string) => (dataTestId ? `${dataTestId}-${name}` : undefined);
+  const isValid = valid && !errorText;
+  const helperTextId = helperText ? `${inputProps.id}-helper-text` : undefined;
+
+  const startAdornments: ReactNode[] = [startAdornment].filter((adornment) => !!adornment);
+
+  const endAdornments: ReactNode[] = [
+    loading && (
+      <Spinner
+        variant={inputProps.disabled ? "disabled" : "primary"}
+        size="xs"
+        data-testid={getTestId("spinner")}
+      />
+    ),
+    isValid && (
+      <Icon
+        data-testid={getTestId("valid-icon")}
+        className={styles[`${rootClassName}__valid-icon`]}
+        svg={checkCircleFilled}
+        size="md"
+      />
+    ),
+    endAdornment,
+  ].filter((adornment) => !!adornment);
+
+  const inputContainerClassnames = c([
+    styles[`${rootClassName}__input-container`],
+    {
+      [styles[`${rootClassName}__input-container--start-adornment`]]: startAdornments.length,
+      [styles[`${rootClassName}__input-container--end-adornment`]]: endAdornments.length,
+      [styles[`${rootClassName}__input-container--disabled`]]: inputProps.disabled,
+      [styles[`${rootClassName}__input-container--readonly`]]:
+        inputProps.readOnly && !inputProps.disabled,
+    },
+  ]);
+
+  return (
+    <div className={c(className, styles[rootClassName])}>
+      {label && (
+        <Label
+          htmlFor={inputProps.id}
+          className={styles[`${rootClassName}__label`]}
+          data-testid={getTestId("label")}
+          disabled={inputProps.disabled}
+        >
+          {`${inputProps.required ? "* " : ""}${label}`}
+        </Label>
+      )}
+      <div className={styles[`${rootClassName}__field-row`]}>
+        <div className={inputContainerClassnames}>
+          {!!startAdornments.length && (
+            <div
+              data-testid={getTestId("start-adornments")}
+              className={styles[`${rootClassName}__adornment-container`]}
+            >
+              {startAdornments}
+            </div>
+          )}
+          <input
+            {...inputProps}
+            ref={ref}
+            data-testid={getTestId("input")}
+            aria-describedby={inputProps["aria-describedby"] || helperTextId}
+            aria-invalid={inputProps["aria-invalid"] || !!errorText}
+            className={c([
+              styles[`${rootClassName}__input`],
+              {
+                [styles[`${rootClassName}__input--valid`]]: isValid,
+                [styles[`${rootClassName}__input--error`]]: !!errorText,
+              },
+            ])}
+          />
+          <div className={styles[`${rootClassName}__frame`]} />
+          {!!endAdornments.length && (
+            <div
+              data-testid={getTestId("end-adornments")}
+              className={styles[`${rootClassName}__adornment-container`]}
+            >
+              {endAdornments}
+            </div>
+          )}
+        </div>
+        {!!afterField && afterField}
+      </div>
+      {helperTextId && (
+        <FieldHelperText data-testid={getTestId("helper-text")} id={helperTextId}>
+          {helperText}
+        </FieldHelperText>
+      )}
+      {errorText && (
+        <FieldErrorText data-testid={getTestId("error-text")}>{errorText}</FieldErrorText>
+      )}
+    </div>
+  );
+};
+
+export const TextField = forwardRef(TextFieldComponent);
+TextField.displayName = "TextField";