@ssa-ui-kit/widgets 0.0.1-alpha

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

@@ -0,0 +1,90 @@
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { Meta, StoryObj } from '@storybook/react';
+import { css, useTheme } from '@emotion/react';
+import { Icon } from '@ssa-ui-kit/core';
+import { AddNewAccountCard } from '@components/AddNewAccountCard';
+import { ExchangeAccount } from './ExchangeAccount';
+import { dataValues } from './helpers';
+
+export default {
+  title: 'Widgets/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!')}
+    />
+  );
+};
+
+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!')}
+            />
+          }
+        />
+      </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(200px, 1fr));
+        gap: 10px;
+
+        ${theme.mediaQueries.md} {
+          max-width: 1542px;
+          grid-template-columns: repeat(3, minmax(200px, 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!')}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+List.args = {};

package/src/components/ExchangeAccount/ExchangeAccount.tsx

@@ -0,0 +1,73 @@
+import { useTheme } from '@emotion/react';
+import {
+  Button,
+  CardBase,
+  CardContent,
+  CardHeader,
+  Icon,
+  Typography,
+} from '@ssa-ui-kit/core';
+import { BalancePieChart, WithLink } from '@components/AccountBalance';
+import { ExchangeAccountProps } from './types';
+import * as S from './styles';
+
+export const ExchangeAccount = ({
+  platform,
+  title,
+  status,
+  link,
+  data,
+  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} {...data} />
+        </CardContent>
+      </CardBase>
+    </WithLink>
+  );
+};

package/src/components/ExchangeAccount/helpers.tsx

@@ -0,0 +1,153 @@
+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.53032,
+      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.53032,
+      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

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

package/src/components/ExchangeAccount/styles.ts

@@ -0,0 +1,134 @@
+import { Theme, css } from '@emotion/react';
+
+export const CardBase = (theme: Theme) => css`
+  max-width: 500px;
+  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;
+
+  ul:last-child {
+    li {
+      justify-content: flex-end;
+      text-align: right;
+    }
+  }
+
+  ${theme.mediaQueries.sm} {
+    > div {
+      display: block;
+      text-align: center;
+
+      .pie-chart-wrapper {
+        margin: 0 auto 6px;
+      }
+    }
+
+    ul {
+      display: inline-flex;
+      height: auto;
+    }
+
+    ul:last-child {
+      margin-left: 30px;
+    }
+  }
+
+  ${theme.mediaQueries.md} {
+    > div {
+      display: flex;
+      justify-content: space-around;
+
+      .pie-chart-wrapper {
+        margin: 0 10px 0 0;
+      }
+    }
+
+    ul {
+      display: flex;
+      margin-left: 0;
+    }
+
+    ul:last-child {
+      margin-left: 10px;
+    }
+  }
+`;

package/src/components/ExchangeAccount/types.ts

@@ -0,0 +1,12 @@
+import { To } from 'react-router-dom';
+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'>;
+}

package/src/components/ExchangeAccountKeys/ExchangeAccountKeys.spec.tsx

@@ -0,0 +1,43 @@
+import userEvent from '@testing-library/user-event';
+import { StoryComponent } from './stories/StoryComponent';
+
+describe('ExchangeAccountKeys', () => {
+  it('Renders with title', () => {
+    const { getByText } = render(<StoryComponent onDelete={jest.fn()} />);
+
+    getByText('Account Name');
+  });
+
+  it('Renders with delete button', async () => {
+    const user = userEvent.setup();
+    const mockOnClick = jest.fn();
+    const { getByRole } = render(<StoryComponent onDelete={mockOnClick} />);
+
+    const deleteButton = getByRole('button', { name: 'Bin' });
+    await user.click(deleteButton);
+    expect(mockOnClick).toBeCalledTimes(1);
+  });
+
+  it('Renders with API key and hidden Secret key', () => {
+    const { getByText } = render(<StoryComponent onDelete={jest.fn()} />);
+
+    getByText('123456789012345678901234567890');
+    getByText('******');
+  });
+
+  it('Clicks on hidden/unhidden secret key', async () => {
+    const user = userEvent.setup();
+    const mockOnClick = jest.fn();
+    const { getByRole, getByText } = render(
+      <StoryComponent onDelete={mockOnClick} />,
+    );
+
+    const invisibleIcon = getByRole('button', { name: 'Invisible' });
+    await user.click(invisibleIcon);
+    getByText('1234567890');
+
+    const visibleIcon = getByRole('button', { name: 'Visible' });
+    await user.click(visibleIcon);
+    getByText('******');
+  });
+});

package/src/components/ExchangeAccountKeys/ExchangeAccountKeys.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ExchangeAccountKeys } from './ExchangeAccountKeys';
+import { StoryComponent } from './stories/StoryComponent';
+
+export default {
+  title: 'Widgets/ExchangeAccountKeys',
+  component: ExchangeAccountKeys,
+} as Meta<typeof ExchangeAccountKeys>;
+
+export const Default: StoryObj<typeof ExchangeAccountKeys> = () => (
+  <StoryComponent onDelete={() => alert('Account Deleted!')} />
+);
+
+Default.args = {};

