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

package/src/components/TradingScoreboard/TradingScoreboard.tsx

@@ -1,41 +0,0 @@
-import { TradingInfoCard } from '@components/TradingInfoCard';
-import TradingScoreboardBase from './TradingScoreboardBase';
-import { TradingScoreboardProps } from './types';
-
-const TradingScoreboard = ({
-  items,
-  onClick,
-  renderCard,
-  ...props
-}: TradingScoreboardProps) => {
-  return (
-    <div>
-      <TradingScoreboardBase {...props}>
-        {items.map((item, index) => {
-          return (
-            <div key={index}>
-              {typeof renderCard === 'function' ? (
-                renderCard(item, onClick)
-              ) : (
-                <TradingInfoCard
-                  value={item.value}
-                  unit={item.unit}
-                  title={item.title}
-                  icon={item.icon}
-                  link={item.link}
-                  onClick={() => {
-                    if (typeof onClick === 'function') {
-                      onClick(item);
-                    }
-                  }}
-                />
-              )}
-            </div>
-          );
-        })}
-      </TradingScoreboardBase>
-    </div>
-  );
-};
-
-export default TradingScoreboard;

package/src/components/TradingScoreboard/TradingScoreboardBase.tsx

@@ -1,17 +0,0 @@
-import styled from '@emotion/styled';
-
-const TradingScoreboardBase = styled.div<{ itemsPerRow?: number }>`
-  display: grid;
-  gap: 5px;
-  grid-auto-flow: column;
-  overflow: auto;
-
-  ${({ theme }) => theme.mediaQueries.md} {
-    grid-template-columns: ${({ itemsPerRow }) =>
-      itemsPerRow && `repeat(${itemsPerRow}, 1fr)`};
-    grid-auto-flow: inherit;
-    overflow: inherit;
-  }
-`;
-
-export default TradingScoreboardBase;

package/src/components/TradingScoreboard/helpers.tsx

@@ -1,134 +0,0 @@
-import { Icon } from '@ssa-ui-kit/core';
-
-export const defaultBoardArr = [
-  {
-    value: (
-      <div>
-        <Icon name="stats" color="gold" size={16} />
-        <span css={{ marginLeft: '10px' }}>Binance</span>
-      </div>
-    ),
-    title: 'Exchange',
-  },
-  {
-    value: 'Account name',
-    title: 'Account',
-  },
-  {
-    value: 'Grid v7',
-    title: 'Strategy',
-  },
-  {
-    value: 'ETH/USDT',
-    title: 'Pairs',
-  },
-  {
-    value: '25',
-    title: 'Orders',
-  },
-  {
-    value: '27.07.23',
-    unit: '4:22:23 pm',
-    title: 'Start Date',
-  },
-  {
-    value: '30.07.23',
-    unit: '4:22:23 pm',
-    title: 'End date',
-  },
-  {
-    value: '4d 5h 36m 2s',
-    title: 'Launch duration',
-  },
-  {
-    value: '25',
-    unit: '%',
-    title: 'ROI',
-    icon: <Icon name="arrow-up" color="#2CA24D" size={16} />,
-  },
-  {
-    value: '340.025',
-    unit: 'USD',
-    title: 'PNL',
-    icon: <Icon name="arrow-up" color="#2CA24D" size={16} />,
-  },
-];
-
-export const oneLineBoardArr = [
-  {
-    value: '16',
-    title: 'Exchanges',
-  },
-  {
-    value: '6',
-    title: 'Accounts',
-  },
-  {
-    value: '62',
-    title: 'Orders',
-  },
-  {
-    value: '500.125',
-    unit: 'USD',
-    title: 'Turnover',
-  },
-  {
-    value: '340',
-    unit: 'USD',
-    title: 'PNL',
-    icon: <Icon name="arrow-up" color="#2CA24D" size={16} />,
-  },
-  {
-    value: '25',
-    unit: '%',
-    title: 'ROI',
-    icon: <Icon name="arrow-up" color="#2CA24D" size={16} />,
-  },
-  {
-    value: '15',
-    title: 'Errors',
-  },
-];
-
-export const linkBoardArr = [
-  {
-    value: '16',
-    title: 'Exchanges',
-    link: '/Exchanges',
-  },
-  {
-    value: '6',
-    title: 'Accounts',
-    link: '/Accounts',
-  },
-  {
-    value: '62',
-    title: 'Orders',
-    link: '/Orders',
-  },
-  {
-    value: '500.025',
-    unit: 'USD',
-    title: 'Turnover',
-    link: '/Turnover',
-  },
-  {
-    value: '340',
-    unit: 'USD',
-    title: 'PNL',
-    icon: <Icon name="arrow-up" color="#2CA24D" size={16} />,
-    link: '/PNL',
-  },
-  {
-    value: '25',
-    unit: '%',
-    title: 'ROI',
-    icon: <Icon name="arrow-up" color="#2CA24D" size={16} />,
-    link: '/ROI',
-  },
-  {
-    value: '15',
-    title: 'Errors',
-    link: '/Errors',
-  },
-];

