@ssa-ui-kit/widgets 0.0.18-alpha → 0.0.20-alpha

package/src/components/ExchangeAccountKeys/styles.ts

@@ -1,87 +1,87 @@
-import { Theme, css } from '@emotion/react';
-
-export const Card = (theme: Theme) => css`
-  box-shadow: 0 10px 40px 0 ${theme.colors.greyShadow};
-  padding: 0;
-  border-radius: 20px;
-
-  &.disabled {
-    pointer-events: none;
-  }
-`;
-
-export const CardHeader = (theme: Theme) => css`
-  align-items: center;
-  background: ${theme.colors.greyLighter};
-  padding: 10px;
-  border-radius: 20px 20px 0 0;
-  margin-bottom: 0;
-
-  ${theme.mediaQueries.md} {
-    padding: 15px 10px 15px 30px;
-  }
-`;
-
-export const DeleteButton = (theme: Theme) => css`
-  height: auto;
-  background: none;
-  box-shadow: none;
-
-  &:hover,
-  &:focus {
-    background: none;
-    box-shadow: none;
-  }
-
-  &:hover {
-    svg path {
-      fill: ${theme.colors.greyDarker};
-    }
-  }
-
-  ${theme.mediaQueries.md} {
-    padding: 12px;
-  }
-`;
-
-export const CardContent = (theme: Theme) => css`
-  width: 100%;
-  padding: 10px;
-
-  ${theme.mediaQueries.md} {
-    padding: 13px 30px 20px;
-  }
-`;
-
-export const KeyItem = css`
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-
-  &:not(:last-child) {
-    margin-bottom: 20px;
-  }
-`;
-
-export const VisibleButton = css`
-  height: auto;
-  padding: 0;
-  background: none;
-  box-shadow: none;
-
-  &:hover,
-  &:focus {
-    background: none;
-    box-shadow: none;
-  }
-`;
-
-export const SecretKey = css`
-  display: flex;
-  align-items: center;
-  gap: 7px;
-`;
-
-export const LetterWrap = css`
-  overflow-wrap: anywhere;
-`;
+import { Theme, css } from '@emotion/react';
+
+export const Card = (theme: Theme) => css`
+  box-shadow: 0 10px 40px 0 ${theme.colors.greyShadow};
+  padding: 0;
+  border-radius: 20px;
+
+  &.disabled {
+    pointer-events: none;
+  }
+`;
+
+export const CardHeader = (theme: Theme) => css`
+  align-items: center;
+  background: ${theme.colors.greyLighter};
+  padding: 10px;
+  border-radius: 20px 20px 0 0;
+  margin-bottom: 0;
+
+  ${theme.mediaQueries.md} {
+    padding: 15px 10px 15px 30px;
+  }
+`;
+
+export const DeleteButton = (theme: Theme) => css`
+  height: auto;
+  background: none;
+  box-shadow: none;
+
+  &:hover,
+  &:focus {
+    background: none;
+    box-shadow: none;
+  }
+
+  &:hover {
+    svg path {
+      fill: ${theme.colors.greyDarker};
+    }
+  }
+
+  ${theme.mediaQueries.md} {
+    padding: 12px;
+  }
+`;
+
+export const CardContent = (theme: Theme) => css`
+  width: 100%;
+  padding: 10px;
+
+  ${theme.mediaQueries.md} {
+    padding: 13px 30px 20px;
+  }
+`;
+
+export const KeyItem = css`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+
+  &:not(:last-child) {
+    margin-bottom: 20px;
+  }
+`;
+
+export const VisibleButton = css`
+  height: auto;
+  padding: 0;
+  background: none;
+  box-shadow: none;
+
+  &:hover,
+  &:focus {
+    background: none;
+    box-shadow: none;
+  }
+`;
+
+export const SecretKey = css`
+  display: flex;
+  align-items: center;
+  gap: 7px;
+`;
+
+export const LetterWrap = css`
+  overflow-wrap: anywhere;
+`;

package/src/components/ExchangeAccountKeys/types.ts

@@ -1,8 +1,8 @@
-export interface ExchangeAccountKeysProps {
-  title: string | JSX.Element;
-  apiKey: string;
-  secretKey: string;
-  onDelete: () => void;
-  onVisibilityChange: (e: boolean) => void;
-  isDisabled?: boolean;
-}
+export interface ExchangeAccountKeysProps {
+  title: string | JSX.Element;
+  apiKey: string;
+  secretKey: string;
+  onDelete: () => void;
+  onVisibilityChange: (e: boolean) => void;
+  isDisabled?: boolean;
+}

