@lunit/oui 1.0.0-alpha.1

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

@@ -0,0 +1,92 @@
+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

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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,46 @@
+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

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

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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,271 @@
+import React from 'react';
+import { Grow, Typography, Box } from '@mui/material';
+
+import { ArrowDown, 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={<ArrowDown 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

@@ -0,0 +1,16 @@
+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

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

package/src/components/index.ts

@@ -0,0 +1,23 @@
+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

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