@mailstep/design-system 0.8.52 → 0.9.1

package/ui/Modules/Dashboard/styles.d.ts

@@ -0,0 +1,63 @@
+declare const _default: {
+    Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    Body: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    Header: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    PickerWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    Picker: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    PickerBody: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    PickerHeader: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    PickerItem: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    PickerClose: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    LayoutItem: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+        isConfigOpen: boolean;
+    }, never>;
+    LayoutItemAdd: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {}, never>;
+    Nowidget: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    WidgetConfigInDropdown: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    WidgetConfig: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+        isConfigOpen: boolean;
+        inDropdown: boolean;
+    }, never>;
+    WidgetVisibility: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+        isVisible: boolean;
+    }, never>;
+    WidgetConfigButtons: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    WidgetError: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    WidgetErrorMessage: import("styled-components").StyledComponent<"p", import("@xstyled/styled-components").Theme, {}, never>;
+    WidgetErrorTitle: import("styled-components").StyledComponent<"h2", import("@xstyled/styled-components").Theme, {}, never>;
+    LayoutError: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    LayoutErrorMessage: import("styled-components").StyledComponent<"p", import("@xstyled/styled-components").Theme, {}, never>;
+    LayoutErrorTitle: import("styled-components").StyledComponent<"h2", import("@xstyled/styled-components").Theme, {}, never>;
+    ItemWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    ItemMoveWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    ItemPanelButton: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    ItemBodyWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+        isConfigOpen: boolean;
+    }, never>;
+    ItemBody: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+        isConfigOpen: boolean;
+        inDropdown: boolean;
+        isFullHeight: boolean;
+    }, never>;
+    ItemName: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    ItemContent: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    ConfigRow: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+        isBlock?: boolean;
+    }, never>;
+    ConfigLabel: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    ConfigInput: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    Select: import("styled-components").StyledComponent<"select", import("@xstyled/styled-components").Theme, {
+        width?: string;
+        mr?: string;
+    }, never>;
+    CheckboxContent: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    CheckboxControls: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    Input: import("styled-components").StyledComponent<"input", import("@xstyled/styled-components").Theme, {
+        width?: string;
+    }, never>;
+    NoData: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    HideWidget: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+        isHidden: boolean;
+    }, never>;
+};
+export default _default;

package/ui/Modules/Dashboard/styles.js

