✨ add controlled input to use it in forms

packages/kitchen/package.json

@@ -30,6 +30,7 @@
  "@fontsource/figtree": "^5.0.1",
  "@fontsource/fira-code": "^5.0.0",
  "js-cookie": "^3.0.5",
+ "react-hook-form": "^7.45.4",
  "react-icons": "^4.7.1",
  "styled-components": "^6.0.0"
  },

packages/kitchen/src/components/Input/Controlled/index.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import {
+ FieldValues,
+ ControllerProps,
+ Control,
+ Controller,
+ Path,
+} from "react-hook-form";
+import Input, { type InputProps } from "..";
+
+type ControllerPropsEx<F extends FieldValues> = Omit<
+ ControllerProps<F>,
+ "render" | "control" | "name"
+>;
+
+type ControlledType<F extends FieldValues, T> = {
+ name: Path<F>;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ control: Control<any>;
+ controllerProps?: ControllerPropsEx<F>;
+} & T;
+
+type ControlledTextInputProps<F extends FieldValues> = ControlledType<
+ F,
+ Omit<InputProps, "onChange" | "onBlur" | "value" | "errorMessage">
+> &
+ InputProps;
+
+const ControlledInput = React.forwardRef(
+ <F extends FieldValues>(
+ { name, control, controllerProps, ...props }: ControlledTextInputProps<F>,
+ ref: React.Ref<HTMLInputElement>
+ ) => (
+ <Controller
+ name={name}
+ control={control}
+ {...controllerProps}
+ render={({
+ field: { onBlur, onChange, value, name },
+ fieldState: { error },
+ formState: { isSubmitting },
+ }) => (
+ <Input
+ {...props}
+ ref={ref}
+ name={name}
+ value={value}
+ onChange={onChange}
+ onBlur={onBlur}
+ errorMessage={error?.message}
+ disabled={isSubmitting}
+ />
+ )}
+ />
+ )
+);
+
+ControlledInput.displayName = "ControlledInput";
+
+export default ControlledInput;

packages/kitchen/src/components/Input/index.tsx

@@ -70,7 +70,7 @@ const Input = styled(
  label,
  ...props
  }: InputProps) => {
- const inputRef = React.useRef<HTMLInputElement>(null);
+ const inputRef = React.useRef<HTMLInputElement>();
  const [selfValue, setSelfValue] = React.useState<string>(initialValue);
  const [focus, setFocus] = React.useState<boolean>(false);
  const [clearIconHover, setClearIconHover] = React.useState<boolean>(false);

packages/kitchen/src/index.ts

@@ -59,6 +59,8 @@ export type { IconProps } from "./components/Icon";
 export { default as Input } from "./components/Input";
 export type { InputProps } from "./components/Input";
 
+export { default as ControlledInput } from "./components/Input/Controlled";
+
 export { default as Image } from "./components/Image";
 export type { ImageProps } from "./components/Image";