@lunit/oui 1.0.1 → 1.1.0-alpha.1

package/src/components/UploadManager/UploadManager.tsx

@@ -1,271 +0,0 @@
-import React from 'react';
-import { Grow, Typography, Box } from '@mui/material';
-
-import { ArrowUp, Close, Success, Error16, RefreshLeft } from '../../icons';
-
-import { useState, Fragment, useMemo } from 'react';
-import { Divider } from '../Divider';
-import { Button } from '../Button';
-import { LinearProgress } from '../Progress';
-import { Tooltip } from '../Tooltip';
-import theme from '../../theme';
-import {
-  StyledPaper,
-  StyledToolbar,
-  StyledToolbarButtonContainer,
-  StyledCollapse,
-  StyledUploadFile,
-} from './UploadManager.styled';
-
-import type { UploadManagerProps, UploadFileProps } from './UploadManager.types';
-
-/**
- * Component used inside the UploadManager to display a file
- */
-const UploadFile = ({ file, onCancel, onRetry }: UploadFileProps) => {
-  const [mouseOnErrorIconButton, setMouseOnErrorIconButton] = useState(false);
-
-  const progress: number = useMemo(() => {
-    if (file.meta?.calculatedProgress) {
-      // return calculated progress for mrxs files
-      return file.meta.calculatedProgress as number;
-    }
-    return file.progress?.percentage || 0;
-  }, [file.meta, file.progress?.percentage]);
-
-  const fileFormatConverting = useMemo(() => {
-    if (file.extension === 'isyntax') {
-      return 'iSyntax';
-    }
-    if (file.extension === 'i2syntax') {
-      return 'i2Syntax';
-    }
-    return '';
-  }, [file]);
-
-  return (
-    <>
-      <StyledUploadFile>
-        {!file.meta?.errorMessage && (
-          <>
-            <Typography
-              variant="body5"
-              sx={{
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-              }}
-            >
-              {file.name}
-            </Typography>
-            {progress < 100 && (
-              <Tooltip title="Cancel">
-                <Box>
-                  <Button
-                    onClick={() => onCancel && onCancel(file.id)}
-                    variant="ghost"
-                    color="secondary"
-                    icon={<Close style={{ color: theme.palette.neutralGrey[40] }} />}
-                  />
-                </Box>
-              </Tooltip>
-            )}
-            {progress === 100 && file.meta.postProcessComplete && (
-              <Tooltip title="Done">
-                <Box>
-                  <Button
-                    variant="ghost"
-                    icon={<Success />}
-                  />
-                </Box>
-              </Tooltip>
-            )}
-          </>
-        )}
-        {file.meta?.errorMessage! && (
-          <>
-            <Typography
-              variant="body5"
-              sx={{
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                flexShrink: 6,
-              }}
-            >
-              {file.name}
-            </Typography>
-            <Typography
-              color="error"
-              variant="body4"
-              sx={{
-                marginRight: '30px',
-                flexGrow: 3,
-                flexShrink: 0,
-                flexBasis: 'auto',
-                textAlign: 'right',
-                maxWidth: '290px',
-                whiteSpace: 'pre-wrap',
-              }}
-            >
-              {file.meta?.errorMessage as string}
-            </Typography>
-
-            <Tooltip
-              title={file.meta.retry ? 'Retry' : 'Retry by dragging and dropping the file again.'}
-              placement="top"
-            >
-              <Box>
-                <Button
-                  onMouseEnter={() => file.meta.retry && setMouseOnErrorIconButton(true)}
-                  onMouseLeave={() => file.meta.retry && setMouseOnErrorIconButton(false)}
-                  onClick={() => {
-                    if (file.meta.retry) {
-                      setMouseOnErrorIconButton(false);
-                      if (onRetry) onRetry(file.id);
-                    }
-                  }}
-                  icon={
-                    mouseOnErrorIconButton ? (
-                      <RefreshLeft style={{ color: theme.palette.neutralGrey[0] }} />
-                    ) : (
-                      <Error16 style={{ color: theme.palette.red[5] }} />
-                    )
-                  }
-                  variant="ghost"
-                  color="secondary"
-                  sx={{
-                    cursor: file.meta.retry ? 'pointer' : 'default',
-                  }}
-                />
-              </Box>
-            </Tooltip>
-          </>
-        )}
-        {!file.meta?.errorMessage && file.meta?.postProcessConverting! && (
-          <Typography
-            variant="body5"
-            sx={{
-              marginRight: '30px',
-              flexGrow: 3,
-              flexShrink: 0,
-              flexBasis: 'auto',
-              textAlign: 'right',
-              maxWidth: '290px',
-              whiteSpace: 'pre-wrap',
-            }}
-          >
-            Converting {fileFormatConverting} file...
-          </Typography>
-        )}
-      </StyledUploadFile>
-
-      {!file.meta?.errorMessage && (
-        <>
-          {file.progress?.uploadStarted! > 0 && (
-            <>
-              {progress < 100 && (
-                <LinearProgress
-                  variant="determinate"
-                  value={progress}
-                />
-              )}
-              {progress >= 100 && !file.meta?.postProcessComplete && <LinearProgress />}
-            </>
-          )}
-        </>
-      )}
-    </>
-  );
-};
-
-/**
- * Component used to display a list of files
- */
-const UploadManager = ({
-  title,
-  subTitle,
-  files,
-  onClose,
-  onCancel,
-  onRetry,
-}: UploadManagerProps) => {
-  const [expanded, setExpanded] = useState<boolean>(true);
-
-  const handleExpandClick = () => {
-    setExpanded((exp) => !exp);
-  };
-
-  return (
-    <Grow
-      in
-      // Should this be configurable?
-      style={{
-        position: 'absolute',
-        bottom: '20px',
-        right: '20px',
-      }}
-    >
-      <StyledPaper elevation={1}>
-        <StyledToolbar>
-          <Typography variant="h9">{title}</Typography>
-          <Typography
-            variant="body1"
-            sx={{ marginLeft: '8px' }}
-          >
-            {subTitle}
-          </Typography>
-
-          <StyledToolbarButtonContainer>
-            <Tooltip title={expanded ? 'Minimize' : 'Maximize'}>
-              <Box>
-                <Button
-                  onClick={handleExpandClick}
-                  variant="ghost"
-                  color="secondary"
-                  icon={<ArrowUp style={{ color: theme.palette.neutralGrey[40] }} />}
-                  size="small"
-                  sx={{
-                    transform: expanded ? 'rotate(0deg)' : 'rotate(180deg)',
-                  }}
-                />
-              </Box>
-            </Tooltip>
-
-            <Tooltip title="Close">
-              <Box>
-                <Button
-                  onClick={onClose}
-                  variant="ghost"
-                  color="secondary"
-                  icon={<Close style={{ color: theme.palette.neutralGrey[40] }} />}
-                  size="small"
-                />
-              </Box>
-            </Tooltip>
-          </StyledToolbarButtonContainer>
-        </StyledToolbar>
-
-        {expanded && <Divider orientation="horizontal" />}
-
-        <StyledCollapse
-          in={expanded}
-          timeout="auto"
-          unmountOnExit
-        >
-          {files.map((download, index) => (
-            <Fragment key={download.id}>
-              <UploadFile
-                file={download}
-                onCancel={onCancel}
-                onRetry={onRetry}
-              />
-              {index !== files.length - 1 && <Divider orientation="horizontal" />}
-            </Fragment>
-          ))}
-        </StyledCollapse>
-      </StyledPaper>
-    </Grow>
-  );
-};
-
-export default UploadManager;

