@ssa-ui-kit/widgets 0.0.30-alpha → 0.0.31-alpha

package/src/components/SearchBox/SearchBox.e2e.ts

@@ -1,37 +0,0 @@
-import { test, expect, Page } from '@playwright/test';
-import { SCREEN_SIZES } from '../../consts';
-
-const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
-
-const gotoPage = (page: Page) => {
-  return page.goto(
-    'http://localhost:6007/iframe.html?args=&id=widgets-searchbox--default&viewMode=story',
-  );
-};
-
-test('Widgets: SearchBox should be opened correctly', async ({ page }) => {
-  await page.setViewportSize(SCREEN_SIZES[900]);
-  await gotoPage(page);
-  await page.waitForSelector('#formElement-search');
-
-  const inputElement = await page.getByPlaceholder('Search by name');
-  expect(inputElement).toBeVisible();
-
-  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-searchbox--search-icon__`;
-  await page.screenshot({
-    path: `${SCREENSHOT_PREFIX}[w900px].png`,
-  });
-});
-
-test('Widgets: SearchBox - cross icon should be shown', async ({ page }) => {
-  await gotoPage(page);
-  await page.setViewportSize(SCREEN_SIZES[900]);
-
-  const inputElement = await page.getByPlaceholder('Search by name');
-  await inputElement.type('test');
-
-  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-searchbox--cross-icon__`;
-  await page.screenshot({
-    path: `${SCREENSHOT_PREFIX}[w900px].png`,
-  });
-});

package/src/components/SearchBox/SearchBox.spec.tsx

@@ -1,77 +0,0 @@
-import { fireEvent } from '@testing-library/dom';
-import { StoryComponent } from './stories/StoryComponent';
-
-describe('SearchBox', () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
-    jest.spyOn(global, 'setTimeout');
-    jest.spyOn(global, 'clearTimeout');
-  });
-
-  afterAll(() => {
-    jest.useRealTimers();
-    jest.restoreAllMocks();
-  });
-
-  it('should be correctly rendered', () => {
-    const { getByPlaceholderText, getByTestId, queryByTestId } = render(
-      <StoryComponent />,
-    );
-    getByTestId('search-icon');
-    getByPlaceholderText('Search by name');
-    expect(queryByTestId('cross-icon')).not.toBeInTheDocument();
-  });
-
-  it('should change value and icon', () => {
-    const { getByPlaceholderText, getByTestId } = render(<StoryComponent />);
-
-    const inputElement = getByPlaceholderText('Search by name');
-    fireEvent.change(inputElement, { target: { value: 'test' } });
-
-    const crossIcon = getByTestId('cross-icon');
-    fireEvent.click(crossIcon);
-
-    expect((inputElement as HTMLInputElement).value).toBe('');
-  });
-
-  it('should be cleared by pressing the cross icon', () => {
-    const { getByPlaceholderText, getByTestId, queryByTestId } = render(
-      <StoryComponent />,
-    );
-
-    const inputElement = getByPlaceholderText('Search by name');
-    fireEvent.change(inputElement, { target: { value: 'test' } });
-
-    getByTestId('cross-icon');
-    expect((inputElement as HTMLInputElement).value).toBe('test');
-    expect(queryByTestId('search-icon')).not.toBeInTheDocument();
-  });
-
-  it('should call the callback', () => {
-    const { getByPlaceholderText } = render(<StoryComponent />);
-
-    const consoleLogMock = jest.spyOn(console, 'log').mockImplementation();
-
-    const inputElement = getByPlaceholderText('Search by name');
-    fireEvent.change(inputElement, { target: { value: 'test' } });
-    jest.runAllTimers();
-    expect(consoleLogMock.mock.calls).toEqual([
-      ['Searching for the term...', 'test'],
-    ]);
-    consoleLogMock.mockRestore();
-  });
-
-  it('should call the callback by pressing the Enter key', () => {
-    const handleCallback = jest.fn();
-    const { getByPlaceholderText } = render(
-      <StoryComponent handleCallback={handleCallback} />,
-    );
-
-    const inputElement = getByPlaceholderText('Search by name');
-    fireEvent.change(inputElement, { target: { value: 'test' } });
-    fireEvent.keyUp(inputElement, {
-      key: 'Enter',
-    });
-    expect(handleCallback.mock.calls).toEqual([['test']]);
-  });
-});

package/src/components/SearchBox/SearchBox.tsx

