@ssa-ui-kit/widgets 1.0.12 → 1.1.55-canary-79b6b0d-20250224

package/src/components/BotsTable/BotsTable.specBackup.tsx

@@ -1,125 +0,0 @@
-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 +0,0 @@
-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,13 +0,0 @@
-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: 12px;
-  font-weight: 500;
-  ${({ theme }) => theme.mediaQueries.lg} {
-    font-size: 14px;
-  }
-`;

package/src/components/BotsTable/BotsTableHead.tsx

@@ -1,13 +0,0 @@
-import styled from '@emotion/styled';
-import { TableHead } from '@ssa-ui-kit/core';
-
-export const BotsTableHead = styled(TableHead)`
-  background: none;
-  font-size: 12px;
-  ${({ theme }) => theme.mediaQueries.lg} {
-    font-size: 14px;
-  }
-  & tr td:first-of-type {
-    padding-left: 16px;
-  }
-`;

package/src/components/BotsTable/BotsTableRow.tsx

@@ -1,17 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-export * from './BotsTableWrapper';
-export * from './BotsTable';
-export * from './BotsTableCell';
-export * from './BotsTableHead';
-export * from './BotsTableRow';

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

@@ -1,59 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,133 +0,0 @@
-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

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

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

@@ -1,21 +0,0 @@
-import { Wrapper } from '@ssa-ui-kit/core';
-
-export const ActionsWrapper = ({
-  children,
-  ...rest
-}: Parameters<typeof Wrapper>[0]) => (
-  <Wrapper
-    direction="column"
-    alignItems="flex-start"
-    css={{
-      background: '#fff',
-      width: 140,
-      color: '#2b2d31',
-      fontWeight: 500,
-      borderRadius: 5,
-      boxShadow: '0px 4px 8px 0px rgba(0, 0, 0, 0.25)',
-    }}
-    {...rest}>
-    {children}
-  </Wrapper>
-);