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

package/src/components/DataTable/index.ts

@@ -1 +0,0 @@
-export { default as DataTable } from './DataTable';

package/src/components/DatePicker/DatePicker.styled.ts

@@ -1,19 +0,0 @@
-import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
-import { styled } from '@mui/material/styles';
-
-const StyledDatePicker = styled(DesktopDatePicker)(({ theme }) => ({
-  '.MuiInputBase-root': {
-    height: '36px',
-    backgroundColor: theme.palette.neutralGrey[75],
-
-    '&:hover fieldset': {
-      borderColor: theme.palette.neutralGrey[45],
-    },
-    '&.Mui-focused fieldset': {
-      borderColor: theme.palette.lunitTeal[10],
-      borderWidth: '1px',
-    },
-  },
-}));
-
-export { StyledDatePicker };

package/src/components/DatePicker/DatePicker.tsx

@@ -1,194 +0,0 @@
-import React from 'react';
-import { useState, useMemo, useEffect } from 'react';
-import { CloseSmall, ArrowLeft, ArrowRight } from '../../icons';
-
-import { StyledDatePicker } from './DatePicker.styled';
-import type { DatePickerProps } from './DatePicker.types';
-import { Button } from '../Button';
-
-import theme from '../../theme';
-
-function DatePicker({ alignment, placeholder, onChange, value, ...props }: DatePickerProps) {
-  const [open, setOpen] = useState<boolean>(false);
-  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
-
-  const { slots, slotProps, ...otherProps } = props;
-
-  const handleFieldClick = () => {
-    setOpen(true);
-  };
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleChange = (date: Date | null, context: any) => {
-    setSelectedDate(date);
-    if (onChange) onChange(date, context);
-    setOpen(false);
-  };
-
-  const handleFieldClearClick = (e: React.MouseEvent<HTMLElement>) => {
-    e.stopPropagation();
-    handleChange(null, null);
-  };
-
-  const popperPlacement = useMemo(() => {
-    switch (alignment) {
-      case 'left':
-        return 'bottom-start';
-      case 'right':
-        return 'bottom-end';
-      default:
-        return 'bottom';
-    }
-  }, [alignment]);
-
-  useEffect(() => {
-    if (value === null && selectedDate !== null) {
-      setSelectedDate(null);
-    }
-    if (value !== null && selectedDate === null) {
-      setSelectedDate(value!);
-    }
-  }, [value, selectedDate, setSelectedDate]);
-
-  const canUseToday = useMemo(() => {
-    const today = new Date();
-    if (props.minDate && today < props.minDate) return false;
-    if (props.maxDate && today > props.maxDate) return false;
-    return true;
-  }, [props.minDate, props.maxDate]);
-
-  return (
-    <StyledDatePicker
-      open={open}
-      value={selectedDate}
-      onChange={handleChange}
-      // onOpen={() => setOpen(true)}
-      onClose={() => setOpen(false)}
-      views={['year', 'month', 'day']}
-      slots={{
-        inputAdornment: () => {
-          if (selectedDate) {
-            return (
-              <Button
-                variant="ghost"
-                color="secondary"
-                size="small"
-                icon={<CloseSmall />}
-                sx={{
-                  color: theme.palette.neutralGrey[0],
-                  borderColor: 'transparent !important',
-                }}
-                onClick={handleFieldClearClick}
-              />
-            );
-          }
-          return null;
-        },
-        leftArrowIcon: ArrowLeft,
-        rightArrowIcon: ArrowRight,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ...(slots as any),
-      }}
-      slotProps={{
-        switchViewButton: {
-          sx: {
-            display: 'none',
-          },
-        },
-        textField: {
-          variant: 'outlined',
-          onClick: handleFieldClick,
-          InputProps: {
-            placeholder: placeholder || 'mm/dd/yyyy',
-            sx: {
-              borderRadius: '8px',
-              // According to designer, the width of the date picker should be enforced at 320px
-              // when the placement is bottom. that is why we have !important here.
-              width: popperPlacement === 'bottom' ? '320px !important' : 'auto',
-              borderColor: 'red',
-              ...theme.typography.body5,
-
-              '& input': {
-                textTransform: 'lowercase',
-              },
-              '& ::placeholder': {
-                textTransform: 'none',
-              },
-            },
-            onMouseDown: (e: React.MouseEvent<HTMLInputElement>) => {
-              const element = e.target as HTMLElement;
-              if (element.tagName === 'INPUT') {
-                e.preventDefault();
-              }
-            },
-          },
-        },
-        popper: {
-          placement: popperPlacement,
-          modifiers: [
-            {
-              name: 'offset',
-              enabled: true,
-              options: {
-                offset: [0, 8],
-              },
-            },
-          ],
-          sx: {
-            '& .MuiPickersDay-today': {
-              border: `1px solid ${theme.palette.neutralGrey[0]} !important`,
-              borderRadius: '50%',
-            },
-
-            '& .MuiPickersDay-root:hover': {
-              border: `1px solid ${theme.palette.neutralGrey[0]}`,
-              borderRadius: '50%',
-            },
-
-            '& .MuiPickersDay-root.Mui-selected': {
-              backgroundColor: `${theme.palette.lunitTeal[40]} !important`,
-              color: `${theme.palette.neutralGrey[97]} !important`,
-            },
-          },
-        },
-        desktopPaper: {
-          sx: {
-            background: theme.palette.neutralGrey[70],
-          },
-        },
-        previousIconButton: {
-          sx: {
-            color: theme.palette.neutralGrey[0],
-          },
-        },
-        nextIconButton: {
-          sx: {
-            color: theme.palette.neutralGrey[0],
-          },
-        },
-        actionBar: {
-          actions: ['today'],
-          sx: {
-            '& button': {
-              color: `${theme.palette.lunitTeal[40]} !important`,
-              textTransform: 'capitalize',
-              pointerEvents: canUseToday ? 'auto' : 'none',
-              opacity: canUseToday ? 1 : 0.4,
-            },
-          },
-        },
-        day: {
-          sx: {
-            backgroundColor: 'transparent !important',
-          },
-        },
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ...(slotProps as any),
-      }}
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      {...(otherProps as any)}
-    />
-  );
-}
-
-export default DatePicker;

package/src/components/DatePicker/DatePicker.types.ts

@@ -1,8 +0,0 @@
-import type { DatePickerProps as MuiDatePickerProps } from '@mui/x-date-pickers/DatePicker';
-
-export type DatePickerAlignment = 'left' | 'center' | 'right';
-
-export interface DatePickerProps extends MuiDatePickerProps<Date> {
-  alignment?: DatePickerAlignment;
-  placeholder?: string;
-}

package/src/components/DatePicker/index.ts

@@ -1,4 +0,0 @@
-import DatePicker from './DatePicker';
-import type { DatePickerProps } from './DatePicker.types';
-
-export { DatePicker, DatePickerProps };

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