@lunit/oui 1.0.1-alpha.13 → 1.0.1-alpha.2

package/src/components/MuiCssBaseline.ts

@@ -0,0 +1,78 @@
+import { ComponentsOverrides, Theme } from '@mui/material';
+import {
+  SMALL_SCROLLBAR_WIDTH,
+  SCROLLBAR_WIDTH,
+  DRAWER_WIDTH_OPEN,
+  DRAWER_WIDTH_CLOSE,
+} from '../systems';
+import { palette, typography } from '../foundations';
+
+const html = {
+  fontSize: '14px',
+  boxSizing: 'border-box',
+  fontFamily: `Pretendard, sans-serif`,
+  fontFeatureSettings: `'tnum', 'ss01', 'ss02', 'ss08'`,
+};
+
+const styleOverrides: ComponentsOverrides<Theme>['MuiCssBaseline'] = {
+  html,
+
+  '*::-webkit-scrollbar-track': {
+    backgroundColor: 'transparent',
+  },
+  '*::-webkit-scrollbar-corner': {
+    backgroundColor: 'transparent',
+  },
+  '*::-webkit-scrollbar': {
+    // + 4 for padding
+    width: SCROLLBAR_WIDTH + 4,
+    height: SCROLLBAR_WIDTH + 4,
+  },
+  '.small-scrollbar::-webkit-scrollbar, .small-scrollbar *::-webkit-scrollbar': {
+    // + 4 for padding
+    width: SMALL_SCROLLBAR_WIDTH + 4,
+    height: SMALL_SCROLLBAR_WIDTH + 4,
+  },
+
+  '*::-webkit-scrollbar-thumb': {
+    backgroundColor: palette.neutralGrey?.[65],
+    borderRadius: 6,
+    border: '2px transparent solid',
+    backgroundClip: 'padding-box',
+  },
+  '*::-webkit-scrollbar-thumb:hover': {
+    backgroundColor: palette.neutralGrey?.[60],
+  },
+  '*::-webkit-scrollbar-thumb:active': {
+    backgroundColor: palette.neutralGrey?.[40],
+  },
+  '.Mui-disabled::-webkit-scrollbar-thumb:hover, .Mui-disabled *::-webkit-scrollbar-thumb:hover': {
+    backgroundColor: palette.neutralGrey?.[65],
+  },
+  '.Mui-disabled::-webkit-scrollbar-thumb:active, .Mui-disabled *::-webkit-scrollbar-thumb:active':
+    {
+      backgroundColor: palette.neutralGrey?.[65],
+    },
+
+  'svg.MuiCircularProgress-svg *': {
+    fill: 'none',
+  },
+  'svg *.stroke-inherit': {
+    fill: 'none',
+    stroke: 'currentColor',
+  },
+  '.snackbarVariantError': {
+    background: 'rgba(238, 81, 64, 0.18)',
+    border: '1px solid #EE5140',
+    ...typography.body5,
+  },
+  '#page-root.drawer-open ~ .SnackbarContainer-left': {
+    left: `${DRAWER_WIDTH_OPEN + 20}px !important`,
+  },
+  '#page-root.drawer-close ~ .SnackbarContainer-left': {
+    left: `${DRAWER_WIDTH_CLOSE + 20}px !important`,
+  },
+};
+export default {
+  styleOverrides,
+};

package/src/components/MuiInputBase.ts

@@ -0,0 +1,25 @@
+import type { ComponentsOverrides } from '@mui/material/styles';
+
+const styleOverrides: ComponentsOverrides['MuiInputBase'] = {
+  root: {
+    '&': {
+      padding: 0,
+    },
+  },
+  input: {
+    height: '36px',
+  },
+  inputAdornedStart: {
+    'html &': {
+      paddingLeft: 0,
+    },
+  },
+  inputAdornedEnd: {
+    'html &': {
+      paddingRight: 0,
+    },
+  },
+};
+export default {
+  styleOverrides,
+};

package/src/components/MuiOutlinedInput.ts

