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

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

@@ -1,95 +0,0 @@
-import { MouseEventHandler, useState } from 'react';
-import { useTheme } from '@emotion/react';
-import {
-  Icon,
-  Popover,
-  PopoverContent,
-  PopoverDescription,
-  PopoverTrigger,
-} from '@ssa-ui-kit/core';
-import {
-  ActionItem,
-  ActionsWrapper,
-  ActionIcon,
-} from '@components/BotsTable/stories/BotsTable';
-import { NoControlOrdersItem } from '../types';
-
-export const ActionMore = ({
-  row: { isDisabled },
-}: {
-  row: NoControlOrdersItem;
-}) => {
-  const theme = useTheme();
-  const [open, setOpen] = useState(false);
-
-  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: setOpen,
-        open,
-      }}
-      placement="top-start">
-      <PopoverTrigger
-        variant="custom"
-        isDisabled={isDisabled}
-        css={{
-          borderLeft: '1px solid #eaecf0',
-          height: '100%',
-          display: 'flex',
-          alignItems: 'center',
-          cursor: isDisabled ? 'default' : 'pointer',
-          background: 'unset',
-          borderRadius: '0',
-        }}
-        startIcon={
-          <Icon
-            name="more-vertical"
-            size={15}
-            color={theme.colors.greyDropdownFocused}
-          />
-        }
-        onClick={actionMoreHandler}
-      />
-      <PopoverContent>
-        <PopoverDescription>
-          <ActionsWrapper
-            css={{
-              width: 160,
-            }}>
-            <ActionItem
-              startIcon={<ActionIcon name="invisible" />}
-              onClick={actionHandler('liquidate')}>
-              Liquidate
-            </ActionItem>
-            <ActionItem
-              startIcon={<ActionIcon name="change" />}
-              onClick={actionHandler('changePrice')}>
-              Change Price
-            </ActionItem>
-            <ActionItem
-              startIcon={<ActionIcon name="cross" />}
-              onClick={actionHandler('cancel')}>
-              Cancel
-            </ActionItem>
-            <ActionItem
-              startIcon={<ActionIcon name="bin" />}
-              onClick={actionHandler('deleteFromList')}>
-              Delete from list
-            </ActionItem>
-          </ActionsWrapper>
-        </PopoverDescription>
-      </PopoverContent>
-    </Popover>
-  );
-};

package/src/components/BotsTable/stories/NoControlOrders/components/Reason.tsx

@@ -1,11 +0,0 @@
-export const Reason = ({ children }: { children: string }) => (
-  <div
-    css={{
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      maxWidth: 100,
-    }}>
-    {children}
-  </div>
-);

package/src/components/BotsTable/stories/NoControlOrders/components/TableList.tsx

@@ -1,45 +0,0 @@
-import { BotsTableProps } from '@components/BotsTable/types';
-import { BotsTable } from '@components/BotsTable';
-
-export const TableList = ({ children, ...rest }: BotsTableProps) => (
-  <BotsTable
-    css={{
-      '& thead tr': {
-        position: 'relative',
-        '& td:last-child': {
-          '&:before': {
-            content: '""',
-            display: 'block',
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            width: 40,
-            height: 40,
-            borderRadius: 20,
-            background: '#fff',
-            clipPath: 'inset(0 0 50% 50%)',
-          },
-          '&:after': {
-            content: '""',
-            display: 'block',
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            width: 20,
-            height: 20,
-            background: '#D0D1D6',
-            zIndex: -1,
-          },
-        },
-      },
-      '& tr td:last-child': {
-        position: 'sticky',
-        height: 44,
-        right: 0,
-        padding: 0,
-      },
-    }}
-    {...rest}>
-    {children}
-  </BotsTable>
-);

package/src/components/BotsTable/stories/NoControlOrders/components/TableRow.tsx

@@ -1,31 +0,0 @@
-import { BotsTableCell, BotsTableRow } from '@components/BotsTable';
-import { Exchange, TableTag } from '@components/BotsTable/stories/BotsTable';
-import { ActionMore } from './ActionMore';
-import { Reason } from './Reason';
-import { NoControlOrdersItem } from '../types';
-
-export const TableRow = (item: NoControlOrdersItem) => (
-  <BotsTableRow aria-disabled={item.isDisabled} isDisabled={item.isDisabled}>
-    <BotsTableCell>
-      <Exchange exchangeType={item.exchange} showTitle={false} />
-    </BotsTableCell>
-    <BotsTableCell>{item.account}</BotsTableCell>
-    <BotsTableCell>{item.botName}</BotsTableCell>
-    <BotsTableCell>{item.botRun}</BotsTableCell>
-    <BotsTableCell>{item.orderId}</BotsTableCell>
-    <BotsTableCell>
-      <TableTag color={item.status ? 'green' : 'pink'}>
-        {item.status ? 'Active' : 'Inactive'}
-      </TableTag>
-    </BotsTableCell>
-    <BotsTableCell>
-      <Reason>{item.reason}</Reason>
-    </BotsTableCell>
-    <BotsTableCell>{item.pair}</BotsTableCell>
-    <BotsTableCell>{item.orderSize}</BotsTableCell>
-    <BotsTableCell>{item.orderType}</BotsTableCell>
-    <BotsTableCell>
-      <ActionMore row={item} />
-    </BotsTableCell>
-  </BotsTableRow>
-);

