@memori.ai/memori-react 6.8.1 → 6.8.4

package/src/components/ui/Drawer.stories.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useEffect, useCallback, useMemo, useState } from 'react';
 import { Meta, Story } from '@storybook/react';
 import Drawer, { Props } from './Drawer';
 import Button from './Button';
 
 import './Drawer.css';
+import I18nWrapper from '../../I18nWrapper';
 
 const meta: Meta = {
   title: 'UI/Drawer',
@@ -34,12 +35,27 @@ const meta: Meta = {
         type: 'text',
       },
     },
-    side: {
+    placement: {
       control: {
         type: 'select',
         options: ['left', 'right'],
       },
     },
+    width: {
+      control: {
+        type: 'text',
+      },
+    },
+    animated: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    closable: {
+      control: {
+        type: 'boolean',
+      },
+    },
   },
   parameters: {
     controls: { expanded: true },
@@ -61,73 +77,29 @@ const content = (
     <p>Nulla at urna diam.</p>
     <h3>Suspendisse a sodales nulla, sed semper nisi.</h3>
     <p>Proin tincidunt enim in felis aliquet, a ultricies purus bibendum.</p>
-    <ul>
-      <li>Quisque in ultrices lectus.</li>
-      <li>Quisque in ultrices lectus.</li>
-      <li>Quisque in ultrices lectus.</li>
-    </ul>
-    <p>Nulla at urna diam.</p>
-    <p>Nulla at urna diam.</p>
-    <h3>Suspendisse a sodales nulla, sed semper nisi.</h3>
-    <p>Proin tincidunt enim in felis aliquet, a ultricies purus bibendum.</p>
-    <ul>
-      <li>Quisque in ultrices lectus.</li>
-      <li>Quisque in ultrices lectus.</li>
-      <li>Quisque in ultrices lectus.</li>
-    </ul>
-    <p>Nulla at urna diam.</p>
   </>
 );
 
-const footer = (
-  <>
-    <Button primary>OK</Button>
-    <Button>Cancel</Button>
-  </>
-);
-
-const Template: Story<Props> = args => {
-  const [isOpen, setIsOpen] = React.useState(!!args.open || false);
-
-  return (
-    <>
-      <Button onClick={() => setIsOpen(true)}>Click me</Button>
-      <Drawer
-        {...args}
-        open={isOpen}
-        onClose={() => setIsOpen(false)}
-        footer={args.footer}
-      >
-        {content}
-      </Drawer>
-    </>
-  );
+// Create a proper footer object for the Drawer component
+const simpleFooterObject = {
+  onSubmit: () => console.log('Submit clicked'),
+  loading: false,
 };
 
-const TemplateWithALotOfContent: Story<Props> = args => {
+const Template: Story<Props> = args => {
   const [isOpen, setIsOpen] = React.useState(!!args.open || false);
 
   return (
-    <>
-      <Button onClick={() => setIsOpen(true)}>Click me</Button>
-      <Drawer
-        {...args}
-        open={isOpen}
-        onClose={() => setIsOpen(false)}
-        footer={args.footer}
-      >
-        {content}
-        {content}
-        {content}
-        {content}
+    <I18nWrapper>
+      <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
+      <Drawer {...args} open={isOpen} onClose={() => setIsOpen(false)}>
         {content}
       </Drawer>
-    </>
+    </I18nWrapper>
   );
 };
 
-// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
-// https://storybook.js.org/docs/react/workflows/unit-testing
+// Basic examples
 export const Default = Template.bind({});
 Default.args = {
   open: false,
@@ -159,24 +131,137 @@ Loading.args = {
   loading: true,
 };
 
-export const WithFooter = Template.bind({});
-WithFooter.args = {
+export const WithSimpleFooter = Template.bind({});
+WithSimpleFooter.args = {
   open: true,
   title: 'Drawer Title',
   description: 'Drawer Description',
-  footer,
+  footer: {
+    onSubmit: () => console.log('Submit'),
+    loading: false,
+  },
 };
 
-export const SideLeft = Template.bind({});
-SideLeft.args = {
+export const PlacementLeft = Template.bind({});
+PlacementLeft.args = {
   open: true,
-  side: 'left',
+  placement: 'left',
+  title: 'Left Drawer',
 };
 
-export const WithALotOfContent = TemplateWithALotOfContent.bind({});
-WithALotOfContent.args = {
+export const CustomWidth = Template.bind({});
+CustomWidth.args = {
   open: true,
-  title: 'Drawer Title',
-  description: 'Drawer Description',
-  footer,
+  title: 'Custom Width Drawer',
+  width: '50%',
+};
+
+export const NonAnimated = Template.bind({});
+NonAnimated.args = {
+  open: true,
+  title: 'Non-Animated Drawer',
+  animated: false,
+};
+
+export const NonClosable = Template.bind({});
+NonClosable.args = {
+  open: true,
+  title: 'Non-Closable Drawer',
+  closable: false,
+};
+
+// Template for data detection
+const DataTemplate: Story<Props> = args => {
+  const [isOpen, setIsOpen] = React.useState(!!args.open || false);
+  // Use static data for the story - don't try to update it which might cause issues
+  const staticData = { id: 1, name: 'John Doe' };
+
+  return (
+    <I18nWrapper>
+      <Button onClick={() => setIsOpen(true)}>Open Data Drawer</Button>
+      <Drawer
+        {...args}
+        open={isOpen}
+        data={staticData}
+        onClose={() => setIsOpen(false)}
+      >
+        <p>This drawer has data associated with it.</p>
+        <p>When you close it, the component will check for unsaved changes.</p>
+        <p>(For this demo, no actual changes are tracked)</p>
+      </Drawer>
+    </I18nWrapper>
+  );
+};
+
+export const WithDataDetection = DataTemplate.bind({});
+WithDataDetection.args = {
+  open: true,
+  title: 'Data Change Detection',
+  description: 'This drawer demonstrates the data change detection feature',
+};
+
+// Improved ConfirmationDialog template with better state management
+
+const ConfirmationDialogTemplate: Story<Props> = ({ open = true }: Props) => {
+  const [isOpen, setIsOpen] = useState(open);
+  const [data, setData] = useState({ id: 1, name: 'John Doe' });
+
+  return (
+    <I18nWrapper>
+      <Button onClick={() => setIsOpen(true)}>Open Confirmation Dialog</Button>
+      <Drawer
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+        data={data}
+        title="Confirmation Example"
+        confirmDialogTitle="Confirmation Example"
+        confirmDialogMessage="Are you sure you want to close this drawer?"
+        footer={{
+          onSubmit: () => {
+            console.log('Submitted with data:', data);
+            setIsOpen(false);
+          },
+        }}
+      >
+        <h3>Sample Form Content</h3>
+        <p>Current data: {JSON.stringify(data)}</p>
+        <Button onClick={() => setData({ id: 1, name: 'Jane Smith' })}>
+          Modify Data
+        </Button>
+      </Drawer>
+    </I18nWrapper>
+  );
+};
+
+export const WithConfirmationDialog = ConfirmationDialogTemplate.bind({});
+WithConfirmationDialog.args = {
+  open: true,
+  title: 'Unsaved Changes Demo',
+  description:
+    'This drawer shows the confirmation dialog when closing with unsaved changes',
+};
+
+// Fixed Template with lots of content and proper footer
+const LongContentTemplate: Story<Props> = args => {
+  const [isOpen, setIsOpen] = React.useState(!!args.open || false);
+
+  return (
+    <I18nWrapper>
+      <Button onClick={() => setIsOpen(true)}>Open Long Content Drawer</Button>
+      <Drawer {...args} open={isOpen} onClose={() => setIsOpen(false)}>
+        {content}
+        {content}
+        {content}
+        {content}
+      </Drawer>
+    </I18nWrapper>
+  );
+};
+
+export const WithLongContent = LongContentTemplate.bind({});
+WithLongContent.args = {
+  open: true,
+  title: 'Long Content Drawer',
+  description: 'This drawer has a lot of content',
+  footer: simpleFooterObject, // Use the properly structured footer object
 };

package/src/components/ui/Drawer.test.tsx

@@ -85,7 +85,11 @@ it('renders Drawer loading unchanged', () => {
 
 it('renders Drawer with footer unchanged', () => {
   const { container } = render(
-    <Drawer open={true} onClose={jest.fn()} footer={footer}>
+    <Drawer open={true} onClose={jest.fn()} footer={{
+      leftAction: <Button>Cancel</Button>,
+      onSubmit: jest.fn(),
+      loading: false
+    }}>
       {content}
     </Drawer>
   );
@@ -103,7 +107,7 @@ it('renders Drawer non closable unchanged', () => {
 
 it('renders Drawer side left unchanged', () => {
   const { container } = render(
-    <Drawer open={true} onClose={jest.fn()} side="left">
+    <Drawer open={true} onClose={jest.fn()} placement="left">
       {content}
     </Drawer>
   );

package/src/components/ui/Drawer.tsx

@@ -1,123 +1,235 @@
-import React, { FC } from 'react';
+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;
-  onClose: (value: boolean) => void;
+  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;
-  title?: string | JSX.Element | React.ReactNode;
+  placement?: 'left' | 'right';
   description?: string | JSX.Element | React.ReactNode;
-  children: JSX.Element | React.ReactNode;
-  footer?: JSX.Element | React.ReactNode;
   loading?: boolean;
   animated?: boolean;
   closable?: boolean;
-  side?: 'left' | 'right';
-  width?: string;
   widthMd?: string;
   widthLg?: string;
+  confirmDialogTitle?: string;
+  confirmDialogMessage?: string;
+  showBackdrop?: boolean;
+  preventBackdropClose?: boolean;
 }
 
 const Drawer: FC<Props> = ({
-  open = false,
-  onClose,
-  className,
   title,
-  description,
+  open = false,
+  data,
+  onClose = () => {},
   children,
+  width = '80%',
   footer,
+  showBackdrop = true,
+  extra,
+  className,
+  placement = 'right',
+  description,
   loading = false,
   animated = true,
-  side = 'right',
   closable = true,
-  width = '100%',
   widthMd = '80%',
   widthLg = '60%',
-}: Props) => (
-  <Transition appear show={open} as={React.Fragment}>
-    <Dialog
-      open={open}
-      onClose={onClose}
-      className={cx('memori-drawer', className)}
-    >
-      <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
+  confirmDialogTitle,
+  confirmDialogMessage,
+  preventBackdropClose = false,
+}: 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={animated ? 'max-w-0 opacity-0' : 'opacity-0'}
-            enterTo="max-w-80 opacity-100"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
             leave="ease-in duration-200"
-            leaveFrom="max-w-80 opacity-100"
-            leaveTo={animated ? 'max-w-0 opacity-0' : 'opacity-0'}
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
           >
-            <Dialog.Panel
-              className={cx('memori-drawer--panel', {
-                'memori-drawer--panel-left': side === 'left',
-                'memori-drawer--with-footer': !!footer,
-              })}
-            >
-              <style
-                dangerouslySetInnerHTML={{
-                  __html: `
-                    .memori-drawer--panel {
-                      --memori-drawer--width: ${width};
-                      --memori-drawer--width-lg: ${widthLg};
-                      --memori-drawer--width-md: ${widthMd};
-                    }
-                  `,
-                }}
-              />
-              {closable && (
-                <div className="memori-drawer--close">
-                  <Button
-                    shape="circle"
-                    outlined
-                    icon={<Close />}
-                    onClick={() => onClose(false)}
-                  />
-                </div>
-              )}
-              <Spin spinning={loading}>
-                {title && (
-                  <Dialog.Title className="memori-drawer--title">
-                    {title}
-                  </Dialog.Title>
-                )}
-                {description && (
-                  <Dialog.Description className="memori-drawer--description">
-                    {description}
-                  </Dialog.Description>
-                )}
-
-                {children}
+              <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 duration-300"
+                enterFrom={animated ? 'max-w-0 opacity-0' : 'opacity-0'}
+                enterTo="max-w-80 opacity-100"
+                leave="ease-in duration-200"
+                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>
+    </>
+  );
+};
 
-                {footer && (
-                  <div className="memori-drawer--footer">{footer}</div>
-                )}
-              </Spin>
-            </Dialog.Panel>
-          </Transition.Child>
-        </div>
-      </div>
-    </Dialog>
-  </Transition>
-);
+Drawer.displayName = 'Drawer';
 
 export default Drawer;