@ssa-ui-kit/widgets 0.0.11-alpha → 0.0.13-alpha

package/src/components/BotsTable/stories/NoControlOrders/components/TableRow.tsx

@@ -1,31 +1,31 @@
-import { BotsTableCell, BotsTableRow } from '@components/BotsTable';
-import { Exchange, TableTag } from '@components/BotsTable/stories/BotsTable';
-import { ActionMore } from './ActionMore';
-import { Reason } from './Reason';
-import { NoControlOrdersItem } from '../types';
-
-export const TableRow = (item: NoControlOrdersItem) => (
-  <BotsTableRow aria-disabled={item.isDisabled} isDisabled={item.isDisabled}>
-    <BotsTableCell>
-      <Exchange exchangeType={item.exchange} showTitle={false} />
-    </BotsTableCell>
-    <BotsTableCell>{item.account}</BotsTableCell>
-    <BotsTableCell>{item.botName}</BotsTableCell>
-    <BotsTableCell>{item.botRun}</BotsTableCell>
-    <BotsTableCell>{item.orderId}</BotsTableCell>
-    <BotsTableCell>
-      <TableTag color={item.status ? 'green' : 'pink'}>
-        {item.status ? 'Active' : 'Inactive'}
-      </TableTag>
-    </BotsTableCell>
-    <BotsTableCell>
-      <Reason>{item.reason}</Reason>
-    </BotsTableCell>
-    <BotsTableCell>{item.pair}</BotsTableCell>
-    <BotsTableCell>{item.orderSize}</BotsTableCell>
-    <BotsTableCell>{item.orderType}</BotsTableCell>
-    <BotsTableCell>
-      <ActionMore row={item} />
-    </BotsTableCell>
-  </BotsTableRow>
-);
+import { BotsTableCell, BotsTableRow } from '@components/BotsTable';
+import { Exchange, TableTag } from '@components/BotsTable/stories/BotsTable';
+import { ActionMore } from './ActionMore';
+import { Reason } from './Reason';
+import { NoControlOrdersItem } from '../types';
+
+export const TableRow = (item: NoControlOrdersItem) => (
+  <BotsTableRow aria-disabled={item.isDisabled} isDisabled={item.isDisabled}>
+    <BotsTableCell>
+      <Exchange exchangeType={item.exchange} showTitle={false} />
+    </BotsTableCell>
+    <BotsTableCell>{item.account}</BotsTableCell>
+    <BotsTableCell>{item.botName}</BotsTableCell>
+    <BotsTableCell>{item.botRun}</BotsTableCell>
+    <BotsTableCell>{item.orderId}</BotsTableCell>
+    <BotsTableCell>
+      <TableTag color={item.status ? 'green' : 'pink'}>
+        {item.status ? 'Active' : 'Inactive'}
+      </TableTag>
+    </BotsTableCell>
+    <BotsTableCell>
+      <Reason>{item.reason}</Reason>
+    </BotsTableCell>
+    <BotsTableCell>{item.pair}</BotsTableCell>
+    <BotsTableCell>{item.orderSize}</BotsTableCell>
+    <BotsTableCell>{item.orderType}</BotsTableCell>
+    <BotsTableCell>
+      <ActionMore row={item} />
+    </BotsTableCell>
+  </BotsTableRow>
+);

package/src/components/BotsTable/stories/NoControlOrders/components/index.ts

@@ -1,4 +1,4 @@
-export * from './ActionMore';
-export * from './Reason';
-export * from './TableList';
-export * from './TableRow';
+export * from './ActionMore';
+export * from './Reason';
+export * from './TableList';
+export * from './TableRow';

package/src/components/BotsTable/stories/NoControlOrders/mockData.ts

@@ -1,23 +1,23 @@
-import { NoControlOrdersItem } from './types';
-
-const commonStructure: NoControlOrdersItem = {
-  id: 1,
-  exchange: 'binance',
-  account: 'Yevgen 2',
-  botName: 'bot1',
-  botRun: 'New Run - 12/8/2023',
-  orderId: '1A2B3C',
-  status: true,
-  reason: 'Less than minute ago',
-  pair: 'BTC/TUSD',
-  orderSize: '0.003 BTC',
-  orderType: 'SELL',
-  isDisabled: false,
-};
-
-export const noControlOrdersData = new Array(10)
-  .fill(null)
-  .map((value, index) => ({
-    ...commonStructure,
-    id: index + 1,
-  }));
+import { NoControlOrdersItem } from './types';
+
+const commonStructure: NoControlOrdersItem = {
+  id: 1,
+  exchange: 'binance',
+  account: 'Yevgen 2',
+  botName: 'bot1',
+  botRun: 'New Run - 12/8/2023',
+  orderId: '1A2B3C',
+  status: true,
+  reason: 'Less than minute ago',
+  pair: 'BTC/TUSD',
+  orderSize: '0.003 BTC',
+  orderType: 'SELL',
+  isDisabled: false,
+};
+
+export const noControlOrdersData = new Array(10)
+  .fill(null)
+  .map((value, index) => ({
+    ...commonStructure,
+    id: index + 1,
+  }));

