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

package/src/components/ui/Tooltip.css

@@ -1,171 +0,0 @@
-/* stylelint-disable no-descending-specificity */
-
-.memori-tooltip {
-    position: relative;
-    z-index: 1000;
-    display: inline-block;
-}
-
-.memori-tooltip--content {
-    position: absolute;
-    z-index: 1000;
-    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;
-    font-size: 0.85em;
-    opacity: 0;
-    text-align: center;
-    transform: none;
-    transition: 0.3s 0.1s all ease;
-}
-
-.memori-tooltip.memori-tooltip--align-left .memori-tooltip--content,
-.memori-tooltip.memori-tooltip--align-topLeft .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: 0.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.memori-tooltip--align-topRight .memori-tooltip--content::before {
-    top: 100%;
-    right: auto;
-    left: 10px;
-    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
-    margin-top: 10px;
-    margin-left: 5px;
-}
-
-.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.memori-tooltip--align-topRight:not(.memori-tooltip--disabled).memori-tooltip--visible
-    .memori-tooltip--content,
-.memori-tooltip.memori-tooltip--align-topRight:not(.memori-tooltip--disabled):not(.memori-tooltip--visible):hover
-    .memori-tooltip--content {
-    transform: translateY(-150%) translateX(-33%);
-}
-
-.memori-tooltip.memori-tooltip--align-topLeft .memori-tooltip--content::before {
-    top: 100%;
-    right: 10px;
-    left: auto;
-    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
-    margin-top: 10px;
-    margin-left: 5px;
-}
-
-.memori-tooltip.memori-tooltip--align-topLeft:not(.memori-tooltip--disabled).memori-tooltip--visible
-    .memori-tooltip--content,
-.memori-tooltip.memori-tooltip--align-topLeft:not(.memori-tooltip--disabled):not(.memori-tooltip--visible):hover
-    .memori-tooltip--content {
-        z-index: 1000001;
-        transform: translateY(-110%) translateX(25%);
-}
-
-.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;
-}
-
-/* Portal tooltip content is always visible (positioning handled by portal wrapper) */
-.memori-tooltip.memori-tooltip--portal .memori-tooltip--content,
-.memori-tooltip.memori-tooltip--portal .memori-tooltip--content::before {
-    display: block;
-    opacity: 1;
-}
-
-.memori-tooltip.memori-tooltip--disabled {
-    cursor: not-allowed;
-}
-
-.memori-tooltip.memori-tooltip--align-bottomLeft .memori-tooltip--content,
-.memori-tooltip.memori-tooltip--align-bottomRight .memori-tooltip--content {
-    top: 100%;
-    right: initial;
-    left: 50%;
-    margin: initial;
-    margin-top: 15px;
-}
-
-.memori-tooltip.memori-tooltip--align-bottomLeft .memori-tooltip--content::before {
-    z-index: 1001;
-    top: -15px;
-    bottom: initial;
-    left: 66%;
-    border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
-    margin-top: 0px;
-    margin-bottom: initial;
-    margin-left: 5px;
-}
-
-.memori-tooltip.memori-tooltip--align-bottomRight .memori-tooltip--content::before {
-    z-index: 1001;
-    top: -15px;
-    right: 10px;
-    bottom: initial;
-    left: auto;
-    border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
-    margin-top: -5px;
-    margin-right: 5px;
-    margin-bottom: initial;
-}
-
-.memori-tooltip.memori-tooltip--align-bottomLeft:not(.memori-tooltip--disabled).memori-tooltip--visible
-    .memori-tooltip--content,
-.memori-tooltip.memori-tooltip--align-bottomLeft:not(.memori-tooltip--disabled):not(.memori-tooltip--visible):hover
-    .memori-tooltip--content {
-    transform: translateX(-73%);
-}
-
-.memori-tooltip.memori-tooltip--align-bottomRight:not(.memori-tooltip--disabled).memori-tooltip--visible
-    .memori-tooltip--content,
-.memori-tooltip.memori-tooltip--align-bottomRight:not(.memori-tooltip--disabled):not(.memori-tooltip--visible):hover
-    .memori-tooltip--content {
-    transform: translateX(33%);
-}

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

