@lunit/oui 1.0.1 → 1.1.0-alpha.1

package/src/components/Dialog/Dialog.styled.ts

@@ -1,87 +0,0 @@
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
-import { styled } from '@mui/material/styles';
-import { Box } from '@mui/material';
-import type { DialogProps } from './Dialog.types';
-
-interface StyledDialogProps extends DialogProps {
-  displayChildren: boolean;
-  isPrompt?: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  sx?: any;
-}
-
-interface StyledDialogTitleProps {
-  displayChildren: boolean;
-  isPrompt?: boolean;
-}
-
-const StyledDialog = styled(Dialog, {
-  shouldForwardProp: (prop) => prop !== 'displayChildren' && prop !== 'isPrompt',
-})<StyledDialogProps>(({ theme, displayChildren, isPrompt, sx }) => {
-  return {
-    '& .MuiDialog-paper': {
-      backgroundColor: theme.palette.neutralGrey[90],
-      width: displayChildren && !isPrompt ? 'auto' : '320px',
-      maxWidth: displayChildren && !isPrompt ? 'none' : '320px',
-      borderRadius: '8px',
-      padding: '28px 20px 24px 20px',
-    },
-    ...sx,
-  };
-});
-
-const StyledHeaderBox = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'displayChildren' && prop !== 'isPrompt',
-})<StyledDialogTitleProps>(({ displayChildren, isPrompt }) => ({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  height: '24px',
-  marginBottom: displayChildren && !isPrompt ? '32px' : '16px',
-}));
-
-const StyledTitle = styled(Box)({
-  display: 'flex',
-  alignItems: 'center',
-});
-
-const StyledDialogTitle = styled(DialogTitle)(({ theme }) => ({
-  ...theme.typography.body_sb1,
-  padding: 0,
-  display: 'flex',
-  '& .dialogIcon': {
-    display: 'flex',
-    marginRight: '8px',
-  },
-}));
-
-const StyledDialogContent = styled(DialogContent)(({ theme }) => ({
-  ...theme.typography.body5,
-  marginBottom: '16px',
-  padding: 0,
-  whiteSpace: 'pre-line',
-
-  '&.childrenDialog': {
-    display: 'flex',
-    borderTop: 0,
-    borderBottom: 0,
-    maxHeight: 'fit-content',
-  },
-}));
-
-const StyledDialogActions = styled(DialogActions)(() => ({
-  padding: 0,
-  margin: '0 12px',
-}));
-
-export {
-  StyledDialog,
-  StyledHeaderBox,
-  StyledTitle,
-  StyledDialogTitle,
-  StyledDialogContent,
-  StyledDialogActions,
-};

package/src/components/Dialog/Dialog.tsx

