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

package/src/components/Activity/Activity.tsx

@@ -1,83 +0,0 @@
-import { useEffect, useState } from 'react';
-import { css } from '@emotion/react';
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  Typography,
-  Wrapper,
-  DropdownOptionProps,
-} from '@ssa-ui-kit/core';
-
-import { ActivityResp } from './types';
-import { contentWrapper } from './styles';
-
-import ActivityItem from './ActivityItem';
-import { DropdownOption } from '@ssa-ui-kit/core';
-import { Dropdown } from '@ssa-ui-kit/core';
-
-export const Activity = ({ data }: { data: ActivityResp }) => {
-  const [selected, setSelected] = useState<string>('');
-  const [options, setOptions] = useState<DropdownOptionProps[]>([]);
-
-  useEffect(() => {
-    if (data == null || typeof data !== 'object') {
-      return;
-    }
-
-    setOptions(
-      Object.keys(data).map((item, index) => ({
-        id: index,
-        value: `${item.charAt(0).toUpperCase()}${item.slice(1)}`,
-      })),
-    );
-  }, [data]);
-
-  useEffect(() => {
-    if (options?.length > 0 && !selected) {
-      handleChange(options[0]);
-    }
-  }, [options]);
-
-  const handleChange = (e: DropdownOptionProps) => {
-    const value = e.value.toString().toLowerCase();
-
-    setSelected(value);
-  };
-
-  return (
-    <Card
-      css={css`
-        border-radius: 20px;
-        padding-inline: 24px;
-        padding-block: 24px;
-      `}>
-      <CardHeader>
-        <Typography variant="h3" weight="bold">
-          Activity
-        </Typography>
-
-        {options?.length > 0 && (
-          <Dropdown selectedItem={options[0]} onChange={handleChange}>
-            {options.map((item, index) => (
-              <DropdownOption key={index} value={item.value} />
-            ))}
-          </Dropdown>
-        )}
-      </CardHeader>
-      <CardContent
-        css={css`
-          width: 100%;
-          flex-direction: column;
-        `}>
-        <Wrapper css={contentWrapper}>
-          {Array.isArray(data[selected]) &&
-            data[selected].map((item, index) => (
-              <ActivityItem key={index} {...item} />
-            ))}
-        </Wrapper>
-      </CardContent>
-    </Card>
-  );
-};

package/src/components/Activity/ActivityItem.tsx

@@ -1,38 +0,0 @@
-import { css } from '@emotion/react';
-
-import { Typography, ProgressBar, ProgressVertical } from '@ssa-ui-kit/core';
-
-import { dateFormatters } from '@ssa-ui-kit/utils';
-
-import { ActivityItemProps } from './types';
-
-const { printDayOfTheWeek } = dateFormatters;
-
-const container = css`
-  display: flex;
-
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-
-  height: 162px;
-  gap: 10px;
-
-  font-size: 11px;
-`;
-
-const ActivityItem = ({ currentValue, date }: ActivityItemProps) => {
-  return (
-    <div css={container}>
-      <ProgressVertical>
-        <ProgressBar percentage={currentValue} color="yellow" />
-      </ProgressVertical>
-
-      <Typography variant="subtitle">
-        {printDayOfTheWeek(new Date(date).getDay())}
-      </Typography>
-    </div>
-  );
-};
-
-export default ActivityItem;

package/src/components/Activity/index.tsx

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

package/src/components/Activity/mockActivityRequest.ts

