feat:#28 add form story (#74)

packages/ui/src/stories/form.stories.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { Button } from '../button';
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../form';
+import { Input } from '../input';
+
+import { Meta, StoryObj } from '@storybook/react';
+
+const formSchema = z.object({
+	username: z.string().min(2, {
+		message: 'Username must be at least 2 characters.',
+	}),
+});
+
+function ProfileForm() {
+	// 1. Define your form.
+	const form = useForm<z.infer<typeof formSchema>>({
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			username: '',
+		},
+	});
+
+	// 2. Define a submit handler.
+	function onSubmit(values: z.infer<typeof formSchema>) {
+		// Do something with the form values.
+		// ✅ This will be type-safe and validated.
+		console.log(values);
+	}
+
+	return (
+		<Form {...form}>
+			<form
+				onSubmit={form.handleSubmit(onSubmit)}
+				className='space-y-8'
+			>
+				<FormField
+					control={form.control}
+					name='username'
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Username</FormLabel>
+							<FormControl>
+								<Input
+									placeholder='shadcn'
+									{...field}
+								/>
+							</FormControl>
+							<FormDescription>This is your public display name.</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+				<Button type='submit'>Submit</Button>
+			</form>
+		</Form>
+	);
+}
+
+const meta = {
+	title: 'CODERUM/Form',
+	component: ProfileForm,
+	parameters: {
+		// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+		layout: 'centered',
+	},
+} satisfies Meta<typeof ProfileForm>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const FormExample: Story = {};

packages/ui/src/styles/tailwind.css

@@ -852,6 +852,12 @@ body {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
+.space-y-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+}
+
 .overflow-hidden {
   overflow: hidden;
 }