@ssa-ui-kit/widgets 0.0.17-alpha → 0.0.19-alpha

package/jest-setup.ts

@@ -1,17 +1,17 @@
-import '@testing-library/jest-dom/extend-expect';
-import { createSerializer, matchers } from '@emotion/jest';
-
-import { mainTheme } from '@ssa-ui-kit/core';
-import { initRender } from './customTest';
-
-const customRender = initRender(mainTheme);
-
-declare global {
-  // eslint-disable-next-line no-var
-  var render: typeof customRender;
-}
-
-global.render = customRender;
-
-expect.addSnapshotSerializer(createSerializer());
-expect.extend(matchers);
+import '@testing-library/jest-dom/extend-expect';
+import { createSerializer, matchers } from '@emotion/jest';
+
+import { mainTheme } from '@ssa-ui-kit/core';
+import { initRender } from './customTest';
+
+const customRender = initRender(mainTheme);
+
+declare global {
+  // eslint-disable-next-line no-var
+  var render: typeof customRender;
+}
+
+global.render = customRender;
+
+expect.addSnapshotSerializer(createSerializer());
+expect.extend(matchers);

package/lostpixel.config.ts

@@ -1,29 +1,29 @@
-import { baseConfig } from '../../lostpixel.base.config';
-import { SCREEN_SIZES } from './src/consts';
-import { CustomProjectConfig } from 'lost-pixel';
-
-const breakpoints = Object.keys(SCREEN_SIZES).map(Number);
-
-const widgetsConfig: Partial<CustomProjectConfig> & {
-  storybookShots: {
-    breakpoints: number[];
-  };
-} = {
-  storybookShots: {
-    storybookUrl: './packages/widgets/storybook-static',
-    breakpoints,
-    // https://docs.lost-pixel.com/user-docs/api-reference/mask
-    mask: [{ selector: '.lostpixel-ignore' }],
-  },
-  customShots: {
-    currentShotsPath: './packages/widgets/custom-shots',
-  },
-  // @cspell:disable-next-line
-  lostPixelProjectId: 'clldrvzro4dkcna0ez80h1y2h',
-};
-
-export const config: Partial<CustomProjectConfig> & {
-  storybookShots: {
-    breakpoints: number[];
-  };
-} = Object.assign({}, baseConfig, widgetsConfig);
+import { baseConfig } from '../../lostpixel.base.config';
+import { SCREEN_SIZES } from './src/consts';
+import { CustomProjectConfig } from 'lost-pixel';
+
+const breakpoints = Object.keys(SCREEN_SIZES).map(Number);
+
+const widgetsConfig: Partial<CustomProjectConfig> & {
+  storybookShots: {
+    breakpoints: number[];
+  };
+} = {
+  storybookShots: {
+    storybookUrl: './packages/widgets/storybook-static',
+    breakpoints,
+    // https://docs.lost-pixel.com/user-docs/api-reference/mask
+    mask: [{ selector: '.lostpixel-ignore' }],
+  },
+  customShots: {
+    currentShotsPath: './packages/widgets/custom-shots',
+  },
+  // @cspell:disable-next-line
+  lostPixelProjectId: 'clldrvzro4dkcna0ez80h1y2h',
+};
+
+export const config: Partial<CustomProjectConfig> & {
+  storybookShots: {
+    breakpoints: number[];
+  };
+} = Object.assign({}, baseConfig, widgetsConfig);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/widgets",
-  "version": "0.0.17-alpha",
+  "version": "0.0.19-alpha",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -29,9 +29,9 @@
     "js-tokens": "^4.0.0",
     "loose-envify": "^1.4.0",
     "scheduler": "^0.23.0",
