diginet-core-ui 1.4.39 → 1.4.40

package/src/theme/settings.js

@@ -0,0 +1,816 @@
+import { color } from 'styles/colors';
+import { font } from 'styles/font';
+import { typography as typographies } from 'styles/typography';
+import createTheme from './createTheme';
+import locale from 'locale';
+// import { getGlobal } from 'global';
+const { fontSize, fontFamily, fontFamilyBold, fontFamilyMedium, fontFamilySecurity } = font;
+
+delete color.lightMode;
+delete color.lightMode;
+
+const settings = {
+    border: {
+        radius: '4px',
+        style: 'solid',
+    },
+    boxShadows: {
+        large: '0 4px 4px 0 rgba(0, 0, 0, 0.25)',
+        small: '0 2px 2px 0 rgba(0, 0, 0, 0.25)',
+    },
+    colors: {
+        ...color,
+        disabled: color.system.disabled,
+        hover: color.fill.hover,
+        label: color.text.label,
+        placeholder: color.text.sub,
+        primary: color.system.active,
+        secondary: color.system.rest,
+        success: color.semantic.success,
+        warning: color.semantic.warning,
+        danger: color.semantic.danger,
+        info: color.semantic.info,
+    },
+    typography: {
+        fontFamily,
+        fontFamilyMedium,
+        fontFamilyBold,
+        fontSize,
+        fontFamilySecurity,
+        label: {
+            fontSize: '12px',
+            fontFamily,
+            fontWeight: '500',
+            lineHeight: '16px',
+        },
+        helperText: {
+            fontSize: '12px',
+            fontFamily,
+            fontWeight: 'normal',
+            lineHeight: '16px',
+        },
+        ...typographies,
+    },
+    breakpoints: {
+        values: {
+            xs: 0, // extra-small
+            sm: 600, // small
+            md: 900, // medium
+            lg: 1200, // large
+            xl: 1536, // extra-large
+        },
+    },
+    mode: 'light',
+    components: {
+        Accordion: {
+            defaultProps: {
+                boxShadow: true,
+                className: '',
+                disabled: false,
+                expand: false,
+                fullHeight: false,
+                style: {},
+            },
+        },
+        AccordionDetails: {
+            defaultProps: {
+                className: '',
+                id: '',
+                style: {},
+            },
+        },
+        AccordionGroup: {
+            defaultProps: {
+                className: '',
+                id: '',
+                style: {},
+            },
+        },
+        AccordionSummary: {
+            defaultProps: {
+                background: 'system/standard',
+                className: '',
+                expandIcon: 'ArrowRight',
+                expandIconAt: 'start',
+                expandIconProps: {},
+                style: {},
+            },
+        },
+        Alert: {
+            defaultProps: {
+                autoDisappear: false,
+                className: '',
+                clearAble: true,
+                color: 'semantic/info',
+                duration: 2000,
+                progressing: false,
+                size: 'medium',
+            },
+        },
+        Avatar: {
+            defaultProps: {
+                actionIconHeight: 24,
+                actionIconWidth: 24,
+                allowEdit: false,
+                className: '',
+                clearAble: true,
+                data: {},
+                direction: 'bottom',
+                disabled: false,
+                height: 48,
+                hoverAble: false,
+                lazyLoading: false,
+                matchType: /^image\/(gif|jpe?g|tiff?|png|webp|bmp|svg(\+xml)?)$/i,
+                // maxSizeError: `File ${getGlobal(['errorDefault', 'maxSize'])}`,
+                outlined: false,
+                readOnly: false,
+                style: {},
+                width: 48,
+                // wrongTypeError: `File ${getGlobal(['errorDefault', 'fileType'])}`,
+            },
+        },
+        Attachment: {
+            defaultProps: {
+                allowDelete: true,
+                allowSort: true,
+                className: '',
+                data: [],
+                disabled: false,
+                height: 280,
+                maxFile: Infinity,
+                multiple: true,
+                style: {},
+                viewType: 'detail',
+            },
+        },
+        Badge: {
+            defaultProps: {
+                anchorOrigin: { vertical: 'top', horizontal: 'right' },
+                className: '',
+                color: 'default',
+                content: null,
+                contentDirection: 'left',
+                invisible: false,
+                max: 99,
+                showZero: false,
+                size: 'medium',
+                style: {},
+            },
+        },
+        Breadcrumb: {
+            defaultProps: {
+                className: '',
+                color: 'default',
+                itemsAfterCollapse: 1,
+                itemsBeforeCollapse: 1,
+                maxItems: 8,
+                separator: 'ArrowRight',
+                size: 'medium',
+                style: {},
+            },
+        },
+        Button: {
+            defaultProps: {
+                className: '',
+                color: 'default',
+                disabled: false,
+                label: '',
+                loading: false,
+                size: 'medium',
+                stopPropagation: true,
+                viewType: 'text',
+            },
+        },
+        ButtonIcon: {
+            defaultProps: {
+                circular: false,
+                className: '',
+                color: 'default',
+                colorHover: 'system/active',
+                disabled: false,
+                size: 'medium',
+                viewBox: true,
+                viewType: 'outlined',
+            },
+        },
+        ButtonMore: {
+            defaultProps: {
+                buttonProps: {},
+                className: '',
+                disabled: false,
+                options: [],
+                optionType: 'full',
+                style: {},
+            },
+        },
+        Calendar: {
+            defaultProps: {
+                actions: null,
+                defaultValue: new Date(),
+                displayAnotherMonth: true,
+            },
+        },
+        CalendarRange: {
+            defaultProps: {
+                actions: null,
+                displayAnotherMonth: true,
+            },
+        },
+        Card: {
+            defaultProps: {
+                bodyStyle: {},
+                className: '',
+                dividerColor: 'line/category',
+                direction: 'vertical',
+                footerDivider: false,
+                footerStyle: {},
+                headerDivider: true,
+                headerStyle: {},
+                style: {},
+                width: 258,
+                height: 'max-content',
+            },
+        },
+        CardBody: {
+            defaultProps: {
+                className: '',
+                style: {},
+            },
+        },
+        CardExtra: {
+            defaultProps: {
+                className: '',
+                style: {},
+            },
+        },
+        CardFooter: {
+            defaultProps: {
+                className: '',
+                style: {},
+            },
+        },
+        CardHeader: {
+            defaultProps: {
+                className: '',
+                style: {},
+            },
+        },
+        Checkbox: {
+            defaultProps: {
+                className: '',
+                color: 'primary',
+                defaultChecked: false,
+                determinate: true,
+                disabled: false,
+                inputProps: {},
+                label: '',
+                labelProps: {},
+                readOnly: false,
+                stopPropagation: true,
+                width: 18,
+            },
+        },
+        Chip: {
+            defaultProps: {
+                viewType: 'outlined',
+                size: 'medium',
+                color: 'default',
+            },
+        },
+        Col: {
+            defaultProps: {
+                className: '',
+                columns: 12,
+                lg: false,
+                md: false,
+                sm: false,
+                style: {},
+                verticalAlign: 'auto',
+                wrap: 'wrap',
+                xl: false,
+                xs: true,
+                zeroMinWidth: false,
+            },
+        },
+        Container: {
+            defaultProps: {
+                className: '',
+                columns: 12,
+                columnSpacing: { xs: 4, sm: 4, md: 4, lg: 4, xl: 6 },
+                direction: 'row',
+                lg: false,
+                md: false,
+                rowSpacing: { xs: 4, sm: 4, md: 4, lg: 4, xl: 4 },
+                sm: false,
+                spacing: 0,
+                style: {},
+                topSpacing: { xs: 2, sm: 2, md: 2, lg: 2, xl: 2 },
+                wrap: 'wrap',
+                xl: false,
+                xs: false,
+                zeroMinWidth: false,
+            },
+        },
+        DateInput: {
+            defaultProps: {
+                className: '',
+                disabled: false,
+                error: '',
+                format: locale.get() === 'vi' ? 'DD/MM/YYYY' : 'DD/MM/YYYY',
+                label: '',
+                readOnly: false,
+                required: false,
+                style: {},
+                viewType: 'underlined',
+            },
+        },
+        DatePicker: {
+            defaultProps: {
+                actionIconAt: 'end',
+                clearAble: false,
+                controls: false,
+                disabled: false,
+                displayAnotherMonth: true,
+                displayFormat: locale.get() === 'vi' ? 'DD/MM/YYYY' : 'MM/DD/YYYY',
+                pressESCToClose: true,
+                readOnly: false,
+                required: false,
+                returnFormat: 'YYYY-MM-DD',
+                textAlign: 'start',
+                useDateInput: false,
+                viewType: 'underlined',
+            },
+        },
+        DateRangePicker: {
+            defaultProps: {
+                actionIconAt: 'end',
+                clearAble: false,
+                controls: false,
+                disabled: false,
+                displayFormat: 'DD/MM/YY',
+                onShowTooltip: true,
+                pressESCToClose: true,
+                readOnly: false,
+                required: false,
+                returnFormat: 'YYYY-MM-DD',
+                showUnitCount: true,
+                startFromZero: false,
+                textAlign: 'start',
+                unitCount: 'day',
+                viewType: 'underlined',
+            },
+        },
+        Divider: {
+            defaultProps: {
+                className: '',
+                color: 'system/disabled',
+                direction: 'horizontal',
+                style: {},
+            },
+        },
+        Dropdown: {
+            defaultProps: {
+                allowSearch: true,
+                className: '',
+                clearAble: false,
+                dataSource: [],
+                disabled: false,
+                displayExpr: 'name',
+                error: '',
+                iconExpr: 'none',
+                inputProps: {},
+                itemMode: 'normal',
+                label: '',
+                limit: 50,
+                loading: false,
+                multilineSelectedItem: false,
+                multiple: false,
+                // noDataText: getGlobal('noDataText'),
+                // placeholder: getGlobal('dropdownPlaceholder'),
+                readOnly: false,
+                required: false,
+                // searchDelayTime: getGlobal('delayOnInput'),
+                searchMode: 'contains',
+                total: Number.MAX_SAFE_INTEGER,
+                valueExpr: 'id',
+                viewType: 'underlined',
+            },
+        },
+        DropdownBox: {
+            defaultProps: {
+                className: '',
+                label: '',
+                placeholder: '',
+                startIcon: 'Search',
+                endIcon: 'ArrowDown',
+                openOnClickAt: 'icon',
+                viewType: 'underlined',
+                inputProps: {},
+                delayOnInput: 700,
+            },
+        },
+        Grid: {
+            defaultProps: {
+                className: '',
+                columns: 12,
+                container: false,
+                direction: 'row',
+                item: false,
+                lg: false,
+                md: false,
+                sm: false,
+                spacing: 0,
+                style: {},
+                verticalAlign: 'auto',
+                wrap: 'wrap',
+                xl: false,
+                xs: false,
+                zeroMinWidth: false,
+            },
+        },
+        HelperText: {
+            defaultProps: {
+                disabled: false,
+                status: 'default',
+                className: '',
+                style: {},
+                children: '',
+            },
+        },
+        Icon: {
+            defaultProps: {
+                className: '',
+                color: 'system/rest',
+                height: 24,
+                style: {},
+                viewBox: true,
+                width: 24,
+            },
+        },
+        Image: {
+            defaultProps: {
+                circular: false,
+                className: '',
+                height: 200,
+                lazyLoading: false,
+                objectFit: 'cover',
+                style: {},
+                width: 200,
+            },
+        },
+        InputBase: {
+            defaultProps: {
+                autoComplete: 'off',
+                autoFocus: false,
+                className: '',
+                defaultValue: '',
+                // delayOnChange: getGlobal('delayOnInput'),
+                disabled: false,
+                endIconProps: {},
+                hoverTooltip: false,
+                iconStyle: {},
+                inputProps: {},
+                inputStyle: {},
+                multiline: false,
+                nonStyle: false,
+                // placeholder: getGlobal('inputPlaceholder'),
+                readOnly: false,
+                required: false,
+                resize: 'none',
+                startIconProps: {},
+                status: 'default',
+                type: 'text',
+                viewType: 'underlined',
+            },
+        },
+        Label: {
+            defaultProps: {
+                children: '',
+                className: '',
+                color: 'text/label',
+                disabled: false,
+                lineClamp: 1,
+                readOnly: false,
+                required: false,
+                type: 'h6',
+            },
+        },
+        Modal: {
+            defaultProps: {
+                alignment: 'top',
+                autoFocus: true,
+                className: '',
+                dragAnyWhere: false,
+                moveable: false,
+                moveOutScreen: false,
+                open: false,
+                pressESCToClose: true,
+                style: {},
+                width: '80%',
+            },
+        },
+        ModalBody: {
+            defaultProps: {
+                className: '',
+                style: {},
+            },
+        },
+        ModalFooter: {
+            defaultProps: {
+                boxShadow: '0px -1px 1px rgba(0, 0, 0, 0.25)',
+                className: '',
+                style: {},
+            },
+        },
+        ModalHeader: {
+            defaultProps: {
+                className: '',
+                showClose: true,
+                style: {},
+                title: '',
+            },
+        },
+        MoneyInput: {
+            defaultProps: {
+                allowZero: false,
+                autoFocus: false,
+                className: '',
+                convertToWords: false,
+                disabled: false,
+                disabledNegative: false,
+                endIcon: '',
+                error: '',
+                inputProps: {},
+                label: '',
+                multiline: false,
+                nonStyle: false,
+                readOnly: false,
+                required: false,
+                startIcon: '',
+                thousandSeparator: false,
+                valueTypeReturn: 'number',
+                viewType: 'underlined',
+            },
+        },
+        Notify: {
+            defaultProps: {
+                className: '',
+                position: {
+                    vertical: 'bottom',
+                    horizontal: 'center',
+                },
+                style: {},
+            },
+        },
+        NumberInput: {
+            defaultProps: {
+                autoFocus: false,
+                className: '',
+                decimalDigit: Infinity,
+                decimalSymbol: locale.get() === 'vi' ? ',' : '.',
+                disabled: false,
+                disabledNegative: false,
+                endIcon: '',
+                error: '',
+                fixedDecimalDigit: false,
+                label: '',
+                max: Infinity,
+                min: -Infinity,
+                readOnly: false,
+                required: false,
+                startIcon: '',
+                step: 1,
+                style: {},
+                thousandSeparator: false,
+                viewType: 'underlined',
+            },
+        },
+        PasswordInput: {
+            defaultProps: {
+                autoComplete: 'new-password',
+                autoFocus: false,
+                autoWidth: false,
+                className: '',
+                defaultValue: '',
+                disabled: false,
+                error: '',
+                label: '',
+                readOnly: false,
+                required: false,
+                status: 'default',
+                viewType: 'underlined',
+                visibilityToggle: true,
+            },
+        },
+        Popover: {
+            defaultProps: {
+                anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
+                arrow: false,
+                bgColor: 'system/standard',
+                className: '',
+                clickOutsideToClose: true,
+                fullScreen: true,
+                height: 'max-content',
+                pressESCToClose: true,
+                style: {},
+                transformOrigin: { vertical: 'top', horizontal: 'center' },
+                trigger: 'click',
+                width: 'max-content',
+            },
+        },
+        PopoverBody: {
+            defaultProps: {
+                className: '',
+                style: {},
+            },
+        },
+        PopoverFooter: {
+            defaultProps: {
+                className: '',
+                style: {},
+                boxShadow: true,
+            },
+        },
+        PopoverHeader: {
+            defaultProps: {
+                title: '',
+                className: '',
+                style: {},
+            },
+        },
+        Radio: {
+            defaultProps: {
+                disabled: false,
+                readOnly: false,
+                defaultChecked: false,
+                className: '',
+                width: 20,
+                labelProps: {},
+            },
+        },
+        Row: {
+            defaultProps: {
+                className: '',
+                columns: 12,
+                columnSpacing: { xs: 4, sm: 4, md: 4, lg: 4, xl: 6 },
+                direction: 'row',
+                lg: false,
+                md: false,
+                rowSpacing: { xs: 4, sm: 4, md: 4, lg: 4, xl: 4 },
+                sm: false,
+                spacing: 0,
+                style: {},
+                wrap: 'wrap',
+                xl: false,
+                xs: false,
+                zeroMinWidth: false,
+            },
+        },
+        TabContainer: {
+            defaultProps: {
+                className: '',
+                direction: 'horizontal',
+                level: 'level1',
+                style: {},
+                tabIndex: 0,
+                width: '100%',
+            },
+        },
+        TabHeader: {
+            defaultProps: {
+                centered: false,
+                className: '',
+                scrollButtons: false,
+                style: {},
+                width: '100%',
+            },
+        },
+        TabPanel: {
+            defaultProps: {
+                className: '',
+                lazyLoading: false,
+                style: {},
+            },
+        },
+        TabItem: {
+            defaultProps: {
+                className: '',
+                color: 'system/rest',
+                disabled: false,
+                label: '',
+                style: {},
+            },
+        },
+        TextInput: {
+            defaultProps: {
+                autoComplete: 'off',
+                autoFocus: false,
+                autoWidth: false,
+                className: '',
+                defaultValue: '',
+                disabled: false,
+                hoverTooltip: false,
+                error: '',
+                label: '',
+                multiline: false,
+                readOnly: false,
+                required: false,
+                status: 'default',
+                type: 'text',
+                viewType: 'underlined',
+            },
+        },
+        TimePicker: {
+            defaultProps: {
+                actionIconAt: 'end',
+                className: '',
+                disabled: false,
+                displayFormat: 'HH:mm:ss',
+                mode12h: false,
+                readOnly: false,
+                required: false,
+                returnFormat: 'HH:mm:ss',
+                error: '',
+                minuteStep: 1,
+                min: '',
+                max: '',
+                label: '',
+                value: '',
+                viewType: 'underlined',
+            },
+        },
+        Toggle: {
+            defaultProps: {
+                disabled: false,
+                readOnly: false,
+                defaultChecked: false,
+                label: '',
+                value: '',
+                id: '',
+                width: 40,
+                height: 20,
+                lineClamp: null,
+                required: false,
+            },
+        },
+        TreeView: {
+            defaultProps: {
+                allowSearch: false,
+                autoExpandToResult: true,
+                className: '',
+                dataSource: [],
+                disabled: false,
+                disabledBoldResult: false,
+                disabledRelevantValue: false,
+                displayExpr: 'name',
+                expand: false,
+                expandIcon: 'ArrowDown',
+                id: 'id',
+                multiple: false,
+                multipleValueMode: 'multiple',
+                parentID: 'parentID',
+                renderAsyncFromLevel: 2,
+                renderAsyncWithLength: 200,
+                searchMode: 'contains',
+                searchProps: {},
+                selectAll: false,
+                // selectAllLabel: getGlobal('selectAll'),
+                selectBox: false,
+                showChildrenOfResult: false,
+                showSelectedItems: false,
+                value: [],
+                valueExpr: '',
+            },
+        },
+        Typography: {
+            defaultProps: {
+                center: false,
+                className: '',
+                color: 'default',
+                format: [],
+                fullWidth: true,
+                hoverTooltip: false,
+                mapping: 'span',
+                tooltipDirection: 'bottom',
+                type: 'p1',
+            },
+        },
+        Skeleton: {
+            defaultProps: {
+                className: '',
+                colors: 'default',
+                height: '100%',
+                style: {},
+                width: '100%',
+            },
+        },
+    },
+    spacing: 4,
+    zIndex: 1500,
+};
+
+export const useTheme = () => createTheme(settings);
+export const useColor = settings.colors;
+export const useTypography = settings.typography;
+
+export default settings;