@evoke-platform/ui-components 1.0.0-dev.114 → 1.0.0-dev.115

package/dist/published/components/core/Avatar/Avatar.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { AvatarProps } from '@mui/material';
-declare type MyAvatarProps = AvatarProps & {
+export declare type CustomAvatarProps = AvatarProps & {
     isSelected?: boolean;
     backgroundColor?: string;
 };
-declare const Avatar: (props: MyAvatarProps) => JSX.Element;
+declare const Avatar: (props: CustomAvatarProps) => JSX.Element;
 export default Avatar;

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

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

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

@@ -14,10 +14,10 @@ import React, { useMemo, useState } from 'react';
 import Toolbar from './Toolbar';
 import UIThemeProvider from '../../../theme';
 export default function (props) {
-    const { onRefresh, loading } = props, rest = __rest(props, ["onRefresh", "loading"]);
+    const { onRefresh, loading, theme } = props, rest = __rest(props, ["onRefresh", "loading", "theme"]);
     const [anchorEl, setAnchorEl] = useState();
-    const toolbar = useMemo(() => () => React.createElement(Toolbar, { onRefresh: onRefresh, setAnchorEl: setAnchorEl, loading: loading }), [onRefresh, loading]);
-    return (React.createElement(UIThemeProvider, null,
+    const toolbar = useMemo(() => () => React.createElement(Toolbar, { onRefresh: onRefresh, setAnchorEl: setAnchorEl, loading: loading, theme: theme }), [onRefresh, loading]);
+    return (React.createElement(UIThemeProvider, { args: { theme: theme } },
         React.createElement(MuiDataGrid, Object.assign({ loading: loading }, rest, { sx: {
                 borderRadius: '8px',
                 border: 'none',
@@ -44,6 +44,23 @@ export default function (props) {
                     border: '1px solid #eee',
                     borderRadius: '0 0 8px 8px'
                 },
+                '.css-17hki28-MuiButtonBase-root-MuiButton-root': {
+                    padding: '7px',
+                    color: '#757575',
+                    '&:hover': {
+                        backgroundColor: '#f2f3f5',
+                    }
+                },
+                '.css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root': {
+                    marginRight: '3px',
+                    marginLeft: '3px'
+                },
+                '.css-aqict8-MuiButtonBase-root-MuiButton-root': {
+                    color: '#378043',
+                    '&:hover': {
+                        backgroundColor: '#D3E3D5',
+                    },
+                },
                 height: 'calc(100vh - 240px)'
             }, localeText: {
                 toolbarColumns: '',

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

@@ -4,6 +4,7 @@ export declare type GridToolbarProps = MuiGridToolbarProps & {
     onRefresh?: () => void;
     setAnchorEl?: (anchorEl: HTMLAnchorElement | null) => void;
     loading?: boolean;
+    theme?: any;
 };
 declare function Toolbar(props: GridToolbarProps): JSX.Element;
 export default Toolbar;

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

@@ -4,33 +4,38 @@ import React from 'react';
 import { Grid } from '../../layout';
 import { IconButton } from '../../core';
 import UIThemeProvider from '../../../theme';
-const styles = {
-    container: { display: 'flex', justifyContent: 'space-between', margin: '0 0 15px 0' },
-    iconButton: {
-        minWidth: '36px',
-        height: '36px',
-        backgroundColor: 'rgba(145, 158, 171, 0.12)',
-    },
-    icon: {
-        marginLeft: '8px',
-    },
-    quickFilter: {
-        '& fieldset': {
-            borderRadius: '8px',
-            color: '#919EAB',
-            borderColor: 'rgba(145, 158, 171, 0.32)',
-        },
-    },
-};
 function Toolbar(props) {
-    const { onRefresh, setAnchorEl, loading } = props;
+    const { onRefresh, setAnchorEl, loading, theme } = props;
+    const styles = {
+        container: { display: 'flex', justifyContent: 'space-between', margin: '0 0 15px 0' },
+        iconButton: {
+            minWidth: '36px',
+            height: '36px',
+            backgroundColor: 'rgba(145, 158, 171, 0.12)',
+        },
+        icon: {
+            marginLeft: '8px',
+        },
+        quickFilter: {
+            '& .MuiOutlinedInput-root': {
+                '&.Mui-focused fieldset': {
+                    borderColor: theme.palette.primary.main,
+                },
+            },
+            '& fieldset': {
+                borderRadius: '8px',
+                color: '#919EAB',
+                borderColor: 'rgba(145, 158, 171, 0.32)',
+            }
+        },
+    };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const setAnchor = (event) => {
         if (setAnchorEl) {
             setAnchorEl(event.target);
         }
     };
-    return (React.createElement(UIThemeProvider, null,
+    return (React.createElement(UIThemeProvider, { args: { theme: theme } },
         React.createElement(GridToolbarContainer, { sx: { padding: '0' } },
             React.createElement(Grid, { container: true, sx: styles.container },
                 React.createElement(Grid, { item: true, xs: 6 },

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CustomAvatarProps } from '../../core/Avatar/Avatar';
+export declare type UserAvatarProps = CustomAvatarProps & {
+    user?: string;
+    imageUrl?: string;
+};
+declare const UserAvatar: (props: UserAvatarProps) => JSX.Element;
+export default UserAvatar;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Avatar } from '../../core';
+const UserAvatar = (props) => {
+    var _a, _b;
+    const { user, imageUrl } = props;
+    const determineColor = (user) => {
+        const availableColors = ['#A10E0E', '#EB6B0A', '#FFC107', '#BCD340', '#547B29', '#0075A7', '#52437E'];
+        if (!user) {
+            return '#bdbdbd';
+        }
+        else {
+            let sum = 0;
+            [...user].forEach((v, index) => sum += user.charCodeAt(index));
+            return availableColors[sum % availableColors.length];
+        }
+    };
+    return (React.createElement(Avatar, Object.assign({}, props, { src: imageUrl !== null && imageUrl !== void 0 ? imageUrl : '', sx: Object.assign(Object.assign({}, props.sx), { backgroundColor: determineColor(user) }) }), user ? (_b = (_a = user.match(/(\b\S)?/g)) === null || _a === void 0 ? void 0 : _a.join('').match(/(^\S|\S$)?/g)) === null || _b === void 0 ? void 0 : _b.join('').toUpperCase() : undefined));
+};
+export default UserAvatar;

package/dist/published/components/custom/UserAvatar/index.d.ts

@@ -0,0 +1,3 @@
+import UserAvatar from './UserAvatar';
+export { UserAvatar };
+export default UserAvatar;

package/dist/published/components/custom/UserAvatar/index.js

@@ -0,0 +1,3 @@
+import UserAvatar from './UserAvatar';
+export { UserAvatar };
+export default UserAvatar;

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

@@ -4,3 +4,4 @@ export { FormField } from './FormField';
 export { MenuBar } from './Menubar';
 export { MultiSelect } from './MultiSelect';
 export { RepeatableField } from './RepeatableField';
+export { UserAvatar } from './UserAvatar';

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

@@ -4,3 +4,4 @@ export { FormField } from './FormField';
 export { MenuBar } from './Menubar';
 export { MultiSelect } from './MultiSelect';
 export { RepeatableField } from './RepeatableField';
+export { UserAvatar } from './UserAvatar';

package/dist/published/index.d.ts

@@ -1,4 +1,4 @@
-export { ClickAwayListener, FormControlProps, FormHelperTextProps, GridSize, Toolbar } from '@mui/material';
+export { ClickAwayListener, FormControlProps, FormHelperTextProps, GridSize, Toolbar, createTheme } from '@mui/material';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './components/core';
 export { CriteriaBuilder, DataGrid, FormField, MenuBar, MultiSelect, RepeatableField } from './components/custom';

package/dist/published/index.js

@@ -1,4 +1,4 @@
-export { ClickAwayListener, Toolbar } from '@mui/material';
+export { ClickAwayListener, Toolbar, createTheme } from '@mui/material';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './components/core';
 export { CriteriaBuilder, DataGrid, FormField, MenuBar, MultiSelect, RepeatableField } from './components/custom';

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

@@ -1,39 +1,5 @@
-import React from 'react';
+/// <reference types="react" />
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<(props: {
-    alt?: string | undefined;
-    children?: React.ReactNode;
-    classes?: Partial<import("@mui/material").AvatarClasses> | undefined;
-    imgProps?: (React.ImgHTMLAttributes<HTMLImageElement> & {
-        sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
-    }) | undefined;
-    sizes?: string | undefined;
-    src?: string | undefined;
-    srcSet?: string | undefined;
-    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "square" | "rounded" | "circular" | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "alt" | "src" | "sizes" | "srcSet" | "imgProps"> & {
-    isSelected?: boolean | undefined;
-    backgroundColor?: string | undefined;
-}) => JSX.Element>;
+declare const _default: ComponentMeta<(props: import("../components/core/Avatar/Avatar").CustomAvatarProps) => JSX.Element>;
 export default _default;
-export declare const Avatar: ComponentStory<(props: {
-    alt?: string | undefined;
-    children?: React.ReactNode;
-    classes?: Partial<import("@mui/material").AvatarClasses> | undefined;
-    imgProps?: (React.ImgHTMLAttributes<HTMLImageElement> & {
-        sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
-    }) | undefined;
-    sizes?: string | undefined;
-    src?: string | undefined;
-    srcSet?: string | undefined;
-    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "square" | "rounded" | "circular" | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "alt" | "src" | "sizes" | "srcSet" | "imgProps"> & {
-    isSelected?: boolean | undefined;
-    backgroundColor?: string | undefined;
-}) => JSX.Element>;
+export declare const Avatar: ComponentStory<(props: import("../components/core/Avatar/Avatar").CustomAvatarProps) => JSX.Element>;

package/package.json

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