@lunit/design-system 2.2.0 → 2.2.3

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

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

package/src/components/Dropdown/Dropdown.tsx

@@ -1,50 +1,49 @@
-import React, { forwardRef } from "react";
-import ArrowDownSm from "@lunit/design-system-icons/ArrowDownSm";
-import { DropdownProps } from "./Dropdown.types";
-import { StyledSelect } from "./Dropdown.styled";
+import React, { forwardRef, useCallback } from 'react';
+import ArrowDownSm from '@lunit/design-system-icons/ArrowDownSm';
+import { DropdownProps } from './Dropdown.types';
+import { StyledSelect } from './Dropdown.styled';
+import { SvgIconProps } from '@mui/material';
 
 const Dropdown = forwardRef((props: DropdownProps, ref) => {
-  const {
-    select = "single",
-    size = "medium",
-    className,
-    children,
-    sx,
-    ...restProps
-  } = props;
+  const { select = 'single', size = 'medium', className, children, sx, ...restProps } = props;
+  const IconComponent = useCallback(
+    (iconProps: SvgIconProps) => <ArrowDownSm {...iconProps} />,
+    [],
+  );
 
   return (
     <StyledSelect
       className={className}
       variant="standard" // variant standard 기준으로 스타일링 되어있음. 다른 variant 사용 시 스타일이 틀어질 수 있음
-      multiple={select === "multiple"}
-      IconComponent={(props) => <ArrowDownSm {...props} />}
+      multiple={select === 'multiple'}
+      IconComponent={IconComponent}
       MenuProps={{
         anchorOrigin: {
-          vertical: "bottom",
-          horizontal: "left",
+          vertical: 'bottom',
+          horizontal: 'left',
         },
         transformOrigin: {
-          vertical: "top",
-          horizontal: "left",
+          vertical: 'top',
+          horizontal: 'left',
         },
         PaperProps: {
           sx: {
-            marginTop: "4px",
-            padding: "0px 8px",
-            borderRadius: "8px",
+            marginTop: '4px',
+            padding: '0px 8px',
+            borderRadius: '8px',
             backgroundColor: (theme) => theme.palette.lunit_token.core.bg_02,
           },
-          className: `elevation2 ${className || "light1"}`,
+          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",
+        slotProps: {
+          list: {
+            sx: {
+              '& .singleChecked': {
+                display: select === 'single' ? 'inherit' : 'none',
+              },
+              '& .multipleChecked': {
+                display: select === 'multiple' ? 'inherit !important' : 'none',
+              },
             },
           },
         },

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

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

package/src/components/Dropdown/DropdownItem.tsx

@@ -1,12 +1,12 @@
-import React from "react";
-import { Box, Divider, ListSubheader, SxProps } from "@mui/material";
-import Check from "@lunit/design-system-icons/Check";
+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 Checkbox from '../Checkbox';
+import Typography from '../Typography';
 
-import { DropdownItemProps } from "./Dropdown.types";
-import { StyledIconWrapper, StyledMenuItem } from "./Dropdown.styled";
+import { DropdownItemProps } from './Dropdown.types';
+import { StyledIconWrapper, StyledMenuItem } from './Dropdown.styled';
 
 export function DropdownItem(props: DropdownItemProps) {
   const {
@@ -21,15 +21,15 @@ export function DropdownItem(props: DropdownItemProps) {
 
   return (
     <StyledMenuItem
-      className={isFilledStyle && selected ? "filledStyle" : undefined}
+      className={isFilledStyle && selected ? 'filledStyle' : undefined}
       sx={sx}
       {...restProps}
     >
       <Box
         sx={{
-          display: "flex",
-          flexDirection: "row",
-          justifyContent: "flex-start",
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'flex-start',
         }}
       >
         {!isFilledStyle && (
@@ -37,11 +37,7 @@ export function DropdownItem(props: DropdownItemProps) {
             <StyledIconWrapper className="singleChecked">
               {selected && <Check fontSize="small" />}
             </StyledIconWrapper>
-            <Checkbox
-              className="multipleChecked"
-              sx={{ mr: 2 }}
-              checked={selected}
-            />
+            <Checkbox className="multipleChecked" sx={{ mr: 2 }} checked={selected} />
           </>
         )}
         {leftIcon && (
@@ -73,29 +69,22 @@ export function DropdownDivider({ sx }: { sx?: SxProps }) {
   return (
     <Divider
       sx={{
-        margin: "8px -8px",
-        borderColor: (theme) =>
-          theme.palette.lunit_token.component.dropdown_divider_border,
+        margin: '8px -8px',
+        borderColor: (theme) => theme.palette.lunit_token.component.dropdown_divider_border,
         ...sx,
       }}
     />
   );
 }
 
-export function DropdownSubtitle({
-  title,
-  sx,
-}: {
-  title: string;
-  sx?: SxProps;
-}) {
+export function DropdownSubtitle({ title, sx }: { title: string; sx?: SxProps }) {
   return (
     <ListSubheader
       sx={{
-        typography: "body3_12_semibold",
-        padding: "4px 8px",
+        typography: 'body3_12_semibold',
+        padding: '4px 8px',
         color: (theme) => theme.palette.lunit_token.core.text_light,
-        backgroundColor: "transparent",
+        backgroundColor: 'transparent',
         ...sx,
       }}
     >

package/src/components/Dropdown/index.ts

@@ -1,7 +1,3 @@
-export { default } from "./Dropdown";
-export {
-  DropdownItem,
-  DropdownDivider,
-  DropdownSubtitle,
-} from "./DropdownItem";
-export type { DropdownProps, DropdownItemProps } from "./Dropdown.types";
+export { default } from './Dropdown';
+export { DropdownItem, DropdownDivider, DropdownSubtitle } from './DropdownItem';
+export type { DropdownProps, DropdownItemProps } from './Dropdown.types';

package/src/components/FormLabel/FormLabel.styled.ts

@@ -1,8 +1,8 @@
-import { FormControlLabel, styled } from "@mui/material";
+import { FormControlLabel, styled } from '@mui/material';
 
 export const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => ({
   marginLeft: 0,
   '& .MuiTypography-root': {
     marginLeft: theme.spacing(2),
-  }
-}))
+  },
+}));

package/src/components/FormLabel/FormLabel.tsx

@@ -1,6 +1,6 @@
-import React from "react";
-import { FormControlLabelProps } from "@mui/material";
-import { StyledFormControlLabel } from "./FormLabel.styled";
+import React from 'react';
+import { FormControlLabelProps } from '@mui/material';
+import { StyledFormControlLabel } from './FormLabel.styled';
 
 const FormLabel = (props: FormControlLabelProps) => {
   return <StyledFormControlLabel {...props} />;

package/src/components/FormLabel/index.ts

@@ -1 +1 @@
-export { default } from "./FormLabel";
+export { default } from './FormLabel';

package/src/components/Radio/Radio.tsx

@@ -1,32 +1,26 @@
-import React from "react";
-import { styled } from "@mui/material/styles";
-import MuiRadio, { RadioProps } from "@mui/material/Radio";
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import MuiRadio, { RadioProps } from '@mui/material/Radio';
 
 const CustomRadio = styled(MuiRadio)(({ theme }) => ({
   padding: 0,
-  "&.Mui-disabled": {
+  '&.Mui-disabled': {
     opacity: 0.38,
   },
-  "&.Mui-focusVisible:after": {
+  '&.Mui-focusVisible:after': {
     content: '""',
-    position: "absolute",
-    display: "block",
+    position: 'absolute',
+    display: 'block',
     width: 24,
     height: 24,
-    borderRadius: "50%",
-    border: `1px solid ${theme.palette.lunit_token.core.focused}`,
+    borderRadius: '50%',
+    border: `1px solid ${theme.palette.lunit_token.core.status_focused}`,
   },
 }));
 
 const DefaultIcon = () => {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -39,13 +33,7 @@ const DefaultIcon = () => {
 
 const CheckedIcon = () => {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -58,12 +46,7 @@ const CheckedIcon = () => {
 
 const Radio = (props: RadioProps) => {
   return (
-    <CustomRadio
-      disableRipple
-      icon={<DefaultIcon />}
-      checkedIcon={<CheckedIcon />}
-      {...props}
-    />
+    <CustomRadio disableRipple icon={<DefaultIcon />} checkedIcon={<CheckedIcon />} {...props} />
   );
 };
 

package/src/components/Radio/index.ts

@@ -1 +1 @@
-export { default } from "./Radio";
+export { default } from './Radio';

package/src/components/RadioGroup/index.ts

@@ -1,2 +1,2 @@
-import RadioGroup from "@mui/material/RadioGroup";
+import RadioGroup from '@mui/material/RadioGroup';
 export default RadioGroup;