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

package/src/components/TradingInfoCard/TradingInfoCard.specBackup.tsx

@@ -1,116 +0,0 @@
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import userEvent from '@testing-library/user-event';
-import { screen, waitFor } from '../../../customTest';
-
-import { Icon } from '@ssa-ui-kit/core';
-import TradingInfoCard from './TradingInfoCard';
-
-describe('TradingInfoCard', () => {
-  it('Renders with value and title', () => {
-    render(<TradingInfoCard value={'400'} unit={'%'} title={'Title'} />);
-
-    screen.getByText('400');
-    screen.getByText('Title');
-  });
-
-  it('Renders with value, title, and unit', () => {
-    render(<TradingInfoCard value={'400'} unit={'%'} title={'Title'} />);
-
-    screen.getByText('400');
-    screen.getByText('%');
-    screen.getByText('Title');
-  });
-
-  it('Renders with value, title, unit, and icon', async () => {
-    render(
-      <TradingInfoCard
-        value={'400'}
-        unit={'%'}
-        title={'Title'}
-        icon={<Icon name="arrow-up" color="#2CA24D" size={16} />}
-      />,
-    );
-
-    screen.getByText('400');
-    screen.getByText('%');
-    screen.getByText('Title');
-
-    await screen.findByTitle(/Arrow Up/i);
-  });
-
-  it('Renders with an integer value (no tooltip)', async () => {
-    const { queryByTestId } = render(
-      <TradingInfoCard value={400} title={'Title'} />,
-    );
-
-    screen.getByText('400');
-    await waitFor(() =>
-      expect(queryByTestId('floating-arrow')).not.toBeInTheDocument(),
-    );
-  });
-
-  it('Renders with a non-numeric value (no tooltip)', async () => {
-    const { queryByTestId } = render(
-      <TradingInfoCard value={'Test'} title={'Title'} />,
-    );
-
-    screen.getByText('Test');
-    await waitFor(() =>
-      expect(queryByTestId('floating-arrow')).not.toBeInTheDocument(),
-    );
-  });
-
-  it('Renders with a numeric value (tooltip) ', async () => {
-    const user = userEvent.setup();
-    const { getByTestId, queryByTestId, findByTestId } = render(
-      <TradingInfoCard value={400.5} title={'Title'} />,
-    );
-
-    const tooltipEl = getByTestId('tooltip-trigger');
-
-    await user.hover(tooltipEl);
-    await findByTestId('floating-arrow');
-
-    await user.unhover(tooltipEl);
-    await waitFor(() =>
-      expect(queryByTestId('floating-arrow')).not.toBeInTheDocument(),
-    );
-  });
-
-  it('Calls onClick handler when clicked', async () => {
-    const user = userEvent.setup();
-    const mockOnClick = jest.fn();
-
-    const { getByRole } = render(
-      <TradingInfoCard
-        value={'400.500'}
-        title={'Title'}
-        onClick={mockOnClick}
-      />,
-    );
-
-    const button = getByRole('button');
-
-    await user.click(button);
-
-    expect(mockOnClick).toBeCalledTimes(1);
-    expect(button).toHaveAttribute('tabindex', '0');
-  });
-
-  it('Renders with link prop', () => {
-    const { getByRole } = render(
-      <MemoryRouter>
-        <Routes>
-          <Route
-            path="/*"
-            element={
-              <TradingInfoCard value={'5000'} title={'Test'} link={'/'} />
-            }
-          />
-        </Routes>
-      </MemoryRouter>,
-    );
-
-    expect(getByRole('link')).toHaveAttribute('href', '/');
-  });
-});

package/src/components/TradingInfoCard/TradingInfoCard.stories.tsx