package/src/components/UploadManager/UploadManager.types.ts

@@ -1,16 +0,0 @@
-import { UppyFile } from '@uppy/core';
-
-export interface UploadFileProps {
-  file: UppyFile;
-  onCancel?: (id: string) => void;
-  onRetry?: (id: string) => void;
-}
-
-export interface UploadManagerProps {
-  title: string;
-  subTitle?: string;
-  files: UppyFile[];
-  onClose?: () => void;
-  onCancel?: (id: string) => void;
-  onRetry?: (id: string) => void;
-}

package/src/components/UploadManager/index.ts

@@ -1,5 +0,0 @@
-import UploadManager from './UploadManager';
-import type { UploadManagerProps, UploadFileProps } from './UploadManager.types';
-
-export { UploadManager };
-export type { UploadManagerProps, UploadFileProps };

package/src/components/index.ts

@@ -1,23 +0,0 @@
-export * from './Alert';
-export * from './Button';
-export * from './Card';
-export * from './Checkbox';
-export * from './Chip';
-export * from './DataTable';
-export * from './DatePicker';
-export * from './Dialog';
-export * from './Divider';
-export * from './Dropdown';
-export * from './FileDnDZone';
-export * from './List';
-export * from './LoadingIndicator';
-export * from './Menu';
-export * from './Pagination';
-export * from './ProductLabel';
-export * from './Progress';
-export * from './Radio';
-export * from './Stepper';
-export * from './TabbedPanel';
-export * from './TextField';
-export * from './Tooltip';
-export * from './UploadManager';

package/src/foundations/index.ts

@@ -1,4 +0,0 @@
-export { default as palette } from './palette';
-export { default as typography } from './typography';
-export { default as spacing } from './spacing';
-export { subScrollbarWidth } from './styles';