@corva/ui 0.38.0-5 → 0.38.0-6

package/src/components/FilesLoader/FilesLoader.js

@@ -0,0 +1,137 @@
+import { useEffect, useState } from 'react';
+import { Typography, LinearProgress, Tooltip, IconButton } from '@material-ui/core';
+import { Delete } from '@material-ui/icons';
+
+import PropTypes from 'prop-types';
+
+import IconWarning from './Icons/IconWarning';
+import IconCancel from './Icons/IconCancel';
+import IconSuccess from './Icons/IconSuccess';
+import { useStyles } from './useStyles';
+import FileIcon from './Icons/FileIcon';
+
+function FilesLoader(props) {
+  const classes = useStyles();
+  const [sizeParams, setSizeParams] = useState({});
+  const [progressPercent, setProgressPercent] = useState(0);
+  const { name, sizeBytes, handleCancel, onDelete, loadedBytes, error } = props;
+
+  const getInitSizeParams = () => {
+    if (sizeBytes >= 10 ** 6) {
+      return {
+        downloaded: 0,
+        unit: 'MB',
+        convertedSize: Math.floor(sizeBytes / 10 ** 5) / 10,
+      };
+    }
+    if (sizeBytes >= 10 ** 3) {
+      return {
+        downloaded: 0,
+        unit: 'KB',
+        convertedSize: Math.floor(sizeBytes / 10 ** 2) / 10,
+      };
+    }
+    return {
+      downloaded: 0,
+      unit: 'B',
+      convertedSize: Math.floor(sizeBytes * 10) / 10,
+    };
+  };
+
+  const handleCancelProgress = () => {
+    handleCancel(name);
+    setProgressPercent(0);
+    setSizeParams(prev => ({ ...prev, downloaded: 0 }));
+  };
+
+  useEffect(() => {
+    if (sizeBytes) {
+      setSizeParams(getInitSizeParams());
+    }
+  }, [sizeBytes]);
+
+  useEffect(() => {
+    if (loadedBytes) {
+      const currentPercent = Math.round((loadedBytes / sizeBytes) * 100);
+      setSizeParams(prev => ({
+        ...prev,
+        downloaded: Math.floor((prev.convertedSize * currentPercent) / 10) / 10,
+      }));
+      setProgressPercent(currentPercent);
+    }
+  }, [loadedBytes]);
+
+  return (
+    <div className={classes.fileStateWrapper}>
+      <div className={classes.fileIconContainer}>
+        <FileIcon name={name} />
+      </div>
+      <div className={classes.fileState}>
+        <div className={classes.fileStateProgress}>
+          <div className={classes.fileNameWrapper}>
+            <Typography className={classes.fileName}>{name}</Typography>
+          </div>
+          <LinearProgress
+            className={classes.progressBar}
+            variant="determinate"
+            value={progressPercent}
+            classes={{ colorPrimary: classes.progressBackground }}
+          />
+          <div className={classes.loaderProgressContainer}>
+            <Typography className={classes.fileSize} component="span">
+              {`${sizeParams.downloaded} of ${sizeParams.convertedSize} ${sizeParams.unit}`}
+            </Typography>
+            <div className={classes.progressStatus}>
+              {error ? (
+                <Tooltip title="There was a server error during the upload request. Please try later.">
+                  <Typography component="div" className={classes.errorContainer}>
+                    <Typography component="span" className={classes.errorText}>
+                      Upload Error
+                    </Typography>
+                    <IconWarning />
+                  </Typography>
+                </Tooltip>
+              ) : (
+                `${progressPercent} %`
+              )}
+            </div>
+          </div>
+        </div>
+        <div className={classes.fileActions}>
+          {progressPercent < 100 && !error && (
+            <IconButton size="small" onClick={handleCancelProgress}>
+              <IconCancel />
+            </IconButton>
+          )}
+          {progressPercent === 100 &&
+            !error &&
+            (onDelete ? (
+              <IconButton size="small" onClick={onDelete}>
+                <Delete className={classes.deleteIcon} />
+              </IconButton>
+            ) : (
+              <IconSuccess />
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+FilesLoader.propTypes = {
+  onDelete: PropTypes.func,
+  handleCancel: PropTypes.func,
+  name: PropTypes.string,
+  sizeBytes: PropTypes.number,
+  error: PropTypes.bool,
+  loadedBytes: PropTypes.number.isRequired,
+};
+
+FilesLoader.defaultProps = {
+  onDelete: null,
+  name: '',
+  sizeBytes: 1,
+  error: null,
+  handleCancel: null,
+};
+export default FilesLoader;

package/src/components/FilesLoader/Icons/CSVFileIcon.js

@@ -0,0 +1,41 @@
+import { makeStyles, SvgIcon } from '@material-ui/core';
+
+const useStyles = makeStyles({
+  svgIcon: {
+    height: '32px',
+    width: '32px',
+  },
+});
+
+const CSVFileIcon = () => {
+  const classes = useStyles();
+  return (
+    <SvgIcon
+      className={classes.svgIcon}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M23.52 2.1H13.98V0.54V0.48C13.98 0.48 13.98 0.48 13.98 0.42V0.36L13.92 0.3C13.8 0.12 13.74 0.06 13.62 0C13.56 0 13.56 0 13.5 0H13.44C13.44 0 13.44 0 13.38 0L0.42 2.1C0.18 2.16 0 2.34 0 2.58V3.6V20.28V21.3C0 21.54 0.18 21.78 0.42 21.84L13.44 24C13.44 24 13.44 24 13.5 24H13.56C13.62 24 13.62 24 13.68 24C13.8 24 13.86 23.88 13.98 23.82L14.04 23.76V23.7C14.04 23.7 14.04 23.7 14.04 23.64V23.58V22.02H23.52C23.82 22.02 24 21.78 24 21.48V2.58C24 2.34 23.76 2.1 23.52 2.1ZM16.5 3.12V5.7H14.04V3.12H16.5ZM13.98 14.4H16.44V17.16H13.98V14.4ZM13.98 13.38V10.62H16.44V13.38H13.98ZM13.98 9.54V6.78H16.44V9.54H13.98ZM13.98 18.24H16.44V20.88H13.98V18.24ZM22.98 20.88H17.52V18.24H19.8C20.1 18.24 20.28 18 20.28 17.7C20.28 17.4 20.04 17.16 19.8 17.16H17.52V14.4H19.8C20.1 14.4 20.28 14.16 20.28 13.86C20.28 13.56 20.04 13.32 19.8 13.32H17.52V10.56H19.8C20.1 10.56 20.28 10.32 20.28 10.02C20.28 9.72 20.04 9.48 19.8 9.48H17.52V6.72H19.8C20.1 6.72 20.28 6.48 20.28 6.18C20.28 5.88 20.04 5.64 19.8 5.64H17.52V3.12H22.98V20.88Z"
+        fill="#75DB29"
+      />
+      <path
+        d="M6.0408 15.866C5.90212 15.999 5.78379 16.1534 5.68995 16.3238C5.60956 16.4724 5.5662 16.6396 5.56386 16.8102C5.55648 17.1066 5.63889 17.3978 5.79934 17.6424C5.95979 17.8869 6.19009 18.0724 6.45743 18.1723C6.63227 18.2425 6.8183 18.2775 7.00563 18.2753C7.19292 18.277 7.37885 18.242 7.55383 18.1723C7.72236 18.1098 7.87711 18.0125 8.00884 17.8862C8.14235 17.7544 8.2503 17.597 8.3268 17.4226C8.40494 17.2253 8.4387 17.0119 8.42547 16.7988C8.42714 16.6126 8.38775 16.4286 8.31035 16.2609C8.23255 16.0925 8.11802 15.9455 7.97595 15.8316L8.83114 15.0018C8.95447 15.1293 9.05805 15.276 9.13813 15.4368C9.22444 15.5925 9.29429 15.7575 9.34645 15.9289C9.39827 16.0834 9.4368 16.2423 9.46157 16.4039C9.4831 16.5345 9.49593 16.6664 9.49995 16.7988C9.50186 17.1603 9.44055 17.5191 9.31904 17.8575C9.20611 18.1766 9.03271 18.4685 8.80921 18.716C8.58801 18.9631 8.31889 19.1582 8.0198 19.2883C7.6964 19.4341 7.34691 19.5063 6.99467 19.5C6.64065 19.5062 6.28939 19.4341 5.96405 19.2883C5.66643 19.1554 5.39784 18.9607 5.17464 18.716C4.951 18.4697 4.7792 18.1773 4.67029 17.8575C4.55252 17.5183 4.49493 17.1596 4.50035 16.7988C4.50334 16.47 4.56276 16.1443 4.67577 15.8374C4.79108 15.515 4.97912 15.2264 5.22398 14.9961L6.0408 15.866Z"
+        fill="white"
+      />
+      <path
+        d="M5.9311 11.0758C5.77738 11.1828 5.65205 11.3286 5.56676 11.4997C5.48146 11.6707 5.43896 11.8616 5.4432 12.0544C5.44363 12.2245 5.48511 12.3918 5.56381 12.5408C5.59756 12.6162 5.65212 12.6794 5.72049 12.7222C5.78886 12.7651 5.86793 12.7856 5.94755 12.7812C6.01358 12.7843 6.07902 12.767 6.13561 12.7313C6.1922 12.6957 6.2374 12.6433 6.26551 12.5809C6.34457 12.4242 6.40179 12.2566 6.43545 12.083C6.48479 11.8827 6.53413 11.6652 6.58346 11.4363C6.63097 11.2114 6.70653 10.994 6.80823 10.7896C6.91084 10.5923 7.05521 10.422 7.23034 10.2917C7.44982 10.1481 7.70621 10.0782 7.96493 10.0914C8.21908 10.0819 8.47043 10.1495 8.68856 10.286C8.88075 10.4113 9.04221 10.5818 9.16001 10.7839C9.28225 10.9961 9.36935 11.2282 9.41767 11.4706C9.47179 11.7224 9.49936 11.9795 9.4999 12.2375C9.50269 12.6009 9.449 12.9623 9.34092 13.3077C9.22464 13.6464 9.02407 13.9466 8.75982 14.1776L8.01427 13.3649C8.18121 13.2209 8.32389 13.0488 8.43638 12.8556C8.5508 12.6531 8.60783 12.4209 8.60084 12.186C8.60233 12.0917 8.59313 11.9976 8.57344 11.9056C8.55306 11.8115 8.51982 11.7209 8.47476 11.6366C8.43129 11.5555 8.37143 11.4852 8.29933 11.4306C8.22851 11.3797 8.14405 11.3537 8.05813 11.3562C7.98576 11.3508 7.91335 11.3661 7.84866 11.4004C7.78396 11.4346 7.72941 11.4866 7.69083 11.5508C7.59968 11.7045 7.53303 11.8726 7.49348 12.0487C7.44414 12.249 7.40028 12.4664 7.35643 12.6953C7.31583 12.9272 7.24577 13.1524 7.14811 13.3649C7.05357 13.5611 6.91655 13.7316 6.74792 13.8628C6.53423 14.0052 6.28284 14.0733 6.02978 14.0574C5.79988 14.064 5.57204 14.0104 5.3671 13.9015C5.16216 13.7925 4.98666 13.6316 4.85663 13.4336C4.72665 13.2396 4.63188 13.0223 4.57705 12.7926C4.52266 12.5449 4.49689 12.2913 4.5003 12.0372C4.49999 11.7101 4.55187 11.3851 4.65379 11.0758C4.75413 10.7598 4.94561 10.4839 5.202 10.286L5.9311 11.0758Z"
+        fill="white"
+      />
+      <path
+        d="M4.60938 9.81656V8.46024L7.94792 7.13253L4.60938 5.7762V4.5L9.37873 6.45723V7.78494L4.60938 9.81656Z"
+        fill="white"
+      />
+    </SvgIcon>
+  );
+};
+
+export default CSVFileIcon;

package/src/components/FilesLoader/Icons/DocFileIcon.js

@@ -0,0 +1,26 @@
+import { makeStyles, SvgIcon } from '@material-ui/core';
+
+const useStyles = makeStyles({
+  svgIcon: {
+    height: '32px',
+    width: '32px',
+  },
+});
+
+const DocFileIcon = () => {
+  const classes = useStyles();
+  return (
+    <SvgIcon viewBox="0 0 32 32" className={classes.svgIcon}>
+      <path
+        d="M31.36 2.8H18.64V0.72V0.64C18.64 0.64 18.64 0.64 18.64 0.56V0.48L18.56 0.4C18.4 0.16 18.32 0.08 18.16 0C18.08 0 18.08 0 18 0H17.92C17.92 0 17.92 0 17.84 0L0.56 2.8C0.24 2.88 0 3.12 0 3.44V4.8V27.04V28.4C0 28.72 0.24 29.04 0.56 29.12L17.92 32C17.92 32 17.92 32 18 32H18.08C18.16 32 18.16 32 18.24 32C18.4 32 18.48 31.84 18.64 31.76L18.72 31.68V31.6C18.72 31.6 18.72 31.6 18.72 31.52V31.44V29.36H31.36C31.76 29.36 32 29.04 32 28.64V3.44C32 3.12 31.68 2.8 31.36 2.8ZM30.64 27.84H18.64V24.32H26.48C26.88 24.32 27.12 24 27.12 23.6C27.12 23.2 26.8 22.88 26.48 22.88H18.64V19.2H26.48C26.88 19.2 27.12 18.88 27.12 18.48C27.12 18.08 26.8 17.76 26.48 17.76H18.64V14.08H26.48C26.88 14.08 27.12 13.76 27.12 13.36C27.12 12.96 26.8 12.64 26.48 12.64H18.64V8.96H26.48C26.88 8.96 27.12 8.64 27.12 8.24C27.12 7.84 26.8 7.52 26.48 7.52H18.64V4.16H30.64V27.84Z"
+        fill="#2196F3"
+      />
+      <path
+        d="M3.6001 11.918H5.5201L6.8001 17.118L8.4801 11.918H10.1601L11.8401 17.198L13.2001 11.918H15.0401L12.7201 19.998H11.1201L9.3601 14.398L7.6001 19.998H6.0001L3.6001 11.918Z"
+        fill="white"
+      />
+    </SvgIcon>
+  );
+};
+
+export default DocFileIcon;

package/src/components/FilesLoader/Icons/ExelFileIcon.js

@@ -0,0 +1,26 @@
+import { makeStyles, SvgIcon } from '@material-ui/core';
+
+const useStyles = makeStyles({
+  svgIcon: {
+    height: '32px',
+    width: '32px',
+  },
+});
+
+const ExelFileIcon = () => {
+  const classes = useStyles();
+  return (
+    <SvgIcon viewBox="0 0 32 32" className={classes.svgIcon}>
+      <path
+        d="M31.36 2.8H18.64V0.72V0.64C18.64 0.64 18.64 0.64 18.64 0.56V0.48L18.56 0.4C18.4 0.16 18.32 0.08 18.16 0C18.08 0 18.08 0 18 0H17.92C17.92 0 17.92 0 17.84 0L0.56 2.8C0.24 2.88 0 3.12 0 3.44V4.8V27.04V28.4C0 28.72 0.24 29.04 0.56 29.12L17.92 32C17.92 32 17.92 32 18 32H18.08C18.16 32 18.16 32 18.24 32C18.4 32 18.48 31.84 18.64 31.76L18.72 31.68V31.6C18.72 31.6 18.72 31.6 18.72 31.52V31.44V29.36H31.36C31.76 29.36 32 29.04 32 28.64V3.44C32 3.12 31.68 2.8 31.36 2.8ZM22 4.16V7.6H18.72V4.16H22ZM18.64 19.2H21.92V22.88H18.64V19.2V19.2ZM18.64 17.84V14.16H21.92V17.84H18.64V17.84ZM18.64 12.72V9.04H21.92V12.72H18.64ZM18.64 24.32H21.92V27.84H18.64V24.32V24.32ZM30.64 27.84H23.36V24.32H26.4C26.8 24.32 27.04 24 27.04 23.6C27.04 23.2 26.72 22.88 26.4 22.88H23.36V19.2H26.4C26.8 19.2 27.04 18.88 27.04 18.48C27.04 18.08 26.72 17.76 26.4 17.76H23.36V14.08H26.4C26.8 14.08 27.04 13.76 27.04 13.36C27.04 12.96 26.72 12.64 26.4 12.64H23.36V8.96H26.4C26.8 8.96 27.04 8.64 27.04 8.24C27.04 7.84 26.72 7.52 26.4 7.52H23.36V4.16H30.64V27.84V27.84Z"
+        fill="#4BC341"
+      />
+      <path
+        d="M8.0802 15.84L5.4402 12H7.6802L9.4402 14.8L11.1202 12H13.2802L10.6402 15.84L13.5202 20.08H11.2002L9.2802 16.8L7.3602 20H5.2002L8.0802 15.84Z"
+        fill="white"
+      />
+    </SvgIcon>
+  );
+};
+
+export default ExelFileIcon;

package/src/components/FilesLoader/Icons/FileIcon.js

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import DocFileIcon from './DocFileIcon';
+import PdfFileIcon from './PdfFileIcon';
+import ExelFileIcon from './ExelFileIcon';
+import UnknownFileIcon from './UnknownFileIcon';
+import CSVFileIcon from './CSVFileIcon';
+import ImageFileIcon from './ImageFileIcon';
+
+const FileIcon = ({ name }) => {
+  const acceptedImagesTypes = ['jpg', 'png', 'jpeg'];
+  const fileType = name.split('.').pop();
+
+  if (fileType.includes('doc')) return <DocFileIcon />;
+  if (fileType.includes('pdf')) return <PdfFileIcon />;
+  if (fileType.includes('xls')) return <ExelFileIcon />;
+  if (fileType.includes('csv')) return <CSVFileIcon />;
+  if (acceptedImagesTypes.includes(fileType)) return <ImageFileIcon />;
+  return <UnknownFileIcon />;
+};
+FileIcon.propTypes = {
+  name: PropTypes.string.isRequired,
+};
+
+export default FileIcon;

package/src/components/FilesLoader/Icons/IconCancel.js

@@ -0,0 +1,22 @@
+import { makeStyles, SvgIcon } from '@material-ui/core';
+
+const useStyles = makeStyles({
+  svgIcon: {
+    width: 16,
+    height: 16,
+  },
+});
+
+const IconCancel = () => {
+  const classes = useStyles();
+  return (
+    <SvgIcon viewBox="0 0 16 16" className={classes.svgIcon}>
+      <path
+        d="M12.6668 4.27203L11.7268 3.33203L8.00016 7.0587L4.2735 3.33203L3.3335 4.27203L7.06016 7.9987L3.3335 11.7254L4.2735 12.6654L8.00016 8.9387L11.7268 12.6654L12.6668 11.7254L8.94016 7.9987L12.6668 4.27203Z"
+        fill="#BDBDBD"
+      />
+    </SvgIcon>
+  );
+};
+
+export default IconCancel;

package/src/components/FilesLoader/Icons/IconSuccess.js

@@ -0,0 +1,12 @@
+const IconSuccess = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.00016 1.33203C4.32016 1.33203 1.3335 4.3187 1.3335 7.9987C1.3335 11.6787 4.32016 14.6654 8.00016 14.6654C11.6802 14.6654 14.6668 11.6787 14.6668 7.9987C14.6668 4.3187 11.6802 1.33203 8.00016 1.33203ZM8.00016 13.332C5.06016 13.332 2.66683 10.9387 2.66683 7.9987C2.66683 5.0587 5.06016 2.66536 8.00016 2.66536C10.9402 2.66536 13.3335 5.0587 13.3335 7.9987C13.3335 10.9387 10.9402 13.332 8.00016 13.332ZM6.66683 9.44536L11.0602 5.05203L12.0002 5.9987L6.66683 11.332L4.00016 8.66536L4.94016 7.72536L6.66683 9.44536Z"
+      fill="#03BCD4"
+    />
+  </svg>
+);
+
+export default IconSuccess;

package/src/components/FilesLoader/Icons/IconWarning.js

@@ -0,0 +1,12 @@
+const IconWarning = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.98024 13.6704C1.95358 13.6704 1.31358 12.557 1.82691 11.6704L6.84691 2.99703C7.36024 2.11036 8.64024 2.11036 9.15358 2.99703L14.1736 11.6704C14.6869 12.557 14.0469 13.6704 13.0202 13.6704H2.98024ZM13.0202 12.337L8.00024 3.6637L2.98024 12.337H13.0202ZM7.33358 7.0037V8.33703C7.33358 8.7037 7.63358 9.0037 8.00024 9.0037C8.36691 9.0037 8.66691 8.7037 8.66691 8.33703V7.0037C8.66691 6.63703 8.36691 6.33703 8.00024 6.33703C7.63358 6.33703 7.33358 6.63703 7.33358 7.0037ZM8.66691 11.6704V10.337H7.33358V11.6704H8.66691Z"
+      fill="#F44336"
+    />
+  </svg>
+);
+
+export default IconWarning;

package/src/components/FilesLoader/Icons/ImageFileIcon.js

@@ -0,0 +1,36 @@
+import { makeStyles, SvgIcon } from '@material-ui/core';
+
+const useStyles = makeStyles({
+  svgIcon: {
+    height: '32px',
+    width: '32px',
+  },
+});
+
+const ImageFileIcon = () => {
+  const classes = useStyles();
+  return (
+    <SvgIcon
+      className={classes.svgIcon}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <g clipPath="url(#clip0_1600_26)">
+        <path
+          d="M23.52 2.03987H13.98V0.599871C13.98 0.239871 13.62 -0.0601292 13.26 -0.000129162L0.42 2.09987C0.18 2.09987 0 2.33987 0 2.57987V21.3599C0 21.5999 0.18 21.8399 0.42 21.8999L13.32 23.9999C13.68 24.0599 14.04 23.7599 14.04 23.3999V21.8999H23.52C23.82 21.8999 24 21.6599 24 21.3599V2.57987C24 2.27987 23.76 2.03987 23.52 2.03987ZM13.98 6.29987C14.88 6.29987 15.6 7.01987 15.6 7.91987C15.6 8.81987 14.88 9.53987 13.98 9.53987V6.29987ZM22.98 20.8199H13.98V18.1799L18.42 13.7399L22.98 18.2999V20.8199ZM22.98 16.8599L18.78 12.6599C18.6 12.4799 18.24 12.4799 18.06 12.6599L13.98 16.7399V10.5599C15.42 10.5599 16.56 9.41987 16.56 7.97987C16.56 6.53987 15.42 5.39987 13.98 5.39987V3.11987H22.98V16.8599Z"
+          fill="#FF5982"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1600_26">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </SvgIcon>
+  );
+};
+
+export default ImageFileIcon;

package/src/components/FilesLoader/Icons/PdfFileIcon.js

@@ -0,0 +1,26 @@
+import { makeStyles, SvgIcon } from '@material-ui/core';
+
+const useStyles = makeStyles({
+  svgIcon: {
+    height: '32px',
+    width: '32px',
+  },
+});
+
+const PdfFileIcon = () => {
+  const classes = useStyles();
+  return (
+    <SvgIcon viewBox="0 0 32 32" className={classes.svgIcon}>
+      <path
+        d="M31.36 2.8H18.64V0.72V0.64C18.64 0.64 18.64 0.64 18.64 0.56V0.48L18.56 0.4C18.4 0.16 18.32 0.08 18.16 0C18.08 0 18.08 0 18 0H17.92C17.92 0 17.92 0 17.84 0L0.56 2.8C0.24 2.88 0 3.12 0 3.44V4.8V27.04V28.4C0 28.72 0.24 29.04 0.56 29.12L17.92 32C17.92 32 17.92 32 18 32H18.08C18.16 32 18.16 32 18.24 32C18.4 32 18.48 31.84 18.64 31.76L18.72 31.68V31.6C18.72 31.6 18.72 31.6 18.72 31.52V31.44V29.36H31.36C31.76 29.36 32 29.04 32 28.64V3.44C32 3.12 31.68 2.8 31.36 2.8ZM30.64 27.84H18.64V24.32H26.48C26.88 24.32 27.12 24 27.12 23.6C27.12 23.2 26.8 22.88 26.48 22.88H18.64V19.2H26.48C26.88 19.2 27.12 18.88 27.12 18.48C27.12 18.08 26.8 17.76 26.48 17.76H18.64V14.08H26.48C26.88 14.08 27.12 13.76 27.12 13.36C27.12 12.96 26.8 12.64 26.48 12.64H18.64V8.96H26.48C26.88 8.96 27.12 8.64 27.12 8.24C27.12 7.84 26.8 7.52 26.48 7.52H18.64V4.16H30.64V27.84Z"
+        fill="#EA2929"
+      />
+      <path
+        d="M13.5199 17.9217C13.3599 17.4417 13.0399 17.1217 12.6399 16.8817C12.3999 16.7217 12.0799 16.6417 11.7599 16.6417H9.9199L9.5199 16.0017L10.3999 14.4017C10.5599 14.1617 10.6399 13.8417 10.6399 13.5217C10.6399 12.5617 9.8399 11.7617 8.8799 11.7617C7.9199 11.7617 7.1199 12.5617 7.1199 13.5217C7.1199 13.8417 7.1999 14.0817 7.3599 14.4017L8.2399 16.0017L7.8399 16.7217H5.9199C5.5999 16.7217 5.2799 16.8017 5.0399 16.9617C4.6399 17.2017 4.3199 17.5217 4.1599 18.0017C3.9999 18.4817 4.0799 18.9617 4.3199 19.3617C4.6399 19.9217 5.2799 20.2417 5.8399 20.2417C6.1599 20.2417 6.3999 20.1617 6.7199 20.0017C6.9599 19.8417 7.1999 19.6017 7.3599 19.3617L8.3999 17.7617H9.2799L10.3199 19.3617C10.4799 19.6017 10.7199 19.8417 10.9599 20.0017C11.8399 20.4817 12.8799 20.1617 13.3599 19.2817C13.5999 18.8817 13.6799 18.4017 13.5199 17.9217ZM6.4799 18.8017C6.3999 18.8817 6.3199 18.9617 6.2399 19.0417C6.0799 19.1217 5.9199 19.1217 5.7599 19.1217C5.5999 19.0417 5.4399 18.9617 5.3599 18.8017C5.2799 18.6417 5.2799 18.4817 5.2799 18.3217C5.3599 18.1617 5.4399 18.0017 5.5999 17.9217C5.6799 17.8417 5.7599 17.8417 5.9199 17.8417H7.1199L6.4799 18.8017ZM8.8799 14.8817L8.3199 13.8417C8.2399 13.7617 8.2399 13.6017 8.2399 13.5217C8.2399 13.1217 8.5599 12.8817 8.8799 12.8817C9.2799 12.8817 9.5199 13.2017 9.5199 13.5217C9.5199 13.6017 9.5199 13.7617 9.4399 13.8417L8.8799 14.8817ZM12.3199 18.7217C12.2399 18.8817 12.0799 18.9617 11.9199 19.0417C11.7599 19.1217 11.5999 19.0417 11.4399 18.9617C11.3599 18.8817 11.2799 18.8017 11.1999 18.7217L10.5599 17.7617H11.7599C11.8399 17.7617 11.9999 17.7617 12.0799 17.8417C12.2399 17.9217 12.3199 18.0817 12.3999 18.2417C12.4799 18.4017 12.3999 18.5617 12.3199 18.7217Z"
+        fill="white"
+      />
+    </SvgIcon>
+  );
+};
+
+export default PdfFileIcon;

package/src/components/FilesLoader/Icons/UnknownFileIcon.js

@@ -0,0 +1,22 @@
+import { makeStyles, SvgIcon } from '@material-ui/core';
+
+const useStyles = makeStyles({
+  svgIcon: {
+    height: '32px',
+    width: '32px',
+  },
+});
+
+const UnknownFileIcon = () => {
+  const classes = useStyles();
+  return (
+    <SvgIcon viewBox="0 0 32 32" className={classes.svgIcon}>
+      <path
+        d="M31.3357 2.784H18.6638V0.696C18.6681 0.661463 18.6681 0.626537 18.6638 0.592V0.592C18.6685 0.554811 18.6685 0.517189 18.6638 0.48V0.48C18.6473 0.440114 18.6258 0.402481 18.5998 0.368V0.368C18.5569 0.277435 18.4945 0.197482 18.417 0.133863C18.3396 0.0702436 18.249 0.0245322 18.1518 0L17.9038 0L0.567954 2.792C0.407636 2.81876 0.262204 2.90205 0.158007 3.02679C0.0538104 3.15154 -0.00225866 3.30948 -4.13915e-05 3.472V28.52C-0.00254391 28.6835 0.053243 28.8425 0.157323 28.9685C0.261404 29.0946 0.406975 29.1795 0.567954 29.208L17.8958 32H18.1438C18.2902 31.9641 18.4199 31.8794 18.5118 31.76V31.76C18.5377 31.7284 18.5592 31.6934 18.5758 31.656V31.656C18.5804 31.6215 18.5804 31.5865 18.5758 31.552C18.5789 31.5388 18.5789 31.5252 18.5758 31.512V31.512C18.5798 31.4774 18.5798 31.4426 18.5758 31.408V31.408V29.328H31.3357C31.516 29.3238 31.6873 29.2482 31.8118 29.1177C31.9363 28.9873 32.0039 28.8127 31.9997 28.6324V3.48C32.0018 3.39069 31.9864 3.30185 31.9541 3.21853C31.9219 3.13521 31.8736 3.05906 31.8119 2.99443C31.7503 2.92979 31.6765 2.87794 31.5948 2.84184C31.513 2.80573 31.425 2.78608 31.3357 2.784V2.784ZM30.6637 27.824H18.6638V4.208H30.6637V27.824Z"
+        fill="#616161"
+      />
+    </SvgIcon>
+  );
+};
+
+export default UnknownFileIcon;

package/src/components/FilesLoader/effects/useUploadingFile.js

@@ -0,0 +1,86 @@
+import { useMemo, useEffect, useState } from 'react';
+import { round } from 'lodash';
+
+import { BYTES_IN, SIZE_UNIT } from '../constants';
+
+export const useUploadingFile = (file, onLoad) => {
+  const [loadedSize, setLoadedSize] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [isDeletable, setIsDeletable] = useState(false);
+
+  const onFileLoadStart = () => {
+    setIsLoading(true);
+  };
+
+  const onFileLoadProgress = (event) => {
+    setLoadedSize(event.loaded);
+  };
+
+  const onFileLoad = (event) => {
+    setTimeout(() => {
+      setIsLoading(false);
+      setIsLoaded(true);
+      setTimeout(() => setIsDeletable(true), 1000);
+
+      onLoad(event.target.result);
+    }, 400);
+  };
+
+  const onFileLoadError = () => {};
+
+  useEffect(() => {
+    if (file) {
+      const fileReader = new FileReader();
+      fileReader.addEventListener('loadstart', onFileLoadStart);
+      fileReader.addEventListener('progress', onFileLoadProgress);
+      fileReader.addEventListener('load', onFileLoad);
+      fileReader.addEventListener('error', onFileLoadError);
+      fileReader.readAsText(file);
+    }
+  }, [file]);
+
+  const getProgressPercent = () => {
+    return (loadedSize * 100) / (file.size || 1);
+  };
+
+  const getFormattedSize = (size) => {
+    if (size > BYTES_IN.MB) {
+      return round(size / BYTES_IN.MB, 1);
+    } else if (size > BYTES_IN.KB) {
+      return round(size / BYTES_IN.KB, 1);
+    }
+
+    return size;
+  };
+
+  const getSizeUnit = (size) => {
+    if (size > 1048576) {
+      return SIZE_UNIT.MB;
+    } else if (size > 1024) {
+      return SIZE_UNIT.KB;
+    }
+
+    return SIZE_UNIT.B;
+  };
+
+  return useMemo(() => {
+    return {
+      getProgressPercent,
+      getFormattedSize,
+      getSizeUnit,
+      isLoading,
+      isLoaded,
+      isDeletable,
+      loadedSize,
+      size: file.size,
+      name: file.name,
+    };
+  }, [
+    file,
+    loadedSize,
+    isLoading,
+    isLoaded,
+    isDeletable,
+  ]);
+}

package/src/components/FilesLoader/index.js

@@ -0,0 +1,2 @@
+export { default as FilesLoader } from './FilesLoader';
+export { default as FileIcon } from './Icons/FileIcon';

package/src/components/FilesLoader/useStyles.js

@@ -0,0 +1,86 @@
+import { makeStyles } from '@material-ui/core';
+
+export const useStyles = makeStyles(theme => ({
+  fileStateWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  fileIconContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    marginRight: '10px',
+  },
+  fileState: {
+    display: 'flex',
+    flexGrow: '1',
+    alignItems: 'center',
+  },
+  fileStateProgress: {
+    flexGrow: '1',
+  },
+  fileNameWrapper: {
+    display: 'table',
+    tableLayout: 'fixed',
+    width: '100%',
+  },
+  fileName: {
+    display: 'table-cell',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    fontSize: '14px',
+    lineHeight: '16px',
+    color: theme.palette.primary.text1,
+  },
+  fileSize: {
+    fontSize: '11px',
+    lineHeight: '12px',
+    color: theme.palette.primary.text6,
+  },
+  checkIcon: {
+    color: theme.palette.success.bright,
+  },
+  deleteIcon: {
+    color: theme.palette.primary.text6,
+    cursor: 'pointer',
+  },
+  progressBar: {
+    borderRadius: '2px',
+    height: '2px',
+    margin: '4px 0',
+  },
+  fileActions: {
+    display: 'flex',
+    alignItems: 'center',
+    paddingLeft: '24px',
+  },
+  progressBackground: {
+    backgroundColor: theme.palette.primary.dark,
+  },
+  loaderProgressContainer: {
+    display: 'flex',
+    width: '100%',
+    fontSize: '11px',
+    fontWeight: '400',
+    letterSpacing: '0.4px',
+    color: theme.palette.primary.text6,
+    marginTop: '4px',
+  },
+  progressStatus: {
+    flexGrow: 1,
+    display: 'flex',
+    justifyContent: 'flex-end',
+  },
+  errorContainer: {
+    display: 'flex',
+    cursor: 'pointer',
+  },
+  errorText: {
+    color: theme.palette.error.main,
+    fontSize: '11px',
+    fontWeight: '400',
+    letterSpacing: '0.4px',
+    marginRight: '5px',
+    lineHeight: '16px',
+  },
+}));

package/src/components/FolderMenuItem/components/ClosedFolderIcon.js

@@ -0,0 +1,7 @@
+const ClosedFolderIcon = () => (
+  <svg width="16" height="14" viewBox="0 0 16 14" xmlns="http://www.w3.org/2000/svg">
+    <path d="M14.7585 13.4826H1.24137C0.551722 13.4826 0 12.9309 0 12.2412V1.8045C0 1.11485 0.597698 0.517151 1.28735 0.517151H5.01147C5.42526 0.517151 5.79308 0.701058 6.06894 1.0229L6.94249 2.21829H14.7585C15.4482 2.21829 15.9999 2.77001 15.9999 3.45967V12.1953C15.9999 12.9309 15.4482 13.4826 14.7585 13.4826ZM1.28735 1.43669C1.10344 1.43669 0.919536 1.62059 0.919536 1.8045V12.2412C0.919536 12.4251 1.05747 12.5631 1.24137 12.5631H14.7585C14.9425 12.5631 15.0804 12.4251 15.0804 12.2412V3.50564C15.0804 3.32174 14.9425 3.1838 14.7585 3.1838H6.71261C6.57468 3.1838 6.43675 3.09185 6.3448 2.9999L5.33331 1.57462C5.28733 1.48266 5.1494 1.43669 5.05745 1.43669H1.28735Z" />
+  </svg>
+);
+
+export default ClosedFolderIcon;

package/src/components/FolderMenuItem/components/FolderIcon.js

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core';
+import classNames from 'classnames';
+
+import OpenFolderIcon from './OpenFolderIcon';
+import ClosedFolderIcon from './ClosedFolderIcon';
+
+const useStyles = makeStyles({
+  folderIcon: {
+    width: 16,
+    height: 16,
+    display: 'flex',
+    alignItems: 'flex-end',
+  },
+  iconColor: ({color}) => {
+    return {
+      '& svg': {
+        fill: color,
+      },
+    };
+  },
+});
+
+const FolderIcon = ({ className, isOpen, color }) => {
+  const classes = useStyles({color});
+
+  const Icon = isOpen ? OpenFolderIcon : ClosedFolderIcon;
+
+  return (
+    <div className={classNames(classes.folderIcon, classes.iconColor, className)}>
+      <Icon />
+    </div>
+  );
+};
+
+FolderIcon.propTypes = {
+  isOpen: PropTypes.bool,
+  className: PropTypes.string,
+  color: PropTypes.string.isRequired,
+};
+
+FolderIcon.defaultProps = {
+  isOpen: false,
+  className: '',
+};
+
+export default FolderIcon;

package/src/components/FolderMenuItem/components/OpenFolderIcon.js

@@ -0,0 +1,7 @@
+const OpenFolderIcon = () => (
+  <svg width="16" height="12" viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13.0002 11.64H1.2402C0.640195 11.64 0.200195 11.16 0.200195 10.56V1.48005C0.200195 0.880046 0.680195 0.360046 1.2802 0.360046H4.4002C4.7602 0.360046 5.0802 0.520046 5.2802 0.840046L6.0402 1.88005H13.0402C13.6402 1.88005 14.0802 2.36005 14.0802 2.96005V5.00005H14.7202C15.0802 5.00005 15.4002 5.16005 15.6002 5.48005C15.8002 5.76005 15.8802 6.16005 15.7602 6.52005L14.0002 10.96C13.8402 11.36 13.4402 11.64 13.0002 11.64ZM1.2802 1.16005C1.1202 1.16005 1.0002 1.28005 1.0002 1.48005V10.56C1.0002 10.72 1.1202 10.84 1.2402 10.84H13.0402C13.1602 10.84 13.2402 10.76 13.2802 10.64L15.0002 6.20005C15.0402 6.12005 15.0002 6.00005 14.9602 5.92005C14.9202 5.88005 14.8402 5.80005 14.7202 5.80005H4.6802C4.4402 5.80005 4.2802 5.60005 4.2802 5.40005C4.2802 5.16005 4.4802 5.00005 4.6802 5.00005H13.2802V2.96005C13.2802 2.80005 13.1602 2.68005 13.0402 2.68005H5.8402C5.7202 2.68005 5.6002 2.60005 5.5202 2.52005L4.6402 1.28005C4.6002 1.20005 4.5202 1.16005 4.4002 1.16005H1.2802Z" />
+  </svg>
+);
+
+export default OpenFolderIcon;

package/src/components/FolderMenuItem/components/index.js

@@ -0,0 +1,3 @@
+export { default as ClosedFolderIcon } from './ClosedFolderIcon';
+export { default as FolderIcon } from './FolderIcon';
+export { default as OpenFolderIcon } from './OpenFolderIcon';