ish-ui 1.0.2

package/src/colorPicker/ColorPicker.tsx

@@ -0,0 +1,223 @@
+/*
+ * Copyright ish group pty ltd 2022.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+
+import React, {
+ useCallback, useEffect, useMemo, useRef, useState 
+} from 'react';
+import ButtonBase from '@mui/material/ButtonBase';
+import Popper from '@mui/material/Popper';
+import { AlphaPicker, HuePicker } from 'react-color';
+import { ClickAwayListener, PopperPlacementType, Theme } from '@mui/material';
+import { createStyles, withStyles } from '@mui/styles';
+import Paper from '@mui/material/Paper';
+import Grow from '@mui/material/Grow';
+import clsx from 'clsx';
+import { FieldInputProps } from '@src/model';
+import { stopEventPropagation } from '@src/utils/events';
+
+interface ColorPickerWrapperProps {
+  input?: FieldInputProps;
+  classes?: any;
+  theme?: Theme;
+  placement?: PopperPlacementType;
+}
+
+interface ColorPickerBaseProps extends ColorPickerWrapperProps {
+  color: any;
+  TransitionProps: any;
+  setAnchorEl: any;
+}
+
+const styles = createStyles(({
+ spacing, transitions, palette, zIndex 
+}: Theme) => ({
+  paper: {
+    width: 200,
+    padding: spacing(2),
+    position: 'relative',
+    bottom: '12px',
+    background: palette.background.paper,
+    '&:after': {
+      bottom: '0px',
+      left: '50%',
+      width: '22px',
+      height: '10px',
+      position: 'absolute',
+      transform: 'translateX(-50%)',
+      background: palette.background.paper,
+      content: '\'\'',
+      zIndex: 1
+    },
+    '&:before': {
+      content: '\'\'',
+      bottom: '-6px',
+      left: '50%',
+      width: '12px',
+      height: '12px',
+      position: 'absolute',
+      transform: 'translateX(-50%) rotate(45deg)',
+      background: palette.background.paper,
+      boxShadow: '1px 1px 2px 0px rgba(0,0,0,0.2), 2px 1px 2px -1px rgba(0,0,0,0.12), 1px 1px 1px 0px rgba(0,0,0,0.12);'
+    }
+  },
+  paperPlaceBottom: {
+    marginTop: spacing(3),
+    '&:after': {
+      bottom: 'unset',
+      top: '0px'
+    },
+    '&:before': {
+      bottom: 'unset',
+      top: '-6px',
+    }
+  },
+  colorPickerButton: {
+    width: '14px',
+    height: '14px',
+    borderRadius: '100%',
+    transition: transitions.create('transform', {
+      duration: transitions.duration.shorter,
+      easing: transitions.easing.easeInOut
+    }),
+    '&:hover,&$opened': {
+      transform: 'scale(2)'
+    }
+  },
+  popper: {
+    zIndex: zIndex.tooltip
+  },
+  bottomOffset: {
+    marginBottom: spacing(1.25)
+  },
+  customAlfa: {
+    '& > div > div:first-child > div': {
+      background: 'none !important'
+    }
+  },
+  opened: {}
+}));
+
+const ColorPickerBase = React.memo<ColorPickerBaseProps>(
+  ({
+ classes, color, input: { value, onChange }, TransitionProps, setAnchorEl, placement 
+}) => {
+    const [hueColor, setHueColor] = useState(color);
+    const [alfaColor, setAlfaColor] = useState(color);
+
+    const hueRef = useRef<any>();
+    
+    const onHueChange = useCallback(color => {
+      setHueColor(color.hsv);
+      setAlfaColor(color.hsv);
+    }, []);
+
+    const onAlfaChange = useCallback(
+      color => {
+        setHueColor({
+         h: color.hsv.h, s: color.hsv.a, v: color.hsv.v, a: 1
+        });
+        setAlfaColor(color.hsv);
+      },
+      []
+    );
+
+    const handleClickAway = useCallback(() => {
+      setAnchorEl(null);
+    }, []);
+
+    useEffect(
+      () => {
+        if (!hueColor && value) {
+          setHueColor('#' + value);
+        }
+      },
+      [value, hueColor]
+    );
+
+    useEffect(
+      () => {
+        const hueHsv = hueRef.current.state.hsv;
+        setAlfaColor({
+         h: hueHsv.h, s: 1, v: hueHsv.v, a: hueHsv.s
+        });
+      },
+      [hueRef.current]
+    );
+    
+    const onChangeComplete = () => {
+      onChange(hueRef.current.state.hex.replace('#', ''));
+    };
+
+    return (
+      <ClickAwayListener onClickAway={handleClickAway}>
+        <Grow {...TransitionProps} timeout={200}>
+          <div>
+            <Paper className={clsx(classes.paper, placement === 'bottom' && classes.paperPlaceBottom)}>
+              <HuePicker
+                ref={hueRef}
+                color={hueColor}
+                onChange={onHueChange}
+                onChangeComplete={onChangeComplete}
+                width="168"
+                className={classes.bottomOffset}
+              />
+              <AlphaPicker
+                className={classes.customAlfa}
+                color={alfaColor}
+                width="168"
+                onChange={onAlfaChange}
+                onChangeComplete={onChangeComplete}
+              />
+            </Paper>
+          </div>
+        </Grow>
+      </ClickAwayListener>
+    );
+  }
+);
+
+const ColorPickerWrapper = React.memo<ColorPickerWrapperProps>(({
+ classes, theme, input, placement = 'top' 
+}) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLElement>) => {
+      setAnchorEl(anchorEl ? null : event.currentTarget);
+    },
+    [anchorEl]
+  );
+
+  const color = useMemo(() => (input.value ? '#' + input.value : theme.palette.primary.main), [theme, input.value]);
+  
+  return (
+    <div className="d-flex" onClick={stopEventPropagation}>
+      <ButtonBase onClick={handleClick} className={clsx(classes.colorPickerButton, anchorEl && classes.opened)} style={{ backgroundColor: color }} />
+      <Popper
+        open={Boolean(anchorEl)}
+        anchorEl={anchorEl}
+        placement={placement}
+        className={classes.popper}
+        transition
+      >
+        {({ TransitionProps }) => (
+          <ColorPickerBase
+            classes={classes}
+            color={color}
+            input={input}
+            TransitionProps={TransitionProps}
+            setAnchorEl={setAnchorEl}
+            placement={placement}
+          />
+        )}
+      </Popper>
+    </div>
+  );
+});
+
+export default withStyles(styles, { withTheme: true })(ColorPickerWrapper);

package/src/colorPicker/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+
+export * from './ColorPicker';

package/src/dialog/BrowserWarning.tsx

@@ -0,0 +1,24 @@
+import { Alert } from '@mui/lab';
+import * as React from 'react';
+
+const BROWSER_WARNING_TEXT = 'Your current browser is not supported. Please ensure you are using an up to date version of Chrome, Firefox or Edge.';
+
+export const isOldIE = () => {
+  const ua = window.navigator.userAgent;
+  const msie = ua.indexOf('MSIE ');
+  return msie !== -1;
+};
+
+export const BrowserWarning = () => isOldIE() && (
+  <div style={{
+    position: 'fixed',
+    bottom: '50vh',
+    left: '35vw',
+    right: '35vw',
+    zIndex: 10000
+  }}>
+    <Alert variant="filled" severity="error">
+      {BROWSER_WARNING_TEXT}
+    </Alert>
+  </div>
+);

package/src/dialog/confirm/ConfirmBase.tsx

@@ -0,0 +1,59 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+
+/**
+ * Common confirm dialog
+ * */
+
+import React from 'react';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import { ConfirmState } from '@src/model';
+
+const ConfirmBase: React.FunctionComponent<ConfirmState> = props => {
+  const {
+    open,
+    onCancel,
+    title,
+    confirmMessage,
+    onConfirm,
+    cancelButtonText,
+    confirmButtonText,
+    onCancelCustom,
+    confirmCustomComponent
+  } = props;
+
+  return (
+    <Dialog open={open} onClose={onCancel}>
+      {title && <DialogTitle id="alert-dialog-title">{title}</DialogTitle>}
+      {confirmMessage && (
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">{confirmMessage}</DialogContentText>
+        </DialogContent>
+      )}
+
+      <DialogActions>
+        <Button onClick={onCancelCustom || onCancel} color="primary">
+          {cancelButtonText}
+        </Button>
+        {onConfirm && !confirmCustomComponent && (
+          <Button onClick={() => onConfirm()} variant="contained" color="primary">
+            {confirmButtonText}
+          </Button>
+        )}
+        {confirmCustomComponent && confirmCustomComponent}
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ConfirmBase;

package/src/dialog/index.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+
+export * from './message/Message';
+export * from './confirm/ConfirmBase';
+export * from './BrowserWarning';

package/src/dialog/message/Message.tsx

@@ -0,0 +1,140 @@
+/*
+ * Copyright ish group pty ltd. All rights reserved. https://www.ish.com.au
+ * No copying or use of this code is allowed without permission in writing from ish.
+ */
+
+import React from 'react';
+import clsx from 'clsx';
+import { withStyles } from '@mui/styles';
+import Snackbar from '@mui/material/Snackbar';
+import IconButton from '@mui/material/IconButton';
+import Alert from '@mui/material/Alert';
+import CloseIcon from '@mui/icons-material/Close';
+import { AnyArgFunction } from '@src/model';
+
+const styles = theme => ({
+  close: {
+    color: theme.palette.primary.contrastText,
+    width: theme.spacing(4),
+    height: theme.spacing(4),
+    padding: theme.spacing(0.5)
+  },
+  success: {
+    maxWidth: 'unset'
+  },
+  autoWidth: {
+    [theme.breakpoints.down('md')]: {
+      flexGrow: 'unset',
+      borderRadius: `${theme.shape.borderRadius}px`
+    }
+  },
+  autoWidthRoot: {
+    [theme.breakpoints.down('md')]: {
+      left: '24px',
+      right: 'auto',
+      bottom: '24px'
+    }
+  },
+  fullScreenMessage: {
+    maxHeight: 'calc(100vh - 90px)',
+    overflow: 'auto',
+    marginRight: theme.spacing(-2),
+    paddingRight: theme.spacing(2)
+  }
+});
+
+interface Props {
+  opened: boolean;
+  text: string;
+  clearMessage: AnyArgFunction;
+  isSuccess?: boolean;
+  persist?: boolean;
+  classes?: any;
+}
+
+class Message extends React.Component<Props, any> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      success: props.isSuccess,
+      text: props.text,
+      persist: props.persist
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.opened !== prevProps.opened) {
+      this.setState({
+        success: this.props.opened ? this.props.isSuccess : this.state.success,
+        text: this.props.opened ? this.props.text : this.state.text,
+        persist: this.props.opened ? this.props.persist : this.state.persist
+      });
+    }
+  }
+
+  handleClose = () => {
+    if (!this.state.persist) {
+      this.props.clearMessage();
+    }
+  };
+
+  render() {
+    const { classes, opened, clearMessage } = this.props;
+
+    const { success, text, persist } = this.state;
+
+    return (
+
+      <Snackbar
+        open={opened}
+        anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left'
+          }}
+        classes={{
+            root: classes.autoWidthRoot
+          }}
+        ContentProps={{
+            classes: {
+              root: clsx(classes.autoWidth, {
+                [classes.success]: success
+              }),
+              message: persist ? classes.fullScreenMessage : undefined
+            }
+          }}
+        ClickAwayListenerProps={{
+            onClickAway: this.handleClose
+          }}
+        autoHideDuration={persist ? null : 6000}
+        onClose={this.handleClose}
+        disableWindowBlurListener={persist}
+      >
+        <Alert
+          variant="filled"
+          severity={success ? 'success' : 'error'}
+          classes={{
+            message: 'text-pre-wrap',
+            standardError: 'errorBackgroundColor',
+            standardSuccess: 'successBackgroundColor'
+          }}
+          action={(
+            <IconButton
+              key="close"
+              aria-label="Close"
+              color="inherit"
+              className={classes.close}
+              onClick={clearMessage}
+            >
+              <CloseIcon />
+            </IconButton>
+)}
+        >
+          {text}
+        </Alert>
+      </Snackbar>
+    );
+  }
+}
+
+export default withStyles(styles as any)(Message);

