add modals

2025-12-16 12:33:18 +00:00 · 2023-10-09 12:13:45 +02:00
parent 575b14c9b4
commit 5e37027dbf
25 changed files with 600 additions and 35 deletions
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
    "@fontsource/roboto": "^5.0.5",
    "@hookform/resolvers": "^3.1.1",
    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-radio-group": "^1.1.3",
    "@radix-ui/react-slider": "^1.1.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ dependencies:
  '@radix-ui/react-checkbox':
    specifier: ^1.0.4
    version: 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
+  '@radix-ui/react-dialog':
+    specifier: ^1.0.5
+    version: 1.0.5(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
  '@radix-ui/react-label':
    specifier: ^2.0.2
    version: 2.0.2(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
@@ -2256,6 +2259,40 @@ packages:
      '@types/react': 18.2.15
      react: 18.2.0

+  /@radix-ui/react-dialog@1.0.5(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.15)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.15)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.15)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.15)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.15)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.15)(react@18.2.0)
+      '@types/react': 18.2.15
+      '@types/react-dom': 18.2.7
+      aria-hidden: 1.2.3
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-remove-scroll: 2.5.5(@types/react@18.2.15)(react@18.2.0)
+    dev: false
+
  /@radix-ui/react-direction@1.0.1(@types/react@18.2.15)(react@18.2.0):
    resolution: {integrity: sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==}
    peerDependencies:
@@ -2293,6 +2330,31 @@ packages:
      react: 18.2.0
      react-dom: 18.2.0(react@18.2.0)

+  /@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.15)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.15)(react@18.2.0)
+      '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.2.15)(react@18.2.0)
+      '@types/react': 18.2.15
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
  /@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.15)(react@18.2.0):
    resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
    peerDependencies:
@@ -2328,6 +2390,29 @@ packages:
      react: 18.2.0
      react-dom: 18.2.0(react@18.2.0)

+  /@radix-ui/react-focus-scope@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.15)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.15)(react@18.2.0)
+      '@types/react': 18.2.15
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
  /@radix-ui/react-id@1.0.1(@types/react@18.2.15)(react@18.2.0):
    resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
    peerDependencies:
@@ -2412,6 +2497,27 @@ packages:
      react: 18.2.0
      react-dom: 18.2.0(react@18.2.0)

+  /@radix-ui/react-portal@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
+      '@types/react': 18.2.15
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
  /@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
    peerDependencies:
--- a/src/components/decks/deck-dialog/deck-dialog.module.scss
+++ b/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;
+}
--- a/src/components/decks/deck-dialog/deck-dialog.stories.tsx
+++ b/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()
+          }}
+        />
+      </>
+    )
+  },
+}
--- a/src/components/decks/deck-dialog/deck-dialog.tsx
+++ b/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>
+  )
+}
--- a/src/components/decks/deck-dialog/index.ts
+++ b/src/components/decks/deck-dialog/index.ts
@@ -0,0 +1 @@
+export * from './deck-dialog.tsx'
--- a/src/components/decks/delete-deck-dialog/delete-deck-dialog.module.scss
+++ b/src/components/decks/delete-deck-dialog/delete-deck-dialog.module.scss
@@ -0,0 +1,8 @@
+.content {
+  padding: 18px 24px;
+
+  > p {
+    margin: 0;
+    padding: 0;
+  }
+}
--- a/src/components/decks/delete-deck-dialog/delete-deck-dialog.stories.tsx
+++ b/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}
+        />
+      </>
+    )
+  },
+}
--- a/src/components/decks/delete-deck-dialog/delete-deck-dialog.tsx
+++ b/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>
+  )
+}
--- a/src/components/decks/delete-deck-dialog/index.ts
+++ b/src/components/decks/delete-deck-dialog/index.ts
@@ -0,0 +1 @@
+export * from './delete-deck-dialog'
--- a/src/components/ui/dialog/dialog.module.scss
+++ b/src/components/ui/dialog/dialog.module.scss
@@ -0,0 +1,6 @@
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 24px 36px;
+}
--- a/src/components/ui/dialog/dialog.stories.tsx
+++ b/src/components/ui/dialog/dialog.stories.tsx
@@ -0,0 +1,35 @@
+import { useState } from 'react'
+
+import { Meta, StoryObj } from '@storybook/react'
+
+import { Dialog } from './'
+
+const meta = {
+  title: 'Components/Dialog',
+  component: Dialog,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Dialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    open: true,
+    onOpenChange: () => {},
+    title: 'Modal',
+    children: 'Modal',
+  },
+  render: args => {
+    const [open, setOpen] = useState(false)
+
+    return (
+      <>
+        <button onClick={() => setOpen(true)}>Open Modal</button>
+        <Dialog {...args} onOpenChange={setOpen} open={open}>
+          Dialog content here
+        </Dialog>
+      </>
+    )
+  },
+}
--- a/src/components/ui/dialog/dialog.tsx
+++ b/src/components/ui/dialog/dialog.tsx
@@ -0,0 +1,30 @@
+import s from './dialog.module.scss'
+
+import { Button, Modal, ModalProps } from '@/components'
+
+export type DialogProps = ModalProps & {
+  confirmText?: string
+  cancelText?: string
+  onConfirm?: () => void
+  onCancel?: () => void
+}
+export const Dialog = ({
+  children,
+  onCancel,
+  onConfirm,
+  confirmText = 'OK',
+  cancelText = 'Cancel',
+  ...modalProps
+}: DialogProps) => {
+  return (
+    <Modal {...modalProps}>
+      {children}
+      <div className={s.buttons}>
+        <Button variant={'secondary'} onClick={onCancel}>
+          {cancelText}
+        </Button>
+        <Button onClick={onConfirm}>{confirmText}</Button>
+      </div>
+    </Modal>
+  )
+}
--- a/src/components/ui/dialog/index.ts
+++ b/src/components/ui/dialog/index.ts
@@ -0,0 +1 @@
+export * from './dialog'
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -2,7 +2,9 @@ export * from './button'
 export * from './card'
 export * from './typography'
 export * from './checkbox'
