@lunit/oui 1.0.0-alpha.8 → 1.0.1-alpha.1

package/dist/components/Dropdown/IconDropdown.styled.js

@@ -0,0 +1,72 @@
+import { Select, styled } from '@mui/material';
+const baseIconDropdownStyle = (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) => {
+    return {
+        backgroundColor: theme.palette.neutralGrey[70],
+        border: `1px solid transparent`,
+    };
+};
+const BaseIconDropdown = styled(Select, {
+    shouldForwardProp: (prop) => !['small', 'isToggled'].includes(prop.toString()),
+})(({ theme, isToggled }) => {
+    let style = baseIconDropdownStyle(theme);
+    if (isToggled) {
+        style = {
+            ...style,
+            ...toggledIconDropdownStyle(theme),
+        };
+    }
+    return style;
+});
+const DropdownContainer = styled('div')(() => {
+    return {
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        minWidth: '32px',
+    };
+});
+export { BaseIconDropdown, DropdownContainer };
+//# sourceMappingURL=IconDropdown.styled.js.map

package/dist/components/Dropdown/IconDropdown.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=IconDropdown.types.js.map

package/dist/components/Dropdown/index.js

@@ -0,0 +1,6 @@
+import Dropdown from './Dropdown';
+import DropdownItem from './DropdownItem';
+import DropdownSubtitle from './DropdownSubtitle';
+import IconDropdown from './IconDropdown';
+export { Dropdown, DropdownItem, DropdownSubtitle, IconDropdown, };
+//# sourceMappingURL=index.js.map

package/dist/components/FileDnDZone/FileDnDZone.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+import { BaseFileDnDZone, DnDSection, DnDMainBox, FileDnDZoneContainer, } from './FileDnDZone.styled';
+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, }) => {
+    const disabledSX = {
+        opacity: 0.4,
+    };
+    return (_jsx(FileDnDZoneContainer, { sx: disabled ? disabledSX : {}, ...WrapperProps, children: _jsxs(BaseFileDnDZone, { ...OuterBoxProps, children: [_jsx(Typography, { variant: "h7", sx: { color: theme.palette.neutralGrey[25] }, children: "Drag and drop your slide files here" }), _jsxs(DnDMainBox, { ...InnerBoxProps, children: [_jsxs(DnDSection, { ...SectionBoxProps, children: [_jsx(Typography, { variant: "body_sb1", sx: { color: theme.palette.neutralGrey[45] }, children: "Supported file formats" }), _jsx(Typography, { variant: "body_sb1", sx: { color: theme.palette.neutralGrey[25], padding: '0 18px', textAlign: 'center' }, children: acceptedFileFormats })] }), _jsxs(DnDSection, { ...SectionBoxProps, children: [_jsx(Typography, { variant: "body_sb1", sx: { color: theme.palette.neutralGrey[45] }, children: "Allowed number of slides" }), _jsx(Typography, { variant: "body_sb1", sx: { color: theme.palette.neutralGrey[25] }, children: `You have uploaded ${slidesUploaded.toLocaleString()} slides on Lunit SCOPE.` }), _jsx(Typography, { variant: "body_sb1", sx: { color: theme.palette.neutralGrey[25] }, children: `The number of slides cannot exceed ${maxSlideLimit.toLocaleString()}.` })] })] })] }) }));
+};
+export default FileDnDZone;
+//# sourceMappingURL=FileDnDZone.js.map

package/dist/components/FileDnDZone/FileDnDZone.styled.js

@@ -0,0 +1,39 @@
+import { Box, styled } from '@mui/material';
+const commonStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+const FileDnDZoneContainer = styled(Box)(() => {
+    return {
+        position: 'relative',
+        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 };
+//# sourceMappingURL=FileDnDZone.styled.js.map

package/dist/components/FileDnDZone/FileDnDZone.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=FileDnDZone.types.js.map

package/dist/components/FileDnDZone/FileDnDZone.utils.js

@@ -0,0 +1,3 @@
+const DEFAULT_FILE_FORMATS = 'Leica(.svs), 3DHistech(.mrxs), and Philips(.isyntax, .tiff)';
+export { DEFAULT_FILE_FORMATS };
+//# sourceMappingURL=FileDnDZone.utils.js.map

package/dist/components/FileDnDZone/index.js

@@ -0,0 +1,3 @@
+import FileDnDZone from './FileDnDZone';
+export { FileDnDZone };
+//# sourceMappingURL=index.js.map

package/dist/components/List/List.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useMemo } from 'react';
+import { ArrowDownSm, ArrowUpSm } from '../../icons';
+import { Collapse } from '@mui/material';
+import { MuiList, MuiListSubheader } from './List.styled';
+export const ListContext = createContext({
+    size: 'small',
+    showCheck: false,
+});
+const List = ({ size = 'small', showCheck = false, subheader, subheaderType = 'bold', open = 'visible', children, onOpen, onClose, ...props }) => {
+    const contextValue = useMemo(() => ({ size, showCheck }), [size, showCheck]);
+    const collapsible = open !== 'visible';
+    const onSubheaderClick = ((event) => {
+        if (open === 'visible') {
+            return;
+        }
+        const handler = open ? onClose : onOpen;
+        handler?.(event);
+    });
+    return (_jsx(ListContext.Provider, { value: contextValue, children: _jsx(MuiList, { ...props, subheader: subheader ? (_jsxs(MuiListSubheader, { type: subheaderType, clickable: collapsible, tabIndex: collapsible ? 0 : undefined, onClick: onSubheaderClick, children: [subheader, collapsible && (open ? _jsx(ArrowDownSm, {}) : _jsx(ArrowUpSm, {}))] })) : null, children: collapsible ? (_jsx(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: children })) : (children) }) }));
+};
+export default List;
+//# sourceMappingURL=List.js.map