@@ -1,111 +0,0 @@
-import React from 'react';
-import { CloseSmall } from '../../icons';
-
-import { Box } from '@mui/material';
-import theme from '../../theme';
-import { Button } from '../Button';
-
-import {
-  StyledDialog,
-  StyledHeaderBox,
-  StyledDialogTitle,
-  StyledDialogContent,
-  StyledDialogActions,
-} from './Dialog.styled';
-import type { DialogProps } from './Dialog.types';
-
-function Dialog({
-  open,
-  title,
-  icon,
-  closable,
-  isPrompt,
-  cancelText,
-  submitText,
-  onClose,
-  text,
-  children,
-  dialogAction,
-  buttonSize = 'small',
-  loading = false,
-  disableSubmit = false,
-  sx,
-}: DialogProps) {
-  const handleClose = (event: object | null, reason: string) => {
-    if (onClose) {
-      onClose(event, reason);
-    }
-  };
-  const displayChildren = !text && !!children;
-
-  return (
-    <StyledDialog
-      open={open}
-      onClose={handleClose}
-      displayChildren={displayChildren}
-      isPrompt={isPrompt}
-      sx={sx}
-      className="customDialog"
-      PaperProps={{
-        className: 'dialogPaper',
-      }}
-    >
-      <StyledHeaderBox
-        isPrompt={isPrompt}
-        displayChildren={displayChildren}
-        className="dialogTitle"
-      >
-        <Box>
-          <StyledDialogTitle>
-            {icon && <div className="dialogIcon">{icon}</div>}
-            {title}
-          </StyledDialogTitle>
-        </Box>
-        {closable && (
-          <Button
-            size="small"
-            variant="ghost"
-            label=""
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            onClick={(event: any) => handleClose(event, 'cancel')}
-            icon={<CloseSmall />}
-            sx={{ color: theme.palette.neutralGrey[0] }}
-          />
-        )}
-      </StyledHeaderBox>
-
-      {!displayChildren && <StyledDialogContent>{text}</StyledDialogContent>}
-      {displayChildren && (
-        <StyledDialogContent className="childrenDialog">{children}</StyledDialogContent>
-      )}
-
-      {dialogAction && <StyledDialogActions>{dialogAction}</StyledDialogActions>}
-
-      {!dialogAction && (cancelText || submitText) && (
-        <StyledDialogActions>
-          {cancelText && (
-            <Button
-              label={cancelText}
-              size={buttonSize}
-              variant="ghost"
-              onClick={() => handleClose(null, 'cancel')}
-            />
-          )}
-
-          {submitText && (
-            <Button
-              disabled={disableSubmit}
-              loading={loading}
-              label={submitText}
-              size={buttonSize}
-              sx={loading ? { width: '75px' } : null}
-              onClick={() => handleClose(null, 'submit')}
-            />
-          )}
-        </StyledDialogActions>
-      )}
-    </StyledDialog>
-  );
-}
-
-export default Dialog;

package/src/components/Dialog/Dialog.types.ts

@@ -1,19 +0,0 @@
-import type { SxProps } from '@mui/system';
-
-export interface DialogProps {
-  open: boolean;
-  title?: string;
-  icon?: React.ReactNode;
-  closable?: boolean;
-  isPrompt?: boolean;
-  cancelText?: string;
-  submitText?: string;
-  onClose?: (event: object | null, reason: string) => void;
-  text?: string;
-  children?: React.ReactNode;
-  dialogAction?: React.ReactNode;
-  buttonSize?: 'small' | 'medium' | 'large';
-  loading?: boolean;
-  disableSubmit?: boolean;
-  sx?: SxProps;
-}

package/src/components/Dialog/index.ts

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

package/src/components/Divider/Divider.styled.ts

@@ -1,24 +0,0 @@
-import { Divider } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import type { DividerProps } from './Divider.types';
-
-const BaseDivider = styled(Divider)<DividerProps>(({ theme, orientation }) => {
-  if (orientation === 'vertical') {
-    return {
-      background: theme.palette.neutralGrey[65],
-      border: 'none',
-      height: '100%',
-      outline: 'none',
-      width: '1px',
-    };
-  }
-  return {
-    background: theme.palette.neutralGrey[65],
-    border: 'none',
-    height: '1px',
-    outline: 'none',
-    width: '100%',
-  };
-});
-
-export default BaseDivider;

package/src/components/Divider/Divider.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import BaseDivider from './Divider.styled';
-import type { DividerProps } from './Divider.types';
-
-function Divider({ orientation = 'vertical', ...props }: DividerProps) {
-  return (
-    <BaseDivider
-      orientation={orientation}
-      {...props}
-    />
-  );
-}
-export default Divider;

package/src/components/Divider/Divider.types.ts

@@ -1,7 +0,0 @@
-import type { DividerProps as MuiDividerProps } from '@mui/material';
-
-interface DividerProps extends MuiDividerProps {
-  orientation?: 'horizontal' | 'vertical';
-}
-
-export type { DividerProps };

package/src/components/Divider/index.ts

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

package/src/components/Dropdown/Dropdown.styled.tsx

