Abstract out validation logic into custom component

src/components/TextInputWithGlyph/TextInputWithGlyph.stories.tsx

@@ -5,6 +5,7 @@ import { CustomStoryObj, CustomMeta } from "test_utils/types";
 import TextInputWithGlyph from ".";
 
 export default {
+  title: "Components/TextInput/TextInputWithGlyph",
   component: TextInputWithGlyph,
 } satisfies CustomMeta<typeof TextInputWithGlyph>;
 

src/components/TextInputWithGlyph/index.tsx

@@ -38,4 +38,5 @@ const IconWrapper = styled.div`
   justify-content: center;
 `;
 
+export type { TextInputWithGlyphProps };
 export default TextInputWithGlyph;

src/components/TextInputWithValidation/TextInputWithValidation.stories.tsx

@@ -0,0 +1,16 @@
+import { CustomMeta, CustomStoryObj } from "test_utils/types";
+import TextInputWithValidation from ".";
+
+export default {
+  title: "Components/TextInput/TextInputWithValidation",
+  component: TextInputWithValidation,
+} satisfies CustomMeta<typeof TextInputWithValidation>;
+
+export const Default: CustomStoryObj<typeof TextInputWithValidation> = {
+  render: (args) => <TextInputWithValidation {...args} />,
+  argTypes: {},
+  args: {
+    validator: (v) => v !== "bad",
+    label: "Some search field",
+  },
+};

src/components/TextInputWithValidation/index.tsx

@@ -0,0 +1,72 @@
+import { useState, forwardRef } from "react";
+import IconButton from "@leafygreen-ui/icon-button";
+import { palette } from "@leafygreen-ui/palette";
+import Icon from "components/Icon";
+import IconTooltip from "components/IconTooltip";
+import TextInputWithGlyph from "components/TextInputWithGlyph";
+import type { TextInputWithGlyphProps } from "components/TextInputWithGlyph";
+
+const { yellow } = palette;
+type TextInputWithValidationProps = {
+  onSubmit?: (value: string) => void;
+  validator?: (value: string) => boolean;
+  validatorErrorMessage?: string;
+  label?: React.ReactNode;
+  placeholder?: string;
+} & TextInputWithGlyphProps;
+
+const TextInputWithValidation: React.FC<TextInputWithValidationProps> =
+  forwardRef((props, ref) => {
+    const {
+      onSubmit = () => {},
+      placeholder = "",
+      validator = () => true,
+      validatorErrorMessage = "",
+      ...rest
+    } = props;
+
+    const [input, setInput] = useState("");
+    const isValid = validator(input);
+
+    const handleOnSubmit = () => {
+      if (isValid) {
+        onSubmit(input);
+        setInput("");
+      }
+    };
+
+    const handleOnChange = (value: string) => {
+      setInput(value);
+    };
+
+    return (
+      <TextInputWithGlyph
+        value={input}
+        type="search"
+        onChange={(e) => handleOnChange(e.target.value)}
+        placeholder={placeholder}
+        onKeyPress={(e: React.KeyboardEvent<HTMLInputElement>) =>
+          e.key === "Enter" && handleOnSubmit()
+        }
+        ref={ref}
+        icon={
+          isValid ? (
+            <IconButton
+              onClick={handleOnSubmit}
+              aria-label="Select plus button"
+            >
+              <Icon glyph="Plus" />
+            </IconButton>
+          ) : (
+            <IconTooltip glyph="Warning" fill={yellow.base}>
+              {validatorErrorMessage}
+            </IconTooltip>
+          )
+        }
+        {...rest}
+      />
+    );
+  });
+
+TextInputWithValidation.displayName = "TextInputWithValidation";
+export default TextInputWithValidation;