package/dist/components/List/List.styled.js

@@ -0,0 +1,29 @@
+import { styled, List, ListSubheader } from '@mui/material';
+export const MuiList = styled(List)(({ theme }) => ({
+    padding: theme.spacing(2),
+}));
+export const MuiListSubheader = styled(ListSubheader, {
+    shouldForwardProp: (prop) => !['type', 'clickable'].includes(prop.toString()),
+})(({ 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',
+    },
+}));
+//# sourceMappingURL=List.styled.js.map

package/dist/components/List/List.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=List.types.js.map

package/dist/components/List/List.utils.js

@@ -0,0 +1,12 @@
+const getPadding = (size) => {
+    if (size === 'large') {
+        return '14px';
+    }
+    if (size === 'medium') {
+        return '10px';
+    }
+    // 'small'
+    return '6px';
+};
+export default getPadding;
+//# sourceMappingURL=List.utils.js.map

package/dist/components/List/ListItem.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { ListContext } from '../List/List';
+import { StyledListItem, StyledListItemButton, StyledListItemText, StyledListItemStartSlot, StyledListItemEndSlot, CheckIcon, EmptyIcon, } from './ListItem.styled';
+const ListItem = (({ 
+// Root props
+rootProps, className, classes, style, sx, 
+// Button props
+label, startElement, endElement, selected, ...props }) => {
+    const { size, showCheck } = useContext(ListContext);
+    const checkElement = (() => {
+        if (showCheck) {
+            if (selected) {
+                return _jsx(CheckIcon, {});
+            }
+            return _jsx(EmptyIcon, {});
+        }
+        return null;
+    })();
+    return (_jsx(StyledListItem, { ...rootProps, disablePadding: true, className: className, classes: classes, style: style, sx: sx, children: _jsxs(StyledListItemButton, { ...props, disableRipple: true, 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            component: props.component ?? 'span', size: size, selected: selected, children: [checkElement && _jsx(StyledListItemStartSlot, { children: checkElement }), startElement && _jsx(StyledListItemStartSlot, { children: startElement }), _jsx(StyledListItemText, { primary: label }), endElement && _jsx(StyledListItemEndSlot, { children: endElement })] }) }));
+});
+export default ListItem;
+//# sourceMappingURL=ListItem.js.map

package/dist/components/List/ListItem.styled.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListItem, ListItemButton, ListItemIcon, ListItemText, styled, typographyClasses, } from '@mui/material';
+import { Check, Dummy } from '../../icons';
+import getPadding from './List.utils';
+export const StyledListItem = styled(ListItem)({
+    width: '100%',
+});
+export const StyledListItemButton = styled(({ size, ...props }) => (_jsx(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' });
+//# sourceMappingURL=ListItem.styled.js.map

package/dist/components/List/ListItem.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ListItem.types.js.map

package/dist/components/List/ListItemCaption.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { StyledListItemCaption } from './ListItemCaption.styled';
+export const ListItemCaptionClassName = 'ListItemCaption';
+const ListItemCaption = (props) => {
+    const { className, ...otherProps } = props;
+    return (_jsx(StyledListItemCaption, { ...otherProps, className: clsx(ListItemCaptionClassName, className) }));
+};
+export default ListItemCaption;
+//# sourceMappingURL=ListItemCaption.js.map

package/dist/components/List/ListItemCaption.styled.js

@@ -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],
+}));
+//# sourceMappingURL=ListItemCaption.styled.js.map

package/dist/components/List/ListItemCaption.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ListItemCaption.types.js.map

package/dist/components/List/index.js

@@ -0,0 +1,4 @@
+export { default as List } from './List';
+export { default as ListItem } from './ListItem';
+export { default as ListItemCaption } from './ListItemCaption';
+//# sourceMappingURL=index.js.map

package/dist/components/LoadingIndicator/LoadingIndicator.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { Player } from '@lottiefiles/react-lottie-player';
+import { LoadingOverlay, LoadingIndicatorBox, LoadingMessage, LoadingDetails, } from './LoadingIndicator.styled';
+const DotLoadingAnimation = require('./assets/DotLoadingAnimation.json');
+const DnaLoadingAnimation = require('./assets/DnaLoadingAnimation.json');
+const LoadingIndicator = ({ message, details, loadingAnimation = 'dot', }) => {
+    return (_jsx(LoadingOverlay, { children: _jsxs(LoadingIndicatorBox, { children: [_jsx(Player, { autoplay: true, loop: true, src: loadingAnimation === 'dot' ? DotLoadingAnimation : DnaLoadingAnimation, style: { height: '112px', width: '140px' } }), _jsx(LoadingMessage, { children: message }), _jsx(LoadingDetails, { children: details || (_jsxs(_Fragment, { children: ["Please wait.", _jsx("br", {}), "It may take a few minutes."] })) })] }) }));
+};
+export default LoadingIndicator;
+//# sourceMappingURL=LoadingIndicator.js.map

package/dist/components/LoadingIndicator/LoadingIndicator.styled.js

@@ -0,0 +1,37 @@
+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',
+}));
+//# sourceMappingURL=LoadingIndicator.styled.js.map

package/dist/components/LoadingIndicator/LoadingIndicator.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=LoadingIndicator.types.js.map