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

package/src/assets/index.ts

@@ -1,16 +0,0 @@
-export { default as IcBellNotiOutlined20Px } from './ic-bell-noti-outlined-20px';
-export { default as IcCloseLargeOutlined20Px } from './ic-close-large-outlined-20px';
-export { default as IcCloseSmallOutlined20Px } from './ic-close-small-outlined-20px';
-export { default as IcDownloadPdfOutlined20Px } from './ic-download-pdf-outlined-20px';
-export { default as IcEllipseOutlined20Px } from './ic-ellipse-outlined-20px';
-export { default as IcFilterNotiOutlined20Px } from './ic-filter-noti-outlined-20px';
-export { default as IcHideLargeOutlined20Px } from './ic-hide-large-outlined-20px';
-export { default as IcHideSmallOutlined20Px } from './ic-hide-small-outlined-20px';
-export { default as IcInformationLargeOutlined20Px } from './ic-information-large-outlined-20px';
-export { default as IcInformationSmallOutlined20Px } from './ic-information-small-outlined-20px';
-export { default as IcManufacturerOutlined20Px } from './ic-manufacturer-outlined-20px';
-export { default as IcRectangleOutlined20Px } from './ic-rectangle-outlined-20px';
-export { default as IcRefreshLeftOutlined20Px } from './ic-refresh-left-outlined-20px';
-export { default as IcRefreshRightOutlined20Px } from './ic-refresh-right-outlined-20px';
-export { default as IcShowLargeOutlined20Px } from './ic-show-large-outlined-20px';
-export { default as IcShowSmallOutlined20Px } from './ic-show-small-outlined-20px';

package/src/components/Alert/Alert.styled.ts

@@ -1,44 +0,0 @@
-import { Alert as MuiAlert, alertClasses, styled, svgIconClasses } from '@mui/material';
-import type { AlertProps } from './Alert.types';
-import { getAccentColor, getBackgroundColor } from './Alert.utils';
-
-const BaseAlert = styled(MuiAlert)<AlertProps>(({ theme, severity }) => ({
-  [`&.${alertClasses.root}`]: {
-    display: 'flex',
-    padding: `${theme.spacing(2)} ${theme.spacing(4)}`,
-    maxWidth: '456px',
-    borderRadius: '8px',
-    border: `1px solid ${getAccentColor(severity)}`,
-    backgroundColor: getBackgroundColor(severity),
-    boxShadow: 'none',
-  },
-  [`& .${alertClasses.icon}`]: {
-    fontSize: '20px',
-    alignItems: 'center',
-    padding: `${theme.spacing(1)} 0`,
-    marginRight: theme.spacing(2),
-    color: `${getAccentColor(severity)} !important`,
-  },
-  [`& .${alertClasses.message}`]: {
-    padding: `${theme.spacing(1)} 0`,
-    width: '100%',
-    overflow: 'hidden',
-    display: '-webkit-box',
-    textOverflow: 'ellipsis',
-    WebkitLineClamp: '5',
-    WebkitBoxOrient: 'vertical',
-    color: theme.palette.neutralGrey[0],
-  },
-  [`& .${alertClasses.action}`]: {
-    margin: 0,
-    padding: 0,
-    paddingLeft: theme.spacing(2),
-    alignItems: 'center',
-  },
-  [`& .${svgIconClasses.root}`]: {
-    height: '20px',
-    width: '20px',
-  },
-}));
-
-export default BaseAlert;

package/src/components/Alert/Alert.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { forwardRef } from 'react';
-import { Close } from '../Icons';
-import BaseAlert from './Alert.styled';
-import type { AlertProps } from './Alert.types';
-import { getAccentColor, getIcons } from './Alert.utils';
-import { Button } from '../Button';
-
-const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  ({ title, severity, children, onClose, ...rest }: AlertProps, ref) => {
-    return (
-      <div ref={ref}>
-        <BaseAlert
-          severity={severity}
-          icon={getIcons(severity)}
-          slots={{
-            closeButton: () => (
-              <Button
-                variant="ghost"
-                icon={<Close fontSize="small" />}
-                onClick={onClose}
-                size="small"
-                sx={{
-                  color: getAccentColor(severity),
-                }}
-              />
-            ),
-          }}
-          onClose={onClose}
-          {...rest}
-        >
-          {children}
-        </BaseAlert>
-      </div>
-    );
-  },
-);
-
-export default Alert;