@@ -1,106 +0,0 @@
-import { ActivityResp } from './types';
-
-export const mealActivityData: ActivityResp = {
-  walking: [
-    {
-      activity: 'walking',
-      date: '2023-04-16T23:00:00.000Z',
-      day: 'Sun',
-      max: 100,
-      currentValue: 83,
-    },
-    {
-      activity: 'walking',
-      date: '2023-04-16T23:00:00.000Z',
-      day: 'Mon',
-      max: 100,
-      currentValue: 53,
-    },
-    {
-      activity: 'walking',
-      date: '2023-04-16T23:00:00.000Z',
-      day: 'Tue',
-      max: 100,
-      currentValue: 54,
-    },
-    {
-      activity: 'walking',
-      date: '2023-04-16T23:00:00.000Z',
-      day: 'Wed',
-      max: 100,
-      currentValue: 49,
-    },
-    {
-      activity: 'walking',
-      date: '2023-04-16T23:00:00.000Z',
-      day: 'Thu',
-      max: 100,
-      currentValue: 70,
-    },
-    {
-      activity: 'walking',
-      date: '2023-04-16T23:00:00.000Z',
-      day: 'Fri',
-      max: 100,
-      currentValue: 8,
-    },
-    {
-      activity: 'walking',
-      date: '2023-04-16T23:00:00.000Z',
-      day: 'Sat',
-      max: 100,
-      currentValue: 90,
-    },
-  ],
-  cycling: [
-    {
-      activity: 'cycling',
-      date: '2023-04-16T23:00:00.000Z',
-      day: 'Sun',
-      max: 100,
-      currentValue: 38,
-    },
-    {
-      activity: 'cycling',
-      date: '2023-04-16T23:00:00.000Z',
-      day: 'Mon',
-      max: 100,
-      currentValue: 35,
-    },
-    {
-      activity: 'cycling',
-      date: '2023-04-16T23:00:00.000Z',
-      day: 'Tue',
-      max: 100,
-      currentValue: 45,
-    },
-    {
-      activity: 'cycling',
-      date: '2023-04-16T23:00:00.000Z',
-      day: 'Wed',
-      max: 100,
-      currentValue: 94,
-    },
-    {
-      activity: 'cycling',
-      date: '2023-04-16T23:00:00.000Z',
-      day: 'Thu',
-      max: 100,
-      currentValue: 7,
-    },
-    {
-      activity: 'cycling',
-      date: '2023-04-16T23:00:00.000Z',
-      day: 'Fri',
-      max: 100,
-      currentValue: 30,
-    },
-    {
-      activity: 'cycling',
-      date: '2023-04-16T23:00:00.000Z',
-      day: 'Sat',
-      max: 100,
-      currentValue: 55,
-    },
-  ],
-};

package/src/components/Activity/styles.ts

@@ -1,12 +0,0 @@
-import { Theme, css } from '@emotion/react';
-
-export const contentWrapper = (theme: Theme) => css`
-  justify-content: center;
-  gap: 20px;
-  flex-direction: row;
-  max-width: 380px;
-
-  ${theme.mediaQueries.md} {
-    gap: 30px;
-  }
-`;

package/src/components/Activity/types.ts

@@ -1,10 +0,0 @@
-export interface ActivityItemProps {
-  id?: string;
-  activity: string;
-  date: string;
-  day?: string;
-  max: number;
-  currentValue: number;
-}
-
-export type ActivityResp = { [key: string]: ActivityItemProps[] };

package/src/components/Bmi/Bmi.spec.Backup.tsx