+export * from './dialog'
 export * from './text-field'
+export * from './modal'
 export * from './table'
 export * from './controlled'
 export * from './radio-group'
--- a/src/components/ui/modal/index.ts
+++ b/src/components/ui/modal/index.ts
@@ -0,0 +1 @@
+export * from './modal'
--- a/src/components/ui/modal/modal.module.scss
+++ b/src/components/ui/modal/modal.module.scss
@@ -0,0 +1,41 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgb(0 0 0 / 70%);
+}
+
+.content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  width: 90vw;
+  max-width: 542px;
+  max-height: 85vh;
+
+  background-color: var(--color-dark-700);
+  border: 1px solid var(--color-dark-500, #333);
+  border-radius: 2px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: 18px 24px;
+
+  border-bottom: 1px solid var(--color-dark-500, #333);
+}
+
+.closeButton {
+  all: unset;
+
+  cursor: pointer;
+
+  display: flex;
+
+  width: 24px;
+  height: 24px;
+}
--- a/src/components/ui/modal/modal.stories.tsx
+++ b/src/components/ui/modal/modal.stories.tsx
@@ -0,0 +1,35 @@
+import { useState } from 'react'
+
+import { Meta, StoryObj } from '@storybook/react'
+
+import { Modal } from '@/components'
+
+const meta = {
+  title: 'Components/Modal',
+  component: Modal,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Modal>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    open: true,
+    onOpenChange: () => {},
+    title: 'Modal',
+    children: 'Modal',
+  },
+  render: args => {
+    const [open, setOpen] = useState(false)
+
+    return (
+      <>
+        <button onClick={() => setOpen(true)}>Open Modal</button>
+        <Modal {...args} onOpenChange={setOpen} open={open}>
+          Modal content here
+        </Modal>
+      </>
+    )
+  },
+}
--- a/src/components/ui/modal/modal.tsx
+++ b/src/components/ui/modal/modal.tsx
@@ -0,0 +1,37 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react'
+
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+
+import s from './modal.module.scss'
+
+import { Close } from '@/assets'
+import { Typography } from '@/components'
+
+export type ModalProps = {
+  title?: string
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  children: ReactNode
+} & Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Dialog>, 'open' | 'onOpenChange'>
+export const Modal = ({ children, title, ...props }: ModalProps) => {
+  return (
+    <DialogPrimitive.Root {...props}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className={s.overlay} />
+        <DialogPrimitive.Content className={s.content}>
+          <div className={s.header}>
+            <DialogPrimitive.Title asChild>
+              <Typography variant={'h2'} as={'h2'}>
+                {title}
+              </Typography>
+            </DialogPrimitive.Title>
+            <DialogPrimitive.Close className={s.closeButton}>
+              <Close />
+            </DialogPrimitive.Close>
+          </div>
+          {children}
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  )
+}
--- a/src/components/ui/slider/slider.tsx
+++ b/src/components/ui/slider/slider.tsx
@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
+import { ComponentPropsWithoutRef, ElementRef, forwardRef, useEffect } from 'react'

 import * as SliderPrimitive from '@radix-ui/react-slider'
 import { clsx } from 'clsx'