@@ -1,118 +0,0 @@
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Icon } from '@ssa-ui-kit/core';
-import TradingInfoCard from './TradingInfoCard';
-import { TradingInfoCardProps } from './types';
-
-export default {
-  title: 'Trading/TradingInfoCard',
-  component: TradingInfoCard,
-} as Meta<typeof TradingInfoCard>;
-
-export const Default: StoryObj<typeof TradingInfoCard> = (
-  args: TradingInfoCardProps,
-) => {
-  return (
-    <TradingInfoCard
-      value={args.value}
-      unit={args.unit}
-      title={args.title}
-      icon={args.icon}
-      onClick={() => alert('clicked!')}
-    />
-  );
-};
-
-Default.args = {
-  value: 500.55,
-  unit: 'USD',
-  title: 'Turnover',
-};
-
-export const WithLink: StoryObj<typeof TradingInfoCard> = (
-  args: TradingInfoCardProps,
-) => {
-  return (
-    <MemoryRouter>
-      <Routes>
-        <Route
-          path="/*"
-          element={
-            <TradingInfoCard
-              value={args.value}
-              unit={args.unit}
-              title={args.title}
-              icon={args.icon}
-              link={'/link'}
-            />
-          }
-        />
-      </Routes>
-    </MemoryRouter>
-  );
-};
-
-WithLink.args = {
-  value: '500',
-  unit: 'USD',
-  title: 'Turnover',
-};
-
-export const WithTooltip: StoryObj<typeof TradingInfoCard> = (
-  args: TradingInfoCardProps,
-) => {
-  return (
-    <TradingInfoCard
-      value={args.value}
-      unit={args.unit}
-      title={args.title}
-      icon={args.icon}
-      onClick={() => alert('clicked!')}
-    />
-  );
-};
-
-WithTooltip.args = {
-  value: '500.025',
-  unit: 'USD',
-  title: 'Turnover',
-};
-
-export const WithIcon: StoryObj<typeof TradingInfoCard> = (
-  args: TradingInfoCardProps,
-) => {
-  return (
-    <TradingInfoCard
-      value={args.value}
-      unit={args.unit}
-      title={args.title}
-      icon={args.icon}
-      onClick={() => alert('clicked!')}
-    />
-  );
-};
-
-WithIcon.args = {
-  value: '500.025',
-  unit: 'USD',
-  title: 'Turnover',
-  icon: <Icon name="arrow-up" color="#2CA24D" size={16} />,
-};
-
-export const WithoutUnit: StoryObj<typeof TradingInfoCard> = (
-  args: TradingInfoCardProps,
-) => {
-  return (
-    <TradingInfoCard
-      value={args.value}
-      unit={args.unit}
-      title={args.title}
-      icon={args.icon}
-    />
-  );
-};
-
-WithoutUnit.args = {
-  value: 'ETH/USDT',
-  title: 'Pairs',
-};

package/src/components/TradingInfoCard/TradingInfoCard.tsx

@@ -1,49 +0,0 @@
-import { CardContent, Typography } from '@ssa-ui-kit/core';
-
-import TradingInfoCardContent from './TradingInfoCardContent';
-import TradingInfoCardTooltip from './TradingInfoCardTooltip';
-import TradingInfoCardWrapper from './TradingInfoCardWrapper';
-import { TradingInfoCardProps } from './types';
-
-const TradingInfoCardView = ({
-  value,
-  unit,
-  title,
-  icon,
-  link,
-  onClick,
-}: TradingInfoCardProps) => {
-  const number = Number(value);
-  const currentValue = Number.isNaN(number)
-    ? value
-    : number.toFixed(1).includes('.0')
-    ? Math.floor(number)
-    : number.toFixed(1);
-
-  return (
-    <TradingInfoCardWrapper onClick={onClick} link={link}>
-      <TradingInfoCardContent value={currentValue} unit={unit} icon={icon} />
-      <CardContent>
-        <Typography css={{ fontSize: '12px' }}>{title}</Typography>
-      </CardContent>
-    </TradingInfoCardWrapper>
-  );
-};
-
-const TradingInfoCard = (props: TradingInfoCardProps) => {
-  const { value, unit } = props;
-  const number = Number(value);
-  const isInteger = Number.isInteger(number);
-
-  if (isInteger || Number.isNaN(number)) {
-    return <TradingInfoCardView {...props} />;
-  } else {
-    return (
-      <TradingInfoCardTooltip trigger={<TradingInfoCardView {...props} />}>
-        {value} {unit}
-      </TradingInfoCardTooltip>
-    );
-  }
-};
-
-export default TradingInfoCard;

