@lunit/oui 1.0.1 → 1.1.0-alpha.1

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

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

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

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

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

package/src/components/Card/Card.types.ts

@@ -1,10 +0,0 @@
-import type { CardProps as MuiCardProps } from '@mui/material';
-
-export type CardSize = 'small' | 'large';
-
-export interface CardProps extends MuiCardProps {
-  size?: CardSize;
-  open?: boolean;
-  selected?: boolean;
-  onClick?: () => void;
-}

package/src/components/Card/index.ts

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

package/src/components/Checkbox/Checkbox.styled.tsx

@@ -1,27 +0,0 @@
-import { styled, Box, Checkbox } from '@mui/material';
-
-export const Container = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'touchRippleRef',
-})(({ theme }) => ({
-  display: 'inline-flex',
-  gap: theme.spacing(2),
-}));
-
-export const StyledCheckbox = styled(Checkbox)(({ theme }) => ({
-  width: '22px',
-  height: '22px',
-  padding: 0,
-  '&.Mui-disabled, &.Mui-disabled + .MuiTypography-root': {
-    opacity: 0.4,
-  },
-  '&.Mui-focusVisible > .checkbox-icon': {
-    borderRadius: '4px',
-    boxShadow: `0 0 0 1px ${theme.palette.lunitTeal[10]}`,
-  },
-}));
-
-export const iconStyle = {
-  display: 'inline-block',
-  width: '18px',
-  height: '18px',
-};

package/src/components/Checkbox/Checkbox.tsx

@@ -1,64 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Typography } from '@mui/material';
-import clsx from 'clsx';
-import { Container, StyledCheckbox } from './Checkbox.styled';
-import type { CheckboxProps } from './Checkbox.types';
-import { UncheckedIcon, CheckedIcon, IndeterminateIcon } from './Checkbox.utils';
-
-const Checkbox = forwardRef<HTMLSpanElement, CheckboxProps>(
-  (
-    {
-      value,
-      name,
-      checked,
-      defaultChecked,
-      disabled,
-      required,
-      indeterminate,
-      onChange,
-      onChangeCapture,
-      label,
-      inputProps,
-      inputRef,
-      ...rootProps
-    }: CheckboxProps,
-    ref,
-  ) => {
-    return (
-      <Container
-        {...rootProps}
-        className={clsx('checkbox', rootProps.className)}
-        component={label != null ? 'label' : 'span'}
-        ref={ref}
-      >
-        <StyledCheckbox
-          disableRipple
-          icon={<UncheckedIcon />}
-          checkedIcon={<CheckedIcon />}
-          indeterminateIcon={<IndeterminateIcon />}
-          value={value}
-          name={name}
-          checked={indeterminate ? true : checked}
-          defaultChecked={defaultChecked}
-          disabled={disabled}
-          required={required}
-          indeterminate={indeterminate}
-          onChange={onChange}
-          onChangeCapture={onChangeCapture}
-          inputProps={inputProps}
-          inputRef={inputRef}
-        />
-        {label && (
-          <Typography
-            variant="body5"
-            sx={{ display: 'flex', alignItems: 'center' }}
-          >
-            {label}
-          </Typography>
-        )}
-      </Container>
-    );
-  },
-);
-
-export default Checkbox;

package/src/components/Checkbox/Checkbox.types.ts

@@ -1,16 +0,0 @@
-import type { BoxProps, CheckboxProps as MuiCheckboxProps } from '@mui/material';
-
-export interface CheckboxProps extends Omit<BoxProps<'span'>, 'onChange' | 'onChangeCapture'> {
-  value?: MuiCheckboxProps['value'];
-  name?: MuiCheckboxProps['name'];
-  checked?: MuiCheckboxProps['checked'];
-  defaultChecked?: MuiCheckboxProps['defaultChecked'];
-  disabled?: MuiCheckboxProps['disabled'];
-  required?: MuiCheckboxProps['required'];
-  indeterminate?: MuiCheckboxProps['indeterminate'];
-  onChange?: MuiCheckboxProps['onChange'];
-  onChangeCapture?: MuiCheckboxProps['onChangeCapture'];
-  label?: string;
-  inputProps?: MuiCheckboxProps['inputProps'];
-  inputRef?: MuiCheckboxProps['inputRef'];
-}