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

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;
-}

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

@@ -1,74 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import Checkbox, { Props } from './Checkbox';
-import './Checkbox.css';
-
-const meta: Meta = {
-  title: 'UI/Checkbox',
-  component: Checkbox,
-  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 => <Checkbox {...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: 'Check me',
-};
-
-export const Checked = Template.bind({});
-Checked.args = {
-  label: 'Uncheck me',
-  checked: true,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  label: 'Do not check me',
-  disabled: true,
-};
-
-export const DisabledChecked = Template.bind({});
-DisabledChecked.args = {
-  label: 'Do not uncheck me',
-  checked: true,
-  disabled: true,
-};
-
-export const Indeterminate = Template.bind({});
-Indeterminate.args = {
-  label: 'Indeterminate',
-  checked: true,
-  indeterminate: true,
-};
-
-export const DisabledIndeterminate = Template.bind({});
-DisabledIndeterminate.args = {
-  label: 'Indeterminate',
-  checked: false,
-  indeterminate: true,
-  disabled: true,
-};

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

@@ -1,28 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Checkbox from './Checkbox';
-
-it('renders Checkbox unchanged', () => {
-  const { container } = render(<Checkbox label="Check me" />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Checkbox checked unchanged', () => {
-  const { container } = render(<Checkbox label="Check me" checked />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Checkbox disabled unchanged', () => {
-  const { container } = render(<Checkbox label="Check me" disabled />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Checkbox checked and disabled unchanged', () => {
-  const { container } = render(<Checkbox label="Check me" checked disabled />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Checkbox indeterminate unchanged', () => {
-  const { container } = render(<Checkbox label="Check me" indeterminate />);
-  expect(container).toMatchSnapshot();
-});

package/src/components/ui/Checkbox.tsx

@@ -1,58 +0,0 @@
-import React, { FC, useEffect, useRef } from 'react';
-import cx from 'classnames';
-
-export interface Props extends React.HTMLAttributes<HTMLInputElement> {
-  label?: string;
-  checked?: boolean;
-  disabled?: boolean;
-  indeterminate?: boolean;
-  name?: string;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-const Checkbox: FC<Props> = ({
-  label,
-  className,
-  disabled = false,
-  indeterminate = false,
-  checked,
-  children,
-  onChange,
-  name,
-  ...props
-}) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (!inputRef.current) return;
-    inputRef.current.indeterminate = indeterminate;
-  }, [inputRef, indeterminate]);
-
-  return (
-    <label
-      className={cx('memori-checkbox', className, {
-        'memori-checkbox--disabled': disabled,
-        'memori-checkbox--indeterminate': indeterminate,
-      })}
-    >
-      <span className="memori-checkbox--input-wrapper">
-        <input
-          ref={inputRef}
-          type="checkbox"
-          {...props}
-          name={name}
-          disabled={disabled}
-          checked={checked || indeterminate}
-          className="memori-checkbox--input"
-          onChange={onChange}
-        />
-        <span className="memori-checkbox--inner" />
-      </span>
-      {!!label?.length && (
-        <span className="memori-checkbox--text">{label}</span>
-      )}
-    </label>
-  );
-};
-
-export default Checkbox;

package/src/components/ui/ConfirmDialog.css

@@ -1,42 +0,0 @@
-/* Confirmation dialog styles */
-.memori-confirm-dialog--backdrop {
-  position: fixed;
-  z-index: 100;
-  background-color: rgba(0, 0, 0, 0.5);
-  inset: 0;
-}
-
-.memori-confirm-dialog--container {
-  position: fixed;
-  z-index: 101;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-  inset: 0;
-}
-
-.memori-confirm-dialog--panel {
-  width: 100%;
-  max-width: 28rem;
-  padding: 1.5rem;
-  border-radius: 0.5rem;
-  background-color: white;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-}
-
-.memori-confirm-dialog--title {
-  margin-bottom: 0.75rem;
-  font-size: 1.25rem;
-  font-weight: 600;
-}
-
-.memori-confirm-dialog--message {
-  margin-bottom: 1.5rem;
-}
-
-.memori-confirm-dialog--actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.5rem;
-}