@ssa-ui-kit/widgets 0.0.1-alpha

package/.babelrc.js

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

package/.env

@@ -0,0 +1,7 @@
+# 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

@@ -0,0 +1,42 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+import initWebpackConfig from '../webpack.config';
+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
+  ],
+  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
+  },
+};
+
+export default config;

package/.storybook/preview.tsx

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,31 @@
+@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;
+}

package/customTest.tsx

@@ -0,0 +1,35 @@
+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/dist/components/AccountBalance/AccountBalance.d.ts

@@ -0,0 +1,2 @@
+import { AccountBalanceProps } from './types';
+export declare const AccountBalance: ({ title, className, onClick, link, ...props }: AccountBalanceProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/components/AccountBalance/BalancePieChart.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { BalancePieChartProps } from './types';
+export declare const BalancePieChart: import("react").FC<Pick<BalancePieChartProps, "data" | "total" | "currency"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}>;

package/dist/components/AccountBalance/BalancePieChartTitle.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { BalancePieChartTitleProps } from './types';
+export declare const BalancePieChartTitle: import("react").FC<Pick<BalancePieChartTitleProps, "total" | "currency"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}>;

package/dist/components/AccountBalance/WithLink.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { AccountBalanceProps } from './types';
+export declare const WithLink: ({ link, onClick, children, }: Pick<AccountBalanceProps, "link" | "onClick"> & {
+    children: React.ReactNode;
+}) => string | number | boolean | import("@emotion/react/types/jsx-namespace").EmotionJSX.Element | import("react").ReactFragment | null | undefined;

package/dist/components/AccountBalance/index.d.ts

@@ -0,0 +1,5 @@
+export { AccountBalance } from './AccountBalance';
+export { BalancePieChart } from './BalancePieChart';
+export { BalancePieChartTitle } from './BalancePieChartTitle';
+export { WithLink } from './WithLink';
+export * from './types';

package/dist/components/AccountBalance/stories/fixtures.d.ts

@@ -0,0 +1,6 @@
+export declare const data: {
+    id: string;
+    label: string;
+    legendValue: number;
+    value: number;
+}[];

package/dist/components/AccountBalance/types.d.ts

@@ -0,0 +1,25 @@
+import { Theme } from '@ssa-ui-kit/core';
+import type { To } from 'react-router-dom';
+interface WithTheme {
+    theme: Theme;
+}
+type BalanceBase = {
+    total: number | string;
+    currency: string;
+    data: Array<{
+        id: string | number;
+        value: number;
+        label: string;
+        [key: string | number | symbol]: unknown;
+    }>;
+};
+export interface BalancePieChartProps extends WithTheme, BalanceBase {
+}
+export interface AccountBalanceProps extends BalanceBase {
+    title?: string;
+    className?: string;
+    onClick?: () => void;
+    link?: To;
+}
+export type BalancePieChartTitleProps = Pick<BalancePieChartProps, 'total' | 'currency' | 'theme'>;
+export {};

package/dist/components/Activity/Activity.d.ts

@@ -0,0 +1,4 @@
+import { ActivityResp } from './types';
+export declare const Activity: ({ data }: {
+    data: ActivityResp;
+}) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/components/Activity/ActivityItem.d.ts

