@memori.ai/memori-react 8.38.5 → 9.0.0-alpha.0

package/src/components/ui/Drawer.css

@@ -1,270 +0,0 @@
-.memori-drawer {
-  position: relative;
-  z-index: 1001;
-}
-
-.memori-drawer--backdrop {
-  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: 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;
-}
-
-.memori-drawer--panel {
-  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 (max-width: 767px) {
-  .memori-drawer--panel {
-    width: 100%;
-    max-width: 100%;
-  }
-}
-
-@media (min-width: 1024px) {
-  .memori-drawer--panel {
-    width: var(--memori-drawer--width--lg, 60%);
-  }
-}
-
-.memori-drawer--panel.memori-drawer--with-footer {
-  padding-bottom: 0;
-}
-
-.memori-drawer--panel .memori-spin {
-  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 p {
-  margin: 0 0 1em;
-}
-
-h2.memori-drawer--title {
-  margin: 0 0 1rem;
-  font-size: 1.5rem;
-  font-weight: 700;
-}
-
-.memori-drawer--title-with-closable {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.5rem 0;
-  margin-bottom: 1rem;
-}
-
-.memori-drawer--title-with-closable-title {
-  flex: 1;
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 700;
-}
-
-.memori-drawer--title-with-closable-actions {
-  display: flex;
-  align-items: center;
-  margin-left: 1rem;
-  gap: 0.5rem;
-}
-
-.memori-drawer--panel-left {
-  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;
-}
-
-.memori-drawer--title-with-closable-actions-close{
-  position: absolute;
-  z-index: 70;
-  top: 1.5rem;
-  left: -3.5rem;
-  background: var(--memori-primary);
-  color: #fff;
-}
-
-@media (max-width: 767px) {
-  .memori-drawer--title-with-closable-actions-close{
-    position: relative;
-    top: 0;
-    left: 0;
-    margin-top: 0;
-  }
-}
-
-@media (max-width: 767px) {
-  .memori-drawer--close {
-    /* position: absolute; */
-    position: relative;
-    top: 0;
-    right: 0.5rem;
-    left: auto;
-    margin-top: 0;
-    margin-bottom: 0.5rem;
-    margin-left: 0;
-  }
-}
-
-.memori-drawer--close button {
-  border-color: #fff;
-  color: #fff;
-}
-
-@media (max-width: 767px) {
-  .memori-drawer--close button {
-    color: #000;
-  }
-}
-
-.memori-drawer--panel-left .memori-drawer--close {
-  right: -3.5rem;
-  left: auto;
-}
-
-@media (max-width: 767px) {
-  .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;
-}
-
-.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--content{
-    flex: 1;
-    padding-top: 12px;
-    overflow-y: auto;
-}
-
-.memori-drawer--content--header{
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0px 12px;
-}
-
-
-.memori-drawer--content--scrollable{
-    flex: 1;
-    overflow-y: auto;
-}
-
-/* Transition classes */
-.ease-out {
-  transition-timing-function: ease-out;
-}
-
-.ease-in {
-  transition-timing-function: ease-in;
-}
-
-.duration-300 {
-  transition-duration: 300ms;
-}
-
-.duration-200 {
-  transition-duration: 200ms;
-}
-
-.duration-400 {
-  transition-duration: 400ms;
-}
-
-.duration-500 {
-  transition-duration: 500ms;
-}
-
-.opacity-0 {
-  opacity: 0;
-}
-
-.opacity-100 {
-  opacity: 1;
-}
-
-.max-w-0 {
-  max-width: 0;
-}
-
-.max-w-80 {
-  max-width: 80%;
-}
-
-.max-w-100 {
-  max-width: 100%;
-}

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

@@ -1,267 +0,0 @@
-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',
-  component: Drawer,
-  argTypes: {
-    title: {
-      control: {
-        type: 'text',
-      },
-    },
-    description: {
-      control: {
-        type: 'text',
-      },
-    },
-    loading: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    open: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-    },
-    placement: {
-      control: {
-        type: 'select',
-        options: ['left', 'right'],
-      },
-    },
-    width: {
-      control: {
-        type: 'text',
-      },
-    },
-    animated: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    closable: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const content = (
-  <>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>
-    <h3>Suspendisse a sodales nulla, sed semper nisi.</h3>
-    <p>Proin tincidunt enim in felis aliquet, a ultricies purus bibendum.</p>
-  </>
-);
-
-// Create a proper footer object for the Drawer component
-const simpleFooterObject = {
-  onSubmit: () => console.log('Submit clicked'),
-  loading: false,
-};
-
-const Template: Story<Props> = args => {
-  const [isOpen, setIsOpen] = React.useState(!!args.open || false);
-
-  return (
-    <I18nWrapper>
-      <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
-      <Drawer {...args} open={isOpen} onClose={() => setIsOpen(false)}>
-        {content}
-      </Drawer>
-    </I18nWrapper>
-  );
-};
-
-// Basic examples
-export const Default = Template.bind({});
-Default.args = {
-  open: false,
-};
-
-export const Open = Template.bind({});
-Open.args = {
-  open: true,
-};
-
-export const WithTitle = Template.bind({});
-WithTitle.args = {
-  open: true,
-  title: 'Drawer Title',
-};
-
-export const WithTitleAndDescription = Template.bind({});
-WithTitleAndDescription.args = {
-  open: true,
-  title: 'Drawer Title',
-  description: 'Drawer Description',
-};
-
-export const Loading = Template.bind({});
-Loading.args = {
-  open: true,
-  title: 'Drawer Title',
-  description: 'Drawer Description',
-  loading: true,
-};
-
-export const WithSimpleFooter = Template.bind({});
-WithSimpleFooter.args = {
-  open: true,
-  title: 'Drawer Title',
-  description: 'Drawer Description',
-  footer: {
-    onSubmit: () => console.log('Submit'),
-    loading: false,
-  },
-};
-
-export const PlacementLeft = Template.bind({});
-PlacementLeft.args = {
-  open: true,
-  placement: 'left',
-  title: 'Left Drawer',
-};
-
-export const CustomWidth = Template.bind({});
-CustomWidth.args = {
-  open: true,
-  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

@@ -1,130 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Drawer from './Drawer';
-import Button from './Button';
-
-const content = (
-  <>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>
-  </>
-);
-
-beforeEach(() => {
-  // @ts-ignore
-  window.IntersectionObserver = jest.fn(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn(),
-    takeRecords: jest.fn(),
-  }));
-});
-
-it('renders Drawer unchanged', () => {
-  const { container } = render(
-    <Drawer open={false} onClose={jest.fn()}>
-      {content}
-    </Drawer>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Drawer open unchanged', () => {
-  const { container } = render(
-    <Drawer open={true} onClose={jest.fn()}>
-      {content}
-    </Drawer>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Drawer with title unchanged', () => {
-  const { container } = render(
-    <Drawer open={true} onClose={jest.fn()} title="Lorem ipsum">
-      {content}
-    </Drawer>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Drawer with description unchanged', () => {
-  const { container } = render(
-    <Drawer
-      open={true}
-      onClose={jest.fn()}
-      description="Lorem ipsum dolor sit amet"
-    >
-      {content}
-    </Drawer>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Drawer loading unchanged', () => {
-  const { container } = render(
-    <Drawer open={true} onClose={jest.fn()} loading>
-      {content}
-    </Drawer>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Drawer with footer unchanged', () => {
-  const { container } = render(
-    <Drawer open={true} onClose={jest.fn()} footer={{
-      leftAction: <Button>Cancel</Button>,
-      onSubmit: jest.fn(),
-      loading: false
-    }}>
-      {content}
-    </Drawer>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Drawer non closable unchanged', () => {
-  const { container } = render(
-    <Drawer open={true} onClose={jest.fn()} closable={false}>
-      {content}
-    </Drawer>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Drawer side left unchanged', () => {
-  const { container } = render(
-    <Drawer open={true} onClose={jest.fn()} placement="left">
-      {content}
-    </Drawer>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Drawer with custom widths unchanged', () => {
-  const { container } = render(
-    <Drawer
-      open={true}
-      onClose={jest.fn()}
-      width="100%"
-      widthMd="90%"
-      widthLg="80%"
-    >
-      {content}
-    </Drawer>
-  );
-  expect(container).toMatchSnapshot();
-});