@ssa-ui-kit/widgets 0.0.1-alpha

package/dist/injectGlobal.d.ts

@@ -0,0 +1 @@
+export {};

package/jest-setup.ts

@@ -0,0 +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);

package/lostpixel.config.ts

@@ -0,0 +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);

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@ssa-ui-kit/widgets",
+  "version": "0.0.1-alpha",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "private": false,
+  "sideEffects": false,
+  "author": "SSA Group",
+  "license": "MIT",
+  "description": "SSA UI Kit widgets",
+  "keywords": [
+    "react",
+    "SSA UI Kit",
+    "widgets",
+    "ui"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ssagroup/ui-kit.git",
+    "directory": "packages/widgets"
+  },
+  "dependencies": {
+    "@emotion/core": "^11.0.0",
+    "@emotion/css": "^11.11.2",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@floating-ui/react": "0.25.4",
+    "dotenv": "^16.0.3",
+    "js-tokens": "^4.0.0",
+    "loose-envify": "^1.4.0",
+    "scheduler": "^0.23.0",
+    "@ssa-ui-kit/core": "^0.0.1-alpha",
+    "@ssa-ui-kit/utils": "^0.0.1-alpha",
+    "@ssa-ui-kit/hooks": "^0.0.1-alpha"
+  },
+  "browserslist": [
+    ">0.1%",
+    "not dead",
+    "not op_mini all"
+  ],
+  "devDependencies": {
+    "@emotion/jest": "^11.11.0",
+    "@playwright/test": "^1.37.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@types/testing-library__jest-dom": "^5.14.6",
+    "copy-webpack-plugin": "^11.0.0",
+    "html-webpack-plugin": "^5.5.1",
+    "jsdom-testing-mocks": "^1.11.0",
+    "resolve-tspaths": "^0.8.16",
+    "terser-webpack-plugin": "^5.3.9",
+    "webpack": "^5.85.0"
+  },
+  "peerDependencies": {
+    "@emotion/core": "^11.0.0",
+    "@emotion/css": "^11.11.0",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@nivo/core": "^0.83.0",
+    "@nivo/line": "^0.83.0",
+    "@nivo/pie": "^0.83.0",
+    "@nivo/scales": "^0.83.0",
+    "react": "18.x",
+    "react-dom": "18.x",
+    "react-router-dom": "6.x",
+    "react-hook-form": "^7.46.1"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "test": "jest -i --no-cache",
+    "build": "webpack --mode=production --node-env=production && tsc --build --force ./tsconfig.build.json && resolve-tspaths -p ./tsconfig.build.json",
+    "sb:dev": "storybook dev -p 6007",
+    "sb:build": "storybook build",
+    "test:e2e": "pnpm exec playwright test --project=chromium",
+    "test:e2e:ui": "pnpm exec playwright test --project=chromium --ui",
+    "test:e2e:debug": "pnpm exec playwright test --project=chromium --debug",
+    "ts-show-config-build": "tsc --showConfig -p ./tsconfig.build.json",
+    "ts-show-config": "tsc --showConfig -p ./tsconfig.json",
+    "ts-check": "tsc --noEmit -p ./tsconfig.json",
+    "ts-check-build": "tsc -p ./tsconfig.build.json"
+  }
+}

package/playwright.config.ts

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

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

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

@@ -0,0 +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: '/',
+};

package/src/components/AccountBalance/AccountBalance.tsx

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

package/src/components/AccountBalance/BalancePieChart.tsx

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

package/src/components/AccountBalance/BalancePieChartTitle.tsx

@@ -0,0 +1,42 @@
+import { withTheme, css } from '@emotion/react';
+import { Typography } from '@ssa-ui-kit/core';
+import { useTextSizeDecrease } from '@ssa-ui-kit/hooks';
+import { BalancePieChartTitleProps } from './types';
+
+export const BalancePieChartTitle = withTheme(
+  ({ total, currency, theme }: BalancePieChartTitleProps) => {
+    const ref = useTextSizeDecrease();
+    return (
+      <Typography
+        ref={ref}
+        variant="body2"
+        weight="bold"
+        color={theme.colors.greyDarker}
+        css={css`
+          font-size: 14px;
+          padding: 0 14px;
+          ${theme.mediaQueries.md} {
+            font-size: 16px;
+          }
+          line-height: 1;
+        `}>
+        {total}
+        <Typography
+          variant="body2"
+          weight="regular"
+          as="span"
+          color={theme.colors.greyDarker80}
+          css={css`
+            display: block;
+            font-size: 12px;
+            ${theme.mediaQueries.md} {
+              font-size: 14px;
+            }
+            line-height: 25px;
+          `}>
+          {currency}
+        </Typography>
+      </Typography>
+    );
+  },
+);

package/src/components/AccountBalance/WithLink.tsx

