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

package/src/components/ui/Alert.tsx

@@ -1,123 +0,0 @@
-import React, { FC } from 'react';
-import { Transition } from '@headlessui/react';
-import cx from 'classnames';
-import Close from '../icons/Close';
-import Button from './Button';
-import { useTranslation } from 'react-i18next';
-
-export type AlertType = 'success' | 'warning' | 'error' | 'info';
-
-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;
-  type?: AlertType;
-  icon?: JSX.Element | React.ReactNode;
-  closable?: boolean;
-  duration?: number | null;
-  action?: JSX.Element | React.ReactNode;
-  width?: string;
-}
-
-const Alert: FC<Props> = ({
-  open = false,
-  onClose,
-  className,
-  title,
-  description,
-  children,
-  type = 'info',
-  icon,
-  closable = true,
-  duration = null,
-  action,
-  width = '400px',
-}: Props) => {
-  const { t } = useTranslation();
-
-  // Auto-close functionality
-  React.useEffect(() => {
-    if (duration && open) {
-      const timer = setTimeout(() => {
-        onClose(false);
-      }, duration);
-      return () => clearTimeout(timer);
-    }
-  }, [duration, open, onClose]);
-
-  const getTypeStyles = (type: AlertType) => {
-    switch (type) {
-      case 'success':
-        return 'memori-alert--success';
-      case 'warning':
-        return 'memori-alert--warning';
-      case 'error':
-        return 'memori-alert--error';
-      default:
-        return 'memori-alert--info';
-    }
-  };
-
-  return (
-    <Transition
-      show={open}
-      as={React.Fragment}
-      appear
-    >
-      <div className={cx('memori-alert', getTypeStyles(type), className)}>
-        <style
-          dangerouslySetInnerHTML={{
-            __html: `
-              .memori-alert {
-                --memori-alert--width: ${width};
-              }
-            `,
-          }}
-        />
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0 translate-y-4"
-          enterTo="opacity-100 translate-y-0"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100 translate-y-0"
-          leaveTo="opacity-0 translate-y-4"
-        >
-          <div className="memori-alert--container">
-            {icon && <div className="memori-alert--icon">{icon}</div>}
-            
-            <div className="memori-alert--content">
-              {title && (
-                <div className="memori-alert--title">{title}</div>
-              )}
-              {description && (
-                <div className="memori-alert--description">{description}</div>
-              )}
-              {children}
-            </div>
-
-            <div className="memori-alert--actions">
-              {action && <div className="memori-alert--action">{action}</div>}
-              {closable && (
-                <Button
-                  ghost
-                  padded
-                  shape="circle"
-                  icon={<Close />}
-                  title={t('close') || 'Close'}
-                  onClick={() => onClose(false)}
-                  className="memori-alert--close"
-                />
-              )}
-            </div>
-          </div>
-        </Transition.Child>
-      </div>
-    </Transition>
-  );
-};
-
-export default Alert;

package/src/components/ui/Button.css

@@ -1,167 +0,0 @@
-.memori-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 4px 15px;
-    border: 1px solid var(--memori-button-border-color, #d9d9d9);
-    border-radius: var(--memori-button-radius, 5px);
-    background: var(--memori-button-bg, #fff);
-    box-shadow: var(--memori-button-box-shadow);
-    color: var(--memori-button-text, #333);
-    font-family: var(--memori-font-family);
-    font-size: 14px;
-    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-}
-.memori-button--active {
-    background: var(--memori-primary);
-    color: var(--memori-primary-text);
-}
-
-.memori-button:hover {
-    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 4px 8px rgba(0, 0, 0, 0.04);
-    color: #333;
-    cursor: pointer;
-}
-
-.memori-button:hover,
-.memori-button:focus {
-    border-color: var(--memori-primary);
-    color: var(--memori-primary);
-}
-
-.memori-button:focus {
-    outline-color: var(--memori-primary);
-}
-
-.memori-button:active {
-    box-shadow: inset var(--memori-button-box-shadow);
-}
-
-.memori-button--padded {
-    padding: var(--memori-button-padding);
-}
-
-.memori-button--block {
-    display: block;
-    width: 100%;
-}
-
-.memori-button--primary {
-    background: var(--memori-primary);
-    color: var(--memori-primary-text);
-}
-
-.memori-button--primary:hover,
-.memori-button--primary:focus {
-    color: var(--memori-primary-text);
-}
-
-.memori-button--primary:active {
-    transform: scale(0.95);
-}
-
-.memori-button--outlined {
-    border-color: var(--memori-primary);
-    background: none;
-    color: var(--memori-primary);
-}
-
-.memori-button--outlined:hover,
-.memori-button--outlined:focus {
-    border-color: var(--memori-primary);
-    background-color: var(--memori-primary);
-    color: var(--memori-primary-text);
-}
-
-.memori-button--outlined:active {
-    transform: scale(0.95);
-}
-
-.memori-button--ghost {
-    border: 1px solid transparent;
-    background: none;
-    box-shadow: none;
-}
-
-.memori-button--ghost:hover,
-.memori-button--ghost:focus {
-    border-color: transparent;
-    background: rgba(0, 0, 0, 0.04);
-    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 4px 8px rgba(0, 0, 0, 0.04);
-    color: inherit;
-}
-
-.memori-button--ghost:focus {
-    border: 1px solid var(--memori-primary);
-}
-
-.memori-button--square {
-    border-radius: 0;
-}
-
-.memori-button--rounded {
-    border-radius: var(--memori-button-radius);
-}
-
-.memori-button--danger {
-    border-color: var(--memori-error-color);
-    background: rgba(0, 0, 0, 0.02);
-    color: var(--memori-error-color);
-}
-
-.memori-button--danger:hover,
-.memori-button--danger:focus {
-    border-color: var(--memori-error-color);
-    background-color: var(--memori-error-color);
-    color: #fff;
-}
-
-.memori-button--danger.memori-button--ghost {
-    border-color: transparent;
-    background: none;
-    box-shadow: none;
-    color: var(--memori-error-color);
-}
-
-.memori-button--danger.memori-button--ghost:hover,
-.memori-button--danger.memori-button--ghost:focus {
-    border-color: var(--memori-error-color);
-    background: rgba(0, 0, 0, 0.02);
-    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 4px 8px rgba(0, 0, 0, 0.04);
-    color: var(--memori-error-color);
-}
-
-.memori-button--circle {
-    padding: 0.75em;
-    border-radius: 50%;
-    aspect-ratio: 1/1;
-
-}
-
-.memori-button--icon {
-    display: inline-flex;
-    color: currentColor;
-}
-
-.memori-button--icon svg {
-    width: 1.25em;
-    height: 1.25em;
-    fill: currentColor;
-    font-size: 1em;
-    line-height: 1;
-}
-
-.memori-button--icon svg[fill='none'] {
-    fill: none;
-}
-
-.memori-button--with-icon .memori-button--icon {
-    margin-right: 0.5em;
-}
-
-.memori-button[disabled] {
-    background: var(--memori-button-disabled-bg, #ccc);
-    color: var(--memori-button-disabled-color, #000);
-    cursor: not-allowed;
-    opacity: 0.5;
-}

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