ish-ui 1.0.2

package/src/styles/bootstrap.ts

@@ -0,0 +1,503 @@
+/*
+ * 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 { alpha } from '@mui/material/styles';
+import { AppTheme } from '@src/model';
+import { prefixer } from './mixins/prefixer';
+
+export const bootstrap = (theme: AppTheme) => ({
+  strong: {
+    fontWeight: 'bold'
+  },
+  '.fontWeight-normal': {
+    fontWeight: 'normal'
+  },
+  '.fontWeight600': {
+    fontWeight: 600
+  },
+  '.text-bold': {
+    fontWeight: theme.typography.fontWeightBold
+  },
+  '.text-bolder': {
+    fontWeight: 'bolder'
+  },
+  '.fs2': {
+    fontSize: theme.spacing(2)
+  },
+  '.fs3': {
+    fontSize: theme.spacing(3)
+  },
+  '.fs4': {
+    fontSize: theme.spacing(4)
+  },
+  '.fs8': {
+    fontSize: theme.spacing(8)
+  },
+  '.fs10': {
+    fontSize: theme.spacing(10)
+  },
+  '.fs19': {
+    fontSize: theme.spacing(19)
+  },
+  '.fw300': {
+    fontWeight: 300
+  },
+  '.fsInherit': {
+    fontSize: 'inherit'
+  },
+  '.relative': {
+    position: 'relative'
+  },
+  '.absolute': {
+    position: 'absolute'
+  },
+  '.fixed': {
+    position: 'fixed'
+  },
+  '.sticky': {
+    position: 'sticky'
+  },
+  '.left-0': {
+    left: 0
+  },
+  '.top-0': {
+    top: 0
+  },
+  '.right-0': {
+    right: 0
+  },
+  '.bottom-0': {
+    bottom: 0
+  },
+  '.pt-10': {
+    paddingTop: theme.spacing(10)
+  },
+  '.pr-6': {
+    paddingRight: theme.spacing(6)
+  },
+  '.p-4': {
+    padding: theme.spacing(4)
+  },
+  '.pr-4': {
+    paddingRight: theme.spacing(4)
+  },
+  '.p-3': {
+    padding: theme.spacing(3)
+  },
+  '.pt-3': {
+    paddingTop: theme.spacing(3)
+  },
+  '.pl-3': {
+    paddingLeft: theme.spacing(3)
+  },
+  '.pr-3': {
+    paddingRight: theme.spacing(3)
+  },
+  '.pb-3': {
+    paddingBottom: theme.spacing(3)
+  },
+  '.p-2': {
+    padding: theme.spacing(2)
+  },
+  '.pl-2': {
+    paddingLeft: theme.spacing(2)
+  },
+  '.pr-2': {
+    paddingRight: theme.spacing(2)
+  },
+  '.pb-2': {
+    paddingBottom: theme.spacing(2)
+  },
+  '.pt-2': {
+    paddingTop: theme.spacing(2)
+  },
+  '.p-1': {
+    padding: theme.spacing(1)
+  },
+  '.pt-1': {
+    paddingTop: theme.spacing(1)
+  },
+  '.pb-1': {
+    paddingBottom: theme.spacing(1)
+  },
+  '.pl-1': {
+    paddingLeft: theme.spacing(1)
+  },
+  '.pr-1': {
+    paddingRight: theme.spacing(1)
+  },
+  '.p-0-5': {
+    padding: theme.spacing(0.5)
+  },
+  '.pl-0-5': {
+    paddingLeft: theme.spacing(0.5)
+  },
+  '.pt-0-5': {
+    paddingTop: theme.spacing(0.5)
+  },
+  '.pr-0-5': {
+    paddingRight: theme.spacing(0.5)
+  },
+  '.pb-0-5': {
+    paddingBottom: theme.spacing(0.5)
+  },
+  '.p-0': {
+    padding: 0
+  },
+  '.pl-0': {
+    paddingLeft: 0
+  },
+  '.pt-0': {
+    paddingTop: 0
+  },
+  '.pr-0': {
+    paddingRight: 0
+  },
+  '.pb-0': {
+    paddingBottom: 0
+  },
+  '.m-3': {
+    margin: theme.spacing(3)
+  },
+  '.mt-5': {
+    marginTop: theme.spacing(5)
+  },
+  '.mt-4': {
+    marginTop: theme.spacing(4)
+  },
+  '.mt-3': {
+    marginTop: theme.spacing(3)
+  },
+  '.ml-3': {
+    marginLeft: theme.spacing(3)
+  },
+  '.mr-5': {
+    marginRight: theme.spacing(5)
+  },
+  '.mr-4': {
+    marginRight: theme.spacing(4)
+  },
+  '.mr-3': {
+    marginRight: theme.spacing(3)
+  },
+  '.mb-5': {
+    marginBottom: theme.spacing(5)
+  },
+  '.mb-4': {
+    marginBottom: theme.spacing(4)
+  },
+  '.mb-3': {
+    marginBottom: theme.spacing(3)
+  },
+  '.m-2': {
+    margin: theme.spacing(2)
+  },
+  '.mt-2': {
+    marginTop: theme.spacing(2)
+  },
+  '.ml-2': {
+    marginLeft: theme.spacing(2)
+  },
+  '.mr-2': {
+    marginRight: theme.spacing(2)
+  },
+  '.mb-2': {
+    marginBottom: theme.spacing(2)
+  },
+  '.m-1': {
+    margin: theme.spacing(1)
+  },
+  '.mt-1': {
+    marginTop: theme.spacing(1)
+  },
+  '.ml-1': {
+    marginLeft: theme.spacing(1)
+  },
+  '.mr-1': {
+    marginRight: theme.spacing(1)
+  },
+  '.mr-auto': {
+    marginRight: 'auto'
+  },
+  '.ml-auto': {
+    marginLeft: 'auto'
+  },
+  '.mb-1': {
+    marginBottom: theme.spacing(1)
+  },
+  '.mt-0-5': {
+    marginTop: theme.spacing(0.5)
+  },
+  '.mr-0-5': {
+    marginRight: theme.spacing(0.5)
+  },
+  '.ml-0-5': {
+    marginLeft: theme.spacing(0.5)
+  },
+  '.mb-0-5': {
+    marginBottom: theme.spacing(0.5)
+  },
+  '.m-0': {
+    margin: 0
+  },
+  '.mt-auto': {
+    marginTop: 'auto'
+  },
+  '.mb-auto': {
+    marginBottom: 'auto'
+  },
+  '.ml-0': {
+    marginLeft: 0
+  },
+  '.mt-0': {
+    marginTop: 0
+  },
+  '.mr-0': {
+    marginRight: 0
+  },
+  '.mb-0': {
+    marginBottom: 0
+  },
+  '.text-uppercase': {
+    textTransform: 'uppercase'
+  },
+  '.overflow-visible': {
+    overflow: 'visible'
+  },
+  '.overflow-hidden': {
+    overflow: 'hidden'
+  },
+  '.overflow-x-hidden': {
+    overflowX: 'hidden'
+  },
+  '.overflow-y-auto': {
+    overflowY: 'auto'
+  },
+  '.overflow-auto': {
+    overflow: 'auto'
+  },
+  '.overflow-initial': {
+    overflow: 'initial'
+  },
+  '.d-block': {
+    display: 'block'
+  },
+  '.d-inline': {
+    display: 'inline'
+  },
+  '.d-inline-block': {
+    display: 'inline-block'
+  },
+  '.d-grid': {
+    display: 'grid'
+  },
+  '.d-flex': {
+    display: 'flex'
+  },
+  '.d-inline-flex': {
+    display: 'inline-flex'
+  },
+  '.flex-row': {
+    display: 'flex',
+    flexDirection: 'row'
+  },
+  '.flex-column': {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  '.centeredFlex': {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  '.d-flex-start': {
+    display: 'flex',
+    alignItems: 'flex-start'
+  },
+  '.d-inline-flex-center': {
+    display: 'inline-flex',
+    alignItems: 'center'
+  },
+  '.d-none': {
+    display: 'none'
+  },
+  '.flex-fill': {
+    flex: 1
+  },
+  '.flex-nowrap': {
+    flexWrap: 'nowrap'
+  },
+  '.flex-wrap': {
+    flexWrap: 'wrap'
+  },
+  '.align-items-baseline': {
+    alignItems: 'baseline'
+  },
+  '.align-items-center': {
+    alignItems: 'center'
+  },
+  '.align-items-start': {
+    alignItems: 'flex-start'
+  },
+  '.align-items-end': {
+    alignItems: 'flex-end'
+  },
+  '.align-content-between': {
+    alignContent: 'space-between'
+  },
+  '.align-content-start': {
+    alignContent: 'flex-start'
+  },
+  '.justify-content-end': {
+    justifyContent: 'flex-end'
+  },
+  '.justify-content-start': {
+    justifyContent: 'flex-start'
+  },
+  '.justify-content-center': {
+    justifyContent: 'center'
+  },
+  '.justify-content-space-between': {
+    justifyContent: 'space-between'
+  },
+  '.outline-none': {
+    outline: 'none'
+  },
+  '.disabled': {
+    opacity: theme.palette.action.disabledOpacity,
+    pointerEvents: 'none'
+  },
+  '.text-op065': {
+    color: alpha(theme.palette.text.primary, 0.65),
+  },
+  '.text-op05': {
+    color: alpha(theme.palette.text.primary, 0.5),
+  },
+  '.invisible': {
+    visibility: 'hidden'
+  },
+  '.visible': {
+    visibility: 'visible'
+  },
+  '.text-left': {
+    textAlign: 'left'
+  },
+  '.text-center': {
+    textAlign: 'center'
+  },
+  '.text-end': {
+    textAlign: 'end'
+  },
+  '.text-disabled': {
+    color: theme.palette.text.disabled
+  },
+  '.cursor-grab': {
+    cursor: 'grab'
+  },
+  '.cursor-pointer': {
+    cursor: 'pointer'
+  },
+  '.cursor-text': {
+    cursor: 'text'
+  },
+  '.pointer-events-none': {
+    pointerEvents: 'none'
+  },
+  '.text-truncate': {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  },
+  '.text-nowrap': {
+    whiteSpace: 'nowrap'
+  },
+  '.text-pre-wrap': {
+    whiteSpace: 'pre-wrap'
+  },
+  '.text-pre-line': {
+    whiteSpace: 'pre-line'
+  },
+  '.text-pre': {
+    whiteSpace: 'pre'
+  },
+  '.text-break-spaces': {
+    whiteSpace: 'break-spaces'
+  },
+  '.word-break-all': {
+    wordBreak: 'break-all'
+  },
+  '.h-100': {
+    height: '100%'
+  },
+  '.w-100': {
+    width: '100%'
+  },
+  '.mw-100': {
+    maxWidth: '100%'
+  },
+  '.w-50': {
+    width: '50%'
+  },
+  '.mw-800': {
+    maxWidth: theme.spacing(100)
+  },
+  '.mw-500': {
+    maxWidth: theme.spacing(62.5)
+  },
+  '.mw-600': {
+    maxWidth: theme.spacing(75)
+  },
+  '.mw-400': {
+    maxWidth: theme.spacing(50)
+  },
+  '.text-reset': {
+    color: 'inherit'
+  },
+  '.text-white': {
+    color: '#fff'
+  },
+  '.zIndex1401': {
+    zIndex: theme.zIndex.snackbar + 1
+  },
+  '.zIndex9': {
+    zIndex: 9
+  },
+  '.zIndex2': {
+    zIndex: 2
+  },
+  '.zIndex1': {
+    zIndex: 1
+  },
+  '.zIndex0': {
+    zIndex: 0
+  },
+  '.box-shadow-none': {
+    boxShadow: 'none'
+  },
+  '.user-select-none': {
+    WebkitTouchCallout: 'none',
+    KhtmlUserSelect: 'none',
+    ...prefixer('userSelect', 'none')
+  },
+  '.vert-align-mid': {
+    verticalAlign: 'middle'
+  },
+  '.vert-align-bl': {
+    verticalAlign: 'baseline'
+  },
+  '.grid-temp-col-3-fr': {
+    gridTemplateColumns: '1fr 1fr 1fr'
+  },
+  '.grid-temp-col-2-fr': {
+    gridTemplateColumns: '1fr 1fr'
+  },
+  '.lh-1': {
+    lineHeight: 1,
+  },
+  '.text-decoration-underline': {
+    textDecoration: 'underline',
+  },
+});

package/src/styles/hooks.ts

@@ -0,0 +1,44 @@
+/*
+ * 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 { useEffect, useState } from 'react';
+import { makeStyles } from '@mui/styles';
+import * as Colors from '@mui/material/colors';
+
+export const useHoverShowStyles = makeStyles({
+  container: {
+    '&:hover $target': {
+      visibility: 'visible'
+    }
+  },
+  target: {
+    visibility: 'hidden'
+  }
+});
+
+export const useWindowSize = () => {
+  const [windowSize, setWindowSize] = useState({
+    width: undefined,
+    height: undefined,
+  });
+  
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, []); 
+  
+  return windowSize;
+};
+
+export const getColor = (i, code) => {
+  return Colors[Object.keys(Colors)[i]][code];
+};

package/src/styles/index.ts

@@ -0,0 +1,18 @@
+/*
+ * 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 './mixins/keyframes';
+export * from './mixins/common';
+export * from './mixins/prefixer';
+export * from './animateStyles';
+export * from './bootstrap';
+export * from './GlobalStylesProvider';
+export * from './hooks';
+export * from './makeStyles';
+export * from './StylesProviderCustom';

package/src/styles/makeStyles.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright ish group pty ltd 2021.
+ *
+ * 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 {
+ makeStyles, Styles, WithStylesOptions, ClassNameMap 
+} from '@mui/styles';
+import { AppTheme } from '@src/model';
+
+export const makeAppStyles = <
+  Props extends object = {},
+  ClassKey extends string = string>(  
+  styles: Styles<AppTheme, Props, ClassKey>,
+  options?: Omit<WithStylesOptions<AppTheme>, 'withTheme'>
+): keyof Props extends never
+  ? (props?: any) => ClassNameMap<ClassKey>
+  : (props: Props) => ClassNameMap<ClassKey> => makeStyles<AppTheme>(styles, options);

package/src/styles/mixins/common.ts

@@ -0,0 +1,40 @@
+/*
+ * 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 { prefixer } from './prefixer';
+
+export const transform = (value = 'none') => prefixer('transform', value);
+
+export const transition = (theme, value = 'none', options = null) => {
+  const optionItems = options || {
+    duration: theme.transitions.duration.standard,
+    easing: theme.transitions.easing.easeInOut
+  };
+
+  if (value === 'none') {
+    return {
+      transition: 'none',
+    };
+  }
+
+  if (value === 'all') {
+    return {
+      willChange: 'auto',
+      transition: theme.transitions.create(value, optionItems),
+    };
+  }
+
+  const values = value.split(',').map(v => v.trim());
+  const transitionValue = [];
+
+  values.forEach(v => {
+    transitionValue.push(theme.transitions.create(v, optionItems));
+  });
+
+  return {
+    willChange: value,
+    transition: transitionValue.join(', ')
+  };
+};

package/src/styles/mixins/keyframes.ts

@@ -0,0 +1,16 @@
+/*
+ * 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 { prefixer } from './prefixer';
+
+export const keyframes = (name, content, otherStyle = {}) => ({
+  [`@keyframes ${name}`]: {
+    ...content
+  },
+  [`.${name}`]: {
+    ...prefixer('animationName', name, ['webkit', 'spec']),
+    ...otherStyle
+  }
+});

package/src/styles/mixins/prefixer.ts

@@ -0,0 +1,21 @@
+/*
+ * 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.
+ */
+
+export const prefixer = (property, value, prefixes = ['webkit', 'moz', 'ms', 'spec']) => {
+  const prefixedItem = {};
+  const propertyKey = property.charAt(0).toUpperCase() + property.slice(1);
+  prefixes.forEach(item => {
+    if (item === 'webkit') {
+      prefixedItem[`Webkit${propertyKey}`] = value;
+    } else if (item === 'moz') {
+      prefixedItem[`Moz${propertyKey}`] = value;
+    } else if (item === 'ms') {
+      prefixedItem[`Ms${propertyKey}`] = value;
+    } else if (item === 'spec') {
+      prefixedItem[property] = value;
+    }
+  });
+  return prefixedItem;
+};