feat: Form widget (#58)

.changeset/green-days-exist.md

@@ -0,0 +1,5 @@
+---
+"@babylonlabs-io/bbn-core-ui": minor
+---
+
+add Form widget

package.json

@@ -37,7 +37,8 @@
   "peerDependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tailwind-merge": "^2.5.4"
+    "tailwind-merge": "^2.5.4",
+    "yup": "^1.5.0"
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.9",
@@ -87,7 +88,9 @@
     ]
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.9.1",
     "@popperjs/core": "^2.11.8",
+    "react-hook-form": "^7.54.0",
     "react-popper": "^2.3.0"
   }
 }

src/index.tsx

@@ -13,4 +13,6 @@ export * from "./components/Loader";
 export * from "./components/Table";
 export * from "./components/Popover";
 
+export * from "./widgets/Form";
+
 export { ScrollLocker } from "@/context/Dialog.context";

src/widgets/Form/Form.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import * as yup from "yup";
+
+import { Form } from "./Form";
+import { useField } from "./hooks";
+import { Input } from "@/components/Form";
+
+const meta: Meta<typeof Form> = {
+  component: Form,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const Field = () => {
+  const { error, invalid, ...inputProps } = useField({ name: "test", autoFocus: true, defaultValue: "test" });
+
+  return <Input {...inputProps} state={invalid ? "error" : "default"} stateText={error} />;
+};
+
+const schema = yup
+  .object()
+  .shape({
+    test: yup.string().required(),
+  })
+  .required();
+
+export const Default: Story = {
+  args: {
+    onChange: console.log,
+    schema,
+  },
+  render: (props) => (
+    <Form {...props}>
+      <Field />
+    </Form>
+  ),
+};

src/widgets/Form/Form.tsx

@@ -0,0 +1,66 @@
+import { type PropsWithChildren, useEffect, HTMLProps } from "react";
+import {
+  type DefaultValues,
+  type Mode,
+  type SubmitHandler,
+  type DeepPartial,
+  FormProvider,
+  useForm,
+  Resolver,
+} from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { type ObjectSchema } from "yup";
+import { twJoin } from "tailwind-merge";
+
+export interface FormProps<V extends object> extends PropsWithChildren {
+  className?: string;
+  name?: string;
+  mode?: Mode;
+  reValidateMode?: Exclude<Mode, "onTouched" | "all">;
+  defaultValues?: DefaultValues<V>;
+  schema?: ObjectSchema<V>;
+  formProps?: HTMLProps<HTMLFormElement>;
+  onSubmit?: SubmitHandler<V>;
+  onChange?: (data: DeepPartial<V>) => void;
+}
+
+export function Form<V extends object>({
+  className,
+  name,
+  children,
+  mode = "onBlur",
+  reValidateMode = "onBlur",
+  defaultValues,
+  schema,
+  formProps,
+  onSubmit = () => null,
+  onChange,
+}: FormProps<V>) {
+  const methods = useForm({
+    mode,
+    reValidateMode,
+    defaultValues,
+    resolver: schema ? (yupResolver(schema) as unknown as Resolver<V>) : undefined,
+  });
+
+  useEffect(() => {
+    if (!onChange) return;
+
+    const { unsubscribe } = methods.watch(onChange);
+
+    return unsubscribe;
+  }, [onChange, methods.watch]);
+
+  return (
+    <FormProvider {...methods}>
+      <form
+        className={twJoin("bbn-form", className)}
+        name={name}
+        onSubmit={methods.handleSubmit(onSubmit)}
+        {...formProps}
+      >
+        {children}
+      </form>
+    </FormProvider>
+  );
+}

src/widgets/Form/hooks.ts

@@ -0,0 +1,35 @@
+import { useEffect } from "react";
+import { useController, useFormContext } from "react-hook-form";
+
+interface FieldProps<V> {
+  name: string;
+  defaultValue?: V;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  shouldUnregister?: boolean;
+}
+
+export function useField<V = string>({
+  name,
+  defaultValue,
+  disabled = false,
+  autoFocus = false,
+  shouldUnregister = false,
+}: FieldProps<V>) {
+  const { setFocus } = useFormContext();
+  const { field, fieldState } = useController({ name, defaultValue, disabled, shouldUnregister });
+  const { invalid, isTouched, error } = fieldState;
+
+  useEffect(() => {
+    if (autoFocus) {
+      setFocus(name);
+    }
+  }, [name]);
+
+  return {
+    ...field,
+    value: field.value as V,
+    invalid: invalid && isTouched,
+    error: error?.message ?? "",
+  };
+}

src/widgets/Form/index.tsx

@@ -0,0 +1,3 @@
+export { useFormContext, useFormState, useWatch } from "react-hook-form";
+export * from "./Form";
+export * from "./hooks";

vite.config.ts

@@ -19,7 +19,7 @@ export default defineConfig({
       fileName: (format) => `index.${format}.js`,
     },
     rollupOptions: {
-      external: ["react", "react-dom", "react/jsx-runtime", "tailwind-merge"],
+      external: ["react", "react-dom", "react/jsx-runtime", "tailwind-merge", "yup"],
       output: {
         sourcemapExcludeSources: true,
       },