package/src/components/ExchangeAccountKeys/ExchangeAccountKeys.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react';
+import { useTheme } from '@emotion/react';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Icon,
+  Typography,
+} from '@ssa-ui-kit/core';
+import { ExchangeAccountKeysProps } from './types';
+import * as S from './styles';
+
+export const ExchangeAccountKeys = ({
+  title,
+  apiKey,
+  secretKey,
+  onDelete,
+  onVisibilityChange,
+  isDisabled,
+}: ExchangeAccountKeysProps) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const theme = useTheme();
+  const placeholder = <span>******</span>;
+
+  const handleClickVisible = () => {
+    setIsVisible((prev) => !prev);
+  };
+
+  useEffect(() => {
+    onVisibilityChange(isVisible);
+  }, [isVisible]);
+
+  return (
+    <Card noShadow css={S.Card} className={isDisabled ? 'disabled' : ''}>
+      <CardHeader css={S.CardHeader}>
+        <Typography variant="h5" weight="bold">
+          {title}
+        </Typography>
+        <Button css={S.DeleteButton} onClick={onDelete}>
+          <Icon name="bin" size={15} color={theme.colors.greyDropdownFocused} />
+        </Button>
+      </CardHeader>
+      <CardContent css={S.CardContent} direction="column">
+        <div css={S.KeyItem}>
+          <Typography variant="h6" color={theme.colors.greyDropdownFocused}>
+            API Key
+          </Typography>
+          <Typography variant="h5" weight="bold" css={S.NoWrapText}>
+            {apiKey}
+          </Typography>
+        </div>
+        <div css={S.KeyItem}>
+          <Typography variant="h6" color={theme.colors.greyDropdownFocused}>
+            Secret Key
+          </Typography>
+          <Typography variant="h5" weight="bold" css={S.SecretKey}>
+            {isVisible ? secretKey || placeholder : placeholder}
+            <Button css={S.VisibleButton} onClick={handleClickVisible}>
+              <Icon
+                name={isVisible ? 'visible' : 'invisible'}
+                size={20}
+                color={theme.colors.greyDropdownFocused}
+              />
+            </Button>
+          </Typography>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

package/src/components/ExchangeAccountKeys/helpers.ts

@@ -0,0 +1,7 @@
+const secretKey = '1234567890';
+
+export const getMockData = () => {
+  return new Promise<string>((resolve) => {
+    resolve(secretKey);
+  });
+};

package/src/components/ExchangeAccountKeys/index.ts

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

package/src/components/ExchangeAccountKeys/stories/StoryComponent.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { ExchangeAccountKeys } from '../ExchangeAccountKeys';
+import { getMockData } from '../helpers';
+
+interface onDelete {
+  onDelete: () => void;
+}
+
+export const StoryComponent = ({ onDelete }: onDelete) => {
+  const [isDisabled, setIsDisabled] = useState(false);
+  const [secretKey, setSecretKey] = useState('');
+
+  const handleClickVisible = (isVisible: boolean) => {
+    if (isVisible) {
+      setIsDisabled(true);
+      getMockData().then((data) => {
+        setSecretKey(data);
+        setIsDisabled(false);
+      });
+    }
+  };
+
+  return (
+    <ExchangeAccountKeys
+      title="Account Name"
+      apiKey="123456789012345678901234567890"
+      secretKey={secretKey}
+      onDelete={onDelete}
+      onVisibilityChange={handleClickVisible}
+      isDisabled={isDisabled}
+    />
+  );
+};