@ssa-ui-kit/widgets 0.0.1-alpha

package/src/components/Bmi/styles.ts

@@ -0,0 +1,18 @@
+import { css, Theme } from '@emotion/react';
+
+export const TitleWrapper = (theme: Theme) => css`
+  display: flex;
+
+  h6 {
+    line-height: 1.625rem;
+    margin-left: 10px;
+
+    color: ${theme.colors.greyDarker60};
+  }
+`;
+
+export const ContentWrapper = css`
+  position: relative;
+  width: 100%;
+  padding-top: 20px;
+`;

package/src/components/Bmi/types.ts

@@ -0,0 +1,4 @@
+export interface BmiProps {
+  height?: number;
+  weight?: number;
+}

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

@@ -0,0 +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`,
+    });
+  });
+});

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

@@ -0,0 +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');
+  });
+});

package/src/components/BotsTable/BotsTable.tsx

@@ -0,0 +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>
+);

package/src/components/BotsTable/BotsTableCell.tsx

@@ -0,0 +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;
+`;

package/src/components/BotsTable/BotsTableHead.tsx

@@ -0,0 +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;
+  }
+`;

package/src/components/BotsTable/BotsTableRow.tsx

@@ -0,0 +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;
+  }
+`;

package/src/components/BotsTable/BotsTableWrapper.tsx

