@ssa-ui-kit/core 0.0.27-alpha → 0.0.28-alpha

package/src/components/Pagination/styles.tsx

@@ -0,0 +1,98 @@
+import { css, Theme } from '@emotion/react';
+
+const baseBtnStyles = (theme: Theme) => css`
+  height: 30px;
+  border-radius: 6px;
+
+  ${theme.mediaQueries.md} {
+    height: 25px;
+  }
+
+  &:disabled {
+    cursor: default;
+  }
+`;
+
+export const pageBtnStyles = (theme: Theme) => css`
+  ${baseBtnStyles(theme)}
+
+  background: unset;
+  box-shadow: unset;
+  color: #070821;
+  padding: 0 11px;
+
+  ${theme.mediaQueries.md} {
+    padding: 0 9px;
+  }
+
+  &:disabled {
+    background: unset;
+    box-shadow: unset;
+  }
+
+  &:not(:disabled):hover,
+  &:not(:disabled):active,
+  &:not(:disabled):focus {
+    background: #eef1f7;
+    box-shadow: unset;
+  }
+`;
+
+const selectedBtnBg = (theme: Theme) => css`
+  background: ${theme.colors.blueLightDarker};
+  background: linear-gradient(
+    247.37deg,
+    ${theme.colors.blueDark},
+    ${theme.colors.blueLightDarker}
+  );
+
+  &:disabled {
+    background: ${theme.colors.blueLightDarker};
+    background: linear-gradient(
+      247.37deg,
+      ${theme.colors.blueDark},
+      ${theme.colors.blueLightDarker}
+    );
+  }
+`;
+
+export const selectedPageBtnStyles = (theme: Theme) => css`
+  ${baseBtnStyles(theme)}
+
+  ${selectedBtnBg(theme)}
+
+  color: white;
+  margin: 0 3px;
+  padding: 0 13px;
+
+  ${theme.mediaQueries.md} {
+    padding: 0 10px;
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    ${selectedBtnBg(theme)}
+  }
+
+  &:not(:disabled):hover {
+    box-shadow: 0 5px 5px -1px rgba(0, 0, 0, 0.3);
+    cursor: default;
+  }
+`;
+
+export const arrowBtnStyles = (theme: Theme) => css`
+  ${baseBtnStyles(theme)}
+
+  padding: 0 8px;
+  background: ${theme.colors.white};
+
+  &:disabled {
+    background: unset;
+  }
+
+  &:not(:disabled):hover {
+    box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+  }
+`;

package/src/components/Pagination/types.ts

@@ -0,0 +1,38 @@
+import { CommonProps } from '@global-types/emotion';
+
+export interface PaginationProps extends CommonProps {
+  pagesCount: number;
+  ariaLabel?: string;
+  isDisabled?: boolean;
+}
+
+export interface PaginationButtonsProps {
+  range: number[];
+  selectedPage?: number;
+  onClick: (page: number) => void;
+  isDisabled?: boolean;
+}
+
+export interface ArrowButtonProps {
+  direction: 'left' | 'right';
+  onClick: () => void;
+  isDisabled?: boolean;
+  className?: string;
+}
+
+export interface PageButtonProps {
+  onClick: () => void;
+  page: number | string;
+  isSelected: boolean;
+  isDisabled?: boolean;
+}
+
+export interface PaginationContextProps {
+  page?: number;
+  setPage: React.Dispatch<React.SetStateAction<number | undefined>>;
+}
+
+export interface PaginationContextProviderProps {
+  selectedPage?: number;
+  children: React.ReactNode;
+}

package/src/components/PieChart/PieChart.spec.tsx