package/src/components/BotsTable/stories/NoControlOrders/types.ts

@@ -1,16 +1,16 @@
-import { ExchangeType } from '../BotsTable/components/Exchange/types';
-
-export interface NoControlOrdersItem {
-  id: number;
-  exchange: ExchangeType;
-  account: string;
-  botName: string;
-  botRun: string;
-  orderId: string;
-  status: boolean;
-  reason: string;
-  pair: string;
-  orderSize: string;
-  orderType: 'SELL';
-  isDisabled: boolean;
-}
+import { ExchangeType } from '../BotsTable/components/Exchange/types';
+
+export interface NoControlOrdersItem {
+  id: number;
+  exchange: ExchangeType;
+  account: string;
+  botName: string;
+  botRun: string;
+  orderId: string;
+  status: boolean;
+  reason: string;
+  pair: string;
+  orderSize: string;
+  orderType: 'SELL';
+  isDisabled: boolean;
+}

package/src/components/BotsTable/types.ts

@@ -1,31 +1,31 @@
-import { ExchangeType } from './stories/BotsTable/components/Exchange/types';
-import { TradeType } from './stories/BotsTable/components/Trade/types';
-
-export interface PNL {
-  amount: number;
-  currency: string;
-  isIncreasing: boolean;
-}
-
-export interface ROI {
-  amount: number;
-  isIncreasing: boolean;
-}
-
-export interface BotsTableItem {
-  id: number;
-  name: string;
-  creationDate: string;
-  exchange: ExchangeType;
-  status: TradeType;
-  pair: string;
-  pnl: PNL;
-  roi: ROI;
-  isDisabled: boolean;
-}
-
-export interface BotsTableProps {
-  children: React.ReactElement<React.PropsWithChildren<BotsTableItem>>[];
-  columns: string[];
-  className?: string;
-}
+import { ExchangeType } from './stories/BotsTable/components/Exchange/types';
+import { TradeType } from './stories/BotsTable/components/Trade/types';
+
+export interface PNL {
+  amount: number;
+  currency: string;
+  isIncreasing: boolean;
+}
+
+export interface ROI {
+  amount: number;
+  isIncreasing: boolean;
+}
+
+export interface BotsTableItem {
+  id: number;
+  name: string;
+  creationDate: string;
+  exchange: ExchangeType;
+  status: TradeType;
+  pair: string;
+  pnl: PNL;
+  roi: ROI;
+  isDisabled: boolean;
+}
+
+export interface BotsTableProps {
+  children: React.ReactElement<React.PropsWithChildren<BotsTableItem>>[];
+  columns: string[];
+  className?: string;
+}

package/src/components/Calories/Calories.spec.tsx

@@ -1,11 +1,11 @@
-import { screen } from '../../../customTest';
-
-import Calories from './index';
-
-describe('Calories', () => {
-  it('Render Calories', () => {
-    render(<Calories max={100} currentValue={70} />);
-
-    expect(screen.queryByText('70% done')).toBeInTheDocument();
-  });
-});
+import { screen } from '../../../customTest';
+
+import Calories from './index';
+
+describe('Calories', () => {
+  it('Render Calories', () => {
+    render(<Calories max={100} currentValue={70} />);
+
+    expect(screen.queryByText('70% done')).toBeInTheDocument();
+  });
+});

package/src/components/Calories/Calories.stories.tsx

@@ -1,26 +1,26 @@
-import type { Meta } from '@storybook/react';
-
-import { Calories } from './Calories';
-
-export default {
-  title: 'Widgets/Calories',
-  component: Calories,
-  argTypes: {
-    max: {
-      control: {
-        type: 'number',
-      },
-    },
-    currentValue: {
-      control: {
-        type: 'number',
-      },
-    },
-  },
-  args: {
-    max: 100,
-    currentValue: 70,
-  },
-} as Meta<typeof Calories>;
-
-export const Default = {};
+import type { Meta } from '@storybook/react';
+
+import { Calories } from './Calories';
+
+export default {
+  title: 'Widgets/Calories',
+  component: Calories,
+  argTypes: {
+    max: {
+      control: {
+        type: 'number',
+      },
+    },
+    currentValue: {
+      control: {
+        type: 'number',
+      },
+    },
+  },
+  args: {
+    max: 100,
+    currentValue: 70,
+  },
+} as Meta<typeof Calories>;
+
+export const Default = {};