package/src/components/TradingScoreboard/index.ts

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

package/src/components/TradingScoreboard/types.ts

@@ -1,18 +0,0 @@
-import { TradingInfoCardProps } from '@components/TradingInfoCard/types';
-import { SerializedStyles } from '@emotion/react';
-
-type TradingScoreboardItem = Pick<
-  TradingInfoCardProps,
-  'value' | 'unit' | 'title' | 'icon' | 'link'
->;
-
-export interface TradingScoreboardProps {
-  itemsPerRow: number;
-  items: Array<TradingScoreboardItem>;
-  onClick?: (item: TradingScoreboardItem) => void;
-  renderCard?: (
-    item: TradingScoreboardItem,
-    onClick?: (item: TradingScoreboardItem) => void,
-  ) => React.ReactNode;
-  css?: SerializedStyles;
-}

package/src/components/UpcomingWorkouts/UpcomingWorkoutCard.tsx

@@ -1,64 +0,0 @@
-import { useTheme, css } from '@emotion/react';
-
-import {
-  Avatar,
-  Button,
-  Card,
-  CardContent,
-  Wrapper,
-  Typography,
-  Icon,
-} from '@ssa-ui-kit/core';
-
-import { UpcomingWorkoutCardProps } from './types';
-import { contentWrapper } from './style';
-
-/**
- *
- * UI Component that use CardList to render a list of upcoming workouts
- */
-export const UpcomingWorkoutCard = ({
-  image,
-  title,
-  workoutTime,
-  renderDetails,
-  onClick,
-}: UpcomingWorkoutCardProps) => {
-  const theme = useTheme();
-  return (
-    <Card noShadow>
-      <Wrapper direction="row">
-        <Avatar size={42} image={image} />
-
-        <CardContent
-          css={css`
-            width: calc(100% - 42px);
-          `}>
-          <Wrapper direction="column">
-            <div css={contentWrapper}>
-              <Typography variant="h6">{title}</Typography>
-              <Button
-                endIcon={<Icon name="more" />}
-                variant="tertiary"
-                size="small"
-                onClick={onClick}
-              />
-            </div>
-
-            <div css={contentWrapper}>
-              <Typography
-                variant="subtitle"
-                color={theme.colors.greyDarker60}
-                as="p">
-                {renderDetails()}
-              </Typography>
-              <Typography variant="subtitle" as="p">
-                {workoutTime}
-              </Typography>
-            </div>
-          </Wrapper>
-        </CardContent>
-      </Wrapper>
-    </Card>
-  );
-};

package/src/components/UpcomingWorkouts/UpcomingWorkouts.specBackup.tsx

@@ -1,56 +0,0 @@
-import { fireEvent, screen, waitFor } from '../../../customTest';
-import UpcomingWorkouts from './index';
-
-describe('UpcomingWorkouts', () => {
-  it('Render component', async () => {
-    const mockClick = jest.fn();
-
-    render(
-      <UpcomingWorkouts
-        workouts={[
-          {
-            id: 'cardio_training',
-            image:
-              'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fmat%2Fmat_42.png?alt=media&token=462a4e3c-4e57-4f76-aad3-97b72c75b4ff',
-            title: 'HIIT Cardio training',
-            workoutTime: '8:00 AM',
-            handleClick: mockClick,
-            details: {
-              exercises: 40,
-              minutes: 20,
-            },
-          },
-          {
-            id: 'other_training',
-            image:
-              'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fmat%2Fmat_42.png?alt=media&token=462a4e3c-4e57-4f76-aad3-97b72c75b4ff',
-            title: 'Other training',
-            workoutTime: '8:00 AM',
-            handleClick: mockClick,
-            details: {
-              exercises: 40,
-              minutes: 20,
-            },
-          },
-        ]}
-      />,
-    );
-
-    await waitFor(async () => {
-      const list = await screen.findAllByRole('listitem');
-      const itemA = await screen.findByText('HIIT Cardio training');
-      const itemB = await screen.findByText('Other training');
-
-      expect(list.length).toBe(2);
-      expect(itemA).toBeInTheDocument();
-      expect(itemB).toBeInTheDocument();
-
-      const btn = screen.queryAllByRole('button')[0];
-
-      await fireEvent.click(btn);
-
-      expect(mockClick).toHaveBeenCalled();
-      expect(mockClick).toHaveBeenCalledTimes(1);
-    });
-  });
-});