@@ -0,0 +1,57 @@
+import { ComponentsOverrides } from '@mui/material/styles';
+import { palette, typography } from '../foundations';
+
+const styleOverrides: ComponentsOverrides['MuiOutlinedInput'] = {
+  root: {
+    borderRadius: 8,
+    backgroundColor: palette.neutralGrey[75],
+    color: palette.neutralGrey[45],
+    '&.MuiInputBase-adornedStart': {
+      paddingLeft: '16px',
+    },
+    '&.MuiInputBase-adornedEnd': {
+      paddingRight: '16px',
+    },
+    '&.Mui-disabled': {
+      backgroundColor: 'transparent',
+      borderWidth: '1px',
+      borderColor: palette.neutralGrey[45],
+    },
+  },
+  notchedOutline: {
+    border: '1px solid transparent',
+    borderRadius: 8,
+    padding: 0,
+    'html .MuiOutlinedInput-root:hover &': {
+      borderColor: palette.neutralGrey[45],
+    },
+    'html .MuiOutlinedInput-root.Mui-focused &': {
+      borderWidth: '1px',
+      borderColor: palette.lunitTeal[10],
+    },
+    'html .MuiOutlinedInput-root.Mui-disabled &': {
+      border: 'none',
+    },
+  },
+  input: {
+    ...typography.body5,
+    color: palette.neutralGrey[5],
+    padding: '8px 16px',
+    boxSizing: 'border-box',
+    '&::placeholder': {
+      color: palette.neutralGrey[45],
+    },
+    '&:-webkit-autofill': {
+      boxShadow: `0 0 0 100px ${palette.neutralGrey[75]}`,
+      WebkitTextFillColor: palette.neutralGrey[5],
+    },
+    '&.Mui-disabled': {
+      backgroundColor: 'inherit',
+      borderRadius: '8px',
+      WebkitTextFillColor: palette.neutralGrey[45],
+    },
+  },
+};
+export default {
+  styleOverrides,
+};

package/src/components/MuiTextField.ts

@@ -0,0 +1,17 @@
+import type { ComponentsOverrides, ComponentsProps } from '@mui/material/styles';
+
+const styleOverrides: ComponentsOverrides['MuiTextField'] = {
+  root: {
+    width: '100%',
+    input: {
+      textOverflow: 'ellipsis',
+    },
+  },
+};
+const defaultProps: ComponentsProps['MuiTextField'] = {
+  variant: 'standard',
+};
+export default {
+  styleOverrides,
+  defaultProps,
+};

package/src/components/Pagination/Pagination.styled.tsx

