@lunit/design-system 2.2.0 → 2.2.3

package/src/components/TextField/TextField.style.ts

@@ -1,11 +1,11 @@
-import MuiTextField from "@mui/material/TextField";
-import { styled } from "@mui/material/styles";
+import MuiTextField from '@mui/material/TextField';
+import { styled } from '@mui/material/styles';
 
-import type { ColorToken } from "@/foundation/colors/types";
-import type { Typography } from "@mui/material/styles/createTypography";
-import type { TextFieldProps, TextFieldSize } from "./TextField.types";
+import type { ColorToken } from '@/foundation/colors/types';
+import type { TypographyVariants } from '@mui/material/styles';
+import type { TextFieldProps, TextFieldSize } from './TextField.types';
 
-type BaseTextFieldProps = Omit<TextFieldProps, "size"> & {
+type BaseTextFieldProps = Omit<TextFieldProps, 'size'> & {
   textFieldSize: TextFieldSize;
   hasLeftIcon?: boolean;
   hasRightIcon?: boolean;
@@ -22,36 +22,27 @@ const getSinglelineTextFieldPaddingByIconAndSize = ({
   size,
   hasLeftIcon,
   hasRightIcon,
-}: Pick<
-  GetTextFieldPaddingBySizeParams,
-  "size" | "hasLeftIcon" | "hasRightIcon"
->) => {
+}: Pick<GetTextFieldPaddingBySizeParams, 'size' | 'hasLeftIcon' | 'hasRightIcon'>) => {
   switch (size) {
-    case "small":
-      return `4px ${hasRightIcon ? "8px" : "12px"} 4px ${
-        hasLeftIcon ? "8px" : "12px"
-      }`;
-    case "medium":
-      return `8px ${hasRightIcon ? "12px" : "16px"} 8px ${
-        hasLeftIcon ? "12px" : "16px"
-      }`;
-    case "large":
-      return `10px ${hasRightIcon ? "12px" : "16px"} 10px ${
-        hasLeftIcon ? "12px" : "16px"
-      }`;
+    case 'small':
+      return `4px ${hasRightIcon ? '8px' : '12px'} 4px ${hasLeftIcon ? '8px' : '12px'}`;
+    case 'medium':
+      return `8px ${hasRightIcon ? '12px' : '16px'} 8px ${hasLeftIcon ? '12px' : '16px'}`;
+    case 'large':
+      return `10px ${hasRightIcon ? '12px' : '16px'} 10px ${hasLeftIcon ? '12px' : '16px'}`;
   }
 };
 
 const getMultilineTextFieldPaddingByIconAndSize = ({
   size,
-}: Pick<GetTextFieldPaddingBySizeParams, "size">) => {
+}: Pick<GetTextFieldPaddingBySizeParams, 'size'>) => {
   switch (size) {
-    case "small":
-      return "4px 4px 4px 12px";
-    case "medium":
-      return "8px 4px 8px 16px";
-    case "large":
-      return "10px 4px 10px 16px";
+    case 'small':
+      return '4px 4px 4px 12px';
+    case 'medium':
+      return '8px 4px 8px 16px';
+    case 'large':
+      return '10px 4px 10px 16px';
   }
 };
 
