refactor: reuse input and tag input components from react-kit

package.json

@@ -46,7 +46,7 @@
   "dependencies": {
     "@apollo/client": "^3.8.1",
     "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
-    "@bosonprotocol/react-kit": "^0.31.1",
+    "@bosonprotocol/react-kit": "^0.32.0-alpha.1",
     "@davatar/react": "^1.10.4",
     "@ethersproject/address": "^5.6.1",
     "@ethersproject/units": "^5.7.0",

src/components/form/Input.tsx

@@ -1,57 +1,14 @@
-import { ClearButton } from "components/ui/ClearButton";
-import { Grid } from "components/ui/Grid";
+import { BaseInput } from "@bosonprotocol/react-kit";
 import { useField, useFormikContext } from "formik";
-import { forwardRef, useMemo } from "react";
-import styled from "styled-components";
+import { forwardRef } from "react";
+import { inputTheme } from "theme";
 
 import Error from "./Error";
-import { FieldInput } from "./Field.styles";
 import type { InputProps } from "./types";
-const StyledFieldInput = styled(FieldInput)`
-  padding-right: calc(1rem + 12px);
-`;
-const StyledClearButton = styled(ClearButton)`
-  top: 1px;
-  height: calc(100% - 4px);
-  margin-left: 0;
-`;
-export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ name, isClearable, ...props }, ref) => {
-    const { status, setFieldValue } = useFormikContext();
-    const [field, meta] = useField(name);
-    const errorText = meta.error || status?.[name];
-    const errorMessage = errorText && meta.touched ? errorText : "";
-    const displayError =
-      typeof errorMessage === typeof "string" && errorMessage !== "";
-    const InputComponent = useMemo(() => {
-      return isClearable ? (
-        <Grid style={{ position: "relative" }}>
-          <StyledFieldInput
-            error={errorMessage}
-            {...field}
-            {...props}
-            ref={ref}
-          />
-          {isClearable && (
-            <StyledClearButton onClick={() => setFieldValue(name, "")} />
-          )}
-        </Grid>
-      ) : (
-        <FieldInput error={errorMessage} {...field} {...props} ref={ref} />
-      );
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [errorMessage, field, isClearable, name, props, ref]);
-    return (
-      <>
-        {InputComponent}
-        <Error
-          display={!props.hideError && displayError}
-          message={errorMessage}
-        />
-      </>
-    );
-  }
-);
+
+export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  return <BaseInput {...props} ref={ref} theme={inputTheme} />;
+});
 
 export const InputError = ({ name }: Pick<InputProps, "name">) => {
   const { status } = useFormikContext();

src/components/form/TagsInput.tsx

@@ -1,122 +1,8 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useField, useFormikContext } from "formik";
-import { KeyReturn } from "phosphor-react";
-import { useEffect, useRef } from "react";
+import { BaseTagsInput, BaseTagsInputProps } from "@bosonprotocol/react-kit";
+import { inputTheme } from "theme";
 
-import { Grid } from "../ui/Grid";
-import { Typography } from "../ui/Typography";
-import Error from "./Error";
-import { FieldInput } from "./Field.styles";
-import {
-  Close,
-  Helper,
-  TagContainer,
-  TagWrapper
-} from "./styles/TagsInput.styles";
-import { TagsProps } from "./types";
-
-const TagsInput = ({
-  name,
-  placeholder,
-  onAddTag,
-  onRemoveTag,
-  compareTags = (tagA: string, tagB: string) =>
-    tagA.toLowerCase() === tagB.toLowerCase(),
-  transform = (tag: string) => tag,
-  label
-}: TagsProps) => {
-  const { validateForm } = useFormikContext();
-  const [field, meta, helpers] = useField<string[]>(name);
-  const tags = field.value || [];
-
-  const errorMessage = meta.error && meta.touched ? meta.error : "";
-  const displayError =
-    typeof errorMessage === typeof "string" && errorMessage !== "";
-
-  const handleBlur = () => {
-    if (!meta.touched) {
-      helpers.setTouched(true);
-    }
-  };
-
-  function handleKeyDown(event: any) {
-    if (event.key !== "Enter") return;
-    event.preventDefault();
-    const value: string = event.target.value;
-    if (!value.trim()) return;
-    event.target.value = "";
-    if (!meta.touched) {
-      helpers.setTouched(true);
-    }
-
-    if (!tags.find((tag) => compareTags(tag, value))) {
-      const transformedValue = transform(value);
-      const newTags = [...tags, transformedValue];
-      helpers.setValue(newTags);
-      onAddTag?.(transformedValue);
-    }
-  }
-
-  function removeTag(index: number) {
-    const filteredTags = tags.filter((_, i) => i !== index);
-    helpers.setValue(filteredTags);
-    if (!meta.touched) {
-      helpers.setTouched(true);
-    }
-    onRemoveTag?.(tags[index]);
-  }
-  useEffect(() => {
-    validateForm();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [field.value]);
-  const labelRef = useRef<HTMLDivElement>(null);
-  const hitEnterWidth = useRef<HTMLDivElement>(null);
-  return (
-    <>
-      <Grid gap="0.5rem" alignItems="center">
-        {label && (
-          <Typography data-label ref={labelRef}>
-            {label}
-          </Typography>
-        )}
-        <TagContainer>
-          <FieldInput
-            onKeyDown={handleKeyDown}
-            type="text"
-            placeholder={placeholder || "Choose tags..."}
-            name={name}
-            onBlur={handleBlur}
-            error={errorMessage}
-            {...(hitEnterWidth.current?.clientWidth && {
-              style: {
-                paddingRight: `calc(${hitEnterWidth.current.clientWidth}px + 1rem)`
-              }
-            })}
-          />
-          <Helper ref={hitEnterWidth}>
-            Hit Enter <KeyReturn size={13} />
-          </Helper>
-        </TagContainer>
-      </Grid>
-      <TagContainer>
-        {label && (
-          <div
-            style={{
-              visibility: "hidden",
-              width: labelRef.current?.clientWidth
-            }}
-          />
-        )}
-        {tags.map((tag: string, index: number) => (
-          <TagWrapper key={`tags-wrapper_${tag}`}>
-            <span className="text tag">{tag}</span>
-            <Close onClick={() => removeTag(index)}>&times;</Close>
-          </TagWrapper>
-        ))}
-      </TagContainer>
-      <Error display={displayError} message={errorMessage} />{" "}
-    </>
-  );
+const TagsInput = (props: Omit<BaseTagsInputProps, "theme">) => {
+  return <BaseTagsInput {...props} theme={inputTheme} />;
 };
 
 export default TagsInput;

src/theme.ts

@@ -1,9 +1,38 @@
 import "styled-components";
 
-import { theme as bosonTheme } from "@bosonprotocol/react-kit";
+import {
+  BaseTagsInputProps,
+  theme as bosonTheme
+} from "@bosonprotocol/react-kit";
+import { colors } from "lib/styles/colors";
 
 const theme = {
   ...bosonTheme
 };
 
+export const inputTheme = {
+  background: colors.lightGrey,
+  borderColor: colors.border,
+  borderRadius: 0,
+  focus: {
+    caretColor: "initial"
+  },
+  hover: {
+    borderColor: "var(--secondary)"
+  },
+  error: {
+    borderColor: colors.orange,
+    hover: {
+      borderColor: colors.orange
+    },
+    focus: {
+      borderColor: "var(--secondary)",
+      caretColor: colors.orange
+    },
+    placeholder: {
+      color: colors.orange
+    }
+  }
+} satisfies BaseTagsInputProps["theme"];
+
 export default theme;