@@ -1,70 +0,0 @@
-import { KeyboardEvent, useEffect, useRef } from 'react';
-import { useWatch } from 'react-hook-form';
-import { Icon } from '@ssa-ui-kit/core';
-import { debounce } from '@ssa-ui-kit/utils';
-import { SearchBoxWrapper } from './SearchBoxWrapper';
-import { SearchBoxInput } from './SearchBoxInput';
-import { SearchBoxCrossIcon } from '.';
-import { SearchBoxProps } from './types';
-
-export const SearchBox = ({
-  name,
-  placeholder = 'Search by name',
-  control,
-  callbackDelay = 500,
-  autoSearchTrigger = true,
-  register,
-  resetField,
-  callback,
-  ...rest
-}: SearchBoxProps) => {
-  const watchResult = useWatch({ control });
-  const inputRef = useRef<HTMLInputElement>(null);
-  const debounceThrottled = useRef(debounce(callback, callbackDelay));
-  const [debouncedFn, cancel] = debounceThrottled.current;
-
-  useEffect(() => {
-    const searchTerm = watchResult[name];
-    if (autoSearchTrigger && searchTerm !== undefined) {
-      debouncedFn(searchTerm);
-    }
-  }, [watchResult]);
-
-  const crossIconHandler = () => {
-    resetField(name, {
-      defaultValue: '',
-    });
-    inputRef.current?.focus();
-  };
-
-  const EndElement = !watchResult[name] ? (
-    <div data-testid="search-icon">
-      <Icon name="search" size={15} color="#55575A" />
-    </div>
-  ) : (
-    <SearchBoxCrossIcon onClick={crossIconHandler} />
-  );
-
-  const onKeyUp = (event: KeyboardEvent) => {
-    if (event.key === 'Enter') {
-      cancel();
-      callback(watchResult[name]);
-    }
-  };
-
-  return (
-    <SearchBoxWrapper>
-      <SearchBoxInput
-        name={name}
-        endElement={EndElement}
-        register={register}
-        control={control}
-        placeholder={placeholder}
-        status="custom"
-        onKeyUp={onKeyUp}
-        {...rest}
-        ref={inputRef}
-      />
-    </SearchBoxWrapper>
-  );
-};

package/src/components/SearchBox/SearchBoxCrossIcon.tsx

@@ -1,26 +0,0 @@
-import { useTheme } from '@emotion/react';
-import { Button, Icon } from '@ssa-ui-kit/core';
-
-export const SearchBoxCrossIcon = ({
-  onClick,
-}: {
-  onClick: React.MouseEventHandler<HTMLButtonElement>;
-}) => {
-  const theme = useTheme();
-  return (
-    <Button
-      onClick={onClick}
-      variant="custom"
-      data-testid="cross-icon"
-      css={{
-        padding: 0,
-        background: 'none',
-        '& svg path': {
-          strokeWidth: 1,
-          stroke: theme.colors.greyFilterIcon,
-        },
-      }}>
-      <Icon name="cross" size={15} color="#55575A" />
-    </Button>
-  );
-};

package/src/components/SearchBox/SearchBoxInput.tsx

@@ -1,42 +0,0 @@
-import styled from '@emotion/styled';
-import { Input } from '@ssa-ui-kit/core';
-
-export const SearchBoxInput = styled(Input)`
-  height: 30px;
-  font-size: 12px;
-  border-radius: 5px;
-  background-color: ${({ theme }) => theme.colors.greyLighter};
-  border: 1px solid #dee0e8;
-  color: ${({ theme }) => theme.colors.greyDarker};
-  padding-right: 20px;
-  &::placeholder {
-    color: #55575a;
-    font-weight: 500;
-  }
-  &:hover {
-    border: ${({ theme }) => `1px solid ${theme.colors.greyDropdownFocused}`};
-  }
-  & + div {
-    right: 11px;
-    & svg {
-      width: 12px;
-      height: 12px;
-    }
-  }
-  ${({ theme }) => theme.mediaQueries.md} {
-    height: 36px;
-    font-size: 14px;
-    padding-right: 40px;
-    & + div {
-      right: 23px;
-      & svg {
-        width: 15px;
-        height: 15px;
-      }
-    }
-  }
-
-  ${({ theme }) => theme.mediaQueries.lg} {
-    height: 40px;
-  }
-`;

package/src/components/SearchBox/SearchBoxWrapper.tsx

@@ -1,9 +0,0 @@
-import styled from '@emotion/styled';
-
-export const SearchBoxWrapper = styled.div`
-  width: 139px;
-
-  ${({ theme }) => theme.mediaQueries.md} {
-    width: 180px;
-  }
-`;

package/src/components/SearchBox/index.ts

@@ -1,4 +0,0 @@
-export { SearchBox } from './SearchBox';
-export { SearchBoxCrossIcon } from './SearchBoxCrossIcon';
-export { SearchBoxInput } from './SearchBoxInput';
-export { SearchBoxWrapper } from './SearchBoxWrapper';

package/src/components/SearchBox/stories/SearchBox.stories.tsx