package/src/components/UpcomingWorkouts/UpcomingWorkouts.stories.tsx

@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { UpcomingWorkouts } from './UpcomingWorkouts';
-
-export default {
-  title: 'Fitness/UpcomingWorkouts',
-  component: UpcomingWorkouts,
-} as Meta<typeof UpcomingWorkouts>;
-
-export const Default: StoryObj<typeof UpcomingWorkouts> = () => {
-  return (
-    <div style={{ background: '#f1f1f1', padding: 20 }}>
-      <UpcomingWorkouts
-        workouts={[
-          {
-            id: 'cardio_training',
-            image:
-              'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fmat%2Fmat_42.png?alt=media&token=462a4e3c-4e57-4f76-aad3-97b72c75b4ff',
-            title: 'HIIT Cardio training',
-            workoutTime: '8:00 AM',
-            details: {
-              exercises: 40,
-              minutes: 20,
-            },
-          },
-        ]}
-      />
-    </div>
-  );
-};
-
-Default.storyName = 'UpcomingWorkouts';

package/src/components/UpcomingWorkouts/UpcomingWorkouts.tsx

@@ -1,27 +0,0 @@
-import { Fragment } from 'react';
-
-import { CardList } from '@ssa-ui-kit/core';
-
-import { UpcomingWorkoutCard } from './UpcomingWorkoutCard';
-
-import { UpcomingWorkoutsProps } from './types';
-
-export const UpcomingWorkouts = ({ workouts }: UpcomingWorkoutsProps) => (
-  <CardList
-    title="Upcoming Workout"
-    items={workouts}
-    renderItem={(workout) => (
-      <UpcomingWorkoutCard
-        image={workout.image}
-        title={workout.title}
-        workoutTime={workout.workoutTime}
-        onClick={workout.handleClick}
-        renderDetails={() => (
-          <Fragment>
-            <strong>{workout.details.exercises}</strong> Exercises |{' '}
-            <strong>{workout.details.minutes}</strong> mins
-          </Fragment>
-        )}
-      />
-    )}></CardList>
-);

package/src/components/UpcomingWorkouts/index.ts

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

package/src/components/UpcomingWorkouts/style.ts

@@ -1,12 +0,0 @@
-import { css } from '@emotion/react';
-
-export const contentWrapper = () => css`
-  display: flex;
-
-  justify-content: space-between;
-  align-items: center;
-
-  width: 100%;
-
-  padding-left: 15px;
-`;

package/src/components/UpcomingWorkouts/types.ts

@@ -1,23 +0,0 @@
-export interface UpcomingWorkoutCardProps {
-  image: string;
-  title: string;
-  workoutTime: string;
-  renderDetails: () => React.ReactNode;
-  onClick?: () => void;
-}
-
-export type Workout = {
-  id: string;
-  image: string;
-  title: string;
-  workoutTime: string;
-  handleClick?: () => void;
-  details: {
-    exercises: number;
-    minutes: number;
-  };
-};
-
-export interface UpcomingWorkoutsProps {
-  workouts: Array<Workout>;
-}

package/src/components/UserCard/UserCard.tsx

@@ -1,46 +0,0 @@
-import { Fragment } from 'react';
-import { css, Theme } from '@emotion/react';
-
-import { Icon } from '@ssa-ui-kit/core';
-
-import { User } from './types';
-
-import UserCardBMI from './UserCardBMI';
-import UserCardCredentials from './UserCardCredentials';
-
-const container = (theme: Theme) => css`
-  display: grid;
-  grid-template-columns: 50px auto;
-  align-items: center;
-
-  ${theme.mediaQueries.lg} {
-    grid-template-columns: auto;
-  }
-`;
-
-const UserCard = ({ user }: { user: User | null }) => (
-  <Fragment>
-    <div css={container}>
-      <div
-        css={(theme: Theme) => css`
-          ${theme.mediaQueries.lg} {
-            display: none;
-          }
-        `}>
-        <label
-          htmlFor="aside"
-          css={css`
-            cursor: pointer;
-          `}>
-          <Icon name="carrot-left" size={16} />
-        </label>
-      </div>
-
-      <UserCardCredentials name={user?.name} email={user?.email} />
-    </div>
-
-    <UserCardBMI weight={user?.weight} height={user?.height} age={user?.age} />
-  </Fragment>
-);
-
-export default UserCard;

