@memori.ai/memori-react 8.45.1 → 8.45.4

package/src/components/ui/Alert.css

@@ -1,93 +0,0 @@
-.memori-alert {
-    position: fixed;
-    z-index: 1000;
-    top: 20px;
-    right: 20px;
-    width: var(--memori-alert--width, 400px);
-  }
-  
-  .memori-alert--container {
-    display: flex;
-    align-items: flex-start;
-    padding: 16px;
-    border-radius: 8px;
-    margin-bottom: 8px;
-    background-color: white;
-    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  }
-  
-  .memori-alert--icon {
-    flex-shrink: 0;
-    margin-right: 12px;
-  }
-  
-  .memori-alert--content {
-    min-width: 0;
-    flex: 1;
-  }
-  
-  .memori-alert--title {
-    margin-bottom: 4px;
-    font-size: 16px;
-    font-weight: 600;
-  }
-  
-  .memori-alert--description {
-    color: rgb(107 114 128);
-    font-size: 14px;
-  }
-  
-  .memori-alert--actions {
-    display: flex;
-    align-items: center;
-    margin-left: 16px;
-  }
-  
-  .memori-alert--action {
-    margin-right: 8px;
-  }
-  
-  .memori-alert--close {
-    flex-shrink: 0;
-  }
-  
-  /* Alert types */
-  .memori-alert--success {
-    --alert-color: rgb(34 197 94);
-    --alert-bg: rgb(240 253 244);
-  }
-  
-  .memori-alert--warning {
-    --alert-color: rgb(234 179 8);
-    --alert-bg: rgb(254 252 232);
-  }
-  
-  .memori-alert--error {
-    --alert-color: rgb(239 68 68);
-    --alert-bg: rgb(254 242 242);
-  }
-  
-  .memori-alert--info {
-    --alert-color: rgb(59 130 246);
-    --alert-bg: rgb(239 246 255);
-  }
-  
-  .memori-alert--success .memori-alert--container {
-    border: 1px solid var(--alert-color);
-    background-color: var(--alert-bg);
-  }
-  
-  .memori-alert--warning .memori-alert--container {
-    border: 1px solid var(--alert-color);
-    background-color: var(--alert-bg);
-  }
-  
-  .memori-alert--error .memori-alert--container {
-    border: 1px solid var(--alert-color);
-    background-color: var(--alert-bg);
-  }
-  
-  .memori-alert--info .memori-alert--container {
-    border: 1px solid var(--alert-color);
-    background-color: var(--alert-bg);
-  }

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

