@lunit/oui 1.0.0-alpha.9 → 1.0.1-alpha.10

package/src/components/TextField/components/PasswordInput.tsx

@@ -1,92 +0,0 @@
-import React, { forwardRef, useState } from 'react';
-import { InputMsg, BaseTextFieldContainer } from '../../BaseTextField/BaseTextField.styled';
-import { BaseTextInput, LeftIconContainer, RightIconContainer } from '../TextInput.styled';
-import { ShowHidePasswordButton } from './Buttons';
-
-import type { PasswordTextInputProps } from '../TextInput.types';
-
-interface PasswordInputContainerProps extends PasswordTextInputProps {
-  children: React.ReactNode;
-  hidePassword: boolean;
-  handlePasswordShowHide: () => void;
-  width?: string | number;
-}
-
-function PasswordInputContainer(props: PasswordInputContainerProps) {
-  const {
-    error,
-    disabled,
-    helperMsg,
-    leftIcon,
-    children,
-    hidePassword,
-    handlePasswordShowHide,
-    width,
-    OuterBoxProps,
-  } = props;
-
-  return (
-    <BaseTextFieldContainer
-      {...OuterBoxProps}
-      width={width}
-    >
-      {leftIcon && (
-        <LeftIconContainer sx={disabled ? { opacity: '0.8' } : undefined}>
-          {leftIcon}
-        </LeftIconContainer>
-      )}
-      {children}
-      <RightIconContainer error={error}>
-        {!disabled && (
-          <ShowHidePasswordButton
-            onClick={(event) => {
-              event.preventDefault();
-              handlePasswordShowHide();
-            }}
-            isHidden={hidePassword}
-          />
-        )}
-      </RightIconContainer>
-      {error ? (
-        <InputMsg
-          variant="body5"
-          error
-        >
-          {error}
-        </InputMsg>
-      ) : (
-        helperMsg && <InputMsg variant="body5">{helperMsg}</InputMsg>
-      )}
-    </BaseTextFieldContainer>
-  );
-}
-
-const PasswordInput = forwardRef(
-  (props: PasswordTextInputProps, ref: React.ForwardedRef<HTMLInputElement>) => {
-    const { error, helperMsg, leftIcon, type, inputSX, ...otherInputProps } = props;
-
-    const [hidePassword, setHidePassword] = useState(true);
-
-    function handlePasswordShowHide() {
-      setHidePassword(!hidePassword);
-    }
-
-    return (
-      <PasswordInputContainer
-        {...props}
-        hidePassword={hidePassword}
-        handlePasswordShowHide={() => handlePasswordShowHide()}
-      >
-        <BaseTextInput
-          type={hidePassword ? 'password' : 'text'}
-          ref={ref}
-          {...otherInputProps}
-          leftIcon={leftIcon}
-          sx={inputSX}
-        />
-      </PasswordInputContainer>
-    );
-  },
-);
-
-export default PasswordInput;

package/src/components/TextField/index.ts

@@ -1,7 +0,0 @@
-import TextInput from './TextInput';
-import type { TextInputProps } from './TextInput.types';
-import TextArea from './TextArea';
-import type { TextAreaProps } from './TextArea.types';
-
-export { TextInput, TextArea };
-export type { TextInputProps, TextAreaProps };

package/src/components/Tooltip/Tooltip.styled.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { Tooltip as MuiTooltip, styled, tooltipClasses } from '@mui/material';
-import typographyOptions from '../../foundations/typography';
-import { resizeArrowBySize, setMarginByPlacement, setPaddingBySize } from './Tooltip.utils';
-import type { TooltipProps } from './Tooltip.types';
-
-const BaseTooltip = styled(
-  ({ className, ref, ...props }: TooltipProps) => (
-    <MuiTooltip
-      {...props}
-      ref={ref}
-      classes={{ popper: className }}
-    />
-  ),
-  {
-    shouldForwardProp: (prop) => prop !== 'noPadding',
-  },
-)(({ theme, size = 'small', placement = 'bottom', noPadding }) => ({
-  [`& .${tooltipClasses.tooltip}`]: {
-    ...typographyOptions.body5,
-    margin: '0px !important',
-    padding: noPadding ? '0px !important' : setPaddingBySize(size),
-    backgroundColor: theme.palette.neutralGrey[75],
-    borderRadius: size === 'small' ? '4px' : '8px',
-    filter:
-      'drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.32)) drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.4))',
-  },
-  [`& .${tooltipClasses.arrow}`]: {
-    color: theme.palette.neutralGrey[75],
-    margin: `${setMarginByPlacement(placement, resizeArrowBySize(size, placement))} !important`,
-    width: `${resizeArrowBySize(size, placement).width}px  !important`,
-    height: `${resizeArrowBySize(size, placement).height}px !important`,
-  },
-}));
-
-export default BaseTooltip;

package/src/components/Tooltip/Tooltip.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import { Box, Typography } from '@mui/material';
-import { forwardRef } from 'react';
-import BaseTooltip from './Tooltip.styled';
-import type { TooltipProps } from './Tooltip.types';
-
-const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
-  (
-    {
-      icon,
-      title,
-      children,
-      size = 'small',
-      placement = 'bottom',
-      noPadding = false,
-      ...otherProps
-    }: TooltipProps,
-    ref,
-  ) => {
-    return (
-      <BaseTooltip
-        ref={ref}
-        arrow
-        size={size}
-        PopperProps={{
-          popperOptions: {
-            modifiers: [
-              {
-                name: 'offset',
-                enabled: true,
-                options: {
-                  offset: [0, 6],
-                },
-              },
-            ],
-          },
-        }}
-        title={
-          icon && size === 'small' ? (
-            <Box sx={{ display: 'flex', flexDirection: 'row', gap: '8px' }}>
-              {icon}
-              {title && <Typography variant="body5">{title}</Typography>}
-            </Box>
-          ) : (
-            title
-          )
-        }
-        placement={placement}
-        noPadding={noPadding}
-        {...otherProps}
-      >
-        {children}
-      </BaseTooltip>
-    );
-  },
-);
-
-export default Tooltip;