@@ -1,127 +0,0 @@
-import React from 'react';
-import { Select, Typography, Box, styled } from '@mui/material';
-import type { Theme } from '@mui/material';
-import type { BaseDropdownProps, DropdownContainerProps, PlaceholderProps } from './Dropdown.types';
-
-const baseDropdownStyle = (theme: Theme) => {
-  return {
-    fontFamily:
-      'Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
-    fontSize: '14px',
-    fontWeight: '400',
-    background: theme.palette.neutralGrey[85],
-    borderRadius: '8px',
-    border: '1px solid transparent',
-    height: '36px',
-    color: theme.palette.neutralGrey[5],
-    padding: '0 2px',
-    '.MuiSelect-select': {
-      paddingRight: '0px !important',
-    },
-    '& fieldset': {
-      border: 'none',
-    },
-    '&.Mui-focused': {
-      border: `1px solid ${theme.palette.lunitTeal[10]} !important`,
-    },
-    '&.Mui-disabled': { border: 'none', background: theme.palette.neutralGrey[75] },
-    '.MuiSvgIcon-root ': {
-      cursor: 'pointer',
-      marginRight: '16px',
-      color: theme.palette.neutralGrey[5],
-      '&.Mui-disabled': {
-        color: theme.palette.neutralGrey[45],
-      },
-    },
-    '&:hover': {
-      border: `1px solid ${theme.palette.neutralGrey[45]}`,
-      '&.Mui-disabled': {
-        border: '1px solid transparent',
-      },
-    },
-  };
-};
-
-const fixedWidthDropdownStyle = {
-  width: '240px',
-};
-
-const errorDropdownStyle = (theme: Theme) => ({
-  border: `1px solid ${theme.palette.red[5]} !important`,
-});
-
-const BaseDropdown = styled(Select, {
-  shouldForwardProp: (prop) => prop !== 'small',
-})<BaseDropdownProps>(({ theme, error, autoWidth, fullWidth, open }) => {
-  let style = baseDropdownStyle(theme);
-  if (!autoWidth && !fullWidth) {
-    style = {
-      ...style,
-      ...fixedWidthDropdownStyle,
-    };
-  }
-  if (error) {
-    style = {
-      ...style,
-      ...errorDropdownStyle(theme),
-    };
-  }
-  // add FocusStyle when click arrow
-  const openFocusStyle = open
-    ? { border: `1px solid ${theme.palette.lunitTeal[10]} !important` }
-    : {};
-  return { ...style, ...openFocusStyle };
-});
-
-const DropdownContainer = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'fullWidth',
-})<DropdownContainerProps>(({ fullWidth }) => {
-  if (fullWidth) {
-    return {
-      position: 'relative',
-      display: 'flex',
-      flexDirection: 'column',
-      width: '100%',
-    };
-  }
-
-  return {
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    width: '240px',
-  };
-});
-
-const PlaceholderElem = styled(Typography)<PlaceholderProps>(({ theme, disabled }) => {
-  return {
-    color: theme.palette.neutralGrey[45],
-    position: 'absolute' as const,
-    left: '16px',
-    top: '8px',
-    backgroundColor: 'transparent',
-    height: '30px',
-    pointerEvents: 'none',
-    opacity: disabled ? '0.4' : '1',
-    cursor: 'pointer !important',
-  };
-});
-
-const DropdownPlaceholder = ({
-  placeholder,
-  disabled,
-}: {
-  placeholder: string;
-  disabled?: boolean;
-}) => {
-  return (
-    <PlaceholderElem
-      variant="body5"
-      disabled={disabled}
-    >
-      {placeholder}
-    </PlaceholderElem>
-  );
-};
-
-export { BaseDropdown, DropdownPlaceholder, DropdownContainer };

package/src/components/Dropdown/Dropdown.tsx

