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

package/src/components/ExchangeAccount/ExchangeAccount.tsx

@@ -1,90 +0,0 @@
-import { css } from '@emotion/css';
-import { useTheme } from '@emotion/react';
-import {
-  Button,
-  CardBase,
-  CardContent,
-  CardHeader,
-  Icon,
-  Typography,
-  WithLink,
-} from '@ssa-ui-kit/core';
-import { BalancePieChart } from '@components/AccountBalance';
-import { ExchangeAccountProps } from './types';
-import * as S from './styles';
-
-export const ExchangeAccount = ({
-  platform,
-  title,
-  status,
-  link,
-  data,
-  pieChartProps,
-  onClick,
-  onDelete,
-}: ExchangeAccountProps) => {
-  const theme = useTheme();
-  const isActive = status === 'Active';
-  const handleClickDelete = (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-    event.stopPropagation();
-    onDelete();
-  };
-
-  return (
-    <WithLink link={link} onClick={onClick}>
-      <CardBase
-        noShadow
-        css={S.CardBase}
-        data-testid="card"
-        onClick={link ? undefined : onClick}>
-        <CardHeader css={S.CardHeader}>
-          <Typography
-            variant="subtitle"
-            weight="bold"
-            color={theme.colors.greyDarker}
-            css={S.Platform}>
-            {platform}
-          </Typography>
-          <Typography
-            color={theme.colors.greyDropdownFocused}
-            variant="subtitle"
-            weight="regular">
-            {title}
-          </Typography>
-          <Button css={S.RemoveButton} onClick={(e) => handleClickDelete(e)}>
-            <Icon
-              name="bin"
-              color={theme.colors.greyDropdownFocused}
-              size={20}
-            />
-          </Button>
-        </CardHeader>
-        <Typography
-          css={S.Status}
-          className={isActive ? 'active' : 'not-available'}
-          variant="body1"
-          weight="regular">
-          {isActive ? status : 'Not available'}
-        </Typography>
-        <CardContent css={S.CardContent} direction="column">
-          <BalancePieChart
-            theme={theme}
-            pieChartProps={{
-              className: css`
-                ${theme.mediaQueries.md} {
-                  flex-direction: row;
-                }
-                ${theme.mediaQueries.lg} {
-                  flex-direction: column;
-                }
-              `,
-              ...pieChartProps,
-            }}
-            {...data}
-          />
-        </CardContent>
-      </CardBase>
-    </WithLink>
-  );
-};

package/src/components/ExchangeAccount/helpers.tsx

@@ -1,153 +0,0 @@
-import React from 'react';
-import { Icon } from '@ssa-ui-kit/core';
-import { ExchangeAccountProps } from './types';
-
-export const dataValues: Array<
-  Omit<ExchangeAccountProps, 'onClick' | 'onDelete'>
-> = [
-  {
-    platform: (
-      <React.Fragment>
-        <Icon name="stats" color="#EFC938" size={20} />
-        Binance
-      </React.Fragment>
-    ),
-    title: 'Account Name',
-    status: 'Active',
-    data: {
-      total: 48000.53,
-      currency: 'USDT',
-      data: [
-        {
-          id: 'BTC',
-          label: 'BTC',
-          legendValue: 1,
-          value: 5371.23,
-        },
-        {
-          id: 'LTC',
-          label: 'LTC',
-          legendValue: 7,
-          value: 5300.25,
-        },
-        {
-          id: 'ETH',
-          label: 'ETH',
-          legendValue: 1,
-          value: 1815.31,
-        },
-        {
-          id: 'Other',
-          label: 'Other',
-          legendValue: 943,
-          value: 1513.9956,
-        },
-      ],
-    },
-  },
-  {
-    platform: 'Binance',
-    title: 'Name#2',
-    status: 'NotAvailable',
-    data: {
-      total: 4800.53,
-      currency: 'USDT',
-      data: [
-        {
-          id: 'BTC',
-          label: 'BTC',
-          legendValue: 100,
-          value: 2371.23,
-        },
-        {
-          id: 'LTC',
-          label: 'LTC',
-          legendValue: 52,
-          value: 5300.25,
-        },
-        {
-          id: 'ETH',
-          label: 'ETH',
-          legendValue: 86,
-          value: 3815.31,
-        },
-        {
-          id: 'Other',
-          label: 'Other',
-          legendValue: 943,
-          value: 1513.9956,
-        },
-      ],
-    },
-  },
-  {
-    platform: 'Binance',
-    title: 'Name#3',
-    status: 'NotAvailable',
-    data: {
-      total: 10000.53,
-      currency: 'USDT',
-      data: [
-        {
-          id: 'BTC',
-          label: 'BTC',
-          legendValue: 95,
-          value: 1371.23,
-        },
-        {
-          id: 'LTC',
-          label: 'LTC',
-          legendValue: 7,
-          value: 8300.25,
-        },
-        {
-          id: 'ETH',
-          label: 'ETH',
-          legendValue: 6,
-          value: 4815.31,
-        },
-        {
-          id: 'Other',
-          label: 'Other',
-          legendValue: 943,
-          value: 3513.9956,
-        },
-      ],
-    },
-  },
-  {
-    platform: 'Binance',
-    title: 'Name#4',
-    status: 'Active',
-    data: {
-      total: 9000.53,
-      currency: 'USDT',
-      data: [
-        {
-          id: 'BTC',
-          label: 'BTC',
-          legendValue: 10,
-          value: 5371.23,
-        },
-        {
-          id: 'LTC',
-          label: 'LTC',
-          legendValue: 7,
-          value: 5300.25,
-        },
-        {
-          id: 'ETH',
-          label: 'ETH',
-          legendValue: 1,
-          value: 7815.31,
-        },
-        {
-          id: 'Other',
-          label: 'Other',
-          legendValue: 943,
-          value: 5513.9956,
-        },
-      ],
-    },
-  },
-];