@@ -0,0 +1,71 @@
+import { Button, styled, Box } from '@mui/material';
+import { subScrollbarWidth } from '../../foundations';
+
+export const DEFAULT_PAGE_SIZE = 100;
+export const PAGE_SIZE_LIST = [25, 50, 75, 100];
+
+export const PaginationBox = styled(Box)(({ theme }) => ({
+  ...theme.typography.body5,
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  borderTop: `1px solid ${theme.palette.neutralGrey[90]}`,
+  height: '48px',
+  padding: '14px 0',
+  color: theme.palette.neutralGrey[40],
+}));
+
+export const PaperProps = { style: { maxHeight: 378, width: 136 } };
+
+export const SidePageBox = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  height: '20px',
+});
+
+export const SelectButton = styled(Button)(({ theme }) => ({
+  justifyContent: 'flex-end',
+  border: '1px solid transparent',
+  minWidth: 'auto',
+  width: '58px',
+  height: '28px',
+  marginLeft: theme.spacing(3),
+  padding: '4px 4px 4px 8px',
+  color: theme.palette.neutralGrey[15],
+  '.MuiButton-endIcon': { margin: 0 },
+  '&:hover': {
+    background: 'transparent',
+    borderColor: theme.palette.neutralGrey[40],
+  },
+  '&:focus-visible': {
+    background: 'transparent',
+    borderColor: theme.palette.scope1,
+  },
+}));
+
+export const ArrowButton = styled(Button)(({ theme }) => ({
+  border: '1px solid transparent',
+  minWidth: 'auto',
+  height: '28px',
+  padding: theme.spacing(0.5),
+  color: theme.palette.neutralGrey[40],
+  '&:hover': {
+    background: theme.palette.neutralGrey[70],
+  },
+  '&:disabled': {
+    color: theme.palette.neutralGrey[40],
+    opacity: 0.4,
+  },
+  '.MuiButton-endIcon': {
+    margin: 0,
+  },
+}));
+
+export const PaginationContainer = styled('div')(({ theme }) => ({
+  padding: `0 ${subScrollbarWidth(theme.spacing(5))} 0 ${theme.spacing(5)}`,
+}));
+
+export const divider = {
+  borderWidth: '0',
+  margin: '0 12px',
+} as const;

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,182 @@
+import React from 'react';
+import { useState, MouseEvent, useEffect, useMemo } from 'react';
+import { ArrowDown } from '../../icons';
+import { Divider } from '../Divider';
+import { MenuItem, Menu } from '../Menu';
+
+import { PaginationProps } from './Pagination.types';
+import {
+  PaperProps,
+  PaginationBox,
+  SidePageBox,
+  SelectButton,
+  ArrowButton,
+  PAGE_SIZE_LIST,
+  divider,
+} from './Pagination.styled';
+
+function Pagination({
+  count: itemCount,
+  page: selectedPage = 1,
+  perPage: selectedPerPage,
+  totalPage,
+  onPageChange,
+  onPerPageChange,
+}: PaginationProps) {
+  const [perPageAnchorEl, setPerPageAnchorEl] = useState<null | HTMLElement>(null);
+  const [pageAnchorEl, setPageAnchorEl] = useState<null | HTMLElement>(null);
+
+  const perPageOpen = Boolean(perPageAnchorEl);
+  const pageOpen = Boolean(pageAnchorEl);
+
+  const pages = useMemo(
+    () => Array.from({ length: totalPage }, (_, index) => index + 1),
+    [totalPage],
+  );
+
+  const startItemNumber = selectedPerPage * (selectedPage - 1) + 1;
+  const endItemNumber = Math.min(startItemNumber + selectedPerPage - 1, itemCount);
+
+  const handlePerPageClick = (event: MouseEvent<HTMLButtonElement>) => {
+    setPerPageAnchorEl(event.currentTarget);
+  };
+
+  const handlePerPageClose = () => {
+    setPerPageAnchorEl(null);
+  };
+
+  const handlePageClick = (event: MouseEvent<HTMLButtonElement>) => {
+    setPageAnchorEl(event.currentTarget);
+  };
+
+  const handlePageClose = () => {
+    setPageAnchorEl(null);
+  };
+
+  useEffect(() => {
+    if (selectedPage > totalPage) {
+      onPageChange?.(null, totalPage);
+    }
+  }, [totalPage, selectedPage, onPageChange]);
+
+  return (
+    <PaginationBox>
+      <SidePageBox>
+        Items per page
+        <SelectButton
+          endIcon={
+            <ArrowDown
+              style={{
+                transform: perPageOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+              }}
+            />
+          }
+          onClick={handlePerPageClick}
+        >
+          {selectedPerPage}
+        </SelectButton>
+        <Menu
+          showCheck
+          anchorEl={perPageAnchorEl}
+          anchorOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          transformOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right',
+          }}
+          PaperProps={PaperProps}
+          onClose={handlePerPageClose}
+          open={perPageOpen}
+        >
+          {PAGE_SIZE_LIST.map((perPage) => (
+            <MenuItem
+              key={perPage}
+              selected={perPage === selectedPerPage}
+              onClick={(event) => {
+                event.preventDefault();
+                onPerPageChange?.(event, perPage);
+                handlePerPageClose();
+              }}
+              label={perPage}
+            />
+          ))}
+        </Menu>
+        <Divider
+          orientation="vertical"
+          sx={divider}
+        />
+        {startItemNumber}-{endItemNumber} of &nbsp;{itemCount} items
+      </SidePageBox>
+      <SidePageBox>
+        This page
+        <SelectButton
+          id="selected-page"
+          endIcon={
+            <ArrowDown
+              style={{
+                transform: pageOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+              }}
+            />
+          }
+          onClick={handlePageClick}
+        >
+          {selectedPage}
+        </SelectButton>
+        <Menu
+          showCheck
+          anchorEl={pageAnchorEl}
+          anchorOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          transformOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right',
+          }}
+          PaperProps={PaperProps}
+          onClose={handlePageClose}
+          open={pageOpen}
+        >
+          {pages.map((page) => (
+            <MenuItem
+              key={page}
+              selected={page === selectedPage}
+              onClick={(event) => {
+                event.preventDefault();
+                onPageChange?.(event, page);
+                handlePageClose();
+              }}
+              label={page}
+            />
+          ))}
+        </Menu>
+        <Divider
+          orientation="vertical"
+          sx={divider}
+        />
+        <ArrowButton
+          id="prev-button"
+          disabled={selectedPage === 1}
+          onClick={(event) => {
+            event.preventDefault();
+            onPageChange?.(event, selectedPage - 1);
+          }}
+          endIcon={<ArrowDown style={{ transform: 'rotate(90deg)' }} />}
+        />
+        <ArrowButton
+          id="next-button"
+          disabled={selectedPage === totalPage}
+          onClick={(event) => {
+            event.preventDefault();
+            onPageChange?.(event, selectedPage + 1);
+          }}
+          endIcon={<ArrowDown style={{ transform: 'rotate(-90deg)' }} />}
+        />
+      </SidePageBox>
+    </PaginationBox>
+  );
+}
+
+export default Pagination;

