@qoretechnologies/reqore 0.44.0 → 0.46.0

package/__tests__/drawer.test.tsx

@@ -1,140 +0,0 @@
-import { fireEvent, render } from '@testing-library/react';
-import React from 'react';
-import {
-  ReqoreButton,
-  ReqoreContent,
-  ReqoreDrawer,
-  ReqoreLayoutContent,
-  ReqoreUIProvider,
-} from '../src';
-
-test('Does not render <Drawer /> if not open', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreDrawer>Hello</ReqoreDrawer>
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-drawer').length).toBe(0);
-});
-
-test('Renders opened <Drawer /> properly', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreDrawer isOpen>Hello</ReqoreDrawer>
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-drawer').length).toBe(1);
-});
-
-test('Renders hidable <Drawer /> properly', () => {
-  const fn = jest.fn();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreDrawer isOpen hidable onHideToggle={fn} isHidden>
-            Hello
-          </ReqoreDrawer>
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-drawer').length).toBe(0);
-  expect(document.querySelectorAll('.reqore-drawer-hide-button').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-drawer-close-button').length).toBe(0);
-
-  fireEvent.click(document.querySelector('.reqore-drawer-hide-button')!);
-
-  expect(fn).toHaveBeenCalledWith(false);
-  expect(document.querySelectorAll('.reqore-drawer').length).toBe(1);
-
-  fireEvent.click(document.querySelector('.reqore-drawer-hide-button')!);
-
-  expect(fn).toHaveBeenLastCalledWith(true);
-  expect(fn).toHaveBeenCalledTimes(2);
-});
-
-test('Renders closable <Drawer /> properly', () => {
-  const fn = jest.fn();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent style={{ width: 800 }}>
-          <ReqoreDrawer isOpen onClose={fn}>
-            Hello
-          </ReqoreDrawer>
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-drawer').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-drawer-close-button').length).toBe(1);
-
-  fireEvent.click(document.querySelector('.reqore-drawer-close-button')!);
-
-  expect(fn).toHaveBeenCalled();
-});
-
-test('Renders <Drawer /> with interactive backdrop', () => {
-  const fn = jest.fn();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreDrawer isOpen onClose={fn} hasBackdrop>
-            Hello
-          </ReqoreDrawer>
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-drawer').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-drawer-close-button').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-drawer-backdrop').length).toBe(1);
-
-  fireEvent.click(document.querySelector('.reqore-drawer-backdrop')!);
-
-  expect(fn).toHaveBeenCalled();
-});
-
-const CustomDrawer = () => {
-  const [count, setCount] = React.useState(0);
-
-  return (
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreDrawer isOpen hasBackdrop actions={[{ label: `Count is ${count}` }]}>
-            <ReqoreButton onClick={() => setCount(count + 1)}>Click me</ReqoreButton>
-          </ReqoreDrawer>
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-};
-
-test('<Drawer /> actions are changed properly', () => {
-  const { getAllByText } = render(<CustomDrawer />);
-
-  expect(getAllByText('Count is 0')[0]).toBeTruthy();
-
-  fireEvent.click(getAllByText('Click me')[0]);
-
-  expect(getAllByText('Count is 1')[0]).toBeTruthy();
-});

package/__tests__/dropdown.test.tsx

@@ -1,381 +0,0 @@
-import { fireEvent, render } from '@testing-library/react';
-import { useEffect, useState } from 'react';
-import { act } from 'react-dom/test-utils';
-import {
-  ReqoreContent,
-  ReqoreDropdown,
-  ReqoreInput,
-  ReqoreLayoutContent,
-  ReqoreUIProvider,
-} from '../src';
-import { IReqoreInputProps } from '../src/components/Input';
-
-beforeAll(() => {
-  jest.setTimeout(30000);
-});
-
-test('Renders <Dropdown /> properly', () => {
-  jest.useFakeTimers();
-  act(() => {
-    jest.advanceTimersByTime(1);
-    render(
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreContent>
-            <ReqoreDropdown
-              items={[
-                {
-                  selected: true,
-                  label: 'Hello',
-                  value: 'hello',
-                  icon: 'SunCloudyLine',
-                },
-                {
-                  label: 'How are ya',
-                  value: 'howareya',
-                  icon: 'BatteryChargeFill',
-                },
-                {
-                  disabled: true,
-                  label: 'i aM diSAblEd',
-                  value: 'disabled',
-                  icon: 'StopCircleLine',
-                },
-              ]}
-            />
-          </ReqoreContent>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    );
-  });
-
-  fireEvent.click(document.querySelector('.reqore-button')!);
-  jest.advanceTimersByTime(1);
-
-  expect(document.querySelector('.reqore-button')?.getAttribute('disabled')).toBe(null);
-  expect(document.querySelectorAll('.reqore-button').length).toBe(4);
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-menu-item').length).toBe(3);
-});
-
-test('Renders disabled <Dropdown /> when items are empty', () => {
-  jest.useFakeTimers();
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreContent>
-            <ReqoreDropdown />
-          </ReqoreContent>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    );
-  });
-
-  fireEvent.click(document.querySelector('.reqore-button')!);
-
-  expect(document.querySelector('.reqore-button')?.getAttribute('disabled')).toBe('');
-});
-
-test('Renders disabled <Dropdown /> when items are not empty & disabled prop is true', () => {
-  jest.useFakeTimers();
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreContent>
-            <ReqoreDropdown
-              label='Disabled with items'
-              items={[
-                {
-                  selected: true,
-                  label: 'Hello',
-                  value: 'hello',
-                  icon: 'SunCloudyLine',
-                },
-                {
-                  label: 'How are ya',
-                  value: 'howareya',
-                  icon: 'BatteryChargeFill',
-                },
-                {
-                  disabled: true,
-                  label: 'i aM diSAblEd',
-                  value: 'disabled',
-                  icon: 'StopCircleLine',
-                },
-              ]}
-              disabled
-            />
-          </ReqoreContent>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    );
-  });
-
-  expect(document.querySelector('.reqore-button')?.getAttribute('disabled')).toBe('');
-});
-
-test('Renders <Dropdown /> with custom component and custom handler', () => {
-  jest.useFakeTimers();
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreContent>
-            <ReqoreDropdown
-              component={ReqoreInput}
-              handler='focus'
-              useTargetWidth
-              width={500}
-              placeholder='Focus me to see some crazy stuff'
-              items={[
-                {
-                  selected: true,
-                  label: 'Hello',
-                  value: 'hello',
-                  icon: 'SunCloudyLine',
-                },
-                {
-                  label: 'How are ya',
-                  value: 'asg',
-                  icon: 'BatteryChargeFill',
-                },
-                {
-                  disabled: true,
-                  label: 'i aM diSAblEd',
-                  value: 'hhhhh',
-                  icon: 'StopCircleLine',
-                },
-              ]}
-            />
-          </ReqoreContent>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    );
-  });
-
-  const component = document.querySelector('.reqore-input');
-
-  if (component) {
-    fireEvent.focus(component);
-    jest.advanceTimersByTime(1);
-  }
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-menu-item').length).toBe(3);
-});
-
-test('Renders <Dropdown /> is opened by default', () => {
-  jest.useFakeTimers();
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreContent>
-            <ReqoreDropdown<IReqoreInputProps>
-              component={ReqoreInput}
-              handler='focus'
-              isDefaultOpen
-              useTargetWidth
-              width={500}
-              placeholder='Focus me to see some crazy stuff'
-              items={[
-                {
-                  selected: true,
-                  label: 'Hello',
-                  value: 'hello',
-                  icon: 'SunCloudyLine',
-                },
-                {
-                  label: 'How are ya',
-                  value: 'asg',
-                  icon: 'BatteryChargeFill',
-                },
-                {
-                  disabled: true,
-                  label: 'i aM diSAblEd',
-                  value: 'hhhhh',
-                  icon: 'StopCircleLine',
-                },
-              ]}
-            />
-          </ReqoreContent>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    );
-    jest.advanceTimersByTime(1);
-  });
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-menu-item').length).toBe(3);
-});
-
-test('Renders <Dropdown /> and calls a function on item click, closes the dropdown', () => {
-  jest.useFakeTimers();
-  const onClick = jest.fn();
-
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreContent>
-            <ReqoreDropdown
-              items={[
-                {
-                  selected: true,
-                  label: 'Hello',
-                  value: 'hello',
-                  icon: 'SunCloudyLine',
-                  onClick,
-                },
-              ]}
-            />
-          </ReqoreContent>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    );
-    jest.advanceTimersByTime(1);
-  });
-
-  fireEvent.click(document.querySelector('.reqore-button')!);
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-menu-item').length).toBe(1);
-
-  fireEvent.click(document.querySelector('.reqore-menu-item')!);
-  expect(onClick).toHaveBeenCalledWith(
-    expect.objectContaining({
-      selected: true,
-      label: 'Hello',
-      value: 'hello',
-      icon: 'SunCloudyLine',
-      onClick,
-    })
-  );
-});
-expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
-
-test('Renders filterable <Dropdown /> and filters items correctly', () => {
-  jest.useFakeTimers();
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreContent>
-            <ReqoreDropdown
-              filterable
-              items={[
-                {
-                  selected: true,
-                  label: 'Hello',
-                  value: 'hello',
-                  icon: 'SunCloudyLine',
-                },
-                {
-                  label: 'How are ya',
-                  value: 'howareya',
-                  icon: 'BatteryChargeFill',
-                },
-                {
-                  disabled: true,
-                  label: 'i aM diSAblEd',
-                  value: 'disabled',
-                  icon: 'StopCircleLine',
-                },
-                {
-                  value: 'onlyvalue',
-                  icon: 'StopCircleLine',
-                },
-              ]}
-            />
-          </ReqoreContent>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    );
-  });
-
-  fireEvent.click(document.querySelector('.reqore-button')!);
-  jest.advanceTimersByTime(1);
-  fireEvent.change(document.querySelector('.reqore-input')!, {
-    target: { value: 'how' },
-  });
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-menu-item').length).toBe(1);
-
-  fireEvent.change(document.querySelector('.reqore-input')!, {
-    target: { value: '' },
-  });
-
-  expect(document.querySelectorAll('.reqore-menu-item').length).toBe(4);
-
-  // Search in value only
-  fireEvent.change(document.querySelector('.reqore-input')!, {
-    target: { value: 'onlyvalue' },
-  });
-
-  expect(document.querySelectorAll('.reqore-menu-item').length).toBe(1);
-
-  fireEvent.change(document.querySelector('.reqore-input')!, {
-    target: { value: 'asfd' },
-  });
-
-  expect(document.querySelectorAll('.reqore-menu-item').length).toBe(0);
-});
-
-const MultiSelectDropdown = ({ onChange }) => {
-  const [selected, setSelected] = useState<string[]>([]);
-
-  useEffect(() => {
-    onChange(selected);
-  }, [selected]);
-
-  return (
-    <ReqoreDropdown
-      multiSelect
-      onItemSelect={({ value }) => setSelected([...selected, value])}
-      items={[
-        {
-          label: 'Item 1',
-          value: 'item-1',
-          selected: selected.includes('item-1'),
-        },
-        {
-          label: 'Item 2',
-          value: 'item-2',
-          selected: selected.includes('item-2'),
-        },
-      ]}
-    />
-  );
-};
-
-test('Renders <Dropdown /> and updates its items when state changes, does not close dropdown', () => {
-  const fn = jest.fn();
-
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreContent>
-            <MultiSelectDropdown onChange={fn} />
-          </ReqoreContent>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    );
-  });
-
-  fireEvent.click(document.querySelector('.reqore-button')!);
-
-  expect(document.querySelectorAll('.reqore-button').length).toBe(3);
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-menu-item').length).toBe(2);
-
-  fireEvent.click(document.querySelectorAll('.reqore-menu-item')[0]);
-  expect(fn).toHaveBeenNthCalledWith(2, ['item-1']);
-
-  fireEvent.click(document.querySelectorAll('.reqore-menu-item')[1]);
-  expect(fn).toHaveBeenNthCalledWith(3, ['item-1', 'item-2']);
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-});