@@ -1,116 +0,0 @@
-import React from 'react';
-import { ArrowDown } from '../../icons';
-
-import type { SelectChangeEvent } from '@mui/material';
-import { useState } from 'react';
-import { BaseDropdown, DropdownContainer, DropdownPlaceholder } from './Dropdown.styled';
-import type { DropdownComponent, DropdownProps } from './Dropdown.types';
-import { handlePlaceholder } from './Dropdown.utils';
-
-import theme from '../../theme';
-import { InputMsg } from '../BaseTextField/BaseTextField.styled';
-import { BUTTON_DROPDOWN_ITEM } from './DropdownItem.utils';
-
-const Dropdown = (({
-  children,
-  placeholder,
-  value,
-  error,
-  helperMsg,
-  onChange,
-  sx,
-  style,
-  MenuProps = undefined,
-  ContainerProps,
-  ...otherProps
-}: DropdownProps) => {
-  // Prevents selecting a DropdownItem with `asButton` property.
-  const handleChange = (e: SelectChangeEvent<unknown>, child: React.ReactNode) => {
-    if (!!onChange && e.target.value !== BUTTON_DROPDOWN_ITEM) {
-      onChange(e, child);
-    }
-  };
-  const [isOpen, setOpen] = useState<boolean>(false);
-
-  return (
-    <DropdownContainer
-      {...ContainerProps}
-      fullWidth={otherProps.fullWidth}
-    >
-      <BaseDropdown
-        sx={sx}
-        style={style}
-        IconComponent={() => (
-          <ArrowDown
-            onClick={() => {
-              if (typeof otherProps.open === 'undefined') setOpen(false);
-            }}
-            style={
-              isOpen || otherProps.open
-                ? {
-                    cursor: 'pointer',
-                    transform: 'scaleY(-1)',
-                  }
-                : undefined
-            }
-          />
-        )}
-        onClick={() => {
-          if (!otherProps.disabled) setOpen(!isOpen);
-        }}
-        // https://github.com/mui/material-ui/issues/26076#issuecomment-1014345564
-        onClose={() => {
-          setTimeout(() => {
-            (document.activeElement as HTMLElement).blur();
-          }, 0);
-        }}
-        onChange={handleChange}
-        error={!!error}
-        open={
-          // eslint-disable-next-line no-nested-ternary
-          typeof otherProps.open !== 'undefined'
-            ? otherProps.open
-            : otherProps.disabled
-              ? false
-              : isOpen
-        }
-        // MUI expects a value of '' if undefined :S
-        value={value ?? ''}
-        MenuProps={
-          MenuProps ?? {
-            disablePortal: true,
-            sx: {
-              '.MuiPaper-root': {
-                marginTop: '4px',
-                borderRadius: '8px',
-                background: theme.palette.neutralGrey[85],
-                border: 'transparent',
-              },
-            },
-          }
-        }
-        {...otherProps}
-      >
-        {children}
-      </BaseDropdown>
-      {handlePlaceholder(value) && placeholder && (
-        <DropdownPlaceholder
-          placeholder={placeholder}
-          disabled={otherProps.disabled}
-        />
-      )}
-      {error ? (
-        <InputMsg
-          variant="body5"
-          error
-        >
-          {error}
-        </InputMsg>
-      ) : (
-        helperMsg && <InputMsg variant="body5">{helperMsg}</InputMsg>
-      )}
-    </DropdownContainer>
-  );
-}) as DropdownComponent;
-
-export default Dropdown;

package/src/components/Dropdown/Dropdown.types.ts

@@ -1,31 +0,0 @@
-import type { BoxProps, SelectProps, TypographyProps } from '@mui/material';
-import { IconDropdownOption } from './IconDropdown.types';
-
-interface DropdownContainerProps extends BoxProps {
-  fullWidth?: boolean;
-}
-
-type BaseDropdownProps<T = unknown> = SelectProps<T>;
-interface DropdownProps<T = unknown>
-  extends Omit<BaseDropdownProps<T>, 'IconComponent' | 'error' | 'sx' | 'style'> {
-  error?: string;
-  helperMsg?: string;
-  ContainerProps?: BoxProps;
-  sx?: SelectProps['sx'];
-  style?: SelectProps['style'];
-  options?: IconDropdownOption[];
-}
-
-interface PlaceholderProps extends TypographyProps {
-  disabled?: boolean;
-}
-
-type DropdownComponent = <T>(props: DropdownProps<T>) => JSX.Element;
-
-export type {
-  DropdownContainerProps,
-  DropdownProps,
-  BaseDropdownProps,
-  PlaceholderProps,
-  DropdownComponent,
-};

package/src/components/Dropdown/Dropdown.utils.ts

@@ -1,13 +0,0 @@
-const PLACEHOLDER_VAL = 'PLACEHOLDER_VAL';
-
-const handlePlaceholder = (value: unknown) => {
-  if (Array.isArray(value)) {
-    if (value.length) {
-      return false;
-    }
-    return true;
-  }
-  return !value;
-};
-
-export { PLACEHOLDER_VAL, handlePlaceholder };

