@evoke-platform/ui-components 1.0.0-dev.147 → 1.0.0-dev.149-test-1056

package/dist/published/components/custom/DataGrid/DataGrid.d.ts

@@ -1,8 +1,15 @@
 /// <reference types="react" />
 import { DataGridProps as MuiDataGridProps, GridValidRowModel } from '@mui/x-data-grid';
 import { Theme } from '@mui/material';
+export declare type BulkAction = {
+    label: string;
+    onClick: () => void;
+    selectionCount?: number;
+};
 export declare type DataGridProps<T extends GridValidRowModel> = MuiDataGridProps<T> & {
     onRefresh?: () => void;
     theme?: Theme;
+    title?: string;
+    bulkAction?: BulkAction;
 };
 export default function <T extends GridValidRowModel>(props: DataGridProps<T>): JSX.Element;

package/dist/published/components/custom/DataGrid/DataGrid.js

@@ -14,49 +14,40 @@ import React, { useMemo, useState } from 'react';
 import Toolbar from './Toolbar';
 import UIThemeProvider from '../../../theme';
 export default function (props) {
-    const { onRefresh, loading, theme } = props, rest = __rest(props, ["onRefresh", "loading", "theme"]);
+    const { onRefresh, loading, theme, title, bulkAction } = props, rest = __rest(props, ["onRefresh", "loading", "theme", "title", "bulkAction"]);
     const [anchorEl, setAnchorEl] = useState();
-    const toolbar = useMemo(() => () => React.createElement(Toolbar, { onRefresh: onRefresh, setAnchorEl: setAnchorEl, loading: loading, theme: theme }), [onRefresh, loading]);
+    const toolbar = useMemo(() => () => (React.createElement(Toolbar, { onRefresh: onRefresh, setAnchorEl: setAnchorEl, loading: loading, theme: theme, title: title, bulkAction: bulkAction })), [onRefresh, loading]);
     return (React.createElement(UIThemeProvider, { args: { theme: theme } },
-        React.createElement(MuiDataGrid, Object.assign({ onMenuOpen: (env) => setAnchorEl(env.target), loading: loading }, rest, { sx: {
-                borderRadius: '8px',
-                border: 'none',
-                '& .MuiDataGrid-columnHeaders': {
+        React.createElement(MuiDataGrid, Object.assign({ onMenuOpen: (env) => setAnchorEl(env.target), loading: loading }, rest, { sx: Object.assign({ borderRadius: '8px', border: 'none', '& .MuiDataGrid-columnHeaders': {
                     backgroundColor: '#F4F6F8',
                     color: '#637381',
-                    borderRadius: '8px 8px 0 0'
-                },
-                '& .MuiDataGrid-virtualScrollerContent': {
+                    borderRadius: '8px 8px 0 0',
+                }, '& .MuiDataGrid-virtualScrollerContent': {
                     borderRight: '1px solid #eee',
                     borderLeft: '1px solid #eee',
-                },
-                '& .MuiDataGrid-toolbarContainer': {
-                    padding: '7px 0',
-                    fontColor: '#212B36'
-                },
-                '& .MuiDataGrid-row': {
+                }, '& .MuiDataGrid-toolbarContainer': {
+                    padding: '0',
+                    fontColor: '#212B36',
+                }, '& .MuiDataGrid-row': {
                     borderBottom: '1px solid #eee',
-                },
-                '& .MuiDataGrid-cell': {
-                    border: 'none'
-                },
-                '& .MuiDataGrid-footerContainer': {
+                }, '& .MuiDataGrid-cell': {
+                    border: 'none',
+                }, '& .MuiDataGrid-footerContainer': {
                     border: '1px solid #eee',
-                    borderRadius: '0 0 8px 8px'
-                },
-                '.css-17hki28-MuiButtonBase-root-MuiButton-root': {
+                    borderRadius: '0 0 8px 8px',
+                }, '& .MuiTablePagination-displayedRows': {
+                    marginBottom: 0,
+                }, '.css-17hki28-MuiButtonBase-root-MuiButton-root': {
                     padding: '7px',
                     color: '#757575',
                     '&:hover': {
                         backgroundColor: '#f2f3f5',
-                    }
-                },
-                height: 'calc(100vh - 240px)'
-            }, localeText: {
+                    },
+                }, height: 'calc(100vh - 240px)' }, rest.sx), localeText: {
                 toolbarColumns: '',
                 toolbarDensity: '',
                 toolbarFilters: '',
-                toolbarExport: 'Download'
+                toolbarExport: 'Download',
             }, componentsProps: {
                 panel: {
                     anchorEl: anchorEl,
@@ -66,10 +57,10 @@ export default function (props) {
                             borderRadius: '8px',
                             boxShadow: '0px 24px 48px rgba(145, 158, 171, 0.4)',
                             padding: '8px',
-                            stop: -120
-                        }
-                    }
-                }
+                            stop: -120,
+                        },
+                    },
+                },
             }, components: {
                 Toolbar: toolbar,
             } }))));