package/src/documents/DocumentIconsChooser.tsx

@@ -0,0 +1,69 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+
+import * as React from 'react';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
+import clsx from 'clsx';
+import { FileTypeIcon } from './utils';
+
+const styles = theme =>
+  createStyles({
+    preview: {
+      backgroundSize: 'cover',
+      width: '36px',
+      height: '48px',
+      borderRadius: '4px',
+      marginRight: '16px',
+      color: 'rgba(0,0,0,.2)',
+      transition: 'color 200ms ease-in-out',
+      backgroundPosition: 'center'
+    },
+    previewNormal: {
+      width: '60px',
+      height: 'calc(100% - 16px)'
+    },
+    previewHoverIcon: {
+      '&:hover': {
+        color: theme.palette.primary.main
+      }
+    },
+    previewHoverImage: {
+      '&:hover': {
+        boxShadow: `0 0 1px 1px ${theme.palette.primary.main}`
+      }
+    }
+  });
+
+const DocumentIconsChooser = props => {
+  const {
+    type, thumbnail, classes, hovered = true, isHeader
+  } = props;
+
+  return thumbnail ? (
+    <div
+      style={{
+        backgroundImage: `url(data:image;base64,${thumbnail})`
+      }}
+      className={clsx(classes.preview, {
+        [classes.previewHoverImage]: hovered,
+        [classes.previewNormal]: isHeader
+      })}
+    />
+  ) : (
+    <div
+      className={clsx(classes.preview, {
+        [classes.previewHoverIcon]: hovered
+      })}
+    >
+      <FileTypeIcon mimeType={type} />
+    </div>
+  );
+};
+
+export default withStyles(styles)(DocumentIconsChooser);

