@lunit/oui 1.0.1-alpha.1 → 1.0.1-alpha.11

package/src/components/FileDnDZone/FileDnDZone.tsx

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

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

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

package/src/components/FileDnDZone/index.ts

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/List/index.ts

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

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

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

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