ish-ui 1.0.2

package/src/styles/GlobalStylesProvider.tsx

@@ -0,0 +1,520 @@
+/*
+ * 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 * as React from 'react';
+import { alpha, darken } from '@mui/material/styles';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
+import { AppTheme } from '@src/model';
+import InterRomanVar from '@assets/fonts/inter/Inter-Roman.var.woff2';
+import InterItalicVar from '@assets/fonts/inter/Inter-Italic.var.woff2';
+import { animateStyles } from './animateStyles';
+import { bootstrap } from './bootstrap';
+import getOS from '@src/utils/DOM/getOS';
+
+const customOSScrollbars = getOS() === 'Windows'
+    ? {
+        '::-webkit-scrollbar': {
+          width: 8,
+          height: 8,
+          backgroundColor: 'rgba(0,0,0,0)',
+          '-webkit-border-radius': '100px'
+        },
+
+        '::-webkit-scrollbar:hover': {
+          backgroundColor: 'rgba(0, 0, 0, 0.09)'
+        },
+
+        '::-webkit-scrollbar-thumb': {
+          background: 'rgba(0,0,0,0.5)',
+          '-webkit-border-radius': '100px'
+        },
+
+        '::-webkit-scrollbar-thumb:active': {
+          background: 'rgba(0,0,0,0.61)',
+          '-webkit-border-radius': '100px'
+        },
+
+        '::-webkit-scrollbar-thumb:vertical': {
+          minHeight: 10
+        },
+
+        '::-webkit-scrollbar-thumb:horizontal': {
+          minWidth: 10
+        }
+      }
+    : {};
+
+const globalStyles = (theme: AppTheme) =>
+  createStyles({
+    '@global': {
+      ...theme.palette.mode === 'dark' ? { 'a': { color: '#90caf9' } } : {},
+        '@font-face': [
+        {
+          fontFamily: 'Inter',
+          fontWeight: '100 900',
+          fontDisplay: 'swap',
+          fontStyle: 'normal',
+          fallbacks: [
+            { src: `local('Inter'), url(${InterRomanVar}) format("woff2")` }
+          ]
+        },
+        {
+          fontFamily: 'Inter',
+          fontWeight: '100 900',
+          fontDisplay: 'swap',
+          fontStyle: 'italic',
+          fallbacks: [
+            { src: `local('Inter'), url(${InterItalicVar}) format("woff2")` }
+          ]
+        }
+      ],
+      '.appFrame': {
+        position: 'relative',
+        height: '100vh',
+        background: theme.palette.background.default,
+        flex: 1,
+        maxWidth: '100%'
+      },
+      '.activeAvatar': {
+        color: theme.palette.primary.contrastText,
+        backgroundColor: theme.palette.primary.main,
+      },
+      '.root': {
+        position: 'relative',
+        display: 'flex',
+        width: '100%',
+        height: '100vh',
+        overflowY: 'hidden'
+      },
+      '.container': {
+        display: 'flex',
+        flexWrap: 'wrap'
+      },
+      '.codeArea': {
+        borderRadius: theme.shape.borderRadius,
+        background: theme.table.contrastRow.main,
+        padding: theme.spacing(1),
+        border: 'none',
+        outline: 'none',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        fontSize: 'inherit',
+        fontFamily: 'inherit',
+        color: 'inherit',
+        width: '100%'
+      },
+      '.appBarContainer': {
+        marginTop: theme.spacing(8),
+        height: `calc(100vh - ${theme.spacing(8)})`,
+        overflowY: 'auto'
+      },
+      '.card': {
+        marginBottom: '20px',
+        padding: '20px',
+        minWidth: '800px'
+      },
+      '.saveButtonTableOffset': {
+        marginBottom: theme.spacing(8)
+      },
+      '.editViewHeadingOffset': {
+        marginTop: `-${theme.spacing(2)}`
+      },
+      '.cardBorders': {
+        borderRadius: theme.spacing(1),
+        border: '2px solid',
+        borderColor: alpha(theme.palette.text.disabled, 0.1),
+      },
+      '.heading': {
+        textTransform: 'uppercase',
+        fontFamily: theme.typography.fontFamily,
+        fontSize: theme.typography.fontSize,
+        fontWeight: 'bold' as const,
+        color: theme.heading.color,
+        lineHeight: 1.22
+      },
+      '.secondaryHeading': {
+        textTransform: 'uppercase',
+        fontFamily: theme.typography.fontFamily,
+        fontSize: theme.typography.fontSize - 2,
+        fontWeight: 600,
+        color: theme.heading.color,
+        lineHeight: 1.45
+      },
+      '.normalHeading': {
+        fontFamily: theme.typography.fontFamily,
+        fontSize: theme.typography.fontSize,
+        fontWeight: 600,
+        color: theme.heading.color,
+        lineHeight: 1.45
+      },
+      '.headingHover': {
+        cursor: 'pointer',
+        willChange: 'color',
+        '&:hover': {
+          color: darken(theme.heading.color as any, 0.4),
+        }
+      },
+      '.checkbox': {
+        height: '35px',
+        display: 'block',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+      },
+      '.checkboxWidth': {
+        width: '35px'
+      },
+      '.placeholderContent': {
+        color: theme.palette.divider,
+        fill: theme.palette.divider,
+        fontWeight: 400,
+      },
+      '.link': {
+        color: 'inherit',
+        textDecoration: 'none'
+      },
+      '.listItemPadding': {
+        padding: theme.spacing(0.75, 3),
+        minHeight: 'unset'
+      },
+      '.appBarFab': {
+        top: '31px',
+        backgroundColor: 'black'
+      },
+      '.payslipButton': {
+        '&:hover': {
+          backgroundColor: darken(theme.palette.primary.main, 0.1)
+        }
+      },
+      '.moreOptions': {
+        boxShadow: theme.shadows[0],
+        color: theme.palette.primary.contrastText,
+        backgroundColor: theme.palette.primary.main,
+        '&:hover': {
+          color: theme.palette.primary.contrastText,
+          backgroundColor: alpha(theme.palette.primary.main, 0.9)
+        },
+        margin: theme.spacing(0, 1)
+      },
+      '.moreOptionsDisabled': {
+        color: `${theme.palette.grey[500]} !important`,
+        backgroundColor: `${theme.palette.grey[300]} !important`
+      },
+      '.saveButtonEditView': {
+        whiteSpace: 'nowrap',
+        boxShadow: theme.shadows[2],
+        '&:hover': {
+          backgroundColor: darken(theme.palette.primary.main, 0.1)
+        },
+        margin: theme.spacing(1)
+      },
+      '.saveButtonEditViewDisabled': {
+        color: `${theme.palette.grey[500]} !important`,
+        backgroundColor: `${theme.palette.grey[300]} !important`
+      },
+      '.integrationsButton': {
+        '&:hover': {
+          backgroundColor: darken(theme.palette.primary.main, 0.1)
+        }
+      },
+      '.licencesUpgradeButton': {
+        '&:hover': {
+          backgroundColor: darken(theme.palette.primary.main, 0.1)
+        }
+      },
+      '.closeAppBarButton': {
+        color: theme.appBarButton.close.color
+      },
+      '.whiteAppBarButton': {
+        color: theme.palette.primary.main,
+        backgroundColor: theme.palette.primary.contrastText,
+        marginLeft: theme.spacing(1),
+        '&:hover': {
+          color: theme.palette.primary.main,
+          backgroundColor: alpha(theme.palette.primary.contrastText, 0.9)
+        }
+      },
+      '.whiteAppBarButtonDisabled': {
+        color: `${theme.palette.primary.main} !important`,
+        backgroundColor: `${alpha(theme.palette.primary.contrastText, 0.3)} !important`
+      },
+      '.avetmissButton': {
+        '&:hover': {
+          backgroundColor: darken(theme.palette.primary.main, 0.1),
+          color: theme.palette.primary.contrastText
+        }
+      },
+      '.hoverGrayIcon': {
+        '&:hover': {
+          fill: theme.palette.action.hover
+        }
+      },
+      '.dndActionIconButton': {
+        '&:hover .dndActionIcon': {
+          fill: theme.palette.action.active
+        }
+      },
+      '.dndActionIcon': {
+        fill: theme.palette.action.focus,
+        '&:hover': {
+          fill: theme.palette.action.active
+        }
+      },
+      '.fitSmallWidth': {
+        [theme.breakpoints.down('xs')]: {
+          maxWidth: 'calc(100% - 48px)'
+        }
+      },
+      '.inputAdornmentButton': {
+        width: '16px',
+        height: '16px',
+        bottom: '1px',
+        padding: 0,
+        '&:hover .placeholderContent': {
+          fill: theme.palette.primary.main,
+          color: theme.palette.primary.main,
+          fontWeight: 400,
+        }
+      },
+      '.inputAdornmentIcon': {
+        fontSize: theme.spacing(2),
+      },
+      '.switchLabel': {
+        marginRight: 'auto',
+        paddingRight: theme.spacing(2),
+        paddingTop: '1px',
+        fontSize: '14px'
+      },
+      '.switchWrapper': {
+        flexDirection: 'row-reverse',
+        justifyContent: 'space-between',
+        marginLeft: 0
+      },
+      '.switchLabelMargin': {
+        marginRight: '100px'
+      },
+      '.addButtonColor': {
+        color: theme.addButtonColor.color
+      },
+      '.labelOffset': {
+        marginLeft: '-14px'
+      },
+      '.listEditViewOffset': {
+        paddingRight: theme.spacing(8)
+      },
+      '.inlineIcon': {
+        marginTop: '2px',
+        fontSize: '0.875rem',
+        marginLeft: '0.2rem'
+      },
+      '.editInPlaceIcon': {
+        // visibility: "hidden",
+        fontSize: '14px',
+        color: theme.palette.divider,
+        verticalAlign: 'middle',
+      },
+      '.coloredHover': {
+        '&:hover': {
+          color: theme.palette.primary.main
+        }
+      },
+      '.submitButton': {
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.primary.contrastText
+      },
+      '.documentsSubmitButton': {
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.primary.contrastText,
+        '&:hover': {
+          backgroundColor: darken(theme.palette.primary.main, 0.1),
+          color: theme.palette.primary.contrastText
+        }
+      },
+      '.errorColor': {
+        color: theme.palette.error.light
+      },
+      '.errorBackgroundColor': {
+        backgroundColor: theme.palette.error.light
+      },
+      '.errorColorFade-0-2': {
+        color: alpha(theme.palette.error.light, 0.2)
+      },
+      '.errorContrastColor': {
+        color: theme.palette.error.contrastText
+      },
+      '.primaryColor': {
+        color: theme.palette.primary.main
+      },
+      '.secondaryColor': {
+        color: theme.palette.secondary.main
+      },
+      '.warningColor': {
+        color: theme.palette.warning.light
+      },
+      '.successColor': {
+        color: theme.palette.success.light
+      },
+      '.successBackgroundColor': {
+        backgroundColor: theme.palette.success.light
+      },
+      '.primaryContarstText': {
+        color: theme.palette.primary.contrastText
+      },
+      '.primaryContarstHover': {
+        '&:hover': {
+          color: theme.palette.primary.contrastText
+        }
+      },
+      '.primaryContarstUnderline': {
+        '&:after': {
+          borderBottomColor: theme.palette.primary.contrastText
+        }
+      },
+      '.defaultBackgroundColor': {
+        backgroundColor: theme.appBar.header.background
+      },
+      '.paperBackgroundColor': {
+        background: theme.palette.background.paper
+      },
+      '.paperTextColor': {
+        color: theme.palette.background.paper
+      },
+      '.fullHeightWithoutAppBar': {
+        height: 'calc(100vh - 64px)'
+      },
+      '.linkDecoration': {
+        cursor: 'pointer',
+        '&:hover': {
+          textDecoration: 'underline',
+          color: theme.palette.secondary.main
+        }
+      },
+      '.graySmallFont12': {
+        color: theme.statistics.rightColumn.color,
+        fontSize: '12px'
+      },
+      '.smallIconButton': {
+        width: theme.spacing(4),
+        height: theme.spacing(4),
+        padding: theme.spacing(0.5)
+      },
+      '.lightGrayIconButton': {
+        color: alpha(theme.palette.text.primary, 0.2),
+        fontSize: '18px',
+        width: theme.spacing(4),
+        height: theme.spacing(4),
+        padding: theme.spacing(1)
+      },
+      '.lightGrayColor': {
+        color: alpha(theme.palette.text.primary, 0.2),
+      },
+      '.noRecordsMessage': {
+        color: theme.palette.grey[400],
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        display: 'flex'
+      },
+      '.textPrimaryColor': {
+        color: theme.palette.text.primary
+      },
+      '.textSecondaryColor': {
+        color: theme.palette.text.secondary
+      },
+      '.textGreyColor700': {
+        color: theme.palette.text.grey
+      },
+      '.iconColor': {
+        color: theme.palette.text.secondary,
+        marginLeft: theme.spacing(1)
+      },
+      '.money': {
+        fontFeatureSettings: '"tnum", "zero"'
+      },
+      '.closeAndClearButton': {
+        padding: theme.spacing(1)
+      },
+      '.appHeaderFontSize': {
+        fontSize: '1.125rem'
+      },
+      '.backgroundText': {
+        fontSize: theme.spacing(10),
+        textTransform: 'uppercase',
+        position: 'absolute',
+        top: '210px',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 0,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        transform: 'rotate(-35deg)',
+        fontWeight: theme.typography.fontWeightBold,
+        userSelect: 'none',
+        height: '200px'
+      },
+      '.summaryTopBorder': {
+        borderTop: `1px solid ${theme.palette.text.primary}`
+      },
+      '.selectedItemArrow': {
+        [theme.breakpoints.up('md')]: {
+          '&::after, &::before': {
+            content: '""',
+            position: 'absolute',
+            top: '50%'
+          },
+          '&::after': {
+            borderTop: '25px solid transparent',
+            borderRight: `25px solid ${theme.palette.background.default}`,
+            borderBottom: '25px solid transparent',
+            transform: 'translateY(-50%)',
+            right: -33,
+            zIndex: 1
+          },
+          '&::before': {
+            borderTop: `1px solid ${theme.palette.divider}`,
+            borderRight: '1px solid transparent',
+            borderLeft: `1px solid ${theme.palette.divider}`,
+            transform: 'translateY(-50%) rotate(-45deg)',
+            right: -50,
+            zIndex: 2,
+            padding: 17
+          }
+        }
+      },
+      '.selectItmeIcon': {
+        fontSize: '16px',
+        position: 'relative',
+        bottom: '-3px'
+      },
+      '.hoverIconContainer': {
+        '&:hover .hoverIcon': {
+          color: 'inherit',
+          visibility: 'visible',
+        }
+      },
+      '.gridTemplateColumns-1fr': {
+        gridTemplateColumns: 'minmax(0, 1fr) auto'
+      },
+      '.gridAutoFlow-column': {
+        gridAutoFlow: 'column'
+      },
+      '.dotsBackgroundImage': {
+        backgroundImage: `radial-gradient(${alpha(theme.palette.primary.main, 0.5)} 1.5px, transparent 1.5px),radial-gradient(${alpha(theme.palette.primary.main, 0.5)} 1.5px, transparent 1.5px)`,
+        backgroundPosition: '5px 4px, 20px 18px',
+        backgroundSize: '30px 30px',
+      },
+      ...bootstrap(theme),
+      ...customOSScrollbars,
+      ...animateStyles
+    }
+  });
+
+const GlobalStylesProvider = props => <div>{props.children}</div>;
+
+export default withStyles(globalStyles, { index: 10000 })(GlobalStylesProvider);

package/src/styles/StylesProviderCustom.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { StylesProvider, createGenerateClassName } from '@mui/styles';
+
+const generateClassName = createGenerateClassName({
+  disableGlobal: true
+});
+
+export default props => <StylesProvider generateClassName={generateClassName}>{props.children}</StylesProvider>;

package/src/styles/animateStyles.ts

@@ -0,0 +1,94 @@
+/*
+ * 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 { transform } from './mixins/common';
+import { keyframes } from './mixins/keyframes';
+import { prefixer } from './mixins/prefixer';
+
+// const duration = "AnimationDuration";
+
+export const animateStyles = {
+  '.animated': {
+    ...prefixer('animationDuration', '1s', ['webkit', 'spec']),
+    ...prefixer('animationFillMode', 'both', ['webkit', 'spec'])
+  },
+  ...keyframes('bounceInRight', {
+    'from, 60%, 75%, 90%, to': {
+      ...prefixer('animationTimingFunction', 'cubic-bezier(0.215, 0.61, 0.355, 1)', ['webkit', 'spec'])
+    },
+    from: {
+      opacity: 0,
+      ...transform('translate3d(3000px, 0, 0)')
+    },
+    '60%': {
+      opacity: 1,
+      ...transform('translate3d(-25px, 0, 0)')
+    },
+    '75%': {
+      ...transform('translate3d(10px, 0, 0)')
+    },
+    '90%': {
+      ...transform('translate3d(-5px, 0, 0)')
+    },
+    to: {
+      ...transform('translate3d(0, 0, 0)')
+    }
+  }),
+  ...keyframes('bounceOutLeft', {
+    '20%': {
+      opacity: 1,
+      ...transform('translate3d(20px, 0, 0)')
+    },
+    to: {
+      opacity: 0,
+      ...transform('translate3d(-2000px, 0, 0)')
+    }
+  }),
+  ...keyframes('bounceOutLeftCustom', {
+    from: {
+      ...transform('translate3d(-80px, 0, 0)'),
+      ...prefixer('animationDuration', '0.5s', ['webkit', 'spec'])
+    },
+    to: {
+      ...transform('translate3d(0px, 0, 0)'),
+      ...prefixer('animationDuration', '0s', ['webkit', 'spec'])
+    }
+  }),
+  ...keyframes('bounceOutRightCustom', {
+    from: {
+      ...transform('translate3d(80px, 0, 0)'),
+      ...prefixer('animationDuration', '0.5s', ['webkit', 'spec'])
+    },
+    to: {
+      ...transform('translate3d(0px, 0, 0)'),
+      ...prefixer('animationDuration', '0s', ['webkit', 'spec'])
+    }
+  }),
+  ...keyframes('rotateOutCustom', {
+    from: {
+      ...prefixer('transform-origin', 'center', ['webkit', 'spec'])
+    },
+    to: {
+      ...transform('rotate3d(0, 0, 1, 720deg)'),
+      ...prefixer('transform-origin', 'center', ['webkit', 'spec'])
+    }
+  }, {
+    ...prefixer('animationDuration', '2.5s', ['webkit', 'spec'])
+  }),
+  ...keyframes('shake', {
+    '10%, 90%': {
+      ...transform('translate3d(-2px, 0, 0)')
+    },
+    '20%, 80%': {
+      ...transform('translate3d(4px, 0, 0)')
+    },
+    '30%, 50%, 70%': {
+      ...transform('translate3d(-6px, 0, 0)')
+    },
+    '40%, 60%': {
+      ...transform('translate3d(6px, 0, 0)')
+    },
+  })
+};