@ssa-ui-kit/widgets 0.0.8-alpha → 0.0.10-alpha

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

@@ -1,110 +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);
-  });
-});
+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);
+  });
+});

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

@@ -1,90 +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 = {};
+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

@@ -1,73 +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>
-  );
-};
+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>
+  );
+};