package/src/components/Calories/Calories.tsx

@@ -1,54 +1,54 @@
-import { css, useTheme } from '@emotion/react';
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  ProgressCircle,
-  Typography,
-  ResponsiveImage,
-} from '@ssa-ui-kit/core';
-
-import { ICaloriesProps } from './types';
-import { InnerContent } from './innerContent';
-
-/**
- *
- * UI Component that shows how many calories the user has burned
- */
-export const Calories = ({ max, currentValue }: ICaloriesProps) => {
-  const theme = useTheme();
-
-  return (
-    <Card
-      css={css`
-        box-shadow: 0 10px 40px rgba(42, 48, 57, 0.08);
-        border-radius: 20px;
-      `}>
-      <CardHeader
-        icon={
-          <ResponsiveImage
-            css={{ filter: `drop-shadow(0px 5px 5px ${theme.colors.grey})` }}
-            srcSet="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fcalories%2Fcalories_64.png?alt=media&token=6a57e3f5-0e15-4dcf-8871-f1bf94d887af 64w, https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fcalories%2Fcalories_48.png?alt=media&token=861ad7c8-1bcb-4f2d-a581-4b73b4821251 48w"
-            sizes="(min-width: 1440px) 64px, 48px"
-            src="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fcalories%2Fcalories_48.png?alt=media&token=861ad7c8-1bcb-4f2d-a581-4b73b4821251"
-            alt="Calories burn"
-          />
-        }>
-        <Typography variant="h6" weight="bold">
-          Calories
-        </Typography>
-      </CardHeader>
-
-      <CardContent>
-        <ProgressCircle
-          max={max}
-          currentValue={currentValue}
-          color="pink"
-          infoContent={<InnerContent max={max} currentValue={currentValue} />}
-          size={120}
-        />
-      </CardContent>
-    </Card>
-  );
-};
+import { css, useTheme } from '@emotion/react';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  ProgressCircle,
+  Typography,
+  ResponsiveImage,
+} from '@ssa-ui-kit/core';
+
+import { ICaloriesProps } from './types';
+import { InnerContent } from './innerContent';
+
+/**
+ *
+ * UI Component that shows how many calories the user has burned
+ */
+export const Calories = ({ max, currentValue }: ICaloriesProps) => {
+  const theme = useTheme();
+
+  return (
+    <Card
+      css={css`
+        box-shadow: 0 10px 40px rgba(42, 48, 57, 0.08);
+        border-radius: 20px;
+      `}>
+      <CardHeader
+        icon={
+          <ResponsiveImage
+            css={{ filter: `drop-shadow(0px 5px 5px ${theme.colors.grey})` }}
+            srcSet="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fcalories%2Fcalories_64.png?alt=media&token=6a57e3f5-0e15-4dcf-8871-f1bf94d887af 64w, https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fcalories%2Fcalories_48.png?alt=media&token=861ad7c8-1bcb-4f2d-a581-4b73b4821251 48w"
+            sizes="(min-width: 1440px) 64px, 48px"
+            src="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fcalories%2Fcalories_48.png?alt=media&token=861ad7c8-1bcb-4f2d-a581-4b73b4821251"
+            alt="Calories burn"
+          />
+        }>
+        <Typography variant="h6" weight="bold">
+          Calories
+        </Typography>
+      </CardHeader>
+
+      <CardContent>
+        <ProgressCircle
+          max={max}
+          currentValue={currentValue}
+          color="pink"
+          infoContent={<InnerContent max={max} currentValue={currentValue} />}
+          size={120}
+        />
+      </CardContent>
+    </Card>
+  );
+};

package/src/components/Calories/index.tsx

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

package/src/components/Calories/innerContent.tsx

