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

package/src/components/ExchangeAccountKeys/ExchangeAccountKeys.stories.tsx

@@ -1,14 +1,14 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { ExchangeAccountKeys } from './ExchangeAccountKeys';
-import { StoryComponent } from './stories/StoryComponent';
-
-export default {
-  title: 'Widgets/ExchangeAccountKeys',
-  component: ExchangeAccountKeys,
-} as Meta<typeof ExchangeAccountKeys>;
-
-export const Default: StoryObj<typeof ExchangeAccountKeys> = () => (
-  <StoryComponent onDelete={() => alert('Account Deleted!')} />
-);
-
-Default.args = {};
+import { Meta, StoryObj } from '@storybook/react';
+import { ExchangeAccountKeys } from './ExchangeAccountKeys';
+import { StoryComponent } from './stories/StoryComponent';
+
+export default {
+  title: 'Widgets/ExchangeAccountKeys',
+  component: ExchangeAccountKeys,
+} as Meta<typeof ExchangeAccountKeys>;
+
+export const Default: StoryObj<typeof ExchangeAccountKeys> = () => (
+  <StoryComponent onDelete={() => alert('Account Deleted!')} />
+);
+
+Default.args = {};

package/src/components/ExchangeAccountKeys/ExchangeAccountKeys.tsx

