@ssa-ui-kit/core 0.0.26-alpha → 0.0.28-alpha

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

@@ -0,0 +1,421 @@
+import { TableFilterConfig } from '@components/TableFilters/types';
+
+export const mockData: TableFilterConfig = {
+  strategy: {
+    id: 'strategy',
+    title: 'Strategy',
+    isOpened: true,
+    ariaControls: 'strategy-panel',
+    selectedItems: ['checkbox1', 'checkbox4'],
+    items: {
+      checkbox1: {
+        key: 'strategy-checkbox1',
+        name: 'checkbox1',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox1'],
+          text: 'checkbox1',
+        },
+      },
+      checkbox2: {
+        key: 'strategy-checkbox2',
+        name: 'checkbox2',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox2'],
+          text: 'checkbox2',
+        },
+      },
+      checkbox3: {
+        key: 'strategy-checkbox3',
+        name: 'checkbox3',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox3'],
+          text: 'checkbox3',
+        },
+      },
+      checkbox4: {
+        key: 'strategy-checkbox4',
+        name: 'checkbox4',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox4'],
+          text: 'checkbox4',
+        },
+      },
+      checkbox5: {
+        key: 'strategy-checkbox5',
+        name: 'checkbox5',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox5'],
+          text: 'checkbox5',
+        },
+      },
+    },
+  },
+  strategy2: {
+    id: 'strategy2',
+    title: 'Strategy #2',
+    isOpened: false,
+    ariaControls: 'strategy2-panel',
+    selectedItems: ['strategy2Checkbox1'],
+    items: {
+      strategy2Checkbox1: {
+        key: 'strategy2-checkbox1',
+        name: 'strategy2Checkbox1',
+        content: {
+          statePath: ['strategy', 'items', 'strategy2Checkbox1'],
+          text: 'strategy #2 checkbox1',
+        },
+      },
+      strategy2Checkbox2: {
+        key: 'strategy2-checkbox2',
+        name: 'strategy2Checkbox2',
+        content: {
+          statePath: ['strategy', 'items', 'strategy2Checkbox2'],
+          text: 'strategy #2 checkbox2',
+        },
+      },
+      strategy2Checkbox3: {
+        key: 'strategy2-checkbox3',
+        name: 'strategy2Checkbox3',
+        content: {
+          statePath: ['strategy', 'items', 'strategy2Checkbox3'],
+          text: 'strategy #2 checkbox3',
+        },
+      },
+      strategy2Checkbox4: {
+        key: 'strategy2-checkbox4',
+        name: 'strategy2Checkbox4',
+        content: {
+          statePath: ['strategy', 'items', 'strategy2Checkbox4'],
+          text: 'strategy #2 checkbox4',
+        },
+      },
+      strategy2Checkbox5: {
+        key: 'strategy2-checkbox5',
+        name: 'strategy2Checkbox5',
+        content: {
+          statePath: ['strategy', 'items', 'strategy2Checkbox5'],
+          text: 'strategy #2 checkbox5',
+        },
+      },
+    },
+  },
+  strategy3: {
+    id: 'strategy3',
+    title: 'Strategy #3',
+    isOpened: false,
+    ariaControls: 'strategy3-panel',
+    selectedItems: [],
+    items: {
+      strategy3Checkbox1: {
+        key: 'strategy3-checkbox1',
+        name: 'strategy3Checkbox1',
+        content: {
+          statePath: ['strategy', 'items', 'strategy3Checkbox1'],
+          text: 'strategy #3 checkbox1',
+        },
+      },
+      strategy3Checkbox2: {
+        key: 'strategy3-checkbox2',
+        name: 'strategy3Checkbox2',
+        content: {
+          statePath: ['strategy', 'items', 'strategy3Checkbox2'],
+          text: 'strategy #3 checkbox2',
+        },
+      },
+      strategy3Checkbox3: {
+        key: 'strategy3-checkbox3',
+        name: 'strategy3Checkbox3',
+        content: {
+          statePath: ['strategy', 'items', 'strategy3Checkbox3'],
+          text: 'strategy #3 checkbox3',
+        },
+      },
+      strategy3Checkbox4: {
+        key: 'strategy3-checkbox4',
+        name: 'strategy3Checkbox4',
+        content: {
+          statePath: ['strategy', 'items', 'strategy3Checkbox4'],
+          text: 'strategy #3 checkbox4',
+        },
+      },
+      strategy3Checkbox5: {
+        key: 'strategy3-checkbox5',
+        name: 'strategy3Checkbox5',
+        content: {
+          statePath: ['strategy', 'items', 'strategy3Checkbox5'],
+          text: 'strategy #3 checkbox5',
+        },
+      },
+    },
+  },
+  status: {
+    id: 'status',
+    title: 'Status',
+    isOpened: false,
+    ariaControls: 'status-panel',
+    selectedItems: ['running'],
+    items: {
+      running: {
+        key: 'status-checkbox-running',
+        name: 'running',
+        content: {
+          statePath: ['status', 'items', 'running'],
+          text: 'Running',
+        },
+      },
+      stopped: {
+        key: 'status-checkbox-stopped',
+        name: 'stopped',
+        content: {
+          statePath: ['status', 'items', 'stopped'],
+          text: 'Stopped',
+        },
+      },
+    },
+  },
+  pairs: {
+    id: 'pairs',
+    title: 'Pairs',
+    isOpened: false,
+    ariaControls: 'pairs-panel',
+    selectedItems: ['btcfdusd'],
+    items: {
+      btcfdusd: {
+        key: 'btcfdusd',
+        name: 'btcfdusd',
+        isDisabled: true,
+        content: {
+          statePath: ['pairs', 'items', 'btcfdusd'],
+          text: 'BTC-FDUSD',
+        },
+      },
+    },
+  },
+  exchange: {
+    id: 'exchange',
+    title: 'Exchange',
+    isOpened: false,
+    ariaControls: 'exchange-panel',
+    selectedItems: ['binance'],
+    items: {
+      binance: {
+        key: 'binance',
+        name: 'binance',
+        isDisabled: true,
+        content: {
+          statePath: ['exchange', 'items', 'binance'],
+          text: 'Binance',
+        },
+      },
+    },
+  },
+};
+
+export const mockDataEnabled: TableFilterConfig = {
+  strategy: {
+    id: 'strategy',
+    title: 'Strategy',
+    isOpened: true,
+    ariaControls: 'strategy-panel',
+    selectedItems: ['checkbox1', 'checkbox4'],
+    items: {
+      checkbox1: {
+        key: 'strategy-checkbox1',
+        name: 'checkbox1',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox1'],
+          text: 'checkbox1',
+        },
+      },
+      checkbox2: {
+        key: 'strategy-checkbox2',
+        name: 'checkbox2',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox2'],
+          text: 'checkbox2',
+        },
+      },
+      checkbox3: {
+        key: 'strategy-checkbox3',
+        name: 'checkbox3',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox3'],
+          text: 'checkbox3',
+        },
+      },
+      checkbox4: {
+        key: 'strategy-checkbox4',
+        name: 'checkbox4',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox4'],
+          text: 'checkbox4',
+        },
+      },
+      checkbox5: {
+        key: 'strategy-checkbox5',
+        name: 'checkbox5',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox5'],
+          text: 'checkbox5',
+        },
+      },
+    },
+  },
+  strategy2: {
+    id: 'strategy2',
+    title: 'Strategy #2',
+    isOpened: false,
+    ariaControls: 'strategy2-panel',
+    selectedItems: [],
+    items: {
+      strategy2Checkbox1: {
+        key: 'strategy2-checkbox1',
+        name: 'strategy2Checkbox1',
+        content: {
+          statePath: ['strategy', 'items', 'strategy2Checkbox1'],
+          text: 'strategy #2 checkbox1',
+        },
+      },
+      strategy2Checkbox2: {
+        key: 'strategy2-checkbox2',
+        name: 'strategy2Checkbox2',
+        content: {
+          statePath: ['strategy', 'items', 'strategy2Checkbox2'],
+          text: 'strategy #2 checkbox2',
+        },
+      },
+      strategy2Checkbox3: {
+        key: 'strategy2-checkbox3',
+        name: 'strategy2Checkbox3',
+        content: {
+          statePath: ['strategy', 'items', 'strategy2Checkbox3'],
+          text: 'strategy #2 checkbox3',
+        },
+      },
+      strategy2Checkbox4: {
+        key: 'strategy2-checkbox4',
+        name: 'strategy2Checkbox4',
+        content: {
+          statePath: ['strategy', 'items', 'strategy2Checkbox4'],
+          text: 'strategy #2 checkbox4',
+        },
+      },
+      strategy2Checkbox5: {
+        key: 'strategy2-checkbox5',
+        name: 'strategy2Checkbox5',
+        content: {
+          statePath: ['strategy', 'items', 'strategy2Checkbox5'],
+          text: 'strategy #2 checkbox5',
+        },
+      },
+    },
+  },
+  strategy3: {
+    id: 'strategy3',
+    title: 'Strategy #3',
+    isOpened: false,
+    ariaControls: 'strategy3-panel',
+    selectedItems: [],
+    items: {
+      strategy3Checkbox1: {
+        key: 'strategy3-checkbox1',
+        name: 'strategy3Checkbox1',
+        content: {
+          statePath: ['strategy', 'items', 'strategy3Checkbox1'],
+          text: 'strategy #3 checkbox1',
+        },
+      },
+      strategy3Checkbox2: {
+        key: 'strategy3-checkbox2',
+        name: 'strategy3Checkbox2',
+        content: {
+          statePath: ['strategy', 'items', 'strategy3Checkbox2'],
+          text: 'strategy #3 checkbox2',
+        },
+      },
+      strategy3Checkbox3: {
+        key: 'strategy3-checkbox3',
+        name: 'strategy3Checkbox3',
+        content: {
+          statePath: ['strategy', 'items', 'strategy3Checkbox3'],
+          text: 'strategy #3 checkbox3',
+        },
+      },
+      strategy3Checkbox4: {
+        key: 'strategy3-checkbox4',
+        name: 'strategy3Checkbox4',
+        content: {
+          statePath: ['strategy', 'items', 'strategy3Checkbox4'],
+          text: 'strategy #3 checkbox4',
+        },
+      },
+      strategy3Checkbox5: {
+        key: 'strategy3-checkbox5',
+        name: 'strategy3Checkbox5',
+        content: {
+          statePath: ['strategy', 'items', 'strategy3Checkbox5'],
+          text: 'strategy #3 checkbox5',
+        },
+      },
+    },
+  },
+  status: {
+    id: 'status',
+    title: 'Status',
+    isOpened: false,
+    ariaControls: 'status-panel',
+    selectedItems: [],
+    items: {
+      running: {
+        key: 'status-checkbox-running',
+        name: 'running',
+        content: {
+          statePath: ['status', 'items', 'running'],
+          text: 'Running',
+        },
+      },
+      stopped: {
+        key: 'status-checkbox-stopped',
+        name: 'stopped',
+        content: {
+          statePath: ['status', 'items', 'stopped'],
+          text: 'Stopped',
+        },
+      },
+    },
+  },
+  pairs: {
+    id: 'pairs',
+    title: 'Pairs',
+    isOpened: false,
+    ariaControls: 'pairs-panel',
+    selectedItems: [],
+    items: {
+      btcfdusd: {
+        key: 'btcfdusd',
+        name: 'btcfdusd',
+        content: {
+          statePath: ['pairs', 'items', 'btcfdusd'],
+          text: 'BTC-FDUSD',
+        },
+      },
+    },
+  },
+  exchange: {
+    id: 'exchange',
+    title: 'Exchange',
+    isOpened: false,
+    ariaControls: 'exchange-panel',
+    selectedItems: [],
+    items: {
+      binance: {
+        key: 'binance',
+        name: 'binance',
+        content: {
+          statePath: ['exchange', 'items', 'binance'],
+          text: 'Binance',
+        },
+      },
+    },
+  },
+};

