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

package/src/components/TradingInfoCard/types.ts

@@ -1,27 +1,27 @@
-import React from 'react';
-
-export interface ITradingInfoCardProps {
-  value: React.ReactNode;
-  title: string;
-  unit?: string;
-  icon?: React.ReactNode;
-  onClick?: () => void;
-  link?: string;
-}
-
-export type TradingInfoContent = Pick<
-  ITradingInfoCardProps,
-  'value' | 'unit' | 'icon'
->;
-
-export type ITradingInfoCardWrapperProps = Pick<
-  ITradingInfoCardProps,
-  'onClick' | 'link'
-> & {
-  children?: React.ReactNode;
-};
-
-export interface ITradingInfoCardTooltipProps {
-  trigger: string | number | JSX.Element;
-  children: React.ReactNode;
-}
+import React from 'react';
+
+export interface ITradingInfoCardProps {
+  value: React.ReactNode;
+  title: string;
+  unit?: string;
+  icon?: React.ReactNode;
+  onClick?: () => void;
+  link?: string;
+}
+
+export type TradingInfoContent = Pick<
+  ITradingInfoCardProps,
+  'value' | 'unit' | 'icon'
+>;
+
+export type ITradingInfoCardWrapperProps = Pick<
+  ITradingInfoCardProps,
+  'onClick' | 'link'
+> & {
+  children?: React.ReactNode;
+};
+
+export interface ITradingInfoCardTooltipProps {
+  trigger: string | number | JSX.Element;
+  children: React.ReactNode;
+}

package/src/components/TradingScoreboard/TradingScoreboard.spec.tsx