@@ -1,71 +1,71 @@
-import { useEffect, useState } from 'react';
-import { useTheme } from '@emotion/react';
-import {
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  Icon,
-  Typography,
-} from '@ssa-ui-kit/core';
-import { ExchangeAccountKeysProps } from './types';
-import * as S from './styles';
-
-export const ExchangeAccountKeys = ({
-  title,
-  apiKey,
-  secretKey,
-  onDelete,
-  onVisibilityChange,
-  isDisabled,
-}: ExchangeAccountKeysProps) => {
-  const [isVisible, setIsVisible] = useState(false);
-  const theme = useTheme();
-  const placeholder = <span>******</span>;
-
-  const handleClickVisible = () => {
-    setIsVisible((prev) => !prev);
-  };
-
-  useEffect(() => {
-    onVisibilityChange(isVisible);
-  }, [isVisible]);
-
-  return (
-    <Card noShadow css={S.Card} className={isDisabled ? 'disabled' : ''}>
-      <CardHeader css={S.CardHeader}>
-        <Typography variant="h5" weight="bold">
-          {title}
-        </Typography>
-        <Button css={S.DeleteButton} onClick={onDelete}>
-          <Icon name="bin" size={15} color={theme.colors.greyDropdownFocused} />
-        </Button>
-      </CardHeader>
-      <CardContent css={S.CardContent} direction="column">
-        <div css={S.KeyItem}>
-          <Typography variant="h6" color={theme.colors.greyDropdownFocused}>
-            API Key
-          </Typography>
-          <Typography variant="h5" weight="bold" css={S.NoWrapText}>
-            {apiKey}
-          </Typography>
-        </div>
-        <div css={S.KeyItem}>
-          <Typography variant="h6" color={theme.colors.greyDropdownFocused}>
-            Secret Key
-          </Typography>
-          <Typography variant="h5" weight="bold" css={S.SecretKey}>
-            {isVisible ? secretKey || placeholder : placeholder}
-            <Button css={S.VisibleButton} onClick={handleClickVisible}>
-              <Icon
-                name={isVisible ? 'visible' : 'invisible'}
-                size={20}
-                color={theme.colors.greyDropdownFocused}
-              />
-            </Button>
-          </Typography>
-        </div>
-      </CardContent>
-    </Card>
-  );
-};
+import { useEffect, useState } from 'react';
+import { useTheme } from '@emotion/react';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Icon,
+  Typography,
+} from '@ssa-ui-kit/core';
+import { ExchangeAccountKeysProps } from './types';
+import * as S from './styles';
+
+export const ExchangeAccountKeys = ({
+  title,
+  apiKey,
+  secretKey,
+  onDelete,
+  onVisibilityChange,
+  isDisabled,
+}: ExchangeAccountKeysProps) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const theme = useTheme();
+  const placeholder = <span>******</span>;
+
+  const handleClickVisible = () => {
+    setIsVisible((prev) => !prev);
+  };
+
+  useEffect(() => {
+    onVisibilityChange(isVisible);
+  }, [isVisible]);
+
+  return (
+    <Card noShadow css={S.Card} className={isDisabled ? 'disabled' : ''}>
+      <CardHeader css={S.CardHeader}>
+        <Typography variant="h5" weight="bold">
+          {title}
+        </Typography>
+        <Button css={S.DeleteButton} onClick={onDelete}>
+          <Icon name="bin" size={15} color={theme.colors.greyDropdownFocused} />
+        </Button>
+      </CardHeader>
+      <CardContent css={S.CardContent} direction="column">
+        <div css={S.KeyItem}>
+          <Typography variant="h6" color={theme.colors.greyDropdownFocused}>
+            API Key
+          </Typography>
+          <Typography variant="h5" weight="bold" css={S.NoWrapText}>
+            {apiKey}
+          </Typography>
+        </div>
+        <div css={S.KeyItem}>
+          <Typography variant="h6" color={theme.colors.greyDropdownFocused}>
+            Secret Key
+          </Typography>
+          <Typography variant="h5" weight="bold" css={S.SecretKey}>
+            {isVisible ? secretKey || placeholder : placeholder}
+            <Button css={S.VisibleButton} onClick={handleClickVisible}>
+              <Icon
+                name={isVisible ? 'visible' : 'invisible'}
+                size={20}
+                color={theme.colors.greyDropdownFocused}
+              />
+            </Button>
+          </Typography>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

package/src/components/ExchangeAccountKeys/helpers.ts

@@ -1,7 +1,7 @@
-const secretKey = '1234567890';
-
-export const getMockData = () => {
-  return new Promise<string>((resolve) => {
-    resolve(secretKey);
-  });
-};
+const secretKey = '1234567890';
+
+export const getMockData = () => {
+  return new Promise<string>((resolve) => {
+    resolve(secretKey);
+  });
+};

package/src/components/ExchangeAccountKeys/index.ts

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

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

@@ -1,33 +1,33 @@
-import { useState } from 'react';
-import { ExchangeAccountKeys } from '../ExchangeAccountKeys';
-import { getMockData } from '../helpers';
-
-interface onDelete {
-  onDelete: () => void;
-}
-
-export const StoryComponent = ({ onDelete }: onDelete) => {
-  const [isDisabled, setIsDisabled] = useState(false);
-  const [secretKey, setSecretKey] = useState('');
-
-  const handleClickVisible = (isVisible: boolean) => {
-    if (isVisible) {
-      setIsDisabled(true);
-      getMockData().then((data) => {
-        setSecretKey(data);
-        setIsDisabled(false);
-      });
-    }
-  };
-
-  return (
-    <ExchangeAccountKeys
-      title="Account Name"
-      apiKey="123456789012345678901234567890"
-      secretKey={secretKey}
-      onDelete={onDelete}
-      onVisibilityChange={handleClickVisible}
-      isDisabled={isDisabled}
-    />
-  );
-};
+import { useState } from 'react';
+import { ExchangeAccountKeys } from '../ExchangeAccountKeys';
+import { getMockData } from '../helpers';
+
+interface onDelete {
+  onDelete: () => void;
+}
+
+export const StoryComponent = ({ onDelete }: onDelete) => {
+  const [isDisabled, setIsDisabled] = useState(false);
+  const [secretKey, setSecretKey] = useState('');
+
+  const handleClickVisible = (isVisible: boolean) => {
+    if (isVisible) {
+      setIsDisabled(true);
+      getMockData().then((data) => {
+        setSecretKey(data);
+        setIsDisabled(false);
+      });
+    }
+  };
+
+  return (
+    <ExchangeAccountKeys
+      title="Account Name"
+      apiKey="123456789012345678901234567890"
+      secretKey={secretKey}
+      onDelete={onDelete}
+      onVisibilityChange={handleClickVisible}
+      isDisabled={isDisabled}
+    />
+  );
+};

package/src/components/ExchangeAccountKeys/styles.ts

@@ -1,97 +1,97 @@
-import { Theme, css } from '@emotion/react';
-
-export const Card = (theme: Theme) => css`
-  box-shadow: 0 10px 40px 0 ${theme.colors.greyShadow};
-  padding: 0;
-  border-radius: 20px;
-
-  &.disabled {
-    pointer-events: none;
-  }
-`;
-
-export const CardHeader = (theme: Theme) => css`
-  align-items: center;
-  background: ${theme.colors.greyLighter};
-  padding: 10px;
-  border-radius: 20px 20px 0 0;
-  margin-bottom: 0;
-
-  ${theme.mediaQueries.md} {
-    padding: 15px 10px 15px 30px;
-  }
-`;
-
-export const DeleteButton = (theme: Theme) => css`
-  height: auto;
-  background: none;
-  box-shadow: none;
-
-  &:hover,
-  &:focus {
-    background: none;
-    box-shadow: none;
-  }
-
-  &:hover {
-    svg path {
-      fill: ${theme.colors.greyDarker};
-    }
-  }
-
-  ${theme.mediaQueries.md} {
-    padding: 12px;
-  }
-`;
-
-export const CardContent = (theme: Theme) => css`
-  width: 100%;
-  padding: 10px;
-
-  ${theme.mediaQueries.md} {
-    padding: 13px 30px 20px;
-  }
-`;
-
-export const KeyItem = css`
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-
-  &:not(:last-child) {
-    margin-bottom: 20px;
-  }
-`;
-
-export const VisibleButton = css`
-  height: auto;
-  padding: 0;
-  background: none;
-  box-shadow: none;
-
-  &:hover,
-  &:focus {
-    background: none;
-    box-shadow: none;
-  }
-`;
-
-export const SecretKey = css`
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  height: 24px;
-
-  span {
-    padding: 4px 0 0;
-  }
-`;
-
-export const NoWrapText = (theme: Theme) => css`
-  white-space: nowrap;
-  overflow-x: auto;
-
-  ${theme.mediaQueries.md} {
-    overflow-x: visible;
-  }
-`;
+import { Theme, css } from '@emotion/react';
+
+export const Card = (theme: Theme) => css`
+  box-shadow: 0 10px 40px 0 ${theme.colors.greyShadow};
+  padding: 0;
+  border-radius: 20px;
+
+  &.disabled {
+    pointer-events: none;
+  }
+`;
+
+export const CardHeader = (theme: Theme) => css`
+  align-items: center;
+  background: ${theme.colors.greyLighter};
+  padding: 10px;
+  border-radius: 20px 20px 0 0;
+  margin-bottom: 0;
+
+  ${theme.mediaQueries.md} {
+    padding: 15px 10px 15px 30px;
+  }
+`;
+
+export const DeleteButton = (theme: Theme) => css`
+  height: auto;
+  background: none;
+  box-shadow: none;
+
+  &:hover,
+  &:focus {
+    background: none;
+    box-shadow: none;
+  }
+
+  &:hover {
+    svg path {
+      fill: ${theme.colors.greyDarker};
+    }
+  }
+
+  ${theme.mediaQueries.md} {
+    padding: 12px;
+  }
+`;
+
+export const CardContent = (theme: Theme) => css`
+  width: 100%;
+  padding: 10px;
+
+  ${theme.mediaQueries.md} {
+    padding: 13px 30px 20px;
+  }
+`;
+
+export const KeyItem = css`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+
+  &:not(:last-child) {
+    margin-bottom: 20px;
+  }
+`;
+
+export const VisibleButton = css`
+  height: auto;
+  padding: 0;
+  background: none;
+  box-shadow: none;
+
+  &:hover,
+  &:focus {
+    background: none;
+    box-shadow: none;
+  }
+`;
+
+export const SecretKey = css`
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  height: 24px;
+
+  span {
+    padding: 4px 0 0;
+  }
+`;
+
+export const NoWrapText = (theme: Theme) => css`
+  white-space: nowrap;
+  overflow-x: auto;
+
+  ${theme.mediaQueries.md} {
+    overflow-x: visible;
+  }
+`;

package/src/components/ExchangeAccountKeys/types.ts

@@ -1,8 +1,8 @@
-export interface ExchangeAccountKeysProps {
-  title: string | JSX.Element;
-  apiKey: string;
-  secretKey: string;
-  onDelete: () => void;
-  onVisibilityChange: (e: boolean) => void;
-  isDisabled?: boolean;
-}
+export interface ExchangeAccountKeysProps {
+  title: string | JSX.Element;
+  apiKey: string;
+  secretKey: string;
+  onDelete: () => void;
+  onVisibilityChange: (e: boolean) => void;
+  isDisabled?: boolean;
+}

package/src/components/Filters/FilterBlockWrapper.tsx

@@ -1,11 +1,11 @@
-import styled from '@emotion/styled';
-import { Wrapper } from '@ssa-ui-kit/core';
-
-export const FilterBlockWrapper = styled(Wrapper)`
-  justify-content: end;
-  width: 500px;
-  & > div {
-    min-width: auto;
-    margin-right: 10px;
-  }
-`;
+import styled from '@emotion/styled';
+import { Wrapper } from '@ssa-ui-kit/core';
+
+export const FilterBlockWrapper = styled(Wrapper)`
+  justify-content: end;
+  width: 500px;
+  & > div {
+    min-width: auto;
+    margin-right: 10px;
+  }
+`;

package/src/components/Filters/Filters.e2e.ts

@@ -1,47 +1,47 @@
-import { test, expect, Page } from '@playwright/test';
-import { SCREEN_SIZES } from '../../consts';
-
-const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
-
-const gotoPage = (page: Page) => {
-  return page.goto(
-    'http://localhost:6007/iframe.html?args=&id=widgets-filters--default&viewMode=story',
-  );
-};
-
-test('Widgets: Filters should be opened correctly', async ({ page }) => {
-  await gotoPage(page);
-  await page.setViewportSize(SCREEN_SIZES[1920]);
-  await expect(page.getByText('strategy #3Carrot down')).toBeVisible();
-  await expect(page.getByText('More')).not.toBeVisible();
-  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-filters--default__`;
-  await page.screenshot({
-    path: `${SCREENSHOT_PREFIX}[w1920px].png`,
-  });
-});
-
-test('Widgets: Filters - More button should be shown', async ({ page }) => {
-  await gotoPage(page);
-  await page.setViewportSize(SCREEN_SIZES[900]);
-  await expect(page.getByText('More2')).toBeVisible();
-  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-filters--more-button__`;
-  await page.screenshot({
-    path: `${SCREENSHOT_PREFIX}[w900px].png`,
-  });
-});
-
-test('Widgets: Filters - More button count notification should be changed', async ({
-  page,
-}) => {
-  await gotoPage(page);
-  await page.setViewportSize(SCREEN_SIZES[900]);
-  await expect(page.getByText('More2')).toBeVisible();
-
-  await page.getByText('Status: Running').click();
-  await page.getByRole('button', { name: 'Stopped' }).click();
-  await expect(page.getByText('Status: Running+1')).toBeVisible();
-
-  await page.getByText('strategy #3Carrot down').click();
-  await page.getByRole('button', { name: 'strategy #3 checkbox1' }).click();
-  await expect(page.getByText('More3')).toBeVisible();
-});
+import { test, expect, Page } from '@playwright/test';
+import { SCREEN_SIZES } from '../../consts';
+
+const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
+
+const gotoPage = (page: Page) => {
+  return page.goto(
+    'http://localhost:6007/iframe.html?args=&id=widgets-filters--default&viewMode=story',
+  );
+};
+
+test('Widgets: Filters should be opened correctly', async ({ page }) => {
+  await gotoPage(page);
+  await page.setViewportSize(SCREEN_SIZES[1920]);
+  await expect(page.getByText('strategy #3Carrot down')).toBeVisible();
+  await expect(page.getByText('More')).not.toBeVisible();
+  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-filters--default__`;
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w1920px].png`,
+  });
+});
+
+test('Widgets: Filters - More button should be shown', async ({ page }) => {
+  await gotoPage(page);
+  await page.setViewportSize(SCREEN_SIZES[900]);
+  await expect(page.getByText('More2')).toBeVisible();
+  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-filters--more-button__`;
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w900px].png`,
+  });
+});
+
+test('Widgets: Filters - More button count notification should be changed', async ({
+  page,
+}) => {
+  await gotoPage(page);
+  await page.setViewportSize(SCREEN_SIZES[900]);
+  await expect(page.getByText('More2')).toBeVisible();
+
+  await page.getByText('Status: Running').click();
+  await page.getByRole('button', { name: 'Stopped' }).click();
+  await expect(page.getByText('Status: Running+1')).toBeVisible();
+
+  await page.getByText('strategy #3Carrot down').click();
+  await page.getByRole('button', { name: 'strategy #3 checkbox1' }).click();
+  await expect(page.getByText('More3')).toBeVisible();
+});