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

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

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

@@ -1,117 +0,0 @@
-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 { useTranslation } from 'react-i18next';
-import cx from 'classnames';
-
-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) => {
-  const { t } = useTranslation();
-
-  return (
-    <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 />}
-                      title={t('close') || '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/Select.css

@@ -1,138 +0,0 @@
-.memori-select {
-    max-width: 240px;
-    min-height: 38px;
-}
-
-.memori-select--button {
-    position: relative;
-    width: 100%;
-    max-width: 240px;
-    min-height: 38px;
-    padding-top: 0.5rem;
-    padding-right: 2.5rem;
-    padding-bottom: 0.5rem;
-    padding-left: 0.75rem;
-    border: 1px solid #e5e7eb;
-    border-radius: 0.5rem;
-    background: transparent;
-    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
-        rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
-    color: var(--memori-text-color, #333);
-    cursor: pointer;
-    font-family: var(--memori-font-family);
-    font-size: 16px;
-    text-align: left;
-}
-
-.memori-select--button:focus {
-    border-color: #cbd5e0;
-    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
-}
-
-.memori-select--button:focus-visible {
-    border-color: #63b3ed;
-    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
-}
-
-.memori-select--button:hover {
-    border-color: #e2e8f0;
-}
-
-.memori-select--button:active {
-    border-color: #e2e8f0;
-}
-
-.memori-select--button:disabled {
-    border-color: #e2e8f0;
-    background-color: #f7fafc;
-    color: #a0aec0;
-    cursor: not-allowed;
-}
-
-@media (min-width: 640px) {
-    .memori-select--button {
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-    }
-}
-
-.memori-select--label {
-    display: inline-block;
-    margin-bottom: 0.25rem;
-}
-
-.memori-select--value {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.memori-select--value.memori-select--value-placeholder {
-    color: #a0aec0;
-}
-
-.memori-select--icon {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    padding-right: 0.5rem;
-    pointer-events: none;
-}
-
-.memori-select--icon svg {
-    width: 1.25rem;
-    height: 1.25rem;
-    color: rgb(156 163 175/1);
-}
-
-ul.memori-select--options {
-    position: absolute;
-    z-index: 1;
-    overflow: auto;
-    max-height: 15rem;
-    padding-top: 0.25rem;
-    padding-right: 0;
-    padding-bottom: 0.25rem;
-    padding-left: 0;
-    border-radius: 0.375rem;
-    margin-top: 0.25rem;
-    margin-right: 0;
-    margin-bottom: 0;
-    margin-left: 0;
-    background: #fff;
-    box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px,
-        rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
-    list-style: none;
-}
-
-@media (min-width: 640px) {
-    .memori-select--options {
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-    }
-}
-
-li.memori-select--option {
-    position: relative;
-    padding-top: 0.5rem;
-    padding-right: 1rem;
-    padding-bottom: 0.5rem;
-    padding-left: 1rem;
-    color: rgb(17 24 39/1);
-    cursor: pointer;
-    user-select: none;
-}
-
-li.memori-select--option:hover,
-li.memori-select--option:focus {
-    background-color: #f7fafc;
-}
-
-li.memori-select--option:focus {
-    outline: 2px solid #63b3ed;
-    outline-offset: 2px;
-}

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

@@ -1,79 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import Select, { Props } from './Select';
-import './Select.css';
-
-const meta: Meta = {
-  title: 'UI/Select',
-  component: Select,
-  argTypes: {
-    label: {
-      control: {
-        type: 'text',
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-    },
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => <Select {...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 = {
-  label: 'Select me',
-  options: [
-    { value: '1', label: '1' },
-    { value: '2', label: '2' },
-    { value: '3', label: '3' },
-  ],
-};
-
-export const Placeholder = Template.bind({});
-Placeholder.args = {
-  label: 'Select me',
-  placeholder: 'Select me',
-  options: [
-    { value: '1', label: '1' },
-    { value: '2', label: '2' },
-    { value: '3', label: '3' },
-  ],
-};
-
-export const WithValue = Template.bind({});
-WithValue.args = {
-  label: 'Select me',
-  value: '2',
-  options: [
-    { value: '1', label: '1' },
-    { value: '2', label: '2' },
-    { value: '3', label: '3' },
-  ],
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  label: `You can't select me`,
-  options: [
-    { value: '1', label: '1' },
-    { value: '2', label: '2' },
-    { value: '3', label: '3' },
-  ],
-  value: 2,
-  disabled: true,
-};

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

@@ -1,84 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Select from './Select';
-
-it('renders Select unchanged', () => {
-  const { container } = render(
-    <Select
-      label="Select me"
-      options={[
-        { value: '1', label: '1' },
-        { value: '2', label: '2' },
-        { value: '3', label: '3' },
-      ]}
-      onChange={jest.fn()}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Select with placeholder unchanged', () => {
-  const { container } = render(
-    <Select
-      label="Select me"
-      placeholder="Select me"
-      options={[
-        { value: '1', label: '1' },
-        { value: '2', label: '2' },
-        { value: '3', label: '3' },
-      ]}
-      onChange={jest.fn()}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Select with value unchanged', () => {
-  const { container } = render(
-    <Select
-      label="Select me"
-      value="2"
-      options={[
-        { value: '1', label: '1' },
-        { value: '2', label: '2' },
-        { value: '3', label: '3' },
-      ]}
-      onChange={jest.fn()}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Select with custom value display unchanged', () => {
-  const { container } = render(
-    <Select
-      label="Select me"
-      value="2"
-      displayValue="Two"
-      options={[
-        { value: '1', label: 'One' },
-        { value: '2', label: 'Two' },
-        { value: '3', label: 'Three' },
-      ]}
-      onChange={jest.fn()}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Select disabled unchanged', () => {
-  const { container } = render(
-    <Select
-      label="Select me"
-      value="2"
-      options={[
-        { value: '1', label: '1' },
-        { value: '2', label: '2' },
-        { value: '3', label: '3' },
-      ]}
-      disabled
-      onChange={jest.fn()}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/ui/Select.tsx

@@ -1,79 +0,0 @@
-import React, { Fragment } from 'react';
-import cx from 'classnames';
-import { Listbox, Transition } from '@headlessui/react';
-import SelectIcon from '../icons/SelectIcon';
-
-export interface Props<T = any> {
-  className?: string;
-  value?: T;
-  name?: string;
-  displayValue?: string;
-  onChange: (value: T) => void;
-  options: { value: T; label: any }[];
-  disabled?: boolean;
-  label?: string;
-  placeholder?: string;
-}
-
-const Select = ({
-  className,
-  value,
-  name,
-  displayValue,
-  options,
-  onChange,
-  disabled = false,
-  label,
-  placeholder,
-}: Props) => {
-  return (
-    <div className={cx('memori-select', className)}>
-      <Listbox
-        value={value}
-        onChange={value => {
-          onChange(value);
-        }}
-        disabled={disabled}
-        name={name}
-      >
-        {label && (
-          <Listbox.Label className="memori-select--label">
-            {label}:
-          </Listbox.Label>
-        )}
-        <Listbox.Button aria-label={label} className="memori-select--button">
-          <span
-            className={cx('memori-select--value', {
-              'memori-select--value-placeholder': !value,
-            })}
-          >
-            {value ? displayValue || value : placeholder}
-          </span>
-          <span className="memori-select--icon">
-            <SelectIcon />
-          </span>
-        </Listbox.Button>
-        <Transition
-          as={Fragment}
-          leave="transition ease-in duration-100"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <Listbox.Options className="memori-select--options">
-            {options.map(opt => (
-              <Listbox.Option
-                key={opt.value}
-                value={opt.value}
-                className="memori-select--option"
-              >
-                {opt.label}
-              </Listbox.Option>
-            ))}
-          </Listbox.Options>
-        </Transition>
-      </Listbox>
-    </div>
-  );
-};
-
-export default Select;