@@ -1,30 +1,30 @@
-import { useTheme } from '@emotion/react';
-import { Typography, Wrapper } from '@ssa-ui-kit/core';
-
-import { ICaloriesProps } from './types';
-
-export const InnerContent = ({ currentValue, max }: ICaloriesProps) => {
-  const theme = useTheme();
-  return (
-    <div
-      style={{
-        display: 'grid',
-        textAlign: 'center',
-      }}>
-      <Wrapper alignItems="baseline" direction="row" css={{ gap: 5 }}>
-        <Typography variant="h5" weight="bold" color={theme.colors.greyDarker}>
-          {currentValue}
-        </Typography>
-        <Typography
-          variant="subtitle"
-          weight="bold"
-          color={theme.colors.greyDarker}>
-          kcal
-        </Typography>
-      </Wrapper>
-      <Typography variant="subtitle" color={theme.colors.greyDarker60}>
-        {(currentValue / max) * 100}% done
-      </Typography>
-    </div>
-  );
-};
+import { useTheme } from '@emotion/react';
+import { Typography, Wrapper } from '@ssa-ui-kit/core';
+
+import { ICaloriesProps } from './types';
+
+export const InnerContent = ({ currentValue, max }: ICaloriesProps) => {
+  const theme = useTheme();
+  return (
+    <div
+      style={{
+        display: 'grid',
+        textAlign: 'center',
+      }}>
+      <Wrapper alignItems="baseline" direction="row" css={{ gap: 5 }}>
+        <Typography variant="h5" weight="bold" color={theme.colors.greyDarker}>
+          {currentValue}
+        </Typography>
+        <Typography
+          variant="subtitle"
+          weight="bold"
+          color={theme.colors.greyDarker}>
+          kcal
+        </Typography>
+      </Wrapper>
+      <Typography variant="subtitle" color={theme.colors.greyDarker60}>
+        {(currentValue / max) * 100}% done
+      </Typography>
+    </div>
+  );
+};

package/src/components/Calories/types.ts

@@ -1,4 +1,4 @@
-export interface ICaloriesProps {
-  max: number;
-  currentValue: number;
-}
+export interface ICaloriesProps {
+  max: number;
+  currentValue: number;
+}

package/src/components/CardList/CardList.spec.tsx

@@ -1,32 +1,32 @@
-import { screen } from '../../../customTest';
-
-import CardList from './index';
-
-describe('CardList', () => {
-  it('Render component', async () => {
-    render(
-      <CardList
-        title="List of cards"
-        items={[
-          {
-            id: '1',
-            title: 'ITEM A',
-          },
-          {
-            id: '2',
-            title: 'ITEM B',
-          },
-        ]}
-        renderItem={(item) => item.title as string}
-      />,
-    );
-
-    const list = await screen.findAllByRole('listitem');
-    const itemA = await screen.findByText('ITEM A');
-    const itemB = await screen.findByText('ITEM B');
-
-    expect(list.length).toBe(2);
-    expect(itemA).toBeInTheDocument();
-    expect(itemB).toBeInTheDocument();
-  });
-});
+import { screen } from '../../../customTest';
+
+import CardList from './index';
+
+describe('CardList', () => {
+  it('Render component', async () => {
+    render(
+      <CardList
+        title="List of cards"
+        items={[
+          {
+            id: '1',
+            title: 'ITEM A',
+          },
+          {
+            id: '2',
+            title: 'ITEM B',
+          },
+        ]}
+        renderItem={(item) => item.title as string}
+      />,
+    );
+
+    const list = await screen.findAllByRole('listitem');
+    const itemA = await screen.findByText('ITEM A');
+    const itemB = await screen.findByText('ITEM B');
+
+    expect(list.length).toBe(2);
+    expect(itemA).toBeInTheDocument();
+    expect(itemB).toBeInTheDocument();
+  });
+});

package/src/components/CardList/CardList.stories.tsx

@@ -1,37 +1,37 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Card, CardContent, Typography } from '@ssa-ui-kit/core';
-
-import { CardList } from './CardList';
-
-export default {
-  title: 'Widgets/CardList',
-  component: CardList,
-} as Meta<typeof CardList>;
-
-export const Default: StoryObj<typeof CardList> = () => {
-  return (
-    <CardList
-      title="List of cards"
-      items={[
-        {
-          id: 'cardio_training',
-          title: 'HIIT Cardio training',
-        },
-        {
-          id: 'other_training',
-          title: 'Other cardio training',
-        },
-      ]}
-      renderItem={(item) => (
-        <Card>
-          <CardContent>
-            <Typography variant="body1">{item.title}</Typography>
-          </CardContent>
-        </Card>
-      )}
-    />
-  );
-};
-
-Default.storyName = 'CardList';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Card, CardContent, Typography } from '@ssa-ui-kit/core';
+
+import { CardList } from './CardList';
+
+export default {
+  title: 'Widgets/CardList',
+  component: CardList,
+} as Meta<typeof CardList>;
+
+export const Default: StoryObj<typeof CardList> = () => {
+  return (
+    <CardList
+      title="List of cards"
+      items={[
+        {
+          id: 'cardio_training',
+          title: 'HIIT Cardio training',
+        },
+        {
+          id: 'other_training',
+          title: 'Other cardio training',
+        },
+      ]}
+      renderItem={(item) => (
+        <Card>
+          <CardContent>
+            <Typography variant="body1">{item.title}</Typography>
+          </CardContent>
+        </Card>
+      )}
+    />
+  );
+};
+
+Default.storyName = 'CardList';