@ssa-ui-kit/widgets 0.0.13-alpha → 0.0.15-alpha

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

@@ -1,53 +1,53 @@
-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';
+
+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 = {};

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;
+    }
+  }
+`;

package/src/components/CollapsibleNavBar/styles.ts

@@ -1,91 +1,91 @@
-import { Theme, css } from '@emotion/react';
-
-export const AccordionTitleWrapper = (theme: Theme) => css`
-  cursor: pointer;
-  align-items: center;
-
-  ${theme.mediaQueries.md} {
-    display: flex;
-    justify-content: center;
-  }
-
-  & div.icon-wrapper {
-    width: 100%;
-    gap: 0;
-  }
-
-  & div.icon-wrapper:not(.active):hover > button svg path,
-  & div.icon-wrapper.active > button svg path {
-    stroke: #fff;
-    fill: none;
-  }
-
-  & .trigger-icon {
-    height: 22px;
-  }
-`;
-
-export const AccordionTitle = (theme: Theme) => css`
-  padding: 0 14px 0 22px;
-  ${theme.mediaQueries.md} {
-    display: none;
-  }
-`;
-
-export const AccordionContent = (theme: Theme) => css`
-  display: flex;
-  align-items: flex-start;
-  width: 100%;
-  padding-left: 44px;
-  overflow: hidden;
-  perspective: 1px;
-
-  ${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 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 AccordionTitleWrapper = (theme: Theme) => css`
+  cursor: pointer;
+  align-items: center;
+
+  ${theme.mediaQueries.md} {
+    display: flex;
+    justify-content: center;
+  }
+
+  & div.icon-wrapper {
+    width: 100%;
+    gap: 0;
+  }
+
+  & div.icon-wrapper:not(.active):hover > button svg path,
+  & div.icon-wrapper.active > button svg path {
+    stroke: #fff;
+    fill: none;
+  }
+
+  & .trigger-icon {
+    height: 22px;
+  }
+`;
+
+export const AccordionTitle = (theme: Theme) => css`
+  padding: 0 14px 0 22px;
+  ${theme.mediaQueries.md} {
+    display: none;
+  }
+`;
+
+export const AccordionContent = (theme: Theme) => css`
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  padding-left: 44px;
+  overflow: hidden;
+  perspective: 1px;
+
+  ${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 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,16 +1,16 @@
-import { NavBarExtendedGroup, NavBarExtendedItem } from '../..';
-
-export interface CollapsibleNavBarItem extends NavBarExtendedItem {
-  iconSize: number;
-  css?: React.CSSProperties;
-}
-
-export interface CollapsibleNavBarGroup extends Required<NavBarExtendedGroup> {
-  iconSize: number;
-  css?: React.CSSProperties;
-}
-
-export interface CollapsibleNavBarExtendedProps {
-  items: Array<CollapsibleNavBarItem | CollapsibleNavBarGroup>;
-  renderLogo: React.ReactElement;
-}
+import { NavBarExtendedGroup, NavBarExtendedItem } from '../..';
+
+export interface CollapsibleNavBarItem extends NavBarExtendedItem {
+  iconSize: number;
+  css?: React.CSSProperties;
+}
+
+export interface CollapsibleNavBarGroup extends Required<NavBarExtendedGroup> {
+  iconSize: number;
+  css?: React.CSSProperties;
+}
+
+export interface CollapsibleNavBarExtendedProps {
+  items: Array<CollapsibleNavBarItem | CollapsibleNavBarGroup>;
+  renderLogo: React.ReactElement;
+}