@lunit/oui 1.0.1-alpha.9 → 1.0.1

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

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

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

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

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

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

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

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

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

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

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

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

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