package/src/components/UserCard/UserCardBMI.tsx

@@ -1,37 +0,0 @@
-import { css } from '@emotion/react';
-
-import UserCardItem from './UserCardItem';
-
-import { User } from './types';
-
-const listCards = css`
-  display: flex;
-  justify-content: space-between;
-
-  list-style: none;
-  padding: 0;
-
-  li {
-    max-width: 92px;
-  }
-`;
-
-const UserCardBMI = ({
-  weight,
-  height,
-  age,
-}: Partial<Pick<User, 'weight' | 'height' | 'age'>>) => (
-  <ul css={listCards}>
-    <li>
-      <UserCardItem value={weight || ''} unit="kg" caption="Weight" />
-    </li>
-    <li>
-      <UserCardItem value={height || ''} unit="cm" caption="Height" />
-    </li>
-    <li>
-      <UserCardItem value={age || ''} unit="yrs" caption="Age" />
-    </li>
-  </ul>
-);
-
-export default UserCardBMI;

package/src/components/UserCard/UserCardCredentials.tsx

@@ -1,56 +0,0 @@
-import { css, Theme } from '@emotion/react';
-
-import { Avatar, Button, Typography, Icon } from '@ssa-ui-kit/core';
-
-import { User } from './types';
-
-const container = (theme: Theme) => css`
-  display: flex;
-  align-items: center;
-
-  button {
-    display: none;
-  }
-
-  ${theme.mediaQueries.lg} {
-    justify-content: space-between;
-
-    button {
-      display: block;
-    }
-  }
-`;
-const UserCardCredentials = ({
-  name,
-  email,
-}: Partial<Pick<User, 'name' | 'email'>>) => (
-  <div css={container}>
-    <div
-      css={css`
-        display: flex;
-        align-items: center;
-      `}>
-      <Avatar
-        size={42}
-        image={
-          'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fface%2Fface_46.png?alt=media&token=aaa3a75c-4779-4887-b011-352f8dd6c214'
-        }
-      />
-      <div
-        css={css`
-          padding-inline: 15px;
-        `}>
-        <Typography variant="subtitle">{name}</Typography>
-        <Typography variant="body1">{email}</Typography>
-      </div>
-    </div>
-
-    <Button
-      variant="tertiary"
-      size="large"
-      endIcon={<Icon name="notification" />}
-    />
-  </div>
-);
-
-export default UserCardCredentials;

package/src/components/UserCard/UserCardItem.tsx

@@ -1,42 +0,0 @@
-import { Theme, css } from '@emotion/react';
-
-import { Typography, Wrapper } from '@ssa-ui-kit/core';
-
-const cardShadow = (theme: Theme) => css`
-  display: flex;
-
-  width: 92px;
-  height: 68px;
-
-  align-items: center;
-  flex-flow: column;
-  justify-content: center;
-
-  background: ${theme.colors.white};
-  border-radius: 16px;
-  box-shadow: 0 10px 40px rgba(42, 48, 57, 0.08);
-`;
-
-interface UserCardItemProps {
-  value: string | number;
-  unit: string;
-  caption: string;
-}
-
-const UserCardItem = ({ value, unit, caption }: UserCardItemProps) => (
-  <div css={cardShadow}>
-    <Wrapper
-      css={css`
-        align-items: baseline;
-        justify-content: center;
-      `}>
-      <Typography variant="h4" weight="bold">
-        {value}
-      </Typography>
-      <Typography variant="subtitle">{unit}</Typography>
-    </Wrapper>
-    <Typography variant="subtitle">{caption}</Typography>
-  </div>
-);
-
-export default UserCardItem;

package/src/components/UserCard/index.tsx

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

package/src/components/UserCard/types.ts

@@ -1,8 +0,0 @@
-export type User = {
-  id: string;
-  name: string;
-  email: string;
-  weight: number;
-  height: number;
-  age: number;
-};