package/src/components/TradingInfoCard/TradingInfoCardContent.tsx

@@ -1,32 +0,0 @@
-import { useTheme } from '@emotion/react';
-import { CardContent, Typography } from '@ssa-ui-kit/core';
-
-import { TradingInfoContent } from './types';
-
-const TradingInfoCardContent = ({ value, unit, icon }: TradingInfoContent) => {
-  const theme = useTheme();
-  return (
-    <CardContent
-      css={{
-        justifyContent: 'flex-start',
-        alignItems: 'baseline',
-        gap: '2px',
-      }}>
-      <Typography variant="h5" weight="bold" color={theme.colors.greyDarker}>
-        {value}
-      </Typography>
-      {unit ? (
-        <Typography data-testid="unit" variant="h6" weight="lighter">
-          {unit}
-        </Typography>
-      ) : null}
-      {icon ? (
-        <div css={{ display: 'flex', alignSelf: 'center', marginLeft: '3px' }}>
-          {icon}
-        </div>
-      ) : null}
-    </CardContent>
-  );
-};
-
-export default TradingInfoCardContent;

package/src/components/TradingInfoCard/TradingInfoCardTooltip.tsx

@@ -1,47 +0,0 @@
-import { css, useTheme } from '@emotion/react';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-  Typography,
-} from '@ssa-ui-kit/core';
-
-import { TradingInfoCardTooltipProps } from './types';
-
-const TradingInfoCardTooltip = ({
-  trigger,
-  children,
-}: TradingInfoCardTooltipProps) => {
-  const theme = useTheme();
-  return (
-    <Tooltip
-      offsetOptions={0}
-      enableHover={true}
-      enableClick={false}
-      arrowProps={{
-        width: 18,
-        height: 3,
-        fill: theme.colors.greyGraphite,
-      }}>
-      <TooltipTrigger>
-        <div data-testid="tooltip-trigger">{trigger}</div>
-      </TooltipTrigger>
-      <TooltipContent
-        css={css`
-          padding: 4px 5px;
-          border-radius: 2px;
-          background: ${theme.colors.greyGraphite};
-
-          svg {
-            margin-bottom: -1px;
-          }
-        `}>
-        <Typography css={{ fontSize: '12px' }} color={theme.colors.white}>
-          {children}
-        </Typography>
-      </TooltipContent>
-    </Tooltip>
-  );
-};
-
-export default TradingInfoCardTooltip;

package/src/components/TradingInfoCard/TradingInfoCardWrapper.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { Theme, css } from '@emotion/react';
-import { CardBase } from '@ssa-ui-kit/core';
-import { TradingInfoCardWrapperProps } from './types';
-
-const infoCardWrapper = (theme: Theme) => css`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  width: max-content;
-  min-width: 100%;
-  background: ${theme.colors.greyLighter};
-  padding: 4px 10px;
-  border-radius: 6px;
-  text-decoration: none;
-  cursor: pointer;
-  white-space: nowrap;
-  box-shadow: none;
-  user-select: none;
-
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    width: 100%;
-    height: 100%;
-    box-shadow: 0 10px 40px 0 ${theme.colors.greyShadow};
-    content: '';
-  }
-
-  &:active {
-    background: ${theme.colors.white};
-
-    &::before {
-      border-radius: 6px;
-      box-shadow: 0 10px 40px 0 ${theme.colors.greyShadow24};
-    }
-  }
-`;
-
-const TradingInfoCardWrapper = ({
-  onClick,
-  link,
-  children,
-}: TradingInfoCardWrapperProps) => {
-  return (
-    <React.Fragment>
-      {link ? (
-        <Link to={link} css={infoCardWrapper}>
-          {children}
-        </Link>
-      ) : (
-        <CardBase
-          role={onClick ? 'button' : 'region'}
-          tabIndex={onClick ? 0 : -1}
-          onClick={() => {
-            if (typeof onClick === 'function') {
-              onClick();
-            }
-          }}
-          css={infoCardWrapper}>
-          {children}
-        </CardBase>
-      )}
-    </React.Fragment>
-  );
-};
-
-export default TradingInfoCardWrapper;