package/dist/published/components/custom/DataGrid/Toolbar.d.ts

@@ -1,10 +1,13 @@
 /// <reference types="react" />
 import { GridToolbarProps as MuiGridToolbarProps } from '@mui/x-data-grid';
+import { BulkAction } from './DataGrid';
 export declare type GridToolbarProps = MuiGridToolbarProps & {
     onRefresh?: () => void;
     setAnchorEl?: (anchorEl: HTMLAnchorElement | null) => void;
     loading?: boolean;
     theme?: any;
+    title?: string;
+    bulkAction?: BulkAction;
 };
 declare function Toolbar(props: GridToolbarProps): JSX.Element;
 export default Toolbar;

package/dist/published/components/custom/DataGrid/Toolbar.js

@@ -1,12 +1,13 @@
-import { FileDownloadRounded, FilterAlt, Refresh, TableChartRounded, TableRowsRounded, } from '@mui/icons-material';
+import { FileDownloadRounded, FilterAlt, Refresh, TableChartRounded, TableRowsRounded } from '@mui/icons-material';
 import { GridToolbarColumnsButton, GridToolbarContainer, GridToolbarDensitySelector, GridToolbarExport, GridToolbarFilterButton, GridToolbarQuickFilter, } from '@mui/x-data-grid';
 import React from 'react';
 import { Grid } from '../../layout';
-import { IconButton } from '../../core';
+import { IconButton, Button } from '../../core';
 import UIThemeProvider from '../../../theme';
+import { Typography } from '@mui/material';
 function Toolbar(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const { onRefresh, setAnchorEl, loading, theme } = props;
+    const { onRefresh, setAnchorEl, loading, theme, title, bulkAction } = props;
     const styles = {
         container: { display: 'flex', justifyContent: 'space-between', margin: '0 0 15px 0' },
         iconButton: {
@@ -33,7 +34,7 @@ function Toolbar(props) {
                 borderRadius: '8px',
                 color: '#919EAB',
                 borderColor: 'rgba(145, 158, 171, 0.32)',
-            }
+            },
         },
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -45,9 +46,11 @@ function Toolbar(props) {
     return (React.createElement(UIThemeProvider, { args: { theme: theme } },
         React.createElement(GridToolbarContainer, { sx: { padding: '0' } },
             React.createElement(Grid, { container: true, sx: styles.container },
+                title && (React.createElement(Grid, { xs: 12, sx: { marginBottom: '15px' } },
+                    React.createElement(Typography, { sx: { fontSize: '20px', fontWeight: 700 } }, title))),
                 React.createElement(Grid, { item: true, xs: 6 },
                     React.createElement(GridToolbarQuickFilter, { variant: "outlined", size: "small", sx: styles.quickFilter })),
-                React.createElement(Grid, { item: true },
+                !bulkAction ? (React.createElement(Grid, { item: true },
                     React.createElement(Grid, { container: true, spacing: 1, sx: styles.icon },
                         React.createElement(Grid, { item: true, sx: { paddingRight: '15px' } },
                             React.createElement(GridToolbarExport, { sx: { color: '#212B36' }, printOptions: { disableToolbarButton: true }, startIcon: React.createElement(FileDownloadRounded, null) })),
@@ -64,6 +67,23 @@ function Toolbar(props) {
                             React.createElement(GridToolbarDensitySelector, { startIcon: React.createElement(TableRowsRounded, { sx: { marginLeft: '8px' } }), sx: styles.iconButton, onClickCapture: setAnchor })),
                         onRefresh && (React.createElement(Grid, { item: true },
                             React.createElement(IconButton, { onClick: onRefresh, disabled: loading, sx: { borderRadius: '4px' } },
-                                React.createElement(Refresh, null))))))))));
+                                React.createElement(Refresh, null))))))) : (React.createElement(Grid, { item: true, xs: 6, display: 'flex', alignItems: 'center', justifyContent: 'flex-end' },
+                    !!bulkAction.selectionCount && bulkAction.selectionCount !== 0 && (React.createElement(Typography, { sx: { marginRight: '12px' } }, `${bulkAction.selectionCount} selected`)),
+                    React.createElement(Button, { sx: {
+                            fontWeight: 700,
+                            height: '40px',
+                            padding: '0px 14px',
+                            backgroundColor: '#DFE3E8',
+                            '&:hover': { backgroundColor: '#c8ccd0' },
+                        }, color: 'inherit', onClick: bulkAction.onClick }, bulkAction.label),
+                    onRefresh && (React.createElement(Grid, { item: true, marginLeft: '6px' },
+                        React.createElement(Button, { onClick: onRefresh, disabled: loading, sx: {
+                                height: '40px',
+                                minWidth: '45px',
+                                borderRadius: '8px',
+                                backgroundColor: '#dfe3e8',
+                                '&:hover': { backgroundColor: '#c8ccd0' },
+                            } },
+                            React.createElement(Refresh, { sx: { color: 'black' } }))))))))));
 }
 export default Toolbar;

