@lunit/oui 1.0.1-alpha.13 → 1.0.1-alpha.2

package/src/components/FileDnDZone/FileDnDZone.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Typography } from '@mui/material';
+import {
+  BaseFileDnDZone,
+  DnDSection,
+  DnDMainBox,
+  FileDnDZoneContainer,
+} from './FileDnDZone.styled';
+import FileDnDZoneProps from './FileDnDZone.types';
+
+import theme from '../../theme';
+import { DEFAULT_FILE_FORMATS } from './FileDnDZone.utils';
+
+const FileDnDZone = ({
+  slidesUploaded,
+  maxSlideLimit = 500,
+  acceptedFileFormats = DEFAULT_FILE_FORMATS,
+  disabled,
+  WrapperProps,
+  OuterBoxProps,
+  InnerBoxProps,
+  SectionBoxProps,
+}: FileDnDZoneProps) => {
+  const disabledSX = {
+    opacity: 0.4,
+  };
+
+  return (
+    <FileDnDZoneContainer
+      sx={disabled ? disabledSX : {}}
+      {...WrapperProps}
+    >
+      <BaseFileDnDZone {...OuterBoxProps}>
+        <Typography
+          variant="h7"
+          sx={{ color: theme.palette.neutralGrey[25] }}
+        >
+          Drag and drop your slide files here
+        </Typography>
+        <DnDMainBox {...InnerBoxProps}>
+          <DnDSection {...SectionBoxProps}>
+            <Typography
+              variant="body_sb1"
+              sx={{ color: theme.palette.neutralGrey[45] }}
+            >
+              Supported file formats
+            </Typography>
+            <Typography
+              variant="body_sb1"
+              sx={{ color: theme.palette.neutralGrey[25], padding: '0 18px', textAlign: 'center' }}
+            >
+              {acceptedFileFormats}
+            </Typography>
+          </DnDSection>
+          <DnDSection {...SectionBoxProps}>
+            <Typography
+              variant="body_sb1"
+              sx={{ color: theme.palette.neutralGrey[45] }}
+            >
+              Allowed number of slides
+            </Typography>
+            <Typography
+              variant="body_sb1"
+              sx={{ color: theme.palette.neutralGrey[25] }}
+            >
+              {`You have uploaded ${slidesUploaded.toLocaleString()} slides on Lunit SCOPE.`}
+            </Typography>
+            <Typography
+              variant="body_sb1"
+              sx={{ color: theme.palette.neutralGrey[25] }}
+            >
+              {`The number of slides cannot exceed ${maxSlideLimit.toLocaleString()}.`}
+            </Typography>
+          </DnDSection>
+        </DnDMainBox>
+      </BaseFileDnDZone>
+    </FileDnDZoneContainer>
+  );
+};
+
+export default FileDnDZone;

package/src/components/FileDnDZone/FileDnDZone.types.ts

@@ -0,0 +1,14 @@
+import type { BoxProps } from '@mui/material';
+
+interface FileDnDZoneProps {
+  slidesUploaded: number;
+  maxSlideLimit?: number;
+  acceptedFileFormats?: string;
+  disabled?: boolean;
+  WrapperProps?: BoxProps;
+  OuterBoxProps?: BoxProps;
+  InnerBoxProps?: BoxProps;
+  SectionBoxProps?: BoxProps;
+}
+
+export default FileDnDZoneProps;

package/src/components/FileDnDZone/FileDnDZone.utils.ts

@@ -0,0 +1,3 @@
+const DEFAULT_FILE_FORMATS = 'Leica(.svs), 3DHistech(.mrxs), and Philips(.isyntax, .tiff)';
+
+export { DEFAULT_FILE_FORMATS };

package/src/components/FileDnDZone/index.ts

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

package/src/components/List/List.styled.ts

@@ -0,0 +1,31 @@
+import { styled, List, ListSubheader } from '@mui/material';
+import type { ListSubheaderProps } from './List.types';
+
+export const MuiList = styled(List)(({ theme }) => ({
+  padding: theme.spacing(2),
+}));
+
+export const MuiListSubheader = styled(ListSubheader, {
+  shouldForwardProp: (prop) => !['type', 'clickable'].includes(prop.toString()),
+})<ListSubheaderProps>(({ type, clickable, theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  height: '36px',
+  padding: '0px 8px',
+  backgroundColor: 'transparent',
+  ...(type === 'bold'
+    ? {
+        ...theme.typography.body_b1,
+        color: theme.palette.neutralGrey[0],
+      }
+    : {
+        ...theme.typography.small_body_m1,
+        color: theme.palette.neutralGrey[40],
+      }),
+  ...(clickable && { cursor: 'pointer' }),
+  svg: {
+    width: '20px',
+    height: '20px',
+  },
+}));

