@lunit/oui 1.0.1 → 1.1.0-alpha.2

package/src/components/Dropdown/IconDropdown.styled.tsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import { Select, styled } from '@mui/material';
-import type { Theme } from '@mui/material';
-import type { BaseIconDropdownProps, IconDropdownProps } from './IconDropdown.types';
-
-const baseIconDropdownStyle = (theme: Theme) => {
-  return {
-    fontFamily:
-      'Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
-    fontSize: '14px',
-    fontWeight: '400',
-    background: theme.palette.neutralGrey[85],
-    width: '52px',
-    borderRadius: '8px',
-    border: '1px solid transparent',
-    padding: '0 2px 0 0',
-    height: '36px',
-    color: theme.palette.neutralGrey[5],
-    '& fieldset': {
-      border: 'none',
-    },
-    '&.Mui-focused': {
-      border: `1px solid transparent !important`,
-    },
-    '&.Mui-disabled': {
-      opacity: '0.4',
-    },
-    '.MuiSvgIcon-root ': {
-      cursor: 'pointer',
-      color: theme.palette.neutralGrey[5],
-      '&.Mui-disabled': {
-        color: theme.palette.neutralGrey[45],
-      },
-    },
-    '.MuiSelect-select': {
-      display: 'flex',
-      padding: '0 0 0 8px !important',
-      width: 'fit-content',
-    },
-    '&:hover': {
-      backgroundColor: theme.palette.neutralGrey[70],
-      opacity: 0.8,
-      border: `1px solid transparent`,
-      '&.Mui-disabled': {
-        border: '1px solid transparent',
-      },
-    },
-  };
-};
-
-const toggledIconDropdownStyle = (theme: Theme) => {
-  return {
-    backgroundColor: theme.palette.neutralGrey[70],
-    border: `1px solid transparent`,
-  };
-};
-
-const BaseIconDropdown = styled(Select, {
-  shouldForwardProp: (prop) => !['small', 'isToggled'].includes(prop.toString()),
-})<BaseIconDropdownProps>(({ theme, isToggled }) => {
-  let style = baseIconDropdownStyle(theme);
-
-  if (isToggled) {
-    style = {
-      ...style,
-      ...toggledIconDropdownStyle(theme),
-    };
-  }
-
-  return style;
-});
-
-const DropdownContainer = styled('div')<IconDropdownProps>(() => {
-  return {
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    minWidth: '32px',
-  };
-});
-
-export { BaseIconDropdown, DropdownContainer };

package/src/components/Dropdown/IconDropdown.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import { useState } from 'react';
-import { ArrowDownXs } from '../../icons';
-import { BaseIconDropdown } from './IconDropdown.styled';
-import theme from '../../theme';
-import type { IconDropdownProps } from './IconDropdown.types';
-
-const IconDropdown = ({ open, disabled, children, ...otherProps }: IconDropdownProps) => {
-  const [isOpen, setOpen] = useState<boolean>(false);
-
-  return (
-    <BaseIconDropdown
-      IconComponent={() => (
-        <ArrowDownXs
-          onClick={() => {
-            if (typeof open === 'undefined') setOpen(false);
-          }}
-          style={
-            isOpen || open
-              ? {
-                  cursor: 'pointer',
-                  transform: 'scaleY(-1)',
-                }
-              : undefined
-          }
-        />
-      )}
-      open={
-        // eslint-disable-next-line no-nested-ternary
-        typeof open !== 'undefined' ? open : disabled ? false : isOpen
-      }
-      disabled={disabled}
-      multiple={false}
-      onClick={() => {
-        if (!disabled) setOpen(!isOpen);
-      }}
-      MenuProps={{
-        sx: {
-          '.MuiPaper-root': {
-            marginTop: '4px',
-            borderRadius: '8px',
-            background: theme.palette.neutralGrey[85],
-            border: 'transparent',
-            left: 0,
-            width: '260px',
-          },
-        },
-      }}
-      {...otherProps}
-    >
-      {children}
-    </BaseIconDropdown>
-  );
-};
-
-export default IconDropdown;

package/src/components/Dropdown/IconDropdown.types.ts

@@ -1,22 +0,0 @@
-import type { TypographyProps } from '@mui/system';
-import type { BaseDropdownProps } from '../Dropdown/Dropdown.types';
-
-interface BaseIconDropdownProps extends BaseDropdownProps {
-  isToggled?: boolean;
-}
-
-interface IconDropdownProps extends BaseIconDropdownProps {}
-
-interface PlaceholderProps extends TypographyProps {
-  disabled?: boolean;
-}
-
-interface IconDropdownOption {
-  value: string;
-  icon: React.ReactElement;
-  label: string;
-  shortcut?: string;
-  default?: boolean;
-}
-
-export { IconDropdownProps, BaseIconDropdownProps, PlaceholderProps, IconDropdownOption };

package/src/components/Dropdown/index.ts

@@ -1,22 +0,0 @@
-import Dropdown from './Dropdown';
-import type { DropdownProps } from './Dropdown.types';
-
-import DropdownItem from './DropdownItem';
-import type { DropdownItemProps } from './DropdownItem.types';
-
-import DropdownSubtitle from './DropdownSubtitle';
-import type DropdownSubtitleProps from './DropdownSubtitle.types';
-
-import IconDropdown from './IconDropdown';
-import type { IconDropdownProps } from './IconDropdown.types';
-
-export {
-  Dropdown,
-  DropdownProps,
-  DropdownItem,
-  DropdownItemProps,
-  DropdownSubtitle,
-  DropdownSubtitleProps,
-  IconDropdown,
-  IconDropdownProps,
-};

package/src/components/FileDnDZone/FileDnDZone.styled.ts

@@ -1,43 +0,0 @@
-import { Box, styled } from '@mui/material';
-
-const commonStyle = {
-  display: 'flex' as const,
-  flexDirection: 'column' as const,
-  alignItems: 'center' as const,
-  justifyContent: 'center' as const,
-};
-const FileDnDZoneContainer = styled(Box)(() => {
-  return {
-    position: 'relative' as const,
-    height: '100%',
-    width: '100%',
-  };
-});
-
-const BaseFileDnDZone = styled(Box)(() => {
-  return {
-    ...commonStyle,
-    position: 'absolute',
-    left: 'calc(50% - 213px)',
-    top: '100px',
-    height: '196px',
-    width: '426px',
-    gap: '16px',
-  };
-});
-
-const DnDSection = styled(Box)(() => {
-  return {
-    ...commonStyle,
-    gap: '4px',
-  };
-});
-
-const DnDMainBox = styled(Box)(() => {
-  return {
-    ...commonStyle,
-    gap: '24px',
-  };
-});
-
-export { FileDnDZoneContainer, BaseFileDnDZone, DnDSection, DnDMainBox };

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';