feat: add hidden field (#71)

.changeset/nice-keys-rest.md

@@ -0,0 +1,5 @@
+---
+"@babylonlabs-io/bbn-core-ui": patch
+---
+
+add hidden field

src/index.tsx

@@ -19,6 +19,7 @@ export * from "./widgets/form/TextField";
 export * from "./widgets/form/CheckboxField";
 export * from "./widgets/form/RadioField";
 export * from "./widgets/form/SelectField";
+export * from "./widgets/form/HiddenField";
 export * from "./widgets/form/hooks";
 export * from "./widgets/form/hooks";
 

src/widgets/form/HiddenField/HiddenField.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Form } from "@/widgets/form/Form";
+
+import { HiddenField } from "./HiddenField";
+
+const meta: Meta<typeof HiddenField> = {
+  component: HiddenField,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    name: "hidden_field",
+    value: "test",
+  },
+  decorators: [
+    (Story) => (
+      <Form onChange={console.log}>
+        <Story />
+      </Form>
+    ),
+  ],
+};

src/widgets/form/HiddenField/HiddenField.tsx

@@ -0,0 +1,9 @@
+import type { HTMLProps } from "react";
+import { useFormContext } from "react-hook-form";
+
+export function HiddenField({ name, ...inputProps }: HTMLProps<HTMLInputElement> & { name: string }) {
+  const { register } = useFormContext();
+  const props = register(name);
+
+  return <input {...inputProps} {...props} type="hidden" />;
+}

src/widgets/form/HiddenField/index.ts

@@ -0,0 +1 @@
+export * from "./HiddenField";