@ssa-ui-kit/widgets 1.0.12 → 1.1.55-canary-79b6b0d-20250224

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/widgets",
-  "version": "1.0.12",
+  "version": "1.1.55-canary-79b6b0d-20250224",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -19,19 +19,16 @@
     "url": "https://github.com/ssagroup/ui-kit.git",
     "directory": "packages/widgets"
   },
+  "files": [
+    "dist"
+  ],
   "dependencies": {
-    "@emotion/core": "^11.0.0",
-    "@emotion/css": "^11.11.2",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@floating-ui/react": "0.25.4",
+    "@floating-ui/react": "0.27.4",
     "dotenv": "^16.0.3",
-    "js-tokens": "^4.0.0",
     "loose-envify": "^1.4.0",
-    "scheduler": "^0.23.0",
-    "@ssa-ui-kit/core": "^1.1.8",
-    "@ssa-ui-kit/utils": "^1.0.0",
-    "@ssa-ui-kit/hooks": "^1.0.0"
+    "@ssa-ui-kit/core": "^1.1.55-canary-79b6b0d-20250224",
+    "@ssa-ui-kit/utils": "^1.1.55-canary-79b6b0d-20250224",
+    "@ssa-ui-kit/hooks": "^1.1.55-canary-79b6b0d-20250224"
   },
   "browserslist": [
     ">0.1%",
@@ -39,26 +36,26 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "@emotion/jest": "^11.11.0",
+    "@emotion/css": "^11.13.5",
+    "@emotion/jest": "^11.13.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@nivo/core": "^0.88.0",
+    "@nivo/line": "^0.88.0",
+    "@nivo/pie": "^0.88.0",
+    "@nivo/scales": "^0.88.0",
     "@playwright/test": "^1.48.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@types/testing-library__jest-dom": "^5.14.6",
-    "copy-webpack-plugin": "^11.0.0",
-    "html-webpack-plugin": "^5.5.1",
-    "resolve-tspaths": "^0.8.16",
-    "terser-webpack-plugin": "^5.3.9",
-    "webpack": "^5.85.0"
+    "html-webpack-plugin": "^5.5.1"
   },
   "peerDependencies": {
-    "@emotion/core": "^11.0.0",
-    "@emotion/css": "^11.11.0",
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@nivo/core": "^0.84.0",
-    "@nivo/line": "^0.84.0",
-    "@nivo/pie": "^0.84.0",
-    "@nivo/scales": "^0.84.0",
+    "@emotion/css": "^11.13.5",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@nivo/core": "^0.88.0",
+    "@nivo/line": "^0.88.0",
+    "@nivo/pie": "^0.88.0",
+    "@nivo/scales": "^0.88.0",
     "react": "18.x",
     "react-dom": "18.x",
     "react-hook-form": "^7.46.1",

package/.babelrc.js

@@ -1,4 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const rootBabelConfig = require('../../.babelrc.js');
-
-module.exports = rootBabelConfig;

package/.env

@@ -1,7 +0,0 @@
-# Firebase config
-FIREBASE_API_KEY="AIzaSyBpxjXhYb6nPzEzUypSNkcwAMrSKV54AX4" # cspell:disable-line
-FIREBASE_AUTH_DOMAIN="admin-themes.firebaseapp.com" # cspell:disable-line 
-FIREBASE_PROJECT_ID="admin-themes"
-FIREBASE_STORAGE_BUCKET="admin-themes.appspot.com" # cspell:disable-line
-FIREBASE_MESSAGING_SENDERID="933790824158"
-FIREBASE_APP_ID="1:933790824158:web:53aa34d56f9b895182f44f"

package/.storybook/main.ts

@@ -1,47 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-webpack5';
-import initWebpackConfig from '../webpack.config';
-const appWebpackConfig = initWebpackConfig();
-
-const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-mdx-gfm', // cspell:disable-line
-    'storybook-addon-pseudo-states',
-  ],
-  framework: {
-    name: '@storybook/react-webpack5',
-    options: {},
-  },
-  typescript: {
-    check: false,
-    checkOptions: {},
-    reactDocgen: 'react-docgen-typescript', // cspell:disable-line
-    // cspell:disable-next-line
-    reactDocgenTypescriptOptions: {
-      compilerOptions: {
-        allowSyntheticDefaultImports: false,
-        esModuleInterop: false,
-      },
-    },
-  },
-  webpackFinal: (config) => {
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      ...appWebpackConfig.resolve.alias,
-    };
-
-    return config;
-  },
-  docs: {
-    autodocs: true, // cspell:disable-line
-  },
-  managerHead: (head) => `
-    ${head}
-    <meta name="description" content="SSA UI kit is an open-source React-based library that accelerates frontend development of dashboard and administrative panels" />
-  `,
-};
-
-export default config;