package/src/components/BotsTable/stories/NoControlOrders/components/index.ts

@@ -1,4 +0,0 @@
-export * from './ActionMore';
-export * from './Reason';
-export * from './TableList';
-export * from './TableRow';

package/src/components/BotsTable/stories/NoControlOrders/mockData.ts

@@ -1,23 +0,0 @@
-import { NoControlOrdersItem } from './types';
-
-const commonStructure: NoControlOrdersItem = {
-  id: 1,
-  exchange: 'binance',
-  account: 'Yevgen 2',
-  botName: 'bot1',
-  botRun: 'New Run - 12/8/2023',
-  orderId: '1A2B3C',
-  status: true,
-  reason: 'Less than minute ago',
-  pair: 'BTC/TUSD',
-  orderSize: '0.003 BTC',
-  orderType: 'SELL',
-  isDisabled: false,
-};
-
-export const noControlOrdersData = new Array(10)
-  .fill(null)
-  .map((value, index) => ({
-    ...commonStructure,
-    id: index + 1,
-  }));

package/src/components/BotsTable/stories/NoControlOrders/types.ts

@@ -1,16 +0,0 @@
-import { ExchangeType } from '../BotsTable/components/Exchange/types';
-
-export interface NoControlOrdersItem {
-  id: number;
-  exchange: ExchangeType;
-  account: string;
-  botName: string;
-  botRun: string;
-  orderId: string;
-  status: boolean;
-  reason: string;
-  pair: string;
-  orderSize: string;
-  orderType: 'SELL';
-  isDisabled: boolean;
-}

package/src/components/BotsTable/types.ts

@@ -1,31 +0,0 @@
-import { ExchangeType } from './stories/BotsTable/components/Exchange/types';
-import { TradeType } from './stories/BotsTable/components/Trade/types';
-
-export interface PNL {
-  amount: number;
-  currency: string;
-  isIncreasing: boolean;
-}
-
-export interface ROI {
-  amount: number;
-  isIncreasing: boolean;
-}
-
-export interface BotsTableItem {
-  id: number;
-  name: string;
-  creationDate: string;
-  exchange: ExchangeType;
-  status: TradeType;
-  pair: string;
-  pnl: PNL;
-  roi: ROI;
-  isDisabled: boolean;
-}
-
-export interface BotsTableProps {
-  children: React.ReactElement<React.PropsWithChildren<BotsTableItem>>[];
-  columns: string[];
-  className?: string;
-}

package/src/components/Calories/Calories.specBackup.tsx

@@ -1,11 +0,0 @@
-import { screen } from '../../../customTest';
-
-import Calories from './index';
-
-describe('Calories', () => {
-  it('Render Calories', () => {
-    render(<Calories max={100} currentValue={70} />);
-
-    expect(screen.queryByText('70% done')).toBeInTheDocument();
-  });
-});

package/src/components/Calories/Calories.stories.tsx

@@ -1,26 +0,0 @@
-import type { Meta } from '@storybook/react';
-
-import { Calories } from './Calories';
-
-export default {
-  title: 'Fitness/Calories',
-  component: Calories,
-  argTypes: {
-    max: {
-      control: {
-        type: 'number',
-      },
-    },
-    currentValue: {
-      control: {
-        type: 'number',
-      },
-    },
-  },
-  args: {
-    max: 100,
-    currentValue: 70,
-  },
-} as Meta<typeof Calories>;
-
-export const Default = {};

package/src/components/Calories/Calories.tsx

