@lunit/oui 1.0.1-alpha.7 → 1.0.1-alpha.9

package/src/components/Dropdown/Dropdown.tsx

@@ -1,116 +0,0 @@
-import React from 'react';
-import { ArrowDown } from '../../icons';
-
-import type { SelectChangeEvent } from '@mui/material';
-import { useState } from 'react';
-import { BaseDropdown, DropdownContainer, DropdownPlaceholder } from './Dropdown.styled';
-import type { DropdownComponent, DropdownProps } from './Dropdown.types';
-import { handlePlaceholder } from './Dropdown.utils';
-
-import theme from '../../theme';
-import { InputMsg } from '../BaseTextField/BaseTextField.styled';
-import { BUTTON_DROPDOWN_ITEM } from './DropdownItem.utils';
-
-const Dropdown = (({
-  children,
-  placeholder,
-  value,
-  error,
-  helperMsg,
-  onChange,
-  sx,
-  style,
-  MenuProps = undefined,
-  ContainerProps,
-  ...otherProps
-}: DropdownProps) => {
-  // Prevents selecting a DropdownItem with `asButton` property.
-  const handleChange = (e: SelectChangeEvent<unknown>, child: React.ReactNode) => {
-    if (!!onChange && e.target.value !== BUTTON_DROPDOWN_ITEM) {
-      onChange(e, child);
-    }
-  };
-  const [isOpen, setOpen] = useState<boolean>(false);
-
-  return (
-    <DropdownContainer
-      {...ContainerProps}
-      fullWidth={otherProps.fullWidth}
-    >
-      <BaseDropdown
-        sx={sx}
-        style={style}
-        IconComponent={() => (
-          <ArrowDown
-            onClick={() => {
-              if (typeof otherProps.open === 'undefined') setOpen(false);
-            }}
-            style={
-              isOpen || otherProps.open
-                ? {
-                    cursor: 'pointer',
-                    transform: 'scaleY(-1)',
-                  }
-                : undefined
-            }
-          />
-        )}
-        onClick={() => {
-          if (!otherProps.disabled) setOpen(!isOpen);
-        }}
-        // https://github.com/mui/material-ui/issues/26076#issuecomment-1014345564
-        onClose={() => {
-          setTimeout(() => {
-            (document.activeElement as HTMLElement).blur();
-          }, 0);
-        }}
-        onChange={handleChange}
-        error={!!error}
-        open={
-          // eslint-disable-next-line no-nested-ternary
-          typeof otherProps.open !== 'undefined'
-            ? otherProps.open
-            : otherProps.disabled
-              ? false
-              : isOpen
-        }
-        // MUI expects a value of '' if undefined :S
-        value={value ?? ''}
-        MenuProps={
-          MenuProps ?? {
-            disablePortal: true,
-            sx: {
-              '.MuiPaper-root': {
-                marginTop: '4px',
-                borderRadius: '8px',
-                background: theme.palette.neutralGrey[85],
-                border: 'transparent',
-              },
-            },
-          }
-        }
-        {...otherProps}
-      >
-        {children}
-      </BaseDropdown>
-      {handlePlaceholder(value) && placeholder && (
-        <DropdownPlaceholder
-          placeholder={placeholder}
-          disabled={otherProps.disabled}
-        />
-      )}
-      {error ? (
-        <InputMsg
-          variant="body5"
-          error
-        >
-          {error}
-        </InputMsg>
-      ) : (
-        helperMsg && <InputMsg variant="body5">{helperMsg}</InputMsg>
-      )}
-    </DropdownContainer>
-  );
-}) as DropdownComponent;
-
-export default Dropdown;

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

@@ -1,31 +0,0 @@
-import type { BoxProps, SelectProps, TypographyProps } from '@mui/material';
-import { IconDropdownOption } from './IconDropdown.types';
-
-interface DropdownContainerProps extends BoxProps {
-  fullWidth?: boolean;
-}
-
-type BaseDropdownProps<T = unknown> = SelectProps<T>;
-interface DropdownProps<T = unknown>
-  extends Omit<BaseDropdownProps<T>, 'IconComponent' | 'error' | 'sx' | 'style'> {
-  error?: string;
-  helperMsg?: string;
-  ContainerProps?: BoxProps;
-  sx?: SelectProps['sx'];
-  style?: SelectProps['style'];
-  options?: IconDropdownOption[];
-}
-
-interface PlaceholderProps extends TypographyProps {
-  disabled?: boolean;
-}
-
-type DropdownComponent = <T>(props: DropdownProps<T>) => JSX.Element;
-
-export type {
-  DropdownContainerProps,
-  DropdownProps,
-  BaseDropdownProps,
-  PlaceholderProps,
-  DropdownComponent,
-};

package/src/components/Dropdown/Dropdown.utils.ts

@@ -1,13 +0,0 @@
-const PLACEHOLDER_VAL = 'PLACEHOLDER_VAL';
-
-const handlePlaceholder = (value: unknown) => {
-  if (Array.isArray(value)) {
-    if (value.length) {
-      return false;
-    }
-    return true;
-  }
-  return !value;
-};
-
-export { PLACEHOLDER_VAL, handlePlaceholder };

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

