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

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

@@ -1,84 +1,84 @@
-import { BotsTableItem } from '@components/BotsTable/types';
-
-const commonStructure: BotsTableItem = {
-  id: 1,
-  name: 'Bot name 1',
-  creationDate: '27.07.23',
-  exchange: 'binance',
-  status: 'trade',
-  pair: 'ETH/USD',
-  pnl: {
-    amount: 300,
-    currency: 'USD',
-    isIncreasing: true,
-  },
-  roi: {
-    amount: 25,
-    isIncreasing: true,
-  },
-  isDisabled: false,
-};
-
-const binanceData = new Array(5).fill(null).map((value, index) => ({
-  ...commonStructure,
-  id: index + 1,
-  name: `Bot name ${index + 1}`,
-}));
-
-export const botsTableData: BotsTableItem[] = [
-  ...binanceData,
-  {
-    ...commonStructure,
-    id: 6,
-    name: 'Bot name 6',
-    exchange: 'kraken',
-    status: 'pending',
-    pnl: {
-      amount: 100,
-      currency: 'USD',
-      isIncreasing: false,
-    },
-    roi: {
-      amount: 15,
-      isIncreasing: false,
-    },
-  },
-  {
-    ...commonStructure,
-    id: 7,
-    name: 'Bot name 7',
-    exchange: 'kraken',
-    status: 'liquidation',
-  },
-  {
-    ...commonStructure,
-    id: 8,
-    name: 'Bot name 8',
-    exchange: 'bittrex',
-    status: 'liquidation',
-    pnl: {
-      amount: 70,
-      currency: 'USD',
-      isIncreasing: false,
-    },
-    roi: {
-      amount: 10,
-      isIncreasing: false,
-    },
-  },
-  {
-    ...commonStructure,
-    id: 9,
-    name: 'Bot name 9',
-    exchange: 'kraken',
-    status: 'liquidation',
-  },
-  {
-    ...commonStructure,
-    id: 10,
-    name: 'Bot name 9',
-    exchange: 'kraken',
-    status: 'liquidation',
-    isDisabled: true,
-  },
-];
+import { BotsTableItem } from '@components/BotsTable/types';
+
+const commonStructure: BotsTableItem = {
+  id: 1,
+  name: 'Bot name 1',
+  creationDate: '27.07.23',
+  exchange: 'binance',
+  status: 'trade',
+  pair: 'ETH/USD',
+  pnl: {
+    amount: 300,
+    currency: 'USD',
+    isIncreasing: true,
+  },
+  roi: {
+    amount: 25,
+    isIncreasing: true,
+  },
+  isDisabled: false,
+};
+
+const binanceData = new Array(5).fill(null).map((value, index) => ({
+  ...commonStructure,
+  id: index + 1,
+  name: `Bot name ${index + 1}`,
+}));
+
+export const botsTableData: BotsTableItem[] = [
+  ...binanceData,
+  {
+    ...commonStructure,
+    id: 6,
+    name: 'Bot name 6',
+    exchange: 'kraken',
+    status: 'pending',
+    pnl: {
+      amount: 100,
+      currency: 'USD',
+      isIncreasing: false,
+    },
+    roi: {
+      amount: 15,
+      isIncreasing: false,
+    },
+  },
+  {
+    ...commonStructure,
+    id: 7,
+    name: 'Bot name 7',
+    exchange: 'kraken',
+    status: 'liquidation',
+  },
+  {
+    ...commonStructure,
+    id: 8,
+    name: 'Bot name 8',
+    exchange: 'bittrex',
+    status: 'liquidation',
+    pnl: {
+      amount: 70,
+      currency: 'USD',
+      isIncreasing: false,
+    },
+    roi: {
+      amount: 10,
+      isIncreasing: false,
+    },
+  },
+  {
+    ...commonStructure,
+    id: 9,
+    name: 'Bot name 9',
+    exchange: 'kraken',
+    status: 'liquidation',
+  },
+  {
+    ...commonStructure,
+    id: 10,
+    name: 'Bot name 9',
+    exchange: 'kraken',
+    status: 'liquidation',
+    isDisabled: true,
+  },
+];

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

