@lunit/oui 1.0.0-alpha.1

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

package/src/components/Progress/index.ts

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

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

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

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

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

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

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

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

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

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

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

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

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