@lunit/design-system 1.0.0-b.1 → 1.0.0-b.2

package/src/components/Button/Button.types.ts

@@ -1,5 +1,13 @@
-import type { ButtonProps as MuiButtonProps } from "@mui/material";
+import type {
+  ButtonProps as MuiButtonProps,
+  ButtonTypeMap as MuiButtonTypeMap,
+} from "@mui/material";
+import type { OverridableComponent } from "@mui/material/OverridableComponent";
 
+/**
+ * TODO: Omit 을 사용할 경우 component prop 타입 추론이 안되는 이슈 발생
+ * https://github.com/lunit-io/design-system/pull/133#discussion_r1354277785
+ * */
 interface BaseButtonProps extends Omit<MuiButtonProps, "variant"> {
   icon?: React.ReactNode;
 }
@@ -23,3 +31,13 @@ export type ButtonProps =
   | ContainedButtonProps
   | GhostButtonProps
   | OutlinedButtonProps;
+
+export type ButtonTypeMap<
+  P = {},
+  D extends React.ElementType = MuiButtonTypeMap["defaultComponent"]
+> = {
+  props: P & ButtonProps;
+  defaultComponent: D;
+};
+
+export type ButtonType = OverridableComponent<ButtonTypeMap>;

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/TextField/TextField.style.ts

@@ -71,12 +71,8 @@ const getTextFieldPaddingBySize = ({
 };
 
 const commonStyle = ({ lunit_token }: { lunit_token: ColorToken }) => ({
-  "&.MuiTextField-root": {
-    width: "100%",
-  },
   "& .MuiOutlinedInput-root": {
     borderRadius: "8px",
-    width: "100%",
 
     "& fieldset": {
       border: "none",
@@ -87,6 +83,9 @@ const commonStyle = ({ lunit_token }: { lunit_token: ColorToken }) => ({
     "&.Mui-focused fieldset": {
       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": {
@@ -97,9 +96,9 @@ const commonStyle = ({ lunit_token }: { lunit_token: ColorToken }) => ({
       padding: 0,
       textOverflow: "ellipsis",
       "&::placeholder": {
-        color: lunit_token.core.text_medium,
+        color: lunit_token.core.text_light,
         opacity: 1,
-        WebkitTextFillColor: lunit_token.core.text_medium,
+        WebkitTextFillColor: lunit_token.core.text_light,
       },
     },
     "& textarea": {
@@ -114,7 +113,6 @@ const commonStyle = ({ lunit_token }: { lunit_token: ColorToken }) => ({
       },
     },
     background: lunit_token.component.textfield_bg,
-    overflow: "hidden",
     color: lunit_token.core.text_normal,
     "&:hover": {
       position: "relative",

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/Typography/Typography.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import MuiTypography from "@mui/material/Typography";
+
+import type { TypographyProps } from "@mui/material/Typography";
+import type { TypographyPropsVariantOverridesType } from "../../foundation/Typography";
+
+declare module "@mui/material/Typography" {
+  interface TypographyPropsVariantOverrides
+    extends TypographyPropsVariantOverridesType {}
+}
+
+const Typography = <C extends React.ElementType>(
+  props: TypographyProps<C, { component?: C }>
+) => {
+  return <MuiTypography {...props} />;
+};
+
+export default Typography;

package/src/components/Typography/index.ts

@@ -1,9 +1 @@
-import Typography from "@mui/material/Typography";
-import type { TypographyPropsVariantOverridesType } from "../../foundation/Typography";
-
-declare module "@mui/material/Typography" {
-  interface TypographyPropsVariantOverrides
-    extends TypographyPropsVariantOverridesType {}
-}
-
-export default Typography;
+export { default } from "./Typography";

package/src/foundation/colors/index.ts

@@ -19,6 +19,7 @@ declare module "@mui/material/styles/createPalette" {
       lunit_teal: BaseColor;
       magenta: BaseColor;
       orange: BaseColor;
+      purple: BaseColor;
       red: BaseColor;
       yellow: BaseColor;
     };
@@ -34,6 +35,7 @@ declare module "@mui/material/styles/createPalette" {
       lunit_teal: BaseColor;
       magenta: BaseColor;
       orange: BaseColor;
+      purple: BaseColor;
       red: BaseColor;
       yellow: BaseColor;
     };

package/src/stories/components/Button/BasicButton.stories.tsx

@@ -12,10 +12,8 @@ import Bell from "@lunit/design-system-icons/Bell";
 import Button from "@/components/Button";
 
 import type { StoryObj, StoryFn, Meta } from "@storybook/react";
-import type { ButtonProps } from "@/components/Button/Button.types";
 
-type Size = Pick<ButtonProps, "size">;
-type SizeValues = Size[keyof Size];
+type SizeValues = "small" | "medium" | "large";
 const sizeList: SizeValues[] = ["small", "medium", "large"];
 
 export default {

package/src/stories/components/TextField/TextFieldMulti.stories.tsx

@@ -107,6 +107,9 @@ const MultiTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
           Focused
         </TableCell>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Error Focused
+        </TableCell>
         <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
           Disabled
         </TableCell>
@@ -123,6 +126,9 @@ const MultiTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell>
           <TextField {...args} multiline focused />
         </TableCell>
+        <TableCell>
+          <TextField {...args} multiline error focused />
+        </TableCell>
         <TableCell>
           <TextField {...args} multiline disabled />
         </TableCell>

package/src/stories/components/TextField/TextFieldSingle.stories.tsx

@@ -99,6 +99,9 @@ const SingleTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
           Focused
         </TableCell>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Error Focused
+        </TableCell>
         <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
           Disabled
         </TableCell>
@@ -115,6 +118,9 @@ const SingleTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell>
           <TextField {...args} focused />
         </TableCell>
+        <TableCell>
+          <TextField {...args} error focused />
+        </TableCell>
         <TableCell>
           <TextField {...args} disabled />
         </TableCell>
@@ -137,6 +143,9 @@ const SingleWithIconTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
           focused
         </TableCell>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Error focused
+        </TableCell>
         <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
           Disabled
         </TableCell>
@@ -156,6 +165,9 @@ const SingleWithIconTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell>
           <TextField {...args} focused leftIcon={<Bell />} />
         </TableCell>
+        <TableCell>
+          <TextField {...args} error focused leftIcon={<Bell />} />
+        </TableCell>
         <TableCell>
           <TextField {...args} disabled leftIcon={<Bell />} />
         </TableCell>
@@ -173,6 +185,9 @@ const SingleWithIconTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell>
           <TextField {...args} focused rightIcon={<Bell />} />
         </TableCell>
+        <TableCell>
+          <TextField {...args} error focused rightIcon={<Bell />} />
+        </TableCell>
         <TableCell>
           <TextField {...args} disabled rightIcon={<Bell />} />
         </TableCell>
@@ -195,6 +210,15 @@ const SingleWithIconTemplate: StoryFn<typeof TextField> = (args) => (
             rightIcon={<Bell />}
           />
         </TableCell>
+        <TableCell>
+          <TextField
+            {...args}
+            error
+            focused
+            leftIcon={<Bell />}
+            rightIcon={<Bell />}
+          />
+        </TableCell>
         <TableCell>
           <TextField
             {...args}