@@ -0,0 +1,96 @@
+import { css } from '@emotion/react';
+import { within } from '@testing-library/dom';
+import { PieChart, PieChartLegend } from './index';
+import { accountData } from './stories/fixtures';
+
+const colorNames = ['blueLight', 'turquoise'] as unknown as Array<
+  keyof MainColors
+>;
+
+const ResponsivePieMock = () => <div data-testid="responsive-pie"></div>;
+
+jest.mock('@nivo/pie', () => ({
+  PieCustomLayerProps: {},
+  ResponsivePie: ResponsivePieMock,
+}));
+
+describe('PieChart', () => {
+  it('Renders', () => {
+    const { getByTestId, getByRole } = render(
+      <PieChart data={accountData} title={<h1>4578.89</h1>} />,
+    );
+
+    getByTestId('responsive-pie');
+    getByRole('heading', { name: '4578.89' });
+  });
+
+  it('Renders with a Legend', () => {
+    const { getByTestId, getByRole } = render(
+      <PieChart data={accountData} title={<h1>4578.89</h1>}>
+        <PieChartLegend data={accountData} colors={colorNames} />
+      </PieChart>,
+    );
+
+    getByTestId('responsive-pie');
+    getByRole('heading', { name: '4578.89' });
+
+    for (const { label, value } of accountData) {
+      getByRole('heading', { name: label });
+      getByRole('heading', { name: String(value) });
+    }
+  });
+
+  describe('PieChartLegend', () => {
+    it('Renders with customized values and labels', () => {
+      const { getByRole } = render(
+        <PieChart data={accountData} title={<h1>4578.89</h1>}>
+          <PieChartLegend
+            data={accountData}
+            colors={colorNames}
+            renderValue={({ value }) => `1-${value}`}
+            renderLabel={({ label }) => `1-${label}`}
+          />
+        </PieChart>,
+      );
+
+      for (const { label, value } of accountData) {
+        getByRole('heading', { name: `1-${label}` });
+        getByRole('heading', { name: `1-${value}` });
+      }
+    });
+
+    it('Renders with custom styles', () => {
+      const { getAllByRole } = render(
+        <PieChart data={accountData} title={<h1>4578.89</h1>}>
+          <PieChartLegend
+            data={accountData}
+            colors={colorNames}
+            markerStyles={css`
+              background-color: indigo;
+              border-radius: 0;
+            `}
+            labelListStyles={css`
+              background-color: forestgreen;
+            `}
+            valueListStyles={css`
+              background-color: aqua;
+            `}
+          />
+        </PieChart>,
+      );
+
+      const [labelListEl, valueListEl] = getAllByRole('list');
+      expect(labelListEl).toHaveStyle(`background-color: forestgreen`);
+      expect(valueListEl).toHaveStyle(`background-color: aqua `);
+
+      const listItemEls = within(labelListEl).getAllByRole('listitem');
+
+      for (const el of listItemEls) {
+        expect(el.firstChild).toHaveStyle(`
+          background-color: indigo;
+          border-radius: 0;
+        `);
+      }
+    });
+  });
+});

package/src/components/PieChart/PieChart.stories.tsx

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { css, useTheme } from '@emotion/react';
+import Typography from '@components/Typography';
+
+import { PieChart, PieChartLegend, pieChartPalettes } from './index';
+import { fitnessData, accountData } from './stories/fixtures';
+
+export default {
+  title: 'Charts/PieChart',
+  component: PieChart,
+} as Meta<typeof PieChart>;
+
+export const FitnessExample: StoryObj<typeof PieChart> = () => {
+  const theme = useTheme();
+  const colorNames = ['blueLight', 'turquoise'] as unknown as Array<
+    keyof MainColors
+  >;
+  const pieChartColors = [
+    theme.colors.blueLighter,
+    theme.colors.turquoise,
+  ] as unknown as string[];
+
+  return (
+    <div style={{ width: '400px' }}>
+      <PieChart
+        data={fitnessData}
+        colors={pieChartColors}
+        animate={false}
+        title={
+          <Typography
+            variant="body2"
+            weight="regular"
+            color={theme.colors.greyDarker60}
+            css={css`
+              font-size: 16px;
+              line-height: 16px;
+              margin-top: -5px;
+            `}>
+            Total
+            <Typography
+              variant="body2"
+              weight="bold"
+              color={theme.colors.greyDarker}
+              css={css`
+                font-size: 27.65px;
+                line-height: 35px;
+              `}>
+              143
+              <Typography
+                variant="body2"
+                weight="regular"
+                as="span"
+                color={theme.colors.greyDarker60}
+                css={css`
+                  font-size: 16px;
+                  font-weight: 600;
+                  margin-left: 3px;
+                `}>
+                hrs
+              </Typography>
+            </Typography>
+          </Typography>
+        }>
+        <PieChartLegend data={fitnessData} colors={colorNames} />
+      </PieChart>
+    </div>
+  );
+};
+FitnessExample.args = {};
+
+export const AccountExample: StoryObj<typeof PieChart> = () => {
+  const theme = useTheme();
+  const { legendColorNames, pieChartColors } =
+    pieChartPalettes.getBalancePalette(theme);
+
+  return (
+    <div style={{ width: '400px' }}>
+      <PieChart
+        data={accountData}
+        colors={pieChartColors}
+        animate={false}
+        title={
+          <Typography
+            variant="body2"
+            weight="bold"
+            color={theme.colors.greyDarker}
+            css={css`
+              font-size: 20px;
+              line-height: 25px;
+            `}>
+            147358 &nbsp;
+            <Typography
+              variant="body2"
+              weight="regular"
+              as="span"
+              color={theme.colors.greyDarker80}
+              css={css`
+                font-size: 14px;
+              `}>
+              USD
+            </Typography>
+          </Typography>
+        }>
+        <PieChartLegend
+          data={accountData}
+          colors={legendColorNames}
+          renderValue={({ value, label }) =>
+            label === 'Other' ? value + ' USD' : value + ' ' + label
+          }
+          markerStyles={css`
+            width: 10px;
+            height: 10px;
+          `}
+          labelListStyles={css`
+            h6 {
+              font-weight: 700;
+            }
+          `}
+          valueListStyles={css`
+            h6 {
+              color: ${theme.colors.greyDarker80};
+            }
+          `}
+        />
+      </PieChart>
+    </div>
+  );
+};
+AccountExample.args = {};