@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { SearchBox } from '..';
-import { StoryComponent } from './StoryComponent';
-
-type SearchBoxType = typeof SearchBox;
-
-export default {
-  title: 'Widgets/SearchBox',
-  component: SearchBox,
-  argTypes: {},
-} as Meta<SearchBoxType>;
-
-export const Default: StoryObj<SearchBoxType> = () => <StoryComponent />;
-
-Default.args = {};

package/src/components/SearchBox/stories/StoryComponent.tsx

@@ -1,25 +0,0 @@
-import { FieldValues, useForm } from 'react-hook-form';
-
-import { SearchBox } from '..';
-
-export const StoryComponent = ({
-  handleCallback,
-}: {
-  handleCallback?: (searchTerm: string) => void;
-}) => {
-  const { register, control, resetField } = useForm<FieldValues>();
-
-  const onCallback = (searchTerm: string) => {
-    console.log('Searching for the term...', searchTerm);
-  };
-
-  return (
-    <SearchBox
-      register={register}
-      control={control}
-      resetField={resetField}
-      callback={handleCallback || onCallback}
-      name={'search'}
-    />
-  );
-};

package/src/components/SearchBox/types.ts

@@ -1,9 +0,0 @@
-import { InputProps } from '@ssa-ui-kit/core/dist/components/Input/types';
-import { UseFormReturn } from 'react-hook-form';
-
-export type SearchBoxProps = InputProps &
-  Pick<UseFormReturn, 'control' | 'resetField'> & {
-    callback: (searchTerm: string) => void;
-    callbackDelay?: number;
-    autoSearchTrigger?: boolean;
-  };

package/src/components/TableFilters/TableFilterCancelButton.tsx

@@ -1,39 +0,0 @@
-import { PopoverClose } from '@ssa-ui-kit/core';
-import { Theme, css, useTheme } from '@emotion/react';
-import { baseButtonStyle } from './styles';
-
-export const cancelButtonStyles = (theme: Theme) => css`
-  ${baseButtonStyle}
-  color: ${theme.colors.greyCancelClearButton};
-  background: ${theme.colors.white};
-  border: 1px solid ${theme.colors.greyDropdownMain};
-  justify-content: center;
-
-  &:hover {
-    border-color: ${theme.colors.greyDropdownFocused};
-  }
-
-  &:active {
-    border-color: ${theme.colors.blueNotification};
-  }
-
-  &:disabled {
-    background: ${theme.colors.grey};
-    color: ${theme.colors.greyFilterIcon};
-  }
-`;
-
-export const TableFiltersCancelButton = ({
-  children,
-  onClick,
-}: {
-  children: React.ReactNode;
-  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
-}) => {
-  const theme = useTheme();
-  return (
-    <PopoverClose css={cancelButtonStyles(theme)} onClick={onClick}>
-      {children}
-    </PopoverClose>
-  );
-};

package/src/components/TableFilters/TableFilterCheckbox.tsx

@@ -1,24 +0,0 @@
-import { CheckboxProps, Checkbox, checkboxStyles } from '@ssa-ui-kit/core';
-import { Theme, css, useTheme } from '@emotion/react';
-
-const getStyles = (theme: Theme) => css`
-  margin: 0 0 14px;
-  & span {
-    margin-left: 16px;
-    color: ${theme.colors.greyDisabled};
-    user-select: none;
-  }
-  & input + div {
-    border-radius: 2px;
-    &::before {
-      border-radius: 2px;
-    }
-  }
-  ${checkboxStyles.blueInput(theme)}
-`;
-
-export const TableFilterCheckbox = (props: CheckboxProps) => {
-  const theme = useTheme();
-  const styles = getStyles(theme);
-  return <Checkbox {...props} css={styles} />;
-};

package/src/components/TableFilters/TableFilterClearButton.tsx

@@ -1,47 +0,0 @@
-import { Button } from '@ssa-ui-kit/core';
-import { Theme, css, useTheme } from '@emotion/react';
-import { baseButtonStyle } from './styles';
-
-export const clearButtonStyles = (theme: Theme) => css`
-  ${baseButtonStyle}
-  color: ${theme.colors.greyCancelClearButton};
-  background: ${theme.colors.greyLighter};
-  border: 1px solid ${theme.colors.greyDropdownMain};
-  justify-content: center;
-
-  &:hover {
-    border-color: ${theme.colors.greyDropdownFocused};
-    background: ${theme.colors.greyLighter};
-  }
-
-  &:active {
-    border-color: ${theme.colors.greyDropdownFocused};
-    background: ${theme.colors.greyLighter};
-  }
-
-  &:disabled {
-    background: ${theme.colors.grey};
-    color: ${theme.colors.greyFilterIcon};
-  }
-`;
-
-export const TableFiltersClearButton = ({
-  children,
-  onClick,
-}: {
-  children: React.ReactNode;
-  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
-}) => {
-  const theme = useTheme();
-  return (
-    <Button
-      css={{
-        ...baseButtonStyle,
-        ...clearButtonStyles(theme),
-      }}
-      variant="secondary"
-      onClick={onClick}>
-      {children}
-    </Button>
-  );
-};

