lesson 2 finished

src/components/auth/index.ts

@@ -0,0 +1 @@
+export * from './login-form'

src/components/auth/login-form/index.ts

@@ -0,0 +1 @@
+export * from './login-form'

src/components/auth/login-form/login-form.schema.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod'
+
+export const loginSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(3),
+  rememberMe: z.boolean().default(false),
+})
+
+export type LoginFormData = z.infer<typeof loginSchema>

src/components/auth/login-form/login-form.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { LoginForm } from './login-form'
+import { LoginFormData } from './login-form.schema'
+
+const meta = {
+  title: 'Auth/LoginForm',
+  component: LoginForm,
+  tags: ['autodocs'],
+} satisfies Meta<typeof LoginForm>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    onSubmit: (data: LoginFormData) => console.(data),
+  },
+}

src/components/auth/login-form/login-form.tsx

@@ -0,0 +1,36 @@
+import { DevTool } from '@hookform/devtools'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+
+import { LoginFormData, loginSchema } from './login-form.schema'
+
+import { Button, TextField, ControlledCheckbox } from '@/components'
+
+type Props = {
+  onSubmit: (data: LoginFormData) => void
+}
+
+export const LoginForm = ({ onSubmit }: Props) => {
+  const {
+    control,
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginFormData>({
+    resolver: zodResolver(loginSchema),
+  })
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <DevTool control={control} />
+      <TextField {...register('email')} label={'email'} errorMessage={errors.email?.message} />
+      <TextField
+        {...register('password')}
+        label={'password'}
+        errorMessage={errors.password?.message}
+      />
+      <ControlledCheckbox label={'remember me'} control={control} name={'rememberMe'} />
+      <Button type="submit">Submit</Button>
+    </form>
+  )
+}