package/src/components/Pagination/Pagination.types.ts

@@ -0,0 +1,39 @@
+export interface PaginationProps {
+  count: number;
+  page?: number;
+  perPage: number;
+  totalPage: number;
+  onPageChange?: (
+    event: React.MouseEvent<HTMLLIElement> | React.MouseEvent<HTMLButtonElement> | null,
+    page: number,
+  ) => void;
+  onPerPageChange?: (event: React.MouseEvent<HTMLLIElement> | null, perPage: number) => void;
+}
+
+interface SortObject {
+  empty: boolean;
+  unsorted: boolean;
+  sorted: boolean;
+}
+
+interface Pageable {
+  offset: number;
+  sort: SortObject;
+  paged: boolean;
+  unpaged: boolean;
+  pageNumber: number;
+  pageSize: number;
+}
+
+export interface PaginationViewInfo {
+  totalElements: number;
+  totalPages: number;
+  size: number;
+  number: number;
+  sort: SortObject;
+  pageable: Pageable;
+  numberOfElements: number;
+  first: boolean;
+  last: boolean;
+  empty: boolean;
+}

package/src/components/Pagination/index.ts

@@ -0,0 +1,2 @@
+export { default as Pagination } from './Pagination';
+export type { PaginationProps } from './Pagination.types';

package/src/components/ProductLabel/ProductLabel.styled.ts

@@ -0,0 +1,61 @@
+import { styled, Typography, Box, Dialog, DialogContent } from '@mui/material';
+import { Button } from '../Button';
+
+export const ProductName = styled(Typography)(({ theme }) => ({
+  ...theme.typography.body_b1,
+  marginBottom: '12px',
+}));
+
+export const LabelRow = styled(Box)({
+  display: 'flex',
+  flexDirection: 'row',
+  marginBottom: 12,
+  alignItems: 'flex-start',
+});
+
+export const LabelColumn = styled(Box)({ flex: 0 });
+
+export const LabelValue = styled(Box)({
+  flex: 1,
+  marginLeft: 16,
+});
+
+export const FramedText = styled(Typography)({
+  border: '1px solid #000',
+  padding: 2,
+  fontSize: 12,
+  lineHeight: '16px',
+  fontWeight: 700,
+  wordBreak: 'normal',
+});
+
+export const LabelSubBox = styled(Box)({
+  marginLeft: '11.5px',
+  marginBottom: '4px',
+});
+
+export const LabelContainer = styled(Dialog)({
+  '& .MuiPaper-root': {
+    width: 540,
+    backgroundColor: '#fff',
+    border: '2px solid #000',
+    borderRadius: '8px',
+    padding: 0,
+  },
+});
+
+export const LabelContent = styled(DialogContent)(({ theme }) => ({
+  padding: '30px',
+  color: theme.palette.neutralGrey[90],
+}));
+
+export const LabelCloseButton = styled(Button)({
+  position: 'absolute',
+  right: '30px',
+  top: '30px',
+  padding: 0,
+  color: '#4E4E50',
+  '&:hover': {
+    backgroundColor: 'transparent',
+  },
+});