package/src/components/Alert/Alert.types.ts

@@ -1,5 +0,0 @@
-import type { AlertProps as MuiAlertProps } from '@mui/material';
-
-export interface AlertProps extends MuiAlertProps {
-  onClose?: () => void;
-}

package/src/components/Alert/Alert.utils.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { AlertColor } from '@mui/material';
-import { Success, Error, Information } from '../Icons';
-import theme from '../../theme';
-
-export const getIcons = (severity: AlertColor | undefined) => {
-  switch (severity) {
-    case 'info':
-      return <Information />;
-    case 'success':
-      return <Success />;
-    case 'error':
-      return <Error />;
-    default:
-      return <Error />;
-  }
-};
-
-export const getBackgroundColor = (severity: AlertColor | undefined) => {
-  switch (severity) {
-    case 'info':
-      return theme.palette.alert.InfoBG;
-    case 'success':
-      return theme.palette.alert.SuccessBG;
-    case 'error':
-      return theme.palette.alert.ErrorBG;
-    default:
-      return theme.palette.alert.WarningBG;
-  }
-};
-
-export const getAccentColor = (severity: AlertColor | undefined) => {
-  switch (severity) {
-    case 'info':
-      return theme.palette.blue[25];
-    case 'success':
-      return theme.palette.lunitTeal[40];
-    case 'error':
-      return theme.palette.red[5];
-    default:
-      return theme.palette.yellow[20];
-  }
-};

package/src/components/Alert/index.ts

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

package/src/components/BaseTextField/BaseTextField.styled.ts

@@ -1,110 +0,0 @@
-// This file facilitates style sharing between text input and text area
-import { Box, Theme, Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import type { BaseTextFieldContainerProps, HelperMsgProps } from './BaseTextField.types';
-import { formatCSSSize } from './BaseTextField.utils';
-
-const baseTextFieldStyle = (theme: Theme) => {
-  return {
-    backgroundColor: theme.palette.neutralGrey[75],
-    borderRadius: '8px',
-    border: '1px solid',
-    borderColor: 'transparent',
-    color: theme.palette.neutralGrey[5],
-    fontWeight: '400',
-    fontSize: '14px',
-    fontFamily:
-      'Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
-    lineHeight: '20px',
-    padding: '7px 16px',
-
-    '&::placeholder': {
-      color: theme.palette.neutralGrey[45],
-    },
-    '&:focus': {
-      outline: 'none',
-      border: '1px solid',
-      borderColor: theme.palette.lunitTeal[10],
-    },
-    '&:hover': {
-      borderColor: theme.palette.neutralGrey[45],
-    },
-    '&:disabled': {
-      opacity: '0.8',
-      pointerEvents: 'none',
-    },
-    '&:read-only': {
-      border: `1px solid ${theme.palette.neutralGrey[70]}`,
-      backgroundColor: 'transparent',
-      color: theme.palette.neutralGrey[45],
-      pointerEvents: 'none',
-    },
-  };
-};
-
-const baseTextFieldErrorStyle = (theme: Theme) => {
-  return {
-    borderColor: theme.palette.red[5],
-  };
-};
-
-const baseTextFieldMsgStyle = (theme: Theme) => {
-  return {
-    width: '312px',
-    maxWidth: '312px',
-    minHeight: '20px',
-    color: theme.palette.neutralGrey[45],
-    padding: '4px',
-  };
-};
-
-const baseTextFieldMsgErrorStyle = (theme: Theme) => {
-  return {
-    color: theme.palette.red[5],
-  };
-};
-
-const BaseTextFieldBox = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'width',
-})<BaseTextFieldContainerProps>(({ width }) => {
-  return {
-    width: formatCSSSize(width),
-    minWidth: formatCSSSize(width) ? 'unset' : '208px',
-  };
-});
-
-const BaseTextFieldContainer = styled(Box, {
-  shouldForwardProp: (prop) => !['width'].includes(prop.toString()),
-})<BaseTextFieldContainerProps>(({ width }) => {
-  return {
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    width: formatCSSSize(width),
-    minWidth: formatCSSSize(width) ? 'unset' : '208px',
-  };
-});
-
-const InputMsg = styled(Typography, {
-  shouldForwardProp: (prop) => prop !== 'error',
-})<HelperMsgProps>(({ theme, error }) => {
-  let resultStyle = baseTextFieldMsgStyle(theme);
-
-  if (error) {
-    resultStyle = {
-      ...resultStyle,
-      ...baseTextFieldMsgErrorStyle(theme),
-    };
-  }
-
-  return resultStyle;
-});
-
-const styles = {
-  baseTextFieldStyle,
-  baseTextFieldErrorStyle,
-  baseTextFieldMsgStyle,
-  baseTextFieldMsgErrorStyle,
-};
-
-export { styles, BaseTextFieldContainer, BaseTextFieldBox, InputMsg };

