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>
+  )
+}

src/components/index.ts

@@ -1 +1,2 @@
 export * from './ui'
+export * from './auth'

src/components/ui/controlled/controlled-checkbox/controlled-checkbox.tsx

@@ -0,0 +1,36 @@
+import { FieldValues, useController, UseControllerProps } from 'react-hook-form'
+
+import { Checkbox, CheckboxProps } from '../../'
+
+export type ControlledCheckboxProps<TFieldValues extends FieldValues> =
+  UseControllerProps<TFieldValues> & Omit<CheckboxProps, 'onChange' | 'value' | 'id'>
+
+export const ControlledCheckbox = <TFieldValues extends FieldValues>({
+  name,
+  rules,
+  shouldUnregister,
+  control,
+  defaultValue,
+  ...checkboxProps
+}: ControlledCheckboxProps<TFieldValues>) => {
+  const {
+    field: { onChange, value },
+  } = useController({
+    name,
+    rules,
+    shouldUnregister,
+    control,
+    defaultValue,
+  })
+
+  return (
+    <Checkbox
+      {...{
+        onChange,
+        checked: value,
+        id: name,
+        ...checkboxProps,
+      }}
+    />
+  )
+}

src/components/ui/controlled/controlled-checkbox/index.ts

@@ -0,0 +1 @@
+export * from './controlled-checkbox'

src/components/ui/controlled/index.ts

@@ -0,0 +1 @@
+export * from './controlled-checkbox'

src/components/ui/index.ts

@@ -2,3 +2,5 @@ export * from './button'
 export * from './card'
 export * from './typography'
 export * from './checkbox'
+export * from './text-field'
+export * from './controlled'