@ssa-ui-kit/widgets 1.0.12 → 1.1.55-canary-79b6b0d-20250224

package/src/components/AccountBalance/BalancePieChart.tsx

@@ -1,127 +0,0 @@
-import { useState } from 'react';
-import { withTheme, css } from '@emotion/react';
-import {
-  PieChart,
-  PieChartFeatures,
-  PieChartLegend,
-  pieChartPalettes,
-} from '@ssa-ui-kit/core';
-import { BalancePieChartTitle } from './BalancePieChartTitle';
-
-import { BalancePieChartProps } from './types';
-
-export const BalancePieChart = withTheme(
-  ({
-    total,
-    currency,
-    data,
-    theme,
-    chartColorPalette,
-    legendColorPalette,
-    variant = 'valueList',
-    pieChartProps = {},
-    fullscreenModeFeature = false,
-    activeHighlight = false,
-    onFullscreenModeChange,
-  }: BalancePieChartProps) => {
-    const [isFullscreenMode, setFullscreenMode] = useState(false);
-    const { legendColorNames, pieChartColors } =
-      pieChartPalettes.getBalancePalette(theme);
-    const featuresList = new Set<PieChartFeatures>();
-
-    if (Object.keys(pieChartProps.cardProps || {}).length) {
-      featuresList.add('header');
-    }
-    if (fullscreenModeFeature) {
-      featuresList.add('header');
-      featuresList.add('fullscreenMode');
-    }
-
-    const handleFullscreenModeChange = (pieChartFullscreenMode: boolean) => {
-      setFullscreenMode(pieChartFullscreenMode);
-      onFullscreenModeChange?.(pieChartFullscreenMode);
-    };
-    return (
-      <PieChart
-        data={data}
-        features={Array.from(featuresList)}
-        colors={chartColorPalette || pieChartColors}
-        onFullscreenModeChange={handleFullscreenModeChange}
-        animate={false}
-        title={
-          <BalancePieChartTitle
-            theme={theme}
-            total={total}
-            currency={currency}
-          />
-        }
-        css={
-          !isFullscreenMode &&
-          css`
-            div:nth-of-type(1) {
-              width: 100px;
-              height: 100px;
-            }
-
-            ${theme.mediaQueries.lg} {
-              div:nth-of-type(1) {
-                width: 120px;
-                height: 120px;
-              }
-            }
-          `
-        }
-        width={'100%'}
-        {...pieChartProps}>
-        <PieChartLegend
-          data={data}
-          colors={legendColorPalette || legendColorNames}
-          variant={variant}
-          currency={currency}
-          activeHighlight={activeHighlight}
-          markerStyles={css`
-            width: 10px;
-            height: 10px;
-            margin-right: 5px;
-          `}
-          labelListStyles={css`
-            gap: 0;
-            li {
-              height: 22.5px;
-            }
-            h6 {
-              font-weight: 700;
-              line-height: 22.5px;
-              font-size: ${!isFullscreenMode && '12px'};
-              ${theme.mediaQueries.md} {
-                font-size: ${!isFullscreenMode && '13px'};
-              }
-              ${theme.mediaQueries.lg} {
-                font-size: ${!isFullscreenMode && '14px'};
-              }
-            }
-          `}
-          valueListStyles={css`
-            gap: 0;
-            li {
-              height: 22.5px;
-            }
-            h6 {
-              line-height: 22.5px;
-              color: ${theme.colors.greyDarker80};
-              font-size: ${isFullscreenMode ? '12px' : '11px'};
-              ${theme.mediaQueries.lg} {
-                font-size: 12px;
-              }
-            }
-          `}
-          renderValue={({ id, legendValue }) =>
-            id === 'Other'
-              ? legendValue + ' ' + currency
-              : legendValue + ' ' + id
-          }
-        />
-      </PieChart>
-    );
-  },
-);

package/src/components/AccountBalance/BalancePieChartTitle.tsx

@@ -1,54 +0,0 @@
-import { withTheme, css } from '@emotion/react';
-import { Typography, useFullscreenMode } from '@ssa-ui-kit/core';
-import { BalancePieChartTitleProps } from './types';
-
-export const BalancePieChartTitle = withTheme(
-  ({ total, currency, theme }: BalancePieChartTitleProps) => {
-    const { isFullscreenMode } = useFullscreenMode();
-    return (
-      <Typography
-        variant="body2"
-        weight="bold"
-        color={theme.colors.greyDarker}
-        css={
-          isFullscreenMode
-            ? css`
-                font-size: 24px !important;
-                font-weight: 500;
-              `
-            : css`
-                font-size: 12px;
-                padding: 0 14px;
-                line-height: 1;
-              `
-        }>
-        {total}
-        <Typography
-          variant="body2"
-          weight="regular"
-          as="span"
-          color={theme.colors.greyDarker80}
-          css={
-            isFullscreenMode
-              ? css`
-                  font-size: 18px;
-                  margin-left: 10px;
-                `
-              : css`
-                  display: block;
-                  font-size: 12px;
-                  ${theme.mediaQueries.md} {
-                    font-size: 13px;
-                  }
-                  ${theme.mediaQueries.lg} {
-                    font-size: 14px;
-                  }
-                  line-height: 25px;
-                `
-          }>
-          {currency}
-        </Typography>
-      </Typography>
-    );
-  },
-);

