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

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

@@ -1,57 +1,57 @@
-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';
-
-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) => (
-      <div style={{ height: '100vh', position: 'relative' }}>{Story()}</div>
-    ),
-  ],
-  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';
+
+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) => (
+      <div style={{ height: '100vh', position: 'relative' }}>{Story()}</div>
+    ),
+  ],
+  args: {
+    items: ITEMS,
+    renderLogo: <Logo />,
+  },
+} as Meta<typeof CollapsibleNavBar>;
+
+export const Default = {};

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,22 +1,22 @@
-import { CollapsibleNavBarExtendedProps } from '../types';
-
-export const ITEMS: CollapsibleNavBarExtendedProps['items'] = [
-  { path: '', iconName: 'home', iconSize: 20, title: 'Dashboard' },
-  { path: 'bots', iconName: 'robot', iconSize: 24, title: 'Bots' },
-  {
-    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: 24, title: 'Bots' },
+  {
+    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;
+    }
+  }
+`;

package/src/components/CollapsibleNavBar/styles.ts

@@ -1,119 +1,119 @@
-import { Theme, css } from '@emotion/react';
-
-export const SVGHoverShadow = (theme: Theme) => css`
-  filter: drop-shadow(-4px 4px 14px ${theme.colors.white});
-  & path {
-    fill: ${theme.colors.white};
-  }
-  & circle {
-    stroke: ${theme.colors.white};
-  }
-`;
-
-export const SVGMainStyle = (theme: Theme) => css`
-  & svg {
-    & path {
-      fill: ${theme.colors.greyDisabledCheckbox};
-    }
-    & circle {
-      stroke: ${theme.colors.greyDisabledCheckbox};
-    }
-  }
-`;
-
-export const AccordionTitleWrapper = (theme: Theme) => css`
-  cursor: pointer;
-  align-items: flex-start;
-  ${SVGMainStyle(theme)}
-  ${theme.mediaQueries.md} {
-    justify-content: center;
-  }
-  &:hover {
-    & > div:nth-of-type(2) > svg {
-      ${SVGHoverShadow(theme)}
-    }
-  }
-`;
-
-export const AccordionTitle = (theme: Theme) => css`
-  padding: 0 14px 0 22px;
-  & svg {
-    & path {
-      fill: none;
-    }
-  }
-  ${theme.mediaQueries.md} {
-    display: none;
-  }
-`;
-
-export const AccordionContent = (theme: Theme) => css`
-  display: flex;
-  align-items: flex-start;
-  width: 100%;
-  padding-left: 44px;
-  & a {
-    width: 100%;
-    padding: 4.8px 0;
-    &:first-of-type {
-      padding-top: 15px;
-    },
-  },
-  ${theme.mediaQueries.md} {
-    display: none;
-  }
-  ${theme.mediaQueries.lg} {
-    display: none;
-  }
-`;
-
-export const AccordionContentPopover = (theme: Theme) => css`
-  display: flex;
-  ${theme.mediaQueries.md} {
-    display: flex;
-  }
-  ${theme.mediaQueries.lg} {
-    display: flex;
-  }
-`;
-
-export const IconWrapper = (theme: Theme) => css`
-  width: 24px;
-  height: 24px;
-  ${SVGMainStyle(theme)}
-  &:hover svg {
-    ${SVGHoverShadow(theme)}
-  }
-`;
-
-export const LogoWrapper = (theme: Theme) => css`
-  position: relative;
-  ${theme.mediaQueries.md} {
-    justify-content: center;
-  }
-  ${theme.mediaQueries.lg} {
-    justify-content: flex-start;
-  }
-`;
-
-export const ContentToggle = (theme: Theme) => css`
-  display: none;
-  position: absolute;
-  cursor: pointer;
-  right: -17px;
-  width: 34px;
-  height: 34px;
-  background: ${theme.colors.greyLighter};
-  border-radius: 12px;
-  justify-content: center;
-  align-items: center;
-  & input {
-    display: none;
-  }
-  & svg {
-    cursor: pointer;
-  }
-  ${theme.mediaQueries.lg} {
-    display: flex;
-  }
-`;
+import { Theme, css } from '@emotion/react';
+
+export const SVGHoverShadow = (theme: Theme) => css`
+  filter: drop-shadow(-4px 4px 14px ${theme.colors.white});
+  & path {
+    fill: ${theme.colors.white};
+  }
+  & circle {
+    stroke: ${theme.colors.white};
+  }
+`;
+
+export const SVGMainStyle = (theme: Theme) => css`
+  & svg {
+    & path {
+      fill: ${theme.colors.greyDisabledCheckbox};
+    }
+    & circle {
+      stroke: ${theme.colors.greyDisabledCheckbox};
+    }
+  }
+`;
+
+export const AccordionTitleWrapper = (theme: Theme) => css`
+  cursor: pointer;
+  align-items: flex-start;
+  ${SVGMainStyle(theme)}
+  ${theme.mediaQueries.md} {
+    justify-content: center;
+  }
+  &:hover {
+    & > div:nth-of-type(2) > svg {
+      ${SVGHoverShadow(theme)}
+    }
+  }
+`;
+
+export const AccordionTitle = (theme: Theme) => css`
+  padding: 0 14px 0 22px;
+  & svg {
+    & path {
+      fill: none;
+    }
+  }
+  ${theme.mediaQueries.md} {
+    display: none;
+  }
+`;
+
+export const AccordionContent = (theme: Theme) => css`
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  padding-left: 44px;
+  & a {
+    width: 100%;
+    padding: 4.8px 0;
+    &:first-of-type {
+      padding-top: 15px;
+    },
+  },
+  ${theme.mediaQueries.md} {
+    display: none;
+  }
+  ${theme.mediaQueries.lg} {
+    display: none;
+  }
+`;
+
+export const AccordionContentPopover = (theme: Theme) => css`
+  display: flex;
+  ${theme.mediaQueries.md} {
+    display: flex;
+  }
+  ${theme.mediaQueries.lg} {
+    display: flex;
+  }
+`;
+
+export const IconWrapper = (theme: Theme) => css`
+  width: 24px;
+  height: 24px;
+  ${SVGMainStyle(theme)}
+  &:hover svg {
+    ${SVGHoverShadow(theme)}
+  }
+`;
+
+export const LogoWrapper = (theme: Theme) => css`
+  position: relative;
+  ${theme.mediaQueries.md} {
+    justify-content: center;
+  }
+  ${theme.mediaQueries.lg} {
+    justify-content: flex-start;
+  }
+`;
+
+export const ContentToggle = (theme: Theme) => css`
+  display: none;
+  position: absolute;
+  cursor: pointer;
+  right: -17px;
+  width: 34px;
+  height: 34px;
+  background: ${theme.colors.greyLighter};
+  border-radius: 12px;
+  justify-content: center;
+  align-items: center;
+  & input {
+    display: none;
+  }
+  & svg {
+    cursor: pointer;
+  }
+  ${theme.mediaQueries.lg} {
+    display: flex;
+  }
+`;

package/src/components/CollapsibleNavBar/types.ts

@@ -1,14 +1,14 @@
-import { NavBarExtendedGroup, NavBarExtendedItem } from '../..';
-
-export interface CollapsibleNavBarItem extends NavBarExtendedItem {
-  iconSize: number;
-}
-
-export interface CollapsibleNavBarGroup extends NavBarExtendedGroup {
-  iconSize: number;
-}
-
-export interface CollapsibleNavBarExtendedProps {
-  items: Array<CollapsibleNavBarItem | CollapsibleNavBarGroup>;
-  renderLogo: React.ReactElement;
-}
+import { NavBarExtendedGroup, NavBarExtendedItem } from '../..';
+
+export interface CollapsibleNavBarItem extends NavBarExtendedItem {
+  iconSize: number;
+}
+
+export interface CollapsibleNavBarGroup extends NavBarExtendedGroup {
+  iconSize: number;
+}
+
+export interface CollapsibleNavBarExtendedProps {
+  items: Array<CollapsibleNavBarItem | CollapsibleNavBarGroup>;
+  renderLogo: React.ReactElement;
+}