package/src/components/Filters/FilterBlockWrapper.tsx

@@ -1,11 +1,11 @@
-import styled from '@emotion/styled';
-import { Wrapper } from '@ssa-ui-kit/core';
-
-export const FilterBlockWrapper = styled(Wrapper)`
-  justify-content: end;
-  width: 100%;
-  & > div {
-    min-width: auto;
-    margin-right: 10px;
-  }
-`;
+import styled from '@emotion/styled';
+import { Wrapper } from '@ssa-ui-kit/core';
+
+export const FilterBlockWrapper = styled(Wrapper)`
+  justify-content: end;
+  width: 100%;
+  & > div {
+    min-width: auto;
+    margin-right: 10px;
+  }
+`;

package/src/components/Filters/Filters.e2e.ts

@@ -1,115 +1,115 @@
-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-filters--default&viewMode=story',
-  );
-};
-
-test('Widgets: Filters should be opened correctly', async ({ page }) => {
-  await gotoPage(page);
-  await page.setViewportSize(SCREEN_SIZES[1920]);
-  await expect(page.getByText('strategy #3Carrot down')).toBeVisible();
-  await expect(page.getByText('More')).not.toBeVisible();
-  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-filters--default__`;
-  await page.screenshot({
-    path: `${SCREENSHOT_PREFIX}[w1920px].png`,
-  });
-});
-
-test('Widgets: Filters - More button should be shown', async ({ page }) => {
-  await gotoPage(page);
-  await page.setViewportSize(SCREEN_SIZES[900]);
-  const triggerButton = page.getByTestId('trigger-button');
-  const beforeContent = await triggerButton.evaluate((el) => {
-    return window.getComputedStyle(el, ':before').content;
-  });
-  await expect(beforeContent).toEqual('"More"');
-  const buttonText = await triggerButton.innerText();
-  await expect(buttonText).toEqual('2');
-  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-filters--more-button__`;
-  await page.screenshot({
-    path: `${SCREENSHOT_PREFIX}[w900px].png`,
-  });
-});
-
-test('Widgets: Filters - More button should be shown when items selected', async ({
-  page,
-}) => {
-  await gotoPage(page);
-  await page.setViewportSize(SCREEN_SIZES[390]);
-  const triggerButton = page.getByTestId('trigger-button');
-  const beforeContent = await triggerButton.evaluate((el) => {
-    return window.getComputedStyle(el, ':before').content;
-  });
-  expect(beforeContent).toEqual('"More"');
-  const buttonText = await triggerButton.innerText();
-  expect(buttonText).toEqual('4');
-  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-filters--more-button-items-selected__`;
-  await page.screenshot({
-    path: `${SCREENSHOT_PREFIX}[w390px].png`,
-  });
-});
-
-test('Widgets: Filters - More button count notification should be changed', async ({
-  page,
-}) => {
-  await gotoPage(page);
-  await page.setViewportSize(SCREEN_SIZES[900]);
-  let triggerButton = await page.getByTestId('trigger-button');
-  let beforeContent = await triggerButton.evaluate((el) => {
-    return window.getComputedStyle(el, ':before').content;
-  });
-  expect(beforeContent).toEqual('"More"');
-  let buttonText = await triggerButton.innerText();
-  expect(buttonText).toEqual('2');
-
-  await page.getByText('Status: Running').click();
-  await page.getByRole('button', { name: 'Stopped' }).click();
-  await expect(page.getByText('Status: Running+1')).toBeVisible();
-
-  await page.getByText('strategy #3Carrot down').click();
-  await page.getByRole('button', { name: 'strategy #3 checkbox1' }).click();
-
-  triggerButton = page.getByTestId('trigger-button');
-  beforeContent = await triggerButton.evaluate((el) => {
-    return window.getComputedStyle(el, ':before').content;
-  });
-  expect(beforeContent).toEqual('"More"');
-  buttonText = await triggerButton.innerText();
-  expect(buttonText).toEqual('3');
-});
-
-test('Widgets: Filters - Filter button should be shown when items not selected', async ({
-  page,
-}) => {
-  await page.goto(
-    'http://localhost:6007/iframe.html?args=&id=widgets-filters--all-items-enabled&viewMode=story',
-  );
-  await page.setViewportSize(SCREEN_SIZES[390]);
-  const triggerButton = page.getByTestId('trigger-button');
-  let beforeContent = await triggerButton.evaluate((el) => {
-    return window.getComputedStyle(el, ':before').content;
-  });
-  expect(beforeContent).toEqual('"More"');
-  const buttonText = await triggerButton.innerText();
-  expect(buttonText).toEqual('1');
-
-  await page.getByTestId('trigger-button').click();
-  /* cSpell:disable */
-  await page.locator('label').filter({ hasText: 'Checkcheckbox1' }).click();
-  await page.locator('label').filter({ hasText: 'Checkcheckbox4' }).click();
-
-  beforeContent = await triggerButton.evaluate((el) => {
-    return window.getComputedStyle(el, ':before').content;
-  });
-  expect(beforeContent).toEqual('"Filter"');
-
-  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-filters--filter-button-items-not-selected__`;
-  await page.screenshot({
-    path: `${SCREENSHOT_PREFIX}[w390px].png`,
-  });
-});
+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-filters--default&viewMode=story',
+  );
+};
+
+test('Widgets: Filters should be opened correctly', async ({ page }) => {
+  await gotoPage(page);
+  await page.setViewportSize(SCREEN_SIZES[1920]);
+  await expect(page.getByText('strategy #3Carrot down')).toBeVisible();
+  await expect(page.getByText('More')).not.toBeVisible();
+  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-filters--default__`;
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w1920px].png`,
+  });
+});
+
+test('Widgets: Filters - More button should be shown', async ({ page }) => {
+  await gotoPage(page);
+  await page.setViewportSize(SCREEN_SIZES[900]);
+  const triggerButton = page.getByTestId('trigger-button');
+  const beforeContent = await triggerButton.evaluate((el) => {
+    return window.getComputedStyle(el, ':before').content;
+  });
+  await expect(beforeContent).toEqual('"More"');
+  const buttonText = await triggerButton.innerText();
+  await expect(buttonText).toEqual('2');
+  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-filters--more-button__`;
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w900px].png`,
+  });
+});
+
+test('Widgets: Filters - More button should be shown when items selected', async ({
+  page,
+}) => {
+  await gotoPage(page);
+  await page.setViewportSize(SCREEN_SIZES[390]);
+  const triggerButton = page.getByTestId('trigger-button');
+  const beforeContent = await triggerButton.evaluate((el) => {
+    return window.getComputedStyle(el, ':before').content;
+  });
+  expect(beforeContent).toEqual('"More"');
+  const buttonText = await triggerButton.innerText();
+  expect(buttonText).toEqual('4');
+  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-filters--more-button-items-selected__`;
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w390px].png`,
+  });
+});
+
+test('Widgets: Filters - More button count notification should be changed', async ({
+  page,
+}) => {
+  await gotoPage(page);
+  await page.setViewportSize(SCREEN_SIZES[900]);
+  let triggerButton = await page.getByTestId('trigger-button');
+  let beforeContent = await triggerButton.evaluate((el) => {
+    return window.getComputedStyle(el, ':before').content;
+  });
+  expect(beforeContent).toEqual('"More"');
+  let buttonText = await triggerButton.innerText();
+  expect(buttonText).toEqual('2');
+
+  await page.getByText('Status: Running').click();
+  await page.getByRole('button', { name: 'Stopped' }).click();
+  await expect(page.getByText('Status: Running+1')).toBeVisible();
+
+  await page.getByText('strategy #3Carrot down').click();
+  await page.getByRole('button', { name: 'strategy #3 checkbox1' }).click();
+
+  triggerButton = page.getByTestId('trigger-button');
+  beforeContent = await triggerButton.evaluate((el) => {
+    return window.getComputedStyle(el, ':before').content;
+  });
+  expect(beforeContent).toEqual('"More"');
+  buttonText = await triggerButton.innerText();
+  expect(buttonText).toEqual('3');
+});
+
+test('Widgets: Filters - Filter button should be shown when items not selected', async ({
+  page,
+}) => {
+  await page.goto(
+    'http://localhost:6007/iframe.html?args=&id=widgets-filters--all-items-enabled&viewMode=story',
+  );
+  await page.setViewportSize(SCREEN_SIZES[390]);
+  const triggerButton = page.getByTestId('trigger-button');
+  let beforeContent = await triggerButton.evaluate((el) => {
+    return window.getComputedStyle(el, ':before').content;
+  });
+  expect(beforeContent).toEqual('"More"');
+  const buttonText = await triggerButton.innerText();
+  expect(buttonText).toEqual('1');
+
+  await page.getByTestId('trigger-button').click();
+  /* cSpell:disable */
+  await page.locator('label').filter({ hasText: 'Checkcheckbox1' }).click();
+  await page.locator('label').filter({ hasText: 'Checkcheckbox4' }).click();
+
+  beforeContent = await triggerButton.evaluate((el) => {
+    return window.getComputedStyle(el, ':before').content;
+  });
+  expect(beforeContent).toEqual('"Filter"');
+
+  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-filters--filter-button-items-not-selected__`;
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w390px].png`,
+  });
+});

