add modals

src/components/decks/deck-dialog/deck-dialog.module.scss

@@ -0,0 +1,8 @@
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  width: 100%;
+  padding: 24px;
+}

src/components/decks/deck-dialog/deck-dialog.stories.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react'
+
+import { Meta, StoryObj } from '@storybook/react'
+
+import { DeckDialog } from './'
+
+import { Button } from '@/components'
+
+const meta = {
+  title: 'Decks/Deck Dialog',
+  component: DeckDialog,
+  tags: ['autodocs'],
+} satisfies Meta<typeof DeckDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    open: true,
+    onOpenChange: () => {},
+  },
+  render: args => {
+    const [open, setOpen] = useState(false)
+    const closeModal = () => setOpen(false)
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Modal</Button>
+        <DeckDialog
+          {...args}
+          onOpenChange={setOpen}
+          open={open}
+          onCancel={closeModal}
+          onConfirm={data => {
+            console.log(data)
+            closeModal()
+          }}
+        />
+      </>
+    )
+  },
+}
+
+export const WithDefaultValues: Story = {
+  args: {
+    open: true,
+    onOpenChange: () => {},
+  },
+  render: args => {
+    const [open, setOpen] = useState(false)
+    const closeModal = () => setOpen(false)
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Modal</Button>
+        <DeckDialog
+          {...args}
+          defaultValues={{
+            name: 'some name',
+            isPrivate: true,
+          }}
+          onOpenChange={setOpen}
+          open={open}
+          onCancel={closeModal}
+          onConfirm={data => {
+            console.log(data)
+            closeModal()
+          }}
+        />
+      </>
+    )
+  },
+}

src/components/decks/deck-dialog/deck-dialog.tsx

@@ -0,0 +1,52 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import s from './deck-dialog.module.scss'
+
+import { ControlledCheckbox, ControlledTextField, Dialog, DialogProps } from '@/components'
+
+const newDeckSchema = z.object({
+  name: z.string().min(3).max(50),
+  isPrivate: z.boolean(),
+})
+
+type FormValues = z.infer<typeof newDeckSchema>
+
+type Props = Pick<DialogProps, 'onOpenChange' | 'open' | 'onCancel'> & {
+  onConfirm: (data: FormValues) => void
+  defaultValues?: FormValues
+}
+export const DeckDialog = ({
+  onConfirm,
+  onCancel,
+  defaultValues = { isPrivate: false, name: '' },
+  ...dialogProps
+}: Props) => {
+  const { control, handleSubmit, reset } = useForm<FormValues>({
+    resolver: zodResolver(newDeckSchema),
+    defaultValues,
+  })
+  const onSubmit = handleSubmit(data => {
+    onConfirm(data)
+    reset()
+  })
+  const handleCancel = () => {
+    reset()
+    onCancel?.()
+  }
+
+  return (
+    <Dialog {...dialogProps} title={'Create new deck'} onConfirm={onSubmit} onCancel={handleCancel}>
+      <form className={s.content} onSubmit={onSubmit}>
+        <ControlledTextField name={'name'} control={control} label={'Deck name'} />
+        <ControlledCheckbox
+          name={'isPrivate'}
+          control={control}
+          label={'Private'}
+          position={'left'}
+        />
+      </form>
+    </Dialog>
+  )
+}

src/components/decks/deck-dialog/index.ts

@@ -0,0 +1 @@
+export * from './deck-dialog.tsx'

src/components/decks/delete-deck-dialog/delete-deck-dialog.module.scss

@@ -0,0 +1,8 @@
+.content {
+  padding: 18px 24px;
+
+  > p {
+    margin: 0;
+    padding: 0;
+  }
+}

src/components/decks/delete-deck-dialog/delete-deck-dialog.stories.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react'
+
+import { Meta, StoryObj } from '@storybook/react'
+
+import { DeleteDeckDialog } from './'
+
+import { Button } from '@/components'
+
+const meta = {
+  title: 'Decks/Delete Deck Dialog',
+  component: DeleteDeckDialog,
+  tags: ['autodocs'],
+} satisfies Meta<typeof DeleteDeckDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    deckName: 'Deck Name',
+    open: true,
+    onOpenChange: () => {},
+  },
+  render: args => {
+    const [open, setOpen] = useState(false)
+    const closeModal = () => setOpen(false)
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Modal</Button>
+        <DeleteDeckDialog
+          {...args}
+          onOpenChange={setOpen}
+          open={open}
+          onCancel={closeModal}
+          onConfirm={closeModal}
+        />
+      </>
+    )
+  },
+}

src/components/decks/delete-deck-dialog/delete-deck-dialog.tsx

@@ -0,0 +1,19 @@
+import s from './delete-deck-dialog.module.scss'
+
+import { Dialog, DialogProps } from '@/components'
+export default {}
+type Props = Pick<DialogProps, 'onConfirm' | 'onCancel' | 'open' | 'onOpenChange'> & {
+  deckName: string
+}
+export const DeleteDeckDialog = ({ deckName, ...dialogProps }: Props) => {
+  return (
+    <Dialog {...dialogProps} title={'Delete deck'}>
+      <div className={s.content}>
+        <p>
+          Do you really want to remove <strong>{deckName}</strong>?
+        </p>
+        <p>All cards will be deleted.</p>
+      </div>
+    </Dialog>
+  )
+}

src/components/decks/delete-deck-dialog/index.ts

@@ -0,0 +1 @@
+export * from './delete-deck-dialog'