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

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

@@ -0,0 +1,111 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Modal from './Modal';
+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 Modal unchanged', () => {
+  const { container } = render(
+    <Modal open={false} onClose={jest.fn()}>
+      {content}
+    </Modal>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Modal open unchanged', () => {
+  const { container } = render(
+    <Modal open={true} onClose={jest.fn()}>
+      {content}
+    </Modal>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Modal with title unchanged', () => {
+  const { container } = render(
+    <Modal open={true} onClose={jest.fn()} title="Lorem ipsum">
+      {content}
+    </Modal>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Modal with description unchanged', () => {
+  const { container } = render(
+    <Modal
+      open={true}
+      onClose={jest.fn()}
+      description="Lorem ipsum dolor sit amet"
+    >
+      {content}
+    </Modal>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Modal loading unchanged', () => {
+  const { container } = render(
+    <Modal open={true} onClose={jest.fn()} loading>
+      {content}
+    </Modal>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Modal with footer unchanged', () => {
+  const { container } = render(
+    <Modal open={true} onClose={jest.fn()} footer={footer}>
+      {content}
+    </Modal>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Modal non closable unchanged', () => {
+  const { container } = render(
+    <Modal open={true} onClose={jest.fn()} closable={false}>
+      {content}
+    </Modal>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Modal with custom widths unchanged', () => {
+  const { container } = render(
+    <Modal open={true} onClose={jest.fn()} width="100%" widthMd="90%">
+      {content}
+    </Modal>
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/ui/Modal.tsx

@@ -0,0 +1,111 @@
+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 './Modal.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;
+  width?: string;
+  widthMd?: string;
+}
+
+const Modal: FC<Props> = ({
+  open = false,
+  onClose,
+  className,
+  title,
+  description,
+  children,
+  footer,
+  loading = false,
+  closable = true,
+  width = '100%',
+  widthMd = '100%',
+}: Props) => (
+  <Transition appear show={open} as={React.Fragment}>
+    <Dialog
+      open={open}
+      onClose={onClose}
+      className={cx('memori-modal', 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-modal--backdrop" />
+      </Transition.Child>
+      <div className="memori-modal--container">
+        <div className="memori-modal--container-scrollable">
+          <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-modal--panel">
+              <style
+                dangerouslySetInnerHTML={{
+                  __html: `
+                    .memori-modal--panel {
+                      --memori-modal--width: ${width};
+                      --memori-modal--width-md: ${widthMd};
+                    }
+                  `,
+                }}
+              />
+              {closable && (
+                <div className="memori-modal--close">
+                  <Button
+                    ghost
+                    padded
+                    shape="circle"
+                    icon={<Close />}
+                    onClick={() => onClose(false)}
+                  />
+                </div>
+              )}
+              <Spin spinning={loading}>
+                {title && (
+                  <Dialog.Title className="memori-modal--title">
+                    {title}
+                  </Dialog.Title>
+                )}
+                {description && (
+                  <Dialog.Description className="memori-modal--description">
+                    {description}
+                  </Dialog.Description>
+                )}
+
+                {children}
+
+                {footer && <div className="memori-modal--footer">{footer}</div>}
+              </Spin>
+            </Dialog.Panel>
+          </Transition.Child>
+        </div>
+      </div>
+    </Dialog>
+  </Transition>
+);
+
+export default Modal;

package/src/components/ui/Spin.css

@@ -0,0 +1,29 @@
+.memori-spin {
+    position: relative;
+}
+
+.memori-spin--spinner {
+    position: absolute;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    display: none;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.8);
+}
+
+.memori-spin--spinning .memori-spin--spinner {
+    display: flex;
+}
+
+.memori-spin--spinner svg {
+    width: 30%;
+    height: 30%;
+}
+
+.memori-spin--primary svg {
+    fill: var(--memori-primary);
+}

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import Spin, { Props } from './Spin';
+
+const meta: Meta = {
+  title: 'UI/Spin',
+  component: Spin,
+  argTypes: {
+    spinning: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    primary: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => (
+  <Spin {...args}>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    <h2>Suspendisse a sodales nulla, sed semper nisi.</h2>
+    <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>
+  </Spin>
+);
+
+// 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 = {
+  spinning: false,
+};
+
+export const Spinning = Template.bind({});
+Spinning.args = {
+  spinning: true,
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  spinning: true,
+  primary: true,
+};

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Spin from './Spin';
+
+const content = (
+  <>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    <h2>Suspendisse a sodales nulla, sed semper nisi.</h2>
+    <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>
+  </>
+);
+
+it('renders Spin unchanged', () => {
+  const { container } = render(<Spin>{content}</Spin>);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Spin spinning unchanged', () => {
+  const { container } = render(<Spin spinning>{content}</Spin>);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Spin with custom className unchanged', () => {
+  const { container } = render(<Spin className="lorem-ipsum">{content}</Spin>);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Spin spinning primary unchanged', () => {
+  const { container } = render(
+    <Spin spinning primary>
+      {content}
+    </Spin>
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/ui/Spin.tsx

@@ -0,0 +1,32 @@
+import React, { FC } from 'react';
+import cx from 'classnames';
+import Loading from '../icons/Loading';
+import './Spin.css';
+
+export interface Props {
+  spinning?: boolean;
+  className?: string;
+  primary?: boolean;
+  children?: JSX.Element | React.ReactNode;
+}
+
+const Spin: FC<Props> = ({
+  spinning = false,
+  primary = false,
+  className,
+  children,
+}: Props) => (
+  <div
+    className={cx('memori-spin', className, {
+      'memori-spin--spinning': spinning,
+      'memori-spin--primary': primary,
+    })}
+  >
+    {children}
+    <div className="memori-spin--spinner">
+      <Loading loading />
+    </div>
+  </div>
+);
+
+export default Spin;

package/src/components/ui/Tooltip.css

@@ -0,0 +1,78 @@
+.memori-tooltip {
+    position: relative;
+    display: inline-block;
+}
+
+.memori-tooltip--content {
+    position: absolute;
+    top: 50%;
+    left: 100%;
+    display: none;
+    width: auto;
+    min-width: 200px;
+    padding: 10px;
+    border-radius: 10px;
+    margin-left: 15px;
+    background: rgba(0, 0, 0, 0.8);
+    color: #fff;
+    opacity: 0;
+    text-align: center;
+    transform: none;
+    transition: 0.3s 0.1s all ease;
+}
+
+.memori-tooltip.memori-tooltip--align-left .memori-tooltip--content {
+    right: 100%;
+    left: initial;
+    margin: initial;
+    margin-right: 15px;
+}
+
+.memori-tooltip .memori-tooltip--content::before {
+    position: absolute;
+    top: 50%;
+    left: -15px;
+    display: none;
+    border: 10px solid rgba(0, 0, 0, 0.8);
+    border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent;
+    margin-left: -5px;
+    content: "";
+    opacity: 0;
+    transform: translateY(-50%);
+    transition: .3s;
+}
+
+.memori-tooltip.memori-tooltip--align-left .memori-tooltip--content::before {
+    right: -15px;
+    left: auto;
+    border-color: transparent transparent transparent rgba(0, 0, 0, 0.8);
+    margin-right: -5px;
+    margin-left: 0;
+}
+
+.memori-tooltip:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content,
+.memori-tooltip:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content::before {
+    display: block;
+    opacity: 1;
+}
+
+.memori-tooltip:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content,
+.memori-tooltip:not(.memori-tooltip--disabled):not(.memori-tooltip--visible):hover .memori-tooltip--content {
+    transform: translateY(-50%);
+}
+
+.memori-tooltip:not(.memori-tooltip--visible):not(.memori-tooltip--disabled):hover .memori-tooltip--content,
+.memori-tooltip:not(.memori-tooltip--visible):not(.memori-tooltip--disabled):hover .memori-tooltip--content::before {
+    display: block;
+    opacity: 1;
+}
+
+.memori-tooltip:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content a,
+.memori-tooltip:not(.memori-tooltip--disabled):not(.memori-tooltip--visible):hover .memori-tooltip--content a {
+    color: #fff;
+    text-decoration: underline;
+}
+
+.memori-tooltip.memori-tooltip--disabled {
+    cursor: not-allowed;
+}

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import Tooltip, { Props } from './Tooltip';
+
+const meta: Meta = {
+  title: 'UI/Tooltip',
+  component: Tooltip,
+  argTypes: {
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => <Tooltip {...args} />;
+
+// 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 = {
+  content: 'Here is some tooltip content',
+  children: <span>Hover me</span>,
+};
+
+export const WithJSXContent = Template.bind({});
+WithJSXContent.args = {
+  content: (
+    <p>
+      Here we have some JSX, useful for{' '}
+      <a href="https://memori.ai" rel="noopener noreferrer" target="_blank">
+        links
+      </a>
+      , for example.
+    </p>
+  ),
+  children: <span>Hover me</span>,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  content: 'Here is some tooltip content but I am disabled',
+  children: <span>Hover me</span>,
+  disabled: true,
+};
+
+export const VisibleControlled = Template.bind({});
+VisibleControlled.args = {
+  content:
+    'Here is some tooltip content displayed by default as I am controlled',
+  children: <span>Hover me</span>,
+  visible: true,
+};

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Tooltip from './Tooltip';
+
+it('renders Tooltip unchanged', () => {
+  const { container } = render(
+    <Tooltip content="Here is some tooltip content">Hover me</Tooltip>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Tooltip with jsx content unchanged', () => {
+  const { container } = render(
+    <Tooltip
+      content={
+        <p>
+          Here we have some JSX, useful for
+          <a href="https://memori.ai" rel="noopener noreferrer" target="_blank">
+            links
+          </a>
+          , for example.
+        </p>
+      }
+    >
+      Hover me
+    </Tooltip>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Tooltip disabled unchanged', () => {
+  const { container } = render(
+    <Tooltip content="Here is some tooltip content but I am disabled" disabled>
+      Hover me
+    </Tooltip>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Tooltip visible unchanged', () => {
+  const { container } = render(
+    <Tooltip
+      content="Here is some tooltip content by default as I am controlled"
+      visible
+    >
+      Hover me
+    </Tooltip>
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/ui/Tooltip.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from 'react';
+import cx from 'classnames';
+import './Tooltip.css';
+
+export interface Props {
+  content: string | JSX.Element | React.ReactNode;
+  className?: string;
+  alignLeft?: boolean;
+  disabled?: boolean;
+  children: React.ReactNode;
+  visible?: boolean;
+}
+
+const Tooltip: FC<Props> = ({
+  content,
+  className,
+  alignLeft = false,
+  disabled = false,
+  visible = false,
+  children,
+}) => (
+  <div
+    className={cx('memori-tooltip', className, {
+      'memori-tooltip--align-left': alignLeft,
+      'memori-tooltip--disabled': disabled,
+      'memori-tooltip--visible': visible,
+    })}
+  >
+    <div className="memori-tooltip--content">{content}</div>
+    <div className="memori-tooltip--trigger">{children}</div>
+  </div>
+);
+
+export default Tooltip;