package/.storybook/preview.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import '@storybook/react-webpack5';
-
-import { ThemeProvider } from '@emotion/react';
-import { mainTheme } from '@ssa-ui-kit/core';
-
-import './style.css';
-
-const preview = {
-  parameters: {
-    controls: { expanded: true, hideNoControlsWarning: true },
-  },
-  decorators: [
-    (Story) => (
-      <ThemeProvider theme={mainTheme}>
-        <Story />
-      </ThemeProvider>
-    ),
-  ],
-};
-
-export default preview;

package/.storybook/style.css

@@ -1,40 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
-
-* {
-  outline: none;
-
-  box-sizing: border-box;
-  font-family: 'Manrope', sans-serif;
-
-  color: #2b2d31;
-}
-
-*::after,
-*::before {
-  box-sizing: border-box;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p {
-  margin: 0;
-  padding: 0;
-}
-
-.token.plain-text,
-.language-jsx span {
-  color: white;
-}
-
-#storybook-docs .sbdocs-preview,
-#storybook-docs .docs-story {
-  overflow: visible;
-}
-
-#storybook-docs .docs-story > div:first-of-type {
-  overflow: visible;
-}

package/customTest.tsx

@@ -1,35 +0,0 @@
-import React, { ReactElement } from 'react';
-import { Theme } from '@ssa-ui-kit/core';
-import { ThemeProvider } from '@emotion/react';
-import '@testing-library/dom';
-import { render, RenderOptions } from '@testing-library/react';
-
-const AllTheProviders = ({
-  children,
-  theme,
-}: {
-  children: React.ReactNode;
-  theme: Theme;
-}) => {
-  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
-};
-
-const customRender = (
-  theme: Theme,
-  ui: ReactElement,
-  options?: Omit<RenderOptions, 'wrapper'>,
-) =>
-  render(ui, {
-    wrapper: ({ children }) => (
-      <AllTheProviders theme={theme}>{children}</AllTheProviders>
-    ),
-    ...options,
-  });
-
-export const initRender = (theme: Theme) => {
-  return customRender.bind(null, theme);
-};
-
-export * from '@testing-library/react';
-
-export { customRender as render };

package/jest-setup.ts

@@ -1,20 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';
-import { createSerializer, matchers } from '@emotion/jest';
-
-import { mainTheme } from '@ssa-ui-kit/core';
-import { initRender } from './customTest';
-
-const customRender = initRender(mainTheme);
-
-declare global {
-  // eslint-disable-next-line no-var
-  var render: typeof customRender;
-}
-
-global.render = customRender;
-
-expect.addSnapshotSerializer(createSerializer());
-expect.extend(matchers);
-
-window.URL.createObjectURL = jest.fn();
-window.HTMLCanvasElement.prototype.getContext = jest.fn();

package/lostpixel.config.ts

@@ -1,29 +0,0 @@
-import { baseConfig } from '../../lostpixel.base.config';
-import { SCREEN_SIZES } from './src/consts';
-import { CustomProjectConfig } from 'lost-pixel';
-
-const breakpoints = Object.keys(SCREEN_SIZES).map(Number);
-
-const widgetsConfig: Partial<CustomProjectConfig> & {
-  storybookShots: {
-    breakpoints: number[];
-  };
-} = {
-  storybookShots: {
-    storybookUrl: './packages/widgets/storybook-static',
-    breakpoints,
-    // https://docs.lost-pixel.com/user-docs/api-reference/mask
-    mask: [{ selector: '.lostpixel-ignore' }],
-  },
-  customShots: {
-    currentShotsPath: './packages/widgets/custom-shots',
-  },
-  // @cspell:disable-next-line
-  lostPixelProjectId: 'clldrvzro4dkcna0ez80h1y2h',
-};
-
-export const config: Partial<CustomProjectConfig> & {
-  storybookShots: {
-    breakpoints: number[];
-  };
-} = Object.assign({}, baseConfig, widgetsConfig);