package/src/components/BaseTextField/BaseTextField.types.ts

@@ -1,25 +0,0 @@
-// Props for all text fields
-
-import type { BoxProps } from '@mui/material';
-
-// It redefines certain intrinsic properties because of MUI interference
-interface BaseTextFieldContainerProps {
-  width?: string | number;
-}
-
-interface RootTextFieldProps extends BaseTextFieldContainerProps {
-  disabled?: boolean;
-  readOnly?: boolean;
-  value?: string;
-  defaultValue?: string;
-  error?: boolean;
-  BoxProps?: BoxProps;
-}
-
-// Props for helper message specifically
-interface HelperMsgProps {
-  error?: boolean;
-  helperMsg?: string;
-}
-
-export { RootTextFieldProps, BaseTextFieldContainerProps, HelperMsgProps };

package/src/components/BaseTextField/BaseTextField.utils.ts

@@ -1,10 +0,0 @@
-function formatCSSSize(sizeVal: string | number | undefined) {
-  if (typeof sizeVal === 'undefined') {
-    return undefined;
-  }
-  if (typeof sizeVal === 'number') return `${sizeVal}px`;
-
-  return sizeVal;
-}
-
-export { formatCSSSize };

package/src/components/Button/BaseButton.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import type { BaseButtonProps } from './Button.types';
-import { BaseContainedButton } from './styleds/ContainedButton.styled';
-import { BaseGhostButton } from './styleds/GhostButton.styled';
-import { BaseOutlinedButton } from './styleds/OutlinedButton.styled';
-
-const BaseButton = ({ variant, ...otherProps }: BaseButtonProps) => {
-  if (variant === 'ghost') {
-    return <BaseGhostButton {...otherProps} />;
-  }
-
-  if (variant === 'outlined') {
-    return <BaseOutlinedButton {...otherProps} />;
-  }
-
-  return <BaseContainedButton {...otherProps} />;
-};
-
-export default BaseButton;

package/src/components/Button/Button.tsx

@@ -1,117 +0,0 @@
-import React from 'react';
-import { Box } from '@mui/system';
-import BaseButton from './BaseButton';
-import { CircularProgress } from '../Progress';
-import theme from '../../theme';
-
-import { isIconButton } from './Button.utils';
-import type { ButtonProps } from './Button.types';
-
-function Button(props: ButtonProps) {
-  if (isIconButton(props)) {
-    const {
-      icon,
-      loading,
-      onClick,
-      disableRipple = true,
-      focusOutline = false,
-      ...otherProps
-    } = props;
-
-    return (
-      <BaseButton
-        {...otherProps}
-        isIconOnly
-        disableRipple={disableRipple}
-        focusOutline={focusOutline}
-        onClick={
-          loading
-            ? (e) => {
-                e.preventDefault();
-              }
-            : onClick
-        }
-      >
-        {loading ? (
-          <CircularProgress
-            circleColor={theme.palette.neutralGrey[0]}
-            size={20}
-            sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-            }}
-          />
-        ) : (
-          icon
-        )}
-      </BaseButton>
-    );
-  }
-
-  const {
-    icon,
-    label,
-    size,
-    focusOutline = false,
-    disableRipple = true,
-    loading,
-    onClick,
-    ...otherProps
-  } = props;
-  return (
-    <BaseButton
-      isIconOnly={false}
-      variant={otherProps.variant ?? 'contained'}
-      disableRipple={disableRipple}
-      size={size}
-      color={otherProps.color}
-      focusOutline={focusOutline}
-      onClick={
-        loading
-          ? (e) => {
-              e.preventDefault();
-            }
-          : onClick
-      }
-      sx={
-        loading
-          ? {
-              '&:not(.loadingCircle)': {
-                color: 'transparent',
-              },
-            }
-          : {}
-      }
-      {...otherProps}
-    >
-      <>
-        {icon}
-        {label}
-
-        {loading && (
-          <Box
-            className="loadingCircle"
-            sx={{
-              position: 'absolute',
-              top: '50%',
-              left: '50%',
-              transform: 'translate3d(-50%, -50%, 0)',
-            }}
-          >
-            <CircularProgress
-              circleColor={theme.palette.neutralGrey[0]}
-              size={20}
-              sx={{
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-              }}
-            />
-          </Box>
-        )}
-      </>
-    </BaseButton>
-  );
-}
-export default Button;