@@ -1,119 +1,119 @@
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import userEvent from '@testing-library/user-event';
-import { Button } from '@ssa-ui-kit/core';
-import TradingScoreboard from './TradingScoreboard';
-import { defaultBoardArr, linkBoardArr } from './helpers';
-
-describe('TradingScoreboard', () => {
-  it('Renders all items', () => {
-    const { getAllByRole, getByRole } = render(
-      <TradingScoreboard
-        itemsPerRow={5}
-        items={defaultBoardArr}
-        onClick={(item) => item}
-      />,
-    );
-    const itemsEls = getAllByRole('button');
-    expect(itemsEls.length).toBe(defaultBoardArr.length);
-
-    for (const item of defaultBoardArr) {
-      getByRole('button', { name: new RegExp(item.title, 'i') });
-    }
-  });
-
-  it('Renders with Render Prop', () => {
-    const { getAllByTestId } = render(
-      <TradingScoreboard
-        itemsPerRow={5}
-        items={defaultBoardArr}
-        renderCard={(item) => (
-          <Button data-testid="trading-board">
-            <span>
-              {item.value} {item.unit}
-            </span>
-            <span>{item.title}</span>
-          </Button>
-        )}
-      />,
-    );
-    const itemsEls = getAllByTestId('trading-board');
-    expect(itemsEls.length).toBe(defaultBoardArr.length);
-
-    for (let i = 0; i < itemsEls.length; i++) {
-      expect(itemsEls[i]).toHaveTextContent(defaultBoardArr[i].title);
-    }
-  });
-
-  it('Calls onClick handlers when clicked', async () => {
-    const user = userEvent.setup();
-    const mockOnClick = jest.fn();
-
-    const { getByRole } = render(
-      <TradingScoreboard
-        itemsPerRow={5}
-        items={defaultBoardArr}
-        onClick={mockOnClick}
-      />,
-    );
-
-    for (const item of defaultBoardArr) {
-      const buttonEl = getByRole('button', {
-        name: new RegExp(item.title, 'i'),
-      });
-      await user.click(buttonEl);
-      expect(mockOnClick).toHaveBeenCalledWith(item);
-    }
-
-    expect(mockOnClick).toBeCalledTimes(defaultBoardArr.length);
-  });
-
-  it('Renders with link prop', () => {
-    const { getByRole } = render(
-      <MemoryRouter>
-        <Routes>
-          <Route
-            path="/*"
-            element={<TradingScoreboard itemsPerRow={5} items={linkBoardArr} />}
-          />
-        </Routes>
-      </MemoryRouter>,
-    );
-
-    for (const item of linkBoardArr) {
-      getByRole('link', { name: new RegExp(item.title, 'i') });
-    }
-  });
-
-  it('Calls onClick handlers with render prop when clicked', async () => {
-    const user = userEvent.setup();
-    const mockOnClick = jest.fn();
-
-    const { getAllByTestId } = render(
-      <TradingScoreboard
-        itemsPerRow={5}
-        items={defaultBoardArr}
-        onClick={mockOnClick}
-        renderCard={(item, onClick) => (
-          <Button data-testid="trading-board" onClick={() => onClick?.(item)}>
-            <span>
-              {item.value} {item.unit}
-            </span>
-            <span>
-              {item.title} {item.icon}
-            </span>
-          </Button>
-        )}
-      />,
-    );
-
-    const itemsEls = getAllByTestId('trading-board');
-    expect(itemsEls.length).toBe(defaultBoardArr.length);
-
-    for (let i = 0; i < itemsEls.length; i++) {
-      await user.click(itemsEls[i]);
-      expect(mockOnClick).toHaveBeenCalledWith(defaultBoardArr[i]);
-    }
-
-    expect(mockOnClick).toBeCalledTimes(defaultBoardArr.length);
-  });
-});
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import userEvent from '@testing-library/user-event';
+import { Button } from '@ssa-ui-kit/core';
+import TradingScoreboard from './TradingScoreboard';
+import { defaultBoardArr, linkBoardArr } from './helpers';
+
+describe('TradingScoreboard', () => {
+  it('Renders all items', () => {
+    const { getAllByRole, getByRole } = render(
+      <TradingScoreboard
+        itemsPerRow={5}
+        items={defaultBoardArr}
+        onClick={(item) => item}
+      />,
+    );
+    const itemsEls = getAllByRole('button');
+    expect(itemsEls.length).toBe(defaultBoardArr.length);
+
+    for (const item of defaultBoardArr) {
+      getByRole('button', { name: new RegExp(item.title, 'i') });
+    }
+  });
+
+  it('Renders with Render Prop', () => {
+    const { getAllByTestId } = render(
+      <TradingScoreboard
+        itemsPerRow={5}
+        items={defaultBoardArr}
+        renderCard={(item) => (
+          <Button data-testid="trading-board">
+            <span>
+              {item.value} {item.unit}
+            </span>
+            <span>{item.title}</span>
+          </Button>
+        )}
+      />,
+    );
+    const itemsEls = getAllByTestId('trading-board');
+    expect(itemsEls.length).toBe(defaultBoardArr.length);
+
+    for (let i = 0; i < itemsEls.length; i++) {
+      expect(itemsEls[i]).toHaveTextContent(defaultBoardArr[i].title);
+    }
+  });
+
+  it('Calls onClick handlers when clicked', async () => {
+    const user = userEvent.setup();
+    const mockOnClick = jest.fn();
+
+    const { getByRole } = render(
+      <TradingScoreboard
+        itemsPerRow={5}
+        items={defaultBoardArr}
+        onClick={mockOnClick}
+      />,
+    );
+
+    for (const item of defaultBoardArr) {
+      const buttonEl = getByRole('button', {
+        name: new RegExp(item.title, 'i'),
+      });
+      await user.click(buttonEl);
+      expect(mockOnClick).toHaveBeenCalledWith(item);
+    }
+
+    expect(mockOnClick).toBeCalledTimes(defaultBoardArr.length);
+  });
+
+  it('Renders with link prop', () => {
+    const { getByRole } = render(
+      <MemoryRouter>
+        <Routes>
+          <Route
+            path="/*"
+            element={<TradingScoreboard itemsPerRow={5} items={linkBoardArr} />}
+          />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    for (const item of linkBoardArr) {
+      getByRole('link', { name: new RegExp(item.title, 'i') });
+    }
+  });
+
+  it('Calls onClick handlers with render prop when clicked', async () => {
+    const user = userEvent.setup();
+    const mockOnClick = jest.fn();
+
+    const { getAllByTestId } = render(
+      <TradingScoreboard
+        itemsPerRow={5}
+        items={defaultBoardArr}
+        onClick={mockOnClick}
+        renderCard={(item, onClick) => (
+          <Button data-testid="trading-board" onClick={() => onClick?.(item)}>
+            <span>
+              {item.value} {item.unit}
+            </span>
+            <span>
+              {item.title} {item.icon}
+            </span>
+          </Button>
+        )}
+      />,
+    );
+
+    const itemsEls = getAllByTestId('trading-board');
+    expect(itemsEls.length).toBe(defaultBoardArr.length);
+
+    for (let i = 0; i < itemsEls.length; i++) {
+      await user.click(itemsEls[i]);
+      expect(mockOnClick).toHaveBeenCalledWith(defaultBoardArr[i]);
+    }
+
+    expect(mockOnClick).toBeCalledTimes(defaultBoardArr.length);
+  });
+});

package/src/components/TradingScoreboard/TradingScoreboard.stories.tsx

@@ -1,119 +1,119 @@
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import { Meta, StoryObj } from '@storybook/react';
-import { css } from '@emotion/react';
-import { Button } from '@ssa-ui-kit/core';
-import TradingScoreboard from './TradingScoreboard';
-import { ITradingScoreboardProps } from './types';
-import { defaultBoardArr, linkBoardArr, oneLineBoardArr } from './helpers';
-
-export default {
-  title: 'Widgets/TradingScoreboard',
-  component: TradingScoreboard,
-} as Meta<typeof TradingScoreboard>;
-
-export const Default: StoryObj<typeof TradingScoreboard> = (
-  args: ITradingScoreboardProps,
-) => {
-  return (
-    <TradingScoreboard
-      items={args.items}
-      itemsPerRow={args.itemsPerRow}
-      onClick={() => alert('clicked!')}
-      css={css`
-        gap: 4px;
-      `}
-    />
-  );
-};
-
-Default.args = {
-  itemsPerRow: 5,
-  items: defaultBoardArr,
-};
-
-export const OneLine: StoryObj<typeof TradingScoreboard> = (
-  args: ITradingScoreboardProps,
-) => {
-  return (
-    <TradingScoreboard
-      items={args.items}
-      itemsPerRow={args.itemsPerRow}
-      onClick={() => alert('clicked!')}
-      css={css`
-        gap: 4px;
-      `}
-    />
-  );
-};
-
-OneLine.args = {
-  itemsPerRow: 7,
-  items: oneLineBoardArr,
-};
-
-export const WithCustomComponent: StoryObj<typeof TradingScoreboard> = (
-  args: ITradingScoreboardProps,
-) => {
-  return (
-    <TradingScoreboard
-      items={args.items}
-      itemsPerRow={args.itemsPerRow}
-      renderCard={(item, onClick) => (
-        <Button
-          css={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'flex-start',
-            width: '100%',
-            height: 'auto',
-            padding: '10px',
-            boxShadow: 'none',
-          }}
-          variant="secondary"
-          onClick={() => onClick?.(item)}>
-          <span css={{ fontWeight: '600' }}>
-            {item.value} {item.unit}
-          </span>
-          <span>{item.title}</span>
-        </Button>
-      )}
-      css={css`
-        gap: 4px;
-        color: white;
-      `}
-    />
-  );
-};
-
-WithCustomComponent.args = {
-  itemsPerRow: 7,
-  items: oneLineBoardArr,
-};
-
-export const WithLink: StoryObj<typeof TradingScoreboard> = (
-  args: ITradingScoreboardProps,
-) => {
-  return (
-    <MemoryRouter>
-      <Routes>
-        <Route
-          path={'/*'}
-          element={
-            <TradingScoreboard
-              items={args.items}
-              itemsPerRow={args.itemsPerRow}
-              css={css`
-                gap: 4px;
-              `}
-            />
-          }
-        />
-      </Routes>
-    </MemoryRouter>
-  );
-};
-
-WithLink.args = {
-  itemsPerRow: 7,
-  items: linkBoardArr,
-};
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { Meta, StoryObj } from '@storybook/react';
+import { css } from '@emotion/react';
+import { Button } from '@ssa-ui-kit/core';
+import TradingScoreboard from './TradingScoreboard';
+import { ITradingScoreboardProps } from './types';
+import { defaultBoardArr, linkBoardArr, oneLineBoardArr } from './helpers';
+
+export default {
+  title: 'Widgets/TradingScoreboard',
+  component: TradingScoreboard,
+} as Meta<typeof TradingScoreboard>;
+
+export const Default: StoryObj<typeof TradingScoreboard> = (
+  args: ITradingScoreboardProps,
+) => {
+  return (
+    <TradingScoreboard
+      items={args.items}
+      itemsPerRow={args.itemsPerRow}
+      onClick={() => alert('clicked!')}
+      css={css`
+        gap: 4px;
+      `}
+    />
+  );
+};
+
+Default.args = {
+  itemsPerRow: 5,
+  items: defaultBoardArr,
+};
+
+export const OneLine: StoryObj<typeof TradingScoreboard> = (
+  args: ITradingScoreboardProps,
+) => {
+  return (
+    <TradingScoreboard
+      items={args.items}
+      itemsPerRow={args.itemsPerRow}
+      onClick={() => alert('clicked!')}
+      css={css`
+        gap: 4px;
+      `}
+    />
+  );
+};
+
+OneLine.args = {
+  itemsPerRow: 7,
+  items: oneLineBoardArr,
+};
+
+export const WithCustomComponent: StoryObj<typeof TradingScoreboard> = (
+  args: ITradingScoreboardProps,
+) => {
+  return (
+    <TradingScoreboard
+      items={args.items}
+      itemsPerRow={args.itemsPerRow}
+      renderCard={(item, onClick) => (
+        <Button
+          css={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            width: '100%',
+            height: 'auto',
+            padding: '10px',
+            boxShadow: 'none',
+          }}
+          variant="secondary"
+          onClick={() => onClick?.(item)}>
+          <span css={{ fontWeight: '600' }}>
+            {item.value} {item.unit}
+          </span>
+          <span>{item.title}</span>
+        </Button>
+      )}
+      css={css`
+        gap: 4px;
+        color: white;
+      `}
+    />
+  );
+};
+
+WithCustomComponent.args = {
+  itemsPerRow: 7,
+  items: oneLineBoardArr,
+};
+
+export const WithLink: StoryObj<typeof TradingScoreboard> = (
+  args: ITradingScoreboardProps,
+) => {
+  return (
+    <MemoryRouter>
+      <Routes>
+        <Route
+          path={'/*'}
+          element={
+            <TradingScoreboard
+              items={args.items}
+              itemsPerRow={args.itemsPerRow}
+              css={css`
+                gap: 4px;
+              `}
+            />
+          }
+        />
+      </Routes>
+    </MemoryRouter>
+  );
+};
+
+WithLink.args = {
+  itemsPerRow: 7,
+  items: linkBoardArr,
+};