package/src/components/AccountBalance/index.ts

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

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

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

@@ -1,41 +0,0 @@
-import type { To } from 'react-router-dom';
-import { MainColors, PieChartProps, Theme } from '@ssa-ui-kit/core';
-
-interface WithTheme {
-  theme: Theme;
-}
-
-type BalanceBase = {
-  total: number | string;
-  currency: string;
-  legendColorPalette?: Array<keyof MainColors | string>;
-  chartColorPalette?: string[];
-  variant?: 'valueList' | 'withoutValueList';
-  fullscreenModeFeature?: boolean;
-  data: Array<{
-    id: string | number;
-    value: number;
-    label: string;
-    [key: string | number | symbol]: unknown;
-  }>;
-};
-
-export interface BalancePieChartProps extends WithTheme, BalanceBase {
-  pieChartProps?: Partial<PieChartProps>;
-  activeHighlight?: boolean;
-  onFullscreenModeChange?: (isFullscreenMode: boolean) => void;
-}
-
-export interface AccountBalanceProps extends BalanceBase {
-  title?: string;
-  className?: string;
-  onClick?: () => void;
-  link?: To;
-  activeHighlight?: boolean;
-  widgetMaxWidth?: string;
-}
-
-export type BalancePieChartTitleProps = Pick<
-  BalancePieChartProps,
-  'total' | 'currency' | 'theme'
->;

package/src/components/AccountKeys/AccountKeys.specBackup.tsx

@@ -1,43 +0,0 @@
-import userEvent from '@testing-library/user-event';
-import { StoryComponent } from './stories/StoryComponent';
-
-describe('AccountKeys', () => {
-  it('Renders with title', () => {
-    const { getByText } = render(<StoryComponent onDelete={jest.fn()} />);
-
-    getByText('Account Name');
-  });
-
-  it('Renders with delete button', async () => {
-    const user = userEvent.setup();
-    const mockOnClick = jest.fn();
-    const { getByRole } = render(<StoryComponent onDelete={mockOnClick} />);
-
-    const deleteButton = getByRole('button', { name: 'Bin' });
-    await user.click(deleteButton);
-    expect(mockOnClick).toBeCalledTimes(1);
-  });
-
-  it('Renders with API key and hidden Secret key', () => {
-    const { getByText } = render(<StoryComponent onDelete={jest.fn()} />);
-
-    getByText('123456789012345678901234567890');
-    getByText('******');
-  });
-
-  it('Clicks on hidden/unhidden secret key', async () => {
-    const user = userEvent.setup();
-    const mockOnClick = jest.fn();
-    const { getByRole, getByText } = render(
-      <StoryComponent onDelete={mockOnClick} />,
-    );
-
-    const invisibleIcon = getByRole('button', { name: 'Invisible' });
-    await user.click(invisibleIcon);
-    getByText('1234567890');
-
-    const visibleIcon = getByRole('button', { name: 'Visible' });
-    await user.click(visibleIcon);
-    getByText('******');
-  });
-});

package/src/components/AccountKeys/AccountKeys.stories.tsx

@@ -1,14 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { AccountKeys } from './AccountKeys';
-import { StoryComponent } from './stories/StoryComponent';
-
-export default {
-  title: 'Trading/AccountKeys',
-  component: AccountKeys,
-} as Meta<typeof AccountKeys>;
-
-export const Default: StoryObj<typeof AccountKeys> = () => (
-  <StoryComponent onDelete={() => alert('Account Deleted!')} />
-);
-
-Default.args = {};

package/src/components/AccountKeys/AccountKeys.tsx