@@ -1,66 +0,0 @@
-import React from 'react';
-import { MenuItem, Typography, styled } from '@mui/material';
-import type { Theme } from '@mui/material';
-import type { BaseDropdownItemProps } from './DropdownItem.types';
-
-const baseDropdownItemStyle = (theme: Theme) => {
-  return {
-    background: theme.palette.neutralGrey[85],
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    borderRadius: '8px',
-    position: 'relative' as const,
-    margin: '0 8px',
-    gap: '9px',
-    '&:hover': {
-      background: theme.palette.neutralGrey[75],
-    },
-    '&.Mui-disabled': {
-      background: theme.palette.neutralGrey[85],
-      opacity: '1',
-      color: '#C4C4C4',
-      cursor: 'pointer !important',
-    },
-    '&.Mui-selected': {
-      background: 'transparent',
-      '&:hover, &.Mui-selected:hover, &.Mui-focusVisible, &.Mui-selected.Mui-focusVisible': {
-        borderRadius: '8px',
-        backgroundColor: theme.palette.neutralGrey[75],
-      },
-    },
-  };
-};
-
-const padNoIconStyle = {
-  paddingLeft: '45px !important',
-};
-
-const BaseDropdownItem = styled(MenuItem, {
-  shouldForwardProp: (prop) => prop !== 'emptyIcon',
-})<BaseDropdownItemProps>(({ theme, emptyIcon }) => {
-  let style = baseDropdownItemStyle(theme);
-
-  if (emptyIcon) {
-    style = {
-      ...style,
-      ...padNoIconStyle,
-    };
-  }
-
-  return style;
-});
-
-const BaseShortcutLabel = styled(Typography)(({ theme }) => {
-  return {
-    color: theme.palette.neutralGrey[45],
-    position: 'absolute' as const,
-    right: '20px',
-  };
-});
-
-const KeyboardShortcut = ({ label }: { label: string }) => {
-  return <BaseShortcutLabel variant="body_m1">{label}</BaseShortcutLabel>;
-};
-
-export { BaseDropdownItem, KeyboardShortcut };

package/src/components/Dropdown/DropdownItem.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import { Check } from '../../icons';
-import { BaseDropdownItem, KeyboardShortcut } from './DropdownItem.styled';
-import type { DropdownItemProps } from './DropdownItem.types';
-import { BUTTON_DROPDOWN_ITEM, shouldPadForEmptyIcon } from './DropdownItem.utils';
-
-const DropdownItem = ({
-  checkIcon,
-  customIcon,
-  children,
-  emptyIcon,
-  asButton,
-  value,
-  keyboardShortcut,
-  ...otherProps
-}: DropdownItemProps) => {
-  return (
-    <BaseDropdownItem
-      {...otherProps}
-      value={asButton ? BUTTON_DROPDOWN_ITEM : value}
-      emptyIcon={shouldPadForEmptyIcon(emptyIcon, checkIcon, customIcon, otherProps.selected)}
-    >
-      {/* Custom Icon overrides check icon */}
-      {customIcon ?? (checkIcon && otherProps.selected && <Check />)}
-      {children}
-      {keyboardShortcut && <KeyboardShortcut label={keyboardShortcut} />}
-    </BaseDropdownItem>
-  );
-};
-
-export default DropdownItem;
-
-/* 
-
-if checkicon, add empty padding.
-if checkicon and selected, add icon
-
-if custom icon, add icon
-if checkicon and customicon, custom icon
-
-if emptyicon, add padding
-if checkicon and emptyicon, only 
-
-
-*/

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

@@ -1,14 +0,0 @@
-import type { MenuItemProps } from '@mui/material';
-
-interface BaseDropdownItemProps extends MenuItemProps {
-  emptyIcon?: boolean;
-}
-
-interface DropdownItemProps extends BaseDropdownItemProps {
-  asButton?: boolean;
-  checkIcon?: boolean;
-  customIcon?: React.ReactElement;
-  keyboardShortcut?: string;
-}
-
-export { DropdownItemProps, BaseDropdownItemProps };

package/src/components/Dropdown/DropdownItem.utils.ts

@@ -1,14 +0,0 @@
-const BUTTON_DROPDOWN_ITEM = 'BUTTON_DROPDOWN_ITEM';
-
-const shouldPadForEmptyIcon = (
-  emptyIcon: boolean | undefined,
-  checkIcon: boolean | undefined,
-  customIcon: React.ReactElement | undefined,
-  selected: boolean | undefined,
-) => {
-  if (checkIcon) return !selected;
-  if (customIcon) return false;
-  return !!emptyIcon;
-};
-
-export { BUTTON_DROPDOWN_ITEM, shouldPadForEmptyIcon };

package/src/components/Dropdown/DropdownSubtitle.styled.ts

@@ -1,13 +0,0 @@
-import { Typography, styled } from '@mui/material';
-
-const BaseDropdownSubtitle = styled(Typography)(({ theme }) => {
-  return {
-    color: theme.palette.neutralGrey[40],
-    width: '140px',
-    height: '20px',
-    padding: '8px',
-    paddingLeft: '16px',
-  };
-});
-
-export default BaseDropdownSubtitle;

package/src/components/Dropdown/DropdownSubtitle.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import BaseDropdownSubtitle from './DropdownSubtitle.styled';
-import type DropdownSubtitleProps from './DropdownSubtitle.types';
-
-const DropdownSubtitle = ({ label }: DropdownSubtitleProps) => {
-  return <BaseDropdownSubtitle variant="small_body_m1">{label}</BaseDropdownSubtitle>;
-};
-
-export default DropdownSubtitle;

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

@@ -1,6 +0,0 @@
-interface DropdownSubtitleProps {
-  label: string;
-  value?: string;
-}
-
-export default DropdownSubtitleProps;

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