@@ -1,54 +0,0 @@
-import { css, useTheme } from '@emotion/react';
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  ProgressCircle,
-  Typography,
-  ResponsiveImage,
-} from '@ssa-ui-kit/core';
-
-import { CaloriesProps } from './types';
-import { InnerContent } from './innerContent';
-
-/**
- *
- * UI Component that shows how many calories the user has burned
- */
-export const Calories = ({ max, currentValue }: CaloriesProps) => {
-  const theme = useTheme();
-
-  return (
-    <Card
-      css={css`
-        box-shadow: 0 10px 40px rgba(42, 48, 57, 0.08);
-        border-radius: 20px;
-      `}>
-      <CardHeader
-        icon={
-          <ResponsiveImage
-            css={{ filter: `drop-shadow(0px 5px 5px ${theme.colors.grey})` }}
-            srcSet="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fcalories%2Fcalories_64.png?alt=media&token=6a57e3f5-0e15-4dcf-8871-f1bf94d887af 64w, https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fcalories%2Fcalories_48.png?alt=media&token=861ad7c8-1bcb-4f2d-a581-4b73b4821251 48w"
-            sizes="(min-width: 1440px) 64px, 48px"
-            src="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fcalories%2Fcalories_48.png?alt=media&token=861ad7c8-1bcb-4f2d-a581-4b73b4821251"
-            alt="Calories burn"
-          />
-        }>
-        <Typography variant="h6" weight="bold">
-          Calories
-        </Typography>
-      </CardHeader>
-
-      <CardContent>
-        <ProgressCircle
-          max={max}
-          currentValue={currentValue}
-          color="pink"
-          infoContent={<InnerContent max={max} currentValue={currentValue} />}
-          size={120}
-        />
-      </CardContent>
-    </Card>
-  );
-};

package/src/components/Calories/index.tsx

@@ -1,2 +0,0 @@
-export { Calories as default } from './Calories';
-export * from './types';

package/src/components/Calories/innerContent.tsx

@@ -1,30 +0,0 @@
-import { useTheme } from '@emotion/react';
-import { Typography, Wrapper } from '@ssa-ui-kit/core';
-
-import { CaloriesProps } from './types';
-
-export const InnerContent = ({ currentValue, max }: CaloriesProps) => {
-  const theme = useTheme();
-  return (
-    <div
-      style={{
-        display: 'grid',
-        textAlign: 'center',
-      }}>
-      <Wrapper alignItems="baseline" direction="row" css={{ gap: 5 }}>
-        <Typography variant="h5" weight="bold" color={theme.colors.greyDarker}>
-          {currentValue}
-        </Typography>
-        <Typography
-          variant="subtitle"
-          weight="bold"
-          color={theme.colors.greyDarker}>
-          kcal
-        </Typography>
-      </Wrapper>
-      <Typography variant="subtitle" color={theme.colors.greyDarker60}>
-        {(currentValue / max) * 100}% done
-      </Typography>
-    </div>
-  );
-};

package/src/components/Calories/types.ts

@@ -1,4 +0,0 @@
-export interface CaloriesProps {
-  max: number;
-  currentValue: number;
-}

package/src/components/ExchangeAccount/ExchangeAccount.specBackup.tsx

@@ -1,104 +0,0 @@
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import userEvent from '@testing-library/user-event';
-import { ExchangeAccount } from './ExchangeAccount';
-import { dataValues } from './helpers';
-
-const commonProps = {
-  platform: dataValues[0].platform,
-  title: dataValues[0].title,
-  data: dataValues[0].data,
-  status: dataValues[0].status,
-  onDelete: jest.fn(),
-};
-
-describe('ExchangeAccount', () => {
-  it('Renders with platform', () => {
-    const { getByText } = render(<ExchangeAccount {...commonProps} />);
-    getByText(new RegExp('Binance', 'i'));
-  });
-
-  it('Renders with title', () => {
-    const { getByText } = render(<ExchangeAccount {...commonProps} />);
-    getByText(new RegExp('Account Name', 'i'));
-  });
-
-  it('Renders with active status label', () => {
-    const { getByText } = render(<ExchangeAccount {...commonProps} />);
-    getByText(new RegExp('Active', 'i'));
-  });
-
-  it('Renders with not available status label', () => {
-    const { getByText } = render(
-      <ExchangeAccount {...commonProps} status="NotAvailable" />,
-    );
-    getByText(new RegExp('Not available', 'i'));
-  });
-
-  it('Renders with BalancePieChart component', () => {
-    const { container } = render(<ExchangeAccount {...commonProps} />);
-
-    const pieChartWrapper = container.querySelector('.pie-chart-wrapper');
-    expect(pieChartWrapper).toBeInTheDocument();
-  });
-
-  it('Clicks on delete button', async () => {
-    const user = userEvent.setup();
-    const mockOnClick = jest.fn();
-    const { getByRole } = render(
-      <ExchangeAccount {...commonProps} onDelete={mockOnClick} />,
-    );
-
-    const deleteButton = getByRole('button');
-
-    await user.click(deleteButton);
-    expect(mockOnClick).toBeCalledTimes(1);
-  });
-
-  it('Clicks on card', async () => {
-    const user = userEvent.setup();
-    const mockOnClick = jest.fn();
-    const mockOnDelete = jest.fn();
-    const { getByTestId } = render(
-      <ExchangeAccount
-        {...commonProps}
-        onClick={mockOnClick}
-        onDelete={mockOnDelete}
-      />,
-    );
-
-    await user.click(getByTestId('card'));
-
-    expect(mockOnClick).toBeCalledTimes(1);
-    expect(mockOnDelete).toBeCalledTimes(0);
-  });
-
-  it('Renders with clickable card link', async () => {
-    const user = userEvent.setup();
-    const mockOnClick = jest.fn();
-    const mockOnDelete = jest.fn();
-    const { getByRole } = render(
-      <MemoryRouter>
-        <Routes>
-          <Route
-            path="/*"
-            element={
-              <ExchangeAccount
-                {...commonProps}
-                link="/link"
-                onClick={mockOnClick}
-                onDelete={mockOnDelete}
-              />
-            }
-          />
-        </Routes>
-      </MemoryRouter>,
-    );
-
-    const link = getByRole('link');
-    await user.click(link);
-
-    expect(link).toHaveAttribute('href', '/link');
-    expect(mockOnClick).toBeCalledTimes(1);
-    expect(mockOnDelete).toBeCalledTimes(0);
-  });
-});