package/src/components/Filters/types.ts

@@ -0,0 +1,4 @@
+export type ElementInfo = {
+  name: string;
+  visibility?: boolean;
+};

package/src/components/LinksTabBar/LinksTabBar.e2e.ts

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test';
+import { SCREEN_SIZES } from '../../consts';
+
+const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
+
+test('Widgets: LinksTabBar', async ({ page }) => {
+  await page.setViewportSize(SCREEN_SIZES[1920]);
+  await page.goto(
+    'http://localhost:6006/iframe.html?args=&id=widgets-linkstabbar--default&viewMode=story',
+  );
+
+  await expect(page.getByText('Current route: Information')).toBeVisible();
+  await page.getByRole('link', { name: 'Information' }).focus();
+
+  await page.screenshot({
+    path: `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-linkstabbar--current-focus__[w1920px].png`,
+  });
+
+  await page.getByRole('link', { name: 'Configuration' }).focus();
+  await page.screenshot({
+    path: `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-linkstabbar--non-current-focus__[w1920px].png`,
+  });
+});

package/src/components/LinksTabBar/LinksTabBar.spec.tsx

@@ -0,0 +1,50 @@
+import { css } from '@emotion/react';
+import userEvent from '@testing-library/user-event';
+import { links } from './stories/mockData';
+import { MemoryRouterDecorator } from './stories/decorators';
+
+import { LinksTabBar } from './index';
+
+jest.mock('d3-color', () => ({}));
+
+function setup(Component: React.ElementType) {
+  return {
+    user: userEvent.setup(),
+    ...render(MemoryRouterDecorator(Component)),
+  };
+}
+
+describe('Widget: LinksTabBar', () => {
+  it('Renders all passed in links and reacts to clicks', async () => {
+    const { user, getByRole, getByText } = setup(() => (
+      <LinksTabBar links={links} />
+    ));
+
+    getByText(`Current route: ${links[0].children}`);
+
+    for (const link of links) {
+      const linkEl = getByRole('link', { name: link.children });
+      await user.click(linkEl);
+      getByText(`Current route: ${link.children}`);
+    }
+  });
+
+  it('Renders with custom styles', () => {
+    const { getAllByRole } = setup(() => (
+      <LinksTabBar
+        links={links}
+        css={css`
+          background-color: magenta;
+        `}
+      />
+    ));
+    const linkEl = getAllByRole('link')[0];
+
+    expect(linkEl.parentNode).toHaveStyle(`background-color: magenta`);
+  });
+
+  it('Renders with a custom base tag', () => {
+    const { getByRole } = setup(() => <LinksTabBar links={links} as="nav" />);
+    getByRole('navigation');
+  });
+});

