@ssa-ui-kit/widgets 0.0.18-alpha → 0.0.20-alpha

package/src/components/CollapsibleNavBar/TriggerIcon.tsx

@@ -1,33 +1,43 @@
-import { css, useTheme } from '@emotion/react';
-import { Wrapper, Icon, IMapIcons } from '@ssa-ui-kit/core';
-
-export const TriggerIcon = ({
-  iconName,
-  iconSize,
-  className,
-}: {
-  iconName: keyof IMapIcons;
-  iconSize?: number;
-  className?: string;
-}) => {
-  const theme = useTheme();
-  return (
-    <Wrapper
-      css={css`
-        width: auto;
-        min-width: 22px;
-        justify-content: center;
-        overflow: visible;
-        position: relative;
-        height: 26px;
-      `}
-      className="trigger-icon">
-      <Icon
-        name={iconName}
-        color={theme.colors.grey}
-        size={iconSize}
-        className={className}
-      />
-    </Wrapper>
-  );
-};
+import { css, useTheme } from '@emotion/react';
+import { Wrapper, Icon, IMapIcons, SVGProps } from '@ssa-ui-kit/core';
+
+export const TriggerIcon = ({
+  iconName,
+  iconSize,
+  className,
+  CustomIcon,
+}: {
+  iconName: keyof IMapIcons;
+  iconSize?: number;
+  className?: string;
+  CustomIcon?: (props: Omit<SVGProps, 'fill'>) => JSX.Element;
+}) => {
+  const theme = useTheme();
+  return (
+    <Wrapper
+      css={css`
+        width: auto;
+        min-width: 22px;
+        justify-content: center;
+        overflow: visible;
+        position: relative;
+        height: 26px;
+      `}
+      className="trigger-icon">
+      {CustomIcon ? (
+        <CustomIcon
+          size={iconSize}
+          className={className}
+          color={theme.colors.grey}
+        />
+      ) : (
+        <Icon
+          name={iconName}
+          color={theme.colors.grey}
+          size={iconSize}
+          className={className}
+        />
+      )}
+    </Wrapper>
+  );
+};

package/src/components/CollapsibleNavBar/index.ts

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

package/src/components/CollapsibleNavBar/stories/CollapsibleNavBar.stories.tsx

@@ -1,53 +1,73 @@
-import { Fragment } from 'react';
-import { Routes, Route, MemoryRouter } from 'react-router-dom';
-import { Meta } from '@storybook/react';
-import { Title, Description, Source } from '@storybook/addon-docs';
-
-import { DecoratorFunction } from '@storybook/types';
-import { CollapsibleNavBar } from '../CollapsibleNavBar';
-import { ITEMS } from './consts';
-import { Logo } from './Logo';
-import { Layout } from './Layout';
-
-type Args = Parameters<typeof CollapsibleNavBar>[0];
-
-const reactRouterDecorator: DecoratorFunction<
-  {
-    component: typeof CollapsibleNavBar;
-    storyResult: React.ReactElement;
-    canvasElement: unknown;
-  },
-  Args
-> = (Story) => {
-  return (
-    <MemoryRouter>
-      <Routes>
-        <Route path="/*" element={<Story />} />
-      </Routes>
-    </MemoryRouter>
-  );
-};
-
-export default {
-  title: 'Widgets/CollapsibleNavBar',
-  component: CollapsibleNavBar,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      page: () => (
-        <Fragment>
-          <Title />
-          <Description />
-          <Source code={`<CollapsibleNavBar />`} />
-        </Fragment>
-      ),
-    },
-  },
-  decorators: [reactRouterDecorator, (Story) => <Layout>{Story()}</Layout>],
-  args: {
-    items: ITEMS,
-    renderLogo: <Logo />,
-  },
-} as Meta<typeof CollapsibleNavBar>;
-
-export const Default = {};
+import { Fragment } from 'react';
+import { Routes, Route, MemoryRouter } from 'react-router-dom';
+import { Meta } from '@storybook/react';
+import { Title, Description, Source } from '@storybook/addon-docs';
+
+import { DecoratorFunction } from '@storybook/types';
+import { CollapsibleNavBar } from '../CollapsibleNavBar';
+import { ITEMS } from './consts';
+import { Logo } from './Logo';
+import { Layout } from './Layout';
+import { CustomIcon } from './CustomIcon';
+
+type Args = Parameters<typeof CollapsibleNavBar>[0];
+
+const reactRouterDecorator: DecoratorFunction<
+  {
+    component: typeof CollapsibleNavBar;
+    storyResult: React.ReactElement;
+    canvasElement: unknown;
+  },
+  Args
+> = (Story) => {
+  return (
+    <MemoryRouter>
+      <Routes>
+        <Route path="/*" element={<Story />} />
+      </Routes>
+    </MemoryRouter>
+  );
+};
+
+export default {
+  title: 'Widgets/CollapsibleNavBar',
+  component: CollapsibleNavBar,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      page: () => (
+        <Fragment>
+          <Title />
+          <Description />
+          <Source code={`<CollapsibleNavBar />`} />
+        </Fragment>
+      ),
+    },
+  },
+  decorators: [reactRouterDecorator, (Story) => <Layout>{Story()}</Layout>],
+  args: {
+    items: ITEMS,
+    renderLogo: <Logo />,
+  },
+} as Meta<typeof CollapsibleNavBar>;
+
+export const Default = {};
+
+export const WithCustomIcon = {
+  title: 'With Custom Icon',
+  component: CollapsibleNavBar,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    items: [
+      ...ITEMS,
+      {
+        path: 'custom',
+        CustomIcon,
+        title: 'Item with custom icon',
+      },
+    ],
+    renderLogo: <Logo />,
+  },
+} as Meta<typeof CollapsibleNavBar>;

