@memori.ai/memori-react 6.8.1 → 6.8.4

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

@@ -0,0 +1,216 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import ConfirmDialog from './ConfirmDialog';
+import Button from './Button';
+
+import './ConfirmDialog.css';
+
+type Props = React.ComponentProps<typeof ConfirmDialog>;
+
+const meta: Meta = {
+  title: 'UI/ConfirmDialog',
+  component: ConfirmDialog,
+  argTypes: {
+    isOpen: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    title: {
+      control: {
+        type: 'text',
+      },
+    },
+    message: {
+      control: {
+        type: 'text',
+      },
+    },
+    confirmText: {
+      control: {
+        type: 'text',
+      },
+    },
+    cancelText: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => {
+  const [isOpen, setIsOpen] = React.useState(!!args.isOpen || false);
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open Confirm Dialog</Button>
+      <ConfirmDialog
+        {...args}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        onConfirm={() => {
+          console.log('Confirmed!');
+          setIsOpen(false);
+        }}
+      />
+    </>
+  );
+};
+
+// Basic examples
+export const Default = Template.bind({});
+Default.args = {
+  isOpen: false,
+  title: 'Confirm Action',
+  message: 'Are you sure you want to proceed with this action?',
+  confirmText: 'Confirm',
+  cancelText: 'Cancel',
+};
+
+export const Open = Template.bind({});
+Open.args = {
+  isOpen: true,
+  title: 'Confirm Action',
+  message: 'Are you sure you want to proceed with this action?',
+  confirmText: 'Confirm',
+  cancelText: 'Cancel',
+};
+
+export const WithCustomTitle = Template.bind({});
+WithCustomTitle.args = {
+  isOpen: true,
+  title: 'Delete Item',
+  message: 'Are you sure you want to proceed with this action?',
+  confirmText: 'Confirm',
+  cancelText: 'Cancel',
+};
+
+export const WithCustomMessage = Template.bind({});
+WithCustomMessage.args = {
+  isOpen: true,
+  title: 'Confirm Action',
+  message: 'This action cannot be undone. All associated data will be permanently deleted from the system.',
+  confirmText: 'Confirm',
+  cancelText: 'Cancel',
+};
+
+export const WithCustomButtonText = Template.bind({});
+WithCustomButtonText.args = {
+  isOpen: true,
+  title: 'Delete Item',
+  message: 'Are you sure you want to delete this item? This action cannot be undone.',
+  confirmText: 'Yes, Delete',
+  cancelText: 'No, Keep It',
+};
+
+// Use case examples
+const DeleteTemplate: Story<Props> = args => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [isDeleted, setIsDeleted] = React.useState(false);
+
+  const handleConfirm = () => {
+    setIsDeleted(true);
+    setIsOpen(false);
+    console.log('Item deleted!');
+  };
+
+  return (
+    <>
+      {isDeleted ? (
+        <div style={{ 
+          padding: '12px', 
+          background: '#f8d7da', 
+          color: '#721c24', 
+          borderRadius: '4px',
+          marginBottom: '20px'
+        }}>
+          Item has been deleted successfully!
+        </div>
+      ) : (
+        <Button onClick={() => setIsOpen(true)}>Delete Item</Button>
+      )}
+      
+      <ConfirmDialog
+        {...args}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        onConfirm={handleConfirm}
+      />
+    </>
+  );
+};
+
+export const DeleteConfirmation = DeleteTemplate.bind({});
+DeleteConfirmation.args = {
+  title: 'Delete Item',
+  message: 'Are you sure you want to delete this item? This action cannot be undone.',
+  confirmText: 'Delete',
+  cancelText: 'Cancel',
+};
+
+const SaveTemplate: Story<Props> = args => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [navigatedAway, setNavigatedAway] = React.useState(false);
+
+  const handleTryNavigate = () => {
+    setIsOpen(true);
+  };
+
+  const handleConfirm = () => {
+    setNavigatedAway(true);
+    setIsOpen(false);
+    console.log('Navigated without saving!');
+  };
+
+  return (
+    <>
+      {navigatedAway ? (
+        <div style={{ 
+          padding: '12px', 
+          background: '#d4edda', 
+          color: '#155724', 
+          borderRadius: '4px',
+          marginBottom: '20px'
+        }}>
+          Navigated away without saving changes.
+        </div>
+      ) : (
+        <div>
+          <div style={{ 
+            padding: '20px', 
+            border: '1px solid #ddd', 
+            borderRadius: '4px',
+            marginBottom: '20px'
+          }}>
+            <h3>Unsaved Form</h3>
+            <p>This is a form with unsaved changes.</p>
+            <input type="text" placeholder="Your name" style={{ padding: '8px', marginBottom: '10px', width: '100%' }} />
+            <textarea placeholder="Your message" style={{ padding: '8px', width: '100%', height: '100px' }} />
+          </div>
+          <Button onClick={handleTryNavigate}>Navigate Away</Button>
+        </div>
+      )}
+      
+      <ConfirmDialog
+        {...args}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        onConfirm={handleConfirm}
+      />
+    </>
+  );
+};
+
+export const UnsavedChanges = SaveTemplate.bind({});
+UnsavedChanges.args = {
+  title: 'Unsaved Changes',
+  message: 'You have unsaved changes. Are you sure you want to leave without saving?',
+  confirmText: 'Leave',
+  cancelText: 'Stay',
+};

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