@@ -1,39 +1,39 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Table } from '@ssa-ui-kit/core';
-import { BotsTableStory } from './BotsTable/StoryComponent';
-import { NoControlOrdersStory } from './NoControlOrders/StoryComponent';
-
-export default {
-  title: 'Widgets/BotsTable',
-  component: Table,
-} as Meta<typeof Table>;
-
-export const BotsTable: StoryObj<typeof Table> = () => <BotsTableStory />;
-
-BotsTable.parameters = {
-  backgrounds: {
-    default: 'main',
-    values: [
-      {
-        name: 'main',
-        value: '#D0D1D6',
-      },
-    ],
-  },
-};
-
-export const NoControlOrders: StoryObj<typeof Table> = () => (
-  <NoControlOrdersStory />
-);
-
-NoControlOrders.parameters = {
-  backgrounds: {
-    default: 'main',
-    values: [
-      {
-        name: 'main',
-        value: '#D0D1D6',
-      },
-    ],
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { Table } from '@ssa-ui-kit/core';
+import { BotsTableStory } from './BotsTable/StoryComponent';
+import { NoControlOrdersStory } from './NoControlOrders/StoryComponent';
+
+export default {
+  title: 'Widgets/BotsTable',
+  component: Table,
+} as Meta<typeof Table>;
+
+export const BotsTable: StoryObj<typeof Table> = () => <BotsTableStory />;
+
+BotsTable.parameters = {
+  backgrounds: {
+    default: 'main',
+    values: [
+      {
+        name: 'main',
+        value: '#D0D1D6',
+      },
+    ],
+  },
+};
+
+export const NoControlOrders: StoryObj<typeof Table> = () => (
+  <NoControlOrdersStory />
+);
+
+NoControlOrders.parameters = {
+  backgrounds: {
+    default: 'main',
+    values: [
+      {
+        name: 'main',
+        value: '#D0D1D6',
+      },
+    ],
+  },
+};

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

@@ -1,35 +1,35 @@
-import { Wrapper } from '@ssa-ui-kit/core';
-import { noControlOrdersData } from './mockData';
-import { TableList, TableRow } from './components';
-
-export const NoControlOrdersStory = () => {
-  const columns = [
-    'Exchange',
-    'Account',
-    'Bot Name',
-    'Bot Run',
-    'Order Id',
-    'Status',
-    'Reason',
-    'Pair',
-    'Order Size',
-    'Order Type',
-    '',
-  ];
-
-  return (
-    <Wrapper
-      css={{
-        width: '100%',
-        height: '100%',
-        overflowX: 'auto',
-        whiteSpace: 'nowrap',
-      }}>
-      <TableList columns={columns}>
-        {noControlOrdersData.map((item) => (
-          <TableRow key={item.id} {...item} />
-        ))}
-      </TableList>
-    </Wrapper>
-  );
-};
+import { Wrapper } from '@ssa-ui-kit/core';
+import { noControlOrdersData } from './mockData';
+import { TableList, TableRow } from './components';
+
+export const NoControlOrdersStory = () => {
+  const columns = [
+    'Exchange',
+    'Account',
+    'Bot Name',
+    'Bot Run',
+    'Order Id',
+    'Status',
+    'Reason',
+    'Pair',
+    'Order Size',
+    'Order Type',
+    '',
+  ];
+
+  return (
+    <Wrapper
+      css={{
+        width: '100%',
+        height: '100%',
+        overflowX: 'auto',
+        whiteSpace: 'nowrap',
+      }}>
+      <TableList columns={columns}>
+        {noControlOrdersData.map((item) => (
+          <TableRow key={item.id} {...item} />
+        ))}
+      </TableList>
+    </Wrapper>
+  );
+};

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

@@ -1,95 +1,95 @@
-import { MouseEventHandler, useState } from 'react';
-import { useTheme } from '@emotion/react';
-import {
-  Icon,
-  Popover,
-  PopoverContent,
-  PopoverDescription,
-  PopoverTrigger,
-} from '@ssa-ui-kit/core';
-import {
-  ActionItem,
-  ActionsWrapper,
-  ActionIcon,
-} from '@components/BotsTable/stories/BotsTable';
-import { NoControlOrdersItem } from '../types';
-
-export const ActionMore = ({
-  row: { isDisabled },
-}: {
-  row: NoControlOrdersItem;
-}) => {
-  const theme = useTheme();
-  const [open, setOpen] = useState(false);
-
-  const actionMoreHandler: MouseEventHandler<HTMLElement> = (event) => {
-    event.stopPropagation();
-  };
-  const actionHandler =
-    (actionName: string): MouseEventHandler<HTMLElement> =>
-    (event) => {
-      event.stopPropagation();
-      alert(`action ${actionName}`);
-      setOpen(false);
-    };
-
-  return (
-    <Popover
-      floatingOptions={{
-        onOpenChange: setOpen,
-        open,
-      }}
-      placement="top-start">
-      <PopoverTrigger
-        variant="custom"
-        isDisabled={isDisabled}
-        css={{
-          borderLeft: '1px solid #eaecf0',
-          height: '100%',
-          display: 'flex',
-          alignItems: 'center',
-          cursor: isDisabled ? 'default' : 'pointer',
-          background: 'unset',
-          borderRadius: '0',
-        }}
-        startIcon={
-          <Icon
-            name="more-vertical"
-            size={15}
-            color={theme.colors.greyDropdownFocused}
-          />
-        }
-        onClick={actionMoreHandler}
-      />
-      <PopoverContent>
-        <PopoverDescription>
-          <ActionsWrapper
-            css={{
-              width: 160,
-            }}>
-            <ActionItem
-              startIcon={<ActionIcon name="invisible" />}
-              onClick={actionHandler('liquidate')}>
-              Liquidate
-            </ActionItem>
-            <ActionItem
-              startIcon={<ActionIcon name="change" />}
-              onClick={actionHandler('changePrice')}>
-              Change Price
-            </ActionItem>
-            <ActionItem
-              startIcon={<ActionIcon name="cross" />}
-              onClick={actionHandler('cancel')}>
-              Cancel
-            </ActionItem>
-            <ActionItem
-              startIcon={<ActionIcon name="bin" />}
-              onClick={actionHandler('deleteFromList')}>
-              Delete from list
-            </ActionItem>
-          </ActionsWrapper>
-        </PopoverDescription>
-      </PopoverContent>
-    </Popover>
-  );
-};
+import { MouseEventHandler, useState } from 'react';
+import { useTheme } from '@emotion/react';
+import {
+  Icon,
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverTrigger,
+} from '@ssa-ui-kit/core';
+import {
+  ActionItem,
+  ActionsWrapper,
+  ActionIcon,
+} from '@components/BotsTable/stories/BotsTable';
+import { NoControlOrdersItem } from '../types';
+
+export const ActionMore = ({
+  row: { isDisabled },
+}: {
+  row: NoControlOrdersItem;
+}) => {
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+
+  const actionMoreHandler: MouseEventHandler<HTMLElement> = (event) => {
+    event.stopPropagation();
+  };
+  const actionHandler =
+    (actionName: string): MouseEventHandler<HTMLElement> =>
+    (event) => {
+      event.stopPropagation();
+      alert(`action ${actionName}`);
+      setOpen(false);
+    };
+
+  return (
+    <Popover
+      floatingOptions={{
+        onOpenChange: setOpen,
+        open,
+      }}
+      placement="top-start">
+      <PopoverTrigger
+        variant="custom"
+        isDisabled={isDisabled}
+        css={{
+          borderLeft: '1px solid #eaecf0',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          cursor: isDisabled ? 'default' : 'pointer',
+          background: 'unset',
+          borderRadius: '0',
+        }}
+        startIcon={
+          <Icon
+            name="more-vertical"
+            size={15}
+            color={theme.colors.greyDropdownFocused}
+          />
+        }
+        onClick={actionMoreHandler}
+      />
+      <PopoverContent>
+        <PopoverDescription>
+          <ActionsWrapper
+            css={{
+              width: 160,
+            }}>
+            <ActionItem
+              startIcon={<ActionIcon name="invisible" />}
+              onClick={actionHandler('liquidate')}>
+              Liquidate
+            </ActionItem>
+            <ActionItem
+              startIcon={<ActionIcon name="change" />}
+              onClick={actionHandler('changePrice')}>
+              Change Price
+            </ActionItem>
+            <ActionItem
+              startIcon={<ActionIcon name="cross" />}
+              onClick={actionHandler('cancel')}>
+              Cancel
+            </ActionItem>
+            <ActionItem
+              startIcon={<ActionIcon name="bin" />}
+              onClick={actionHandler('deleteFromList')}>
+              Delete from list
+            </ActionItem>
+          </ActionsWrapper>
+        </PopoverDescription>
+      </PopoverContent>
+    </Popover>
+  );
+};

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

@@ -1,11 +1,11 @@
-export const Reason = ({ children }: { children: string }) => (
-  <div
-    css={{
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      maxWidth: 100,
-    }}>
-    {children}
-  </div>
-);
+export const Reason = ({ children }: { children: string }) => (
+  <div
+    css={{
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      maxWidth: 100,
+    }}>
+    {children}
+  </div>
+);

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

@@ -1,45 +1,45 @@
-import { BotsTableProps } from '@components/BotsTable/types';
-import { BotsTable } from '@components/BotsTable';
-
-export const TableList = ({ children, ...rest }: BotsTableProps) => (
-  <BotsTable
-    css={{
-      '& thead tr': {
-        position: 'relative',
-        '& td:last-child': {
-          '&:before': {
-            content: '""',
-            display: 'block',
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            width: 40,
-            height: 40,
-            borderRadius: 20,
-            background: '#fff',
-            clipPath: 'inset(0 0 50% 50%)',
-          },
-          '&:after': {
-            content: '""',
-            display: 'block',
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            width: 20,
-            height: 20,
-            background: '#D0D1D6',
-            zIndex: -1,
-          },
-        },
-      },
-      '& tr td:last-child': {
-        position: 'sticky',
-        height: 44,
-        right: 0,
-        padding: 0,
-      },
-    }}
-    {...rest}>
-    {children}
-  </BotsTable>
-);
+import { BotsTableProps } from '@components/BotsTable/types';
+import { BotsTable } from '@components/BotsTable';
+
+export const TableList = ({ children, ...rest }: BotsTableProps) => (
+  <BotsTable
+    css={{
+      '& thead tr': {
+        position: 'relative',
+        '& td:last-child': {
+          '&:before': {
+            content: '""',
+            display: 'block',
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            width: 40,
+            height: 40,
+            borderRadius: 20,
+            background: '#fff',
+            clipPath: 'inset(0 0 50% 50%)',
+          },
+          '&:after': {
+            content: '""',
+            display: 'block',
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            width: 20,
+            height: 20,
+            background: '#D0D1D6',
+            zIndex: -1,
+          },
+        },
+      },
+      '& tr td:last-child': {
+        position: 'sticky',
+        height: 44,
+        right: 0,
+        padding: 0,
+      },
+    }}
+    {...rest}>
+    {children}
+  </BotsTable>
+);