-    "@ssa-ui-kit/core": "^0.0.12-alpha",
-    "@ssa-ui-kit/utils": "^0.0.1-alpha",
-    "@ssa-ui-kit/hooks": "^0.0.1-alpha"
+    "@ssa-ui-kit/core": "^0.0.14-alpha",
+    "@ssa-ui-kit/hooks": "^0.0.1-alpha",
+    "@ssa-ui-kit/utils": "^0.0.1-alpha"
   },
   "browserslist": [
     ">0.1%",

package/playwright.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from '@playwright/test';
-import { createConfig } from '../../playwright.base.config';
-
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-export default defineConfig(createConfig());
+import { defineConfig } from '@playwright/test';
+import { createConfig } from '../../playwright.base.config';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig(createConfig());

package/src/components/AccountBalance/AccountBalance.spec.tsx

@@ -1,111 +1,111 @@
-import { fireEvent } from '@testing-library/dom';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import { data } from './stories/fixtures';
-import { AccountBalance } from './index';
-
-const ResponsivePieMock = () => <div data-testid="responsive-pie"></div>;
-
-jest.mock('@nivo/pie', () => ({
-  PieCustomLayerProps: {},
-  ResponsivePie: ResponsivePieMock,
-}));
-
-describe('AccountBalance', () => {
-  it('Renders', () => {
-    const { getByRole, getByText, getByTestId } = render(
-      <AccountBalance total="798" currency="USDT" data={data} />,
-    );
-
-    getByRole('heading', { name: 'Balance' });
-    getByTestId('responsive-pie');
-    getByText('798');
-    getByText('USDT');
-
-    for (const { label, legendValue } of data) {
-      getByRole('heading', { name: label });
-      getByRole('heading', {
-        name: `${legendValue} ${label === 'Other' ? 'USDT' : label}`,
-      });
-    }
-  });
-
-  it('Renders with a custom title', () => {
-    const { getByRole } = render(
-      <AccountBalance total="798" currency="USDT" data={data} title="PNL" />,
-    );
-
-    getByRole('heading', { name: 'PNL' });
-  });
-
-  it('Renders with a button', async () => {
-    const onClick = jest.fn();
-    const { getByRole } = render(
-      <AccountBalance
-        total="798"
-        currency="USDT"
-        data={data}
-        onClick={onClick}
-      />,
-    );
-
-    const btnEl = getByRole('button');
-    await fireEvent.click(btnEl);
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('Renders with a link', async () => {
-    const onClick = jest.fn();
-    const { getByRole } = render(
-      <MemoryRouter>
-        <Routes>
-          <Route
-            path="/*"
-            element={
-              <AccountBalance
-                total="798"
-                currency="USDT"
-                data={data}
-                onClick={onClick}
-                link="/balance"
-              />
-            }
-          />
-        </Routes>
-      </MemoryRouter>,
-    );
-
-    const linkEl = getByRole('link');
-    expect(linkEl).toHaveAttribute('href', '/balance');
-    await fireEvent.click(linkEl);
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('Renders without value list', () => {
-    const { getByText } = render(
-      <AccountBalance
-        total="798"
-        currency="USDT"
-        variant="withoutValueList"
-        data={[
-          {
-            id: 'BTC',
-            label: 'BTC',
-            legendValue: 1,
-            value: 871.23,
-          },
-          {
-            id: 'LTC',
-            label: 'LTC',
-            legendValue: 7,
-            value: 530.25,
-          },
-        ]}
-      />,
-    );
-
-    getByText('1 BTC');
-    getByText('871.23 USDT');
-    getByText('7 LTC');
-    getByText('530.25 USDT');
-  });
-});
+import { fireEvent } from '@testing-library/dom';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { data } from './stories/fixtures';
+import { AccountBalance } from './index';
+
+const ResponsivePieMock = () => <div data-testid="responsive-pie"></div>;
+
+jest.mock('@nivo/pie', () => ({
+  PieCustomLayerProps: {},
+  ResponsivePie: ResponsivePieMock,
+}));
+
+describe('AccountBalance', () => {
+  it('Renders', () => {
+    const { getByRole, getByText, getByTestId } = render(
+      <AccountBalance total="798" currency="USDT" data={data} />,
+    );
+
+    getByRole('heading', { name: 'Balance' });
+    getByTestId('responsive-pie');
+    getByText('798');
+    getByText('USDT');
+
+    for (const { label, legendValue } of data) {
+      getByRole('heading', { name: label });
+      getByRole('heading', {
+        name: `${legendValue} ${label === 'Other' ? 'USDT' : label}`,
+      });
+    }
+  });
+
+  it('Renders with a custom title', () => {
+    const { getByRole } = render(
+      <AccountBalance total="798" currency="USDT" data={data} title="PNL" />,
+    );
+
+    getByRole('heading', { name: 'PNL' });
+  });
+
+  it('Renders with a button', async () => {
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <AccountBalance
+        total="798"
+        currency="USDT"
+        data={data}
+        onClick={onClick}
+      />,
+    );
+
+    const btnEl = getByRole('button');
+    await fireEvent.click(btnEl);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('Renders with a link', async () => {
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <MemoryRouter>
+        <Routes>
+          <Route
+            path="/*"
+            element={
+              <AccountBalance
+                total="798"
+                currency="USDT"
+                data={data}
+                onClick={onClick}
+                link="/balance"
+              />
+            }
+          />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    const linkEl = getByRole('link');
+    expect(linkEl).toHaveAttribute('href', '/balance');
+    await fireEvent.click(linkEl);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('Renders without value list', () => {
+    const { getByText } = render(
+      <AccountBalance
+        total="798"
+        currency="USDT"
+        variant="withoutValueList"
+        data={[
+          {
+            id: 'BTC',
+            label: 'BTC',
+            legendValue: 1,
+            value: 871.23,
+          },
+          {
+            id: 'LTC',
+            label: 'LTC',
+            legendValue: 7,
+            value: 530.25,
+          },
+        ]}
+      />,
+    );
+
+    getByText('1 BTC');
+    getByText('871.23 USDT');
+    getByText('7 LTC');
+    getByText('530.25 USDT');
+  });
+});

package/src/components/AccountBalance/AccountBalance.stories.tsx

@@ -1,77 +1,77 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import { css } from '@emotion/react';
-import { mainTheme } from '@ssa-ui-kit/core';
-
-import { data } from './stories/fixtures';
-
-import { AccountBalance, AccountBalanceProps } from './index';
-
-export default {
-  title: 'Widgets/AccountBalance',
-  component: AccountBalance,
-} as Meta<typeof AccountBalance>;
-
-export const Default: StoryObj<typeof AccountBalance> = {};
-Default.args = {
-  total: 48700.53569,
-  currency: 'USDT',
-  onClick: () => alert('Clicked!'),
-  data,
-};
-
-export const WithLink: StoryObj<typeof AccountBalance> = (
-  args: AccountBalanceProps,
-) => {
-  return (
-    <MemoryRouter>
-      <Routes>
-        <Route path="/*" element={<AccountBalance {...args} />} />
-      </Routes>
-    </MemoryRouter>
-  );
-};
-WithLink.args = {
-  ...Default.args,
-  link: '/',
-};
-
-export const Custom: StoryObj<typeof AccountBalance> = (
-  args: AccountBalanceProps,
-) => {
-  return (
-    <AccountBalance
-      {...args}
-      css={css`
-        ul li {
-          height: auto;
-        }
-      `}
-    />
-  );
-};
-
-Custom.args = {
-  total: 48700.53569,
-  currency: 'USDT',
-  variant: 'withoutValueList',
-  chartColorPalette: [
-    mainTheme.colors.blue as string,
-    mainTheme.colors.green as string,
-  ],
-  legendColorPalette: ['blue', 'green'],
-  data: [
-    {
-      id: 'BTC',
-      label: 'BTC',
-      value: 571.23,
-      legendValue: 12323,
-    },
-    {
-      id: 'LTC',
-      label: 'LTC',
-      value: 530.25,
-      legendValue: 12323,
-    },
-  ],
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { css } from '@emotion/react';
+import { mainTheme } from '@ssa-ui-kit/core';
+
+import { data } from './stories/fixtures';
+
+import { AccountBalance, AccountBalanceProps } from './index';
+
+export default {
+  title: 'Widgets/AccountBalance',
+  component: AccountBalance,
+} as Meta<typeof AccountBalance>;
+
+export const Default: StoryObj<typeof AccountBalance> = {};
+Default.args = {
+  total: 48700.53569,
+  currency: 'USDT',
+  onClick: () => alert('Clicked!'),
+  data,
+};
+
+export const WithLink: StoryObj<typeof AccountBalance> = (
+  args: AccountBalanceProps,
+) => {
+  return (
+    <MemoryRouter>
+      <Routes>
+        <Route path="/*" element={<AccountBalance {...args} />} />
+      </Routes>
+    </MemoryRouter>
+  );
+};
+WithLink.args = {
+  ...Default.args,
+  link: '/',
+};
+
+export const Custom: StoryObj<typeof AccountBalance> = (
+  args: AccountBalanceProps,
+) => {
+  return (
+    <AccountBalance
+      {...args}
+      css={css`
+        ul li {
+          height: auto;
+        }
+      `}
+    />
+  );
+};
+
+Custom.args = {
+  total: 48700.53569,
+  currency: 'USDT',
+  variant: 'withoutValueList',
+  chartColorPalette: [
+    mainTheme.colors.blue as string,
+    mainTheme.colors.green as string,
+  ],
+  legendColorPalette: ['blue', 'green'],
+  data: [
+    {
+      id: 'BTC',
+      label: 'BTC',
+      value: 571.23,
+      legendValue: 12323,
+    },
+    {
+      id: 'LTC',
+      label: 'LTC',
+      value: 530.25,
+      legendValue: 12323,
+    },
+  ],
+};

package/src/components/AccountBalance/AccountBalance.tsx

@@ -1,64 +1,64 @@
-import { css, useTheme } from '@emotion/react';
-import { Card, CardContent, CardHeader, Typography } from '@ssa-ui-kit/core';
-import { BalancePieChart } from './BalancePieChart';
-import { WithLink } from './WithLink';
-import { AccountBalanceProps } from './types';
-
-export const AccountBalance = ({
-  title = 'Balance',
-  className,
-  onClick,
-  link,
-  variant = 'valueList',
-  ...props
-}: AccountBalanceProps) => {
-  const theme = useTheme();
-
-  return (
-    <WithLink link={link} onClick={onClick}>
-      <Card
-        className={className}
-        onClick={link ? undefined : onClick}
-        css={css`
-          border-radius: 20px;
-          padding: 5px 10px;
-          width: 100%;
-
-          ${theme.mediaQueries.md} {
-            padding: 10px;
-          }
-
-          ${theme.mediaQueries.lg} {
-            padding: 12px 20px 11px;
-          }
-
-          box-shadow: 0 10px 40px 0 ${theme.colors.greyShadow};
-        `}>
-        <CardHeader
-          css={css`
-            margin-bottom: 10px;
-          `}>
-          <Typography
-            variant="h3"
-            weight="bold"
-            css={css`
-              font-size: 16px;
-              ${theme.mediaQueries.md} {
-                font-size: 20px;
-              }
-            `}>
-            {title}
-          </Typography>
-        </CardHeader>
-        <CardContent
-          css={css`
-            max-width: 406px;
-            width: 100%;
-            display: block;
-          `}>
-          <BalancePieChart theme={theme} variant={variant} {...props} />
-        </CardContent>
-      </Card>
-    </WithLink>
-  );
-};
+import { css, useTheme } from '@emotion/react';
+import { Card, CardContent, CardHeader, Typography } from '@ssa-ui-kit/core';
+import { BalancePieChart } from './BalancePieChart';
+import { WithLink } from './WithLink';
+import { AccountBalanceProps } from './types';
+
+export const AccountBalance = ({
+  title = 'Balance',
+  className,
+  onClick,
+  link,
+  variant = 'valueList',
+  ...props
+}: AccountBalanceProps) => {
+  const theme = useTheme();
+
+  return (
+    <WithLink link={link} onClick={onClick}>
+      <Card
+        className={className}
+        onClick={link ? undefined : onClick}
+        css={css`
+          border-radius: 20px;
+          padding: 5px 10px;
+          width: 100%;
+
+          ${theme.mediaQueries.md} {
+            padding: 10px;
+          }
+
+          ${theme.mediaQueries.lg} {
+            padding: 12px 20px 11px;
+          }
+
+          box-shadow: 0 10px 40px 0 ${theme.colors.greyShadow};
+        `}>
+        <CardHeader
+          css={css`
+            margin-bottom: 10px;
+          `}>
+          <Typography
+            variant="h3"
+            weight="bold"
+            css={css`
+              font-size: 16px;
+              ${theme.mediaQueries.md} {
+                font-size: 20px;
+              }
+            `}>
+            {title}
+          </Typography>
+        </CardHeader>
+        <CardContent
+          css={css`
+            max-width: 406px;
+            width: 100%;
+            display: block;
+          `}>
+          <BalancePieChart theme={theme} variant={variant} {...props} />
+        </CardContent>
+      </Card>
+    </WithLink>
+  );
+};