package/src/components/List/List.tsx

@@ -0,0 +1,71 @@
+/* eslint-disable no-nested-ternary */
+import React from 'react';
+import { createContext, useMemo } from 'react';
+import { ArrowDownSm, ArrowUpSm } from '../../icons';
+import { Collapse } from '@mui/material';
+import { MuiList, MuiListSubheader } from './List.styled';
+import type { ListProps, ListContextValue } from './List.types';
+
+export const ListContext = createContext<ListContextValue>({
+  size: 'small',
+  showCheck: false,
+});
+
+const List = ({
+  size = 'small',
+  showCheck = false,
+  subheader,
+  subheaderType = 'bold',
+  open = 'visible',
+  children,
+  onOpen,
+  onClose,
+  ...props
+}: ListProps) => {
+  const contextValue = useMemo<ListContextValue>(() => ({ size, showCheck }), [size, showCheck]);
+
+  const collapsible = open !== 'visible';
+
+  const onSubheaderClick = ((event: React.MouseEvent<HTMLLIElement>) => {
+    if (open === 'visible') {
+      return;
+    }
+    const handler = open ? onClose : onOpen;
+    handler?.(event);
+  }) as React.ComponentProps<typeof MuiListSubheader>['onClick'];
+
+  return (
+    <ListContext.Provider value={contextValue}>
+      <MuiList
+        {...props}
+        subheader={
+          subheader ? (
+            <MuiListSubheader
+              type={subheaderType}
+              clickable={collapsible}
+              tabIndex={collapsible ? 0 : undefined}
+              onClick={onSubheaderClick}
+            >
+              {subheader}
+              {collapsible && (open ? <ArrowDownSm /> : <ArrowUpSm />)}
+            </MuiListSubheader>
+          ) : null
+        }
+      >
+        {collapsible ? (
+          <Collapse
+            in={open}
+            timeout="auto"
+            unmountOnExit
+          >
+            {children}
+          </Collapse>
+        ) : (
+          children
+        )}
+      </MuiList>
+    </ListContext.Provider>
+  );
+};
+
+export default List;

package/src/components/List/List.types.ts

@@ -0,0 +1,24 @@
+import type {
+  ListProps as MuiListProps,
+  ListSubheaderProps as MuiListSubheaderProps,
+} from '@mui/material';
+
+export type ListSize = 'small' | 'medium' | 'large';
+
+export interface ListProps extends MuiListProps {
+  size?: ListSize;
+  subheaderType?: ListSubheaderProps['type'];
+  open?: boolean | 'visible';
+  onOpen?: (event: React.MouseEvent<HTMLLIElement>) => void;
+  onClose?: (event: React.MouseEvent<HTMLLIElement>) => void;
+  showCheck?: boolean;
+}
+
+export interface ListSubheaderProps extends MuiListSubheaderProps {
+  type?: 'bold' | 'normal';
+  clickable?: boolean;
+}
+export interface ListContextValue {
+  size: ListSize;
+  showCheck: boolean;
+}

package/src/components/List/List.utils.ts

@@ -0,0 +1,14 @@
+import { ListSize } from './List.types';
+
+const getPadding = (size: ListSize) => {
+  if (size === 'large') {
+    return '14px';
+  }
+  if (size === 'medium') {
+    return '10px';
+  }
+  // 'small'
+  return '6px';
+};
+
+export default getPadding;

