ish-ui 1.0.2 → 1.0.4

package/.eslintrc.json

@@ -1,39 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es6": true,
-    "node": true
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:import/errors",
-    "plugin:import/warnings"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "settings": {
-    "import/resolver": {
-      "node": {
-        "extensions": [".js", ".jsx", ".ts", ".tsx"]
-      },
-      "alias": {
-        "map": [
-          ["@src", "./src"],
-          ["@assets", "./assets"]
-        ],
-        "extensions": [".js", ".jsx", ".ts", ".tsx"]
-      }
-    },
-    "react": {
-      "version": "latest"
-    }
-  },
-  "rules": {
-    "quotes": ["error", "single"],
-    "react/prop-types": "off",
-    "@typescript-eslint/no-var-requires": "off",
-    "@typescript-eslint/no-explicit-any": "off"
-  }
-}

package/.gitattributes

@@ -1,3 +0,0 @@
-*.scss linguist-detectable=false
-*.sass linguist-detectable=false
-*.js linguist-detectable=false

package/.github/workflows/release-package.yml

@@ -1,33 +0,0 @@
-name: Node.js Package
-
-on:
-  release:
-    types: [created]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-      - run: npm ci --legacy-peer-deps
-      - run: npm test
-
-  publish-gpr:
-    needs: build
-    runs-on: ubuntu-latest
-    permissions:
-      packages: write
-      contents: read
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          registry-url: https://registry.npmjs.org/
-      - run: npm ci --legacy-peer-deps
-      - run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/.prettierrc

@@ -1,5 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "all",
-  "jsxSingleQuote": true
-}

package/src/appBar/AppBarHelpMenu.tsx

@@ -1,139 +0,0 @@
-import * as React from 'react';
-import { withStyles, createStyles } from '@mui/styles';
-import clsx from 'clsx';
-import HelpOutline from '@mui/icons-material/HelpOutline';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import Tooltip from '@mui/material/Tooltip';
-import { format as formatDate } from 'date-fns';
-import { III_DD_MMM_YYYY_HH_MM_SPECIAL, openInternalLink } from '@src/utils';
-
-const styles = theme =>
-  createStyles({
-    button: {
-      color: theme.appBarButton.helpMenu.color,
-    },
-    info: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'baseline',
-      padding: theme.spacing(1, 2, 0, 2)
-    },
-    divider: {
-      marginTop: theme.spacing(2),
-      borderTop: `1px solid ${theme.palette.divider}`
-    }
-  });
-
-interface Props {
-  classes?: any;
-  created?: any;
-  modified?: any;
-  manualUrl?: string;
-  auditsUrl?: string;
-  iconClasses?: any;
-}
-
-class AppBarHelpMenu extends React.Component<Props, any> {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      anchorEl: null
-    };
-  }
-
-  handleAddFieldClick = e => {
-    this.setState({ anchorEl: e.currentTarget });
-  };
-
-  handleClose = () => {
-    this.setState({ anchorEl: null });
-  };
-
-  openManual = () => {
-    window.open(this.props.manualUrl);
-    this.handleClose();
-  };
-
-  openAudits = () => {
-    openInternalLink('/' + this.props.auditsUrl);
-    this.handleClose();
-  };
-
-  render() {
-    const { anchorEl } = this.state;
-    const {
-      classes, created, modified, iconClasses, auditsUrl
-    } = this.props;
-
-    return (
-      <>
-        <Menu
-          id="form-help-menu"
-          anchorEl={anchorEl}
-          open={Boolean(anchorEl)}
-          onClose={this.handleClose}
-          marginThreshold={16}
-          transformOrigin={{
-            vertical: 'center',
-            horizontal: 'right'
-          }}
-        >
-          {created && (
-            <MenuItem disabled className={classes.info}>
-              <Typography variant="caption">Created</Typography>
-              <Typography variant="subtitle1">
-                {typeof created === 'object' && isFinite(created)
-                  ? formatDate(created, III_DD_MMM_YYYY_HH_MM_SPECIAL)
-                  : '---- ---- ---- ---- ----'}
-              </Typography>
-            </MenuItem>
-          )}
-
-          {modified && (
-            <MenuItem disabled className={classes.info}>
-              <Typography variant="caption">Modified</Typography>
-              <Typography variant="subtitle1">
-                {typeof modified === 'object' && isFinite(modified)
-                  ? formatDate(modified, III_DD_MMM_YYYY_HH_MM_SPECIAL)
-                  : '---- ---- ---- ---- ----'}
-              </Typography>
-            </MenuItem>
-          )}
-
-          <MenuItem className={created || modified ? classes.divider : undefined} onClick={this.openManual}>
-            Open manual
-          </MenuItem>
-          {auditsUrl && (
-            <MenuItem onClick={this.openAudits}>
-              View audit trail
-            </MenuItem>
-          )}
-        </Menu>
-
-        <Tooltip title="Additional information">
-          <div>
-            <IconButton
-              type="button"
-              aria-owns={anchorEl ? 'form-help-menu' : null}
-              aria-haspopup="true"
-              onClick={this.handleAddFieldClick}
-              size="large"
-              className={clsx({
-                [classes.button]: !iconClasses,
-                [iconClasses]: !!iconClasses
-              })}
-            >
-              <HelpOutline />
-            </IconButton>
-          </div>
-        </Tooltip>
-      </>
-    );
-  }
-}
-
-export default withStyles(styles)(AppBarHelpMenu);

package/src/buttons/AddButton.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
-import IconButton, { IconButtonProps , IconButtonPropsColorOverrides, IconButtonPropsSizeOverrides } from '@mui/material/IconButton';
-import { OverridableStringUnion } from '@mui/types';
-
-interface Props extends Partial<IconButtonProps> {
-  onClick?: any;
-  className?: any;
-  disabled?: boolean;
-  iconClassName?: any;
-  iconFontSize?: 'inherit' | 'large' | 'medium' | 'small';
-  color?: OverridableStringUnion<
-    'inherit' | 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
-    IconButtonPropsColorOverrides
-    >,
-  size?: OverridableStringUnion<'small' | 'medium' | 'large', IconButtonPropsSizeOverrides>;
-}
-
-const AddButton = React.forwardRef<any, Props>((props, ref) => {
-  const {
-   onClick, className, disabled, iconClassName, iconFontSize, color, size
-  } = props;
-  return (
-    <IconButton color={color} size={size} onClick={onClick} className={className} disabled={disabled} ref={ref}>
-      <AddCircleOutlineOutlinedIcon className={iconClassName || 'addButtonColor'} fontSize={iconFontSize || 'small'} />
-    </IconButton>
-  );
-});
-
-export default AddButton;

package/src/buttons/TimetableButton.tsx

@@ -1,19 +0,0 @@
-/*
- * 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 OpenInNew from '@mui/icons-material/OpenInNew';
-import IconButton from '@mui/material/IconButton';
-
-const TimetableButton: React.FC<any> = ({ title = 'Timetable', onClick }) => (
-  <div className="centeredFlex">
-    <div className="heading">{title}</div>
-    <IconButton size="small" color="primary" onClick={onClick}>
-      <OpenInNew fontSize="inherit" />
-    </IconButton>
-  </div>
-);
-
-export default TimetableButton;

package/src/colorPicker/ColorPicker.tsx

@@ -1,223 +0,0 @@
-/*
- * 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/dialog/BrowserWarning.tsx

@@ -1,24 +0,0 @@
-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

@@ -1,59 +0,0 @@
-/*
- * 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;