@ssa-ui-kit/widgets 0.0.29-alpha → 0.0.31-alpha

package/src/components/Filters/stories/Filters.stories.tsx

@@ -1,24 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { StoryComponent } from './StoryComponent';
-import { Filters } from '..';
-import { mockDataEnabled } from './mockData';
-
-type FiltersType = typeof Filters;
-
-export default {
-  title: 'Widgets/Filters',
-  component: Filters,
-  argTypes: {},
-} as Meta<typeof Filters>;
-
-export const Default: StoryObj<FiltersType> = () => {
-  return <StoryComponent />;
-};
-
-Default.args = {};
-
-export const AllItemsEnabled: StoryObj<FiltersType> = () => {
-  return <StoryComponent data={mockDataEnabled} />;
-};
-
-AllItemsEnabled.args = {};

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

@@ -1,19 +0,0 @@
-import { mockData } from './mockData';
-import { Filters } from '..';
-
-export const StoryComponent = ({ data = mockData }) => {
-  const handleSubmit = (submitData: Record<string, string[]>) => {
-    console.log('>>>Filters onSubmit', submitData);
-  };
-
-  return (
-    <div
-      css={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-      <Filters handleSubmit={handleSubmit} checkboxData={data} />
-    </div>
-  );
-};

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

@@ -1,421 +0,0 @@
-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

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

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

@@ -1,23 +0,0 @@
-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:6007/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

@@ -1,48 +0,0 @@
-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';
-
-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

@@ -1,45 +0,0 @@
-import { css } from '@emotion/react';
-import { 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

@@ -1,14 +0,0 @@
-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

@@ -1,36 +0,0 @@
-import styled from '@emotion/styled';
-import { styleUtils } from '@ssa-ui-kit/core';
-
-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

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

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

@@ -1,34 +0,0 @@
-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>
-);