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'

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

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

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

src/components/ui/dialog/index.ts

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

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'

src/components/ui/modal/index.ts

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

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

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

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

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) => (
-  <div className={s.container}>
-    <span>{props?.value?.[0]}</span>
-    <SliderPrimitive.Root ref={ref} className={clsx(s.root, className)} {...props}>
-      <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>
-  </div>
-))
+  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>{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>{value?.[1]}</span>
+    </div>
+  )
+})
 
 Slider.displayName = SliderPrimitive.Root.displayName