package/src/components/PieChart/PieChart.tsx

@@ -0,0 +1,40 @@
+import { ResponsivePie } from '@nivo/pie';
+import { PieChartProps } from './types';
+
+import { PieChartBase, PieChartTextBase } from './PieChartBases';
+
+export const PieChart = ({
+  data,
+  as,
+  className,
+  title,
+  children,
+  ...chartProps
+}: PieChartProps) => {
+  return (
+    <PieChartBase as={as} className={className}>
+      <div className="pie-chart-wrapper">
+        <ResponsivePie
+          data={data}
+          isInteractive={false}
+          innerRadius={0.8}
+          enableArcLinkLabels={false}
+          enableArcLabels={false}
+          padAngle={2}
+          cornerRadius={16}
+          activeOuterRadiusOffset={8}
+          colors={{ datum: 'data.color' }}
+          arcLinkLabelsSkipAngle={10}
+          arcLinkLabelsTextColor="#333333"
+          arcLinkLabelsThickness={2}
+          arcLinkLabelsColor={{ from: 'color' }}
+          arcLabelsSkipAngle={10}
+          layers={['arcs']}
+          {...chartProps}
+        />
+        {title && <PieChartTextBase>{title}</PieChartTextBase>}
+      </div>
+      {children}
+    </PieChartBase>
+  );
+};

package/src/components/PieChart/PieChartBases.tsx

@@ -0,0 +1,26 @@
+import styled from '@emotion/styled';
+
+export const PieChartBase = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  & > .pie-chart-wrapper {
+    position: relative;
+    width: 160px;
+    height: 160px;
+  }
+`;
+
+export const PieChartTextBase = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+`;

package/src/components/PieChart/PieChartLegend.tsx

@@ -0,0 +1,74 @@
+import { useTheme } from '@emotion/react';
+import { Fragment } from 'react';
+import Typography from '@components/Typography';
+
+import { PieChartLegendMarker } from './PieChartLegendMarker';
+import { PieChartLegendList } from './PieChartLegendList';
+import { PieChartLegendProps } from './types';
+
+export const PieChartLegend = ({
+  data,
+  colors,
+  renderLabel,
+  renderValue,
+  markerStyles,
+  currency,
+  labelListStyles,
+  valueListStyles,
+  variant = 'valueList',
+}: PieChartLegendProps) => {
+  const theme = useTheme();
+  const isValueList = variant === 'valueList';
+  return (
+    <Fragment>
+      <PieChartLegendList css={labelListStyles}>
+        {data.map((item, index) => {
+          const { id, label, value, legendValue } = item;
+          return (
+            <li key={`tag-${id}`}>
+              <PieChartLegendMarker
+                color={colors[index] || 'purple'}
+                as={'span'}
+                css={markerStyles}
+              />
+              {isValueList ? (
+                <Typography variant="h6">
+                  {typeof renderLabel === 'function'
+                    ? renderLabel(item)
+                    : label}
+                </Typography>
+              ) : (
+                <Typography
+                  variant="subtitle"
+                  css={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                  }}>
+                  <span>
+                    {legendValue as React.ReactNode} {label}
+                  </span>
+                  <span css={{ fontWeight: '400' }}>
+                    {value} {currency}
+                  </span>
+                </Typography>
+              )}
+            </li>
+          );
+        })}
+      </PieChartLegendList>
+      {isValueList && (
+        <PieChartLegendList css={valueListStyles}>
+          {data.map((item) => (
+            <li key={`subtitle-${item.id}`}>
+              <Typography variant="subtitle" color={theme.colors.greyDarker60}>
+                {typeof renderValue === 'function'
+                  ? renderValue(item)
+                  : item.value}
+              </Typography>
+            </li>
+          ))}
+        </PieChartLegendList>
+      )}
+    </Fragment>
+  );
+};

package/src/components/PieChart/PieChartLegendList.tsx

@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+
+export const PieChartLegendList = styled.ul`
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  list-style: none;
+
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  gap: 14px;
+
+  li {
+    display: flex;
+    align-items: center;
+    height: 20px;
+  }
+`;

