@ssa-ui-kit/widgets 0.0.7-alpha → 0.0.9-alpha

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>
+  );
+};

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

@@ -1,133 +1,133 @@
-import { MouseEventHandler, useEffect, useState } from 'react';
-import { useForm, FieldValues } from 'react-hook-form';
-import {
-  Button,
-  Input,
-  Popover,
-  PopoverContent,
-  PopoverDescription,
-  PopoverTrigger,
-  Typography,
-  Wrapper,
-} from '@ssa-ui-kit/core';
-import { BotsTableItem } from '@components/BotsTable/types';
-import { actionsIcons } from './consts';
-
-export const ActionRun = ({ row }: { row: BotsTableItem }) => {
-  const { status, isDisabled } = row;
-  const ActionIcon = actionsIcons[status];
-
-  const [open, setOpen] = useState(false);
-  const { register, handleSubmit, resetField } = useForm<FieldValues>();
-
-  const onOpenChange = (open: boolean) => {
-    if (['pending', 'liquidation'].includes(status)) {
-      setOpen(open);
-    }
-  };
-  const actionRunHandler: MouseEventHandler<HTMLElement> = (event) => {
-    event.stopPropagation();
-  };
-  useEffect(() => {
-    return () => {
-      resetField('reason');
-    };
-  }, []);
-
-  return (
-    <Popover
-      floatingOptions={{
-        onOpenChange,
-        open,
-      }}
-      placement="top-start">
-      <PopoverTrigger
-        variant="custom"
-        isDisabled={isDisabled}
-        dataTestId="run-reason-trigger-button"
-        css={{
-          marginLeft: 10,
-          padding: '0 10px',
-          cursor: isDisabled ? 'default' : 'pointer',
-          backgroundColor: 'unset',
-          '& > span': {
-            height: '100%',
-            alignItems: 'center',
-          },
-        }}
-        startIcon={<ActionIcon />}
-        onClick={actionRunHandler}
-      />
-      <PopoverContent>
-        <PopoverDescription>
-          <Wrapper
-            css={{
-              width: 307,
-              height: 85,
-              borderRadius: 6,
-              padding: 10,
-              background: '#fff',
-              boxShadow: '0px 4px 10px 0px rgba(0, 0, 0, 0.10)',
-            }}
-            onClick={(event) => event.stopPropagation()}>
-            <form
-              onSubmit={(event) => {
-                event.stopPropagation();
-                handleSubmit((data) => {
-                  alert('Submitting... ' + JSON.stringify(data));
-                  console.log('Submitting... ' + JSON.stringify(data));
-                })(event);
-                setOpen(false);
-                resetField('reason');
-              }}>
-              <Typography
-                variant="h6"
-                css={{
-                  marginBottom: 6,
-                  lineHeight: '18px',
-                  textIndent: 4,
-                }}>
-                Run Reason
-              </Typography>
-              <Wrapper
-                css={{
-                  gap: 7,
-                }}>
-                <Input
-                  name="reason"
-                  register={register}
-                  placeholder="Enter"
-                  css={{
-                    borderRadius: 6,
-                    '&:hover': {
-                      margin: '-0.4px',
-                    },
-                    '&:focus': {
-                      margin: '-1px',
-                    },
-                  }}
-                />
-                <Button
-                  variant="info"
-                  type="submit"
-                  css={{
-                    width: 90,
-                    height: 40,
-                    padding: '0 14px',
-                    borderRadius: 6,
-                    fontSize: 14,
-                    fontWeight: 700,
-                    justifyContent: 'center',
-                    background:
-                      'linear-gradient(247deg, #7599DE 14.71%, #4178E1 85.29%)',
-                  }}>
-                  Run
-                </Button>
-              </Wrapper>
-            </form>
-          </Wrapper>
-        </PopoverDescription>
-      </PopoverContent>
-    </Popover>
-  );
-};
+import { MouseEventHandler, useEffect, useState } from 'react';
+import { useForm, FieldValues } from 'react-hook-form';
+import {
+  Button,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverTrigger,
+  Typography,
+  Wrapper,
+} from '@ssa-ui-kit/core';
+import { BotsTableItem } from '@components/BotsTable/types';
+import { actionsIcons } from './consts';
+
+export const ActionRun = ({ row }: { row: BotsTableItem }) => {
+  const { status, isDisabled } = row;
+  const ActionIcon = actionsIcons[status];
+
+  const [open, setOpen] = useState(false);
+  const { register, handleSubmit, resetField } = useForm<FieldValues>();
+
+  const onOpenChange = (open: boolean) => {
+    if (['pending', 'liquidation'].includes(status)) {
+      setOpen(open);
+    }
+  };
+  const actionRunHandler: MouseEventHandler<HTMLElement> = (event) => {
+    event.stopPropagation();
+  };
+  useEffect(() => {
+    return () => {
+      resetField('reason');
+    };
+  }, []);
+
+  return (
+    <Popover
+      floatingOptions={{
+        onOpenChange,
+        open,
+      }}
+      placement="top-start">
+      <PopoverTrigger
+        variant="custom"
+        isDisabled={isDisabled}
+        dataTestId="run-reason-trigger-button"
+        css={{
+          marginLeft: 10,
+          padding: '0 10px',
+          cursor: isDisabled ? 'default' : 'pointer',
+          backgroundColor: 'unset',
+          '& > span': {
+            height: '100%',
+            alignItems: 'center',
+          },
+        }}
+        startIcon={<ActionIcon />}
+        onClick={actionRunHandler}
+      />
+      <PopoverContent>
+        <PopoverDescription>
+          <Wrapper
+            css={{
+              width: 307,
+              height: 85,
+              borderRadius: 6,
+              padding: 10,
+              background: '#fff',
+              boxShadow: '0px 4px 10px 0px rgba(0, 0, 0, 0.10)',
+            }}
+            onClick={(event) => event.stopPropagation()}>
+            <form
+              onSubmit={(event) => {
+                event.stopPropagation();
+                handleSubmit((data) => {
+                  alert('Submitting... ' + JSON.stringify(data));
+                  console.log('Submitting... ' + JSON.stringify(data));
+                })(event);
+                setOpen(false);
+                resetField('reason');
+              }}>
+              <Typography
+                variant="h6"
+                css={{
+                  marginBottom: 6,
+                  lineHeight: '18px',
+                  textIndent: 4,
+                }}>
+                Run Reason
+              </Typography>
+              <Wrapper
+                css={{
+                  gap: 7,
+                }}>
+                <Input
+                  name="reason"
+                  register={register}
+                  placeholder="Enter"
+                  css={{
+                    borderRadius: 6,
+                    '&:hover': {
+                      margin: '-0.4px',
+                    },
+                    '&:focus': {
+                      margin: '-1px',
+                    },
+                  }}
+                />
+                <Button
+                  variant="info"
+                  type="submit"
+                  css={{
+                    width: 90,
+                    height: 40,
+                    padding: '0 14px',
+                    borderRadius: 6,
+                    fontSize: 14,
+                    fontWeight: 700,
+                    justifyContent: 'center',
+                    background:
+                      'linear-gradient(247deg, #7599DE 14.71%, #4178E1 85.29%)',
+                  }}>
+                  Run
+                </Button>
+              </Wrapper>
+            </form>
+          </Wrapper>
+        </PopoverDescription>
+      </PopoverContent>
+    </Popover>
+  );
+};