@@ -0,0 +1,3 @@
+import { ActivityItemProps } from './types';
+declare const ActivityItem: ({ currentValue, date }: ActivityItemProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+export default ActivityItem;

package/dist/components/Activity/index.d.ts

@@ -0,0 +1,2 @@
+export { Activity as default } from './Activity';
+export * from './types';

package/dist/components/Activity/mockActivityRequest.d.ts

@@ -0,0 +1,2 @@
+import { ActivityResp } from './types';
+export declare const mealActivityData: ActivityResp;

package/dist/components/Activity/styles.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '@emotion/react';
+export declare const contentWrapper: (theme: Theme) => import("@emotion/react").SerializedStyles;

package/dist/components/Activity/types.d.ts

@@ -0,0 +1,11 @@
+export interface ActivityItemProps {
+    id?: string;
+    activity: string;
+    date: string;
+    day?: string;
+    max: number;
+    currentValue: number;
+}
+export type ActivityResp = {
+    [key: string]: ActivityItemProps[];
+};

package/dist/components/AddNewAccountCard/AddNewAccountCard.d.ts

@@ -0,0 +1,2 @@
+import { AddNewAccountCardProps } from './types';
+export declare const AddNewAccountCard: ({ children, link, onClick, }: AddNewAccountCardProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/components/AddNewAccountCard/index.d.ts

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

package/dist/components/AddNewAccountCard/styles.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '@emotion/react';
+export declare const AccountCard: (theme: Theme) => import("@emotion/react").SerializedStyles;

package/dist/components/AddNewAccountCard/types.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { To } from 'react-router-dom';
+export interface AddNewAccountCardProps {
+    children: React.ReactNode;
+    link?: To;
+    onClick?: () => void;
+}

package/dist/components/Bmi/Bmi.d.ts

@@ -0,0 +1,6 @@
+import { BmiProps } from './types';
+/**
+ *
+ * UI Component that calculates the Body Mass Index of the user
+ */
+export declare const Bmi: ({ height, weight }: BmiProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/components/Bmi/BmiHeatbar.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const BmiHeatbar: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Bmi/BmiInfo.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const BmiInfo: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Bmi/BmiLabel.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const BmiLabel: import("@emotion/styled").StyledComponent<Omit<import("@ssa-ui-kit/core/dist/components/Typography/types").TypographyProps, "ref"> & import("react").RefAttributes<HTMLElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/dist/components/Bmi/BmiLabels.d.ts

@@ -0,0 +1 @@
+export declare const BmiLabels: () => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/components/Bmi/BmiPointer.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const BmiPointer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    percentage: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Bmi/index.d.ts

@@ -0,0 +1,2 @@
+export { Bmi as default } from './Bmi';
+export * from './types';

package/dist/components/Bmi/styles.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from '@emotion/react';
+export declare const TitleWrapper: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const ContentWrapper: import("@emotion/react").SerializedStyles;

package/dist/components/Bmi/types.d.ts

@@ -0,0 +1,4 @@
+export interface BmiProps {
+    height?: number;
+    weight?: number;
+}

package/dist/components/BotsTable/BotsTable.d.ts

@@ -0,0 +1,2 @@
+import { BotsTableProps } from './types';
+export declare const BotsTable: ({ children, columns, className }: BotsTableProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/components/BotsTable/BotsTableCell.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const BotsTableCell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    align?: string | undefined;
+} & import("@ssa-ui-kit/core").CommonProps & import("react").ClassAttributes<HTMLTableDataCellElement> & import("react").TdHTMLAttributes<HTMLTableDataCellElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/dist/components/BotsTable/BotsTableHead.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const BotsTableHead: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("@ssa-ui-kit/core").CommonProps & import("react").ClassAttributes<HTMLTableSectionElement> & import("react").HTMLAttributes<HTMLTableSectionElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/dist/components/BotsTable/BotsTableRow.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const BotsTableRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("@ssa-ui-kit/core").CommonProps & import("react").ClassAttributes<HTMLTableRowElement> & import("react").HTMLAttributes<HTMLTableRowElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    isDisabled?: boolean | undefined;
+}, {}, {}>;

package/dist/components/BotsTable/BotsTableWrapper.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const BotsTableWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("@ssa-ui-kit/core").CommonProps & import("react").ClassAttributes<HTMLTableElement> & import("react").TableHTMLAttributes<HTMLTableElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/dist/components/BotsTable/index.d.ts

@@ -0,0 +1,5 @@
+export * from './BotsTableWrapper';
+export * from './BotsTable';
+export * from './BotsTableCell';
+export * from './BotsTableHead';
+export * from './BotsTableRow';

package/dist/components/BotsTable/stories/BotsTable/StoryComponent.d.ts

@@ -0,0 +1 @@
+export declare const BotsTableStory: () => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/components/BotsTable/stories/BotsTable/components/Actions/ActionIcon.d.ts

@@ -0,0 +1,4 @@
+import { Icon } from '@ssa-ui-kit/core';
+export declare const ActionIcon: ({ name, }: {
+    name: Parameters<typeof Icon>[0]['name'];
+}) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/components/BotsTable/stories/BotsTable/components/Actions/ActionItem.d.ts

@@ -0,0 +1,2 @@
+import { Button } from '@ssa-ui-kit/core';
+export declare const ActionItem: ({ children, ...rest }: Parameters<typeof Button>[0]) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/components/BotsTable/stories/BotsTable/components/Actions/ActionMore.d.ts

@@ -0,0 +1,4 @@
+import { BotsTableItem } from '../../../../types';
+export declare const ActionMore: ({ row: { isDisabled } }: {
+    row: BotsTableItem;
+}) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/components/BotsTable/stories/BotsTable/components/Actions/ActionRun.d.ts

@@ -0,0 +1,4 @@
+import { BotsTableItem } from '../../../../types';
+export declare const ActionRun: ({ row }: {
+    row: BotsTableItem;
+}) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/components/BotsTable/stories/BotsTable/components/Actions/Actions.d.ts

@@ -0,0 +1,4 @@
+import { BotsTableItem } from '../../../../types';
+export declare const Actions: ({ row }: {
+    row: BotsTableItem;
+}) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/components/BotsTable/stories/BotsTable/components/Actions/ActionsWrapper.d.ts

@@ -0,0 +1,2 @@
+import { Wrapper } from '@ssa-ui-kit/core';
+export declare const ActionsWrapper: ({ children, ...rest }: Parameters<typeof Wrapper>[0]) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/components/BotsTable/stories/BotsTable/components/Actions/consts.d.ts

@@ -0,0 +1,5 @@
+export declare const actionsIcons: {
+    trade: () => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+    liquidation: () => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+    pending: () => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+};

package/dist/components/BotsTable/stories/BotsTable/components/Actions/index.d.ts

@@ -0,0 +1,6 @@
+export * from './ActionIcon';
+export * from './ActionItem';
+export * from './ActionMore';
+export * from './ActionRun';
+export * from './Actions';
+export * from './ActionsWrapper';

package/dist/components/BotsTable/stories/BotsTable/components/Exchange/Exchange.d.ts

@@ -0,0 +1,2 @@
+import { ExchangeProps } from './types';
+export declare const Exchange: ({ exchangeType, showTitle }: ExchangeProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/components/BotsTable/stories/BotsTable/components/Exchange/consts.d.ts

@@ -0,0 +1,15 @@
+export declare const exchangeIcons: {
+    binance: {
+        icon: () => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+        title: string;
+    };
+    kraken: {
+        icon: () => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+        title: string;
+    };
+    bittrex: {
+        icon: () => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+        title: string;
+    };
+};
+export type ExchangeIconsType = typeof exchangeIcons;

package/dist/components/BotsTable/stories/BotsTable/components/Exchange/index.d.ts

@@ -0,0 +1 @@
+export { Exchange } from './Exchange';

package/dist/components/BotsTable/stories/BotsTable/components/Exchange/types.d.ts

@@ -0,0 +1,5 @@
+export type ExchangeType = 'binance' | 'kraken' | 'bittrex';
+export interface ExchangeProps {
+    exchangeType: ExchangeType;
+    showTitle?: boolean;
+}

package/dist/components/BotsTable/stories/BotsTable/components/PNL.d.ts

@@ -0,0 +1,2 @@
+import * as Types from '../../../types';
+export declare const PNL: ({ amount, currency, isIncreasing }: Types.PNL) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/components/BotsTable/stories/BotsTable/components/ROI.d.ts

@@ -0,0 +1,2 @@
+import * as Types from '../../../types';
+export declare const ROI: ({ amount, isIncreasing }: Types.ROI) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/components/BotsTable/stories/BotsTable/components/TableTag.d.ts

@@ -0,0 +1,4 @@
+export declare const TableTag: ({ children, color, }: {
+    children: string;
+    color: string;
+}) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/components/BotsTable/stories/BotsTable/components/Trade/Trade.d.ts

@@ -0,0 +1,2 @@
+import { TradeProps } from './types';
+export declare const Trade: ({ tradeType }: TradeProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/components/BotsTable/stories/BotsTable/components/Trade/consts.d.ts

@@ -0,0 +1,14 @@
+export declare const tradeStatuses: {
+    trade: {
+        title: string;
+        color: string;
+    };
+    liquidation: {
+        title: string;
+        color: string;
+    };
+    pending: {
+        title: string;
+        color: string;
+    };
+};

package/dist/components/BotsTable/stories/BotsTable/components/Trade/index.d.ts

@@ -0,0 +1 @@
+export { Trade } from './Trade';

package/dist/components/BotsTable/stories/BotsTable/components/Trade/types.d.ts

@@ -0,0 +1,4 @@
+export type TradeType = 'trade' | 'liquidation' | 'pending';
+export interface TradeProps {
+    tradeType: TradeType;
+}