@lunit/oui 1.0.0-alpha.1

package/src/components/Dropdown/Dropdown.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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