package/src/documents/index.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+
+export * from './utils';
+export * from './DocumentIconsChooser';

package/src/documents/utils/index.tsx

@@ -0,0 +1,71 @@
+/*
+ * Copyright ish group pty ltd 2022.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export const formatDocumentSize = (size: number): string => {
+  if (size < Math.pow(1024, 2)) {
+    return `${Math.round(size / 1024)} kb`;
+  }
+  if (size < Math.pow(1024, 3)) {
+    return `${Math.round(size / 1024 / 1024)} Mb`;
+  }
+  if (size < Math.pow(1024, 4)) {
+    return `${Math.round(size / 1024 / 1024 / 1024)} Gb`;
+  }
+
+  return size.toString();
+};
+
+export const getDocumentContent = (file: File): Promise<string> => {
+  const reader = new FileReader();
+
+  return new Promise(resolve => {
+    reader.onload = () => resolve(reader.result);
+    reader.readAsDataURL(file);
+  }).then((result: any) => result.replace(`data:${file.type};base64,`, ''));
+
+};
+
+export const getDocumentThumbnail = (file: File): Promise<string> => {
+  if (file.type.match(/image/)) {
+    return getDocumentContent(file);
+  }
+
+  return new Promise(resolve => resolve(''));
+};
+
+const getIcon = type => {
+  switch (type) {
+    case 'image/tiff':
+    case 'image/bmp':
+    case 'image/png':
+    case 'image/gif':
+    case 'image/jpeg': 
+      return 'file-image';
+    case 'application/pdf': 
+      return 'file-pdf';
+    case 'application/msword': 
+      return 'file-word';
+    case 'application/vnd.ms-excel': 
+      return 'file-excel';
+    case 'application/vnd.ms-powerpoint':
+      return 'file-powerpoint';
+    case 'application/zip':
+      return 'file-archive';
+    case 'application/x-gzip':
+      return 'file-archive';
+    case 'application/txt':
+      return 'file-alt';
+    default:
+      return 'file';
+  }
+};
+
+export const FileTypeIcon = ({ mimeType }) => <FontAwesomeIcon icon={getIcon(mimeType)} fixedWidth className="w-100 h-100" />;