package/src/components/ExchangeAccount/index.ts

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

package/src/components/ExchangeAccount/styles.ts

@@ -1,115 +0,0 @@
-import { Theme, css } from '@emotion/react';
-
-export const CardBase = (theme: Theme) => css`
-  padding: 0;
-  border-radius: 20px;
-  box-shadow: 0px 10px 40px 0px ${theme.colors.greyShadow};
-  transition: 0.3s;
-
-  &:hover {
-    box-shadow: 5px 5px 20px 0px ${theme.colors.black25};
-  }
-`;
-
-export const CardHeader = (theme: Theme) => css`
-  display: grid;
-  grid-template-columns: auto 1fr 20px;
-  align-items: center;
-  width: 100%;
-  padding: 10px;
-  border-radius: 20px 20px 0 0;
-  background: ${theme.colors.greyLighter};
-  margin-bottom: 0;
-
-  ${theme.mediaQueries.md} {
-    h6 {
-      font-size: 16px;
-      line-height: 24px;
-    }
-  }
-
-  ${theme.mediaQueries.xs} {
-    padding: 6px 10px;
-  }
-`;
-
-export const RemoveButton = (theme: Theme) => css`
-  height: auto;
-  padding: 0;
-  background: none;
-  box-shadow: none;
-
-  &:hover,
-  &:focus {
-    background: none;
-    box-shadow: none;
-  }
-
-  &:hover {
-    svg path {
-      fill: ${theme.colors.greyDarker};
-    }
-  }
-`;
-
-export const Platform = css`
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  margin-right: 13px;
-`;
-
-export const Status = (theme: Theme) => css`
-  width: 100%;
-  text-align: center;
-  padding: 4px;
-
-  &.active {
-    color: ${theme.colors.greenDark};
-    background: ${theme.colors.greenMint};
-  }
-
-  &.not-available {
-    color: ${theme.colors.red};
-    background: ${theme.colors.redLighter40};
-  }
-
-  ${theme.mediaQueries.md} {
-    font-size: 14px;
-    line-height: 17px;
-  }
-`;
-
-export const CardContent = (theme: Theme) => css`
-  width: 100%;
-  padding: 10px 20px;
-  & > div {
-    flex-direction: row;
-  }
-
-  ul:last-child {
-    li {
-      justify-content: flex-end;
-      text-align: right;
-    }
-  }
-
-  ${theme.mediaQueries.sm} {
-    & > div {
-      justify-content: space-around;
-    }
-  }
-
-  ${theme.mediaQueries.md} {
-    justify-content: space-around;
-    & > div {
-      flex-direction: column;
-    }
-  }
-
-  ${theme.mediaQueries.lg} {
-    & > div {
-      flex-direction: row;
-    }
-  }
-`;

