@ssa-ui-kit/widgets 0.0.2-alpha → 0.0.3-alpha

package/src/components/TradingScoreboard/helpers.tsx

@@ -1,134 +1,134 @@
-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.025',
-    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',
-  },
-];
+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.025',
+    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 +1,2 @@
-export { default as TradingScoreboard } from './TradingScoreboard';
-export * from './types';
+export { default as TradingScoreboard } from './TradingScoreboard';
+export * from './types';

package/src/components/TradingScoreboard/types.ts

@@ -1,18 +1,18 @@
-import { ITradingInfoCardProps } from '@components/TradingInfoCard/types';
-import { SerializedStyles } from '@emotion/react';
-
-type TradingScoreboardItem = Pick<
-  ITradingInfoCardProps,
-  'value' | 'unit' | 'title' | 'icon' | 'link'
->;
-
-export interface ITradingScoreboardProps {
-  itemsPerRow: number;
-  items: Array<TradingScoreboardItem>;
-  onClick?: (item: TradingScoreboardItem) => void;
-  renderCard?: (
-    item: TradingScoreboardItem,
-    onClick?: (item: TradingScoreboardItem) => void,
-  ) => React.ReactNode;
-  css?: SerializedStyles;
-}
+import { ITradingInfoCardProps } from '@components/TradingInfoCard/types';
+import { SerializedStyles } from '@emotion/react';
+
+type TradingScoreboardItem = Pick<
+  ITradingInfoCardProps,
+  'value' | 'unit' | 'title' | 'icon' | 'link'
+>;
+
+export interface ITradingScoreboardProps {
+  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 +1,64 @@
-import { useTheme, css } from '@emotion/react';
-
-import {
-  Avatar,
-  Button,
-  Card,
-  CardContent,
-  Wrapper,
-  Typography,
-  Icon,
-} from '@ssa-ui-kit/core';
-
-import { IUpcomingWorkoutCardProps } 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,
-}: IUpcomingWorkoutCardProps) => {
-  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>
-  );
-};
+import { useTheme, css } from '@emotion/react';
+
+import {
+  Avatar,
+  Button,
+  Card,
+  CardContent,
+  Wrapper,
+  Typography,
+  Icon,
+} from '@ssa-ui-kit/core';
+
+import { IUpcomingWorkoutCardProps } 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,
+}: IUpcomingWorkoutCardProps) => {
+  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.spec.tsx

@@ -1,56 +1,56 @@
-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);
-    });
-  });
-});
+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 +1,32 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { UpcomingWorkouts } from './UpcomingWorkouts';
-
-export default {
-  title: 'Widgets/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';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { UpcomingWorkouts } from './UpcomingWorkouts';
+
+export default {
+  title: 'Widgets/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 +1,27 @@
-import { Fragment } from 'react';
-
-import CardList from '@components/CardList';
-
-import { UpcomingWorkoutCard } from './UpcomingWorkoutCard';
-
-import { IUpcomingWorkoutsProps } from './types';
-
-export const UpcomingWorkouts = ({ workouts }: IUpcomingWorkoutsProps) => (
-  <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>
-);
+import { Fragment } from 'react';
+
+import CardList from '@components/CardList';
+
+import { UpcomingWorkoutCard } from './UpcomingWorkoutCard';
+
+import { IUpcomingWorkoutsProps } from './types';
+
+export const UpcomingWorkouts = ({ workouts }: IUpcomingWorkoutsProps) => (
+  <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>
+);