package/src/components/Tooltip/Tooltip.types.ts

@@ -1,24 +0,0 @@
-import { ReactNode } from 'react';
-import type { TooltipClasses, TooltipProps as MuiTooltipProps } from '@mui/material';
-
-export type Position = Pick<TooltipProps, 'placement'>;
-
-export type TooltipSizes = 'small' | 'large';
-
-export type TooltipSize = { width: number; height: number };
-
-export type TooltipPlacement =
-  | TooltipClasses['tooltipPlacementBottom']
-  | TooltipClasses['tooltipPlacementLeft']
-  | TooltipClasses['tooltipPlacementRight']
-  | TooltipClasses['tooltipPlacementTop'];
-
-export type ArrowSizeBySize = Record<TooltipSizes, TooltipSize>;
-
-export type TooltipPlacementToSize = Record<TooltipPlacement, ArrowSizeBySize>;
-
-export interface TooltipProps extends MuiTooltipProps {
-  icon?: ReactNode;
-  size?: TooltipSizes;
-  noPadding?: boolean;
-}

package/src/components/Tooltip/Tooltip.utils.ts

@@ -1,46 +0,0 @@
-import type {
-  TooltipPlacement,
-  TooltipPlacementToSize,
-  TooltipSize,
-  ArrowSizeBySize,
-  TooltipSizes,
-} from './Tooltip.types';
-
-// small(10px * 6px) -> (10/2)^2 + 6^2 = 7.8^2
-// large(16px * 8px)   -> (16/2)^2 + 8^2 = 11.3^2
-const setArrowSizeBySize: ArrowSizeBySize = {
-  small: { width: 11, height: 7.8 },
-  large: { width: 16, height: 11.3 },
-};
-
-const tooltipPlacementToSize: TooltipPlacementToSize = {
-  bottom: setArrowSizeBySize,
-  left: setArrowSizeBySize,
-  right: setArrowSizeBySize,
-  top: setArrowSizeBySize,
-};
-
-export const resizeArrowBySize = (
-  tooltipType: TooltipSizes,
-  tooltipPlacement: TooltipPlacement,
-): TooltipSize => {
-  const size = tooltipPlacementToSize[tooltipPlacement][tooltipType];
-  if (tooltipPlacement === 'left' || tooltipPlacement === 'right') {
-    return { width: size.height, height: size.width };
-  }
-  return size;
-};
-
-export const setMarginByPlacement = (tooltipPlacement: TooltipPlacement, margin: TooltipSize) =>
-  ({
-    bottom: `-${margin.height}px 0 0 0`,
-    right: `0 0 0 -${margin.width}px`,
-    left: `0 -${margin.width}px 0 0`,
-    top: `0 0 -${margin.height}px 0`,
-  })[tooltipPlacement];
-
-export const setPaddingBySize = (tooltipSize: TooltipSizes) =>
-  ({
-    small: '6px 8px',
-    large: '12px 16px',
-  })[tooltipSize];

package/src/components/Tooltip/index.ts

@@ -1,5 +0,0 @@
-import Tooltip from './Tooltip';
-import type { TooltipProps } from './Tooltip.types';
-
-export { Tooltip };
-export type { TooltipProps };

package/src/components/UploadManager/UploadManager.styled.ts

@@ -1,49 +0,0 @@
-import { Paper, Toolbar, Collapse } from '@mui/material';
-import { styled } from '@mui/material/styles';
-
-const StyledPaper = styled(Paper)(({ theme }) => ({
-  overflow: 'hidden',
-  borderRadius: '10px',
-  width: '500px',
-  backgroundColor: theme.palette.neutralGrey[90],
-}));
-
-const StyledToolbar = styled(Toolbar)({
-  padding: '20px 40px 20px 32px',
-  paddingRight: '40px !important',
-  paddingLeft: '32px !important',
-  color: '#fff',
-  minHeight: 'unset !important',
-});
-
-const StyledToolbarButtonContainer = styled(Toolbar)({
-  position: 'absolute',
-  display: 'flex',
-  gap: '12px',
-  right: '30px',
-  paddingRight: '4px !important',
-});
-
-const StyledCollapse = styled(Collapse)({
-  maxHeight: '320px',
-  overflowY: 'auto',
-  overflowX: 'hidden',
-});
-
-const StyledUploadFile = styled('div')({
-  display: 'flex',
-  justifyContent: 'space-between',
-  gap: '16px',
-  alignItems: 'center',
-  padding: '20px 30px 20px 32px',
-  paddingRight: '30x !important',
-  paddingLeft: '32px !important',
-});
-
-export {
-  StyledPaper,
-  StyledToolbar,
-  StyledToolbarButtonContainer,
-  StyledCollapse,
-  StyledUploadFile,
-};

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 './Icons';
-export * from './List';
-export * from './LoadingIndicator';
-export * from './Menu';
-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,3 +0,0 @@
-export { default as palette } from './palette';
-export { default as typography } from './typography';
-export { default as spacing } from './spacing';