@ssa-ui-kit/widgets 0.0.18-alpha → 0.0.20-alpha

package/src/components/BotsTable/BotsTableHead.tsx

@@ -1,13 +1,13 @@
-import styled from '@emotion/styled';
-import { TableHead } from '@ssa-ui-kit/core';
-
-export const BotsTableHead = styled(TableHead)`
-  background: none;
-  font-size: 12px;
-  ${({ theme }) => theme.mediaQueries.lg} {
-    font-size: 14px;
-  }
-  & tr td:first-of-type {
-    padding-left: 16px;
-  }
-`;
+import styled from '@emotion/styled';
+import { TableHead } from '@ssa-ui-kit/core';
+
+export const BotsTableHead = styled(TableHead)`
+  background: none;
+  font-size: 12px;
+  ${({ theme }) => theme.mediaQueries.lg} {
+    font-size: 14px;
+  }
+  & tr td:first-of-type {
+    padding-left: 16px;
+  }
+`;

package/src/components/BotsTable/BotsTableRow.tsx

@@ -1,17 +1,17 @@
-import styled from '@emotion/styled';
-import { TableRow } from '@ssa-ui-kit/core';
-
-export const BotsTableRow = styled(TableRow)<{ isDisabled?: boolean }>`
-  border: none;
-  padding: 0 16px;
-  height: 44px;
-  ${({ isDisabled }) =>
-    isDisabled && {
-      opacity: 0.6,
-      cursor: 'default',
-      userSelect: 'none',
-    }}
-  & tr:first-of-type {
-    padding-left: 18px;
-  }
-`;
+import styled from '@emotion/styled';
+import { TableRow } from '@ssa-ui-kit/core';
+
+export const BotsTableRow = styled(TableRow)<{ isDisabled?: boolean }>`
+  border: none;
+  padding: 0 16px;
+  height: 44px;
+  ${({ isDisabled }) =>
+    isDisabled && {
+      opacity: 0.6,
+      cursor: 'default',
+      userSelect: 'none',
+    }}
+  & tr:first-of-type {
+    padding-left: 18px;
+  }
+`;

package/src/components/BotsTable/BotsTableWrapper.tsx

@@ -1,23 +1,23 @@
-import styled from '@emotion/styled';
-import { Table } from '@ssa-ui-kit/core';
-
-export const BotsTableWrapper = styled(Table)`
-  background: none;
-  & thead td:first-of-type {
-    border-top-left-radius: 20px;
-  }
-  & thead td:last-child {
-    border-top-right-radius: 20px;
-  }
-  & tbody tr:last-child td:first-of-type {
-    border-bottom-left-radius: 20px;
-  }
-  & tbody tr:last-child td:last-child {
-    border-bottom-right-radius: 20px;
-  }
-  & tbody tr:not([aria-disabled='true']):hover {
-    & td {
-      background-color: #eef1f7;
-    }
-  }
-`;
+import styled from '@emotion/styled';
+import { Table } from '@ssa-ui-kit/core';
+
+export const BotsTableWrapper = styled(Table)`
+  background: none;
+  & thead td:first-of-type {
+    border-top-left-radius: 20px;
+  }
+  & thead td:last-child {
+    border-top-right-radius: 20px;
+  }
+  & tbody tr:last-child td:first-of-type {
+    border-bottom-left-radius: 20px;
+  }
+  & tbody tr:last-child td:last-child {
+    border-bottom-right-radius: 20px;
+  }
+  & tbody tr:not([aria-disabled='true']):hover {
+    & td {
+      background-color: #eef1f7;
+    }
+  }
+`;

package/src/components/BotsTable/index.ts

@@ -1,5 +1,5 @@
-export * from './BotsTableWrapper';
-export * from './BotsTable';
-export * from './BotsTableCell';
-export * from './BotsTableHead';
-export * from './BotsTableRow';
+export * from './BotsTableWrapper';
+export * from './BotsTable';
+export * from './BotsTableCell';
+export * from './BotsTableHead';
+export * from './BotsTableRow';

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

