lint everything

src/components/decks/cards-table.tsx

@@ -3,45 +3,45 @@ import { Card } from '@/services/decks'
 import { formatDate } from '@/utils'
 
 const columns: Column[] = [
-  {
-    key: 'question',
-    sortable: true,
-    title: 'Question',
-  },
-  {
-    key: 'answer',
-    sortable: true,
-    title: 'Answer',
-  },
-  {
-    key: 'updated',
-    sortable: true,
-    title: 'Last Updated',
-  },
-  {
-    key: 'grade',
-    sortable: true,
-    title: 'Grade',
-  },
+    {
+        key: 'question',
+        sortable: true,
+        title: 'Question',
+    },
+    {
+        key: 'answer',
+        sortable: true,
+        title: 'Answer',
+    },
+    {
+        key: 'updated',
+        sortable: true,
+        title: 'Last Updated',
+    },
+    {
+        key: 'grade',
+        sortable: true,
+        title: 'Grade',
+    },
 ]
 
 type Props = {
-  cards: Card[] | undefined
+    cards: Card[] | undefined
 }
 export const CardsTable = ({ cards }: Props) => {
-  return (
-    <Table>
-      <TableHeader columns={columns} />
-      <TableBody>
-        {cards?.map(card => (
-          <TableRow key={card.id}>
-            <TableCell>{card.question}</TableCell>
-            <TableCell>{card.answer}</TableCell>
-            <TableCell>{formatDate(card.updated)}</TableCell>
-            <TableCell>{card.grade}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  )
+    return (
+        <Table>
+            <TableHeader columns={columns} />
+            <TableBody>
+                {cards?.map(card => (
+                    <TableRow key={card.id}>
+                        <TableCell>{card.question}</TableCell>
+                        <TableCell>{card.answer}</TableCell>
+                        <TableCell>{formatDate(card.updated)}</TableCell>
+                        <TableCell>{card.grade}</TableCell>
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
+    )
 }

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

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

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

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

src/components/decks/decks-table.tsx

@@ -2,86 +2,89 @@ import { Link } from 'react-router-dom'
 
 import { Edit2Outline, PlayCircleOutline, TrashOutline } from '@/assets'
 import {
-  Button,
-  Column,
-  Table,
-  TableBody,
-  TableCell,
-  TableHeader,
-  TableRow,
-  Typography,
+    Button,
+    Column,
+    Table,
+    TableBody,
+    TableCell,
+    TableHeader,
+    TableRow,
+    Typography,
 } from '@/components'
 import { Deck } from '@/services/decks'
 import { formatDate } from '@/utils'
 
 import s from './decks-table.module.scss'
 const columns: Column[] = [
-  {
-    key: 'name',
-    title: 'Name',
-  },
-  {
-    key: 'cardsCount',
-    title: 'Cards',
-  },
-  {
-    key: 'updated',
-    title: 'Last Updated',
-  },
-  {
-    key: 'author',
-    title: 'Created By',
-  },
-  {
-    key: 'actions',
-    title: '',
-  },
+    {
+        key: 'name',
+        title: 'Name',
+    },
+    {
+        key: 'cardsCount',
+        title: 'Cards',
+    },
+    {
+        key: 'updated',
+        title: 'Last Updated',
+    },
+    {
+        key: 'author',
+        title: 'Created By',
+    },
+    {
+        key: 'actions',
+        title: '',
+    },
 ]
 
 type Props = {
-  currentUserId: string
-  decks: Deck[] | undefined
-  onDeleteClick: (id: string) => void
-  onEditClick: (id: string) => void
+    currentUserId: string
+    decks: Deck[] | undefined
+    onDeleteClick: (id: string) => void
+    onEditClick: (id: string) => void
 }
 export const DecksTable = ({ currentUserId, decks, onDeleteClick, onEditClick }: Props) => {
-  const handleEditClick = (id: string) => () => onEditClick(id)
-  const handleDeleteClick = (id: string) => () => onDeleteClick(id)
+    const handleEditClick = (id: string) => () => onEditClick(id)
+    const handleDeleteClick = (id: string) => () => onDeleteClick(id)
 
-  return (
-    <Table>
-      <TableHeader columns={columns} />
-      <TableBody>
-        {decks?.map(deck => (
-          <TableRow key={deck.id}>
-            <TableCell>
-              <Typography as={Link} to={`/decks/${deck.id}`} variant={'body2'}>
-                {deck.name}
-              </Typography>
-            </TableCell>
-            <TableCell>{deck.cardsCount}</TableCell>
-            <TableCell>{formatDate(deck.updated)}</TableCell>
-            <TableCell>{deck.author.name}</TableCell>
-            <TableCell>
-              <div className={s.iconsContainer}>
-                <Button as={Link} to={`/decks/${deck.id}/learn`} variant={'icon'}>
-                  <PlayCircleOutline />
-                </Button>
-                {deck.author.id === currentUserId && (
-                  <>
-                    <Button onClick={handleEditClick(deck.id)} variant={'icon'}>
-                      <Edit2Outline />
-                    </Button>
-                    <Button onClick={handleDeleteClick(deck.id)} variant={'icon'}>
-                      <TrashOutline />
-                    </Button>
-                  </>
-                )}
-              </div>
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  )
+    return (
+        <Table>
+            <TableHeader columns={columns} />
+            <TableBody>
+                {decks?.map(deck => (
+                    <TableRow key={deck.id}>
+                        <TableCell>
+                            <Typography as={Link} to={`/decks/${deck.id}`} variant={'body2'}>
+                                {deck.name}
+                            </Typography>
+                        </TableCell>
+                        <TableCell>{deck.cardsCount}</TableCell>
+                        <TableCell>{formatDate(deck.updated)}</TableCell>
+                        <TableCell>{deck.author.name}</TableCell>
+                        <TableCell>
+                            <div className={s.iconsContainer}>
+                                <Button as={Link} to={`/decks/${deck.id}/learn`} variant={'icon'}>
+                                    <PlayCircleOutline />
+                                </Button>
+                                {deck.author.id === currentUserId && (
+                                    <>
+                                        <Button onClick={handleEditClick(deck.id)} variant={'icon'}>
+                                            <Edit2Outline />
+                                        </Button>
+                                        <Button
+                                            onClick={handleDeleteClick(deck.id)}
+                                            variant={'icon'}
+                                        >
+                                            <TrashOutline />
+                                        </Button>
+                                    </>
+                                )}
+                            </div>
+                        </TableCell>
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
+    )
 }

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

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

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

@@ -3,17 +3,17 @@ import { Dialog, DialogProps } from '@/components'
 import s from './delete-deck-dialog.module.scss'
 export default {}
 type Props = Pick<DialogProps, 'onCancel' | 'onConfirm' | 'onOpenChange' | 'open'> & {
-  deckName: string
+    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>
-  )
+    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>
+    )
 }