package/src/components/List/ListItem.styled.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import {
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  styled,
+  typographyClasses,
+} from '@mui/material';
+import { Check, Dummy } from '../../icons';
+import getPadding from './List.utils';
+import type { StyledListItemButtonProps } from './ListItem.types';
+
+export const StyledListItem = styled(ListItem)({
+  width: '100%',
+});
+
+export const StyledListItemButton = styled(({ size, ...props }: StyledListItemButtonProps) => (
+  <ListItemButton {...props} />
+))(({ theme, size }) => ({
+  borderRadius: '8px',
+  padding: `${getPadding(size)} 8px`,
+  '&.Mui-selected': {
+    background: 'transparent',
+  },
+  '&:hover, &.Mui-selected:hover, &.Mui-focusVisible, &.Mui-selected.Mui-focusVisible': {
+    backgroundColor: theme.palette.neutralGrey[75],
+  },
+}));
+
+export const slotStyles = {
+  minWidth: '20px',
+  height: '20px',
+  color: 'currentColor',
+  svg: {
+    width: '100%',
+    height: '100%',
+    color: 'currentColor !important',
+  },
+};
+
+export const StyledListItemText = styled(ListItemText)(({ theme }) => ({
+  margin: 0,
+  [`& .${typographyClasses.body1}`]: {
+    ...theme.typography.body5,
+  },
+}));
+
+export const StyledListItemStartSlot = styled(ListItemIcon)(({ theme }) => ({
+  ...slotStyles,
+  marginRight: theme.spacing(2),
+}));
+
+export const StyledListItemEndSlot = styled(ListItemIcon)(({ theme }) => ({
+  ...slotStyles,
+  justifyContent: 'flex-end',
+  marginLeft: theme.spacing(2),
+}));
+
+export const CheckIcon = styled(Check)({ color: '#fff' });
+export const EmptyIcon = styled(Dummy)({ visibility: 'hidden' });

package/src/components/List/ListItem.tsx

@@ -0,0 +1,66 @@
+import React, { useContext } from 'react';
+import { ListContext } from '../List/List';
+import {
+  StyledListItem,
+  StyledListItemButton,
+  StyledListItemText,
+  StyledListItemStartSlot,
+  StyledListItemEndSlot,
+  CheckIcon,
+  EmptyIcon,
+} from './ListItem.styled';
+import type { ListItemComponent, ListItemProps } from './ListItem.types';
+
+const ListItem = (({
+  // Root props
+  rootProps,
+  className,
+  classes,
+  style,
+  sx,
+  // Button props
+  label,
+  startElement,
+  endElement,
+  selected,
+  ...props
+}: ListItemProps) => {
+  const { size, showCheck } = useContext(ListContext);
+
+  const checkElement = (() => {
+    if (showCheck) {
+      if (selected) {
+        return <CheckIcon />;
+      }
+      return <EmptyIcon />;
+    }
+    return null;
+  })();
+
+  return (
+    <StyledListItem
+      {...rootProps}
+      disablePadding
+      className={className}
+      classes={classes}
+      style={style}
+      sx={sx}
+    >
+      <StyledListItemButton
+        {...props}
+        disableRipple
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        component={(props as any).component ?? 'span'}
+        size={size}
+        selected={selected}
+      >
+        {checkElement && <StyledListItemStartSlot>{checkElement}</StyledListItemStartSlot>}
+        {startElement && <StyledListItemStartSlot>{startElement}</StyledListItemStartSlot>}
+        <StyledListItemText primary={label} />
+        {endElement && <StyledListItemEndSlot>{endElement}</StyledListItemEndSlot>}
+      </StyledListItemButton>
+    </StyledListItem>
+  );
+}) as ListItemComponent;
+
+export default ListItem;

package/src/components/List/ListItem.types.ts

@@ -0,0 +1,40 @@
+import {
+  ExtendButtonBase,
+  ExtendButtonBaseTypeMap,
+  ListItemProps as MuiListItemProps,
+  ListItemButtonProps as MuiListItemButtonProps,
+} from '@mui/material';
+import { OverrideProps } from '@mui/material/OverridableComponent';
+import type { ListSize } from '../List/List.types';
+
+type ListItemRootBasePropsKey = 'className' | 'classes' | 'style' | 'sx';
+
+export interface ListItemBaseProps
+  extends Omit<MuiListItemButtonProps, ListItemRootBasePropsKey>,
+    Pick<MuiListItemProps, ListItemRootBasePropsKey> {
+  label?: React.ReactNode | string;
+  startElement?: React.ReactNode;
+  endElement?: React.ReactNode;
+  rootProps?: MuiListItemProps;
+}
+
+export type ListItemTypeMap<
+  P = {},
+  D extends React.ElementType = 'span',
+> = ExtendButtonBaseTypeMap<{
+  props: P & ListItemBaseProps;
+  defaultComponent: D;
+}>;
+
+/** @see ListItemButton {@link @mui/material/ListItemButton} */
+export type ListItemComponent = ExtendButtonBase<ListItemTypeMap>;
+
+export type ListItemProps<
+  D extends React.ElementType = ListItemTypeMap['defaultComponent'],
+  P = {},
+> = OverrideProps<ListItemTypeMap<P, D>, D>;
+
+export interface StyledListItemButtonProps extends MuiListItemButtonProps {
+  component?: React.ElementType;
+  size: ListSize;
+}

