@lunit/oui 1.0.0-alpha.9 → 1.0.1-alpha.10

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

package/src/components/Progress/index.ts

@@ -1,4 +0,0 @@
-import CircularProgress from './CircularProgress';
-import LinearProgress from './LinearProgress';
-
-export { CircularProgress, LinearProgress };

package/src/components/Radio/Radio.styled.ts

@@ -1,35 +0,0 @@
-import { styled, Box, Radio } from '@mui/material';
-
-export const Container = styled(Box)(({ theme }) => ({
-  display: 'inline-flex',
-  gap: theme.spacing(2),
-}));
-
-export const StyledRadio = styled(Radio)(({ theme }) => ({
-  width: '22px',
-  height: '22px',
-  padding: 0,
-  borderRadius: '50%',
-  '&.Mui-disabled, &.Mui-disabled + .MuiTypography-root': {
-    opacity: 0.4,
-  },
-  '&.Mui-focusVisible > div': {
-    boxShadow: `0 0 0 1px ${theme.palette.lunitTeal[10]}`,
-  },
-}));
-
-export const UncheckedIcon = styled('div')(({ theme }) => ({
-  width: '18px',
-  height: '18px',
-  border: `1.5px solid ${theme.palette.neutralGrey[45]}`,
-  borderRadius: '50%',
-  boxSizing: 'border-box',
-}));
-
-export const CheckedIcon = styled('div')(({ theme }) => ({
-  width: '18px',
-  height: '18px',
-  border: `4px solid ${theme.palette.lunitTeal[40]}`,
-  borderRadius: '50%',
-  boxSizing: 'border-box',
-}));

package/src/components/Radio/Radio.tsx

@@ -1,60 +0,0 @@
-import { Typography } from '@mui/material';
-import clsx from 'clsx';
-import React, { forwardRef } from 'react';
-import { Container, StyledRadio, UncheckedIcon, CheckedIcon } from './Radio.styled';
-import type { RadioProps } from './Radio.types';
-
-const Radio = forwardRef<HTMLSpanElement, RadioProps>(
-  (
-    {
-      value,
-      name,
-      checked,
-      defaultChecked,
-      disabled,
-      required,
-      onChange,
-      onChangeCapture,
-      inputProps,
-      inputRef,
-      label,
-      ...rootProps
-    }: RadioProps,
-    ref,
-  ) => {
-    return (
-      <Container
-        {...rootProps}
-        className={clsx('radio', rootProps.className)}
-        component={label != null ? 'label' : 'span'}
-        ref={ref}
-      >
-        <StyledRadio
-          disableRipple
-          icon={<UncheckedIcon />}
-          checkedIcon={<CheckedIcon />}
-          value={value}
-          name={name}
-          checked={checked}
-          defaultChecked={defaultChecked}
-          disabled={disabled}
-          required={required}
-          onChange={onChange}
-          onChangeCapture={onChangeCapture}
-          inputProps={inputProps}
-          inputRef={inputRef}
-        />
-        {label && (
-          <Typography
-            variant="body_m1"
-            sx={{ display: 'flex', alignItems: 'center' }}
-          >
-            {label}
-          </Typography>
-        )}
-      </Container>
-    );
-  },
-);
-
-export default Radio;

package/src/components/Radio/Radio.types.ts

@@ -1,15 +0,0 @@
-import type { BoxProps, RadioProps as MuiRadioProps } from '@mui/material';
-
-export interface RadioProps extends Omit<BoxProps<'span'>, 'onChange' | 'onChangeCapture'> {
-  value?: MuiRadioProps['value'];
-  name?: MuiRadioProps['name'];
-  checked?: MuiRadioProps['checked'];
-  defaultChecked?: MuiRadioProps['defaultChecked'];
-  disabled?: MuiRadioProps['disabled'];
-  required?: MuiRadioProps['required'];
-  onChange?: MuiRadioProps['onChange'];
-  onChangeCapture?: MuiRadioProps['onChangeCapture'];
-  label?: string;
-  inputProps?: MuiRadioProps['inputProps'];
-  inputRef?: MuiRadioProps['inputRef'];
-}

package/src/components/Radio/RadioGroup.styled.ts

@@ -1,6 +0,0 @@
-import { styled, RadioGroup } from '@mui/material';
-
-// eslint-disable-next-line import/prefer-default-export
-export const StyledRadioGroup = styled(RadioGroup)(({ theme }) => ({
-  gap: theme.spacing(2),
-}));