package/src/components/LinksTabBar/LinksTabBar.stories.tsx

@@ -0,0 +1,45 @@
+import { css } from '@emotion/react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { LinksTabBar, LinksTabBarProps } from './index';
+import { links } from './stories/mockData';
+import { MemoryRouterDecorator } from './stories/decorators';
+
+export default {
+  title: 'Widgets/LinksTabBar',
+  component: LinksTabBar,
+  decorators: [MemoryRouterDecorator],
+  args: {
+    links,
+  },
+} as Meta<typeof LinksTabBar>;
+
+export const Default = {};
+
+export const WithCustomStyles: StoryObj<typeof LinksTabBar> = (
+  args: LinksTabBarProps,
+) => {
+  /**
+   * Colors are from here: https://paletadecolores.online/en/colors/846ef3/
+   * */
+  return (
+    <LinksTabBar
+      {...args}
+      css={css`
+        a {
+          color: #846ef3;
+          background-color: #dfbcfc;
+          padding: 4px 8px;
+          border-radius: 6px;
+        }
+
+        a.active {
+          color: #7560e3;
+          text-decoration: underline solid #ddf36e;
+          text-underline-offset: 2px;
+        }
+      `}
+    />
+  );
+};
+WithCustomStyles.args = {};

package/src/components/LinksTabBar/LinksTabBar.tsx