@@ -0,0 +1,358 @@
+import styled$1 from "@xstyled/styled-components";
+//#region packages/ui/Modules/Dashboard/styles.ts
+const ItemMoveWrapper = styled$1.div`
+  position: absolute;
+  top: 5px;
+  right: 35px;
+  padding: 10px 15px;
+  z-index: 2;
+  display: none;
+
+  :hover {
+    cursor: move;
+    opacity: 1;
+  }
+
+  img {
+    height: 15px;
+    width: 15px;
+  }
+`;
+var styles_default = {
+	Wrapper: styled$1.div`
+    background-color: transparent;
+    padding: 0 5px;
+    color: typoPrimary;
+
+    * {
+      box-sizing: border-box;
+    }
+
+    @media (min-width: 576px) {
+      & > div {
+        padding: 0 20px 20px;
+      }
+    }
+  `,
+	Body: styled$1.div`
+    min-height: 200px;
+    position: relative;
+  `,
+	Header: styled$1.div`
+    height: 70px;
+    justify-content: space-between;
+    display: flex;
+    align-items: center;
+
+    & > h1 {
+      margin: 0;
+    }
+  `,
+	PickerWrapper: styled$1.div`
+    position: fixed;
+    z-index: 9999;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: #172b4d73;
+  `,
+	Picker: styled$1.div`
+    background-color: white;
+    width: 750px;
+    height: calc(100vh - 314px);
+    overflow: hidden;
+    position: fixed;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    margin: auto;
+    border-radius: 3px;
+    box-shadow: 0 8px 16px -4px #091e4240, 0 0 1px #fff;
+  `,
+	PickerBody: styled$1.div`
+    overflow-y: auto;
+    height: calc(100% - 65px);
+    color: #333;
+  `,
+	PickerHeader: styled$1.div`
+    height: 65px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 24px;
+    padding: 20px;
+    border-bottom: 2px solid #ebecf0;
+  `,
+	PickerItem: styled$1.div`
+    min-height: 50px;
+    padding: 20px 0;
+    margin: 0 20px;
+    border-bottom: 1px solid #ccc;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    & > img {
+      margin-right: 30px;
+    }
+
+    & > div {
+      width: 70%;
+      padding-right: 20px;
+    }
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    & > span {
+      font-weight: bold;
+      font-size: 14px;
+      color: textPrimary;
+    }
+
+    & p {
+      font-size: 12px;
+      line-height: 20px;
+      color: textPrimary;
+      margin: 4px 0;
+    }
+  `,
+	PickerClose: styled$1.div`
+    cursor: pointer;
+    font-size: 16px;
+    color: #333;
+  `,
+	LayoutItem: styled$1.div`
+    z-index: ${({ isConfigOpen, theme }) => isConfigOpen ? theme.zIndex || 10 : 0};
+    position: relative;
+    border-radius: 5px;
+    background-color: dashboardBackground;
+    box-shadow: cornerDialogShadow;
+    animation: fadeIn 1s;
+    @keyframes fadeIn {
+      0% {
+        opacity: 0;
+      }
+      10% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+  `,
+	LayoutItemAdd: styled$1.span`
+    color: blue;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  `,
+	Nowidget: styled$1.div`
+    border: 3px dotted #ccc;
+    padding: 20px;
+    width: 100%;
+    height: 150px;
+    font-size: 20px;
+    color: #999;
+
+    & > span {
+      color: black;
+    }
+  `,
+	WidgetConfigInDropdown: styled$1.div`
+    position: absolute;
+    overflow: visible;
+    top: 0;
+    width: 100%;
+    min-width: 300px;
+    background-color: white;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    border: 1px solid #ccc;
+    z-index: 10;
+  `,
+	WidgetConfig: styled$1.div`
+    position: absolute;
+    top: 0;
+    left: 100%;
+    width: 100%;
+    background-color: white;
+    padding: 0 20px 20px;
+    display: ${({ isConfigOpen, inDropdown }) => isConfigOpen && !inDropdown ? "flex" : "none !important"};
+    flex-direction: column;
+    justify-content: space-between;
+  `,
+	WidgetVisibility: styled$1.div`
+    display: ${({ isVisible }) => isVisible ? "initial" : "none"};
+  `,
+	WidgetConfigButtons: styled$1.div`
+    border-top: 1px solid #ccc;
+    margin: 20px 0 0;
+    padding-top: 20px;
+    display: flex;
+    justify-content: space-between;
+  `,
+	WidgetError: styled$1.div`
+    display: flex;
+    flex-direction: column;
+  `,
+	WidgetErrorMessage: styled$1.p``,
+	WidgetErrorTitle: styled$1.h2`
+    margin: 0;
+    font-size: 18px;
+    color: #dd2b0e;
+  `,
+	LayoutError: styled$1.div`
+    display: flex;
+    flex-direction: column;
+  `,
+	LayoutErrorMessage: styled$1.p``,
+	LayoutErrorTitle: styled$1.h2`
+    margin: 0;
+    font-size: 24px;
+    color: #dd2b0e;
+  `,
+	ItemWrapper: styled$1.div`
+    padding: 20px 20px;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    &:hover ${ItemMoveWrapper} {
+      display: block;
+    }
+  `,
+	ItemMoveWrapper,
+	ItemPanelButton: styled$1.div`
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 20px;
+    z-index: 2;
+    user-select: none;
+
+    :hover {
+      cursor: pointer;
+      opacity: 1;
+    }
+  `,
+	ItemBodyWrapper: styled$1.div`
+    overflow: hidden;
+    flex-grow: 1;
+    overflow-y: ${({ isConfigOpen }) => isConfigOpen ? "auto" : "hidden"};
+    // do not add paddings/margins
+  `,
+	ItemBody: styled$1.div`
+    position: relative;
+    height: ${({ isFullHeight }) => isFullHeight ? "100%" : "fit-content"};
+    transition: all 0.4s;
+    left: ${({ isConfigOpen, inDropdown }) => isConfigOpen && !inDropdown ? "-100%" : "0"};
+  `,
+	ItemName: styled$1.div`
+    font-size: 18px;
+    color: gray5;
+    margin-bottom: 20px;
+
+    & > * {
+      margin-right: 5px;
+    }
+  `,
+	ItemContent: styled$1.div`
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    animation: fadeIn 1s;
+    @keyframes fadeIn {
+      0% {
+        opacity: 0;
+      }
+      10% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+  `,
+	ConfigRow: styled$1.div`
+    display: flex;
+    margin-bottom: 10px;
+    font-size: 15px;
+    align-items: ${({ isBlock }) => isBlock ? "flex-start" : "center"};
+    justify-content: space-between;
+  `,
+	ConfigLabel: styled$1.div`
+    width: 40%;
+    color: textPrimary;
+  `,
+	ConfigInput: styled$1.div`
+    width: 80%;
+  `,
+	Select: styled$1.select`
+    padding: 5px;
+    border: 1px solid;
+    border-color: black;
+    border-radius: 3px;
+    width: ${(props) => props.width || "100%"};
+    margin-right: ${(props) => props.mr || "0"};
+  `,
+	CheckboxContent: styled$1.div`
+    padding: 5px;
+    border: 1px solid;
+    border-color: black;
+    border-radius: 3px;
+    max-height: 200px;
+    overflow-y: auto;
+    width: 100%;
+  `,
+	CheckboxControls: styled$1.div`
+    margin: 3px 0;
+    margin-left: 4px;
+    display: flex;
+    justify-content: space-between;
+  `,
+	Input: styled$1.input`
+    padding: 5px;
+    border: 1px solid;
+    border-color: black;
+    border-radius: 3px;
+    width: ${(props) => props.width || "100%"};
+
+    &[type='color'] {
+      padding: 0;
+      width: 40px;
+    }
+  `,
+	NoData: styled$1.div`
+    width: 100%;
+    height: 100%;
+    max-height: 200px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    color: gray5;
+    gap: 16px;
+    padding-top: 20px;
+
+    & > svg {
+      max-width: 30%;
+      max-height: 50%;
+      margin-bottom: 10px;
+    }
+  `,
+	HideWidget: styled$1.div`
+    display: ${({ isHidden }) => isHidden ? "none" : "initial"};
+  `
+};
+//#endregion
+export { styles_default as default };