package/src/components/Button/Button.types.ts

@@ -1,36 +0,0 @@
-import type { ButtonProps as MuiButtonProps } from '@mui/material';
-
-type ButtonVariant = 'contained' | 'ghost' | 'outlined';
-type ButtonColor = 'primary' | 'secondary' | 'error';
-type ButtonSize = 'small' | 'medium' | 'large';
-
-interface BaseButtonProps extends Omit<MuiButtonProps, 'variant' | 'color'> {
-  variant?: ButtonVariant;
-  color?: ButtonColor;
-  size?: ButtonSize;
-  disabled?: boolean;
-  focusOutline?: boolean;
-  isIconOnly: boolean;
-  loading?: boolean;
-  label?: string;
-}
-
-interface IconButtonProps extends Omit<BaseButtonProps, 'isIconOnly'> {
-  icon: React.ReactNode;
-}
-
-interface NormalButtonProps extends Omit<BaseButtonProps, 'isIconOnly'> {
-  label: string;
-  icon?: React.ReactNode;
-}
-
-type ButtonProps = IconButtonProps | NormalButtonProps;
-
-export type {
-  ButtonVariant,
-  ButtonColor,
-  BaseButtonProps,
-  IconButtonProps,
-  NormalButtonProps,
-  ButtonProps,
-};

package/src/components/Button/Button.utils.ts

@@ -1,13 +0,0 @@
-import type { ButtonProps, IconButtonProps, NormalButtonProps } from './Button.types';
-
-/**
- * @param props
- * @returns boolean
- * @description checks for presence of `label` prop to assert between Icon and Normal Button
- */
-function isIconButton(props: ButtonProps): props is IconButtonProps {
-  const p = props as NormalButtonProps;
-  return !p.label;
-}
-
-export { isIconButton };

package/src/components/Button/index.ts

@@ -1,6 +0,0 @@
-import Button from './Button';
-import BaseButton from './BaseButton';
-import type { BaseButtonProps, ButtonProps } from './Button.types';
-
-export { Button, BaseButton };
-export type { ButtonProps, BaseButtonProps };

package/src/components/Button/styleds/BaseButton.styled.ts

@@ -1,57 +0,0 @@
-import { Theme } from '@mui/material';
-import { typography } from '../../../foundations';
-
-const baseButtonStyle = (theme: Theme, focusOutline: boolean | undefined) => {
-  const mainColor = theme.palette.lunitTeal[40];
-
-  return {
-    alignItems: 'center',
-    display: 'flex',
-    gap: '4px',
-    borderRadius: '8px',
-    border: '1px solid transparent',
-    textTransform: 'none' as const,
-    minWidth: '36px',
-    width: 'max-content',
-    height: '36px',
-    padding: '8px 12px',
-    ...typography.body4,
-    backgroundColor: mainColor,
-    color: theme.palette.neutralGrey[97],
-    '&:hover': {
-      backgroundColor: mainColor,
-      opacity: 0.8,
-    },
-    '&:disabled': {
-      color: theme.palette.neutralGrey[97],
-      backgroundColor: mainColor,
-      opacity: 0.4,
-    },
-    '&:focus': {
-      border: focusOutline ? `1px solid ${theme.palette.lunitTeal[10]}` : '1px solid transparent',
-      outline: 'none' as const,
-    },
-    '&:focus-visible': {
-      border: focusOutline ? `1px solid ${theme.palette.lunitTeal[10]}` : '1px solid transparent',
-      outline: 'none' as const,
-    },
-  };
-};
-
-const baseSmallStyle = {
-  height: '28px',
-  minWidth: '28px',
-  padding: '4px 8px',
-};
-
-const baseLargeStyle = {
-  fontWeight: 600,
-  fontSize: '16px',
-  lineHeight: '22px',
-  // textTransform: 'capitalize', // This causes a type error in BaseOutlinedButton :S
-  height: '44px',
-  minWidth: '44px',
-  padding: '12px',
-};
-
-export { baseButtonStyle, baseSmallStyle, baseLargeStyle };