@@ -0,0 +1,26 @@
+import { Link } from 'react-router-dom';
+import { css } from '@emotion/react';
+import { AccountBalanceProps } from './types';
+
+export const WithLink = ({
+  link,
+  onClick,
+  children,
+}: Pick<AccountBalanceProps, 'link' | 'onClick'> & {
+  children: React.ReactNode;
+}) =>
+  link ? (
+    <Link
+      to={link}
+      onClick={onClick}
+      css={css`
+        text-decoration: none;
+        div {
+          cursor: pointer;
+        }
+      `}>
+      {children}
+    </Link>
+  ) : (
+    children
+  );

package/src/components/AccountBalance/index.ts

@@ -0,0 +1,5 @@
+export { AccountBalance } from './AccountBalance';
+export { BalancePieChart } from './BalancePieChart';
+export { BalancePieChartTitle } from './BalancePieChartTitle';
+export { WithLink } from './WithLink';
+export * from './types';

package/src/components/AccountBalance/stories/fixtures.ts

@@ -0,0 +1,26 @@
+export const data = [
+  {
+    id: 'BTC',
+    label: 'BTC',
+    legendValue: 1,
+    value: 35371.23,
+  },
+  {
+    id: 'LTC',
+    label: 'LTC',
+    legendValue: 7,
+    value: 530.25,
+  },
+  {
+    id: 'ETH',
+    label: 'ETH',
+    legendValue: 1,
+    value: 1815.31,
+  },
+  {
+    id: 'Other',
+    label: 'Other',
+    legendValue: 943,
+    value: 1513.9956,
+  },
+];

package/src/components/AccountBalance/types.ts

@@ -0,0 +1,31 @@
+import { Theme } from '@ssa-ui-kit/core';
+import type { To } from 'react-router-dom';
+
+interface WithTheme {
+  theme: Theme;
+}
+
+type BalanceBase = {
+  total: number | string;
+  currency: string;
+  data: Array<{
+    id: string | number;
+    value: number;
+    label: string;
+    [key: string | number | symbol]: unknown;
+  }>;
+};
+
+export interface BalancePieChartProps extends WithTheme, BalanceBase {}
+
+export interface AccountBalanceProps extends BalanceBase {
+  title?: string;
+  className?: string;
+  onClick?: () => void;
+  link?: To;
+}
+
+export type BalancePieChartTitleProps = Pick<
+  BalancePieChartProps,
+  'total' | 'currency' | 'theme'
+>;

package/src/components/Activity/Activity.spec.tsx

@@ -0,0 +1,79 @@
+import { screen, waitFor } from '../../../customTest';
+
+import Activity from './index';
+import { ActivityResp } from './types';
+
+const data = {
+  walking: [
+    {
+      activity: 'walking',
+      date: '2023-04-16T23:00:00.000Z',
+      day: 'Sun',
+      max: 100,
+      currentValue: 50,
+    },
+    {
+      activity: 'walking',
+      date: '2023-04-16T23:00:00.000Z',
+      day: 'Mon',
+      max: 100,
+      currentValue: 50,
+    },
+    {
+      activity: 'walking',
+      date: '2023-04-16T23:00:00.000Z',
+      day: 'Tue',
+      max: 100,
+      currentValue: 50,
+    },
+    {
+      activity: 'walking',
+      date: '2023-04-16T23:00:00.000Z',
+      day: 'Wed',
+      max: 100,
+      currentValue: 50,
+    },
+    {
+      activity: 'walking',
+      date: '2023-04-16T23:00:00.000Z',
+      day: 'Thu',
+      max: 100,
+      currentValue: 50,
+    },
+    {
+      activity: 'walking',
+      date: '2023-04-16T23:00:00.000Z',
+      day: 'Fri',
+      max: 100,
+      currentValue: 50,
+    },
+    {
+      activity: 'walking',
+      date: '2023-04-16T23:00:00.000Z',
+      day: 'Sat',
+      max: 100,
+      currentValue: 50,
+    },
+  ],
+} as ActivityResp;
+
+describe('Activity', () => {
+  it('Render Activity', async () => {
+    render(<Activity data={data} />);
+
+    await waitFor(async () => {
+      const progressBar = await screen.findAllByRole('progressbar');
+      expect(progressBar).toHaveLength(7);
+    });
+  });
+
+  it("don't render if not data or wrong typeof data", async () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    render(<Activity data={'data'} />);
+
+    await waitFor(() => {
+      expect(screen.queryAllByRole('progressbar')).toHaveLength(0);
+    });
+  });
+});

package/src/components/Activity/Activity.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta } from '@storybook/react';
+
+import { mealActivityData as data } from './mockActivityRequest';
+
+import { Activity } from './Activity';
+
+export default {
+  title: 'Widgets/Activity',
+  component: Activity,
+  args: {
+    data,
+  },
+} as Meta<typeof Activity>;
+
+export const Default = {};