@@ -1,68 +0,0 @@
-import { screen } from '../../../customTest';
-import Bmi from './index';
-
-describe('BMI', () => {
-  it('Render BMI with default values', () => {
-    render(<Bmi />);
-
-    const calculation = screen.queryByRole('heading', { name: /21.6/i });
-    const info = screen.queryByRole('heading', { name: /you're healthy/i });
-    const pointer = screen.queryByTestId('bmi-pointer');
-
-    expect(calculation).toBeInTheDocument();
-    expect(info).toBeInTheDocument();
-    expect(pointer).toHaveStyle('left: 40%;');
-  });
-
-  it('BMI status healthy', () => {
-    render(<Bmi height={180} weight={66} />);
-
-    const calculation = screen.queryByRole('heading', { name: /20.4/i });
-    const info = screen.queryByRole('heading', { name: /you're healthy/i });
-    const pointer = screen.queryByTestId('bmi-pointer');
-
-    expect(calculation).toBeInTheDocument();
-    expect(info).toBeInTheDocument();
-    expect(pointer).toHaveStyle('left: 40%;');
-  });
-
-  it('BMI status under weight', () => {
-    render(<Bmi height={175} weight={46} />);
-
-    const calculation = screen.queryByRole('heading', { name: /18.5/ });
-    const info = screen.queryByRole('heading', {
-      name: /you're under weight/i,
-    });
-    const pointer = screen.queryByTestId('bmi-pointer');
-
-    expect(calculation).toBeInTheDocument();
-    expect(info).toBeInTheDocument();
-    expect(pointer).toHaveStyle('left: 10%;');
-  });
-
-  it('BMI status overweight', () => {
-    render(<Bmi height={175} weight={86} />);
-
-    const calculation = screen.queryByRole('heading', { name: /28.1/i });
-    const info = screen.queryByRole('heading', {
-      name: /you're overweight/i,
-    });
-    const pointer = screen.queryByTestId('bmi-pointer');
-
-    expect(calculation).toBeInTheDocument();
-    expect(info).toBeInTheDocument();
-    expect(pointer).toHaveStyle('left: 70%;');
-  });
-
-  it('BMI status obese', () => {
-    render(<Bmi height={175} weight={106} />);
-
-    const calculation = screen.queryByRole('heading', { name: /34.6/i });
-    const info = screen.queryByRole('heading', { name: /you're obese/i });
-    const pointer = screen.queryByTestId('bmi-pointer');
-
-    expect(calculation).toBeInTheDocument();
-    expect(info).toBeInTheDocument();
-    expect(pointer).toHaveStyle('left: 90%;');
-  });
-});

package/src/components/Bmi/Bmi.stories.tsx

@@ -1,10 +0,0 @@
-import type { Meta } from '@storybook/react';
-
-import Bmi from './index';
-
-export default {
-  title: 'Fitness/BMI',
-  component: Bmi,
-} as Meta<typeof Bmi>;
-
-export const Default = {};

package/src/components/Bmi/Bmi.tsx

@@ -1,96 +0,0 @@
-import { Fragment, useEffect, useState } from 'react';
-import { css } from '@emotion/react';
-
-import { Card, CardContent, CardHeader, Typography } from '@ssa-ui-kit/core';
-
-import { BmiHeatbar } from './BmiHeatbar';
-import { BmiPointer } from './BmiPointer';
-import { BmiInfo } from './BmiInfo';
-import { BmiLabels } from './BmiLabels';
-
-import { ContentWrapper, TitleWrapper } from './styles';
-import { BmiProps } from './types';
-
-/**
- *
- * UI Component that calculates the Body Mass Index of the user
- */
-export const Bmi = ({ height = 175, weight = 66 }: BmiProps) => {
-  const [info, setInfo] = useState('');
-  const [pointer, setPointer] = useState(0);
-
-  const bmi = Number(((weight / (height * height)) * 10000).toFixed(1));
-
-  const setInfos = {
-    underWeight: () => {
-      setInfo('Under Weight');
-      setPointer(10);
-    },
-    healthy: () => {
-      setInfo('Healthy');
-      setPointer(40);
-    },
-    overweight: () => {
-      setInfo('Overweight');
-      setPointer(70);
-    },
-    obese: () => {
-      setInfo('Obese');
-      setPointer(90);
-    },
-  };
-
-  useEffect(() => {
-    if (bmi < 18.5) {
-      setInfos.underWeight();
-    } else if (bmi > 18.5 && bmi <= 24.9) {
-      setInfos.healthy();
-    } else if (bmi > 24.9 && bmi < 30) {
-      setInfos.overweight();
-    } else {
-      setInfos.obese();
-    }
-  }, [bmi]);
-
-  return (
-    <Fragment>
-      <CardHeader transparent>
-        <div css={TitleWrapper}>
-          <Typography variant="h5" weight="bold">
-            BMI{' '}
-          </Typography>
-          <Typography variant="h6">Body Mass Index</Typography>
-        </div>
-      </CardHeader>
-
-      <Card
-        css={css`
-          box-shadow: 0 10px 40px rgba(29, 22, 23, 0.07);
-          border-radius: 16px;
-          padding-bottom: 40px;
-        `}>
-        <CardHeader>
-          <Typography variant="h2" weight="medium">
-            {bmi}
-          </Typography>
-          <BmiInfo>
-            <Typography variant="subtitle" weight="lighter">
-              You&apos;re {info}
-            </Typography>
-          </BmiInfo>
-        </CardHeader>
-
-        <CardContent
-          css={css`
-            width: 100%;
-          `}>
-          <div css={ContentWrapper}>
-            <BmiPointer data-testid="bmi-pointer" percentage={pointer} />
-            <BmiHeatbar />
-            <BmiLabels />
-          </div>
-        </CardContent>
-      </Card>
-    </Fragment>
-  );
-};

package/src/components/Bmi/BmiHeatbar.tsx

@@ -1,18 +0,0 @@
-import styled from '@emotion/styled';
-
-export const BmiHeatbar = styled.div`
-  width: 100%;
-  height: 14px;
-
-  background: linear-gradient(
-    90deg,
-    #8b60f4 0%,
-    #658fdf 16.67%,
-    #69cdd0 35.42%,
-    #88e4c3 51.04%,
-    #edba5d 68.23%,
-    #ed8f66 84.38%,
-    #f28689 100%
-  );
-  border-radius: 21px;
-`;

package/src/components/Bmi/BmiInfo.tsx

@@ -1,11 +0,0 @@
-import styled from '@emotion/styled';
-
-export const BmiInfo = styled.div`
-  display: flex;
-
-  padding: 8px 16px;
-  background: ${({ theme }) => theme.colors.greyLighter};
-  border-radius: 12px;
-
-  align-items: center;
-`;

package/src/components/Bmi/BmiLabel.tsx

@@ -1,9 +0,0 @@
-import styled from '@emotion/styled';
-
-import { Typography } from '@ssa-ui-kit/core';
-
-export const BmiLabel = styled(Typography)`
-  position: absolute;
-
-  left: 65%;
-`;

package/src/components/Bmi/BmiLabels.tsx

@@ -1,33 +0,0 @@
-import { css } from '@emotion/react';
-
-import { BmiLabel } from './BmiLabel';
-
-export const BmiLabels = () => (
-  <div
-    css={css`
-      position: relative;
-      margin-top: 5px;
-    `}>
-    <BmiLabel
-      variant={'subtitle'}
-      css={css`
-        left: 20%;
-      `}>
-      18.5
-    </BmiLabel>
-    <BmiLabel
-      variant={'subtitle'}
-      css={css`
-        left: 60%;
-      `}>
-      25
-    </BmiLabel>
-    <BmiLabel
-      variant={'subtitle'}
-      css={css`
-        left: 80%;
-      `}>
-      30
-    </BmiLabel>
-  </div>
-);

package/src/components/Bmi/BmiPointer.tsx

@@ -1,15 +0,0 @@
-import styled from '@emotion/styled';
-
-export const BmiPointer = styled.div<{ percentage: number }>`
-  position: absolute;
-
-  left: ${({ percentage }) => percentage}%;
-  top: 0;
-
-  width: 14px;
-  height: 14px;
-
-  background: #2b2d31;
-  box-shadow: -4px 4px 10px rgba(42, 48, 57, 0.2);
-  border-radius: 19px;
-`;

package/src/components/Bmi/index.tsx

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

package/src/components/Bmi/styles.ts

@@ -1,18 +0,0 @@
-import { css, Theme } from '@emotion/react';
-
-export const TitleWrapper = (theme: Theme) => css`
-  display: flex;
-
-  h6 {
-    line-height: 1.625rem;
-    margin-left: 10px;
-
-    color: ${theme.colors.greyDarker60};
-  }
-`;
-
-export const ContentWrapper = css`
-  position: relative;
-  width: 100%;
-  padding-top: 20px;
-`;

package/src/components/Bmi/types.ts

@@ -1,4 +0,0 @@
-export interface BmiProps {
-  height?: number;
-  weight?: number;
-}

package/src/components/BotsTable/BotsTable.e2e.ts

@@ -1,77 +0,0 @@
-import { test, expect, Page } from '@playwright/test';
-import { SCREEN_SIZES } from '../../consts';
-
-const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
-let SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-bots-table--`;
-
-const gotoPage = (page: Page) => {
-  return page.goto(
-    'http://localhost:6007/iframe.html?args=&id=trading-botstable--bots-table&viewMode=story',
-  );
-};
-
-test.describe('Industry Specific Widgets - Training - BotsTable', () => {
-  test('Renders correctly', async ({ page }) => {
-    await page.setViewportSize(SCREEN_SIZES[1920]);
-    await gotoPage(page);
-    await expect(page.getByText('Bot name 1')).toBeVisible();
-  });
-
-  test('Opens menu with copy/archive items', async ({ page }) => {
-    await page.setViewportSize(SCREEN_SIZES[1920]);
-    await gotoPage(page);
-    await page
-      .getByRole('row', {
-        name: 'Bot name 6 27.07.23 Kraken Pending ETH/USD -100 USD Arrow Down -15% Arrow Down More vertical',
-      })
-      .getByTestId('more-trigger-button')
-      .click();
-
-    await page.screenshot({
-      path: `${SCREENSHOT_PREFIX}menu-opened_[w1920px].png`,
-    });
-  });
-
-  test('"Run Reason" modal should be shown', async ({ page }) => {
-    await page.setViewportSize(SCREEN_SIZES[1920]);
-    await gotoPage(page);
-    await page
-      .getByRole('row', {
-        name: 'Bot name 6 27.07.23 Kraken Pending ETH/USD -100 USD Arrow Down -15% Arrow Down More vertical',
-      })
-      .getByTestId('run-reason-trigger-button')
-      .click();
-
-    await page.screenshot({
-      path: `${SCREENSHOT_PREFIX}run-reason-modal_[w1920px].png`,
-    });
-  });
-});
-
-const gotoPageNoControlOrders = (page: Page) => {
-  return page.goto(
-    'http://localhost:6007/iframe.html?args=&id=trading-botstable--no-control-orders&viewMode=story',
-  );
-};
-
-SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-bots-table--no-control-orders--`;
-
-test.describe('Industry Specific Widgets - Training - BotsTable (NoControlOrders)', () => {
-  test('Renders correctly', async ({ page }) => {
-    await page.setViewportSize(SCREEN_SIZES[1920]);
-    await gotoPageNoControlOrders(page);
-    await expect(
-      page.locator('tr:nth-child(6)').getByText('Yevgen 2'),
-    ).toBeVisible();
-  });
-
-  test('Opens menu with Liquidate/Change Price/... items', async ({ page }) => {
-    await page.setViewportSize(SCREEN_SIZES[1920]);
-    await gotoPageNoControlOrders(page);
-    await page.locator('tr:nth-child(6) > td:nth-child(11) > button').click();
-
-    await page.screenshot({
-      path: `${SCREENSHOT_PREFIX}menu-opened_[w1920px].png`,
-    });
-  });
-});