package/ui/Modules/Dashboard/types.d.ts

@@ -0,0 +1,185 @@
+import React, { RefObject } from 'react';
+import { Layout as RGLLayout } from 'react-grid-layout';
+import { TableRowData } from './components/Widgets/Table/types';
+import { Props as ButtonProps } from '../../Elements/Button/types';
+export interface WidgetConfig {
+    [key: string]: any;
+}
+export type NumberClickCallback = <TData>(data: TData, config: WidgetConfig) => void;
+export type TableClickCallback = (tableRow: TableRowData, column: string, config: WidgetConfig) => void;
+export interface WidgetComponentProps<TData = any, OnValueClickType = any> {
+    data?: TData;
+    isLoading?: boolean;
+    error?: boolean;
+    config?: WidgetConfig;
+    onSetConfig?: (config: WidgetConfig) => void;
+    onValueClick?: OnValueClickType;
+    innerRef?: RefObject<HTMLDivElement> | ((node: HTMLDivElement) => void);
+    [key: string]: any;
+}
+export interface ConfigProps {
+    onChange: (config: WidgetConfig) => void;
+    config: WidgetConfig;
+}
+export interface WidgetDefinition {
+    /**
+     * name of the widget
+     */
+    name: string;
+    /**
+     * uniq identifier of the widget
+     */
+    code: string;
+    /**
+     * short description of widget
+     */
+    description: string;
+    /**
+     * base64 image
+     */
+    preview: string;
+    /**
+     * minimal width (count of columns) of the widget, user cannot shrink to smaller size
+     */
+    minWidth: number;
+    /**
+     * maximal width (count of columns)  of the widget, user cannot shrink to bigger size
+     */
+    maxWidth: number;
+    /**
+     * minimal height (count of columns)  of the widget, user cannot shrink to smaller size
+     */
+    minHeight: number;
+    /**
+     * maximal height (count of columns)  of the widget, user cannot shrink to bigger size
+     */
+    maxHeight: number;
+    /**
+     * default width of the widget when you add it to layout
+     */
+    initWidth: number;
+    /**
+     * default height of the widget when you add it to layout
+     */
+    initHeight: number;
+    /**
+     * if the widget is static, its not possible to resize it or move it
+     */
+    isStatic?: boolean;
+    /**
+     * if true => widget config will be opened in dropdown over the widgets
+     */
+    isWidgetConfigInDropdown?: boolean;
+    /**
+     * component of the widget
+     */
+    component: React.ComponentType<WidgetComponentProps>;
+    /**
+     * components of the widget for more customization
+     */
+    components?: Record<string, React.ComponentType<any>>;
+    /**
+     * component for configuration
+     */
+    configComponent?: React.ComponentType<ConfigProps>;
+    /**
+     * icon of widget
+     */
+    icon?: React.ReactElement;
+}
+export interface CustomComponents {
+    Button?: React.FC<ButtonProps>;
+    Picker?: React.FC<{
+        onAdd: (code: string) => void;
+        widgetDefinitions: WidgetDefinition[];
+    }>;
+    ItemConfigControls?: React.FC<{
+        onRemove: () => void;
+        onSave: () => void;
+        onCancel: () => void;
+    }>;
+    ItemHeader?: React.FC<{
+        widget: WidgetDefinition;
+        config: WidgetConfig;
+        onRemove: () => void;
+        onSave: () => void;
+        isConfigOpen: boolean;
+        toggleConfigOpen: () => void;
+        dragHandleClassName: string;
+        headerRef: RefObject<HTMLDivElement>;
+    }>;
+}
+export type LayoutItem = Omit<RGLLayout, 'i'> & {
+    i: string;
+};
+export interface LayoutWidgetItem {
+    /**
+     * auto generated id for easier manipulating
+     */
+    id: string;
+    /**
+     * identifier of type of the used widget
+     */
+    code: string;
+    /**
+     * how is the used widget configured
+     */
+    config: WidgetConfig;
+    /**
+     * where in layout is the widget used
+     */
+    layout: LayoutItem;
+}
+export interface SelectOption {
+    value: string;
+    label: string;
+}
+/**
+ * General filter for widget
+ *
+ * Props:
+ * input - renders input
+ * isMulti, options - renders select boxes
+ *
+ * If input is specified, isMulti & options props are ignored
+ */
+export interface LayoutWidgetFilter {
+    name: string;
+    label: React.ReactNode;
+    placeholder?: React.ReactNode;
+    input?: 'text' | 'number';
+    isMulti?: boolean;
+    options?: SelectOption[];
+}
+export interface DashboardProps {
+    /**
+     * language of dashboard
+     */
+    lang: string;
+    /**
+     * title of dashboard. If you not specify it, the text 'Your dashboard' is displayed
+     */
+    title?: string | boolean;
+    /**
+     * list of all visible widgets
+     */
+    widgetDefinitions: WidgetDefinition[];
+    /**
+     * used widget on first render as a init state
+     */
+    initialWidgets?: LayoutWidgetItem[];
+    /**
+     * call this callback on every single change in dashboard
+     */
+    onChange?: (widgetList: LayoutWidgetItem[]) => void | Promise<void>;
+    /**
+     * custom components to modify design
+     */
+    components?: CustomComponents;
+}
+export type Source = SelectOption & {
+    filters?: LayoutWidgetFilter[];
+};
+export * from './components/Widgets/HorizontalBar/types';
+export * from './components/Widgets/Table/types';
+export * from './components/Config/types';

package/ui/Modules/Dashboard/types.js

@@ -0,0 +1 @@
+export {};

package/ui/Modules/index.d.ts

@@ -0,0 +1 @@
+export * from './Dashboard';

package/ui/Modules/index.js

@@ -0,0 +1,8 @@
+import { IconLabelCell_exports } from "./Dashboard/components/Widgets/Table/components/IconLabelCell.js";
+import { BarChart, ColorBox, HorizontalBar, NoWidget, NumberBox, PieChart, Table, TextBox } from "./Dashboard/components/Widgets/index.js";
+import dashboardReducer from "./Dashboard/store/reducers/index.js";
+import { withConfig } from "./Dashboard/Hoc/withConfig.js";
+import { withFetch } from "./Dashboard/Hoc/withFetch.js";
+import { withProps, withPropsWDefinition } from "./Dashboard/Hoc/withProps.js";
+import "./Dashboard/index.js";
+export { BarChart, ColorBox, HorizontalBar, NoWidget, NumberBox, PieChart, Table, TextBox, IconLabelCell_exports as WidgetTableComponents, dashboardReducer as reducer, withConfig, withFetch, withProps, withPropsWDefinition };