package/src/components/Radio/RadioGroup.tsx

@@ -1,23 +0,0 @@
-import React, { forwardRef } from 'react';
-import { StyledRadioGroup } from './RadioGroup.styled';
-import type { RadioGroupProps } from './RadioGroup.types';
-
-const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
-  ({ defaultValue, name, row, children, onChange, value, ...props }: RadioGroupProps, ref) => {
-    return (
-      <StyledRadioGroup
-        {...props}
-        defaultValue={defaultValue}
-        name={name}
-        onChange={onChange}
-        value={value}
-        row={row}
-        ref={ref}
-      >
-        {children}
-      </StyledRadioGroup>
-    );
-  },
-);
-
-export default RadioGroup;

package/src/components/Radio/RadioGroup.types.ts

@@ -1,10 +0,0 @@
-import type { FormGroupProps, RadioGroupProps as MuiRadioGroupProps } from '@mui/material';
-
-export interface RadioGroupProps extends MuiRadioGroupProps {
-  children?: FormGroupProps['children'];
-  defaultValue?: MuiRadioGroupProps['defaultValue'];
-  name?: MuiRadioGroupProps['name'];
-  onChange?: MuiRadioGroupProps['onChange'];
-  value?: MuiRadioGroupProps['value'];
-  row?: FormGroupProps['row'];
-}

package/src/components/Radio/index.ts

@@ -1,7 +0,0 @@
-import Radio from './Radio';
-import type { RadioProps } from './Radio.types';
-
-import RadioGroup from './RadioGroup';
-import type { RadioGroupProps } from './RadioGroup.types';
-
-export { Radio, RadioGroup, RadioProps, RadioGroupProps };

package/src/components/Stepper/Stepper.styled.ts

@@ -1,38 +0,0 @@
-import { Box, Typography, styled } from '@mui/material';
-import { Chip } from '../Chip';
-import theme from '../../theme';
-import type { StepperTypographyProps } from './Stepper.types';
-
-export const StepperContainer = styled(Box)({
-  display: 'flex',
-  flexDirection: 'column',
-  height: '64px',
-});
-export const ChipContainer = styled(Box)({
-  display: 'inline-block',
-});
-
-export const StepperChip = styled(Chip, {
-  shouldForwardProp: (prop) => prop !== 'disabled',
-})(({ disabled }) => ({
-  backgroundColor: `${
-    !disabled ? theme.palette.lunitTeal[40] : theme.palette.neutralGrey[70]
-  } !important`,
-  color: `${!disabled ? theme.palette.lunitTeal[90] : theme.palette.neutralGrey[95]} !important`,
-  marginBottom: '4px',
-  '.MuiChip-label ': {
-    fontWeight: 400,
-    fontSize: '14px',
-    lineHeight: '24px',
-  },
-}));
-
-export const StepperTypography = styled(Typography, {
-  shouldForwardProp: (prop) => prop !== 'disabled',
-})<StepperTypographyProps>(({ disabled }) => ({
-  color: !disabled ? 'white' : theme.palette.neutralGrey[70],
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  cursor: 'default',
-}));

package/src/components/Stepper/Stepper.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { ChipContainer, StepperChip, StepperContainer, StepperTypography } from './Stepper.styled';
-import type { StepperProps } from './Stepper.types';
-
-const Stepper = ({ step, title, disabled = false, sx }: StepperProps) => {
-  return (
-    <StepperContainer sx={sx}>
-      <ChipContainer>
-        <StepperChip
-          label={`STEP ${step}`}
-          disabled={disabled}
-        />
-      </ChipContainer>
-      <StepperTypography
-        variant="h7"
-        disabled={disabled}
-      >
-        {title}
-      </StepperTypography>
-    </StepperContainer>
-  );
-};
-
-export default Stepper;

package/src/components/Stepper/Stepper.types.ts

@@ -1,13 +0,0 @@
-import type { TypographyProps } from '@mui/material';
-import type { SxProps } from '@mui/system';
-
-export interface StepperProps {
-  step: number;
-  title: string;
-  disabled?: boolean;
-  sx?: SxProps;
-}
-
-export interface StepperTypographyProps extends TypographyProps {
-  disabled?: boolean;
-}

package/src/components/Stepper/index.ts

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