@@ -1,109 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import Tooltip, { Props } from './Tooltip';
-import './Tooltip.css';
-
-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 => (
-  <div
-    style={{
-      display: 'flex',
-      justifyContent: 'flex-start',
-      paddingTop: '10rem',
-    }}
-  >
-    <Tooltip {...args} />
-  </div>
-);
-const TemplateRight: Story<Props> = args => (
-  <div
-    style={{ display: 'flex', justifyContent: 'flex-end', paddingTop: '10rem' }}
-  >
-    <Tooltip {...args} />
-  </div>
-);
-
-// 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,
-};
-
-export const AlignLeft = TemplateRight.bind({});
-AlignLeft.args = {
-  content: 'Here is some tooltip content',
-  children: <span>Hover me</span>,
-  align: 'left',
-  visible: true,
-};
-
-export const AlignRight = Template.bind({});
-AlignRight.args = {
-  content: 'Here is some tooltip content',
-  children: <span>Hover me</span>,
-  align: 'right',
-  visible: true,
-};
-
-export const AlignTopLeft = TemplateRight.bind({});
-AlignTopLeft.args = {
-  content: 'Here is some tooltip content',
-  children: <span>Hover me</span>,
-  align: 'topLeft',
-  visible: true,
-};
-
-export const AlignTopRight = Template.bind({});
-AlignTopRight.args = {
-  content: 'Here is some tooltip content',
-  children: <span>Hover me</span>,
-  align: 'topRight',
-  visible: true,
-};

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