package/__tests__/effect.test.tsx

@@ -1,70 +0,0 @@
-import { render } from '@testing-library/react';
-import React from 'react';
-import {
-  ReqoreContent,
-  ReqoreEffect,
-  ReqoreLayoutContent,
-  ReqoreTextEffect,
-  ReqoreUIProvider,
-} from '../src';
-
-test('Renders <ReqoreEffect /> properly', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreEffect
-            as='div'
-            effect={{
-              gradient: {
-                type: 'radial',
-                shape: 'circle',
-                colors: {
-                  0: 'danger:lighten:2',
-                  100: 'info:darken:1',
-                },
-              },
-              spaced: 10,
-              uppercase: true,
-              weight: 'bold',
-              color: 'main',
-            }}
-          >
-            This is a test
-          </ReqoreEffect>
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-effect').length).toBe(1);
-});
-
-test('Renders <ReqoreTextEffect /> properly', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreTextEffect
-            as='p'
-            effect={{
-              gradient: {
-                colors: {
-                  0: '#ff0000',
-                  100: '#00ff00',
-                },
-              },
-              spaced: 10,
-              uppercase: true,
-              weight: 'thin',
-            }}
-          >
-            This is a test
-          </ReqoreTextEffect>
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-text-effect').length).toBe(1);
-});