package/src/components/TradingInfoCard/index.ts

@@ -1,3 +0,0 @@
-export { default as TradingInfoCard } from './TradingInfoCard';
-export * from './types';
-export * from './TradingInfoCardTooltip';

package/src/components/TradingInfoCard/types.ts

@@ -1,27 +0,0 @@
-import React from 'react';
-
-export interface TradingInfoCardProps {
-  value: React.ReactNode;
-  title: string;
-  unit?: string;
-  icon?: React.ReactNode;
-  onClick?: () => void;
-  link?: string;
-}
-
-export type TradingInfoContent = Pick<
-  TradingInfoCardProps,
-  'value' | 'unit' | 'icon'
->;
-
-export type TradingInfoCardWrapperProps = Pick<
-  TradingInfoCardProps,
-  'onClick' | 'link'
-> & {
-  children?: React.ReactNode;
-};
-
-export interface TradingInfoCardTooltipProps {
-  trigger: string | number | JSX.Element;
-  children: React.ReactNode;
-}

package/src/components/TradingScoreboard/TradingScoreboard.specBackup.tsx

@@ -1,119 +0,0 @@
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import userEvent from '@testing-library/user-event';
-import { Button } from '@ssa-ui-kit/core';
-import TradingScoreboard from './TradingScoreboard';
-import { defaultBoardArr, linkBoardArr } from './helpers';
-
-describe('TradingScoreboard', () => {
-  it('Renders all items', () => {
-    const { getAllByRole, getByRole } = render(
-      <TradingScoreboard
-        itemsPerRow={5}
-        items={defaultBoardArr}
-        onClick={(item) => item}
-      />,
-    );
-    const itemsEls = getAllByRole('button');
-    expect(itemsEls.length).toBe(defaultBoardArr.length);
-
-    for (const item of defaultBoardArr) {
-      getByRole('button', { name: new RegExp(item.title, 'i') });
-    }
-  });
-
-  it('Renders with Render Prop', () => {
-    const { getAllByTestId } = render(
-      <TradingScoreboard
-        itemsPerRow={5}
-        items={defaultBoardArr}
-        renderCard={(item) => (
-          <Button data-testid="trading-board">
-            <span>
-              {item.value} {item.unit}
-            </span>
-            <span>{item.title}</span>
-          </Button>
-        )}
-      />,
-    );
-    const itemsEls = getAllByTestId('trading-board');
-    expect(itemsEls.length).toBe(defaultBoardArr.length);
-
-    for (let i = 0; i < itemsEls.length; i++) {
-      expect(itemsEls[i]).toHaveTextContent(defaultBoardArr[i].title);
-    }
-  });
-
-  it('Calls onClick handlers when clicked', async () => {
-    const user = userEvent.setup();
-    const mockOnClick = jest.fn();
-
-    const { getByRole } = render(
-      <TradingScoreboard
-        itemsPerRow={5}
-        items={defaultBoardArr}
-        onClick={mockOnClick}
-      />,
-    );
-
-    for (const item of defaultBoardArr) {
-      const buttonEl = getByRole('button', {
-        name: new RegExp(item.title, 'i'),
-      });
-      await user.click(buttonEl);
-      expect(mockOnClick).toHaveBeenCalledWith(item);
-    }
-
-    expect(mockOnClick).toBeCalledTimes(defaultBoardArr.length);
-  });
-
-  it('Renders with link prop', () => {
-    const { getByRole } = render(
-      <MemoryRouter>
-        <Routes>
-          <Route
-            path="/*"
-            element={<TradingScoreboard itemsPerRow={5} items={linkBoardArr} />}
-          />
-        </Routes>
-      </MemoryRouter>,
-    );
-
-    for (const item of linkBoardArr) {
-      getByRole('link', { name: new RegExp(item.title, 'i') });
-    }
-  });
-
-  it('Calls onClick handlers with render prop when clicked', async () => {
-    const user = userEvent.setup();
-    const mockOnClick = jest.fn();
-
-    const { getAllByTestId } = render(
-      <TradingScoreboard
-        itemsPerRow={5}
-        items={defaultBoardArr}
-        onClick={mockOnClick}
-        renderCard={(item, onClick) => (
-          <Button data-testid="trading-board" onClick={() => onClick?.(item)}>
-            <span>
-              {item.value} {item.unit}
-            </span>
-            <span>
-              {item.title} {item.icon}
-            </span>
-          </Button>
-        )}
-      />,
-    );
-
-    const itemsEls = getAllByTestId('trading-board');
-    expect(itemsEls.length).toBe(defaultBoardArr.length);
-
-    for (let i = 0; i < itemsEls.length; i++) {
-      await user.click(itemsEls[i]);
-      expect(mockOnClick).toHaveBeenCalledWith(defaultBoardArr[i]);
-    }
-
-    expect(mockOnClick).toBeCalledTimes(defaultBoardArr.length);
-  });
-});