package/src/components/Button/styleds/ContainedButton.styled.ts

@@ -1,123 +0,0 @@
-import { ButtonBase, styled } from '@mui/material';
-import type { Theme } from '@mui/material';
-import { baseButtonStyle, baseLargeStyle, baseSmallStyle } from './BaseButton.styled';
-import { baseLargeIconStyle, baseMediumIconStyle, baseSmallIconStyle } from './IconButton.styled';
-import type { BaseButtonProps } from '../Button.types';
-
-const containedPrimaryStyle = (theme: Theme, focusOutline: boolean | undefined) => {
-  return baseButtonStyle(theme, focusOutline);
-};
-
-const containedSecondaryStyle = (theme: Theme, focusOutline: boolean | undefined) => {
-  const mainColor = theme.palette.lunitTeal[40];
-
-  return {
-    backgroundColor: theme.palette.neutralGrey[85],
-    color: mainColor,
-    '&:hover': {
-      color: mainColor,
-      backgroundColor: theme.palette.neutralGrey[75],
-      opacity: 1,
-    },
-    '&:disabled': {
-      color: mainColor,
-      backgroundColor: theme.palette.neutralGrey[85],
-      opacity: 0.4,
-    },
-    '&:focus': {
-      outline: 'none' as const,
-      border: focusOutline ? `1px solid ${mainColor}` : '1px solid transparent',
-    },
-    '&:focus-visible': {
-      outline: 'none' as const,
-      border: focusOutline ? `1px solid ${mainColor}` : '1px solid transparent',
-    },
-  };
-};
-
-const containedErrorStyle = (theme: Theme, focusOutline: boolean | undefined) => {
-  const mainColor = theme.palette.red[5];
-
-  return {
-    backgroundColor: mainColor,
-    color: theme.palette.neutralGrey[0],
-    '&:hover': {
-      backgroundColor: mainColor,
-      opacity: 0.8,
-    },
-    '&:disabled': {
-      color: theme.palette.neutralGrey[0],
-      backgroundColor: mainColor,
-      opacity: 0.4,
-    },
-    '&:focus': {
-      outline: 'none' as const,
-      border: focusOutline ? `1px solid ${mainColor}` : '1px solid transparent',
-    },
-    '&:focus-visible': {
-      outline: 'none' as const,
-      border: focusOutline ? `1px solid ${mainColor}` : '1px solid transparent',
-    },
-  };
-};
-
-const BaseContainedButton = styled(ButtonBase, {
-  shouldForwardProp: (prop) =>
-    !['color', 'variant', 'size', 'focusOutline', 'isIconOnly'].includes(prop.toString()),
-})<BaseButtonProps>(({ theme, color, size, focusOutline, isIconOnly }) => {
-  let resultStyle = containedPrimaryStyle(theme, focusOutline);
-
-  // Apply icon sizing if icon only
-  if (isIconOnly) {
-    if (size === 'small') {
-      resultStyle = {
-        ...resultStyle,
-        ...baseSmallIconStyle,
-      };
-    } else if (size === 'large') {
-      resultStyle = {
-        ...resultStyle,
-        ...baseLargeIconStyle,
-      };
-    } else {
-      resultStyle = {
-        ...resultStyle,
-        ...baseMediumIconStyle,
-      };
-    }
-  } else {
-    // Apply label or icon-label
-    if (size === 'small') {
-      resultStyle = {
-        ...resultStyle,
-        ...baseSmallStyle,
-      };
-    }
-
-    if (size === 'large') {
-      resultStyle = {
-        ...resultStyle,
-        ...baseLargeStyle,
-      };
-    }
-  }
-
-  // Apply color
-  if (color === 'error') {
-    resultStyle = {
-      ...resultStyle,
-      ...containedErrorStyle(theme, focusOutline),
-    };
-  }
-
-  if (color === 'secondary') {
-    resultStyle = {
-      ...resultStyle,
-      ...containedSecondaryStyle(theme, focusOutline),
-    };
-  }
-
-  return resultStyle;
-});
-
-export { containedPrimaryStyle, containedSecondaryStyle, containedErrorStyle, BaseContainedButton };