package/src/components/PieChart/PieChartLegendMarker.tsx

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+import Badge from '@components/Badge';
+
+export const PieChartLegendMarker = styled(Badge)`
+  display: inline-block;
+
+  padding: 0;
+  margin-right: 12px;
+
+  width: 8px;
+  height: 8px;
+`;

package/src/components/PieChart/colorPalettes.ts

@@ -0,0 +1,27 @@
+import { Theme } from '@emotion/react';
+
+export const getBalancePalette = (theme: Theme) => {
+  const legendColorNames = [
+    'yellow',
+    'blue',
+    'green',
+    'yellowWarm',
+    'blueLight',
+    'turquoise',
+    'pink',
+    'purple',
+  ] as unknown as Array<keyof MainColors>;
+
+  const pieChartColors = [
+    theme.colors.yellow,
+    theme.colors.blue,
+    theme.colors.green,
+    theme.colors.yellowLighter,
+    theme.colors.blueLight,
+    theme.colors.turquoise,
+    theme.colors.pink,
+    theme.colors.purple,
+  ] as unknown as string[];
+
+  return { legendColorNames, pieChartColors };
+};

package/src/components/PieChart/index.ts

@@ -0,0 +1,4 @@
+export * from './PieChart';
+export * from './PieChartLegend';
+export * as pieChartPalettes from './colorPalettes';
+export * from './types';

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

@@ -0,0 +1,39 @@
+export const fitnessData = [
+  {
+    // cspell:disable-next-line
+    id: 'XlyNrZpVvNp2Z9LqloS6',
+    date: '2023-05-03T23:00:00.000Z',
+    value: 88,
+    label: 'stretching',
+  },
+  {
+    // cspell:disable-next-line
+    id: 'YthvgItFS3W0Sa3mRW0X',
+    date: '2023-05-03T23:00:00.000Z',
+    value: 55,
+    label: 'cardio',
+  },
+];
+
+export const accountData = [
+  {
+    id: 1,
+    value: 5800,
+    label: 'BTC',
+  },
+  {
+    id: 2,
+    value: 6243,
+    label: 'ETH',
+  },
+  {
+    id: 3,
+    value: 3840,
+    label: 'USDT',
+  },
+  {
+    id: 4,
+    value: 2300,
+    label: 'Other',
+  },
+];

package/src/components/PieChart/types.ts

@@ -0,0 +1,30 @@
+import { SerializedStyles } from '@emotion/react';
+import { ResponsivePie } from '@nivo/pie';
+import { CommonProps } from '../..';
+
+export interface PieChartProps
+  extends CommonProps,
+    React.ComponentProps<typeof ResponsivePie> {
+  title?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+export type PieChartLegendItem = {
+  id: string | number;
+  value: string | number;
+  label: string;
+  [key: string | number | symbol]: unknown;
+};
+
+export interface PieChartLegendProps {
+  data: Array<PieChartLegendItem>;
+  colors: Array<keyof MainColors>;
+  renderValue?: (item: PieChartLegendItem) => NonNullable<React.ReactNode>;
+  renderLabel?: (item: PieChartLegendItem) => NonNullable<React.ReactNode>;
+  className?: string;
+  markerStyles?: SerializedStyles;
+  currency?: string;
+  labelListStyles?: SerializedStyles;
+  valueListStyles?: SerializedStyles;
+  variant?: 'valueList' | 'withoutValueList';
+}

package/src/components/ProgressInfo/ProgressInfo.e2e.ts

@@ -0,0 +1,31 @@
+import { test, Page } from '@playwright/test';
+import { SCREEN_SIZES } from '../../consts';
+
+const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
+const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-progressInfo__`;
+
+const gotoPage = (page: Page) => {
+  return page.goto(
+    'http://localhost:6006/iframe.html?args=&id=charts-progressinfo--default&viewMode=story',
+  );
+};
+
+test.describe('Widgets: ProgressInfo', () => {
+  for (const resolution of Object.keys(SCREEN_SIZES)) {
+    const viewportSize =
+      SCREEN_SIZES[resolution as unknown as keyof typeof SCREEN_SIZES];
+
+    test(`[${resolution}] Renders on extra large screens`, async ({ page }) => {
+      await page.setViewportSize(viewportSize);
+      await gotoPage(page);
+      await page.screenshot({
+        path: `${SCREENSHOT_PREFIX}[w${resolution}px].png`,
+      });
+      await page.getByRole('combobox').click();
+      await page.waitForSelector('[role="listbox"]');
+      await page.screenshot({
+        path: `${SCREENSHOT_PREFIX}dropdown__[w${resolution}px].png`,
+      });
+    });
+  }
+});