@@ -71,85 +62,85 @@ const getTextFieldPaddingBySize = ({
 };
 
 const commonStyle = ({ lunit_token }: { lunit_token: ColorToken }) => ({
-  "& .MuiOutlinedInput-root": {
-    borderRadius: "8px",
+  '& .MuiOutlinedInput-root': {
+    borderRadius: '8px',
 
-    "& fieldset": {
-      border: "none",
+    '& fieldset': {
+      border: 'none',
     },
-    "&.Mui-error fieldset": {
+    '&.Mui-error fieldset': {
       border: `1px solid ${lunit_token.component.textfield_border_error}`,
     },
-    "&.Mui-focused fieldset": {
-      border: `1px solid ${lunit_token.core.focused}`,
+    '&.Mui-focused fieldset': {
+      border: `1px solid ${lunit_token.core.status_focused}`,
     },
-    "&.Mui-error.Mui-focused fieldset": {
+    '&.Mui-error.Mui-focused fieldset': {
       border: `2px solid ${lunit_token.component.textfield_border_error}`,
     },
-    "&.Mui-disabled": {
+    '&.Mui-disabled': {
       opacity: 0.38,
-      "&:hover::before": {
+      '&:hover::before': {
         backgroundColor: lunit_token.component.textfield_bg,
       },
     },
-    "& input, textarea": {
+    '& input, textarea': {
       padding: 0,
-      textOverflow: "ellipsis",
-      "&::placeholder": {
+      textOverflow: 'ellipsis',
+      '&::placeholder': {
         color: lunit_token.core.text_light,
         opacity: 1,
         WebkitTextFillColor: lunit_token.core.text_light,
       },
     },
-    "& textarea": {
-      height: "100% !important",
-      overflowY: "scroll !important",
-      "&::-webkit-scrollbar": {
-        width: "6px",
+    '& textarea': {
+      height: '100% !important',
+      overflowY: 'scroll !important',
+      '&::-webkit-scrollbar': {
+        width: '6px',
       },
-      "&::-webkit-scrollbar-thumb": {
-        borderRadius: "6px",
+      '&::-webkit-scrollbar-thumb': {
+        borderRadius: '6px',
         backgroundColor: lunit_token.component.scrollbars_bg,
       },
     },
     background: lunit_token.component.textfield_bg,
     color: lunit_token.core.text_normal,
-    "&:hover": {
-      position: "relative",
+    '&:hover': {
+      position: 'relative',
       zIndex: 0,
       backgroundColor: lunit_token.component.textfield_bg,
     },
-    "&:hover::before": {
+    '&:hover::before': {
       content: '""',
-      position: "absolute",
+      position: 'absolute',
       top: 0,
       left: 0,
-      width: "100%",
-      height: "100%",
+      width: '100%',
+      height: '100%',
       zIndex: -1,
-      backgroundColor: lunit_token.core.hover,
-      borderRadius: "8px",
+      backgroundColor: lunit_token.core.status_hover,
+      borderRadius: '8px',
     },
-    "&.Mui-focused": {
-      "&:hover::before": {
+    '&.Mui-focused': {
+      '&:hover::before': {
         backgroundColor: lunit_token.component.textfield_bg,
       },
     },
   },
-  "& .MuiFormHelperText-root": {
-    "&.Mui-disabled": {
+  '& .MuiFormHelperText-root': {
+    '&.Mui-disabled': {
       opacity: 0.38,
     },
-    "&.Mui-error": {
+    '&.Mui-error': {
       color: lunit_token.core.text_error,
     },
   },
-  "& .MuiInputBase-input": {
-    "&:-webkit-autofill, &:-webkit-autofill:active, &:-webkit-autofill:focus, &:-webkit-autofill:hover, &:-webkit-autofill:focus-visible, &:-webkit-autofill:focus-within, &:-webkit-autofill:target, &:-webkit-autofill:first-line":
+  '& .MuiInputBase-input': {
+    '&:-webkit-autofill, &:-webkit-autofill:active, &:-webkit-autofill:focus, &:-webkit-autofill:hover, &:-webkit-autofill:focus-visible, &:-webkit-autofill:focus-within, &:-webkit-autofill:target, &:-webkit-autofill:first-line':
       {
-        border: "none",
-        borderRadius: "0px",
-        backgroundColor: "transparent",
+        border: 'none',
+        borderRadius: '0px',
+        backgroundColor: 'transparent',
         color: lunit_token.core.text_normal,
         /**
          * the background color and text color are not changed color, background css tag.
@@ -159,8 +150,8 @@ const commonStyle = ({ lunit_token }: { lunit_token: ColorToken }) => ({
          * reference: https://css-tricks.com/almanac/pseudo-selectors/a/autofill/
          */
         WebkitTextFillColor: lunit_token.core.text_normal,
-        WebkitBoxShadow: "0 0 0px 1000px transparent inset",
-        WebkitTransition: "background-color 5000s ease-in-out 0s",
+        WebkitBoxShadow: '0 0 0px 1000px transparent inset',
+        WebkitTransition: 'background-color 5000s ease-in-out 0s',
         /**
          * textfield flash cursor color
          *
@@ -178,111 +169,111 @@ const sizeStyle = ({
   hasRightIcon,
   typography,
   multiline,
-}: Pick<
-  BaseTextFieldProps,
-  "textFieldSize" | "hasLeftIcon" | "hasRightIcon" | "multiline"
-> & { lunit_token: ColorToken; typography: Typography }) => ({
-  ...(textFieldSize === "small" && {
-    "& .MuiInputBase-root": {
+}: Pick<BaseTextFieldProps, 'textFieldSize' | 'hasLeftIcon' | 'hasRightIcon' | 'multiline'> & {
+  lunit_token: ColorToken;
+  typography: TypographyVariants;
+}) => ({
+  ...(textFieldSize === 'small' && {
+    '& .MuiInputBase-root': {
       padding: getTextFieldPaddingBySize({
         size: textFieldSize,
         hasLeftIcon,
         hasRightIcon,
         multiline,
       }),
-      "& input, textarea": {
+      '& input, textarea': {
         ...typography.body2_14_regular,
       },
-      "& input": {
-        height: "20px",
+      '& input': {
+        height: '20px',
       },
-      "& textarea": {
-        minHeight: "92px",
-        paddingRight: "2px",
+      '& textarea': {
+        minHeight: '92px',
+        paddingRight: '2px',
       },
     },
-    "& .MuiFormHelperText-root": {
+    '& .MuiFormHelperText-root': {
       ...typography.body2_14_regular,
       color: lunit_token.core.text_medium,
       margin: 0,
-      marginTop: "4px",
-      paddingLeft: "4px",
+      marginTop: '4px',
+      paddingLeft: '4px',
 
-      "&.Mui-disabled": {
+      '&.Mui-disabled': {
         color: lunit_token.core.text_medium,
         opacity: 0.38,
       },
-      "&.Mui-error": {
+      '&.Mui-error': {
         color: lunit_token.core.text_error,
       },
     },
   }),
-  ...(textFieldSize === "medium" && {
-    "& .MuiInputBase-root": {
+  ...(textFieldSize === 'medium' && {
+    '& .MuiInputBase-root': {
       padding: getTextFieldPaddingBySize({
         size: textFieldSize,
         hasLeftIcon,
         hasRightIcon,
         multiline,
       }),
-      "& input, textarea": {
+      '& input, textarea': {
         ...typography.body2_14_regular,
       },
-      "& input": {
-        height: "20px",
+      '& input': {
+        height: '20px',
       },
-      "& textarea": {
-        minHeight: "84px",
-        paddingRight: "6px",
+      '& textarea': {
+        minHeight: '84px',
+        paddingRight: '6px',
       },
     },
-    "& .MuiFormHelperText-root": {
+    '& .MuiFormHelperText-root': {
       ...typography.body2_14_regular,
       color: lunit_token.core.text_medium,
       margin: 0,
-      marginTop: "4px",
-      paddingLeft: "4px",
+      marginTop: '4px',
+      paddingLeft: '4px',
 
-      "&.Mui-disabled": {
+      '&.Mui-disabled': {
         color: lunit_token.core.text_medium,
         opacity: 0.38,
       },
-      "&.Mui-error": {
+      '&.Mui-error': {
         color: lunit_token.core.text_error,
       },
     },
   }),
-  ...(textFieldSize === "large" && {
-    "& .MuiInputBase-root": {
+  ...(textFieldSize === 'large' && {
+    '& .MuiInputBase-root': {
       padding: getTextFieldPaddingBySize({
         size: textFieldSize,
         hasLeftIcon,
         hasRightIcon,
         multiline,
       }),
-      "& input, textarea": {
+      '& input, textarea': {
         ...typography.body1_16_regular,
       },
-      "& input": {
-        height: "24px",
+      '& input': {
+        height: '24px',
       },
-      "& textarea": {
-        minHeight: "80px",
-        paddingRight: "6px",
+      '& textarea': {
+        minHeight: '80px',
+        paddingRight: '6px',
       },
     },
-    "& .MuiFormHelperText-root": {
+    '& .MuiFormHelperText-root': {
       ...typography.body1_16_regular,
       color: lunit_token.core.text_medium,
       margin: 0,
-      marginTop: "4px",
-      paddingLeft: "4px",
+      marginTop: '4px',
+      paddingLeft: '4px',
 
-      "&.Mui-disabled": {
+      '&.Mui-disabled': {
         color: lunit_token.core.text_medium,
         opacity: 0.38,
       },
-      "&.Mui-error": {
+      '&.Mui-error': {
         color: lunit_token.core.text_error,
       },
     },
@@ -292,15 +283,15 @@ const sizeStyle = ({
 const BaseTextField = styled(MuiTextField, {
   shouldForwardProp: (prop: string) =>
     ![
-      "leftIconSx",
-      "rightIconSx",
-      "leftIcon",
-      "rightIcon",
-      "textFieldSize",
-      "hasLeftIcon",
-      "hasRightIcon",
-      "onLeftIconClick",
-      "onRightIconClick",
+      'leftIconSx',
+      'rightIconSx',
+      'leftIcon',
+      'rightIcon',
+      'textFieldSize',
+      'hasLeftIcon',
+      'hasRightIcon',
+      'onLeftIconClick',
+      'onRightIconClick',
     ].includes(prop),
 })<BaseTextFieldProps>(
   ({
@@ -322,20 +313,20 @@ const BaseTextField = styled(MuiTextField, {
       typography,
       multiline,
     }),
-  })
+  }),
 );
 
-const IconWrapper = styled("div")(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  minWidth: "28px",
-  minHeight: "28px",
-  margin: "-4px 0",
+const IconWrapper = styled('div')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minWidth: '28px',
+  minHeight: '28px',
+  margin: '-4px 0',
 
-  "& svg": {
-    width: "20px",
-    height: "20px",
+  '& svg': {
+    width: '20px',
+    height: '20px',
     color: theme.palette.lunit_token.core.text_normal,
   },
 }));

package/src/components/TextField/TextField.tsx

@@ -1,76 +1,64 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef } from 'react';
 
-import TextFieldIcon from "./TextFieldIcon";
-import { BaseTextField } from "./TextField.style";
+import TextFieldIcon from './TextFieldIcon';
+import { BaseTextField } from './TextField.style';
 
-import type {
-  TextFieldProps,
-  MultiTextFieldProps,
-  SingleTextFieldProps,
-} from "./TextField.types";
+import type { TextFieldProps, MultiTextFieldProps, SingleTextFieldProps } from './TextField.types';
 
-const SingleTextField = forwardRef<HTMLDivElement, SingleTextFieldProps>(
-  (props, ref) => {
-    const {
-      size = "small",
-      leftIcon,
-      rightIcon,
-      leftIconSx,
-      rightIconSx,
-      onLeftIconClick,
-      onRightIconClick,
-      InputProps,
-      ...restProps
-    } = props;
+const SingleTextField = forwardRef<HTMLDivElement, SingleTextFieldProps>((props, ref) => {
+  const {
+    size = 'small',
+    leftIcon,
+    rightIcon,
+    leftIconSx,
+    rightIconSx,
+    onLeftIconClick,
+    onRightIconClick,
+    InputProps,
+    ...restProps
+  } = props;
 
-    return (
-      <BaseTextField
-        variant="outlined"
-        {...restProps}
-        ref={ref}
-        textFieldSize={size}
-        hasLeftIcon={Boolean(leftIcon)}
-        hasRightIcon={Boolean(rightIcon)}
-        InputProps={{
-          ...{
-            startAdornment: leftIcon && (
-              <TextFieldIcon
-                sx={{ marginRight: "4px", ...leftIconSx }}
-                icon={leftIcon}
-                onIconClick={onLeftIconClick}
-              />
-            ),
-            endAdornment: rightIcon && (
-              <TextFieldIcon
-                sx={{ marginLeft: "4px", ...rightIconSx }}
-                icon={rightIcon}
-                onIconClick={onRightIconClick}
-              />
-            ),
-          },
-          ...InputProps,
-        }}
-      />
-    );
-  }
-);
+  return (
+    <BaseTextField
+      variant="outlined"
+      {...restProps}
+      ref={ref}
+      textFieldSize={size}
+      hasLeftIcon={Boolean(leftIcon)}
+      hasRightIcon={Boolean(rightIcon)}
+      InputProps={{
+        ...{
+          startAdornment: leftIcon && (
+            <TextFieldIcon
+              sx={{ marginRight: '4px', ...leftIconSx }}
+              icon={leftIcon}
+              onIconClick={onLeftIconClick}
+            />
+          ),
+          endAdornment: rightIcon && (
+            <TextFieldIcon
+              sx={{ marginLeft: '4px', ...rightIconSx }}
+              icon={rightIcon}
+              onIconClick={onRightIconClick}
+            />
+          ),
+        },
+        ...InputProps,
+      }}
+    />
+  );
+});
 
 const MultiTextField = forwardRef<HTMLDivElement, MultiTextFieldProps>(
-  ({ size = "small", ...restProps }, ref) => {
+  ({ size = 'small', ...restProps }, ref) => {
     return (
-      <BaseTextField
-        variant="outlined"
-        {...restProps}
-        ref={ref}
-        textFieldSize={size}
-        multiline
-      />
+      <BaseTextField variant="outlined" {...restProps} ref={ref} textFieldSize={size} multiline />
     );
-  }
+  },
 );
 
 const TextField = forwardRef<HTMLDivElement, TextFieldProps>((props, ref) => {
-  const { rows, size, multiline = false, variant, ...restProps } = props;
+  const { rows, size, multiline = false, ...restProps } = props;
 
   return multiline ? (
     <MultiTextField {...restProps} ref={ref} size={size} rows={rows} />

package/src/components/TextField/TextField.types.ts

@@ -1,17 +1,14 @@
-import type { SxProps } from "@mui/material";
+import type { SxProps } from '@mui/material';
 import type {
   TextFieldProps as MuiTextFieldProps,
   OutlinedTextFieldProps,
-} from "@mui/material/TextField";
+} from '@mui/material/TextField';
 
-import type { JSX } from "react";
+import type { JSX } from 'react';
 
-export type TextFieldSize = "small" | "medium" | "large";
+export type TextFieldSize = 'small' | 'medium' | 'large';
 export interface BaseTextFieldProps
-  extends Omit<
-    OutlinedTextFieldProps,
-    "size" | "value" | "helperText" | "variant"
-  > {
+  extends Omit<OutlinedTextFieldProps, 'size' | 'value' | 'helperText' | 'variant'> {
   /**
    * The design system TextField has only on kind, which is "contained"
     Below are all return same kind "contained"
@@ -20,7 +17,7 @@ export interface BaseTextFieldProps
     <TextField variant="filled" />
     <TextField variant="standard" />
    */
-  variant?: MuiTextFieldProps["variant"];
+  variant?: MuiTextFieldProps['variant'];
   value?: string;
   helperText?: string;
   /**

package/src/components/TextField/TextFieldIcon.tsx

@@ -1,8 +1,8 @@
-import React, { type JSX } from "react";
+import React, { type JSX } from 'react';
 
-import { IconWrapper } from "./TextField.style";
+import { IconWrapper } from './TextField.style';
 
-import type { SxProps } from "@mui/material";
+import type { SxProps } from '@mui/material';
 
 interface TextFieldProps {
   sx?: SxProps;
@@ -12,10 +12,7 @@ interface TextFieldProps {
 
 const TextFieldIcon = ({ sx, icon, onIconClick }: TextFieldProps) => {
   return (
-    <IconWrapper
-      sx={{ cursor: onIconClick ? "pointer" : "auto", ...sx }}
-      onClick={onIconClick}
-    >
+    <IconWrapper sx={{ cursor: onIconClick ? 'pointer' : 'auto', ...sx }} onClick={onIconClick}>
       {icon}
     </IconWrapper>
   );

package/src/components/TextField/index.ts

@@ -1,7 +1,7 @@
-export { default } from "./TextField";
+export { default } from './TextField';
 export type {
   TextFieldProps,
   BaseTextFieldProps,
   MultiTextFieldProps,
   SingleTextFieldProps,
-} from "./TextField.types";
+} from './TextField.types';