@lunit/oui 1.0.1-alpha.7 → 1.0.1-alpha.9

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

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

@@ -1,139 +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 ghostPrimaryStyle = (theme: Theme, focusOutline: boolean | undefined) => {
-  const mainColor = theme.palette.lunitTeal[40];
-
-  return {
-    ...baseButtonStyle(theme, false),
-    backgroundColor: 'transparent',
-    color: mainColor,
-    '&:hover': {
-      backgroundColor: theme.palette.neutralGrey[70],
-      opacity: 0.8,
-    },
-    '&:disabled': {
-      backgroundColor: 'transparent',
-      color: mainColor,
-      opacity: 0.4,
-    },
-    '&:focus': {
-      border: focusOutline ? `1px solid ${mainColor}` : '1px solid transparent',
-    },
-    '&:focus-visible': {
-      outline: 'none',
-      border: focusOutline ? `1px solid ${mainColor}` : '1px solid transparent',
-    },
-  };
-};
-
-const ghostSecondaryStyle = (theme: Theme, focusOutline: boolean | undefined) => {
-  const mainColor = theme.palette.neutralGrey[25];
-  return {
-    color: mainColor,
-    '&:hover': {
-      backgroundColor: theme.palette.neutralGrey[75],
-      opacity: 0.7,
-    },
-    '&:disabled': {
-      backgroundColor: 'transparent',
-      color: mainColor,
-      opacity: 0.4,
-    },
-    '&:focus': {
-      border: focusOutline ? `1px solid ${mainColor}` : '1px solid transparent',
-    },
-    '&:focus-visible': {
-      outline: 'none',
-      border: focusOutline ? `1px solid ${mainColor}` : '1px solid transparent',
-    },
-  };
-};
-
-const ghostErrorStyle = (theme: Theme, focusOutline: boolean | undefined) => {
-  const mainColor = theme.palette.red[5];
-
-  return {
-    color: mainColor,
-    '&:hover': {
-      backgroundColor: theme.palette.neutralGrey[70],
-      opacity: 0.7,
-    },
-    '&:disabled': {
-      backgroundColor: 'transparent',
-      color: mainColor,
-      opacity: 0.4,
-    },
-    '&:focus': {
-      border: focusOutline ? `1px solid ${mainColor}` : '1px solid transparent',
-    },
-    '&:focus-visible': {
-      outline: 'none',
-      border: focusOutline ? `1px solid ${mainColor}` : '1px solid transparent',
-    },
-  };
-};
-
-const BaseGhostButton = styled(ButtonBase, {
-  shouldForwardProp: (prop) =>
-    !['color', 'variant', 'size', 'focusOutline', 'isIconOnly'].includes(prop.toString()),
-})<BaseButtonProps>(({ theme, color, size, focusOutline, isIconOnly }) => {
-  let resultStyle = ghostPrimaryStyle(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,
-      ...ghostErrorStyle(theme, focusOutline),
-    };
-  }
-
-  if (color === 'secondary') {
-    resultStyle = {
-      ...resultStyle,
-      ...ghostSecondaryStyle(theme, focusOutline),
-    };
-  }
-
-  return resultStyle;
-});
-
-export { ghostPrimaryStyle, ghostSecondaryStyle, ghostErrorStyle, BaseGhostButton };

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

@@ -1,25 +0,0 @@
-const baseSmallIconStyle = {
-  height: '28px',
-  width: '28px',
-  minWidth: '28px',
-  padding: '4px',
-};
-
-const baseLargeIconStyle = {
-  fontWeight: 600,
-  fontSize: '16px',
-  lineHeight: '22px',
-  // textTransform: 'capitalize', // Causes type error
-  height: '44px',
-  width: '44px',
-  padding: '12px',
-};
-
-const baseMediumIconStyle = {
-  height: '36px',
-  width: '36px',
-  minWidth: '36px',
-  padding: '8px',
-};
-
-export { baseMediumIconStyle, baseSmallIconStyle, baseLargeIconStyle };