package/src/components/Dropdown/DropdownItem.styled.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import { MenuItem, Typography, styled } from '@mui/material';
-import type { Theme } from '@mui/material';
-import type { BaseDropdownItemProps } from './DropdownItem.types';
-
-const baseDropdownItemStyle = (theme: Theme) => {
-  return {
-    background: theme.palette.neutralGrey[85],
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    borderRadius: '8px',
-    position: 'relative' as const,
-    margin: '0 8px',
-    gap: '9px',
-    '&:hover': {
-      background: theme.palette.neutralGrey[75],
-    },
-    '&.Mui-disabled': {
-      background: theme.palette.neutralGrey[85],
-      opacity: '1',
-      color: '#C4C4C4',
-      cursor: 'pointer !important',
-    },
-    '&.Mui-selected': {
-      background: 'transparent',
-      '&:hover, &.Mui-selected:hover, &.Mui-focusVisible, &.Mui-selected.Mui-focusVisible': {
-        borderRadius: '8px',
-        backgroundColor: theme.palette.neutralGrey[75],
-      },
-    },
-  };
-};
-
-const padNoIconStyle = {
-  paddingLeft: '45px !important',
-};
-
-const BaseDropdownItem = styled(MenuItem, {
-  shouldForwardProp: (prop) => prop !== 'emptyIcon',
-})<BaseDropdownItemProps>(({ theme, emptyIcon }) => {
-  let style = baseDropdownItemStyle(theme);
-
-  if (emptyIcon) {
-    style = {
-      ...style,
-      ...padNoIconStyle,
-    };
-  }
-
-  return style;
-});
-
-const BaseShortcutLabel = styled(Typography)(({ theme }) => {
-  return {
-    color: theme.palette.neutralGrey[45],
-    position: 'absolute' as const,
-    right: '20px',
-  };
-});
-
-const KeyboardShortcut = ({ label }: { label: string }) => {
-  return <BaseShortcutLabel variant="body_m1">{label}</BaseShortcutLabel>;
-};
-
-export { BaseDropdownItem, KeyboardShortcut };

package/src/components/Dropdown/DropdownItem.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import { Check } from '../../icons';
-import { BaseDropdownItem, KeyboardShortcut } from './DropdownItem.styled';
-import type { DropdownItemProps } from './DropdownItem.types';
-import { BUTTON_DROPDOWN_ITEM, shouldPadForEmptyIcon } from './DropdownItem.utils';
-
-const DropdownItem = ({
-  checkIcon,
-  customIcon,
-  children,
-  emptyIcon,
-  asButton,
-  value,
-  keyboardShortcut,
-  ...otherProps
-}: DropdownItemProps) => {
-  return (
-    <BaseDropdownItem
-      {...otherProps}
-      value={asButton ? BUTTON_DROPDOWN_ITEM : value}
-      emptyIcon={shouldPadForEmptyIcon(emptyIcon, checkIcon, customIcon, otherProps.selected)}
-    >
-      {/* Custom Icon overrides check icon */}
-      {customIcon ?? (checkIcon && otherProps.selected && <Check />)}
-      {children}
-      {keyboardShortcut && <KeyboardShortcut label={keyboardShortcut} />}
-    </BaseDropdownItem>
-  );
-};
-
-export default DropdownItem;
-
-/* 
-
-if checkicon, add empty padding.
-if checkicon and selected, add icon
-
-if custom icon, add icon
-if checkicon and customicon, custom icon
-
-if emptyicon, add padding
-if checkicon and emptyicon, only 
-
-
-*/

package/src/components/Dropdown/DropdownItem.types.ts

@@ -1,14 +0,0 @@
-import type { MenuItemProps } from '@mui/material';
-
-interface BaseDropdownItemProps extends MenuItemProps {
-  emptyIcon?: boolean;
-}
-
-interface DropdownItemProps extends BaseDropdownItemProps {
-  asButton?: boolean;
-  checkIcon?: boolean;
-  customIcon?: React.ReactElement;
-  keyboardShortcut?: string;
-}
-
-export { DropdownItemProps, BaseDropdownItemProps };