@@ -0,0 +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;
+    }
+  }
+`;

package/src/components/BotsTable/index.ts

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

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

@@ -0,0 +1,59 @@
+import { Wrapper } from '@ssa-ui-kit/core';
+import { BotsTable, BotsTableCell, BotsTableRow } from '@components/BotsTable';
+import { BotsTableItem } from '@components/BotsTable/types';
+import { Exchange, PNL, ROI, Trade, Actions } from './components';
+import { botsTableData } from './mockData';
+
+export const BotsTableStory = () => {
+  const handleRowClick = (row: BotsTableItem) => () => {
+    alert(JSON.stringify(row));
+  };
+
+  const columns = [
+    'Name',
+    'Creation Date',
+    'Exchange',
+    'Status',
+    'Pair',
+    'PNL',
+    'ROI',
+    '',
+  ];
+
+  return (
+    <Wrapper
+      css={{
+        width: '100%',
+        height: '100%',
+      }}>
+      <BotsTable columns={columns}>
+        {botsTableData.map((item) => (
+          <BotsTableRow
+            aria-disabled={item.isDisabled}
+            key={item.id}
+            isDisabled={item.isDisabled}
+            onClick={item.isDisabled ? undefined : handleRowClick(item)}>
+            <BotsTableCell>{item.name}</BotsTableCell>
+            <BotsTableCell>{item.creationDate}</BotsTableCell>
+            <BotsTableCell>
+              <Exchange exchangeType={item.exchange} />
+            </BotsTableCell>
+            <BotsTableCell>
+              <Trade tradeType={item.status} />
+            </BotsTableCell>
+            <BotsTableCell>{item.pair}</BotsTableCell>
+            <BotsTableCell>
+              <PNL {...item.pnl} />
+            </BotsTableCell>
+            <BotsTableCell>
+              <ROI {...item.roi} />
+            </BotsTableCell>
+            <BotsTableCell>
+              <Actions row={item} />
+            </BotsTableCell>
+          </BotsTableRow>
+        ))}
+      </BotsTable>
+    </Wrapper>
+  );
+};

package/src/components/BotsTable/stories/BotsTable/components/Actions/ActionIcon.tsx

@@ -0,0 +1,11 @@
+import { useTheme } from '@emotion/react';
+import { Icon } from '@ssa-ui-kit/core';
+
+export const ActionIcon = ({
+  name,
+}: {
+  name: Parameters<typeof Icon>[0]['name'];
+}) => {
+  const theme = useTheme();
+  return <Icon name={name} size={15} color={theme.colors.greyFilterIcon} />;
+};

package/src/components/BotsTable/stories/BotsTable/components/Actions/ActionItem.tsx

@@ -0,0 +1,40 @@
+import { Button } from '@ssa-ui-kit/core';
+
+export const ActionItem = ({
+  children,
+  ...rest
+}: Parameters<typeof Button>[0]) => (
+  <Button
+    css={{
+      background: 'none',
+      padding: '5px 10px',
+      color: '#2b2d31',
+      fontWeight: 500,
+      fontSize: 14,
+      gap: 0,
+      width: '100%',
+      height: 'auto',
+      borderRadius: 0,
+      textIndent: 10,
+      '&:fist-child': {
+        paddingTop: 10,
+      },
+      '&:last-child': {
+        paddingBottom: 10,
+      },
+      '&:hover,&:active,&:focus': {
+        background: 'none',
+        boxShadow: 'none',
+      },
+      '&:hover,&:active': {
+        background: '#eef1f7',
+      },
+      '&:hover svg path': {
+        background: 'none',
+        fill: '#2b2d31',
+      },
+    }}
+    {...rest}>
+    {children}
+  </Button>
+);

package/src/components/BotsTable/stories/BotsTable/components/Actions/ActionMore.tsx

@@ -0,0 +1,89 @@
+import { MouseEventHandler, useState } from 'react';
+import { useTheme } from '@emotion/react';
+import {
+  Icon,
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverTrigger,
+} from '@ssa-ui-kit/core';
+import { BotsTableItem } from '@components/BotsTable/types';
+import { ActionItem } from './ActionItem';
+import { ActionsWrapper } from './ActionsWrapper';
+
+export const ActionMore = ({ row: { isDisabled } }: { row: BotsTableItem }) => {
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+
+  const onOpenChange = (open: boolean) => {
+    setOpen(open);
+  };
+  const actionMoreHandler: MouseEventHandler<HTMLElement> = (event) => {
+    event.stopPropagation();
+  };
+
+  const actionHandler =
+    (actionName: string): MouseEventHandler<HTMLElement> =>
+    (event) => {
+      event.stopPropagation();
+      alert(`action ${actionName}`);
+      setOpen(false);
+    };
+
+  return (
+    <Popover
+      floatingOptions={{
+        onOpenChange,
+        open,
+      }}
+      placement="top-start">
+      <PopoverTrigger
+        variant="custom"
+        isDisabled={isDisabled}
+        dataTestId="more-trigger-button"
+        css={{
+          marginLeft: 10,
+          padding: '0 10px',
+          cursor: isDisabled ? 'default' : 'pointer',
+          backgroundColor: 'unset',
+        }}
+        startIcon={
+          <Icon
+            name="more-vertical"
+            size={15}
+            color={theme.colors.greyDropdownFocused}
+          />
+        }
+        onClick={actionMoreHandler}
+      />
+      <PopoverContent>
+        <PopoverDescription>
+          <ActionsWrapper>
+            <ActionItem
+              startIcon={
+                <Icon
+                  name="copy"
+                  size={15}
+                  color={theme.colors.greyFilterIcon}
+                />
+              }
+              onClick={actionHandler('copy')}>
+              Copy
+            </ActionItem>
+            <ActionItem
+              startIcon={
+                <Icon
+                  name="archive"
+                  size={15}
+                  color={theme.colors.greyFilterIcon}
+                />
+              }
+              onClick={actionHandler('archive')}>
+              Archive
+            </ActionItem>
+          </ActionsWrapper>
+        </PopoverDescription>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/components/BotsTable/stories/BotsTable/components/Actions/ActionRun.tsx

@@ -0,0 +1,133 @@
+import { MouseEventHandler, useEffect, useState } from 'react';
+import { useForm, FieldValues } from 'react-hook-form';
+import {
+  Button,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverTrigger,
+  Typography,
+  Wrapper,
+} from '@ssa-ui-kit/core';
+import { BotsTableItem } from '@components/BotsTable/types';
+import { actionsIcons } from './consts';
+
+export const ActionRun = ({ row }: { row: BotsTableItem }) => {
+  const { status, isDisabled } = row;
+  const ActionIcon = actionsIcons[status];
+
+  const [open, setOpen] = useState(false);
+  const { register, handleSubmit, resetField } = useForm<FieldValues>();
+
+  const onOpenChange = (open: boolean) => {
+    if (['pending', 'liquidation'].includes(status)) {
+      setOpen(open);
+    }
+  };
+  const actionRunHandler: MouseEventHandler<HTMLElement> = (event) => {
+    event.stopPropagation();
+  };
+  useEffect(() => {
+    return () => {
+      resetField('reason');
+    };
+  }, []);
+
+  return (
+    <Popover
+      floatingOptions={{
+        onOpenChange,
+        open,
+      }}
+      placement="top-start">
+      <PopoverTrigger
+        variant="custom"
+        isDisabled={isDisabled}
+        dataTestId="run-reason-trigger-button"
+        css={{
+          marginLeft: 10,
+          padding: '0 10px',
+          cursor: isDisabled ? 'default' : 'pointer',
+          backgroundColor: 'unset',
+          '& > span': {
+            height: '100%',
+            alignItems: 'center',
+          },
+        }}
+        startIcon={<ActionIcon />}
+        onClick={actionRunHandler}
+      />
+      <PopoverContent>
+        <PopoverDescription>
+          <Wrapper
+            css={{
+              width: 307,
+              height: 85,
+              borderRadius: 6,
+              padding: 10,
+              background: '#fff',
+              boxShadow: '0px 4px 10px 0px rgba(0, 0, 0, 0.10)',
+            }}
+            onClick={(event) => event.stopPropagation()}>
+            <form
+              onSubmit={(event) => {
+                event.stopPropagation();
+                handleSubmit((data) => {
+                  alert('Submitting... ' + JSON.stringify(data));
+                  console.log('Submitting... ' + JSON.stringify(data));
+                })(event);
+                setOpen(false);
+                resetField('reason');
+              }}>
+              <Typography
+                variant="h6"
+                css={{
+                  marginBottom: 6,
+                  lineHeight: '18px',
+                  textIndent: 4,
+                }}>
+                Run Reason
+              </Typography>
+              <Wrapper
+                css={{
+                  gap: 7,
+                }}>
+                <Input
+                  name="reason"
+                  register={register}
+                  placeholder="Enter"
+                  css={{
+                    borderRadius: 6,
+                    '&:hover': {
+                      margin: '-0.4px',
+                    },
+                    '&:focus': {
+                      margin: '-1px',
+                    },
+                  }}
+                />
+                <Button
+                  variant="info"
+                  type="submit"
+                  css={{
+                    width: 90,
+                    height: 40,
+                    padding: '0 14px',
+                    borderRadius: 6,
+                    fontSize: 14,
+                    fontWeight: 700,
+                    justifyContent: 'center',
+                    background:
+                      'linear-gradient(247deg, #7599DE 14.71%, #4178E1 85.29%)',
+                  }}>
+                  Run
+                </Button>
+              </Wrapper>
+            </form>
+          </Wrapper>
+        </PopoverDescription>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/components/BotsTable/stories/BotsTable/components/Actions/Actions.tsx

@@ -0,0 +1,13 @@
+import { Wrapper } from '@ssa-ui-kit/core';
+import { BotsTableItem } from '@components/BotsTable/types';
+import { ActionMore } from './ActionMore';
+import { ActionRun } from './ActionRun';
+
+export const Actions = ({ row }: { row: BotsTableItem }) => {
+  return (
+    <Wrapper>
+      <ActionRun row={row} />
+      <ActionMore row={row} />
+    </Wrapper>
+  );
+};