package/__tests__/heading.test.tsx

@@ -1,58 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
-import {
-  ReqoreH1,
-  ReqoreH2,
-  ReqoreH3,
-  ReqoreH4,
-  ReqoreH5,
-  ReqoreH6,
-  ReqoreUIProvider,
-} from '../src';
-
-test('<Heading /> renders properly', () => {
-  jest.useFakeTimers();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqoreH1>H1</ReqoreH1>
-      <ReqoreH2>H2</ReqoreH2>
-      <ReqoreH3>H3</ReqoreH3>
-      <ReqoreH4>H4</ReqoreH4>
-      <ReqoreH5>H5</ReqoreH5>
-      <ReqoreH6>H6</ReqoreH6>
-    </ReqoreUIProvider>
-  );
-
-  expect(screen.getAllByText('H1')).toBeTruthy();
-  expect(screen.getAllByText('H2')).toBeTruthy();
-  expect(screen.getAllByText('H3')).toBeTruthy();
-  expect(screen.getAllByText('H4')).toBeTruthy();
-  expect(screen.getAllByText('H5')).toBeTruthy();
-  expect(screen.getAllByText('H6')).toBeTruthy();
-
-  expect(document.querySelectorAll('h1').length).toBe(1);
-  expect(document.querySelectorAll('h2').length).toBe(1);
-  expect(document.querySelectorAll('h3').length).toBe(1);
-  expect(document.querySelectorAll('h4').length).toBe(1);
-  expect(document.querySelectorAll('h5').length).toBe(1);
-  expect(document.querySelectorAll('h6').length).toBe(1);
-});
-
-test('Tooltip on <Heading /> works', () => {
-  jest.useFakeTimers();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqoreH3 tooltip='test'>Test</ReqoreH3>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
-
-  fireEvent.mouseEnter(document.querySelectorAll('h3')[0]);
-
-  jest.advanceTimersByTime(1);
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-});