@@ -1,73 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useTheme } from '@emotion/react';
-import {
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  Icon,
-  Typography,
-} from '@ssa-ui-kit/core';
-import { AccountKeysProps } from './types';
-import * as S from './styles';
-
-export const AccountKeys = ({
-  title,
-  apiKey,
-  secretKey,
-  onDelete,
-  onVisibilityChange,
-  isDisabled,
-}: AccountKeysProps) => {
-  const [isVisible, setIsVisible] = useState(false);
-  const theme = useTheme();
-  const placeholder = <span>******</span>;
-
-  const handleClickVisible = () => {
-    setIsVisible((prev) => !prev);
-  };
-
-  useEffect(() => {
-    onVisibilityChange(isVisible);
-  }, [isVisible]);
-
-  return (
-    <Card noShadow css={S.Card} className={isDisabled ? 'disabled' : ''}>
-      <CardHeader css={S.CardHeader}>
-        <Typography variant="h5" weight="bold">
-          {title}
-        </Typography>
-        <Button css={S.DeleteButton} onClick={onDelete}>
-          <Icon name="bin" size={15} color={theme.colors.greyDropdownFocused} />
-        </Button>
-      </CardHeader>
-      <CardContent css={S.CardContent} direction="column">
-        <div css={S.KeyItem}>
-          <Typography variant="h6" color={theme.colors.greyDropdownFocused}>
-            API Key
-          </Typography>
-          <Typography variant="h5" weight="bold" css={S.LetterWrap}>
-            {apiKey}
-          </Typography>
-        </div>
-        <div css={S.KeyItem}>
-          <Typography variant="h6" color={theme.colors.greyDropdownFocused}>
-            Secret Key
-          </Typography>
-          <Typography variant="h5" weight="bold" css={S.SecretKey}>
-            <span css={S.LetterWrap}>
-              {isVisible ? secretKey || placeholder : placeholder}
-            </span>
-            <Button css={S.VisibleButton} onClick={handleClickVisible}>
-              <Icon
-                name={isVisible ? 'visible' : 'invisible'}
-                size={20}
-                color={theme.colors.greyDropdownFocused}
-              />
-            </Button>
-          </Typography>
-        </div>
-      </CardContent>
-    </Card>
-  );
-};

package/src/components/AccountKeys/helpers.ts

@@ -1,7 +0,0 @@
-const secretKey = '1234567890';
-
-export const getMockData = () => {
-  return new Promise<string>((resolve) => {
-    resolve(secretKey);
-  });
-};

package/src/components/AccountKeys/index.ts

@@ -1,2 +0,0 @@
-export { AccountKeys } from './AccountKeys';
-export * from './types';

package/src/components/AccountKeys/stories/StoryComponent.tsx

@@ -1,33 +0,0 @@
-import { useState } from 'react';
-import { AccountKeys } from '../AccountKeys';
-import { getMockData } from '../helpers';
-
-interface onDelete {
-  onDelete: () => void;
-}
-
-export const StoryComponent = ({ onDelete }: onDelete) => {
-  const [isDisabled, setIsDisabled] = useState(false);
-  const [secretKey, setSecretKey] = useState('');
-
-  const handleClickVisible = (isVisible: boolean) => {
-    if (isVisible) {
-      setIsDisabled(true);
-      getMockData().then((data) => {
-        setSecretKey(data);
-        setIsDisabled(false);
-      });
-    }
-  };
-
-  return (
-    <AccountKeys
-      title="Account Name"
-      apiKey="123456789012345678901234567890"
-      secretKey={secretKey}
-      onDelete={onDelete}
-      onVisibilityChange={handleClickVisible}
-      isDisabled={isDisabled}
-    />
-  );
-};

package/src/components/AccountKeys/styles.ts

@@ -1,87 +0,0 @@
-import { Theme, css } from '@emotion/react';
-
-export const Card = (theme: Theme) => css`
-  box-shadow: 0 10px 40px 0 ${theme.colors.greyShadow};
-  padding: 0;
-  border-radius: 20px;
-
-  &.disabled {
-    pointer-events: none;
-  }
-`;
-
-export const CardHeader = (theme: Theme) => css`
-  align-items: center;
-  background: ${theme.colors.greyLighter};
-  padding: 10px;
-  border-radius: 20px 20px 0 0;
-  margin-bottom: 0;
-
-  ${theme.mediaQueries.md} {
-    padding: 15px 10px 15px 30px;
-  }
-`;
-
-export const DeleteButton = (theme: Theme) => css`
-  height: auto;
-  background: none;
-  box-shadow: none;
-
-  &:hover,
-  &:focus {
-    background: none;
-    box-shadow: none;
-  }
-
-  &:hover {
-    svg path {
-      fill: ${theme.colors.greyDarker};
-    }
-  }
-
-  ${theme.mediaQueries.md} {
-    padding: 12px;
-  }
-`;
-
-export const CardContent = (theme: Theme) => css`
-  width: 100%;
-  padding: 10px;
-
-  ${theme.mediaQueries.md} {
-    padding: 13px 30px 20px;
-  }
-`;
-
-export const KeyItem = css`
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-
-  &:not(:last-child) {
-    margin-bottom: 20px;
-  }
-`;
-
-export const VisibleButton = css`
-  height: auto;
-  padding: 0;
-  background: none;
-  box-shadow: none;
-
-  &:hover,
-  &:focus {
-    background: none;
-    box-shadow: none;
-  }
-`;
-
-export const SecretKey = css`
-  display: flex;
-  align-items: center;
-  gap: 7px;
-`;
-
-export const LetterWrap = css`
-  overflow-wrap: anywhere;
-`;

package/src/components/AccountKeys/types.ts

@@ -1,8 +0,0 @@
-export interface AccountKeysProps {
-  title: string | JSX.Element;
-  apiKey: string;
-  secretKey: string;
-  onDelete: () => void;
-  onVisibilityChange: (e: boolean) => void;
-  isDisabled?: boolean;
-}

package/src/components/Activity/Activity.specBackup.tsx

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

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