package/src/components/List/ListItemCaption.styled.tsx

@@ -0,0 +1,7 @@
+import { styled, Typography } from '@mui/material';
+
+// eslint-disable-next-line import/prefer-default-export
+export const StyledListItemCaption = styled(Typography)(({ theme }) => ({
+  ...theme.typography.body_m1,
+  color: theme.palette.neutralGrey[45],
+}));

package/src/components/List/ListItemCaption.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import clsx from 'clsx';
+import { StyledListItemCaption } from './ListItemCaption.styled';
+import { ListItemCaptionProps } from './ListItemCaption.types';
+
+export const ListItemCaptionClassName = 'ListItemCaption';
+
+const ListItemCaption = (props: ListItemCaptionProps) => {
+  const { className, ...otherProps } = props;
+  return (
+    <StyledListItemCaption
+      {...otherProps}
+      className={clsx(ListItemCaptionClassName, className)}
+    />
+  );
+};
+
+export default ListItemCaption;

package/src/components/List/ListItemCaption.types.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { TypographyProps as ListItemCaptionProps } from '@mui/material';

package/src/components/List/index.ts

@@ -0,0 +1,8 @@
+export { default as List } from './List';
+export type { ListProps } from './List.types';
+
+export { default as ListItem } from './ListItem';
+export type { ListItemProps } from './ListItem.types';
+
+export { default as ListItemCaption } from './ListItemCaption';
+export type { ListItemCaptionProps } from './ListItemCaption.types';

package/src/components/LoadingIndicator/LoadingIndicator.styled.tsx

@@ -0,0 +1,40 @@
+import { Box, styled, Typography } from '@mui/material';
+
+export const LoadingOverlay = styled(Box)({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  zIndex: 99999,
+});
+
+export const LoadingIndicatorBox = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: '440px',
+  height: '360px',
+  padding: `${theme.spacing(13)} ${theme.spacing(4)}`,
+  borderRadius: '12px',
+  backgroundColor: theme.palette.neutralGrey[85],
+  color: theme.palette.neutralGrey[0],
+  boxSizing: 'border-box',
+}));
+
+export const LoadingMessage = styled(Typography)(({ theme }) => ({
+  ...theme.typography.h8,
+  marginTop: theme.spacing(12),
+  marginBottom: theme.spacing(5),
+}));
+
+export const LoadingDetails = styled(Typography)(({ theme }) => ({
+  ...theme.typography.body1,
+  textAlign: 'center',
+}));

package/src/components/LoadingIndicator/LoadingIndicator.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { Player } from '@lottiefiles/react-lottie-player';
+import {
+  LoadingOverlay,
+  LoadingIndicatorBox,
+  LoadingMessage,
+  LoadingDetails,
+} from './LoadingIndicator.styled';
+import type { LoadingIndicatorProps } from './LoadingIndicator.types';
+
+const DotLoadingAnimation = require('./assets/DotLoadingAnimation.json');
+const DnaLoadingAnimation = require('./assets/DnaLoadingAnimation.json');
+
+const LoadingIndicator = ({
+  message,
+  details,
+  loadingAnimation = 'dot',
+}: LoadingIndicatorProps) => {
+  return (
+    <LoadingOverlay>
+      <LoadingIndicatorBox>
+        <Player
+          autoplay
+          loop
+          src={loadingAnimation === 'dot' ? DotLoadingAnimation : DnaLoadingAnimation}
+          style={{ height: '112px', width: '140px' }}
+        />
+        <LoadingMessage>{message}</LoadingMessage>
+        <LoadingDetails>
+          {details || (
+            <>
+              Please wait.
+              <br />
+              It may take a few minutes.
+            </>
+          )}
+        </LoadingDetails>
+      </LoadingIndicatorBox>
+    </LoadingOverlay>
+  );
+};
+
+export default LoadingIndicator;

package/src/components/LoadingIndicator/LoadingIndicator.types.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+export interface LoadingIndicatorProps {
+  message?: string;
+  details?: ReactNode;
+  loadingAnimation?: 'dot' | 'dna';
+}