@@ -0,0 +1,14 @@
+import { NavLink } from 'react-router-dom';
+
+import { LinksTabBarProps } from './types';
+import { LinksTabBarBase } from './LinksTabBarBase';
+
+export const LinksTabBar = ({ as, className, links }: LinksTabBarProps) => {
+  return (
+    <LinksTabBarBase as={as} className={className}>
+      {links.map(({ id, ...props }) => (
+        <NavLink key={id} {...props} />
+      ))}
+    </LinksTabBarBase>
+  );
+};

package/src/components/LinksTabBar/LinksTabBarBase.tsx

@@ -0,0 +1,36 @@
+import styled from '@emotion/styled';
+import { styleUtils } from '../..';
+
+export const LinksTabBarBase = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  a {
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding: 8px 4px;
+    font-size: 14px;
+    text-decoration: none;
+    color: ${({ theme }) => theme.colors.greyDropdownFocused};
+  }
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    a {
+      font-size: 18px;
+    }
+  }
+
+  a.active {
+    font-weight: 700;
+    color: ${({ theme }) => theme.colors.greyDarker};
+    text-decoration: underline solid #2f6ce3;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 8px;
+  }
+
+  a:focus-visible::before {
+    ${({ theme }) => styleUtils.outlineStyles(theme, 'grey40', '6px', 'dashed')}
+  }
+`;

package/src/components/LinksTabBar/index.ts

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

package/src/components/LinksTabBar/stories/decorators.tsx

@@ -0,0 +1,34 @@
+import { MemoryRouter, Route, Routes, Outlet } from 'react-router-dom';
+import { links } from './mockData';
+
+export const RoutePlaceholder = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => <div>Current route: {children}</div>;
+
+export const MemoryRouterDecorator = (Component: React.ElementType) => (
+  <div style={{ width: '591px', padding: '10px' }}>
+    <MemoryRouter initialEntries={[links[0].to]}>
+      <Routes>
+        <Route
+          element={
+            <div>
+              <Component />
+              <div style={{ marginTop: '25px' }}>
+                <Outlet />
+              </div>
+            </div>
+          }>
+          {links.map((link, index) => (
+            <Route
+              key={index}
+              path={link.to}
+              element={<RoutePlaceholder>{link.children}</RoutePlaceholder>}
+            />
+          ))}
+        </Route>
+      </Routes>
+    </MemoryRouter>
+  </div>
+);

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

@@ -0,0 +1,27 @@
+export const links = [
+  {
+    id: 'information',
+    to: '/information',
+    children: 'Information',
+  },
+  {
+    id: 'configuration',
+    to: '/configuration',
+    children: 'Configuration',
+  },
+  {
+    id: 'logs',
+    to: '/logs',
+    children: 'Logs',
+  },
+  {
+    id: 'history',
+    to: '/history',
+    children: 'History',
+  },
+  {
+    id: 'monitor',
+    to: '/monitor',
+    children: 'Monitor',
+  },
+];

package/src/components/LinksTabBar/types.ts

@@ -0,0 +1,12 @@
+import { SerializedStyles } from '@emotion/react';
+import type { NavLinkProps } from 'react-router-dom';
+import { CommonProps } from '@global-types/emotion';
+
+export interface TabBarLink extends NavLinkProps {
+  id: string;
+  css?: SerializedStyles;
+}
+
+export interface LinksTabBarProps extends CommonProps {
+  links: Array<TabBarLink>;
+}

package/src/components/MultipleDropdown/stories/MultipleDropdown.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';