@memori.ai/memori-react 8.45.1 → 8.45.4

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

@@ -1,156 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import Button, { Props } from './Button';
-import Eye from '../icons/Eye';
-import './Button.css';
-
-const meta: Meta = {
-  title: 'UI/Button',
-  component: Button,
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-    },
-    type: {
-      control: {
-        type: 'select',
-        options: ['button', 'submit', 'reset'],
-      },
-    },
-    primary: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    outlined: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    ghost: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    padded: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    block: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    danger: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    loading: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => <Button {...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 = {
-  children: 'Click me',
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-  children: 'Click me',
-  primary: true,
-};
-
-export const Outlined = Template.bind({});
-Outlined.args = {
-  children: 'Click me',
-  outlined: true,
-};
-
-export const Ghost = Template.bind({});
-Ghost.args = {
-  children: 'Click me',
-  ghost: true,
-};
-
-export const PrimaryOutlined = Template.bind({});
-PrimaryOutlined.args = {
-  children: 'Click me',
-  primary: true,
-  outlined: true,
-};
-
-export const Square = Template.bind({});
-Square.args = {
-  children: 'Click me',
-  shape: 'square',
-};
-
-export const Padded = Template.bind({});
-Padded.args = {
-  children: 'Click me',
-  padded: true,
-};
-
-export const Block = Template.bind({});
-Block.args = {
-  children: 'Click me',
-  block: true,
-};
-
-export const Circle = Template.bind({});
-Circle.args = {
-  shape: 'circle',
-  icon: <Eye />,
-  padded: false,
-};
-
-export const WithIcon = Template.bind({});
-WithIcon.args = {
-  children: 'Click me',
-  icon: <Eye />,
-};
-
-export const Danger = Template.bind({});
-Danger.args = {
-  children: 'Click me',
-  danger: true,
-};
-
-export const Loading = Template.bind({});
-Loading.args = {
-  children: 'Click me',
-  loading: true,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  children: 'Click me',
-  disabled: true,
-};

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

@@ -1,74 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Button from './Button';
-import Loading from '../icons/Loading';
-
-it('renders empty Button unchanged', () => {
-  const { container } = render(<Button />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Button unchanged', () => {
-  const { container } = render(<Button>Click me</Button>);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Button primary unchanged', () => {
-  const { container } = render(<Button primary>Click me</Button>);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Button outlined unchanged', () => {
-  const { container } = render(<Button outlined>Click me</Button>);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Button padded unchanged', () => {
-  const { container } = render(<Button padded>Click me</Button>);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Button block unchanged', () => {
-  const { container } = render(<Button block>Click me</Button>);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Button with icon unchanged', () => {
-  const { container } = render(<Button icon={<Loading />}>Click me</Button>);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Button with icon only unchanged', () => {
-  const { container } = render(<Button icon={<Loading />} />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Button danger unchanged', () => {
-  const { container } = render(<Button danger>Click me</Button>);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Button loading unchanged', () => {
-  const { container } = render(<Button loading>Click me</Button>);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Button disabled unchanged', () => {
-  const { container } = render(<Button disabled>Click me</Button>);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Button with title unchanged', () => {
-  const { container } = render(<Button title="Button title">Click me</Button>);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Button square unchanged', () => {
-  const { container } = render(<Button shape="square">Click me</Button>);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Button circle unchanged', () => {
-  const { container } = render(<Button shape="circle" icon={<Loading />} />);
-  expect(container).toMatchSnapshot();
-});

package/src/components/ui/Button.tsx

@@ -1,107 +0,0 @@
-import React, { FC } from 'react';
-import cx from 'classnames';
-import Loading from '../icons/Loading';
-
-export interface Props {
-  children?:
-    | React.ReactChild
-    | React.ReactChild[]
-    | React.ReactNode
-    | JSX.Element;
-  primary?: boolean;
-  outlined?: boolean;
-  ghost?: boolean;
-  padded?: boolean;
-  block?: boolean;
-  icon?: React.ReactNode;
-  shape?: 'square' | 'rounded' | 'circle';
-  danger?: boolean;
-  loading?: boolean;
-  disabled?: boolean;
-  className?: string;
-  title?: string;
-  id?: string;
-  isActive?: boolean;
-  htmlType?: 'button' | 'submit' | 'reset';
-  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  onMouseDown?: (
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
-  ) => void;
-  onMouseUp?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  onMouseLeave?: (
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
-  ) => void;
-  onTouchStart?: (
-    event: React.TouchEvent<HTMLButtonElement> | React.MouseEvent
-  ) => void;
-  onTouchEnd?: (
-    event: React.TouchEvent<HTMLButtonElement> | React.MouseEvent
-  ) => void;
-}
-
-const Button: FC<Props> = ({
-  primary = false,
-  outlined = false,
-  ghost = false,
-  padded = true,
-  shape = 'rounded',
-  danger = false,
-  loading = false,
-  disabled = false,
-  block = false,
-  icon,
-  className,
-  title,
-  id,
-  htmlType,
-  onClick,
-  onMouseDown,
-  onMouseUp,
-  onMouseLeave,
-  onTouchStart,
-  onTouchEnd,
-  children,
-  isActive,
-}) => (
-  <button
-    id={id}
-    type={htmlType}
-    onClick={onClick}
-    onMouseDown={onMouseDown}
-    onMouseUp={onMouseUp}
-    onMouseLeave={onMouseLeave}
-    onTouchStart={onTouchStart}
-    onTouchEnd={onTouchEnd}
-    title={title}
-    disabled={loading || disabled}
-    className={cx(
-      'memori-button',
-      {
-        'memori-button--primary': primary,
-        'memori-button--outlined': outlined,
-        'memori-button--ghost': ghost,
-        'memori-button--square': shape === 'square',
-        'memori-button--rounded': shape === 'rounded',
-        'memori-button--circle': shape === 'circle',
-        'memori-button--padded': padded,
-        'memori-button--block': block,
-        'memori-button--with-icon': (icon || loading) && children,
-        'memori-button--icon-only': (icon || loading) && !children,
-        'memori-button--danger': danger,
-        'memori-button--loading': loading,
-        'memori-button--active': isActive,
-      },
-      className
-    )}
-  >
-    {icon && !loading && <span className="memori-button--icon">{icon}</span>}
-    {loading && (
-      <span className="memori-button--icon loading-icon">
-        <Loading loading />
-      </span>
-    )}
-    {children}
-  </button>
-);
-
-export default Button;

package/src/components/ui/Card.css

@@ -1,65 +0,0 @@
-.memori-card {
-    display: flex;
-    overflow: hidden;
-    flex-direction: column;
-    border-radius: 10px;
-    margin: 0 0 1rem;
-    background-color: #fff;
-    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
-}
-
-.memori-card--hoverable {
-    transition: box-shadow 0.3s;
-}
-
-.memori-card--hoverable:hover {
-    box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2);
-}
-
-.memori-card--hoverable:focus,
-.memori-card--hoverable:focus-within {
-    outline-color: var(--memori-primary);
-}
-
-.memori-card--cover {
-    display: flex;
-    overflow: hidden;
-    height: 200px;
-    align-items: center;
-    justify-content: center;
-    border-radius: 10px 10px 0 0;
-    background-color: #eee;
-}
-
-.memori-card--cover img {
-    min-width: 100%;
-    min-height: 100%;
-    object-fit: cover;
-    object-position: center;
-}
-
-.memori-card--content {
-    z-index: 0;
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    justify-content: space-between;
-    padding: 1.5rem 1rem;
-}
-
-.memori-card--title {
-    margin: 0 0 0.5rem;
-    font-size: 1.25rem;
-    font-weight: 600;
-}
-
-.memori-card--description {
-    margin: 0;
-    color: #999;
-    font-size: 0.875rem;
-    font-weight: 400;
-}
-
-.memori-card--pointer {
-    cursor: pointer;
-}

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

@@ -1,95 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import Card, { Props } from './Card';
-import Button from './Button';
-import './Card.css';
-
-const meta: Meta = {
-  title: 'UI/Card',
-  component: Card,
-  argTypes: {
-    title: {
-      control: {
-        type: 'text',
-      },
-    },
-    description: {
-      control: {
-        type: 'text',
-      },
-    },
-    children: {
-      control: {
-        type: 'text',
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-    },
-    loading: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => <Card {...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 = {
-  title: 'Card title',
-  loading: false,
-};
-
-export const WithTitleAndDescription = Template.bind({});
-WithTitleAndDescription.args = {
-  title: 'Card title',
-  description: 'Card description',
-  loading: false,
-};
-
-export const Loading = Template.bind({});
-Loading.args = {
-  title: 'Card title',
-  description: 'Card description',
-  loading: true,
-};
-
-export const WithCover = Template.bind({});
-WithCover.args = {
-  title: 'Card title',
-  description: 'Card description',
-  cover: <img src="https://picsum.photos/200/300" alt="cover" />,
-  loading: false,
-};
-
-export const WithChildren = Template.bind({});
-WithChildren.args = {
-  title: 'Card title',
-  description: 'Card description',
-  children: (
-    <div>
-      <p>Some text</p>
-      <Button primary>Show more</Button>
-    </div>
-  ),
-  loading: false,
-};
-
-export const Hoverable = Template.bind({});
-Hoverable.args = {
-  title: 'Card title',
-  description: 'Card description',
-  loading: false,
-  hoverable: true,
-};

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

@@ -1,47 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Card from './Card';
-
-it('renders Card unchanged', () => {
-  const { container } = render(<Card />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Card with title unchanged', () => {
-  const { container } = render(<Card title="Card title" />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Card with description unchanged', () => {
-  const { container } = render(<Card description="Card description" />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Card with cover unchanged', () => {
-  const { container } = render(<Card cover={<img src="#" alt="" />} />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Card with children unchanged', () => {
-  const { container } = render(
-    <Card>
-      <p>Ciao</p>
-    </Card>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Card loading unchanged', () => {
-  const { container } = render(<Card title="Card title" loading />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Card with custom CSS class unchanged', () => {
-  const { container } = render(<Card className="lorem-ipsum" />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Card hoverable unchanged', () => {
-  const { container } = render(<Card title="lorem-ipsum" hoverable />);
-  expect(container).toMatchSnapshot();
-});

package/src/components/ui/Card.tsx

@@ -1,48 +0,0 @@
-import React, { FC } from 'react';
-import cx from 'classnames';
-import Spin from './Spin';
-
-export interface Props {
-  children?: React.ReactChild;
-  loading?: boolean;
-  className?: string;
-  title?: string;
-  description?: string;
-  cover?: JSX.Element | React.ReactNode | string;
-  hoverable?: boolean;
-  onClick?: () => void;
-}
-
-const Card: FC<Props> = ({
-  loading = false,
-  className,
-  title,
-  description,
-  cover,
-  hoverable = false,
-  children,
-  onClick,
-}) => (
-  <div
-    onClick={onClick}
-    className={cx('memori-card', className, {
-      'memori-card--loading': loading,
-      'memori-card--with-cover': cover,
-      'memori-card--hoverable': hoverable,
-      'memori-card--pointer': !!onClick,
-    })}
-  >
-    <Spin spinning={loading}>
-      {cover && <div className="memori-card--cover">{cover}</div>}
-      <div className="memori-card--content">
-        {title && <h3 className="memori-card--title">{title}</h3>}
-        {description && (
-          <p className="memori-card--description">{description}</p>
-        )}
-        <div className="memori-card--children">{children}</div>
-      </div>
-    </Spin>
-  </div>
-);
-
-export default Card;

package/src/components/ui/Checkbox.css

@@ -1,116 +0,0 @@
-.memori-checkbox {
-    display: inline-flex;
-    box-sizing: border-box;
-    align-items: baseline;
-    padding: 0;
-    margin: 0;
-    color: rgba(0, 0, 0, 0.88);
-    cursor: pointer;
-    font-family: var(--memori-font-family);
-    font-size: 14px;
-    line-height: unset;
-    list-style: none;
-}
-
-.memori-checkbox--input-wrapper {
-    position: relative;
-    top: 0.2em;
-    cursor: pointer;
-    white-space: nowrap;
-}
-
-.memori-checkbox--inner {
-    position: relative;
-    top: 0;
-    display: block;
-    width: 16px;
-    height: 16px;
-    box-sizing: border-box;
-    border: 1px solid #d9d9d9;
-    border-radius: 4px;
-    border-top-color: rgb(217, 217, 217);
-    border-right-color: rgb(217, 217, 217);
-    border-bottom-color: rgb(217, 217, 217);
-    border-left-color: rgb(217, 217, 217);
-    background-color: #fff;
-    border-collapse: separate;
-    direction: ltr;
-    inset-inline-start: 0;
-    transition: all 0.3s;
-}
-
-.memori-checkbox:not(.memori-checkbox--indeterminate) .memori-checkbox--inner::after {
-    position: absolute;
-    top: 50%;
-    display: table;
-    width: 5.7142857142857135px;
-    height: 9.142857142857142px;
-    box-sizing: border-box;
-    border: 2px solid #fff;
-    border-top: 0;
-    border-inline-start: 0;
-    content: '';
-    inset-inline-start: 21.5%;
-    opacity: 0;
-    transform: rotate(45deg) scale(0) translate(-50%, -50%);
-    transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
-}
-
-.memori-checkbox--input {
-    position: absolute;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-    inset: 0;
-    opacity: 0;
-}
-
-.memori-checkbox--text {
-    padding-inline-end: 8px;
-    padding-inline-start: 8px;
-}
-
-.memori-checkbox--disabled,
-.memori-checkbox--disabled .memori-checkbox--input-wrapper,
-.memori-checkbox--disabled .memori-checkbox--input {
-    cursor: not-allowed;
-}
-
-.memori-checkbox--disabled .memori-checkbox--inner {
-    border-color: #d9d9d9;
-    background: rgba(0, 0, 0, 0.04);
-}
-
-.memori-checkbox.memori-checkbox--disabled .memori-checkbox--inner::after {
-    border-color: rgba(0, 0, 0, 0.25);
-}
-
-.memori-checkbox--disabled .memori-checkbox--text {
-    color: rgba(0, 0, 0, 0.25);
-}
-
-.memori-checkbox--input.memori-checkbox--indeterminate+.memori-checkbox--inner,
-.memori-checkbox--input:checked:not(:disabled)+.memori-checkbox--inner {
-    z-index: 2;
-    border-color: var(--memori-primary);
-    background-color: var(--memori-primary);
-}
-
-.memori-checkbox--input:checked+.memori-checkbox--inner::after {
-    opacity: 1;
-    transform: rotate(45deg) scale(1) translate(-50%, -50%);
-    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
-}
-
-.memori-checkbox.memori-checkbox--indeterminate .memori-checkbox--inner::after,
-.memori-checkbox.memori-checkbox--indeterminate .memori-checkbox--input:checked+.memori-checkbox--inner::after {
-    position: absolute;
-    top: calc(50% - 1px);
-    left: 2px;
-    width: 10px;
-    border-bottom: 2px solid #fff;
-    content: "";
-    transform: none;
-    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
-}