package/src/components/ExchangeAccount/types.ts

@@ -1,14 +0,0 @@
-import { To } from 'react-router-dom';
-import { PieChartProps } from '@ssa-ui-kit/core';
-import { AccountBalanceProps } from '@components/AccountBalance';
-
-export interface ExchangeAccountProps {
-  platform: string | JSX.Element;
-  title: string;
-  status: 'Active' | 'NotAvailable';
-  onClick?: () => void;
-  onDelete: () => void;
-  link?: To;
-  data: Omit<AccountBalanceProps, 'title' | 'className' | 'onClick' | 'link'>;
-  pieChartProps?: Partial<PieChartProps>;
-}

package/src/components/HeartRate/BPM.tsx

@@ -1,43 +0,0 @@
-import styled from '@emotion/styled';
-import { Theme, useTheme } from '@emotion/react';
-import { css } from '@emotion/react';
-import { BMPProps } from './types';
-
-const BPMBase = styled.div`
-  text-align: center;
-  margin-top: 23px;
-`;
-
-const BPMValueStyles = css`
-  font-weight: 700;
-  font-size: 1.728rem; /* 27.65px */
-  line-height: 2rem; /* 32px */
-
-  @media (max-width: 900px) {
-    font-size: 1.2rem; /* 19.2px */
-    line-height: 1.639; /* 26.23px */
-  }
-`;
-
-const getBPMLabelStyles = (theme: Theme) => css`
-  color: ${theme.colors.greyDarker60};
-  font-weight: 600;
-  font-size: 1rem; /* 16px */
-  line-height: 1.5rem; /* 24px */
-  margin-left: 4px;
-
-  @media (max-width: 900px) {
-    font-size: 0.833rem; /* 13.33px */
-    line-height: 1.375; /* 22px */
-  }
-`;
-
-export const BPM = ({ value }: BMPProps) => {
-  const theme = useTheme();
-  return (
-    <BPMBase>
-      <span css={BPMValueStyles}>{value}</span>
-      <span css={getBPMLabelStyles(theme)}>BPM</span>
-    </BPMBase>
-  );
-};

package/src/components/HeartRate/HeartRate.e2e.ts