package/src/components/Filters/Filters.spec.tsx

@@ -1,47 +1,47 @@
-import { within, fireEvent } from '@testing-library/dom';
-import { mockIntersectionObserver } from 'jsdom-testing-mocks';
-import { StoryComponent } from './stories/StoryComponent';
-
-describe('Filters', () => {
-  mockIntersectionObserver();
-
-  it('Should be correctly rendered', () => {
-    const { queryByText, queryByTestId } = render(<StoryComponent />);
-
-    queryByText('strategy #3');
-    expect(queryByTestId('trigger-notification')).not.toBeInTheDocument();
-  });
-
-  it('Should be correctly changed the item', async () => {
-    const { queryByRole, getByRole, queryAllByTestId } = render(
-      <StoryComponent />,
-    );
-
-    const dropdownElements = queryAllByTestId('dropdown');
-    const dropdownElement = dropdownElements[0];
-    let dropdownToggleEl = within(dropdownElement).getByRole('combobox');
-
-    let listboxEl = queryByRole('listbox');
-    expect(listboxEl).not.toBeInTheDocument();
-
-    await fireEvent.click(dropdownToggleEl);
-
-    listboxEl = getByRole('listbox');
-    const listItemEls = within(listboxEl).getAllByRole('listitem');
-    expect(listItemEls.length).toBe(5);
-
-    const logSpy = jest.spyOn(console, 'log');
-    await fireEvent.click(listItemEls[0]);
-
-    dropdownToggleEl = within(dropdownElement).getByRole('combobox');
-    expect(dropdownToggleEl).toHaveTextContent('Strategy: checkbox4Carrot up');
-    expect(logSpy).toHaveBeenCalledWith('>>>Filters onSubmit', {
-      exchange: ['binance'],
-      pairs: ['btcfdusd'],
-      status: ['running'],
-      strategy: ['checkbox4'],
-      strategy2: ['strategy2Checkbox1'],
-      strategy3: [],
-    });
-  });
-});
+import { within, fireEvent } from '@testing-library/dom';
+import { mockIntersectionObserver } from 'jsdom-testing-mocks';
+import { StoryComponent } from './stories/StoryComponent';
+
+describe('Filters', () => {
+  mockIntersectionObserver();
+
+  it('Should be correctly rendered', () => {
+    const { queryByText, queryByTestId } = render(<StoryComponent />);
+
+    queryByText('strategy #3');
+    expect(queryByTestId('trigger-notification')).not.toBeInTheDocument();
+  });
+
+  it('Should be correctly changed the item', async () => {
+    const { queryByRole, getByRole, queryAllByTestId } = render(
+      <StoryComponent />,
+    );
+
+    const dropdownElements = queryAllByTestId('dropdown');
+    const dropdownElement = dropdownElements[0];
+    let dropdownToggleEl = within(dropdownElement).getByRole('combobox');
+
+    let listboxEl = queryByRole('listbox');
+    expect(listboxEl).not.toBeInTheDocument();
+
+    await fireEvent.click(dropdownToggleEl);
+
+    listboxEl = getByRole('listbox');
+    const listItemEls = within(listboxEl).getAllByRole('listitem');
+    expect(listItemEls.length).toBe(5);
+
+    const logSpy = jest.spyOn(console, 'log');
+    await fireEvent.click(listItemEls[0]);
+
+    dropdownToggleEl = within(dropdownElement).getByRole('combobox');
+    expect(dropdownToggleEl).toHaveTextContent('Strategy: checkbox4Carrot up');
+    expect(logSpy).toHaveBeenCalledWith('>>>Filters onSubmit', {
+      exchange: ['binance'],
+      pairs: ['btcfdusd'],
+      status: ['running'],
+      strategy: ['checkbox4'],
+      strategy2: ['strategy2Checkbox1'],
+      strategy3: [],
+    });
+  });
+});