@lunit/oui 1.0.1 → 1.1.0-alpha.1

package/src/components/MuiCssBaseline.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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