@ssa-ui-kit/widgets 0.0.2-alpha → 0.0.3-alpha

package/src/components/BotsTable/BotsTable.e2e.ts

@@ -1,77 +1,77 @@
-import { test, expect, Page } from '@playwright/test';
-import { SCREEN_SIZES } from '../../consts';
-
-const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
-let SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-bots-table--`;
-
-const gotoPage = (page: Page) => {
-  return page.goto(
-    'http://localhost:6007/iframe.html?args=&id=widgets-botstable--bots-table&viewMode=story',
-  );
-};
-
-test.describe('Widgets: BotsTable', () => {
-  test('Renders correctly', async ({ page }) => {
-    await page.setViewportSize(SCREEN_SIZES[1920]);
-    await gotoPage(page);
-    await expect(page.getByText('Bot name 1')).toBeVisible();
-  });
-
-  test('Opens menu with copy/archive items', async ({ page }) => {
-    await page.setViewportSize(SCREEN_SIZES[1920]);
-    await gotoPage(page);
-    await page
-      .getByRole('row', {
-        name: 'Bot name 6 27.07.23 Kraken Pending ETH/USD -100 USD Arrow Down -15% Arrow Down More vertical',
-      })
-      .getByTestId('more-trigger-button')
-      .click();
-
-    await page.screenshot({
-      path: `${SCREENSHOT_PREFIX}menu-opened_[w1920px].png`,
-    });
-  });
-
-  test('"Run Reason" modal should be shown', async ({ page }) => {
-    await page.setViewportSize(SCREEN_SIZES[1920]);
-    await gotoPage(page);
-    await page
-      .getByRole('row', {
-        name: 'Bot name 6 27.07.23 Kraken Pending ETH/USD -100 USD Arrow Down -15% Arrow Down More vertical',
-      })
-      .getByTestId('run-reason-trigger-button')
-      .click();
-
-    await page.screenshot({
-      path: `${SCREENSHOT_PREFIX}run-reason-modal_[w1920px].png`,
-    });
-  });
-});
-
-const gotoPageNoControlOrders = (page: Page) => {
-  return page.goto(
-    'http://localhost:6007/iframe.html?args=&id=widgets-botstable--no-control-orders&viewMode=story',
-  );
-};
-
-SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-bots-table--no-control-orders--`;
-
-test.describe('Widgets: BotsTable (NoControlOrders)', () => {
-  test('Renders correctly', async ({ page }) => {
-    await page.setViewportSize(SCREEN_SIZES[1920]);
-    await gotoPageNoControlOrders(page);
-    await expect(
-      page.locator('tr:nth-child(6)').getByText('Yevgen 2'),
-    ).toBeVisible();
-  });
-
-  test('Opens menu with Liquidate/Change Price/... items', async ({ page }) => {
-    await page.setViewportSize(SCREEN_SIZES[1920]);
-    await gotoPageNoControlOrders(page);
-    await page.locator('tr:nth-child(6) > td:nth-child(11) > button').click();
-
-    await page.screenshot({
-      path: `${SCREENSHOT_PREFIX}menu-opened_[w1920px].png`,
-    });
-  });
-});
+import { test, expect, Page } from '@playwright/test';
+import { SCREEN_SIZES } from '../../consts';
+
+const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
+let SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-bots-table--`;
+
+const gotoPage = (page: Page) => {
+  return page.goto(
+    'http://localhost:6007/iframe.html?args=&id=widgets-botstable--bots-table&viewMode=story',
+  );
+};
+
+test.describe('Widgets: BotsTable', () => {
+  test('Renders correctly', async ({ page }) => {
+    await page.setViewportSize(SCREEN_SIZES[1920]);
+    await gotoPage(page);
+    await expect(page.getByText('Bot name 1')).toBeVisible();
+  });
+
+  test('Opens menu with copy/archive items', async ({ page }) => {
+    await page.setViewportSize(SCREEN_SIZES[1920]);
+    await gotoPage(page);
+    await page
+      .getByRole('row', {
+        name: 'Bot name 6 27.07.23 Kraken Pending ETH/USD -100 USD Arrow Down -15% Arrow Down More vertical',
+      })
+      .getByTestId('more-trigger-button')
+      .click();
+
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}menu-opened_[w1920px].png`,
+    });
+  });
+
+  test('"Run Reason" modal should be shown', async ({ page }) => {
+    await page.setViewportSize(SCREEN_SIZES[1920]);
+    await gotoPage(page);
+    await page
+      .getByRole('row', {
+        name: 'Bot name 6 27.07.23 Kraken Pending ETH/USD -100 USD Arrow Down -15% Arrow Down More vertical',
+      })
+      .getByTestId('run-reason-trigger-button')
+      .click();
+
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}run-reason-modal_[w1920px].png`,
+    });
+  });
+});
+
+const gotoPageNoControlOrders = (page: Page) => {
+  return page.goto(
+    'http://localhost:6007/iframe.html?args=&id=widgets-botstable--no-control-orders&viewMode=story',
+  );
+};
+
+SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-bots-table--no-control-orders--`;
+
+test.describe('Widgets: BotsTable (NoControlOrders)', () => {
+  test('Renders correctly', async ({ page }) => {
+    await page.setViewportSize(SCREEN_SIZES[1920]);
+    await gotoPageNoControlOrders(page);
+    await expect(
+      page.locator('tr:nth-child(6)').getByText('Yevgen 2'),
+    ).toBeVisible();
+  });
+
+  test('Opens menu with Liquidate/Change Price/... items', async ({ page }) => {
+    await page.setViewportSize(SCREEN_SIZES[1920]);
+    await gotoPageNoControlOrders(page);
+    await page.locator('tr:nth-child(6) > td:nth-child(11) > button').click();
+
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}menu-opened_[w1920px].png`,
+    });
+  });
+});

package/src/components/BotsTable/BotsTable.spec.tsx

@@ -1,125 +1,125 @@
-import { fireEvent, waitFor } from '@testing-library/dom';
-import userEvent from '@testing-library/user-event';
-import { BotsTableStory } from './stories/BotsTable/StoryComponent';
-import { NoControlOrdersStory } from './stories/NoControlOrders/StoryComponent';
-
-describe('BotsTable', () => {
-  it('Should be correctly rendered', () => {
-    const { getByText, getAllByText } = render(<BotsTableStory />);
-
-    getByText('Bot name 1');
-    getAllByText('27.07.23');
-    getByText('Bittrex');
-    getByText('Pending');
-    getAllByText('ETH/USD');
-    getByText('-70 USD');
-    getByText('-10%');
-  });
-
-  it('Should be alert shown after clicking a table row', () => {
-    const { container } = render(<BotsTableStory />);
-
-    const firstBodyRow = container.querySelector('tbody > tr');
-
-    const alertMock = jest.spyOn(window, 'alert').mockImplementation();
-    fireEvent.click(firstBodyRow as Node);
-    expect(alertMock).toHaveBeenCalledWith(
-      JSON.stringify({
-        id: 1,
-        name: 'Bot name 1',
-        creationDate: '27.07.23',
-        exchange: 'binance',
-        status: 'trade',
-        pair: 'ETH/USD',
-        pnl: { amount: 300, currency: 'USD', isIncreasing: true },
-        roi: { amount: 25, isIncreasing: true },
-        isDisabled: false,
-      }),
-    );
-  });
-
-  it('Should be modal "Run Reason" shown after clicking the icon for "pending" or "liquidation" status', () => {
-    const { container, getByText } = render(<BotsTableStory />);
-
-    const button = container.querySelector(
-      'tbody > tr:nth-child(6) > td:last-child button',
-    );
-
-    fireEvent.click(button as Node);
-
-    getByText('Run Reason');
-  });
-
-  it('Should be submitted "Run Reason" modal', async () => {
-    const consoleMock = jest.spyOn(console, 'log').mockImplementation();
-    const { container, getByText, getByPlaceholderText } = render(
-      <BotsTableStory />,
-    );
-    const button = container.querySelector(
-      'tbody > tr:nth-child(6) > td:last-child button',
-    );
-    fireEvent.click(button as Node);
-    const input = getByPlaceholderText('Enter');
-    fireEvent.change(input, { target: { value: 'reason' } });
-    const runButton = getByText('Run');
-    fireEvent.click(runButton);
-
-    await waitFor(() => {
-      expect(consoleMock).toHaveBeenCalledWith(
-        'Submitting... ' +
-          JSON.stringify({
-            reason: 'reason',
-          }),
-      );
-    });
-  });
-
-  it('Should have the three dots button clicked', async () => {
-    const user = userEvent.setup();
-    const alertMock = jest.spyOn(window, 'alert');
-    const { container } = render(<BotsTableStory />);
-    const threeDotsButton = container.querySelector(
-      'tbody > tr:nth-child(6) > td:last-child button:last-child',
-    );
-    fireEvent.click(threeDotsButton as Node);
-    fireEvent.keyDown(threeDotsButton as Node, {
-      key: 'ArrowDown',
-      code: 'ArrowDown',
-    });
-    await user.keyboard('{ArrowDown}');
-    await user.keyboard('{Enter}');
-    expect(alertMock).toHaveBeenCalledWith('action copy');
-  });
-});
-
-describe('BotsTable: NoControlOrdersStory', () => {
-  it('Should be correctly rendered', () => {
-    const { getAllByText } = render(<NoControlOrdersStory />);
-
-    getAllByText('Yevgen 2');
-    getAllByText('bot1');
-    getAllByText('New Run - 12/8/2023');
-    getAllByText('1A2B3C');
-    getAllByText('Active');
-    getAllByText('Less than minute ago');
-    getAllByText('BTC/TUSD');
-    getAllByText('0.003 BTC');
-  });
-
-  it('Should have the three dots button clicked', async () => {
-    const user = userEvent.setup();
-    const alertMock = jest.spyOn(window, 'alert');
-    const { container } = render(<NoControlOrdersStory />);
-    const threeDotsButton = container.querySelector(
-      'tbody > tr:nth-child(6) > td:last-child button:last-child',
-    );
-    fireEvent.click(threeDotsButton as Node);
-    fireEvent.keyDown(threeDotsButton as Node, {
-      key: 'ArrowDown',
-      code: 'ArrowDown',
-    });
-    await user.keyboard('{ArrowDown}');
-    await user.keyboard('{Enter}');
-    expect(alertMock).toHaveBeenCalledWith('action liquidate');
-  });
-});
+import { fireEvent, waitFor } from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
+import { BotsTableStory } from './stories/BotsTable/StoryComponent';
+import { NoControlOrdersStory } from './stories/NoControlOrders/StoryComponent';
+
+describe('BotsTable', () => {
+  it('Should be correctly rendered', () => {
+    const { getByText, getAllByText } = render(<BotsTableStory />);
+
+    getByText('Bot name 1');
+    getAllByText('27.07.23');
+    getByText('Bittrex');
+    getByText('Pending');
+    getAllByText('ETH/USD');
+    getByText('-70 USD');
+    getByText('-10%');
+  });
+
+  it('Should be alert shown after clicking a table row', () => {
+    const { container } = render(<BotsTableStory />);
+
+    const firstBodyRow = container.querySelector('tbody > tr');
+
+    const alertMock = jest.spyOn(window, 'alert').mockImplementation();
+    fireEvent.click(firstBodyRow as Node);
+    expect(alertMock).toHaveBeenCalledWith(
+      JSON.stringify({
+        id: 1,
+        name: 'Bot name 1',
+        creationDate: '27.07.23',
+        exchange: 'binance',
+        status: 'trade',
+        pair: 'ETH/USD',
+        pnl: { amount: 300, currency: 'USD', isIncreasing: true },
+        roi: { amount: 25, isIncreasing: true },
+        isDisabled: false,
+      }),
+    );
+  });
+
+  it('Should be modal "Run Reason" shown after clicking the icon for "pending" or "liquidation" status', () => {
+    const { container, getByText } = render(<BotsTableStory />);
+
+    const button = container.querySelector(
+      'tbody > tr:nth-child(6) > td:last-child button',
+    );
+
+    fireEvent.click(button as Node);
+
+    getByText('Run Reason');
+  });
+
+  it('Should be submitted "Run Reason" modal', async () => {
+    const consoleMock = jest.spyOn(console, 'log').mockImplementation();
+    const { container, getByText, getByPlaceholderText } = render(
+      <BotsTableStory />,
+    );
+    const button = container.querySelector(
+      'tbody > tr:nth-child(6) > td:last-child button',
+    );
+    fireEvent.click(button as Node);
+    const input = getByPlaceholderText('Enter');
+    fireEvent.change(input, { target: { value: 'reason' } });
+    const runButton = getByText('Run');
+    fireEvent.click(runButton);
+
+    await waitFor(() => {
+      expect(consoleMock).toHaveBeenCalledWith(
+        'Submitting... ' +
+          JSON.stringify({
+            reason: 'reason',
+          }),
+      );
+    });
+  });
+
+  it('Should have the three dots button clicked', async () => {
+    const user = userEvent.setup();
+    const alertMock = jest.spyOn(window, 'alert');
+    const { container } = render(<BotsTableStory />);
+    const threeDotsButton = container.querySelector(
+      'tbody > tr:nth-child(6) > td:last-child button:last-child',
+    );
+    fireEvent.click(threeDotsButton as Node);
+    fireEvent.keyDown(threeDotsButton as Node, {
+      key: 'ArrowDown',
+      code: 'ArrowDown',
+    });
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{Enter}');
+    expect(alertMock).toHaveBeenCalledWith('action copy');
+  });
+});
+
+describe('BotsTable: NoControlOrdersStory', () => {
+  it('Should be correctly rendered', () => {
+    const { getAllByText } = render(<NoControlOrdersStory />);
+
+    getAllByText('Yevgen 2');
+    getAllByText('bot1');
+    getAllByText('New Run - 12/8/2023');
+    getAllByText('1A2B3C');
+    getAllByText('Active');
+    getAllByText('Less than minute ago');
+    getAllByText('BTC/TUSD');
+    getAllByText('0.003 BTC');
+  });
+
+  it('Should have the three dots button clicked', async () => {
+    const user = userEvent.setup();
+    const alertMock = jest.spyOn(window, 'alert');
+    const { container } = render(<NoControlOrdersStory />);
+    const threeDotsButton = container.querySelector(
+      'tbody > tr:nth-child(6) > td:last-child button:last-child',
+    );
+    fireEvent.click(threeDotsButton as Node);
+    fireEvent.keyDown(threeDotsButton as Node, {
+      key: 'ArrowDown',
+      code: 'ArrowDown',
+    });
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{Enter}');
+    expect(alertMock).toHaveBeenCalledWith('action liquidate');
+  });
+});

package/src/components/BotsTable/BotsTable.tsx

@@ -1,32 +1,32 @@
-import { Children, cloneElement, isValidElement } from 'react';
-import { TableBody } from '@ssa-ui-kit/core';
-import { BotsTableProps } from './types';
-import {
-  BotsTableWrapper,
-  BotsTableCell,
-  BotsTableHead,
-  BotsTableRow,
-} from '.';
-
-export const BotsTable = ({ children, columns, className }: BotsTableProps) => (
-  <BotsTableWrapper className={className}>
-    <BotsTableHead>
-      <BotsTableRow>
-        {columns.map((columnName) => (
-          <BotsTableCell key={`column-${columnName.toLowerCase()}`}>
-            {columnName}
-          </BotsTableCell>
-        ))}
-      </BotsTableRow>
-    </BotsTableHead>
-    <TableBody>
-      {Children.map(children, (child) => {
-        if (isValidElement(child)) {
-          return cloneElement(child, {
-            key: child.props.id,
-          });
-        }
-      })}
-    </TableBody>
-  </BotsTableWrapper>
-);
+import { Children, cloneElement, isValidElement } from 'react';
+import { TableBody } from '@ssa-ui-kit/core';
+import { BotsTableProps } from './types';
+import {
+  BotsTableWrapper,
+  BotsTableCell,
+  BotsTableHead,
+  BotsTableRow,
+} from '.';
+
+export const BotsTable = ({ children, columns, className }: BotsTableProps) => (
+  <BotsTableWrapper className={className}>
+    <BotsTableHead>
+      <BotsTableRow>
+        {columns.map((columnName) => (
+          <BotsTableCell key={`column-${columnName.toLowerCase()}`}>
+            {columnName}
+          </BotsTableCell>
+        ))}
+      </BotsTableRow>
+    </BotsTableHead>
+    <TableBody>
+      {Children.map(children, (child) => {
+        if (isValidElement(child)) {
+          return cloneElement(child, {
+            key: child.props.id,
+          });
+        }
+      })}
+    </TableBody>
+  </BotsTableWrapper>
+);

package/src/components/BotsTable/BotsTableCell.tsx

@@ -1,10 +1,10 @@
-import styled from '@emotion/styled';
-import { TableCell } from '@ssa-ui-kit/core';
-
-export const BotsTableCell = styled(TableCell)`
-  border: none;
-  padding: 0 16px;
-  background: #fff;
-  font-size: 14px;
-  font-weight: 500;
-`;
+import styled from '@emotion/styled';
+import { TableCell } from '@ssa-ui-kit/core';
+
+export const BotsTableCell = styled(TableCell)`
+  border: none;
+  padding: 0 16px;
+  background: #fff;
+  font-size: 14px;
+  font-weight: 500;
+`;

package/src/components/BotsTable/BotsTableHead.tsx

@@ -1,9 +1,9 @@
-import styled from '@emotion/styled';
-import { TableHead } from '@ssa-ui-kit/core';
-
-export const BotsTableHead = styled(TableHead)`
-  background: none;
-  & tr td:first-of-type {
-    padding-left: 16px;
-  }
-`;
+import styled from '@emotion/styled';
+import { TableHead } from '@ssa-ui-kit/core';
+
+export const BotsTableHead = styled(TableHead)`
+  background: none;
+  & tr td:first-of-type {
+    padding-left: 16px;
+  }
+`;

package/src/components/BotsTable/BotsTableRow.tsx

@@ -1,17 +1,17 @@
-import styled from '@emotion/styled';
-import { TableRow } from '@ssa-ui-kit/core';
-
-export const BotsTableRow = styled(TableRow)<{ isDisabled?: boolean }>`
-  border: none;
-  padding: 0 16px;
-  height: 44px;
-  ${({ isDisabled }) =>
-    isDisabled && {
-      opacity: 0.6,
-      cursor: 'default',
-      userSelect: 'none',
-    }}
-  & tr:first-of-type {
-    padding-left: 18px;
-  }
-`;
+import styled from '@emotion/styled';
+import { TableRow } from '@ssa-ui-kit/core';
+
+export const BotsTableRow = styled(TableRow)<{ isDisabled?: boolean }>`
+  border: none;
+  padding: 0 16px;
+  height: 44px;
+  ${({ isDisabled }) =>
+    isDisabled && {
+      opacity: 0.6,
+      cursor: 'default',
+      userSelect: 'none',
+    }}
+  & tr:first-of-type {
+    padding-left: 18px;
+  }
+`;

package/src/components/BotsTable/BotsTableWrapper.tsx

@@ -1,23 +1,23 @@
-import styled from '@emotion/styled';
-import { Table } from '@ssa-ui-kit/core';
-
-export const BotsTableWrapper = styled(Table)`
-  background: none;
-  & thead td:first-of-type {
-    border-top-left-radius: 20px;
-  }
-  & thead td:last-child {
-    border-top-right-radius: 20px;
-  }
-  & tbody tr:last-child td:first-of-type {
-    border-bottom-left-radius: 20px;
-  }
-  & tbody tr:last-child td:last-child {
-    border-bottom-right-radius: 20px;
-  }
-  & tbody tr:not([aria-disabled='true']):hover {
-    & td {
-      background-color: #eef1f7;
-    }
-  }
-`;
+import styled from '@emotion/styled';
+import { Table } from '@ssa-ui-kit/core';
+
+export const BotsTableWrapper = styled(Table)`
+  background: none;
+  & thead td:first-of-type {
+    border-top-left-radius: 20px;
+  }
+  & thead td:last-child {
+    border-top-right-radius: 20px;
+  }
+  & tbody tr:last-child td:first-of-type {
+    border-bottom-left-radius: 20px;
+  }
+  & tbody tr:last-child td:last-child {
+    border-bottom-right-radius: 20px;
+  }
+  & tbody tr:not([aria-disabled='true']):hover {
+    & td {
+      background-color: #eef1f7;
+    }
+  }
+`;

package/src/components/BotsTable/index.ts

@@ -1,5 +1,5 @@
-export * from './BotsTableWrapper';
-export * from './BotsTable';
-export * from './BotsTableCell';
-export * from './BotsTableHead';
-export * from './BotsTableRow';
+export * from './BotsTableWrapper';
+export * from './BotsTable';
+export * from './BotsTableCell';
+export * from './BotsTableHead';
+export * from './BotsTableRow';