@memori.ai/ui 1.0.0-alpha

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,242 @@
+import type { FC, JSX } from 'react'
+import React, { useEffect, useState, useCallback } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+import Spin from '../Spin/Spin'
+import Button from '../Button/Button'
+import Close from '../../icons/Close'
+import ConfirmDialog from '../ConfirmDialog/ConfirmDialog'
+import cx from 'classnames'
+import { useTranslation } from 'react-i18next'
+
+import './Drawer.css'
+
+export interface Props {
+  title?: string | React.ReactNode
+  open?: boolean
+  data?: any
+  onClose?: () => void
+  width?: number | string
+  children?: React.ReactNode
+  footer?: {
+    leftAction?: React.ReactNode
+    leftActionClassName?: string
+    onSubmit?: () => void
+    loading?: boolean
+  }
+  extra?: React.ReactNode
+  className?: string
+  placement?: 'left' | 'right'
+  description?: string | JSX.Element | React.ReactNode
+  loading?: boolean
+  animated?: boolean
+  closable?: boolean
+  widthMd?: string
+  widthLg?: string
+  confirmDialogTitle?: string
+  confirmDialogMessage?: string
+  showBackdrop?: boolean
+  preventBackdropClose?: boolean
+  enterDuration?: string
+  leaveDuration?: string
+}
+
+const Drawer: FC<Props> = ({
+  title,
+  open = false,
+  data,
+  onClose = () => {},
+  children,
+  width = '80%',
+  footer,
+  showBackdrop = true,
+  extra,
+  className,
+  placement = 'right',
+  description,
+  loading = false,
+  animated = true,
+  closable = true,
+  widthMd = '80%',
+  widthLg = '60%',
+  confirmDialogTitle,
+  confirmDialogMessage,
+  preventBackdropClose = false,
+  enterDuration = 'duration-300',
+  leaveDuration = 'duration-200',
+}: Props) => {
+  const [originalData, setOriginalData] = useState<any>(null)
+  const [confirmDialogOpen, setConfirmDialogOpen] = useState(false)
+  const { t } = useTranslation()
+
+  // Set original data when drawer opens and data is available
+  useEffect(() => {
+    if (open && data && !originalData) {
+      setOriginalData(data)
+    }
+
+    // Reset original data when drawer closes
+    if (!open) {
+      setOriginalData(null)
+    }
+  }, [open, data, originalData])
+
+  // Check if data has changed
+  const checkChanges = useCallback(() => {
+    if (!data || Object.keys(data).length === 0) {
+      return onClose()
+    }
+
+    // Compare current data with original data
+    if (originalData && JSON.stringify(originalData) !== JSON.stringify(data)) {
+      setConfirmDialogOpen(true)
+    } else {
+      onClose()
+    }
+  }, [data, originalData, onClose])
+
+  // Handle drawer close
+  const handleClose = useCallback(() => {
+    checkChanges()
+  }, [checkChanges])
+
+  // Confirm unsaved changes
+  const handleConfirmUnsavedChanges = useCallback(() => {
+    setConfirmDialogOpen(false)
+    onClose()
+  }, [onClose])
+
+  return (
+    <>
+      <ConfirmDialog
+        isOpen={confirmDialogOpen}
+        onClose={() => setConfirmDialogOpen(false)}
+        onConfirm={handleConfirmUnsavedChanges}
+        title={confirmDialogTitle || t('confirmDialog.title')}
+        message={confirmDialogMessage || t('confirmDialog.message')}
+        confirmText={t('confirm') || 'Confirm'}
+        cancelText={t('cancel') || 'Cancel'}
+      />
+
+      <Transition
+        appear
+        show={open}
+        as={React.Fragment}
+      >
+        <Dialog
+          open={open}
+          onClose={preventBackdropClose ? () => {} : handleClose}
+          className={cx('memori-drawer', className)}
+        >
+          {showBackdrop && (
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <div className="memori-drawer--backdrop" />
+            </Transition.Child>
+          )}
+          <div className="memori-drawer--container">
+            <div className="memori-drawer--container-scrollable">
+              <Transition.Child
+                static
+                as={React.Fragment}
+                enter={`ease-out ${enterDuration}`}
+                enterFrom={animated ? 'max-w-0 opacity-0' : 'opacity-0'}
+                enterTo="max-w-80 opacity-100"
+                leave={`ease-in ${leaveDuration}`}
+                leaveFrom="max-w-80 opacity-100"
+                leaveTo={animated ? 'max-w-0 opacity-0' : 'opacity-0'}
+              >
+                <Dialog.Panel
+                  className={cx('memori-drawer--panel', {
+                    'memori-drawer--panel-left': placement === 'left',
+                    'memori-drawer--with-footer': !!footer,
+                  })}
+                  style={
+                    {
+                      '--memori-drawer--width': width,
+                      '--memori-drawer--width--lg': widthLg,
+                      '--memori-drawer--width--md': widthMd,
+                    } as React.CSSProperties
+                  }
+                >
+                  {closable && (
+                    <div className="memori-drawer--close">
+                      <Button
+                        shape="circle"
+                        outlined
+                        icon={<Close />}
+                        onClick={handleClose}
+                      />
+                    </div>
+                  )}
+                  <Spin spinning={loading}>
+                    <div className="memori-drawer--content">
+                      {title && (
+                        <Dialog.Title className="memori-drawer--title">
+                          {title}
+                        </Dialog.Title>
+                      )}
+                      {description && (
+                        <Dialog.Description className="memori-drawer--description">
+                          {description}
+                        </Dialog.Description>
+                      )}
+                      <div className="memori-drawer--content--scrollable">
+                        {children}
+                      </div>
+                    </div>
+                  </Spin>
+                  {footer && (
+                    <div className="memori-drawer--footer">
+                      {footer.leftAction && (
+                        <div
+                          className={
+                            'memori-drawer--footer-left-action ' +
+                            (footer.leftActionClassName || '')
+                          }
+                        >
+                          {footer.leftAction}
+                        </div>
+                      )}
+                      {footer.onSubmit && (
+                        <div className="memori-drawer--footer-actions">
+                          <Button
+                            outlined
+                            onClick={handleClose}
+                          >
+                            {t('cancel')}
+                          </Button>
+                          <Button
+                            htmlType="submit"
+                            onClick={footer.onSubmit}
+                            loading={footer.loading}
+                            className="memori-drawer--footer-confirm"
+                          >
+                            {t('confirm')}
+                          </Button>
+                        </div>
+                      )}
+                      {extra && (
+                        <div className="memori-drawer--extra">{extra}</div>
+                      )}
+                    </div>
+                  )}
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </>
+  )
+}
+
+Drawer.displayName = 'Drawer'
+
+export default Drawer