@@ -6,20 +6,35 @@ import { clsx } from 'clsx'
 import s from './slider.module.scss'
 const Slider = forwardRef<
  ElementRef<typeof SliderPrimitive.Root>,
-  ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
+  Omit<ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'value'> & {
+    value?: (number | undefined)[]
+  }
+>(({ className, value, ...props }, ref) => {
+  useEffect(() => {
+    if (value?.[1] === undefined || value?.[1] === null) {
+      props.onValueChange?.([value?.[0] ?? 0, props.max ?? 0])
+    }
+  }, [props.max, value])
+
+  return (
    <div className={s.container}>
-    <span>{props?.value?.[0]}</span>
-    <SliderPrimitive.Root ref={ref} className={clsx(s.root, className)} {...props}>
+      <span>{value?.[0]}</span>
+      <SliderPrimitive.Root
+        ref={ref}
+        className={clsx(s.root, className)}
+        {...props}
+        value={[value?.[0] ?? 0, value?.[1] ?? props.max ?? 0]}
+      >
        <SliderPrimitive.Track className={s.track}>
          <SliderPrimitive.Range className="absolute h-full bg-primary" />
        </SliderPrimitive.Track>
        <SliderPrimitive.Thumb className={s.thumb} />
        <SliderPrimitive.Thumb className={s.thumb} />
      </SliderPrimitive.Root>
-    <span>{props?.value?.[1]}</span>
+      <span>{value?.[1]}</span>
    </div>
-))
+  )
+})

 Slider.displayName = SliderPrimitive.Root.displayName

--- a/src/pages/decks-page/decks-page.tsx
+++ b/src/pages/decks-page/decks-page.tsx
@@ -3,23 +3,49 @@ import { useState } from 'react'
 import s from './decks-page.module.scss'

 import { Button, Page, Slider, TextField, Typography } from '@/components'
-import { DecksTable } from '@/components/decks/decks-table.tsx'
+import { DecksTable } from '@/components/decks/decks-table'
 import { Pagination } from '@/components/ui/pagination'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { useGetDecksQuery } from '@/services/decks'