@@ -1,102 +0,0 @@
-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();
-});
-
-it('renders Tooltip aligned left unchanged', () => {
-  const { container } = render(
-    <Tooltip
-      content="Here is some tooltip content by default as I am controlled"
-      visible
-      align="left"
-    >
-      Hover me
-    </Tooltip>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Tooltip aligned top left unchanged', () => {
-  const { container } = render(
-    <Tooltip
-      content="Here is some tooltip content by default as I am controlled"
-      visible
-      align="topLeft"
-    >
-      Hover me
-    </Tooltip>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Tooltip aligned right unchanged', () => {
-  const { container } = render(
-    <Tooltip
-      content="Here is some tooltip content by default as I am controlled"
-      visible
-      align="right"
-    >
-      Hover me
-    </Tooltip>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Tooltip aligned top right unchanged', () => {
-  const { container } = render(
-    <Tooltip
-      content="Here is some tooltip content by default as I am controlled"
-      visible
-      align="topRight"
-    >
-      Hover me
-    </Tooltip>
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/ui/Tooltip.tsx

@@ -1,162 +0,0 @@
-import React, { FC, useRef, useState, useCallback, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import cx from 'classnames';
-
-export interface Props {
-  content: string | JSX.Element | React.ReactNode;
-  className?: string;
-  align?:
-    | 'left'
-    | 'right'
-    | 'topLeft'
-    | 'topRight'
-    | 'bottomLeft'
-    | 'bottomRight';
-  disabled?: boolean;
-  children: React.ReactNode;
-  visible?: boolean;
-}
-
-const Tooltip: FC<Props> = ({
-  content,
-  className,
-  align = 'right',
-  disabled = false,
-  visible = false,
-  children,
-}) => {
-  const triggerRef = useRef<HTMLDivElement>(null);
-  const positionWrapperRef = useRef<HTMLDivElement | null>(null);
-  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const [isHovered, setIsHovered] = useState(false);
-
-  const isOpen = !disabled && (visible || isHovered);
-
-  const updatePosition = useCallback(() => {
-    const trigger = triggerRef.current;
-    const wrapper = positionWrapperRef.current;
-    if (trigger && wrapper) {
-      const rect = trigger.getBoundingClientRect();
-      wrapper.style.top = `${rect.top}px`;
-      wrapper.style.left = `${rect.left}px`;
-      wrapper.style.width = `${rect.width}px`;
-      wrapper.style.height = `${rect.height}px`;
-    }
-  }, []);
-
-  const clearCloseTimeout = useCallback(() => {
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
-    }
-  }, []);
-
-  const handleTriggerEnter = useCallback(() => {
-    clearCloseTimeout();
-    setIsHovered(true);
-  }, [clearCloseTimeout]);
-
-  const handleTriggerLeave = useCallback(() => {
-    closeTimeoutRef.current = setTimeout(() => {
-      setIsHovered(false);
-      closeTimeoutRef.current = null;
-    }, 100);
-  }, []);
-
-  const handleContentEnter = useCallback(() => {
-    clearCloseTimeout();
-    setIsHovered(true);
-  }, [clearCloseTimeout]);
-
-  const handleContentLeave = useCallback(() => {
-    closeTimeoutRef.current = setTimeout(() => {
-      setIsHovered(false);
-      closeTimeoutRef.current = null;
-    }, 100);
-  }, []);
-
-  useEffect(() => {
-    if (!isOpen) return;
-    updatePosition();
-    const onScrollOrResize = () => updatePosition();
-    window.addEventListener('scroll', onScrollOrResize, {
-      passive: true,
-      capture: true,
-    });
-    window.addEventListener('resize', onScrollOrResize);
-    return () => {
-      window.removeEventListener('scroll', onScrollOrResize, true);
-      window.removeEventListener('resize', onScrollOrResize);
-    };
-  }, [isOpen, updatePosition]);
-
-  useEffect(() => () => clearCloseTimeout(), [clearCloseTimeout]);
-
-  const setPositionWrapperRef = useCallback(
-    (el: HTMLDivElement | null) => {
-      positionWrapperRef.current = el;
-      if (el && triggerRef.current) updatePosition();
-    },
-    [updatePosition]
-  );
-
-  const portalContent = isOpen
-    ? createPortal(
-        (
-          <div
-            ref={setPositionWrapperRef}
-            className={cx(
-              'memori-tooltip',
-              'memori-tooltip--portal',
-              `memori-tooltip--align-${align}`,
-              className,
-              { 'memori-tooltip--visible': true }
-            )}
-            style={{
-              position: 'fixed',
-              top: 0,
-              left: 0,
-              width: 0,
-              height: 0,
-              pointerEvents: 'none',
-              zIndex: 2147483647,
-            }}
-          >
-            <div
-              className="memori-tooltip--content memori-tooltip--content-portal"
-              onMouseEnter={handleContentEnter}
-              onMouseLeave={handleContentLeave}
-            >
-              {content}
-            </div>
-          </div>
-        ) as Parameters<typeof createPortal>[0],
-        document.body
-      )
-    : null;
-
-  return (
-    <>
-      <div
-        ref={triggerRef}
-        className={cx(
-          'memori-tooltip',
-          `memori-tooltip--align-${align}`,
-          className,
-          {
-            'memori-tooltip--disabled': disabled,
-            'memori-tooltip--visible': visible && !isHovered,
-            'memori-tooltip--portal-open': isOpen,
-          }
-        )}
-        onMouseEnter={handleTriggerEnter}
-        onMouseLeave={handleTriggerLeave}
-      >
-        <div className="memori-tooltip--trigger">{children}</div>
-      </div>
-      {portalContent}
-    </>
-  );
-};
-
-export default Tooltip;

package/src/components/ui/__snapshots__/Alert.test.tsx.snap

@@ -1,59 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Alert Component renders Alert open unchanged 1`] = `
-<div>
-  <div
-    class="memori-alert memori-alert--info"
-  >
-    <style>
-      
-              .memori-alert {
-                --memori-alert--width: 400px;
-              }
-            
-    </style>
-    <div
-      class="memori-alert--container ease-out duration-300 opacity-0 translate-y-4"
-    >
-      <div
-        class="memori-alert--content"
-      >
-        <div
-          class="memori-alert--title"
-        >
-          Test Alert
-        </div>
-      </div>
-      <div
-        class="memori-alert--actions"
-      >
-        <button
-          class="memori-button memori-button--ghost memori-button--circle memori-button--padded memori-button--icon-only memori-alert--close"
-          title="close"
-        >
-          <span
-            class="memori-button--icon"
-          >
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              role="img"
-              viewBox="0 0 1024 1024"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-                fill="currentColor"
-                stroke="none"
-                stroke-width="0"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Alert Component renders Alert unchanged 1`] = `<div />`;