@@ -1,78 +0,0 @@
-import { test, expect, Page } from '@playwright/test';
-import { SCREEN_SIZES } from '../../consts';
-
-const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
-const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-heart-rate--hint-opened__`;
-
-const MOUSE_POSITIONS = {
-  390: [
-    { x: 97, y: 122 },
-    { x: 97, y: 122 },
-  ],
-  900: [
-    { x: 215, y: 123 },
-    { x: 212, y: 123 },
-  ],
-  1440: [
-    { x: 334, y: 123 },
-    { x: 337, y: 123 },
-  ],
-  1920: [
-    { x: 453, y: 125 },
-    { x: 450, y: 125 },
-  ],
-};
-
-const gotoPage = (page: Page) => {
-  return page.goto(
-    'http://localhost:6007/iframe.html?args=&id=fitness-heartrate--default&viewMode=story',
-  );
-};
-
-const waitForImg = (page: Page) => {
-  return page.getByRole('img', { name: 'Heart' }).waitFor();
-};
-
-/**
- * The BPM value is always different on screenshots.
- * That's why we ignore it to avoid re-approving every time.
- * */
-const replaceBPMValue = (page: Page) => {
-  return page
-    .locator('span[class*="BPMValueStyles"]')
-    .evaluate((element: HTMLSpanElement) => (element.textContent = 'N'));
-};
-
-test.describe('Industry Specific Widgets - Fitness - HeartRate', () => {
-  test('Renders correctly', async ({ page }) => {
-    await gotoPage(page);
-    await expect(
-      page.getByRole('heading', { name: 'Heart Rate' }),
-    ).toBeVisible();
-  });
-
-  for (const resolution of Object.keys(SCREEN_SIZES)) {
-    const viewportSize =
-      SCREEN_SIZES[resolution as unknown as keyof typeof SCREEN_SIZES];
-    const mouseMoves =
-      MOUSE_POSITIONS[resolution as unknown as keyof typeof SCREEN_SIZES];
-
-    if (mouseMoves == null) {
-      throw new Error(
-        `No mouse move for the specified resolution "${resolution}" found`,
-      );
-    }
-
-    test(`[${resolution}] Tooltip is shown`, async ({ page }) => {
-      await page.setViewportSize(viewportSize);
-      await gotoPage(page);
-      for (const { x, y } of mouseMoves) {
-        await page.mouse.move(x, y);
-      }
-      await Promise.all([replaceBPMValue(page), waitForImg(page)]);
-      await page.screenshot({
-        path: `${SCREENSHOT_PREFIX}[w${resolution}px].png`,
-      });
-    });
-  }
-});

package/src/components/HeartRate/HeartRate.specBackup.tsx

@@ -1,91 +0,0 @@
-import userEvent from '@testing-library/user-event';
-import { waitFor } from '@testing-library/react';
-
-import { heartRateData as data } from './mockHeartRateRequest';
-
-import { HeartRate } from './index';
-
-/**
- * The Line charts have trouble rendering in the test suite (some issues with
- * the ResizeObserver).
- * As a temporal solution, we follow Kent's advice not to test charts
- * with Jest:
- * https://kentcdodds.com/calls/01/76/nivo-charts-issue
- * */
-const HeartRateLineChartMock = ({
-  onMouseMove,
-  colors,
-}: {
-  onMouseMove: (p: { data: { y: number } }) => void;
-  colors?: string;
-}) => (
-  <div
-    data-testid="chart-mock"
-    css={{ color: colors }}
-    onMouseMove={() => {
-      onMouseMove({ data: { y: 170 } });
-    }}></div>
-);
-
-jest.mock('./HeartRateLineChart', () => ({
-  HeartRateLineChart: HeartRateLineChartMock,
-}));
-
-function setup(component: React.ReactElement) {
-  return {
-    user: userEvent.setup(),
-    ...render(component),
-  };
-}
-
-describe('HeartRate', () => {
-  it('Renders and reacts to mouse events', async () => {
-    const { getByText, getByTestId } = setup(<HeartRate data={data} />);
-
-    getByText('Heart Rate');
-    getByText(data.data[0].y);
-    getByText('BPM');
-    const chartEl = getByTestId('chart-mock');
-
-    await userEvent.hover(chartEl);
-
-    await waitFor(() => {
-      getByText(170);
-    });
-  });
-
-  it('Renders with a custom color', () => {
-    const chartColor = 'orange';
-    const { getByTestId } = setup(<HeartRate data={data} color={chartColor} />);
-
-    // Since we don't render the real <HeartRateLineChart /> component, we
-    // just check here that we pass the "colors" prop into its mock.
-    const chartEl = getByTestId('chart-mock');
-    expect(chartEl).toHaveStyle(`color: ${chartColor}`);
-  });
-
-  it('Renders with a custom caption', () => {
-    const caption = 'A custom caption';
-    const { getByText, queryByText } = setup(
-      <HeartRate data={data} caption={caption} />,
-    );
-
-    expect(queryByText('Heart Rate')).not.toBeInTheDocument();
-    getByText(caption);
-  });
-
-  it('Handle empty data', () => {
-    const caption = 'A custom caption';
-
-    const { getByText, queryByText } = setup(
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      <HeartRate data={null} caption={caption} />,
-    );
-
-    expect(queryByText('Heart Rate')).not.toBeInTheDocument();
-    expect(queryByText('BPM')).not.toBeInTheDocument();
-
-    getByText(caption);
-  });
-});

package/src/components/HeartRate/HeartRate.stories.tsx

@@ -1,36 +0,0 @@
-import type { Meta } from '@storybook/react';
-import '@storybook/types';
-
-import { HeartRate } from './index';
-import { heartRateData as data } from './mockHeartRateRequest';
-
-export default {
-  title: 'Fitness/HeartRate',
-  component: HeartRate,
-  argTypes: {
-    color: {
-      table: {
-        type: {
-          summary: 'string',
-        },
-      },
-      options: [
-        'pink',
-        'yellow',
-        'green',
-        'turquoise',
-        'purple',
-        'blueLight',
-        'blue',
-      ],
-      control: {
-        type: 'select',
-      },
-    },
-  },
-  args: {
-    data,
-  },
-} as Meta<typeof HeartRate>;
-
-export const Default = {};