@lunit/oui 1.0.0-alpha.1

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

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

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

package/src/components/Card/Card.styled.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Card as MuiCard, styled } from '@mui/material';
+import type { CardProps } from './Card.types';
+
+const BaseCard = styled(({ ...props }: CardProps) => <MuiCard {...props} />)(
+  ({ theme, size = 'large', selected }) => ({
+    width: size === 'small' ? '480px' : '520px',
+    height: size === 'small' ? '156px' : '284px',
+    cursor: 'pointer',
+    borderRadius: '8px',
+    backgroundColor: !selected ? theme.palette.neutralGrey[85] : theme.palette.neutralGrey[75],
+    '&:hover': {
+      backgroundColor: theme.palette.neutralGrey[75],
+    },
+  }),
+);
+
+export default BaseCard;

package/src/components/Card/Card.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import BaseCard from './Card.styled';
+import type { CardProps } from './Card.types';
+
+function Card({ size, selected, onClick, children, ...props }: CardProps) {
+  return (
+    <BaseCard
+      size={size}
+      selected={selected}
+      onClick={onClick}
+      {...props}
+    >
+      {children}
+    </BaseCard>
+  );
+}
+
+export default Card;