@lunit/design-system 1.0.0-a.5 → 1.0.0-b.2

package/src/components/Checkbox/Checkbox.tsx

@@ -15,7 +15,7 @@ const CustomCheckbox = styled(MuiCheckbox)(({ theme }) => ({
     position: "absolute",
     width: 24,
     height: 24,
-    border: `1px solid ${theme.palette.token.core.focused}`,
+    border: `1px solid ${theme.palette.lunit_token.core.focused}`,
     borderRadius: "7px",
   },
 }));
@@ -27,7 +27,7 @@ const iconSize = {
 
 const DefaultIcon = styled("span")(({ theme }) => ({
   ...iconSize,
-  backgroundColor: theme.palette.token.component.selectcontrol_off,
+  backgroundColor: theme.palette.lunit_token.component.selectcontrol_off,
   maskImage:
     "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath" +
     " fill-rule='evenodd' clip-rule='evenodd' d='M14 1.5H4C2.61929 1.5 1.5 2.61929 1.5 4V14C1.5 15.3807 2.61929 16.5 4 16.5H14C15.3807 " +
@@ -36,7 +36,7 @@ const DefaultIcon = styled("span")(({ theme }) => ({
 
 const CheckedIcon = styled("span")(({ theme }) => ({
   ...iconSize,
-  backgroundColor: theme.palette.token.component.selectcontrol_on,
+  backgroundColor: theme.palette.lunit_token.component.selectcontrol_on,
   maskImage:
     "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath" +
     " fill-rule='evenodd' clip-rule='evenodd' d='M4 0C1.79086 0 0 1.79086 0 4V14C0 16.2091 1.79086 18 4 18H14C16.2091 18 18 16.2091 18 14V4C18 1.79086 16.2091 0 14 0H4ZM14.2516 " +
@@ -45,7 +45,7 @@ const CheckedIcon = styled("span")(({ theme }) => ({
 
 const IndeterminateIcon = styled("span")(({ theme }) => ({
   ...iconSize,
-  backgroundColor: theme.palette.token.component.selectcontrol_on,
+  backgroundColor: theme.palette.lunit_token.component.selectcontrol_on,
   maskImage:
     "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath" +
     " fill-rule='evenodd' clip-rule='evenodd' d='M4 0C1.79086 0 0 1.79086 0 4V14C0 16.2091 1.79086 18 4 18H14C16.2091 18 18 16.2091 18 14V4C18 1.79086 16.2091 0 " +

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

@@ -36,32 +36,32 @@ const getColorToken = (
   if (token === "text") {
     switch (color) {
       case CHIP_COLORS.PRIMARY:
-        return theme.palette.token.component.chip_primary_text;
+        return theme.palette.lunit_token.component.chip_primary_text;
       case CHIP_COLORS.SECONDARY:
-        return theme.palette.token.component.chip_secondary_text;
+        return theme.palette.lunit_token.component.chip_secondary_text;
       case CHIP_COLORS.ERROR:
-        return theme.palette.token.component.chip_error_text;
+        return theme.palette.lunit_token.component.chip_error_text;
       case CHIP_COLORS.WARNING:
-        return theme.palette.token.component.chip_warning_text;
+        return theme.palette.lunit_token.component.chip_warning_text;
       case CHIP_COLORS.SUCCESS:
-        return theme.palette.token.component.chip_success_text;
+        return theme.palette.lunit_token.component.chip_success_text;
       default:
-        return theme.palette.token.component.chip_primary_text;
+        return theme.palette.lunit_token.component.chip_primary_text;
     }
   } else {
     switch (color) {
       case CHIP_COLORS.PRIMARY:
-        return theme.palette.token.component.chip_primary_bg;
+        return theme.palette.lunit_token.component.chip_primary_bg;
       case CHIP_COLORS.SECONDARY:
-        return theme.palette.token.component.chip_secondary_bg;
+        return theme.palette.lunit_token.component.chip_secondary_bg;
       case CHIP_COLORS.ERROR:
-        return theme.palette.token.component.chip_error_bg;
+        return theme.palette.lunit_token.component.chip_error_bg;
       case CHIP_COLORS.WARNING:
-        return theme.palette.token.component.chip_warning_bg;
+        return theme.palette.lunit_token.component.chip_warning_bg;
       case CHIP_COLORS.SUCCESS:
-        return theme.palette.token.component.chip_success_bg;
+        return theme.palette.lunit_token.component.chip_success_bg;
       default:
-        return theme.palette.token.component.chip_primary_bg;
+        return theme.palette.lunit_token.component.chip_primary_bg;
     }
   }
 };
@@ -82,7 +82,7 @@ export const StyledContainedChipBase = styled(MuiChip, {
   ...COMMON_STYLES,
   ...theme.typography.caption,
 
-  color: theme.palette.token.core.text_normal,
+  color: theme.palette.lunit_token.core.text_normal,
   backgroundColor: getColorToken("bg", theme, color),
 
   "& .MuiSvgIcon-root": {
@@ -134,7 +134,7 @@ export const StyledContainedChipEnable = styled(StyledContainedChipBase, {
     left: 0,
     right: 0,
     bottom: 0,
-    backgroundColor: theme.palette.token.core.hover,
+    backgroundColor: theme.palette.lunit_token.core.hover,
     borderRadius: "11px",
   },
 }));
@@ -155,7 +155,7 @@ export const StyledContainedChipDeletable = styled(
     right: 0,
     bottom: 0,
     opacity: 0,
-    color: theme.palette.token.core.hover,
+    color: theme.palette.lunit_token.core.hover,
     ":hover": {
       cursor: "pointer",
       opacity: 1,

package/src/components/Chip/Chip.tsx

@@ -14,10 +14,11 @@ import type {
   EnableContainedChipProps,
   DeletableContainedChipProps,
   ChipProps,
+  ChipType,
   ChipThumbnail,
 } from "./Chip.types";
 
-const Chip = (props: ChipProps) => {
+const Chip: ChipType = (props: ChipProps) => {
   const { kind, onDelete, onClick, ...restProps } = props;
   if (kind === "outlined") return <OutlinedChip {...props} />;
   else if (onClick) return <EnableContainedChip {...props} />;
@@ -82,7 +83,14 @@ const ReadOnlyContainedChip = (props: ReadOnlyContainedChipProps) => {
 };
 
 const EnableContainedChip = (props: EnableContainedChipProps) => {
-  const { color = "primary", thumbnail, onClick, sx, ...restProps } = props;
+  const {
+    color = "primary",
+    thumbnail,
+    onDelete,
+    onClick,
+    sx,
+    ...restProps
+  } = props;
 
   return (
     <StyledContainedChipEnable

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

@@ -1,6 +1,10 @@
 import { CHIP_COLORS } from "./consts";
 
-import type { ChipProps as MuiChipProps } from "@mui/material";
+import type {
+  ChipProps as MuiChipProps,
+  ChipTypeMap as MuiChipTypeMap,
+} from "@mui/material";
+import type { OverridableComponent } from "@mui/material/OverridableComponent";
 
 type ColorKeys = keyof typeof CHIP_COLORS;
 export type ChipColor = (typeof CHIP_COLORS)[ColorKeys];
@@ -54,3 +58,13 @@ export type ContainedChipProps =
   | DeletableContainedChipProps;
 
 export type ChipProps = OutlinedChipProps | ContainedChipProps;
+
+export type ChipTypeMap<
+  P = {},
+  D extends React.ElementType = MuiChipTypeMap["defaultComponent"]
+> = {
+  props: P & ChipProps;
+  defaultComponent: D;
+};
+
+export type ChipType = OverridableComponent<ChipTypeMap>;

package/src/components/Radio/Radio.tsx

@@ -13,7 +13,7 @@ const CustomRadio = styled(MuiRadio)(({ theme }) => ({
     display: "block",
     width: 24,
     height: 24,
-    backgroundColor: theme.palette.token.core.focused,
+    backgroundColor: theme.palette.lunit_token.core.focused,
     maskImage:
       "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath" +
       " fill-rule='evenodd' clip-rule='evenodd' d='M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 " +
@@ -28,7 +28,7 @@ const iconSize = {
 
 const DefaultIcon = styled("span")(({ theme }) => ({
   ...iconSize,
-  backgroundColor: theme.palette.token.component.selectcontrol_off,
+  backgroundColor: theme.palette.lunit_token.component.selectcontrol_off,
   maskImage:
     "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath" +
     " fill-rule='evenodd' clip-rule='evenodd' d='M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 " +
@@ -37,7 +37,7 @@ const DefaultIcon = styled("span")(({ theme }) => ({
 
 const CheckedIcon = styled("span")(({ theme }) => ({
   ...iconSize,
-  backgroundColor: theme.palette.token.component.selectcontrol_on,
+  backgroundColor: theme.palette.lunit_token.component.selectcontrol_on,
   maskImage:
     "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath" +
     " fill-rule='evenodd' clip-rule='evenodd' d='M10 15C12.7614 15 15 12.7614 15 10C15 7.23858 12.7614 5 10 5C7.23858 5 5" +

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

@@ -70,36 +70,35 @@ const getTextFieldPaddingBySize = ({
       });
 };
 
-const commonStyle = ({ token }: { token: ColorToken }) => ({
-  "&.MuiTextField-root": {
-    width: "100%",
-  },
+const commonStyle = ({ lunit_token }: { lunit_token: ColorToken }) => ({
   "& .MuiOutlinedInput-root": {
     borderRadius: "8px",
-    width: "100%",
 
     "& fieldset": {
       border: "none",
     },
     "&.Mui-error fieldset": {
-      border: `1px solid ${token.component.textfield_border_error}`,
+      border: `1px solid ${lunit_token.component.textfield_border_error}`,
     },
     "&.Mui-focused fieldset": {
-      border: `1px solid ${token.core.focused}`,
+      border: `1px solid ${lunit_token.core.focused}`,
+    },
+    "&.Mui-error.Mui-focused fieldset": {
+      border: `2px solid ${lunit_token.component.textfield_border_error}`,
     },
     "&.Mui-disabled": {
       opacity: 0.38,
       "&:hover::before": {
-        backgroundColor: token.component.textfield_bg,
+        backgroundColor: lunit_token.component.textfield_bg,
       },
     },
     "& input, textarea": {
       padding: 0,
       textOverflow: "ellipsis",
       "&::placeholder": {
-        color: token.core.text_medium,
+        color: lunit_token.core.text_light,
         opacity: 1,
-        WebkitTextFillColor: token.core.text_medium,
+        WebkitTextFillColor: lunit_token.core.text_light,
       },
     },
     "& textarea": {
@@ -110,16 +109,15 @@ const commonStyle = ({ token }: { token: ColorToken }) => ({
       },
       "&::-webkit-scrollbar-thumb": {
         borderRadius: "6px",
-        backgroundColor: token.component.scrollbars_bg,
+        backgroundColor: lunit_token.component.scrollbars_bg,
       },
     },
-    background: token.component.textfield_bg,
-    overflow: "hidden",
-    color: token.core.text_normal,
+    background: lunit_token.component.textfield_bg,
+    color: lunit_token.core.text_normal,
     "&:hover": {
       position: "relative",
       zIndex: 0,
-      backgroundColor: token.component.textfield_bg,
+      backgroundColor: lunit_token.component.textfield_bg,
     },
     "&:hover::before": {
       content: '""',
@@ -129,11 +127,11 @@ const commonStyle = ({ token }: { token: ColorToken }) => ({
       width: "100%",
       height: "100%",
       zIndex: -1,
-      backgroundColor: token.core.hover,
+      backgroundColor: lunit_token.core.hover,
     },
     "&.Mui-focused": {
       "&:hover::before": {
-        backgroundColor: token.component.textfield_bg,
+        backgroundColor: lunit_token.component.textfield_bg,
       },
     },
   },
@@ -142,13 +140,13 @@ const commonStyle = ({ token }: { token: ColorToken }) => ({
       opacity: 0.38,
     },
     "&.Mui-error": {
-      color: token.core.text_error,
+      color: lunit_token.core.text_error,
     },
   },
 });
 
 const sizeStyle = ({
-  token,
+  lunit_token,
   textFieldSize,
   hasLeftIcon,
   hasRightIcon,
@@ -157,7 +155,7 @@ const sizeStyle = ({
 }: Pick<
   BaseTextFieldProps,
   "textFieldSize" | "hasLeftIcon" | "hasRightIcon" | "multiline"
-> & { token: ColorToken; typography: Typography }) => ({
+> & { lunit_token: ColorToken; typography: Typography }) => ({
   ...(textFieldSize === "small" && {
     "& .MuiInputBase-root": {
       padding: getTextFieldPaddingBySize({
@@ -179,17 +177,17 @@ const sizeStyle = ({
     },
     "& .MuiFormHelperText-root": {
       ...typography.body2_14_regular,
-      color: token.core.text_medium,
+      color: lunit_token.core.text_medium,
       margin: 0,
       marginTop: "4px",
       paddingLeft: "4px",
 
       "&.Mui-disabled": {
-        color: token.core.text_medium,
+        color: lunit_token.core.text_medium,
         opacity: 0.38,
       },
       "&.Mui-error": {
-        color: token.core.text_error,
+        color: lunit_token.core.text_error,
       },
     },
   }),
@@ -214,17 +212,17 @@ const sizeStyle = ({
     },
     "& .MuiFormHelperText-root": {
       ...typography.body2_14_regular,
-      color: token.core.text_medium,
+      color: lunit_token.core.text_medium,
       margin: 0,
       marginTop: "4px",
       paddingLeft: "4px",
 
       "&.Mui-disabled": {
-        color: token.core.text_medium,
+        color: lunit_token.core.text_medium,
         opacity: 0.38,
       },
       "&.Mui-error": {
-        color: token.core.text_error,
+        color: lunit_token.core.text_error,
       },
     },
   }),
@@ -249,17 +247,17 @@ const sizeStyle = ({
     },
     "& .MuiFormHelperText-root": {
       ...typography.body1_16_regular,
-      color: token.core.text_medium,
+      color: lunit_token.core.text_medium,
       margin: 0,
       marginTop: "4px",
       paddingLeft: "4px",
 
       "&.Mui-disabled": {
-        color: token.core.text_medium,
+        color: lunit_token.core.text_medium,
         opacity: 0.38,
       },
       "&.Mui-error": {
-        color: token.core.text_error,
+        color: lunit_token.core.text_error,
       },
     },
   }),
@@ -282,16 +280,16 @@ const BaseTextField = styled(MuiTextField, {
   ({
     theme: {
       typography,
-      palette: { token },
+      palette: { lunit_token },
     },
     multiline,
     textFieldSize,
     hasLeftIcon,
     hasRightIcon,
   }) => ({
-    ...commonStyle({ token }),
+    ...commonStyle({ lunit_token }),
     ...sizeStyle({
-      token,
+      lunit_token,
       textFieldSize,
       hasLeftIcon,
       hasRightIcon,
@@ -312,7 +310,7 @@ const IconWrapper = styled("div")(({ theme }) => ({
   "& svg": {
     width: "20px",
     height: "20px",
-    color: theme.palette.token.core.text_normal,
+    color: theme.palette.lunit_token.core.text_normal,
   },
 }));
 

package/src/components/TextField/TextField.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 import TextFieldIcon from "./TextFieldIcon";
 import { BaseTextField } from "./TextField.style";
@@ -9,53 +9,60 @@ import type {
   SingleTextFieldProps,
 } from "./TextField.types";
 
-const SingleTextField = (props: SingleTextFieldProps) => {
-  const {
-    size = "small",
-    leftIcon,
-    rightIcon,
-    leftIconSx,
-    rightIconSx,
-    onLeftIconClick,
-    onRightIconClick,
-    ...restProps
-  } = props;
+const SingleTextField = forwardRef<HTMLDivElement, SingleTextFieldProps>(
+  (props, ref) => {
+    const {
+      size = "small",
+      leftIcon,
+      rightIcon,
+      leftIconSx,
+      rightIconSx,
+      onLeftIconClick,
+      onRightIconClick,
+      InputProps,
+      ...restProps
+    } = props;
 
-  return (
-    <BaseTextField
-      {...restProps}
-      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}
-          />
-        ),
-      }}
-    />
-  );
-};
+    return (
+      <BaseTextField
+        {...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 = ({
-  size = "small",
-  onChange,
-  ...restProps
-}: MultiTextFieldProps) => {
-  return <BaseTextField {...restProps} textFieldSize={size} multiline />;
-};
+const MultiTextField = forwardRef<HTMLDivElement, MultiTextFieldProps>(
+  ({ size = "small", onChange, ...restProps }, ref) => {
+    return (
+      <BaseTextField {...restProps} ref={ref} textFieldSize={size} multiline />
+    );
+  }
+);
 
-const TextField = (props: TextFieldProps) => {
+const TextField = forwardRef<HTMLDivElement, TextFieldProps>((props, ref) => {
   const {
     rows,
     size,
@@ -67,14 +74,15 @@ const TextField = (props: TextFieldProps) => {
   return multiline ? (
     <MultiTextField
       {...restProps}
+      ref={ref}
       maxRows={Infinity}
       size={size}
       variant={variant}
       rows={rows}
     />
   ) : (
-    <SingleTextField {...restProps} size={size} variant={variant} />
+    <SingleTextField {...restProps} ref={ref} size={size} variant={variant} />
   );
-};
+});
 
 export default TextField;

package/src/components/Toast/Toast.styled.ts

@@ -10,8 +10,8 @@ export const StyledToast = styled(Alert)(({ theme, severity }) => {
     "&.MuiAlert-root": {
       padding: "8px 16px 8px 16px",
       margin: 0,
-      color: theme.palette.token.core.text_normal,
-      backgroundColor: theme.palette.token.core.bg_03,
+      color: theme.palette.lunit_token.core.text_normal,
+      backgroundColor: theme.palette.lunit_token.core.bg_03,
       borderRadius: "8px",
     },
     "& .MuiAlert-icon": {
@@ -42,7 +42,7 @@ export const StyledToast = styled(Alert)(({ theme, severity }) => {
       marginRight: "0px",
       padding: 0,
       "& .MuiSvgIcon-root": {
-        color: theme.palette.token.core.text_normal,
+        color: theme.palette.lunit_token.core.text_normal,
       },
     },
   };

package/src/components/Toast/Toast.utils.ts

@@ -6,12 +6,12 @@ export const getIconColor = (
 ) => {
   switch (severity) {
     case "info":
-      return theme.palette.token.core.icon_info_02;
+      return theme.palette.lunit_token.core.icon_info_02;
     case "warning":
-      return theme.palette.token.core.icon_warning_02;
+      return theme.palette.lunit_token.core.icon_warning_02;
     case "error":
-      return theme.palette.token.core.icon_error_02;
+      return theme.palette.lunit_token.core.icon_error_02;
     default:
-      return theme.palette.token.core.icon_success_02;
+      return theme.palette.lunit_token.core.icon_success_02;
   }
 };