package/playwright.config.ts

@@ -1,7 +0,0 @@
-import { defineConfig } from '@playwright/test';
-import { createConfig } from '../../playwright.base.config';
-
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-export default defineConfig(createConfig());

package/src/components/AccountBalance/AccountBalance.specBackup.tsx

@@ -1,105 +0,0 @@
-import { fireEvent } from '@testing-library/dom';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import { data } from './stories/fixtures';
-import { AccountBalance } from './index';
-
-describe('AccountBalance', () => {
-  it('Renders', () => {
-    const { getByRole, getByText, container } = render(
-      <AccountBalance total="798" currency="USDT" data={data} />,
-    );
-    const pieChartWrapper = container.querySelector('.pie-chart-wrapper');
-    expect(pieChartWrapper).toBeInTheDocument();
-
-    getByRole('heading', { name: 'Balance' });
-    getByText('798');
-    getByText('USDT');
-
-    for (const { label, legendValue } of data) {
-      getByRole('heading', { name: label });
-      getByRole('heading', {
-        name: `${legendValue} ${label === 'Other' ? 'USDT' : label}`,
-      });
-    }
-  });
-
-  it('Renders with a custom title', () => {
-    const { getByRole } = render(
-      <AccountBalance total="798" currency="USDT" data={data} title="PNL" />,
-    );
-
-    getByRole('heading', { name: 'PNL' });
-  });
-
-  it('Renders with a button', async () => {
-    const onClick = jest.fn();
-    const { getByRole } = render(
-      <AccountBalance
-        total="798"
-        currency="USDT"
-        data={data}
-        onClick={onClick}
-      />,
-    );
-
-    const btnEl = getByRole('button');
-    await fireEvent.click(btnEl);
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('Renders with a link', async () => {
-    const onClick = jest.fn();
-    const { getByRole } = render(
-      <MemoryRouter>
-        <Routes>
-          <Route
-            path="/*"
-            element={
-              <AccountBalance
-                total="798"
-                currency="USDT"
-                data={data}
-                onClick={onClick}
-                link="/balance"
-              />
-            }
-          />
-        </Routes>
-      </MemoryRouter>,
-    );
-
-    const linkEl = getByRole('link');
-    expect(linkEl).toHaveAttribute('href', '/balance');
-    await fireEvent.click(linkEl);
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('Renders without value list', () => {
-    const { getByText } = render(
-      <AccountBalance
-        total="798"
-        currency="USDT"
-        variant="withoutValueList"
-        data={[
-          {
-            id: 'BTC',
-            label: 'BTC',
-            legendValue: 1,
-            value: 871.23,
-          },
-          {
-            id: 'LTC',
-            label: 'LTC',
-            legendValue: 7,
-            value: 530.25,
-          },
-        ]}
-      />,
-    );
-
-    getByText('1 BTC');
-    getByText('871.23 USDT');
-    getByText('7 LTC');
-    getByText('530.25 USDT');
-  });
-});

package/src/components/AccountBalance/AccountBalance.stories.tsx

@@ -1,138 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import { css as cssReact } from '@emotion/react';
-import { css } from '@emotion/css';
-import { mainTheme } from '@ssa-ui-kit/core';
-
-import { data } from './stories/fixtures';
-
-import { AccountBalance, AccountBalanceProps } from './index';
-
-export default {
-  title: 'Trading/AccountBalance',
-  component: AccountBalance,
-} as Meta<typeof AccountBalance>;
-
-export const Default: StoryObj<typeof AccountBalance> = {};
-Default.args = {
-  total: 48700.53,
-  currency: 'USDT',
-  onClick: () => alert('Clicked!'),
-  widgetMaxWidth: '290px',
-  className: css`
-    & .pie-chart-wrapper p {
-      font-size: 12px;
-    }
-  `,
-  data,
-};
-
-export const WithFullscreenMode: StoryObj<typeof AccountBalance> = {};
-WithFullscreenMode.args = {
-  ...Default.args,
-  fullscreenModeFeature: true,
-};
-
-export const WithLink: StoryObj<typeof AccountBalance> = (
-  args: AccountBalanceProps,
-) => {
-  return (
-    <MemoryRouter>
-      <Routes>
-        <Route path="/*" element={<AccountBalance {...args} />} />
-      </Routes>
-    </MemoryRouter>
-  );
-};
-WithLink.args = {
-  ...Default.args,
-  link: '/',
-};
-
-export const Custom: StoryObj<typeof AccountBalance> = (
-  args: AccountBalanceProps,
-) => {
-  return (
-    <AccountBalance
-      {...args}
-      css={cssReact`
-        ul li {
-          height: auto;
-        }
-        & .pie-chart-wrapper p {
-          font-size: 12px;
-        }
-      `}
-    />
-  );
-};
-
-Custom.args = {
-  total: 48700.53,
-  currency: 'USDT',
-  variant: 'withoutValueList',
-  chartColorPalette: [
-    mainTheme.colors.blue as string,
-    mainTheme.colors.green as string,
-  ],
-  legendColorPalette: ['blue', 'green'],
-  widgetMaxWidth: '240px',
-  data: [
-    {
-      id: 'BTC',
-      label: 'BTC',
-      value: 571.23,
-      legendValue: 12323,
-    },
-    {
-      id: 'LTC',
-      label: 'LTC',
-      value: 530.25,
-      legendValue: 12323,
-    },
-  ],
-};
-
-export const WithoutPaletteColors: StoryObj<typeof AccountBalance> = (
-  args: AccountBalanceProps,
-) => {
-  return (
-    <AccountBalance
-      {...args}
-      css={cssReact`
-        ul li {
-          height: auto;
-        }
-        & .pie-chart-wrapper p {
-          font-size: 12px;
-        }
-      `}
-    />
-  );
-};
-
-WithoutPaletteColors.args = {
-  total: 48700.53,
-  currency: 'USDT',
-  variant: 'withoutValueList',
-  chartColorPalette: ['#F7931A', '#50AF95'],
-  legendColorPalette: [
-    'linear-gradient(243.84deg, rgb(235, 117, 86), rgb(242, 136, 142))',
-    '#50AF95',
-  ],
-  widgetMaxWidth: '240px',
-  data: [
-    {
-      id: 'BTC',
-      label: 'BTC',
-      value: 571.23,
-      legendValue: 12323,
-    },
-    {
-      id: 'LTC',
-      label: 'LTC',
-      value: 530.25,
-      legendValue: 12323,
-    },
-  ],
-};

package/src/components/AccountBalance/AccountBalance.tsx

@@ -1,60 +0,0 @@
-import { useState } from 'react';
-import { useTheme } from '@emotion/react';
-import { css } from '@emotion/css';
-import { WithLink } from '@ssa-ui-kit/core';
-import { BalancePieChart } from './BalancePieChart';
-import { AccountBalanceProps } from './types';
-
-export const AccountBalance = ({
-  title = 'Balance',
-  className,
-  onClick,
-  link,
-  variant = 'valueList',
-  fullscreenModeFeature = false,
-  activeHighlight = true,
-  widgetMaxWidth = '280px',
-  ...props
-}: AccountBalanceProps) => {
-  const theme = useTheme();
-  const [isFullscreenMode, setIsFullscreenMode] = useState(false);
-
-  return (
-    <WithLink link={link} onClick={onClick}>
-      <BalancePieChart
-        theme={theme}
-        variant={variant}
-        fullscreenModeFeature={fullscreenModeFeature}
-        activeHighlight={activeHighlight}
-        onFullscreenModeChange={setIsFullscreenMode}
-        pieChartProps={{
-          width: '100%',
-          cardProps: {
-            title,
-            className: [
-              css`
-                & > div:last-of-type {
-                  max-width: ${isFullscreenMode ? '100%' : widgetMaxWidth};
-                }
-              `,
-              className,
-            ].join(' '),
-            headerClassName: css([
-              {
-                fontSize: 11,
-              },
-            ]),
-            contentClassName: css([
-              {
-                [theme.mediaQueries.md]: {
-                  alignItems: 'center !important',
-                },
-              },
-            ]),
-          },
-        }}
-        {...props}
-      />
-    </WithLink>
-  );
-};