package/src/components/CollapsibleNavBar/stories/CustomIcon.tsx

@@ -0,0 +1,20 @@
+export const CustomIcon = () => {
+  const size = 24;
+  const fill = 'rgb(195, 197, 204)';
+  const props = {};
+  return (
+    <svg
+      className="svg-icon"
+      width={size}
+      height={size}
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}>
+      <path
+        d="M708.76 993.953333a53.366667 53.366667 0 0 1-46.28-26.666666L532.1 741.466667l-154.666667 148.586666A21.333333 21.333333 0 0 1 341.333333 874.666667V192a21.333333 21.333333 0 0 1 6.706667-15.526667c5.333333-5.02 15.26-8.74 25.72-2.666666l91.946667 53.086666 498.833333 288a21.333333 21.333333 0 0 1-4.733333 38.966667l-206 59.64 130.386666 225.826667a53.333333 53.333333 0 0 1-19.526666 72.826666l-129.333334 74.666667a53.02 53.02 0 0 1-26.573333 7.133333z m-171.806667-308.073333a20.666667 20.666667 0 0 1 3 0.213333 21.333333 21.333333 0 0 1 15.48 10.453334l144 249.413333a10.666667 10.666667 0 0 0 14.566667 3.906667l129.333333-74.666667a10.666667 10.666667 0 0 0 3.906667-14.573333l-144-249.413334a21.333333 21.333333 0 0 1 12.546667-31.16l184.053333-53.286666L384 228.953333v595.633334l138.18-132.76a21.333333 21.333333 0 0 1 14.773333-5.946667zM298.666667 661.333333a21.333333 21.333333 0 0 0-21.333334-21.333333H96a10.666667 10.666667 0 0 1-10.666667-10.666667V96a10.666667 10.666667 0 0 1 10.666667-10.666667h746.666667a10.666667 10.666667 0 0 1 10.666666 10.666667v266.666667a21.333333 21.333333 0 0 0 42.666667 0V96a53.393333 53.393333 0 0 0-53.333333-53.333333H96a53.393333 53.393333 0 0 0-53.333333 53.333333v533.333333a53.393333 53.393333 0 0 0 53.333333 53.333334h181.333333a21.333333 21.333333 0 0 0 21.333334-21.333334z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/components/CollapsibleNavBar/stories/Layout.tsx

@@ -1,53 +1,53 @@
-import styled from '@emotion/styled';
-import { NotificationCard } from '@components/NotificationCard';
-
-const Main = styled.main`
-  background: linear-gradient(
-      143deg,
-      #e7ebf1 -4.16%,
-      #d7d9dd 39.37%,
-      #cccdd2 52.66%,
-      #e1e4ea 87.68%
-    ),
-    #f8f9fb;
-  width: 100%;
-  padding: 60px 10px 10px 15px;
-
-  ${({ theme }) => theme.mediaQueries.md} {
-    padding: 10px 21px 10px 35px;
-  }
-
-  ${({ theme }) => theme.mediaQueries.lg} {
-    padding: 10px 49px 10px 36px;
-  }
-
-  ${({ theme }) => theme.mediaQueries.xlg} {
-    padding: 10px 60px 10px 62px;
-  }
-`;
-export const Layout = ({ children }: { children: React.ReactNode }) => {
-  /* cSpell:disable */
-  return (
-    <div
-      css={{
-        display: 'flex',
-        minHeight: '100vh',
-        position: 'relative',
-      }}>
-      {children}
-      <Main>
-        {new Array(100).fill(1).map((_, index) => (
-          <NotificationCard
-            key={index}
-            title="CyberVeinToken is Now Available"
-            text="With our newest listing, we’re welcoming Wrapped"
-            isRead={false}
-            type="Informational"
-            time={Date.now()}
-          />
-        ))}
-      </Main>
-    </div>
-  );
-  /* cSpell:enable */
-};
+import styled from '@emotion/styled';
+import { NotificationCard } from '@components/NotificationCard';
+
+const Main = styled.main`
+  background: linear-gradient(
+      143deg,
+      #e7ebf1 -4.16%,
+      #d7d9dd 39.37%,
+      #cccdd2 52.66%,
+      #e1e4ea 87.68%
+    ),
+    #f8f9fb;
+  width: 100%;
+  padding: 60px 10px 10px 15px;
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    padding: 10px 21px 10px 35px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    padding: 10px 49px 10px 36px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.xlg} {
+    padding: 10px 60px 10px 62px;
+  }
+`;
+export const Layout = ({ children }: { children: React.ReactNode }) => {
+  /* cSpell:disable */
+  return (
+    <div
+      css={{
+        display: 'flex',
+        minHeight: '100vh',
+        position: 'relative',
+      }}>
+      {children}
+      <Main>
+        {new Array(100).fill(1).map((_, index) => (
+          <NotificationCard
+            key={index}
+            title="CyberVeinToken is Now Available"
+            text="With our newest listing, we’re welcoming Wrapped"
+            isRead={false}
+            type="Informational"
+            time={Date.now()}
+          />
+        ))}
+      </Main>
+    </div>
+  );
+  /* cSpell:enable */
+};

package/src/components/CollapsibleNavBar/stories/Logo.tsx

@@ -1,12 +1,12 @@
-import { ResponsiveImage } from '@ssa-ui-kit/core';
-import * as S from './styles';
-
-export const Logo = () => (
-  <ResponsiveImage
-    css={S.ResponsiveLogo}
-    srcSet="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/logo%2FCTP_Large_Left.png?alt=media&token=b6fe7ab8-fd0b-475f-bb08-360311f27693 69w, https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/logo%2FCTP_Medium_Left.png?alt=media&token=a1aeba69-7c07-40c9-aeac-c2477640870d 55w"
-    sizes="(min-width: 900px) 55px, (min-width: 1440px) 69px"
-    src="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/logo%2FCTP_Small_Left.png?alt=media&token=bff7149e-3b90-4657-8a11-040e83990e6f"
-    alt="SSA CTP logo"
-  />
-);
+import { ResponsiveImage } from '@ssa-ui-kit/core';
+import * as S from './styles';
+
+export const Logo = () => (
+  <ResponsiveImage
+    css={S.ResponsiveLogo}
+    srcSet="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/logo%2FCTP_Large_Left.png?alt=media&token=b6fe7ab8-fd0b-475f-bb08-360311f27693 69w, https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/logo%2FCTP_Medium_Left.png?alt=media&token=a1aeba69-7c07-40c9-aeac-c2477640870d 55w"
+    sizes="(min-width: 900px) 55px, (min-width: 1440px) 69px"
+    src="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/logo%2FCTP_Small_Left.png?alt=media&token=bff7149e-3b90-4657-8a11-040e83990e6f"
+    alt="SSA CTP logo"
+  />
+);

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

@@ -1,20 +1,20 @@
-import { MemoryRouter, Routes, Route } from 'react-router-dom';
-import { CollapsibleNavBar } from '../CollapsibleNavBar';
-import { Logo } from './Logo';
-
-export const StoryComponent = ({
-  items,
-}: Parameters<typeof CollapsibleNavBar>[0]) => (
-  <MemoryRouter>
-    <Routes>
-      <Route
-        path="/*"
-        element={
-          <div style={{ height: '100vh', position: 'relative' }}>
-            <CollapsibleNavBar items={items} renderLogo={<Logo />} />
-          </div>
-        }
-      />
-    </Routes>
-  </MemoryRouter>
-);
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import { CollapsibleNavBar } from '../CollapsibleNavBar';
+import { Logo } from './Logo';
+
+export const StoryComponent = ({
+  items,
+}: Parameters<typeof CollapsibleNavBar>[0]) => (
+  <MemoryRouter>
+    <Routes>
+      <Route
+        path="/*"
+        element={
+          <div style={{ height: '100vh', position: 'relative' }}>
+            <CollapsibleNavBar items={items} renderLogo={<Logo />} />
+          </div>
+        }
+      />
+    </Routes>
+  </MemoryRouter>
+);

package/src/components/CollapsibleNavBar/stories/consts.ts

@@ -1,37 +1,37 @@
-import { CollapsibleNavBarExtendedProps } from '../types';
-
-export const ITEMS: CollapsibleNavBarExtendedProps['items'] = [
-  { path: '', iconName: 'home', iconSize: 20, title: 'Dashboard' },
-  {
-    path: 'bots',
-    iconName: 'robot',
-    iconSize: 54,
-    title: 'Bots',
-    css: {
-      position: 'absolute',
-      top: '-14px',
-    },
-  },
-  {
-    path: 'notifications',
-    iconName: 'notification',
-    iconSize: 24,
-    title: 'Notifications',
-  },
-  {
-    prefix: 'statistics/',
-    iconName: 'chart',
-    iconSize: 22,
-    title: 'Statistics',
-    items: [
-      { path: 'balance', title: 'Balance' },
-      { path: 'max-in-work', title: 'Max in Work' },
-      { path: 'orders', title: 'Orders' },
-      { path: 'pnl', title: 'PNL' },
-      { path: 'turnover', title: 'Turnover' },
-      { path: 'hourly-pnl', title: 'Hourly PNL' },
-    ],
-  },
-  { path: 'history', iconName: 'clock', iconSize: 24, title: 'History' },
-  { path: 'settings', iconName: 'settings', iconSize: 20, title: 'Settings' },
-];
+import { CollapsibleNavBarExtendedProps } from '../types';
+
+export const ITEMS: CollapsibleNavBarExtendedProps['items'] = [
+  { path: '', iconName: 'home', iconSize: 20, title: 'Dashboard' },
+  {
+    path: 'bots',
+    iconName: 'robot',
+    iconSize: 54,
+    title: 'Bots',
+    css: {
+      position: 'absolute',
+      top: '-14px',
+    },
+  },
+  {
+    path: 'notifications',
+    iconName: 'notification',
+    iconSize: 24,
+    title: 'Notifications',
+  },
+  {
+    prefix: 'statistics/',
+    iconName: 'chart',
+    iconSize: 22,
+    title: 'Statistics',
+    items: [
+      { path: 'balance', title: 'Balance' },
+      { path: 'max-in-work', title: 'Max in Work' },
+      { path: 'orders', title: 'Orders' },
+      { path: 'pnl', title: 'PNL' },
+      { path: 'turnover', title: 'Turnover' },
+      { path: 'hourly-pnl', title: 'Hourly PNL' },
+    ],
+  },
+  { path: 'history', iconName: 'clock', iconSize: 24, title: 'History' },
+  { path: 'settings', iconName: 'settings', iconSize: 20, title: 'Settings' },
+];

package/src/components/CollapsibleNavBar/stories/styles.ts

@@ -1,21 +1,21 @@
-import { Theme, css } from '@emotion/react';
-
-export const ResponsiveLogo = (theme: Theme) => css`
-  width: 48px;
-  height: 42px;
-  &:hover: {
-    filter: drop-shadow(0px 5px 5px ${theme.colors.grey});
-  }
-  display: none;
-  ${theme.mediaQueries.md} {
-    display: block;
-  }
-  ${theme.mediaQueries.lg} {
-    width: 55px;
-    height: 48px;
-    margin-left: 7px;
-    &:has(~ div > input[type='checkbox']:checked) {
-      margin-left: 34px;
-    }
-  }
-`;
+import { Theme, css } from '@emotion/react';
+
+export const ResponsiveLogo = (theme: Theme) => css`
+  width: 48px;
+  height: 42px;
+  &:hover: {
+    filter: drop-shadow(0px 5px 5px ${theme.colors.grey});
+  }
+  display: none;
+  ${theme.mediaQueries.md} {
+    display: block;
+  }
+  ${theme.mediaQueries.lg} {
+    width: 55px;
+    height: 48px;
+    margin-left: 7px;
+    &:has(~ div > input[type='checkbox']:checked) {
+      margin-left: 34px;
+    }
+  }
+`;