package/__tests__/helpers/colors.test.tsx

@@ -1,18 +0,0 @@
-import { hexAToRGBA, shouldDarken } from '../../src/helpers/colors';
-
-test('Tests whether a color should be darkened', () => {
-  expect(shouldDarken('#000000')).toBe(false);
-  expect(shouldDarken('#ffffff')).toBe(true);
-  expect(shouldDarken('#00000020')).toBe(false);
-  expect(shouldDarken('rgba(255, 255, 255, 0.1)')).toBe(true);
-});
-
-test('Transforms hex color with alpha to rgba', () => {
-  expect(hexAToRGBA('#000000')).toEqual('rgba(0, 0, 0, 1.00)');
-  expect(hexAToRGBA('#000')).toEqual('rgba(0, 0, 0, 1.00)');
-  expect(hexAToRGBA('#333')).toEqual('rgba(51, 51, 51, 1.00)');
-  expect(hexAToRGBA('#00000050')).toEqual('rgba(0, 0, 0, 0.31)');
-  expect(hexAToRGBA('#00000000')).toEqual('rgba(0, 0, 0, 0.00)');
-  expect(hexAToRGBA('rgb(0, 0, 0)')).toEqual('rgb(0, 0, 0)');
-  expect(hexAToRGBA('rgba(0, 0, 0, 1)')).toEqual('rgba(0, 0, 0, 1)');
-});