@ssa-ui-kit/widgets 0.0.13-alpha → 0.0.15-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.13-alpha",
+  "version": "0.0.15-alpha",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -29,7 +29,7 @@
     "js-tokens": "^4.0.0",
     "loose-envify": "^1.4.0",
     "scheduler": "^0.23.0",
-    "@ssa-ui-kit/core": "^0.0.8-alpha",
+    "@ssa-ui-kit/core": "^0.0.10-alpha",
     "@ssa-ui-kit/hooks": "^0.0.1-alpha",
     "@ssa-ui-kit/utils": "^0.0.1-alpha"
   },

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

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

@@ -1,35 +1,35 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-
-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: '/',
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+
+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: '/',
+};

package/src/components/AccountBalance/AccountBalance.tsx

@@ -1,63 +1,63 @@
-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,
-  ...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} {...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,
+  ...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} {...props} />
+        </CardContent>
+      </Card>
+    </WithLink>
+  );
+};

package/src/components/AccountBalance/BalancePieChart.tsx

@@ -1,77 +1,77 @@
-import { withTheme, css } from '@emotion/react';
-
-import {
-  PieChart,
-  PieChartLegend,
-  pieChartPalettes,
-} from '@components/PieChart';
-import { BalancePieChartTitle } from './BalancePieChartTitle';
-
-import { BalancePieChartProps } from './types';
-
-export const BalancePieChart = withTheme(
-  ({ total, currency, data, theme }: BalancePieChartProps) => {
-    const { legendColorNames, pieChartColors } =
-      pieChartPalettes.getBalancePalette(theme);
-
-    return (
-      <PieChart
-        data={data}
-        colors={pieChartColors}
-        animate={false}
-        title={
-          <BalancePieChartTitle
-            theme={theme}
-            total={total}
-            currency={currency}
-          />
-        }
-        css={css`
-          div:nth-of-type(1) {
-            width: 100px;
-            height: 100px;
-          }
-
-          ${theme.mediaQueries.md} {
-            div:nth-of-type(1) {
-              width: 120px;
-              height: 120px;
-            }
-          }
-        `}>
-        <PieChartLegend
-          data={data}
-          colors={legendColorNames}
-          markerStyles={css`
-            width: 10px;
-            height: 10px;
-            margin-right: 5px;
-          `}
-          labelListStyles={css`
-            gap: 5px;
-            h6 {
-              font-weight: 700;
-              font-size: 14px;
-            }
-
-            ${theme.mediaQueries.lg} {
-              margin-left: -20%;
-            }
-          `}
-          valueListStyles={css`
-            gap: 5px;
-            h6 {
-              color: ${theme.colors.greyDarker80};
-              font-size: 12px;
-            }
-          `}
-          renderValue={({ id, legendValue }) =>
-            id === 'Other'
-              ? legendValue + ' ' + currency
-              : legendValue + ' ' + id
-          }
-        />
-      </PieChart>
-    );
-  },
-);
+import { withTheme, css } from '@emotion/react';
+
+import {
+  PieChart,
+  PieChartLegend,
+  pieChartPalettes,
+} from '@components/PieChart';
+import { BalancePieChartTitle } from './BalancePieChartTitle';
+
+import { BalancePieChartProps } from './types';
+
+export const BalancePieChart = withTheme(
+  ({ total, currency, data, theme }: BalancePieChartProps) => {
+    const { legendColorNames, pieChartColors } =
+      pieChartPalettes.getBalancePalette(theme);
+
+    return (
+      <PieChart
+        data={data}
+        colors={pieChartColors}
+        animate={false}
+        title={
+          <BalancePieChartTitle
+            theme={theme}
+            total={total}
+            currency={currency}
+          />
+        }
+        css={css`
+          div:nth-of-type(1) {
+            width: 100px;
+            height: 100px;
+          }
+
+          ${theme.mediaQueries.md} {
+            div:nth-of-type(1) {
+              width: 120px;
+              height: 120px;
+            }
+          }
+        `}>
+        <PieChartLegend
+          data={data}
+          colors={legendColorNames}
+          markerStyles={css`
+            width: 10px;
+            height: 10px;
+            margin-right: 5px;
+          `}
+          labelListStyles={css`
+            gap: 5px;
+            h6 {
+              font-weight: 700;
+              font-size: 14px;
+            }
+
+            ${theme.mediaQueries.lg} {
+              margin-left: -20%;
+            }
+          `}
+          valueListStyles={css`
+            gap: 5px;
+            h6 {
+              color: ${theme.colors.greyDarker80};
+              font-size: 12px;
+            }
+          `}
+          renderValue={({ id, legendValue }) =>
+            id === 'Other'
+              ? legendValue + ' ' + currency
+              : legendValue + ' ' + id
+          }
+        />
+      </PieChart>
+    );
+  },
+);