package/src/components/TableFilters/TableFilterTrigger.tsx

@@ -1,66 +0,0 @@
-import { css, useTheme } from '@emotion/react';
-import { PopoverTrigger, Icon } from '@ssa-ui-kit/core';
-import { Theme } from '@emotion/react';
-
-export const filterButtonStyles = (count?: number) => (theme: Theme) =>
-  css`
-    height: 40px;
-    color: ${theme.colors.greyDisabled};
-    background: ${theme.colors.white};
-    border: 1px solid ${theme.colors.greyDropdownMain};
-    border-radius: 6.5px;
-    padding: 0 11px 0 13px;
-    font-size: 14px;
-    letter-spacing: normal;
-    gap: 5px;
-    user-select: none;
-
-    &::before {
-      display: block;
-      content: '"Filter"';
-      content: ${count ? '"More"' : '"Filter"'};
-    }
-
-    @media screen and (min-width: 900px) {
-      &::before {
-        content: 'More';
-      }
-    }
-
-    &:hover {
-      border-color: ${theme.colors.greyDropdownFocused};
-    }
-
-    &:active {
-      border-color: ${theme.colors.blueNotification};
-    }
-
-    &:disabled {
-      background: ${theme.colors.grey};
-    }
-  `;
-
-export const TableFilterTrigger = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  children,
-  count,
-  ...rest
-}: {
-  children?: React.ReactNode;
-  count?: number;
-  as?: string;
-  className?: string;
-}) => {
-  const theme = useTheme();
-  return (
-    <PopoverTrigger
-      variant="custom"
-      css={filterButtonStyles(count)}
-      endIcon={
-        <Icon name="filter" color={theme.colors.greyFilterIcon} size={20} />
-      }
-      {...rest}>
-      {children}
-    </PopoverTrigger>
-  );
-};

package/src/components/TableFilters/TableFilterTriggerWithNotification.tsx

@@ -1,44 +0,0 @@
-import { Interpolation, Theme, useTheme } from '@emotion/react';
-import { MultipleDropdownNotification } from '@ssa-ui-kit/core';
-import { TableFilterTrigger } from './TableFilterTrigger';
-
-export const TableFilterTriggerWithNotification = ({
-  children,
-  count,
-  visible = true,
-}: {
-  children?: React.ReactNode;
-  count?: number;
-  visible?: boolean;
-}) => {
-  const theme = useTheme();
-  const css: Interpolation<Theme> = {
-    display: visible ? 'flex' : 'none',
-  };
-  if (count) {
-    css.background = theme.colors.blueDropdownWithSelectedItems;
-    css.borderColor = theme.colors.blueDropdownWithSelectedItemsBorder;
-  }
-  return (
-    <TableFilterTrigger css={css} count={count}>
-      {children}
-      {count ? (
-        <MultipleDropdownNotification
-          as={'div'}
-          css={{
-            width: 16,
-            height: 16,
-            minWidth: 16,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-          data-testid={'trigger-notification'}>
-          {count}
-        </MultipleDropdownNotification>
-      ) : (
-        ''
-      )}
-    </TableFilterTrigger>
-  );
-};

package/src/components/TableFilters/TableFilters.e2e.ts

@@ -1,32 +0,0 @@
-import { test, expect, Page } from '@playwright/test';
-import { SCREEN_SIZES } from '../../consts';
-
-const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
-const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-table-filters--opened__`;
-
-const gotoPage = (page: Page) => {
-  return page.goto(
-    'http://localhost:6007/iframe.html?args=&id=widgets-tablefilters--default&viewMode=story',
-  );
-};
-
-test.describe('Widgets: TableFilters', () => {
-  test('Renders correctly', async ({ page }) => {
-    await gotoPage(page);
-    const triggerButton = page.getByTestId('trigger-button');
-    const beforeContent = await triggerButton.evaluate((el) => {
-      return window.getComputedStyle(el, ':before').content;
-    });
-    expect(beforeContent).toEqual('"More"');
-  });
-
-  test('Opens popover', async ({ page }) => {
-    await page.setViewportSize(SCREEN_SIZES[1920]);
-    await gotoPage(page);
-    await page.getByTestId('trigger-button').click();
-
-    await page.screenshot({
-      path: `${SCREENSHOT_PREFIX}[w1920px].png`,
-    });
-  });
-});