package/src/components/ExchangeAccount/ExchangeAccount.stories.tsx

@@ -1,108 +0,0 @@
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import type { Meta, StoryObj } from '@storybook/react';
-import { css, useTheme } from '@emotion/react';
-import { css as cssClassname } from '@emotion/css';
-import { Icon, AddNewAccountCard } from '@ssa-ui-kit/core';
-import { ExchangeAccount } from './ExchangeAccount';
-import { dataValues } from './helpers';
-
-export default {
-  title: 'Trading/ExchangeAccount',
-  component: ExchangeAccount,
-} as Meta<typeof ExchangeAccount>;
-
-export const Default: StoryObj<typeof ExchangeAccount> = () => {
-  return (
-    <ExchangeAccount
-      platform={dataValues[0].platform}
-      title={dataValues[0].title}
-      status={dataValues[0].status}
-      data={dataValues[0].data}
-      onClick={() => alert('Card is clicked!')}
-      onDelete={() => alert('Card is deleted!')}
-      pieChartProps={{
-        className: cssClassname`
-          align-self: center;
-          max-width: 300px;
-        `,
-      }}
-    />
-  );
-};
-
-Default.args = {};
-
-export const WithLink: StoryObj<typeof ExchangeAccount> = () => {
-  return (
-    <MemoryRouter>
-      <Routes>
-        <Route
-          path="/*"
-          element={
-            <ExchangeAccount
-              platform={dataValues[0].platform}
-              title={dataValues[0].title}
-              status={dataValues[0].status}
-              data={dataValues[0].data}
-              link="/link"
-              onClick={() => alert('Card is clicked!')}
-              onDelete={() => alert('Card is deleted!')}
-              pieChartProps={{
-                className: cssClassname`
-                  align-self: center;
-                  max-width: 300px;
-                `,
-              }}
-            />
-          }
-        />
-      </Routes>
-    </MemoryRouter>
-  );
-};
-
-WithLink.args = {};
-
-export const List: StoryObj<typeof ExchangeAccount> = () => {
-  const theme = useTheme();
-  return (
-    <div
-      css={css`
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
-        gap: 10px;
-
-        ${theme.mediaQueries.md} {
-          max-width: 1542px;
-          grid-template-columns: repeat(3, minmax(270px, 1fr));
-          gap: 20px;
-        }
-      `}>
-      <AddNewAccountCard>
-        <Icon name="plus" size={12} color={theme.colors.blueRoyal} />
-        Add new account
-      </AddNewAccountCard>
-      {dataValues.map((item, index) => {
-        return (
-          <ExchangeAccount
-            key={index}
-            platform={item.platform}
-            title={item.title}
-            status={item.status}
-            data={item.data}
-            onClick={() => alert('Card is clicked!')}
-            onDelete={() => alert('Card is deleted!')}
-            pieChartProps={{
-              className: cssClassname`
-                align-self: center;
-                max-width: 300px;
-              `,
-            }}
-          />
-        );
-      })}
-    </div>
-  );
-};
-
-List.args = {};