@lunit/design-system 2.0.2 → 2.2.0

package/dist/types/foundation/colors/base/lunitTeal.d.ts

@@ -1,6 +1,7 @@
 export declare const lunit_teal: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;
@@ -13,6 +14,7 @@ export declare const lunit_teal: {
 export declare const lunit_tealText: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;

package/dist/types/foundation/colors/base/magenta.d.ts

@@ -1,6 +1,7 @@
 export declare const magenta: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;
@@ -13,6 +14,7 @@ export declare const magenta: {
 export declare const magentaText: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;

package/dist/types/foundation/colors/base/orange.d.ts

@@ -1,6 +1,7 @@
 export declare const orange: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;
@@ -13,6 +14,7 @@ export declare const orange: {
 export declare const orangeText: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;

package/dist/types/foundation/colors/base/purple.d.ts

@@ -1,6 +1,7 @@
 export declare const purple: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;
@@ -13,6 +14,7 @@ export declare const purple: {
 export declare const purpleText: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;

package/dist/types/foundation/colors/base/red.d.ts

@@ -1,6 +1,7 @@
 export declare const red: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;
@@ -13,6 +14,7 @@ export declare const red: {
 export declare const redText: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;

package/dist/types/foundation/colors/base/yellow.d.ts

@@ -1,6 +1,7 @@
 export declare const yellow: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;
@@ -13,6 +14,7 @@ export declare const yellow: {
 export declare const yellowText: {
     5: string;
     10: string;
+    15: string;
     20: string;
     30: string;
     40: string;

package/dist/types/foundation/colors/index.d.ts

@@ -125,8 +125,11 @@ declare const paletteOptions: {
             icon_warning_02: string;
             icon_info_02: string;
             hover: string;
+            status_hover: string;
             focused: string;
+            status_focused: string;
             selected: string;
+            status_selected: string;
             shadow_01: string;
             shadow_02: string;
             shadow_03: string;

package/dist/types/foundation/colors/types.d.ts

@@ -20,8 +20,11 @@ export interface ColorToken {
         icon_warning_02: string;
         icon_info_02: string;
         hover: string;
+        status_hover: string;
         focused: string;
+        status_focused: string;
         selected: string;
+        status_selected: string;
         shadow_01: string;
         shadow_02: string;
         shadow_03: string;

package/dist/types/foundation/index.d.ts

@@ -76,8 +76,11 @@ export declare const palette: {
             icon_warning_02: string;
             icon_info_02: string;
             hover: string;
+            status_hover: string;
             focused: string;
+            status_focused: string;
             selected: string;
+            status_selected: string;
             shadow_01: string;
             shadow_02: string;
             shadow_03: string;

package/dist/types/index.d.ts

@@ -7,7 +7,7 @@ export { default as Checkbox } from "./components/Checkbox";
 export { default as Dialog } from "./components/Dialog";
 export { default as DataTable } from "./components/DataTable";
 export { default as DatePicker } from "./components/DatePicker";
-export { default as Dropdown } from "./components/Dropdown";
+export { default as Dropdown, DropdownItem, DropdownDivider, DropdownSubtitle, } from "./components/Dropdown";
 export { default as FormLabel } from "./components/FormLabel";
 export { default as Radio } from "./components/Radio";
 export { default as RadioGroup } from "./components/RadioGroup";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/design-system",
-  "version": "2.0.2",
+  "version": "2.2.0",
   "description": "Lunit Design System",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
@@ -56,37 +56,35 @@
       }
     }
   },
+  "engines": {
+    "node": ">=20.0.0"
+  },
   "devDependencies": {
     "@babel/core": "^7.17.10",
     "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.4",
-    "@emotion/react": "^11.9.0",
+    "@emotion/react": "11.14.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/icons-material": "^5.11.3",
-    "@mui/material": "^5.11.3",
+    "@mui/icons-material": "5.18.0",
+    "@mui/material": "5.18.0",
     "@mui/utils": "^5.11.3",
-    "@mui/x-date-pickers": "^5.0.20",
-    "@storybook/addon-actions": "^7.0.21",
-    "@storybook/addon-essentials": "^7.0.21",
-    "@storybook/addon-interactions": "^7.0.21",
-    "@storybook/addon-links": "^7.0.21",
-    "@storybook/addon-storysource": "^7.0.21",
-    "@storybook/blocks": "^7.0.21",
-    "@storybook/react": "^7.0.21",
-    "@storybook/react-webpack5": "^7.0.21",
-    "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.0.21",
+    "@storybook/addon-docs": "9.1.2",
+    "@storybook/addon-links": "9.1.2",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+    "@storybook/react-webpack5": "9.1.2",
     "@types/lodash": "^4.14.182",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
     "babel-loader": "^8.2.5",
     "chromatic": "^6.7.0",
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
     "mustache": "^4.2.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "storybook": "^7.0.21",
-    "storybook-addon-pseudo-states": "^2.0.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "storybook": "9.1.2",
+    "storybook-addon-pseudo-states": "^9.1.2",
     "ts-loader": "^9.3.0",
     "typescript": "^4.6.4",
     "webpack": "^5.72.0",
@@ -98,8 +96,8 @@
   },
   "peerDependencies": {
     "@mui/material": "^5.0.0",
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   }
 }

package/src/components/Chip/Chip.styled.ts

@@ -10,19 +10,14 @@ import type {
 } from "./Chip.types";
 
 const COMMON_STYLES = {
-  "&.MuiChip-root": {
-    height: "22px",
-    width: "auto",
-    minWidth: "22px",
-    boxShadow: "none",
-  },
+  height: "22px",
+  width: "auto",
+  minWidth: "22px",
+  boxShadow: "none",
   "&.Mui-disabled": {
     opacity: 1,
   },
   "& .MuiChip-label": {
-    display: "flex",
-    alignItems: "center",
-    textAlign: "center",
     padding: 0,
     marginInline: "8px",
   },
@@ -117,16 +112,14 @@ export const StyledContainedChipEnable = styled(StyledContainedChipBase, {
    * Setting the z-index of the chip to 0 and the z-index of the pseudo element to -1
    * allows the pseudo element(hover layer) to be rendered between the chip and the chip's children.
    */
-  "&.MuiChip-root": {
-    position: "relative",
-    left: 0,
-    right: 0,
-    zIndex: 0,
-  },
+  position: "relative",
+  left: 0,
+  right: 0,
+  zIndex: 0,
   "&:hover": {
     backgroundColor: getColorToken("bg", theme, color),
   },
-  "&.MuiChip-root:hover::before": {
+  "&:hover::before": {
     position: "absolute",
     zIndex: -1,
     content: '""',

package/src/components/Chip/Chip.types.ts

@@ -6,6 +6,8 @@ import type {
 } from "@mui/material";
 import type { OverridableComponent } from "@mui/material/OverridableComponent";
 
+import type { JSX } from "react";
+
 type DesignSystemChipKind = "outlined" | "contained";
 type DesignSystemAndMuiContainedChipKind = "filled" | "contained";
 type ColorKeys = keyof typeof CHIP_COLORS;

package/src/components/Dialog/Dialog.tsx

@@ -26,7 +26,6 @@ export interface DialogBase {
   titleVariant?: TypographyProps["variant"];
   children: React.ReactNode;
   actions?: React.ReactNode;
-  enableBackButtonClose?: boolean; // only for passive dialog
   enableBackdropClose?: boolean;
   size?: "small" | "medium"; // default "small"
   sx?: SxProps;
@@ -37,13 +36,11 @@ export interface DialogBase {
 export interface PassiveDialogType extends DialogBase {
   type: "passive";
   actions?: undefined;
-  enableBackButtonClose?: true;
   enableBackdropClose?: true;
 }
 export interface ActionDialogType extends DialogBase {
   type: "action";
   actions: React.ReactNode;
-  enableBackButtonClose?: false;
   enableBackdropClose?: boolean;
 }
 
@@ -89,16 +86,11 @@ function Dialog(props: DialogProps) {
     function handleEscClose(event: KeyboardEvent) {
       if (event.key === "Escape") onClose();
     }
-    function handleBackButtonClose(event: KeyboardEvent) {
-      if (event.key === "Backspace") onClose();
-    }
 
     document.addEventListener("keydown", handleEscClose);
-    document.addEventListener("keydown", handleBackButtonClose);
 
     return () => {
       document.removeEventListener("keydown", handleEscClose);
-      document.removeEventListener("keydown", handleBackButtonClose);
     };
   }, [isOpen, isPassiveModal, onClose]);
 

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

@@ -0,0 +1,170 @@
+import { styled } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import Select from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
+
+import { DropdownProps } from "./Dropdown.types";
+type StyledDropdownProps = Omit<DropdownProps, "size"> & {
+  selectSize: "small" | "medium" | "large";
+};
+
+const valuesBySize = {
+  small: {
+    height: "28px",
+    padding: "4px 12px",
+    iconTop: "4px",
+    iconRight: "12px",
+  },
+  medium: {
+    height: "36px",
+    padding: "8px 16px",
+    iconTop: "8px",
+    iconRight: "16px",
+  },
+  large: {
+    height: "44px",
+    padding: "10px 16px",
+    iconTop: "12px", // large 의 text line height 가 medium, small 보다 4px 크기 때문에 그의 반절인 2px + padding 값 10px => 12px
+    iconRight: "16px",
+  },
+};
+
+export const StyledSelect = styled(Select, {
+  shouldForwardProp: (prop: string) => {
+    return !["selectSize", "select"].includes(prop);
+  },
+})<StyledDropdownProps>(({ theme, selectSize }) => ({
+  ...(selectSize === "large"
+    ? { ...theme.typography.body1_16_regular }
+    : { ...theme.typography.body2_14_regular }),
+  height: valuesBySize[selectSize || "medium"].height,
+  padding: valuesBySize[selectSize || "medium"].padding,
+  backgroundColor: theme.palette.lunit_token.component.textfield_bg,
+  overflow: "hidden",
+  "& .MuiSelect-select": {
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingRight: "28px !important", // icon width 20px + 아이콘과 텍스트 사이의 gap 8px
+    color: theme.palette.lunit_token.core.text_normal,
+  },
+  "&.MuiInputBase-root": {
+    borderRadius: "8px",
+    border: "none",
+
+    "&:hover:not(.Mui-disabled, .Mui-error):before": {
+      border: "none",
+    },
+  },
+  "& .MuiInput-input": {
+    "&:focus": {
+      backgroundColor: "transparent",
+    },
+  },
+  "&::after": {
+    border: "none",
+  },
+  "&::before": {
+    border: "none",
+  },
+  "&:hover": {
+    position: "relative",
+    zIndex: 0,
+    backgroundColor: theme.palette.lunit_token.component.textfield_bg,
+    border: "none",
+  },
+  "&:hover::before": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: -1,
+    backgroundColor: theme.palette.lunit_token.core.hover,
+    border: "none",
+  },
+  // .Mui-focused 컴포넌트에 바로 border를 적용하면 컴포넌트의 width, height 값이 border 값만큼 늘어나기 때문에 따로 엘리먼트를 만들어서 border 를 적용함.
+  // 다른 :before 들도 동일한 이유로 작성
+  "&.Mui-focused::before": {
+    border: `1px solid ${theme.palette.lunit_token.core.focused}`,
+    content: '""',
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    borderRadius: "8px",
+    transition: "none",
+  },
+  "&.Mui-disabled": {
+    opacity: 0.38,
+  },
+  "&.Mui-disabled:before": {
+    borderBottomStyle: "none",
+  },
+  "&.Mui-error::before": {
+    border: `1px solid ${theme.palette.lunit_token.component.textfield_border_error}`,
+    content: '""',
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    borderRadius: "8px",
+    transition: "none",
+  },
+  "& .MuiSvgIcon-root": {
+    width: "20px",
+    height: "20px",
+    top: valuesBySize[selectSize || "medium"].iconTop, // mui 에서 이 icon position 이 position: absolute 로 되어 있어서 padding 값에 맞춰 포지션 조절
+    right: valuesBySize[selectSize || "medium"].iconRight,
+    color: theme.palette.lunit_token.core.text_normal,
+    "&.Mui-disabled": {
+      color: theme.palette.lunit_token.core.text_normal,
+    },
+  },
+}));
+
+export const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
+  ...theme.typography.body2_14_regular,
+  padding: "8px",
+  borderRadius: "8px",
+  color: theme.palette.lunit_token.core.text_normal,
+  backgroundColor: "transparent",
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "space-between",
+  gap: "8px",
+  "&:hover": {
+    backgroundColor: theme.palette.lunit_token.core.hover,
+  },
+  "&.Mui-focusVisible": {
+    backgroundColor: "transparent",
+    "&:hover": {
+      backgroundColor: theme.palette.lunit_token.core.hover,
+    },
+  },
+  // TODO: 디자이너와 focus 디자인 확인 후 살리든 지우든 하기
+  // "&:focus::before": {
+  //   border: "1px solid",
+  //   borderColor: theme.palette.lunit_token.core.focused,
+  //   content: '""',
+  //   position: "absolute",
+  //   top: 0,
+  //   bottom: 0,
+  //   left: -8,
+  //   right: -8,
+  // },
+  "& .multipleChecked": {
+    display: "none",
+  },
+  "&.filledStyle": {
+    backgroundColor: theme.palette.lunit_token.core.selected,
+  },
+}));
+
+export const StyledIconWrapper = styled(Box)({
+  width: "20px",
+  height: "20px",
+  marginRight: "8px",
+});

package/src/components/Dropdown/Dropdown.tsx

@@ -1,11 +1,62 @@
-import React from 'react'
+import React, { forwardRef } from "react";
+import ArrowDownSm from "@lunit/design-system-icons/ArrowDownSm";
+import { DropdownProps } from "./Dropdown.types";
+import { StyledSelect } from "./Dropdown.styled";
 
-import { Box } from '@mui/material'
+const Dropdown = forwardRef((props: DropdownProps, ref) => {
+  const {
+    select = "single",
+    size = "medium",
+    className,
+    children,
+    sx,
+    ...restProps
+  } = props;
 
-const Dropdown = () => {
-    return (
-        <Box>Dropdown</Box>
-    )
-}
+  return (
+    <StyledSelect
+      className={className}
+      variant="standard" // variant standard 기준으로 스타일링 되어있음. 다른 variant 사용 시 스타일이 틀어질 수 있음
+      multiple={select === "multiple"}
+      IconComponent={(props) => <ArrowDownSm {...props} />}
+      MenuProps={{
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "left",
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "left",
+        },
+        PaperProps: {
+          sx: {
+            marginTop: "4px",
+            padding: "0px 8px",
+            borderRadius: "8px",
+            backgroundColor: (theme) => theme.palette.lunit_token.core.bg_02,
+          },
+          className: `elevation2 ${className || "light1"}`,
+        },
+        MenuListProps: {
+          // 추후 MUI 버전 업그레이드 시 MenuListProps 변경 필요. Deprecated－use the slotProps.list prop instead. https://mui.com/material-ui/api/menu/ 의 MenuListProps 참고
+          sx: {
+            "& .singleChecked": {
+              display: select === "single" ? "inherit" : "none",
+            },
+            "& .multipleChecked": {
+              display: select === "multiple" ? "inherit !important" : "none",
+            },
+          },
+        },
+      }}
+      sx={sx}
+      selectSize={size}
+      {...restProps}
+      ref={ref}
+    >
+      {children}
+    </StyledSelect>
+  );
+});
 
-export default Dropdown
+export default Dropdown;

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

@@ -0,0 +1,17 @@
+import type { MenuItemProps, SelectProps } from "@mui/material";
+
+import type { JSX } from "react";
+
+export interface DropdownProps
+  extends Omit<SelectProps, "size" | "variant" | "placeholder"> {
+  // mui variant 를 바꾸게 되면 스타일이 틀어질 수 있어서 variant 를 아예 사용하지 못하게 props 에서 제거
+  // mui select 에서는 placeholder 가 동작하지 않기 때문에 유저가 헷갈리지 않게 props 에서 제거
+  select?: "single" | "multiple";
+  size?: "small" | "medium" | "large";
+}
+
+export interface DropdownItemProps extends MenuItemProps {
+  leftIcon?: JSX.Element;
+  rightText?: string;
+  isFilledStyle?: boolean;
+}

package/src/components/Dropdown/DropdownItem.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import { Box, Divider, ListSubheader, SxProps } from "@mui/material";
+import Check from "@lunit/design-system-icons/Check";
+
+import Checkbox from "../Checkbox";
+import Typography from "../Typography";
+
+import { DropdownItemProps } from "./Dropdown.types";
+import { StyledIconWrapper, StyledMenuItem } from "./Dropdown.styled";
+
+export function DropdownItem(props: DropdownItemProps) {
+  const {
+    leftIcon,
+    rightText,
+    selected,
+    isFilledStyle, // 체크 아이콘이나 체크박스 대신 bg 색깔로 선택된 상태를 표현하기 위한 prop. 일부 상황에서만 사용되고 대부분은 체크 아이콘이나 체크박스 사용
+    children,
+    sx,
+    ...restProps
+  } = props;
+
+  return (
+    <StyledMenuItem
+      className={isFilledStyle && selected ? "filledStyle" : undefined}
+      sx={sx}
+      {...restProps}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "flex-start",
+        }}
+      >
+        {!isFilledStyle && (
+          <>
+            <StyledIconWrapper className="singleChecked">
+              {selected && <Check fontSize="small" />}
+            </StyledIconWrapper>
+            <Checkbox
+              className="multipleChecked"
+              sx={{ mr: 2 }}
+              checked={selected}
+            />
+          </>
+        )}
+        {leftIcon && (
+          <StyledIconWrapper>
+            {leftIcon}
+            {/* <Demo fontSize="small" /> // TODO: icon fontSize 가 항상 small(width, height: 20px) 이어야함. 여기서 값을 고정시킬 방법은?
+             */}
+          </StyledIconWrapper>
+        )}
+        {children}
+      </Box>
+      <Box>
+        {rightText && (
+          <Typography
+            variant="body2_14_medium"
+            sx={{
+              color: (theme) => theme.palette.lunit_token.core.text_light,
+            }}
+          >
+            {rightText}
+          </Typography>
+        )}
+      </Box>
+    </StyledMenuItem>
+  );
+}
+
+export function DropdownDivider({ sx }: { sx?: SxProps }) {
+  return (
+    <Divider
+      sx={{
+        margin: "8px -8px",
+        borderColor: (theme) =>
+          theme.palette.lunit_token.component.dropdown_divider_border,
+        ...sx,
+      }}
+    />
+  );
+}
+
+export function DropdownSubtitle({
+  title,
+  sx,
+}: {
+  title: string;
+  sx?: SxProps;
+}) {
+  return (
+    <ListSubheader
+      sx={{
+        typography: "body3_12_semibold",
+        padding: "4px 8px",
+        color: (theme) => theme.palette.lunit_token.core.text_light,
+        backgroundColor: "transparent",
+        ...sx,
+      }}
+    >
+      {title}
+    </ListSubheader>
+  );
+}
+// 참조 : https://mui.com/material-ui/react-select/#grouping
+DropdownSubtitle.muiSkipListHighlight = true;