@memori.ai/memori-react 1.0.0-alpha.1

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

@@ -0,0 +1,180 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import Drawer, { Props } from './Drawer';
+import Button from './Button';
+
+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',
+      },
+    },
+    side: {
+      control: {
+        type: 'select',
+        options: ['left', 'right'],
+      },
+    },
+  },
+  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>
+    <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>
+    </>
+  );
+};
+
+const TemplateWithALotOfContent: 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}
+        {content}
+      </Drawer>
+    </>
+  );
+};
+
+// 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
+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 WithFooter = Template.bind({});
+WithFooter.args = {
+  open: true,
+  title: 'Drawer Title',
+  description: 'Drawer Description',
+  footer,
+};
+
+export const SideLeft = Template.bind({});
+SideLeft.args = {
+  open: true,
+  side: 'left',
+};
+
+export const WithALotOfContent = TemplateWithALotOfContent.bind({});
+WithALotOfContent.args = {
+  open: true,
+  title: 'Drawer Title',
+  description: 'Drawer Description',
+  footer,
+};

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

@@ -0,0 +1,126 @@
+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={footer}>
+      {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()} side="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();
+});

package/src/components/ui/Drawer.tsx

@@ -0,0 +1,122 @@
+import React, { FC } from 'react';
+import { Dialog, Transition } from '@headlessui/react';
+import Spin from './Spin';
+import Button from './Button';
+import Close from '../icons/Close';
+import cx from 'classnames';
+
+import './Drawer.css';
+
+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;
+  footer?: JSX.Element | React.ReactNode;
+  loading?: boolean;
+  closable?: boolean;
+  side?: 'left' | 'right';
+  width?: string;
+  widthMd?: string;
+  widthLg?: string;
+}
+
+const Drawer: FC<Props> = ({
+  open = false,
+  onClose,
+  className,
+  title,
+  description,
+  children,
+  footer,
+  loading = false,
+  side = 'right',
+  closable = true,
+  width = '100%',
+  widthMd = '80%',
+  widthLg = '60%',
+}: Props) => (
+  <Transition appear show={open} as={React.Fragment}>
+    <Dialog
+      open={open}
+      onClose={onClose}
+      className={cx('memori-drawer', className)}
+    >
+      <Transition.Child
+        as={React.Fragment}
+        enter="ease-out duration-300"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="ease-in duration-200"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <div className="memori-drawer--backdrop" />
+      </Transition.Child>
+      <div className="memori-drawer--container">
+        <div className="memori-drawer--container-scrollable">
+          <Transition.Child
+            as={React.Fragment}
+            enter="ease-out duration-300"
+            enterFrom="max-w-0 opacity-0"
+            enterTo="max-w-100 opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="max-w-100 opacity-100"
+            leaveTo="max-w-0 opacity-0"
+          >
+            <Dialog.Panel
+              className={cx('memori-drawer--panel', {
+                'memori-drawer--panel-left': side === 'left',
+                'memori-drawer--with-footer': !!footer,
+              })}
+            >
+              <style
+                dangerouslySetInnerHTML={{
+                  __html: `
+                    .memori-drawer--panel {
+                      --memori-drawer--width: ${width};
+                      --memori-drawer--width-lg: ${widthLg};
+                      --memori-drawer--width-md: ${widthMd};
+                    }
+                  `,
+                }}
+              />
+              {closable && (
+                <div className="memori-drawer--close">
+                  <Button
+                    shape="circle"
+                    outlined
+                    icon={<Close />}
+                    onClick={() => onClose(false)}
+                  />
+                </div>
+              )}
+              <Spin spinning={loading}>
+                {title && (
+                  <Dialog.Title className="memori-drawer--title">
+                    {title}
+                  </Dialog.Title>
+                )}
+                {description && (
+                  <Dialog.Description className="memori-drawer--description">
+                    {description}
+                  </Dialog.Description>
+                )}
+
+                {children}
+
+                {footer && (
+                  <div className="memori-drawer--footer">{footer}</div>
+                )}
+              </Spin>
+            </Dialog.Panel>
+          </Transition.Child>
+        </div>
+      </div>
+    </Dialog>
+  </Transition>
+);
+
+export default Drawer;

package/src/components/ui/Message.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Message = () => <div>Message</div>;
+
+const message = {
+  error: console.error,
+  info: console.info,
+  success: console.log,
+};
+
+export { Message };
+export default message;

package/src/components/ui/Modal.css