package/dist/published/components/custom/FormField/FormField.d.ts

@@ -18,6 +18,7 @@ export declare type FormFieldProps = {
     rows?: number;
     inputMaskPlaceholderChar?: string;
     queryAddresses?: Function;
+    instance?: any;
 };
 export declare type ObjectProperty = {
     id: string;

package/dist/published/components/custom/FormField/FormField.js

@@ -50,7 +50,7 @@ const FormField = (props) => {
             control = React.createElement(Select, Object.assign({}, commonProps));
             break;
         default:
-            control = (React.createElement(InputFieldComponent, Object.assign({}, commonProps, { mask: mask, inputMaskPlaceholderChar: inputMaskPlaceholderChar, isMultiLineText: isMultiLineText, rows: rows })));
+            control = (React.createElement(InputFieldComponent, Object.assign({}, commonProps, { instance: props.instance, mask: mask, inputMaskPlaceholderChar: inputMaskPlaceholderChar, isMultiLineText: isMultiLineText, rows: rows })));
             break;
     }
     return control;

package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.js

@@ -27,13 +27,15 @@ export const NumericFormat = (props) => {
 };
 const InputFieldComponent = (props) => {
     var _a;
-    const { property, defaultValue, error, errorMessage, onBlur, readOnly, required, size, placeholder, mask, min, max, isMultiLineText, rows, inputMaskPlaceholderChar, } = props;
+    const { property, defaultValue, error, errorMessage, onBlur, readOnly, required, size, placeholder, mask, min, max, isMultiLineText, rows, inputMaskPlaceholderChar, instance } = props;
     const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
     const [inputValue, setInputValue] = useState('');
     const id = property.id;
     useEffect(() => {
+        console.log("DefaultValue (ui-lib)", defaultValue);
+        console.log("instance (ui-lib)", instance);
         setValue(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
-    }, [defaultValue]);
+    }, [defaultValue, instance]);
     const handleChange = (e) => {
         const inputValue = property.type === 'integer' && /^-?\d+$/.test(e.target.value)
             ? parseInt(e.target.value, 10)

package/dist/published/stories/DataGrid.stories.d.ts

@@ -0,0 +1,5 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { DataGrid as CustomDataGrid } from '../index';
+declare const _default: ComponentMeta<typeof CustomDataGrid>;
+export default _default;
+export declare const DataGrid: ComponentStory<typeof CustomDataGrid>;

package/dist/published/stories/DataGrid.stories.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Grid, DataGrid as CustomDataGrid, Typography } from '../index';
+const fetchData = () => {
+    return data;
+};
+const data = [
+    {
+        id: '123',
+        name: 'John Smith',
+    },
+    {
+        id: '456',
+        name: 'Jane Doe',
+    },
+];
+export default {
+    title: 'Data Display/Data Grid',
+    component: CustomDataGrid,
+    args: {
+        columns: [
+            { field: 'id', headerName: 'ID', type: 'string', width: 400 },
+            { field: 'name', headerName: 'Name', type: 'string', width: 400 },
+        ],
+        rows: data,
+        getRowId: (row) => row.id,
+        onRefresh: fetchData,
+        sx: {
+            height: 'auto',
+        },
+    },
+};
+const DataGridTemplate = (args) => (React.createElement(Grid, { container: true, width: '100%', display: 'block' },
+    React.createElement(Grid, { item: true, xs: 12 },
+        React.createElement(Typography, { variant: "h6" }, "With filtering options:"),
+        React.createElement(CustomDataGrid, Object.assign({ key: 'data-grid' }, args))),
+    React.createElement(Grid, { item: true, xs: 12, sx: { marginTop: '14px' } },
+        React.createElement(Typography, { variant: "h6" }, "With title and bulk action:"),
+        React.createElement(CustomDataGrid, Object.assign({}, args, { key: 'data-grid-with-bulk-action', title: 'Data Grid', bulkAction: {
+                label: 'Bulk Action',
+                action: () => {
+                    console.log('Bulk acion clicked');
+                },
+            } })))));
+export const DataGrid = DataGridTemplate.bind({});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.147",
+    "version": "1.0.0-dev.149-test-1056",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",