@ssa-ui-kit/widgets 0.0.1-alpha

package/src/components/TradingInfoCard/TradingInfoCard.tsx

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

package/src/components/TradingInfoCard/TradingInfoCardContent.tsx

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

@@ -0,0 +1,47 @@
+import { css, useTheme } from '@emotion/react';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  Typography,
+} from '@ssa-ui-kit/core';
+
+import { ITradingInfoCardTooltipProps } from './types';
+
+const TradingInfoCardTooltip = ({
+  trigger,
+  children,
+}: ITradingInfoCardTooltipProps) => {
+  const theme = useTheme();
+  return (
+    <Tooltip
+      offsetPx={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

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Theme, css } from '@emotion/react';
+import { CardBase } from '@ssa-ui-kit/core';
+import { ITradingInfoCardWrapperProps } 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,
+}: ITradingInfoCardWrapperProps) => {
+  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

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

package/src/components/TradingInfoCard/types.ts

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

package/src/components/TradingScoreboard/TradingScoreboard.spec.tsx

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

@@ -0,0 +1,119 @@
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { Meta, StoryObj } from '@storybook/react';
+import { css } from '@emotion/react';
+import { Button } from '@ssa-ui-kit/core';
+import TradingScoreboard from './TradingScoreboard';
+import { ITradingScoreboardProps } from './types';
+import { defaultBoardArr, linkBoardArr, oneLineBoardArr } from './helpers';
+
+export default {
+  title: 'Widgets/TradingScoreboard',
+  component: TradingScoreboard,
+} as Meta<typeof TradingScoreboard>;
+
+export const Default: StoryObj<typeof TradingScoreboard> = (
+  args: ITradingScoreboardProps,
+) => {
+  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: ITradingScoreboardProps,
+) => {
+  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: ITradingScoreboardProps,
+) => {
+  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: ITradingScoreboardProps,
+) => {
+  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,
+};

package/src/components/TradingScoreboard/TradingScoreboard.tsx

@@ -0,0 +1,41 @@
+import { TradingInfoCard } from '@components/TradingInfoCard';
+import TradingScoreboardBase from './TradingScoreboardBase';
+import { ITradingScoreboardProps } from './types';
+
+const TradingScoreboard = ({
+  items,
+  onClick,
+  renderCard,
+  ...props
+}: ITradingScoreboardProps) => {
+  return (
+    <div>
+      <TradingScoreboardBase {...props}>
+        {items.map((item, index) => {
+          return (
+            <div key={index}>
+              {typeof renderCard === 'function' ? (
+                renderCard(item, onClick)
+              ) : (
+                <TradingInfoCard
+                  value={item.value}
+                  unit={item.unit}
+                  title={item.title}
+                  icon={item.icon}
+                  link={item.link}
+                  onClick={() => {
+                    if (typeof onClick === 'function') {
+                      onClick(item);
+                    }
+                  }}
+                />
+              )}
+            </div>
+          );
+        })}
+      </TradingScoreboardBase>
+    </div>
+  );
+};
+
+export default TradingScoreboard;

package/src/components/TradingScoreboard/TradingScoreboardBase.tsx

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+const TradingScoreboardBase = styled.div<{ itemsPerRow?: number }>`
+  display: grid;
+  gap: 5px;
+  grid-auto-flow: column;
+  overflow: auto;
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    grid-template-columns: ${({ itemsPerRow }) =>
+      itemsPerRow && `repeat(${itemsPerRow}, 1fr)`};
+    grid-auto-flow: inherit;
+    overflow: inherit;
+  }
+`;
+
+export default TradingScoreboardBase;

package/src/components/TradingScoreboard/helpers.tsx

@@ -0,0 +1,134 @@
+import { Icon } from '@ssa-ui-kit/core';
+
+export const defaultBoardArr = [
+  {
+    value: (
+      <div>
+        <Icon name="stats" color="gold" size={16} />
+        <span css={{ marginLeft: '10px' }}>Binance</span>
+      </div>
+    ),
+    title: 'Exchange',
+  },
+  {
+    value: 'Account name',
+    title: 'Account',
+  },
+  {
+    value: 'Grid v7',
+    title: 'Strategy',
+  },
+  {
+    value: 'ETH/USDT',
+    title: 'Pairs',
+  },
+  {
+    value: '25',
+    title: 'Orders',
+  },
+  {
+    value: '27.07.23',
+    unit: '4:22:23 pm',
+    title: 'Start Date',
+  },
+  {
+    value: '30.07.23',
+    unit: '4:22:23 pm',
+    title: 'End date',
+  },
+  {
+    value: '4d 5h 36m 2s',
+    title: 'Launch duration',
+  },
+  {
+    value: '25',
+    unit: '%',
+    title: 'ROI',
+    icon: <Icon name="arrow-up" color="#2CA24D" size={16} />,
+  },
+  {
+    value: '340.025',
+    unit: 'USD',
+    title: 'PNL',
+    icon: <Icon name="arrow-up" color="#2CA24D" size={16} />,
+  },
+];
+
+export const oneLineBoardArr = [
+  {
+    value: '16',
+    title: 'Exchanges',
+  },
+  {
+    value: '6',
+    title: 'Accounts',
+  },
+  {
+    value: '62',
+    title: 'Orders',
+  },
+  {
+    value: '500.025',
+    unit: 'USD',
+    title: 'Turnover',
+  },
+  {
+    value: '340',
+    unit: 'USD',
+    title: 'PNL',
+    icon: <Icon name="arrow-up" color="#2CA24D" size={16} />,
+  },
+  {
+    value: '25',
+    unit: '%',
+    title: 'ROI',
+    icon: <Icon name="arrow-up" color="#2CA24D" size={16} />,
+  },
+  {
+    value: '15',
+    title: 'Errors',
+  },
+];
+
+export const linkBoardArr = [
+  {
+    value: '16',
+    title: 'Exchanges',
+    link: '/Exchanges',
+  },
+  {
+    value: '6',
+    title: 'Accounts',
+    link: '/Accounts',
+  },
+  {
+    value: '62',
+    title: 'Orders',
+    link: '/Orders',
+  },
+  {
+    value: '500.025',
+    unit: 'USD',
+    title: 'Turnover',
+    link: '/Turnover',
+  },
+  {
+    value: '340',
+    unit: 'USD',
+    title: 'PNL',
+    icon: <Icon name="arrow-up" color="#2CA24D" size={16} />,
+    link: '/PNL',
+  },
+  {
+    value: '25',
+    unit: '%',
+    title: 'ROI',
+    icon: <Icon name="arrow-up" color="#2CA24D" size={16} />,
+    link: '/ROI',
+  },
+  {
+    value: '15',
+    title: 'Errors',
+    link: '/Errors',
+  },
+];

package/src/components/TradingScoreboard/index.ts

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

package/src/components/TradingScoreboard/types.ts

@@ -0,0 +1,18 @@
+import { ITradingInfoCardProps } from '@components/TradingInfoCard/types';
+import { SerializedStyles } from '@emotion/react';
+
+type TradingScoreboardItem = Pick<
+  ITradingInfoCardProps,
+  'value' | 'unit' | 'title' | 'icon' | 'link'
+>;
+
+export interface ITradingScoreboardProps {
+  itemsPerRow: number;
+  items: Array<TradingScoreboardItem>;
+  onClick?: (item: TradingScoreboardItem) => void;
+  renderCard?: (
+    item: TradingScoreboardItem,
+    onClick?: (item: TradingScoreboardItem) => void,
+  ) => React.ReactNode;
+  css?: SerializedStyles;
+}