@memori.ai/memori-react 8.38.5 → 9.0.0-alpha.0

package/src/components/ui/Drawer.tsx

@@ -1,293 +0,0 @@
-import React, {
-  FC,
-  useEffect,
-  useState,
-  useRef,
-  useCallback,
-  useMemo,
-} from 'react';
-import { Dialog, Transition } from '@headlessui/react';
-import Spin from './Spin';
-import Button from './Button';
-import Close from '../icons/Close';
-import cx from 'classnames';
-import { useTranslation } from 'react-i18next';
-import ConfirmDialog from './ConfirmDialog';
-
-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;
-  titleWithClosable?: {
-    title: string;
-    actions?: Array<{
-      icon?: React.ReactNode;
-      onClick?: () => void;
-      title?: string;
-      visible?: boolean;
-      disabled?: boolean;
-      loading?: boolean;
-      className?: string;
-      [key: string]: any;
-    }>;
-    showClosable?: boolean;
-  };
-}
-
-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',
-  titleWithClosable,
-}: 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-100 opacity-100"
-                leave={`ease-in ${leaveDuration}`}
-                leaveFrom="max-w-100 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,
-                    'memori-drawer--with-title-closable': !!titleWithClosable,
-                  })}
-                  style={
-                    {
-                      '--memori-drawer--width': width,
-                      '--memori-drawer--width--lg': widthLg,
-                      '--memori-drawer--width--md': widthMd,
-                    } as React.CSSProperties
-                  }
-                >
-                  {titleWithClosable ? (
-                    <div className="memori-drawer--title-with-closable">
-                      <Dialog.Title className="memori-drawer--title-with-closable-title">
-                        {titleWithClosable.title}
-                      </Dialog.Title>
-                      <div className="memori-drawer--title-with-closable-actions">
-                        {titleWithClosable.actions?.filter((action) => action.visible).map((action, index) => {
-                          const { icon, onClick, title, disabled, loading, className, ...restProps } = action;
-                          return (
-                            <Button
-                              key={index}
-                              shape="circle"
-                              outlined
-                              icon={icon}
-                              onClick={onClick}
-                              title={title}
-                              disabled={disabled}
-                              loading={loading}
-                              className={className}
-                              {...restProps}
-                            />
-                          );
-                        })}
-                        {titleWithClosable.showClosable && (
-                          <Button
-                            shape="circle"
-                            outlined
-                            icon={<Close />}
-                            onClick={handleClose}
-                            className="memori-drawer--title-with-closable-actions-close"
-                          />
-                        )}
-                      </div>
-                    </div>
-                  ) : (
-                    <>
-                      {closable && (
-                        <div className="memori-drawer--close">
-                          <Button
-                            shape="circle"
-                            outlined
-                            icon={<Close />}
-                            onClick={handleClose}
-                          />
-                        </div>
-                      )}
-                    </>
-                  )}
-                  <Spin spinning={loading}>
-                    <div className="memori-drawer--content">
-                      {!titleWithClosable && 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/ui/Dropdown.css

@@ -1,173 +0,0 @@
-.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 rgba(0, 0, 0, 0.08);
-  border-radius: 12px;
-  animation: dropdownFadeIn 0.2s ease-out;
-  background: white;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1);
-}
-
-@keyframes dropdownFadeIn {
-  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 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 (max-width: 640px) {
-  .memori-dropdown--content {
-    min-width: 260px;
-    max-width: 280px;
-  }
-}

package/src/components/ui/Dropdown.tsx

@@ -1,63 +0,0 @@
-import React, { useRef, useEffect, useState } from 'react';
-import cx from 'classnames';
-
-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);
-  };
-
-  return (
-    <div className={cx('memori-dropdown', className)} ref={dropdownRef}>
-      <div className="memori-dropdown--trigger" onClick={handleTriggerClick}>
-        {trigger}
-      </div>
-      {isOpen && (
-        <div className={cx('memori-dropdown--content', `memori-dropdown--content--${placement}`)}>
-          {children}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Dropdown;

package/src/components/ui/Expandable.css

@@ -1,15 +0,0 @@
-.memori-expandable {
-    line-height: 1;
-}
-
-.memori-expandable--inner {
-    overflow: hidden;
-    max-height: 9999px;
-    transition: max-height 0.2s ease-in-out;
-}
-
-.memori-expandable>button {
-    color: var(--memori-primary, #333);
-    font-size: 0.9em;
-    text-decoration: underline
-}