@@ -1,59 +1,59 @@
-import { Wrapper } from '@ssa-ui-kit/core';
-import { BotsTable, BotsTableCell, BotsTableRow } from '@components/BotsTable';
-import { BotsTableItem } from '@components/BotsTable/types';
-import { Exchange, PNL, ROI, Trade, Actions } from './components';
-import { botsTableData } from './mockData';
-
-export const BotsTableStory = () => {
-  const handleRowClick = (row: BotsTableItem) => () => {
-    alert(JSON.stringify(row));
-  };
-
-  const columns = [
-    'Name',
-    'Creation Date',
-    'Exchange',
-    'Status',
-    'Pair',
-    'PNL',
-    'ROI',
-    '',
-  ];
-
-  return (
-    <Wrapper
-      css={{
-        width: '100%',
-        height: '100%',
-      }}>
-      <BotsTable columns={columns}>
-        {botsTableData.map((item) => (
-          <BotsTableRow
-            aria-disabled={item.isDisabled}
-            key={item.id}
-            isDisabled={item.isDisabled}
-            onClick={item.isDisabled ? undefined : handleRowClick(item)}>
-            <BotsTableCell>{item.name}</BotsTableCell>
-            <BotsTableCell>{item.creationDate}</BotsTableCell>
-            <BotsTableCell>
-              <Exchange exchangeType={item.exchange} />
-            </BotsTableCell>
-            <BotsTableCell>
-              <Trade tradeType={item.status} />
-            </BotsTableCell>
-            <BotsTableCell>{item.pair}</BotsTableCell>
-            <BotsTableCell>
-              <PNL {...item.pnl} />
-            </BotsTableCell>
-            <BotsTableCell>
-              <ROI {...item.roi} />
-            </BotsTableCell>
-            <BotsTableCell>
-              <Actions row={item} />
-            </BotsTableCell>
-          </BotsTableRow>
-        ))}
-      </BotsTable>
-    </Wrapper>
-  );
-};
+import { Wrapper } from '@ssa-ui-kit/core';
+import { BotsTable, BotsTableCell, BotsTableRow } from '@components/BotsTable';
+import { BotsTableItem } from '@components/BotsTable/types';
+import { Exchange, PNL, ROI, Trade, Actions } from './components';
+import { botsTableData } from './mockData';
+
+export const BotsTableStory = () => {
+  const handleRowClick = (row: BotsTableItem) => () => {
+    alert(JSON.stringify(row));
+  };
+
+  const columns = [
+    'Name',
+    'Creation Date',
+    'Exchange',
+    'Status',
+    'Pair',
+    'PNL',
+    'ROI',
+    '',
+  ];
+
+  return (
+    <Wrapper
+      css={{
+        width: '100%',
+        height: '100%',
+      }}>
+      <BotsTable columns={columns}>
+        {botsTableData.map((item) => (
+          <BotsTableRow
+            aria-disabled={item.isDisabled}
+            key={item.id}
+            isDisabled={item.isDisabled}
+            onClick={item.isDisabled ? undefined : handleRowClick(item)}>
+            <BotsTableCell>{item.name}</BotsTableCell>
+            <BotsTableCell>{item.creationDate}</BotsTableCell>
+            <BotsTableCell>
+              <Exchange exchangeType={item.exchange} />
+            </BotsTableCell>
+            <BotsTableCell>
+              <Trade tradeType={item.status} />
+            </BotsTableCell>
+            <BotsTableCell>{item.pair}</BotsTableCell>
+            <BotsTableCell>
+              <PNL {...item.pnl} />
+            </BotsTableCell>
+            <BotsTableCell>
+              <ROI {...item.roi} />
+            </BotsTableCell>
+            <BotsTableCell>
+              <Actions row={item} />
+            </BotsTableCell>
+          </BotsTableRow>
+        ))}
+      </BotsTable>
+    </Wrapper>
+  );
+};

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

@@ -1,11 +1,11 @@
-import { useTheme } from '@emotion/react';
-import { Icon } from '@ssa-ui-kit/core';
-
-export const ActionIcon = ({
-  name,
-}: {
-  name: Parameters<typeof Icon>[0]['name'];
-}) => {
-  const theme = useTheme();
-  return <Icon name={name} size={15} color={theme.colors.greyFilterIcon} />;
-};
+import { useTheme } from '@emotion/react';
+import { Icon } from '@ssa-ui-kit/core';
+
+export const ActionIcon = ({
+  name,
+}: {
+  name: Parameters<typeof Icon>[0]['name'];
+}) => {
+  const theme = useTheme();
+  return <Icon name={name} size={15} color={theme.colors.greyFilterIcon} />;
+};

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

