@ssa-ui-kit/widgets 0.0.1-alpha

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,31 @@
+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.spec.tsx

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

@@ -0,0 +1,26 @@
+import type { Meta } from '@storybook/react';
+
+import { Calories } from './Calories';
+
+export default {
+  title: 'Widgets/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

@@ -0,0 +1,54 @@
+import { css, useTheme } from '@emotion/react';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  ProgressCircle,
+  Typography,
+  ResponsiveImage,
+} from '@ssa-ui-kit/core';
+
+import { ICaloriesProps } from './types';
+import { InnerContent } from './innerContent';
+
+/**
+ *
+ * UI Component that shows how many calories the user has burned
+ */
+export const Calories = ({ max, currentValue }: ICaloriesProps) => {
+  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

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

package/src/components/Calories/innerContent.tsx

@@ -0,0 +1,30 @@
+import { useTheme } from '@emotion/react';
+import { Typography, Wrapper } from '@ssa-ui-kit/core';
+
+import { ICaloriesProps } from './types';
+
+export const InnerContent = ({ currentValue, max }: ICaloriesProps) => {
+  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

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

package/src/components/CardList/CardList.spec.tsx

@@ -0,0 +1,32 @@
+import { screen } from '../../../customTest';
+
+import CardList from './index';
+
+describe('CardList', () => {
+  it('Render component', async () => {
+    render(
+      <CardList
+        title="List of cards"
+        items={[
+          {
+            id: '1',
+            title: 'ITEM A',
+          },
+          {
+            id: '2',
+            title: 'ITEM B',
+          },
+        ]}
+        renderItem={(item) => item.title as string}
+      />,
+    );
+
+    const list = await screen.findAllByRole('listitem');
+    const itemA = await screen.findByText('ITEM A');
+    const itemB = await screen.findByText('ITEM B');
+
+    expect(list.length).toBe(2);
+    expect(itemA).toBeInTheDocument();
+    expect(itemB).toBeInTheDocument();
+  });
+});

package/src/components/CardList/CardList.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Card, CardContent, Typography } from '@ssa-ui-kit/core';
+
+import { CardList } from './CardList';
+
+export default {
+  title: 'Widgets/CardList',
+  component: CardList,
+} as Meta<typeof CardList>;
+
+export const Default: StoryObj<typeof CardList> = () => {
+  return (
+    <CardList
+      title="List of cards"
+      items={[
+        {
+          id: 'cardio_training',
+          title: 'HIIT Cardio training',
+        },
+        {
+          id: 'other_training',
+          title: 'Other cardio training',
+        },
+      ]}
+      renderItem={(item) => (
+        <Card>
+          <CardContent>
+            <Typography variant="body1">{item.title}</Typography>
+          </CardContent>
+        </Card>
+      )}
+    />
+  );
+};
+
+Default.storyName = 'CardList';

package/src/components/CardList/CardList.tsx

@@ -0,0 +1,37 @@
+import { Fragment } from 'react';
+import { css } from '@emotion/react';
+
+import { Typography } from '@ssa-ui-kit/core';
+
+import { ICardListProps, Item } from './types';
+
+/**
+ *
+ * UI Component that renders a list of items with a custom render function
+ */
+export const CardList = <ItemType extends Item>({
+  title,
+  items,
+  renderItem,
+}: ICardListProps<ItemType>) => {
+  return (
+    <Fragment>
+      <Typography variant="h5" weight="bold">
+        {title}
+      </Typography>
+
+      <ul
+        css={css`
+          list-style: none;
+          padding: 0;
+
+          li {
+            margin-bottom: 15px;
+          }
+        `}>
+        {Array.isArray(items) &&
+          items.map((item) => <li key={item.id}>{renderItem(item)}</li>)}
+      </ul>
+    </Fragment>
+  );
+};

package/src/components/CardList/index.ts

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

package/src/components/CardList/types.ts

@@ -0,0 +1,10 @@
+export type Item = {
+  id: string | number;
+  [prop: string | number | symbol]: unknown;
+};
+
+export interface ICardListProps<ItemType extends Item> {
+  title: string;
+  items: Array<ItemType>;
+  renderItem: (item: ItemType) => React.ReactNode;
+}

package/src/components/ExchangeAccount/ExchangeAccount.spec.tsx

@@ -0,0 +1,110 @@
+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(),
+};
+
+const ResponsivePieMock = () => <div data-testid="responsive-pie"></div>;
+
+jest.mock('@nivo/pie', () => ({
+  PieCustomLayerProps: {},
+  ResponsivePie: ResponsivePieMock,
+}));
+
+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 { getByTestId } = render(<ExchangeAccount {...commonProps} />);
+
+    getByTestId('responsive-pie');
+  });
+
+  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);
+  });
+});