@memori.ai/memori-react 7.22.0 → 7.23.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%;
 }

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>
   );