@ssa-ui-kit/widgets 0.0.30-alpha → 0.0.31-alpha

package/src/components/Pagination/Pagination.tsx

@@ -1,66 +0,0 @@
-import styled from '@emotion/styled';
-import { usePaginationRange } from '@ssa-ui-kit/hooks';
-
-import { ArrowButton } from './ArrowButton';
-import { PaginationButtons } from './PaginationButtons';
-
-import { PaginationProps } from './types';
-import { usePaginationContext } from './PaginationContext';
-
-const Nav = styled.nav``;
-
-const Pagination = ({
-  pagesCount,
-  className,
-  as,
-  ariaLabel,
-  isDisabled,
-}: PaginationProps) => {
-  const { page, setPage } = usePaginationContext();
-  const range = usePaginationRange({ pagesCount, selectedPage: page });
-
-  return (
-    <Nav className={className} as={as} aria-label={ariaLabel || 'Pagination'}>
-      <ArrowButton
-        direction="left"
-        onClick={() => {
-          if (page) {
-            setPage(page - 1);
-          }
-        }}
-        isDisabled={
-          isDisabled ||
-          pagesCount == null ||
-          pagesCount <= 1 ||
-          page == null ||
-          page === 1
-        }
-        css={{ marginRight: '12px' }}
-      />
-      <PaginationButtons
-        range={range}
-        selectedPage={page}
-        onClick={setPage}
-        isDisabled={isDisabled}
-      />
-      <ArrowButton
-        direction="right"
-        onClick={() => {
-          if (page) {
-            setPage(page + 1);
-          }
-        }}
-        isDisabled={
-          isDisabled ||
-          pagesCount == null ||
-          pagesCount <= 1 ||
-          page == null ||
-          page === pagesCount
-        }
-        css={{ marginLeft: '7px' }}
-      />
-    </Nav>
-  );
-};
-
-export default Pagination;

package/src/components/Pagination/PaginationButtons.tsx

@@ -1,63 +0,0 @@
-import { useMemo } from 'react';
-import { useTheme } from '@emotion/react';
-import { Button } from '@ssa-ui-kit/core';
-
-import { pageBtnStyles, selectedPageBtnStyles } from './styles';
-import { PaginationButtonsProps, PageButtonProps } from './types';
-
-const Break = () => <span css={{ cursor: 'default' }}>...</span>;
-
-const PageButton = ({
-  onClick,
-  isSelected,
-  page,
-  isDisabled,
-}: PageButtonProps) => {
-  const theme = useTheme();
-  const styles = useMemo(() => {
-    return isSelected ? selectedPageBtnStyles(theme) : pageBtnStyles(theme);
-  }, [isSelected]);
-
-  return (
-    <Button
-      size="small"
-      variant="secondary"
-      isDisabled={isDisabled}
-      onClick={
-        isSelected
-          ? () => {
-              /*no-op*/
-            }
-          : onClick
-      }
-      css={styles}
-      aria-label={isSelected ? `Current page ${page}` : `Go to page ${page}`}
-      aria-current={isSelected}>
-      {page}
-    </Button>
-  );
-};
-
-export const PaginationButtons = ({
-  range,
-  selectedPage,
-  onClick,
-  isDisabled,
-}: PaginationButtonsProps) => {
-  return (
-    Array.isArray(range) &&
-    range.map((page, index) => {
-      return page === -1 ? (
-        <Break key={index} />
-      ) : (
-        <PageButton
-          key={index}
-          page={page}
-          isSelected={page === selectedPage}
-          onClick={() => onClick(page)}
-          isDisabled={isDisabled}
-        />
-      );
-    })
-  );
-};

package/src/components/Pagination/PaginationContext.tsx

@@ -1,23 +0,0 @@
-import { createContext, useState, useContext } from 'react';
-import {
-  PaginationContextProps,
-  PaginationContextProviderProps,
-} from './types';
-
-export const PaginationContext = createContext<PaginationContextProps>(
-  {} as PaginationContextProps,
-);
-
-export const usePaginationContext = () => useContext(PaginationContext);
-
-export const PaginationContextProvider = ({
-  selectedPage,
-  children,
-}: PaginationContextProviderProps) => {
-  const [page, setPage] = useState(selectedPage);
-  return (
-    <PaginationContext.Provider value={{ page, setPage }}>
-      {children}
-    </PaginationContext.Provider>
-  );
-};

package/src/components/Pagination/WithPagination.tsx

@@ -1,14 +0,0 @@
-import { PaginationContextProvider } from '.';
-
-export const WithPagination = <T extends object>(
-  Component: React.ComponentType<T>,
-) => {
-  const decoratedComp = (props: T) => (
-    <PaginationContextProvider selectedPage={1}>
-      <Component {...props} />
-    </PaginationContextProvider>
-  );
-
-  decoratedComp.displayName = `WithPagination(${Component.displayName})`;
-  return decoratedComp;
-};

package/src/components/Pagination/index.ts

@@ -1,4 +0,0 @@
-export { default as Pagination } from './Pagination';
-export * from './types';
-export * from './PaginationContext';
-export * from './WithPagination';

package/src/components/Pagination/styles.tsx

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

@@ -1,38 +0,0 @@
-import { CommonProps } from '@ssa-ui-kit/core';
-
-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

@@ -1,97 +0,0 @@
-import { css } from '@emotion/react';
-import { MainColors } from '@ssa-ui-kit/core';
-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

@@ -1,129 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { css, useTheme } from '@emotion/react';
-import { MainColors, Typography } from '@ssa-ui-kit/core';
-
-import { PieChart, PieChartLegend, pieChartPalettes } from './index';
-import { fitnessData, accountData } from './stories/fixtures';
-
-export default {
-  title: 'Widgets/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

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

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

@@ -1,74 +0,0 @@
-import { useTheme } from '@emotion/react';
-import { Fragment } from 'react';
-import { Typography } from '@ssa-ui-kit/core';
-
-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

@@ -1,19 +0,0 @@
-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;
-  }
-`;