package/src/components/TradingScoreboard/TradingScoreboard.stories.tsx

@@ -1,119 +0,0 @@
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import type { Meta, StoryObj } from '@storybook/react';
-import { css } from '@emotion/react';
-import { Button } from '@ssa-ui-kit/core';
-import TradingScoreboard from './TradingScoreboard';
-import { TradingScoreboardProps } from './types';
-import { defaultBoardArr, linkBoardArr, oneLineBoardArr } from './helpers';
-
-export default {
-  title: 'Trading/TradingScoreboard',
-  component: TradingScoreboard,
-} as Meta<typeof TradingScoreboard>;
-
-export const Default: StoryObj<typeof TradingScoreboard> = (
-  args: TradingScoreboardProps,
-) => {
-  return (
-    <TradingScoreboard
-      items={args.items}
-      itemsPerRow={args.itemsPerRow}
-      onClick={() => alert('clicked!')}
-      css={css`
-        gap: 4px;
-      `}
-    />
-  );
-};
-
-Default.args = {
-  itemsPerRow: 5,
-  items: defaultBoardArr,
-};
-
-export const OneLine: StoryObj<typeof TradingScoreboard> = (
-  args: TradingScoreboardProps,
-) => {
-  return (
-    <TradingScoreboard
-      items={args.items}
-      itemsPerRow={args.itemsPerRow}
-      onClick={() => alert('clicked!')}
-      css={css`
-        gap: 4px;
-      `}
-    />
-  );
-};
-
-OneLine.args = {
-  itemsPerRow: 7,
-  items: oneLineBoardArr,
-};
-
-export const WithCustomComponent: StoryObj<typeof TradingScoreboard> = (
-  args: TradingScoreboardProps,
-) => {
-  return (
-    <TradingScoreboard
-      items={args.items}
-      itemsPerRow={args.itemsPerRow}
-      renderCard={(item, onClick) => (
-        <Button
-          css={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'flex-start',
-            width: '100%',
-            height: 'auto',
-            padding: '10px',
-            boxShadow: 'none',
-          }}
-          variant="secondary"
-          onClick={() => onClick?.(item)}>
-          <span css={{ fontWeight: '600' }}>
-            {item.value} {item.unit}
-          </span>
-          <span>{item.title}</span>
-        </Button>
-      )}
-      css={css`
-        gap: 4px;
-        color: white;
-      `}
-    />
-  );
-};
-
-WithCustomComponent.args = {
-  itemsPerRow: 7,
-  items: oneLineBoardArr,
-};
-
-export const WithLink: StoryObj<typeof TradingScoreboard> = (
-  args: TradingScoreboardProps,
-) => {
-  return (
-    <MemoryRouter>
-      <Routes>
-        <Route
-          path={'/*'}
-          element={
-            <TradingScoreboard
-              items={args.items}
-              itemsPerRow={args.itemsPerRow}
-              css={css`
-                gap: 4px;
-              `}
-            />
-          }
-        />
-      </Routes>
-    </MemoryRouter>
-  );
-};
-
-WithLink.args = {
-  itemsPerRow: 7,
-  items: linkBoardArr,
-};