@memori.ai/memori-react 8.45.2 → 8.45.5

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

@@ -1,216 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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/Details.css

@@ -1,66 +0,0 @@
-details.memori--details {
-    display: block;
-    margin-top: 0.5rem;
-    margin-bottom: 1.5rem;
-}
-
-details.memori--details+details.memori--details {
-    margin-top: 0;
-}
-
-details.memori--details summary {
-    cursor: pointer;
-    font-size: 1.15rem;
-    line-height: 1;
-    list-style-type: none;
-    transition: color 0.2s ease-in-out;
-}
-
-details.memori--details summary::-webkit-details-marker {
-    display: none;
-}
-
-details.memori--details summary::marker {
-    display: none;
-}
-
-details.memori--details summary::-moz-list-bullet {
-    list-style-type: none;
-}
-
-details.memori--details summary::after {
-    display: block;
-    width: 1rem;
-    height: 1rem;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
-    background-position: right center;
-    background-repeat: no-repeat;
-    background-size: 1rem auto;
-    content: "";
-    float: right;
-    margin-inline-start: 1.5rem;
-    transform: rotate(-90deg);
-    transition: transform 0.2s ease-in-out;
-}
-
-details.memori--details summary:focus {
-    outline: none;
-}
-
-details.memori--details summary:focus-visible {
-    color: var(--memori-primary);
-    outline: 1px solid var(--memori-primary);
-    outline-offset: 1.5rem;
-}
-
-details.memori--details[open]>summary {
-    margin-bottom: 1rem;
-}
-
-details.memori--details[open]>summary:not(:focus) {
-    color: var(--memori-primary);
-}
-
-details.memori--details[open]>summary::after {
-    transform: rotate(0deg);
-}