@@ -1,40 +1,40 @@
-import { Button } from '@ssa-ui-kit/core';
-
-export const ActionItem = ({
-  children,
-  ...rest
-}: Parameters<typeof Button>[0]) => (
-  <Button
-    css={{
-      background: 'none',
-      padding: '5px 10px',
-      color: '#2b2d31',
-      fontWeight: 500,
-      fontSize: 14,
-      gap: 0,
-      width: '100%',
-      height: 'auto',
-      borderRadius: 0,
-      textIndent: 10,
-      '&:fist-child': {
-        paddingTop: 10,
-      },
-      '&:last-child': {
-        paddingBottom: 10,
-      },
-      '&:hover,&:active,&:focus': {
-        background: 'none',
-        boxShadow: 'none',
-      },
-      '&:hover,&:active': {
-        background: '#eef1f7',
-      },
-      '&:hover svg path': {
-        background: 'none',
-        fill: '#2b2d31',
-      },
-    }}
-    {...rest}>
-    {children}
-  </Button>
-);
+import { Button } from '@ssa-ui-kit/core';
+
+export const ActionItem = ({
+  children,
+  ...rest
+}: Parameters<typeof Button>[0]) => (
+  <Button
+    css={{
+      background: 'none',
+      padding: '5px 10px',
+      color: '#2b2d31',
+      fontWeight: 500,
+      fontSize: 14,
+      gap: 0,
+      width: '100%',
+      height: 'auto',
+      borderRadius: 0,
+      textIndent: 10,
+      '&:fist-child': {
+        paddingTop: 10,
+      },
+      '&:last-child': {
+        paddingBottom: 10,
+      },
+      '&:hover,&:active,&:focus': {
+        background: 'none',
+        boxShadow: 'none',
+      },
+      '&:hover,&:active': {
+        background: '#eef1f7',
+      },
+      '&:hover svg path': {
+        background: 'none',
+        fill: '#2b2d31',
+      },
+    }}
+    {...rest}>
+    {children}
+  </Button>
+);

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

@@ -1,89 +1,89 @@
-import { MouseEventHandler, useState } from 'react';
-import { useTheme } from '@emotion/react';
-import {
-  Icon,
-  Popover,
-  PopoverContent,
-  PopoverDescription,
-  PopoverTrigger,
-} from '@ssa-ui-kit/core';
-import { BotsTableItem } from '@components/BotsTable/types';
-import { ActionItem } from './ActionItem';
-import { ActionsWrapper } from './ActionsWrapper';
-
-export const ActionMore = ({ row: { isDisabled } }: { row: BotsTableItem }) => {
-  const theme = useTheme();
-  const [open, setOpen] = useState(false);
-
-  const onOpenChange = (open: boolean) => {
-    setOpen(open);
-  };
-  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,
-        open,
-      }}
-      placement="top-start">
-      <PopoverTrigger
-        variant="custom"
-        isDisabled={isDisabled}
-        dataTestId="more-trigger-button"
-        css={{
-          marginLeft: 10,
-          padding: '0 10px',
-          cursor: isDisabled ? 'default' : 'pointer',
-          backgroundColor: 'unset',
-        }}
-        startIcon={
-          <Icon
-            name="more-vertical"
-            size={15}
-            color={theme.colors.greyDropdownFocused}
-          />
-        }
-        onClick={actionMoreHandler}
-      />
-      <PopoverContent>
-        <PopoverDescription>
-          <ActionsWrapper>
-            <ActionItem
-              startIcon={
-                <Icon
-                  name="copy"
-                  size={15}
-                  color={theme.colors.greyFilterIcon}
-                />
-              }
-              onClick={actionHandler('copy')}>
-              Copy
-            </ActionItem>
-            <ActionItem
-              startIcon={
-                <Icon
-                  name="archive"
-                  size={15}
-                  color={theme.colors.greyFilterIcon}
-                />
-              }
-              onClick={actionHandler('archive')}>
-              Archive
-            </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 { BotsTableItem } from '@components/BotsTable/types';
+import { ActionItem } from './ActionItem';
+import { ActionsWrapper } from './ActionsWrapper';
+
+export const ActionMore = ({ row: { isDisabled } }: { row: BotsTableItem }) => {
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+
+  const onOpenChange = (open: boolean) => {
+    setOpen(open);
+  };
+  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,
+        open,
+      }}
+      placement="top-start">
+      <PopoverTrigger
+        variant="custom"
+        isDisabled={isDisabled}
+        dataTestId="more-trigger-button"
+        css={{
+          marginLeft: 10,
+          padding: '0 10px',
+          cursor: isDisabled ? 'default' : 'pointer',
+          backgroundColor: 'unset',
+        }}
+        startIcon={
+          <Icon
+            name="more-vertical"
+            size={15}
+            color={theme.colors.greyDropdownFocused}
+          />
+        }
+        onClick={actionMoreHandler}
+      />
+      <PopoverContent>
+        <PopoverDescription>
+          <ActionsWrapper>
+            <ActionItem
+              startIcon={
+                <Icon
+                  name="copy"
+                  size={15}
+                  color={theme.colors.greyFilterIcon}
+                />
+              }
+              onClick={actionHandler('copy')}>
+              Copy
+            </ActionItem>
+            <ActionItem
+              startIcon={
+                <Icon
+                  name="archive"
+                  size={15}
+                  color={theme.colors.greyFilterIcon}
+                />
+              }
+              onClick={actionHandler('archive')}>
+              Archive
+            </ActionItem>
+          </ActionsWrapper>
+        </PopoverDescription>
+      </PopoverContent>
+    </Popover>
+  );
+};