@lunit/oui 1.0.0-alpha.1

package/src/components/DatePicker/DatePicker.tsx

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/Divider/index.ts

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

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

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