@mailstep/design-system 0.8.51 → 0.9.0

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

package/ui/ThemeProvider/themes/index.d.ts

@@ -395,6 +395,230 @@ declare const themes: {
             inputTransition: string;
         };
     };
+    mailwiseDark: {
+        colors: {
+            bgLightGray: string;
+            bgLightGray1: string;
+            bgLightGray2: string;
+            typoPrimary: string;
+            textPrimary: string;
+            white: string;
+            lightGray7: string;
+            neutral10: string;
+            neutral20: string;
+            neutral30: string;
+            neutral300: string;
+            red10: string;
+            red30: string;
+            green10: string;
+            dangerColor: string;
+            lightGray1: string;
+            lightGray2: string;
+            lightGray3: string;
+            lightGray4: string;
+            lightGray6: string;
+            yellow10: string;
+            blue1: string;
+            blue3: string;
+            blue10: string;
+            inputErrorColor: string;
+            sideMenuSelectedText: string;
+            dashboardBackground: string;
+            iconStroke: string;
+            modalBackground: string;
+            black: string;
+            lightGray5: string;
+            neutral500: string;
+            gray: string;
+            gray1: string;
+            gray2: string;
+            gray3: string;
+            gray4: string;
+            gray5: string;
+            blue2: string;
+            blue4: string;
+            textTertiary: string;
+            blue20: string;
+            blue30: string;
+            blue40: string;
+            blue50: string;
+            blue60: string;
+            blue70: string;
+            blue80: string;
+            blue90: string;
+            teal20: string;
+            teal40: string;
+            teal50: string;
+            teal60: string;
+            teal70: string;
+            teal80: string;
+            teal90: string;
+            green20: string;
+            green30: string;
+            green50: string;
+            green60: string;
+            green70: string;
+            green80: string;
+            green90: string;
+            green: string;
+            successColor: string;
+            darkGreen: string;
+            orange20: string;
+            orange30: string;
+            orange50: string;
+            orange60: string;
+            orange80: string;
+            yellow20: string;
+            yellow60: string;
+            yellow70: string;
+            yellow80: string;
+            yellow90: string;
+            yellow1: string;
+            yellow2: string;
+            red20: string;
+            red50: string;
+            red70: string;
+            red1: string;
+            red2: string;
+            red3: string;
+            red60: string;
+            red80: string;
+            purple20: string;
+            purple40: string;
+            purple50: string;
+            purple60: string;
+            purple80: string;
+            purple90: string;
+            magenta10: string;
+            magenta20: string;
+            magenta30: string;
+            magenta40: string;
+            magenta50: string;
+            magenta60: string;
+            magenta70: string;
+            magenta80: string;
+            magenta90: string;
+            error: string;
+        };
+        shadows: {
+            dialogShadow: string;
+            gridShadow: string;
+            boxShadow: string;
+            dropShadow: string;
+            inputFocusBoxShadow: string;
+            dropdownMenuShadow: string;
+            tooltipBoxShadow: string;
+            cardShadow: string;
+            smooth: string;
+            headerShadow: string;
+            headerShadowB: string;
+            headerShadowNotifications: string;
+            cornerDialogShadow: string;
+            tooltipShadow: string;
+        };
+        fontSizes: string[];
+        lineHeights: {
+            none: number;
+            tight: number;
+            snug: number;
+            normal: number;
+            relaxed: number;
+            loose: number;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+        };
+        fontWeights: {
+            normal: number;
+            medium: number;
+            semiBold: number;
+            bold: number;
+        };
+        letterSpacings: {
+            tighter: string;
+            tight: string;
+            normal: string;
+            wide: string;
+            wider: string;
+            widest: string;
+        };
+        radii: {
+            sm: string;
+            md: string;
+            ml: string;
+            lg: string;
+            xl: string;
+        };
+        space: {
+            px: string;
+            0: string;
+            0.5: string;
+            1: string;
+            1.5: string;
+            2: string;
+            2.5: string;
+            3: string;
+            3.5: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+            11: string;
+            12: string;
+            14: string;
+            16: string;
+            20: string;
+            24: string;
+            28: string;
+            32: string;
+            36: string;
+            40: string;
+            44: string;
+            48: string;
+            52: string;
+            56: string;
+            60: string;
+            64: string;
+            72: string;
+            80: string;
+            96: string;
+        };
+        zIndices: number[];
+        screens: {
+            _: number;
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+            '2xl': number;
+        };
+        breakpoints: string[];
+        fonts: {
+            primary: string;
+            heading: string;
+        };
+        fontLinks: string[];
+        borders: {
+            slim: string;
+            mediumSlim: string;
+            medium: string;
+            mediumThick: string;
+            thick: string;
+        };
+        transitions: {
+            simpleLong: string;
+            inputTransition: string;
+        };
+    };
     dark: {
         colors: {
             bgLightGray: string;

package/ui/ThemeProvider/themes/index.js

@@ -1,10 +1,12 @@
 import defaultTheme from "./default.js";
-import mailwiseTheme from "./mailwise.js";
 import darkTheme from "./dark.js";
+import mailwiseTheme from "./mailwise.js";
+import mailwiseDark from "./mailwiseDark.js";
 //#region packages/ui/ThemeProvider/themes/index.ts
 const themes = {
 	default: defaultTheme,
 	mailwise: mailwiseTheme,
+	mailwiseDark,
 	dark: darkTheme
 };
 //#endregion

package/ui/ThemeProvider/themes/mailwiseDark.d.ts

@@ -0,0 +1,225 @@
+declare const mailwiseDark: {
+    colors: {
+        bgLightGray: string;
+        bgLightGray1: string;
+        bgLightGray2: string;
+        typoPrimary: string;
+        textPrimary: string;
+        white: string;
+        lightGray7: string;
+        neutral10: string;
+        neutral20: string;
+        neutral30: string;
+        neutral300: string;
+        red10: string;
+        red30: string;
+        green10: string;
+        dangerColor: string;
+        lightGray1: string;
+        lightGray2: string;
+        lightGray3: string;
+        lightGray4: string;
+        lightGray6: string;
+        yellow10: string;
+        blue1: string;
+        blue3: string;
+        blue10: string;
+        inputErrorColor: string;
+        sideMenuSelectedText: string;
+        dashboardBackground: string;
+        iconStroke: string;
+        modalBackground: string;
+        black: string;
+        lightGray5: string;
+        neutral500: string;
+        gray: string;
+        gray1: string;
+        gray2: string;
+        gray3: string;
+        gray4: string;
+        gray5: string;
+        blue2: string;
+        blue4: string;
+        textTertiary: string;
+        blue20: string;
+        blue30: string;
+        blue40: string;
+        blue50: string;
+        blue60: string;
+        blue70: string;
+        blue80: string;
+        blue90: string;
+        teal20: string;
+        teal40: string;
+        teal50: string;
+        teal60: string;
+        teal70: string;
+        teal80: string;
+        teal90: string;
+        green20: string;
+        green30: string;
+        green50: string;
+        green60: string;
+        green70: string;
+        green80: string;
+        green90: string;
+        green: string;
+        successColor: string;
+        darkGreen: string;
+        orange20: string;
+        orange30: string;
+        orange50: string;
+        orange60: string;
+        orange80: string;
+        yellow20: string;
+        yellow60: string;
+        yellow70: string;
+        yellow80: string;
+        yellow90: string;
+        yellow1: string;
+        yellow2: string;
+        red20: string;
+        red50: string;
+        red70: string;
+        red1: string;
+        red2: string;
+        red3: string;
+        red60: string;
+        red80: string;
+        purple20: string;
+        purple40: string;
+        purple50: string;
+        purple60: string;
+        purple80: string;
+        purple90: string;
+        magenta10: string;
+        magenta20: string;
+        magenta30: string;
+        magenta40: string;
+        magenta50: string;
+        magenta60: string;
+        magenta70: string;
+        magenta80: string;
+        magenta90: string;
+        error: string;
+    };
+    shadows: {
+        dialogShadow: string;
+        gridShadow: string;
+        boxShadow: string;
+        dropShadow: string;
+        inputFocusBoxShadow: string;
+        dropdownMenuShadow: string;
+        tooltipBoxShadow: string;
+        cardShadow: string;
+        smooth: string;
+        headerShadow: string;
+        headerShadowB: string;
+        headerShadowNotifications: string;
+        cornerDialogShadow: string;
+        tooltipShadow: string;
+    };
+    fontSizes: string[];
+    lineHeights: {
+        none: number;
+        tight: number;
+        snug: number;
+        normal: number;
+        relaxed: number;
+        loose: number;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+    };
+    fontWeights: {
+        normal: number;
+        medium: number;
+        semiBold: number;
+        bold: number;
+    };
+    letterSpacings: {
+        tighter: string;
+        tight: string;
+        normal: string;
+        wide: string;
+        wider: string;
+        widest: string;
+    };
+    radii: {
+        sm: string;
+        md: string;
+        ml: string;
+        lg: string;
+        xl: string;
+    };
+    space: {
+        px: string;
+        0: string;
+        0.5: string;
+        1: string;
+        1.5: string;
+        2: string;
+        2.5: string;
+        3: string;
+        3.5: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        14: string;
+        16: string;
+        20: string;
+        24: string;
+        28: string;
+        32: string;
+        36: string;
+        40: string;
+        44: string;
+        48: string;
+        52: string;
+        56: string;
+        60: string;
+        64: string;
+        72: string;
+        80: string;
+        96: string;
+    };
+    zIndices: number[];
+    screens: {
+        _: number;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        '2xl': number;
+    };
+    breakpoints: string[];
+    fonts: {
+        primary: string;
+        heading: string;
+    };
+    fontLinks: string[];
+    borders: {
+        slim: string;
+        mediumSlim: string;
+        medium: string;
+        mediumThick: string;
+        thick: string;
+    };
+    transitions: {
+        simpleLong: string;
+        inputTransition: string;
+    };
+};
+export default mailwiseDark;

package/ui/ThemeProvider/themes/mailwiseDark.js

@@ -0,0 +1,16 @@
+import darkTheme from "./dark.js";
+import mailwiseTheme from "./mailwise.js";
+//#region packages/ui/ThemeProvider/themes/mailwiseDark.ts
+const mailwiseDark = {
+	...mailwiseTheme,
+	colors: {
+		...mailwiseTheme.colors,
+		...darkTheme.colors
+	},
+	shadows: {
+		...mailwiseTheme.shadows,
+		...darkTheme.shadows
+	}
+};
+//#endregion
+export { mailwiseDark as default };

package/ui/ThemeProvider/types.d.ts

@@ -25,7 +25,7 @@ export type Theme = {
 export type Themes = Record<string, Theme>;
 export interface Props {
     children: ReactNode;
-    theme: 'default' | 'mailwise' | 'dark';
+    theme: 'default' | 'mailwise' | 'mailwiseDark' | 'dark';
     preflight?: boolean;
     language?: string;
 }