-import { selectDecksCurrentPage } from '@/services/decks/decks.selectors.ts'
+import { Tab, useGetDecksQuery } from '@/services/decks'
+import {
+  selectDecksCurrentPage,
+  selectDecksCurrentTab,
+  selectDecksMaxCards,
+  selectDecksMinCards,
+  selectDecksSearch,
+} from '@/services/decks/decks.selectors.ts'
 import { decksSlice } from '@/services/decks/decks.slice.ts'
 import { useAppDispatch, useAppSelector } from '@/services/store.ts'

 export const DecksPage = () => {
  const dispatch = useAppDispatch()
  const currentPage = useAppSelector(selectDecksCurrentPage)
+  const minCards = useAppSelector(selectDecksMinCards)
+  const maxCards = useAppSelector(selectDecksMaxCards)
+  const currentTab = useAppSelector(selectDecksCurrentTab)
+  const search = useAppSelector(selectDecksSearch)
  const setCurrentPage = (page: number) => dispatch(decksSlice.actions.setCurrentPage(page))
+  const setMinCards = (minCards: number) => dispatch(decksSlice.actions.setMinCards(minCards))
+  const setMaxCards = (maxCards: number) => dispatch(decksSlice.actions.setMaxCards(maxCards))
+  const setSearch = (search: string) => dispatch(decksSlice.actions.setSearch(search))
+  const setCurrentTab = (tab: Tab) => dispatch(decksSlice.actions.setCurrentTab(tab))

-  const { data: decks } = useGetDecksQuery()
-  const [activeTab, setActiveTab] = useState('my')
-  const [range, setRange] = useState([0, 100])
-  const [rangeValue, setRangeValue] = useState([0, 1])
+  const [rangeValue, setRangeValue] = useState([minCards, maxCards])
+
+  const handleSliderCommitted = (value: number[]) => {
+    setMinCards(value[0])
+    setMaxCards(value[1])
+  }
+
+  const authorId = currentTab === 'my' ? 'f2be95b9-4d07-4751-a775-bd612fc9553a' : undefined
+
+  const { data: decks } = useGetDecksQuery({
+    currentPage,
+    minCardsCount: minCards,
+    maxCardsCount: maxCards,
+    name: search,
+    authorId,
+  })

  if (!decks) return <div>loading...</div>

@@ -31,14 +57,20 @@ export const DecksPage = () => {
          <Button>Add new deck</Button>
        </div>
        <div className={s.filters}>
-          <TextField placeholder="Search" search />
-          <Tabs value={activeTab} onValueChange={setActiveTab}>
+          <TextField placeholder="Search" search value={search} onValueChange={setSearch} />
+          <Tabs value={currentTab} onValueChange={value => setCurrentTab(value as Tab)}>
            <TabsList>
              <TabsTrigger value={'my'}>My decks</TabsTrigger>
              <TabsTrigger value={'all'}>All decks</TabsTrigger>
            </TabsList>
          </Tabs>
-          <Slider onValueCommit={setRange} value={rangeValue} onValueChange={setRangeValue} />
+          <Slider
+            onValueCommit={handleSliderCommitted}
+            value={rangeValue}
+            onValueChange={setRangeValue}
+            min={0}
+            max={decks?.maxCardsCount || 0}
+          />
          <Button variant={'secondary'}>Clear filters</Button>
        </div>
        <DecksTable decks={decks?.items} />
--- a/src/services/decks/decks.selectors.ts
+++ b/src/services/decks/decks.selectors.ts
@@ -6,7 +6,7 @@ export const selectDecksPerPage = (state: RootState) => state.decks.perPage

 export const selectDecksSearch = (state: RootState) => state.decks.search

-export const selectDecksAuthorId = (state: RootState) => state.decks.authorId
+export const selectDecksCurrentTab = (state: RootState) => state.decks.currentTab

 export const selectDecksMinCards = (state: RootState) => state.decks.minCards

--- a/src/services/decks/decks.service.ts
+++ b/src/services/decks/decks.service.ts
@@ -1,11 +1,16 @@
-import { CardsResponse, DeckResponse, DecksResponse } from './decks.types'
+import { CardsResponse, DeckResponse, DecksResponse, GetDecksArgs } from './decks.types'

 import { baseApi } from '@/services'

 const decksService = baseApi.injectEndpoints({
  endpoints: builder => ({
-    getDecks: builder.query<DecksResponse, void>({
-      query: () => `v1/decks`,
+    getDecks: builder.query<DecksResponse, GetDecksArgs | void>({
+      query: args => {
+        return {
+          url: `v1/decks`,
+          params: args ?? undefined,
+        }
+      },
    }),
    getDeckById: builder.query<DeckResponse, { id: string }>({
      query: ({ id }) => `v1/decks/${id}`,
--- a/src/services/decks/decks.slice.ts
+++ b/src/services/decks/decks.slice.ts
@@ -1,14 +1,16 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'

+import { Tab } from '@/services'
+
 export const decksSlice = createSlice({
  name: 'decks',
  initialState: {
    currentPage: 1,
    perPage: 10,
    search: '',
-    authorId: '',
    minCards: 0,
-    maxCards: null as number | null,
+    maxCards: undefined as number | undefined,
+    currentTab: 'all' as Tab,
  },
  reducers: {
    setCurrentPage: (state, action: PayloadAction<number>) => {
@@ -20,8 +22,8 @@ export const decksSlice = createSlice({
    setSearch: (state, action: PayloadAction<string>) => {
      state.search = action.payload
    },
-    setAuthorId: (state, action: PayloadAction<string>) => {
-      state.authorId = action.payload
+    setCurrentTab: (state, action: PayloadAction<Tab>) => {
+      state.currentTab = action.payload
    },
    setMinCards: (state, action: PayloadAction<number>) => {
      state.minCards = action.payload
@@ -31,9 +33,9 @@ export const decksSlice = createSlice({
    },
    resetFilters: state => {
      state.search = ''
-      state.authorId = ''
+      state.currentTab = 'all'
      state.minCards = 0
-      state.maxCards = null
+      state.maxCards = undefined
    },
    resetCurrentPage: state => {
      state.currentPage = 1
--- a/src/services/decks/decks.types.ts
+++ b/src/services/decks/decks.types.ts
@@ -52,3 +52,15 @@ export type Card = {
  grade: number
  userId: string
 }
+
+export type GetDecksArgs = {
+  minCardsCount?: number
+  maxCardsCount?: number
+  name?: string
+  authorId?: string
+  orderBy?: string
+  currentPage?: number
+  itemsPerPage?: number
+}
+
+export type Tab = 'all' | 'my'