package/src/components/TradingScoreboard/TradingScoreboard.tsx

@@ -1,41 +1,41 @@
-import { TradingInfoCard } from '@components/TradingInfoCard';
-import TradingScoreboardBase from './TradingScoreboardBase';
-import { ITradingScoreboardProps } from './types';
-
-const TradingScoreboard = ({
-  items,
-  onClick,
-  renderCard,
-  ...props
-}: ITradingScoreboardProps) => {
-  return (
-    <div>
-      <TradingScoreboardBase {...props}>
-        {items.map((item, index) => {
-          return (
-            <div key={index}>
-              {typeof renderCard === 'function' ? (
-                renderCard(item, onClick)
-              ) : (
-                <TradingInfoCard
-                  value={item.value}
-                  unit={item.unit}
-                  title={item.title}
-                  icon={item.icon}
-                  link={item.link}
-                  onClick={() => {
-                    if (typeof onClick === 'function') {
-                      onClick(item);
-                    }
-                  }}
-                />
-              )}
-            </div>
-          );
-        })}
-      </TradingScoreboardBase>
-    </div>
-  );
-};
-
-export default TradingScoreboard;
+import { TradingInfoCard } from '@components/TradingInfoCard';
+import TradingScoreboardBase from './TradingScoreboardBase';
+import { ITradingScoreboardProps } from './types';
+
+const TradingScoreboard = ({
+  items,
+  onClick,
+  renderCard,
+  ...props
+}: ITradingScoreboardProps) => {
+  return (
+    <div>
+      <TradingScoreboardBase {...props}>
+        {items.map((item, index) => {
+          return (
+            <div key={index}>
+              {typeof renderCard === 'function' ? (
+                renderCard(item, onClick)
+              ) : (
+                <TradingInfoCard
+                  value={item.value}
+                  unit={item.unit}
+                  title={item.title}
+                  icon={item.icon}
+                  link={item.link}
+                  onClick={() => {
+                    if (typeof onClick === 'function') {
+                      onClick(item);
+                    }
+                  }}
+                />
+              )}
+            </div>
+          );
+        })}
+      </TradingScoreboardBase>
+    </div>
+  );
+};
+
+export default TradingScoreboard;

package/src/components/TradingScoreboard/TradingScoreboardBase.tsx

@@ -1,17 +1,17 @@
-import styled from '@emotion/styled';
-
-const TradingScoreboardBase = styled.div<{ itemsPerRow?: number }>`
-  display: grid;
-  gap: 5px;
-  grid-auto-flow: column;
-  overflow: auto;
-
-  ${({ theme }) => theme.mediaQueries.md} {
-    grid-template-columns: ${({ itemsPerRow }) =>
-      itemsPerRow && `repeat(${itemsPerRow}, 1fr)`};
-    grid-auto-flow: inherit;
-    overflow: inherit;
-  }
-`;
-
-export default TradingScoreboardBase;
+import styled from '@emotion/styled';
+
+const TradingScoreboardBase = styled.div<{ itemsPerRow?: number }>`
+  display: grid;
+  gap: 5px;
+  grid-auto-flow: column;
+  overflow: auto;
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    grid-template-columns: ${({ itemsPerRow }) =>
+      itemsPerRow && `repeat(${itemsPerRow}, 1fr)`};
+    grid-auto-flow: inherit;
+    overflow: inherit;
+  }
+`;
+
+export default TradingScoreboardBase;