@@ -0,0 +1,124 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import ConfirmDialog from './ConfirmDialog';
+
+beforeEach(() => {
+  // @ts-ignore
+  window.IntersectionObserver = jest.fn(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+    takeRecords: jest.fn(),
+  }));
+});
+
+it('renders ConfirmDialog unchanged', () => {
+  const { container } = render(
+    <ConfirmDialog
+      isOpen={false}
+      onClose={jest.fn()}
+      onConfirm={jest.fn()}
+      title="Test Title"
+      message="Test Message"
+      confirmText="Confirm"
+      cancelText="Cancel"
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ConfirmDialog open unchanged', () => {
+  const { container } = render(
+    <ConfirmDialog
+      isOpen={true}
+      onClose={jest.fn()}
+      onConfirm={jest.fn()}
+      title="Test Title"
+      message="Test Message"
+      confirmText="Confirm"
+      cancelText="Cancel"
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ConfirmDialog with custom title unchanged', () => {
+  const { container } = render(
+    <ConfirmDialog
+      isOpen={true}
+      onClose={jest.fn()}
+      onConfirm={jest.fn()}
+      title="Custom Title"
+      message="Test Message"
+      confirmText="Confirm"
+      cancelText="Cancel"
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ConfirmDialog with custom message unchanged', () => {
+  const { container } = render(
+    <ConfirmDialog
+      isOpen={true}
+      onClose={jest.fn()}
+      onConfirm={jest.fn()}
+      title="Test Title"
+      message="Custom confirmation message for testing purposes"
+      confirmText="Confirm"
+      cancelText="Cancel"
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders ConfirmDialog with custom button text unchanged', () => {
+  const { container } = render(
+    <ConfirmDialog
+      isOpen={true}
+      onClose={jest.fn()}
+      onConfirm={jest.fn()}
+      title="Test Title"
+      message="Test Message"
+      confirmText="Yes, proceed"
+      cancelText="No, go back"
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('calls onClose when cancel button is clicked', () => {
+  const onCloseMock = jest.fn();
+  render(
+    <ConfirmDialog
+      isOpen={true}
+      onClose={onCloseMock}
+      onConfirm={jest.fn()}
+      title="Test Title"
+      message="Test Message"
+      confirmText="Confirm"
+      cancelText="Cancel"
+    />
+  );
+  
+  fireEvent.click(screen.getByText('Cancel'));
+  expect(onCloseMock).toHaveBeenCalledTimes(1);
+});
+
+it('calls onConfirm when confirm button is clicked', () => {
+  const onConfirmMock = jest.fn();
+  render(
+    <ConfirmDialog
+      isOpen={true}
+      onClose={jest.fn()}
+      onConfirm={onConfirmMock}
+      title="Test Title"
+      message="Test Message"
+      confirmText="Confirm"
+      cancelText="Cancel"
+    />
+  );
+  
+  fireEvent.click(screen.getByText('Confirm'));
+  expect(onConfirmMock).toHaveBeenCalledTimes(1);
+});

package/src/components/ui/ConfirmDialog.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Dialog, Transition } from '@headlessui/react';
+import Button from './Button';
+
+// Custom confirm dialog component
+const ConfirmDialog: React.FC<{
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  message: string;
+  confirmText: string;
+  cancelText: string;
+}> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmText,
+  cancelText,
+}) => {
+  return (
+    <Transition appear show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="memori-confirm-dialog" onClose={onClose}>
+        <div className="memori-confirm-dialog--backdrop" />
+        <div className="memori-confirm-dialog--container">
+          <Transition.Child
+            as={React.Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 scale-95"
+            enterTo="opacity-100 scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 scale-100"
+            leaveTo="opacity-0 scale-95"
+          >
+            <Dialog.Panel className="memori-confirm-dialog--panel">
+              <Dialog.Title className="memori-confirm-dialog--title">
+                {title}
+              </Dialog.Title>
+              <Dialog.Description className="memori-confirm-dialog--message">
+                {message}
+              </Dialog.Description>
+              <div className="memori-confirm-dialog--actions">
+                <Button onClick={onClose}>{cancelText}</Button>
+                <Button primary onClick={onConfirm}>
+                  {confirmText}
+                </Button>
+              </div>
+            </Dialog.Panel>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition>
+  );
+};
+
+export default ConfirmDialog;

package/src/components/ui/Drawer.css

@@ -1,180 +1,205 @@
 .memori-drawer {
-    position: relative;
-    z-index: 10000;
+  position: relative;
+  z-index: 1001;
 }
 
 .memori-drawer--backdrop {
-    position: fixed;
-    z-index: 40;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.3);
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
 }
 
 .memori-drawer--container {
-    position: fixed;
-    z-index: 50;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    overflow-y: auto;
+  position: fixed;
+  z-index: 1001;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow-y: auto;
 }
 
 .memori-drawer--container-scrollable {
-    display: flex;
-    min-height: 100%;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  min-height: 100%;
+  align-items: center;
+  justify-content: center;
 }
 
 .memori-drawer--panel {
-    position: relative;
-    width: var(--memori-drawer--width, 100%);
-    max-width: 80vw;
-    height: 100%;
-    min-height: 100vh;
-    box-sizing: border-box;
-    padding: 1rem 1.5rem 1.5rem;
-    margin-right: 0;
-    margin-left: auto;
-    background-color: #fff;
-    font-family: var(--memori-font-family);
+  position: relative;
+  display: flex;
+  width: var(--memori-drawer--width, 100%);
+  max-width: 80vw;
+  height: 100%;
+  min-height: 100vh;
+  box-sizing: border-box;
+  flex-direction: column;
+  padding: 1rem 1.5rem 1.5rem;
+  margin-right: 0;
+  margin-left: auto;
+  background-color: #fff;
+  font-family: var(--memori-font-family);
 }
 
 @media (min-width: 768px) {
-    .memori-drawer--panel {
-        width: var(--memori-drawer--width--md, 80%);
-        max-width: none;
-        padding-top: 1.5rem;
-        padding-right: 2rem;
-        padding-left: 2rem;
-    }
+  .memori-drawer--panel {
+    width: var(--memori-drawer--width-md, 80%);
+    max-width: none;
+    padding-top: 1.5rem;
+    padding-right: 2rem;
+    padding-left: 2rem;
+  }
 }
 
 @media (min-width: 1024px) {
-    .memori-drawer--panel {
-        width: var(--memori-drawer--width--lg, 60%);
-    }
+  .memori-drawer--panel {
+    width: var(--memori-drawer--width-lg, 60%);
+  }
 }
 
 .memori-drawer--panel.memori-drawer--with-footer {
-    padding-bottom: 0;
+  padding-bottom: 0;
 }
 
 .memori-drawer--panel .memori-spin {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    flex-direction: column;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  flex-direction: column;
+  overflow-y: auto;
 }
 
-.memori-drawer--panel>.memori-spin {
-    margin-top: -1.75rem;
+.memori-drawer--panel > .memori-spin {
+  margin-top: -1.75rem;
 }
 
 .memori-drawer--panel p {
-    margin: 0 0 1em;
+  margin: 0 0 1em;
 }
 
 h2.memori-drawer--title {
-    margin: 0 0 1rem;
-    font-size: 1.5rem;
-    font-weight: 700;
+  margin: 0 0 1rem;
+  font-size: 1.5rem;
+  font-weight: 700;
 }
 
 .memori-drawer--panel-left {
-    margin-right: auto;
-    margin-left: 0;
+  margin-right: auto;
+  margin-left: 0;
 }
 
 .memori-drawer--close {
-    position: sticky;
-    z-index: 70;
-    top: 0;
-    left: 0;
-    padding: 0.5rem;
-    margin-top: -1.5rem;
-    margin-left: -5.5rem;
+  position: sticky;
+  z-index: 70;
+  top: 0;
+  left: 0;
+  padding: 0.5rem;
+  margin-top: -1.5rem;
+  margin-left: -5.5rem;
 }
 
 @media (max-width: 767px) {
-    .memori-drawer--close {
-        left: 0.5rem;
-    }
+  .memori-drawer--close {
+    left: 0.5rem;
+  }
 }
 
 .memori-drawer--close button {
-    border-color: #fff;
-    color: #fff;
+  border-color: #fff;
+  color: #fff;
 }
 
 @media (max-width: 767px) {
-    .memori-drawer--close button {
-        color: #000;
-    }
+  .memori-drawer--close button {
+    color: #000;
+  }
 }
 
 .memori-drawer--panel-left .memori-drawer--close {
-    right: -3.5rem;
-    left: auto;
+  right: -3.5rem;
+  left: auto;
 }
 
 @media (max-width: 767px) {
-    .memori-drawer--panel-left .memori-drawer--close {
-        right: 0.5rem;
-        left: auto;
-    }
+  .memori-drawer--panel-left .memori-drawer--close {
+    right: 0.5rem;
+    left: auto;
+  }
 }
 
 .memori-drawer--footer {
-    position: sticky;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    width: 100%;
-    justify-content: flex-end;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-    border-top: 1px solid rgba(0, 0, 0, 0.25);
-    margin-top: auto;
-    background-color: #fff;
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  border-top: 1px solid rgba(0, 0, 0, 0.25);
+  margin-top: auto;
+  background-color: #fff;
+}
+
+.memori-drawer--footer-left-action {
+  margin-right: auto;
+}
+
+.memori-drawer--footer-actions {
+  display: flex;
+  gap: 0.5rem;
 }
 
-.memori-drawer--footer button+button {
-    margin-left: 0.5em;
+.memori-drawer--footer button + button {
+  margin-left: 0.5em;
+}
+
+.memori-drawer--content{
+    flex: 1;
+    padding-top: 12px;
+    overflow-y: auto;
+}
+
+.memori-drawer--content--scrollable{
+    flex: 1;
+    overflow-y: auto;
 }
 
+/* Transition classes */
 .ease-out {
-    transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
 }
 
 .ease-in {
-    transition-timing-function: ease-in;
+  transition-timing-function: ease-in;
 }
 
 .duration-300 {
-    transition-duration: 300ms;
+  transition-duration: 300ms;
 }
 
 .duration-200 {
-    transition-duration: 200ms;
+  transition-duration: 200ms;
 }
 
 .opacity-0 {
-    opacity: 0;
+  opacity: 0;
 }
 
 .opacity-100 {
-    opacity: 1;
+  opacity: 1;
 }
 
 .max-w-0 {
-    max-width: 0;
+  max-width: 0;
 }
 
 .max-w-80 {
-    max-width: 80%;
+  max-width: 80%;
 }