@@ -0,0 +1,98 @@
+.memori-modal {
+    position: relative;
+    z-index: 60;
+}
+
+.memori-modal--backdrop {
+    position: fixed;
+    z-index: 40;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+.memori-modal--container {
+    position: fixed;
+    z-index: 50;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow-y: auto;
+}
+
+.memori-modal--container-scrollable {
+    display: flex;
+    min-height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.memori-modal--panel {
+    position: relative;
+    max-width: var(--memori-modal--width, 100%);
+    padding: 1.5rem;
+    border-radius: 10px;
+    margin-right: auto;
+    margin-left: auto;
+    background-color: #fff;
+    font-family: 'Exo 2', sans-serif;
+}
+
+@media (min-width: 768px) {
+    .memori-modal--panel {
+        max-width: var(--memori-modal--width-md, 80%);
+        padding: 2rem 3rem;
+    }
+}
+
+.memori-modal--footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 1.5rem;
+}
+
+.memori-modal--footer button+button {
+    margin-left: 0.5em;
+}
+
+.memori-modal--close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0.5rem;
+}
+
+.ease-out {
+    transition-timing-function: ease-out;
+}
+
+.ease-in {
+    transition-timing-function: ease-in;
+}
+
+.duration-300 {
+    transition-duration: 300ms;
+}
+
+.duration-200 {
+    transition-duration: 200ms;
+}
+
+.opacity-0 {
+    opacity: 0;
+}
+
+.opacity-100 {
+    opacity: 1;
+}
+
+.scale-95 {
+    transform: scale(0.95);
+}
+
+.scale-100 {
+    transform: scale(1);
+}

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

@@ -0,0 +1,169 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import Modal, { Props } from './Modal';
+import Button from './Button';
+
+const meta: Meta = {
+  title: 'UI/Modal',
+  component: Modal,
+  argTypes: {
+    title: {
+      control: {
+        type: 'text',
+      },
+    },
+    description: {
+      control: {
+        type: 'text',
+      },
+    },
+    loading: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    open: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  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>
+  </>
+);
+
+const footer = (
+  <>
+    <Button primary>OK</Button>
+    <Button>Cancel</Button>
+  </>
+);
+
+const footerNonClosableModal = <Button primary>OK</Button>;
+
+const Template: Story<Props> = args => {
+  const [isOpen, setIsOpen] = React.useState(!!args.open || false);
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Click me</Button>
+      <Modal
+        {...args}
+        open={isOpen}
+        onClose={args.closable ? () => setIsOpen(false) : () => {}}
+        footer={args.footer}
+      >
+        {content}
+      </Modal>
+    </>
+  );
+};
+
+const TemplateWithALotOfContent: Story<Props> = args => {
+  const [isOpen, setIsOpen] = React.useState(!!args.open || false);
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Click me</Button>
+      <Modal
+        {...args}
+        open={isOpen}
+        onClose={args.closable ? () => setIsOpen(false) : () => {}}
+        footer={args.footer}
+      >
+        {content}
+        {content}
+        {content}
+        {content}
+        {content}
+      </Modal>
+    </>
+  );
+};
+
+// 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
+export const Default = Template.bind({});
+Default.args = {
+  open: false,
+  closable: true,
+};
+
+export const Open = Template.bind({});
+Open.args = {
+  open: true,
+  closable: true,
+};
+
+export const WithTitle = Template.bind({});
+WithTitle.args = {
+  open: true,
+  closable: true,
+  title: 'Modal Title',
+};
+
+export const WithTitleAndDescription = Template.bind({});
+WithTitleAndDescription.args = {
+  open: true,
+  closable: true,
+  title: 'Modal Title',
+  description: 'Modal Description',
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  open: true,
+  closable: true,
+  title: 'Modal Title',
+  description: 'Modal Description',
+  loading: true,
+};
+
+export const WithFooter = Template.bind({});
+WithFooter.args = {
+  open: true,
+  closable: true,
+  title: 'Modal Title',
+  description: 'Modal Description',
+  footer,
+};
+
+export const NonClosable = Template.bind({});
+NonClosable.args = {
+  open: true,
+  title: 'Modal Title',
+  description: 'Modal Description',
+  footer: footerNonClosableModal,
+  closable: false,
+};
+
+export const WithALotOfContent = TemplateWithALotOfContent.bind({});
+WithALotOfContent.args = {
+  open: true,
+  closable: true,
+  title: 'Modal Title',
+  description: 'Modal Description',
+  footer,
+};