ish-ui 1.0.2 → 1.0.3

package/src/styles/bootstrap.ts

@@ -1,503 +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 { 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

@@ -1,44 +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 { 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/makeStyles.ts

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

@@ -1,40 +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 { 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/prefixer.ts

@@ -1,21 +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.
- */
-
-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;
-};

package/src/tagsInput/AddTagMenu.tsx

@@ -1,74 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import withStyles from '@mui/styles/withStyles';
-import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
-import MenuItem from '@mui/material/MenuItem';
-import List from '@mui/material/List';
-import AddTagMenuItem from './AddTagMenuItem';
-import { MenuTag, TagLike } from '@src/model';
-
-const styles = theme => ({
-  listItem: {
-    padding: theme.spacing(0, 0.5, 0, 2)
-  },
-  proceedIcon: {
-    marginTop: '2px'
-  },
-  backContainer: {
-    marginLeft: '-6px'
-  },
-  tagColorDotSmall: {
-    width: theme.spacing(2),
-    height: theme.spacing(2),
-    background: 'red',
-    borderRadius: '100%'
-  }
-});
-
-interface Props<T> {
-  classes?: any;
-  tags: MenuTag<T>[];
-  handleAdd: (tag: MenuTag<T>) => void;
-  activeTag: MenuTag<T>;
-  setActiveTag: (arg: (MenuTag<T> | ((prevState: MenuTag<T>) => MenuTag<T>))) => void;
-}
-
-function AddTagMenu<T extends TagLike>(
-  {
-    classes,
-    tags,
-    handleAdd,
-    activeTag,
-    setActiveTag
-  }: Props<T>
-) {
-  const handleBack = () => {
-    setActiveTag(prev => prev.parent);
-  };
-
-  return (
-    <List
-      className={classes.rootMenu}
-    >
-      {activeTag && (
-        <MenuItem onClick={handleBack} className={classes.listItem}>
-          <span className={clsx('d-flex textSecondaryColor', classes.backContainer)}>
-            <KeyboardArrowLeft color="inherit" />
-            Back
-          </span>
-        </MenuItem>
-      )}
-      {(activeTag ? activeTag.children : tags).map(t => (
-        <AddTagMenuItem
-          key={t.tagBody.id}
-          tag={t}
-          classes={classes}
-          setActiveTag={setActiveTag}
-          handleAdd={handleAdd}
-        />
-      ))}
-    </List>
-  );
-}
-
-export default withStyles(styles)(AddTagMenu);