@@ -1,137 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import Alert, { Props } from './Alert';
-import Button from './Button';
-import './Alert.css';
-
-const meta: Meta = {
-  title: 'UI/Alert',
-  component: Alert,
-  argTypes: {
-    type: {
-      control: {
-        type: 'select',
-        options: ['success', 'warning', 'error', 'info']
-      }
-    },
-    title: {
-      control: {
-        type: 'text'
-      }
-    },
-    description: {
-      control: {
-        type: 'text'
-      }
-    },
-    open: {
-      control: {
-        type: 'boolean'
-      }
-    },
-    closable: {
-      control: {
-        type: 'boolean'
-      }
-    },
-    width: {
-      control: {
-        type: 'text'
-      }
-    }
-  },
-  parameters: {
-    controls: { expanded: true }
-  }
-};
-
-export default meta;
-
-const Template: Story<Props> = args => {
-  const [isOpen, setIsOpen] = React.useState(!!args.open);
-  return (
-    <>
-      <Button onClick={() => setIsOpen(true)}>Show Alert</Button>
-      <Alert
-        {...args}
-        open={isOpen}
-        onClose={() => setIsOpen(false)}
-      />
-    </>
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  open: false,
-  type: 'info',
-  title: 'Information',
-  description: 'This is an informative alert message.'
-};
-
-export const Success = Template.bind({});
-Success.args = {
-  open: true,
-  type: 'success',
-  title: 'Success!',
-  description: 'Operation completed successfully.'
-};
-
-export const Warning = Template.bind({});
-Warning.args = {
-  open: true,
-  type: 'warning',
-  title: 'Warning',
-  description: 'Please review this important warning message.'
-};
-
-export const Error = Template.bind({});
-Error.args = {
-  open: true,
-  type: 'error',
-  title: 'Error',
-  description: 'An error occurred while processing your request.'
-};
-
-export const WithAction = Template.bind({});
-WithAction.args = {
-  open: true,
-  type: 'info',
-  title: 'Update Available',
-  description: 'A new version is available.',
-  action: <Button primary>Update Now</Button>
-};
-
-export const NonClosable = Template.bind({});
-NonClosable.args = {
-  open: true,
-  type: 'warning',
-  title: 'Important Notice',
-  description: 'This message cannot be dismissed.',
-  closable: false
-};
-
-export const CustomWidth = Template.bind({});
-CustomWidth.args = {
-  open: true,
-  type: 'info',
-  title: 'Custom Width',
-  description: 'This alert has a custom width.',
-  width: '500px'
-};
-
-export const WithoutDescription = Template.bind({});
-WithoutDescription.args = {
-  open: true,
-  type: 'success',
-  title: 'Operation Successful'
-};
-
-export const AutoDismiss = Template.bind({});
-AutoDismiss.args = {
-  open: true,
-  type: 'success',
-  title: 'Auto Dismiss',
-  description: 'This alert will dismiss automatically after 3 seconds.',
-  duration: 3000
-};

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

@@ -1,129 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent, act } from '@testing-library/react';
-import Alert from './Alert';
-import Warning from '../icons/Warning';
-
-beforeEach(() => {
-  // Mock IntersectionObserver
-  // @ts-ignore
-  window.IntersectionObserver = jest.fn(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn(),
-    takeRecords: jest.fn(),
-  }));
-
-  // Mock setTimeout/clearTimeout
-  jest.useFakeTimers();
-});
-
-afterEach(() => {
-  jest.useRealTimers();
-});
-
-describe('Alert Component', () => {
-  it('renders Alert unchanged', () => {
-    const { container } = render(
-      <Alert
-        open={false}
-        onClose={jest.fn()}
-        title="Test Alert"
-      />
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('renders Alert open unchanged', () => {
-    const { container } = render(
-      <Alert
-        open={true}
-        onClose={jest.fn()}
-        title="Test Alert"
-      />
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('calls onClose when close button is clicked', () => {
-    const onClose = jest.fn();
-    render(
-      <Alert
-        open={true}
-        onClose={onClose}
-        title="Test Alert"
-      />
-    );
-    
-    const closeButton = screen.getByTitle('close');
-    fireEvent.click(closeButton);
-    expect(onClose).toHaveBeenCalled();
-  });
-
-
-  it('auto-dismisses after duration', () => {
-    const onClose = jest.fn();
-    render(
-      <Alert
-        open={true}
-        onClose={onClose}
-        title="Test Alert"
-        duration={3000}
-      />
-    );
-
-    act(() => {
-      jest.advanceTimersByTime(3000);
-    });
-
-    expect(onClose).toHaveBeenCalled();
-  });
-
-  it('renders with custom width', () => {
-    const { container } = render(
-      <Alert
-        open={true}
-        onClose={jest.fn()}
-        title="Test Alert"
-        width="500px"
-      />
-    );
-    
-    const style = window.getComputedStyle(container.firstChild as Element);
-    expect(style.getPropertyValue('--memori-alert--width')).toBe('500px');
-  });
-
-  it('renders with action button', () => {
-    const actionClick = jest.fn();
-    render(
-      <Alert
-        open={true}
-        onClose={jest.fn()}
-        title="Test Alert"
-        action={<button onClick={actionClick}>Action</button>}
-      />
-    );
-    
-    const actionButton = screen.getByText('Action');
-    fireEvent.click(actionButton);
-    expect(actionClick).toHaveBeenCalled();
-  });
-
-  it('cleans up timer on unmount', () => {
-    const onClose = jest.fn();
-    const { unmount } = render(
-      <Alert
-        open={true}
-        onClose={onClose}
-        title="Test Alert"
-        duration={3000}
-      />
-    );
-
-    unmount();
-    act(() => {
-      jest.advanceTimersByTime(3000);
-    });
-
-    expect(onClose).not.toHaveBeenCalled();
-  });
-});

package/src/components/ui/Alert.tsx

@@ -1,123 +0,0 @@
-import React, { FC } from 'react';
-import { Transition } from '@headlessui/react';
-import cx from 'classnames';
-import Close from '../icons/Close';
-import Button from './Button';
-import { useTranslation } from 'react-i18next';
-
-export type AlertType = 'success' | 'warning' | 'error' | 'info';
-
-export interface Props {
-  open?: boolean;
-  onClose: (value: boolean) => void;
-  className?: string;
-  title?: string | JSX.Element | React.ReactNode;
-  description?: string | JSX.Element | React.ReactNode;
-  children?: JSX.Element | React.ReactNode;
-  type?: AlertType;
-  icon?: JSX.Element | React.ReactNode;
-  closable?: boolean;
-  duration?: number | null;
-  action?: JSX.Element | React.ReactNode;
-  width?: string;
-}
-
-const Alert: FC<Props> = ({
-  open = false,
-  onClose,
-  className,
-  title,
-  description,
-  children,
-  type = 'info',
-  icon,
-  closable = true,
-  duration = null,
-  action,
-  width = '400px',
-}: Props) => {
-  const { t } = useTranslation();
-
-  // Auto-close functionality
-  React.useEffect(() => {
-    if (duration && open) {
-      const timer = setTimeout(() => {
-        onClose(false);
-      }, duration);
-      return () => clearTimeout(timer);
-    }
-  }, [duration, open, onClose]);
-
-  const getTypeStyles = (type: AlertType) => {
-    switch (type) {
-      case 'success':
-        return 'memori-alert--success';
-      case 'warning':
-        return 'memori-alert--warning';
-      case 'error':
-        return 'memori-alert--error';
-      default:
-        return 'memori-alert--info';
-    }
-  };
-
-  return (
-    <Transition
-      show={open}
-      as={React.Fragment}
-      appear
-    >
-      <div className={cx('memori-alert', getTypeStyles(type), className)}>
-        <style
-          dangerouslySetInnerHTML={{
-            __html: `
-              .memori-alert {
-                --memori-alert--width: ${width};
-              }
-            `,
-          }}
-        />
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0 translate-y-4"
-          enterTo="opacity-100 translate-y-0"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100 translate-y-0"
-          leaveTo="opacity-0 translate-y-4"
-        >
-          <div className="memori-alert--container">
-            {icon && <div className="memori-alert--icon">{icon}</div>}
-            
-            <div className="memori-alert--content">
-              {title && (
-                <div className="memori-alert--title">{title}</div>
-              )}
-              {description && (
-                <div className="memori-alert--description">{description}</div>
-              )}
-              {children}
-            </div>
-
-            <div className="memori-alert--actions">
-              {action && <div className="memori-alert--action">{action}</div>}
-              {closable && (
-                <Button
-                  ghost
-                  padded
-                  shape="circle"
-                  icon={<Close />}
-                  title={t('close') || 'Close'}
-                  onClick={() => onClose(false)}
-                  className="memori-alert--close"
-                />
-              )}
-            </div>
-          </div>
-        </Transition.Child>
-      </div>
-    </Transition>
-  );
-};
-
-export default Alert;

package/src/components/ui/Button.css

@@ -1,167 +0,0 @@
-.memori-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 4px 15px;
-    border: 1px solid var(--memori-button-border-color, #d9d9d9);
-    border-radius: var(--memori-button-radius, 5px);
-    background: var(--memori-button-bg, #fff);
-    box-shadow: var(--memori-button-box-shadow);
-    color: var(--memori-button-text, #333);
-    font-family: var(--memori-font-family);
-    font-size: 14px;
-    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-}
-.memori-button--active {
-    background: var(--memori-primary);
-    color: var(--memori-primary-text);
-}
-
-.memori-button:hover {
-    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 4px 8px rgba(0, 0, 0, 0.04);
-    color: #333;
-    cursor: pointer;
-}
-
-.memori-button:hover,
-.memori-button:focus {
-    border-color: var(--memori-primary);
-    color: var(--memori-primary);
-}
-
-.memori-button:focus {
-    outline-color: var(--memori-primary);
-}
-
-.memori-button:active {
-    box-shadow: inset var(--memori-button-box-shadow);
-}
-
-.memori-button--padded {
-    padding: var(--memori-button-padding);
-}
-
-.memori-button--block {
-    display: block;
-    width: 100%;
-}
-
-.memori-button--primary {
-    background: var(--memori-primary);
-    color: var(--memori-primary-text);
-}
-
-.memori-button--primary:hover,
-.memori-button--primary:focus {
-    color: var(--memori-primary-text);
-}
-
-.memori-button--primary:active {
-    transform: scale(0.95);
-}
-
-.memori-button--outlined {
-    border-color: var(--memori-primary);
-    background: none;
-    color: var(--memori-primary);
-}
-
-.memori-button--outlined:hover,
-.memori-button--outlined:focus {
-    border-color: var(--memori-primary);
-    background-color: var(--memori-primary);
-    color: var(--memori-primary-text);
-}
-
-.memori-button--outlined:active {
-    transform: scale(0.95);
-}
-
-.memori-button--ghost {
-    border: 1px solid transparent;
-    background: none;
-    box-shadow: none;
-}
-
-.memori-button--ghost:hover,
-.memori-button--ghost:focus {
-    border-color: transparent;
-    background: rgba(0, 0, 0, 0.04);
-    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 4px 8px rgba(0, 0, 0, 0.04);
-    color: inherit;
-}
-
-.memori-button--ghost:focus {
-    border: 1px solid var(--memori-primary);
-}
-
-.memori-button--square {
-    border-radius: 0;
-}
-
-.memori-button--rounded {
-    border-radius: var(--memori-button-radius);
-}
-
-.memori-button--danger {
-    border-color: var(--memori-error-color);
-    background: rgba(0, 0, 0, 0.02);
-    color: var(--memori-error-color);
-}
-
-.memori-button--danger:hover,
-.memori-button--danger:focus {
-    border-color: var(--memori-error-color);
-    background-color: var(--memori-error-color);
-    color: #fff;
-}
-
-.memori-button--danger.memori-button--ghost {
-    border-color: transparent;
-    background: none;
-    box-shadow: none;
-    color: var(--memori-error-color);
-}
-
-.memori-button--danger.memori-button--ghost:hover,
-.memori-button--danger.memori-button--ghost:focus {
-    border-color: var(--memori-error-color);
-    background: rgba(0, 0, 0, 0.02);
-    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 4px 8px rgba(0, 0, 0, 0.04);
-    color: var(--memori-error-color);
-}
-
-.memori-button--circle {
-    padding: 0.75em;
-    border-radius: 50%;
-    aspect-ratio: 1/1;
-
-}
-
-.memori-button--icon {
-    display: inline-flex;
-    color: currentColor;
-}
-
-.memori-button--icon svg {
-    width: 1.25em;
-    height: 1.25em;
-    fill: currentColor;
-    font-size: 1em;
-    line-height: 1;
-}
-
-.memori-button--icon svg[fill='none'] {
-    fill: none;
-}
-
-.memori-button--with-icon .memori-button--icon {
-    margin-right: 0.5em;
-}
-
-.memori-button[disabled] {
-    background: var(--memori-button-disabled-bg, #ccc);
-    color: var(--memori-button-disabled-color, #000);
-    cursor: not-allowed;
-    opacity: 0.5;
-}