add modals

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