package/src/components/ProductLabel/ProductLabel.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { Box, Typography } from '@mui/material';
+
+import { LabelContainer, LabelContent, LabelCloseButton } from './ProductLabel.styled';
+import { ProductLabelProps } from './ProductLabel.types';
+import { Divider } from '../Divider';
+import { Close } from '../../icons';
+import { LunitScope } from '@lunit/design-system-logo';
+
+function ProductLabel({ open, onClose, children, footerStart, footerEnd }: ProductLabelProps) {
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  return (
+    <LabelContainer
+      open={open}
+      maxWidth={false}
+      onClose={handleClose}
+      aria-labelledby="label-dialog-title"
+    >
+      <LabelCloseButton
+        variant="ghost"
+        icon={<Close />}
+        onClick={handleClose}
+      />
+      <LabelContent>
+        <div>
+          <LunitScope style={{ width: '170px' }} />
+        </div>
+        <Typography variant="body5">
+          Software Algorithm Device To Assist Users In Digital Pathology
+        </Typography>
+        <Divider
+          orientation="horizontal"
+          sx={{ margin: '15px 0' }}
+        />
+        {children}
+        <Divider
+          orientation="horizontal"
+          sx={{ margin: '8px 0' }}
+        />
+        {(footerStart || footerEnd) && (
+          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+            {footerStart ? footerStart : <div />}
+            {footerEnd}
+          </Box>
+        )}
+      </LabelContent>
+    </LabelContainer>
+  );
+}
+
+export default ProductLabel;

package/src/components/ProductLabel/ProductLabel.types.ts

@@ -0,0 +1,10 @@
+import type { SxProps } from '@mui/system';
+
+export interface ProductLabelProps {
+  onClose: () => void;
+  open: boolean;
+  children: React.ReactNode;
+  footerStart?: string | React.ReactNode;
+  footerEnd?: string | React.ReactNode;
+  sx?: SxProps;
+}

package/src/components/ProductLabel/index.ts

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

package/src/components/Progress/CircularProgress.styled.ts

@@ -0,0 +1,10 @@
+import { CircularProgress as MuiCircularProgress, styled } from '@mui/material';
+import type { CircularProgressProps } from './CircularProgress.types';
+
+const BaseCircularProgress = styled(MuiCircularProgress, {
+  shouldForwardProp: (prop) => prop !== 'circleColor',
+})<CircularProgressProps>(({ theme, circleColor }) => ({
+  color: circleColor || theme.palette.lunitTeal[40],
+}));
+
+export default BaseCircularProgress;

package/src/components/Progress/CircularProgress.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import BaseCircularProgress from './CircularProgress.styled';
+import type { CircularProgressProps } from './CircularProgress.types';
+
+function CircularProgress({ progress, size = 36, ...otherProps }: CircularProgressProps) {
+  return (
+    <BaseCircularProgress
+      size={size}
+      value={progress}
+      {...otherProps}
+    />
+  );
+}
+
+export default CircularProgress;

package/src/components/Progress/CircularProgress.types.ts

@@ -0,0 +1,6 @@
+import type { CircularProgressProps as MuiCircularProgressProps } from '@mui/material';
+
+export interface CircularProgressProps extends MuiCircularProgressProps {
+  circleColor?: string;
+  progress?: number;
+}

package/src/components/Progress/LinearProgress.styled.ts

@@ -0,0 +1,15 @@
+import { LinearProgress as MuiLinearProgress, linearProgressClasses, styled } from '@mui/material';
+import type { LinearProgressProps } from './LinearProgress.types';
+
+const BaseLinearProgress = styled(MuiLinearProgress, {
+  shouldForwardProp: (prop) => prop !== 'barColor',
+})<LinearProgressProps>(({ theme, height, barColor }) => ({
+  width: '100%',
+  height,
+  backgroundColor: 'transparent',
+  [`& .${linearProgressClasses.barColorPrimary}`]: {
+    backgroundColor: barColor || theme.palette.lunitTeal[40],
+  },
+}));
+
+export default BaseLinearProgress;

package/src/components/Progress/LinearProgress.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import BaseLinearProgress from './LinearProgress.styled';
+import type { LinearProgressProps } from './LinearProgress.types';
+
+function LinearProgress({ barColor, progress, height = 4, ...otherProps }: LinearProgressProps) {
+  return (
+    <BaseLinearProgress
+      value={progress}
+      height={height}
+      barColor={barColor}
+      {...otherProps}
+    />
+  );
+}
+
+export default LinearProgress;

package/src/components/Progress/LinearProgress.types.ts

@@ -0,0 +1,7 @@
+import type { LinearProgressProps as MuiLinearProgressProps } from '@mui/material';
+
+export interface LinearProgressProps extends Omit<MuiLinearProgressProps, 'color'> {
+  barColor?: string;
+  progress?: number;
+  height?: number;
+}