package/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap

@@ -0,0 +1,21 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders Drawer loading unchanged 1`] = `<div />`;
+
+exports[`renders Drawer non closable unchanged 1`] = `<div />`;
+
+exports[`renders Drawer open unchanged 1`] = `<div />`;
+
+exports[`renders Drawer side left unchanged 1`] = `<div />`;
+
+exports[`renders Drawer unchanged 1`] = `<div />`;
+
+exports[`renders Drawer with custom widths unchanged 1`] = `<div />`;
+
+exports[`renders Drawer with description unchanged 1`] = `<div />`;
+
+exports[`renders Drawer with footer unchanged 1`] = `<div />`;
+
+exports[`renders Drawer with footer unchanged 2`] = `<div />`;
+
+exports[`renders Drawer with title unchanged 1`] = `<div />`;

package/src/components/Drawer/index.tsx

@@ -0,0 +1,2 @@
+import Drawer from './Drawer'
+export { Drawer }

package/src/components/Dropdown/Dropdown.css

@@ -0,0 +1,177 @@
+.memori-dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.memori-dropdown--trigger {
+    cursor: pointer;
+}
+
+.memori-dropdown--content {
+    position: absolute;
+    z-index: 10001;
+    overflow: hidden;
+    min-width: 280px;
+    max-width: 320px;
+    border: 1px solid rgb(0 0 0 / 8%);
+    border-radius: 12px;
+    animation: dropdown-fade-in 0.2s ease-out;
+    background: white;
+    box-shadow:
+        0 10px 25px rgb(0 0 0 / 15%),
+        0 4px 10px rgb(0 0 0 / 10%);
+}
+
+@keyframes dropdown-fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(-8px) scale(0.95);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+/* Placement variants */
+.memori-dropdown--content--bottom-right {
+    top: 100%;
+    right: 0;
+    margin-top: 8px;
+}
+
+.memori-dropdown--content--bottom-left {
+    top: 100%;
+    left: 0;
+    margin-top: 8px;
+}
+
+.memori-dropdown--content--top-right {
+    right: 0;
+    bottom: 100%;
+    margin-bottom: 8px;
+}
+
+.memori-dropdown--content--top-left {
+    bottom: 100%;
+    left: 0;
+    margin-bottom: 8px;
+}
+
+/* User profile dropdown specific styles */
+.memori-dropdown--user-profile {
+    padding: 16px;
+
+    /* border-bottom: 1px solid #f1f5f9; */
+}
+
+.memori-dropdown--user-info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.memori-dropdown--avatar {
+    width: 48px;
+    height: 48px;
+    border: 2px solid #e2e8f0;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.memori-dropdown--avatar-placeholder {
+    display: flex;
+    width: 40px;
+    height: 40px;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid #e2e8f0;
+    border-radius: 50%;
+    background: var(--memori-primary);
+    color: white;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.memori-dropdown--user-details {
+    min-width: 0;
+    flex: 1;
+}
+
+.memori-dropdown--user-name {
+    overflow: hidden;
+    margin: 0;
+    color: #1e293b;
+    font-size: 14px;
+    font-weight: 600;
+    text-align: start;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.memori-dropdown--user-email {
+    overflow: hidden;
+    margin: 2px 0 0;
+    color: #64748b;
+    font-size: 12px;
+    text-align: start;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.memori-dropdown--user-badge {
+    border-radius: 12px;
+    margin-top: 6px;
+    color: rgb(119 119 119);
+    font-size: 11px;
+    font-weight: 500;
+    text-align: start;
+}
+
+.memori-dropdown--actions {
+    padding: 8px 0;
+}
+
+.memori-dropdown--action-button {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    padding: 12px 16px;
+    border: none;
+    background: none;
+    color: #374151;
+    cursor: pointer;
+    font-size: 14px;
+    gap: 8px;
+    text-align: left;
+    transition: background-color 0.2s ease;
+}
+
+.memori-dropdown--action-button:hover {
+    background: #f8fafc;
+}
+
+.memori-dropdown--action-button--logout {
+    border-top: 1px solid #f1f5f9;
+    margin-top: 4px;
+    color: #dc2626;
+}
+
+.memori-dropdown--action-button--logout:hover {
+    background: #fef2f2;
+}
+
+.memori-dropdown--action-icon {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+}
+
+/* Responsive adjustments */
+@media (width <= 640px) {
+    .memori-dropdown--content {
+        min-width: 260px;
+        max-width: 280px;
+    }
+}

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import Dropdown from './Dropdown'
+import Button from '../Button/Button'
+
+const meta = {
+  title: 'UI/Dropdown',
+  component: Dropdown,
+  argTypes: {
+    open: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  parameters: {
+    controls: { expanded: true },
+  },
+} satisfies Meta<typeof Dropdown>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    open: false,
+    trigger: <Button>Open</Button>,
+  },
+}
+
+export const Open: Story = {
+  args: {
+    open: true,
+    trigger: <Button>Open</Button>,
+  },
+}
+
+export const WithClassName: Story = {
+  args: {
+    className: 'custom-dropdown',
+    trigger: <Button>Open</Button>,
+  },
+}
+
+export const WithPlacementBottomLeft: Story = {
+  args: {
+    placement: 'bottom-left',
+    trigger: <Button>Open</Button>,
+  },
+}
+
+export const WithPlacementBottomRight: Story = {
+  args: {
+    placement: 'bottom-right',
+    trigger: <Button>Open</Button>,
+  },
+}
+
+export const WithPlacementTopLeft: Story = {
+  args: {
+    placement: 'top-left',
+    trigger: <Button>Open</Button>,
+  },
+}
+
+export const WithPlacementTopRight: Story = {
+  args: {
+    placement: 'top-right',
+    trigger: <Button>Open</Button>,
+  },
+}

package/src/components/Dropdown/Dropdown.test.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import { expect, it } from 'vitest'
+import { render } from '@testing-library/react'
+import Dropdown from './Dropdown'
+import Button from '../Button/Button'
+
+it('renders Dropdown unchanged', () => {
+  const { container } = render(
+    <Dropdown trigger={<Button>Open</Button>}>
+      <div>Content</div>
+    </Dropdown>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Dropdown open unchanged', () => {
+  const { container } = render(
+    <Dropdown
+      open={true}
+      trigger={<Button>Open</Button>}
+    >
+      <div>Content</div>
+    </Dropdown>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Dropdown with className unchanged', () => {
+  const { container } = render(
+    <Dropdown
+      className="custom-dropdown"
+      trigger={<Button>Open</Button>}
+    >
+      <div>Content</div>
+    </Dropdown>,
+  )
+  const dropdown = container.querySelector('.memori-dropdown')
+  expect(dropdown?.classList.contains('custom-dropdown')).toBe(true)
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Dropdown with placement bottom-left unchanged', () => {
+  const { container } = render(
+    <Dropdown
+      placement="bottom-left"
+      trigger={<Button>Open</Button>}
+    >
+      <div>Content</div>
+    </Dropdown>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Dropdown with placement bottom-right unchanged', () => {
+  const { container } = render(
+    <Dropdown
+      placement="bottom-right"
+      trigger={<Button>Open</Button>}
+    >
+      <div>Content</div>
+    </Dropdown>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Dropdown with placement top-left unchanged', () => {
+  const { container } = render(
+    <Dropdown
+      placement="top-left"
+      trigger={<Button>Open</Button>}
+    >
+      <div>Content</div>
+    </Dropdown>,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+it('renders Dropdown with placement top-right unchanged', () => {
+  const { container } = render(
+    <Dropdown
+      placement="top-right"
+      trigger={<Button>Open</Button>}
+    >
+      <div>Content</div>
+    </Dropdown>,
+  )
+  expect(container).toMatchSnapshot()
+})

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,88 @@
+import React, { useRef, useEffect, useState } from 'react'
+import cx from 'classnames'
+
+import './Dropdown.css'
+
+export interface Props {
+  open?: boolean
+  onClose?: () => void
+  children?: React.ReactNode
+  className?: string
+  trigger?: React.ReactNode
+  placement?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'
+}
+
+const Dropdown: React.FC<Props> = ({
+  open = false,
+  onClose,
+  children,
+  className,
+  trigger,
+  placement = 'bottom-right',
+}) => {
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const [isOpen, setIsOpen] = useState(open)
+
+  useEffect(() => {
+    setIsOpen(open)
+  }, [open])
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false)
+        onClose?.()
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [isOpen, onClose])
+
+  const handleTriggerClick = () => {
+    setIsOpen(!isOpen)
+  }
+
+  const handleTriggerKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      setIsOpen(!isOpen)
+    }
+  }
+
+  return (
+    <div
+      className={cx('memori-dropdown', className)}
+      ref={dropdownRef}
+    >
+      <div
+        className="memori-dropdown--trigger"
+        onClick={handleTriggerClick}
+        onKeyDown={handleTriggerKeyDown}
+        tabIndex={0}
+      >
+        {trigger}
+      </div>
+      {isOpen && (
+        <div
+          className={cx(
+            'memori-dropdown--content',
+            `memori-dropdown--content--${placement}`,
+          )}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Dropdown