@lunit/design-system 1.0.0-a.2 → 1.0.0-a.4

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

@@ -0,0 +1,316 @@
+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";
+
+type BaseTextFieldProps = Omit<TextFieldProps, "size"> & {
+  textFieldSize: TextFieldSize;
+  hasLeftIcon?: boolean;
+  hasRightIcon?: boolean;
+};
+
+interface GetTextFieldPaddingBySizeParams {
+  multiline?: boolean;
+  size: TextFieldSize;
+  hasLeftIcon?: boolean;
+  hasRightIcon?: boolean;
+}
+
+const getSinglelineTextFieldPaddingByIconAndSize = ({
+  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"
+      }}`;
+  }
+};
+
+const getMultilineTextFieldPaddingByIconAndSize = ({
+  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";
+  }
+};
+
+const getTextFieldPaddingBySize = ({
+  size,
+  multiline,
+  hasLeftIcon,
+  hasRightIcon,
+}: GetTextFieldPaddingBySizeParams) => {
+  return multiline
+    ? getMultilineTextFieldPaddingByIconAndSize({ size })
+    : getSinglelineTextFieldPaddingByIconAndSize({
+        size,
+        hasLeftIcon,
+        hasRightIcon,
+      });
+};
+
+const commonStyle = ({ token }: { token: ColorToken }) => ({
+  "& .MuiOutlinedInput-root": {
+    borderRadius: "8px",
+    width: "100%",
+
+    "& fieldset": {
+      border: "none",
+    },
+    "&.Mui-error fieldset": {
+      border: `1px solid ${token.component.textfield_border_error}`,
+    },
+    "&.Mui-focused fieldset": {
+      border: `1px solid ${token.core.focused}`,
+    },
+    "&.Mui-disabled": {
+      opacity: 0.38,
+      "&:hover::before": {
+        backgroundColor: token.component.textfield_bg,
+      },
+    },
+    "& input, textarea": {
+      padding: 0,
+      textOverflow: "ellipsis",
+      "&::placeholder": {
+        color: token.core.text_medium,
+        opacity: 1,
+        WebkitTextFillColor: token.core.text_medium,
+      },
+    },
+    "& textarea": {
+      height: "100% !important",
+      overflowY: "scroll !important",
+      "&::-webkit-scrollbar": {
+        width: "6px",
+      },
+      "&::-webkit-scrollbar-thumb": {
+        borderRadius: "6px",
+        backgroundColor: token.component.scrollbars_bg,
+      },
+    },
+    background: token.component.textfield_bg,
+    overflow: "hidden",
+    color: token.core.text_normal,
+    "&:hover": {
+      position: "relative",
+      zIndex: 0,
+      backgroundColor: token.component.textfield_bg,
+    },
+    "&:hover::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      zIndex: -1,
+      backgroundColor: token.core.hover,
+    },
+    "&.Mui-focused": {
+      "&:hover::before": {
+        backgroundColor: token.component.textfield_bg,
+      },
+    },
+  },
+  "& .MuiFormHelperText-root": {
+    "&.Mui-disabled": {
+      opacity: 0.38,
+    },
+    "&.Mui-error": {
+      color: token.core.text_error,
+    },
+  },
+});
+
+const sizeStyle = ({
+  token,
+  textFieldSize,
+  hasLeftIcon,
+  hasRightIcon,
+  typography,
+  multiline,
+}: Pick<
+  BaseTextFieldProps,
+  "textFieldSize" | "hasLeftIcon" | "hasRightIcon" | "multiline"
+> & { token: ColorToken; typography: Typography }) => ({
+  ...(textFieldSize === "small" && {
+    "& .MuiInputBase-root": {
+      padding: getTextFieldPaddingBySize({
+        size: textFieldSize,
+        hasLeftIcon,
+        hasRightIcon,
+        multiline,
+      }),
+      "& input, textarea": {
+        ...typography.body2_14_regular,
+      },
+      "& input": {
+        height: "20px",
+      },
+      "& textarea": {
+        minHeight: "92px",
+        paddingRight: "2px",
+      },
+    },
+    "& .MuiFormHelperText-root": {
+      ...typography.body2_14_regular,
+      color: token.core.text_medium,
+      margin: 0,
+      marginTop: "4px",
+      paddingLeft: "4px",
+
+      "&.Mui-disabled": {
+        color: token.core.text_medium,
+        opacity: 0.38,
+      },
+      "&.Mui-error": {
+        color: token.core.text_error,
+      },
+    },
+  }),
+  ...(textFieldSize === "medium" && {
+    "& .MuiInputBase-root": {
+      padding: getTextFieldPaddingBySize({
+        size: textFieldSize,
+        hasLeftIcon,
+        hasRightIcon,
+        multiline,
+      }),
+      "& input, textarea": {
+        ...typography.body2_14_regular,
+      },
+      "& input": {
+        height: "20px",
+      },
+      "& textarea": {
+        minHeight: "84px",
+        paddingRight: "6px",
+      },
+    },
+    "& .MuiFormHelperText-root": {
+      ...typography.body2_14_regular,
+      color: token.core.text_medium,
+      margin: 0,
+      marginTop: "4px",
+      paddingLeft: "4px",
+
+      "&.Mui-disabled": {
+        color: token.core.text_medium,
+        opacity: 0.38,
+      },
+      "&.Mui-error": {
+        color: token.core.text_error,
+      },
+    },
+  }),
+  ...(textFieldSize === "large" && {
+    "& .MuiInputBase-root": {
+      padding: getTextFieldPaddingBySize({
+        size: textFieldSize,
+        hasLeftIcon,
+        hasRightIcon,
+        multiline,
+      }),
+      "& input, textarea": {
+        ...typography.body1_16_regular,
+      },
+      "& input": {
+        height: "24px",
+      },
+      "& textarea": {
+        minHeight: "80px",
+        paddingRight: "6px",
+      },
+    },
+    "& .MuiFormHelperText-root": {
+      ...typography.body1_16_regular,
+      color: token.core.text_medium,
+      margin: 0,
+      marginTop: "4px",
+      paddingLeft: "4px",
+
+      "&.Mui-disabled": {
+        color: token.core.text_medium,
+        opacity: 0.38,
+      },
+      "&.Mui-error": {
+        color: token.core.text_error,
+      },
+    },
+  }),
+});
+
+const BaseTextField = styled(MuiTextField, {
+  shouldForwardProp: (prop: string) =>
+    ![
+      "leftIconSx",
+      "rightIconSx",
+      "leftIcon",
+      "rightIcon",
+      "textFieldSize",
+      "hasLeftIcon",
+      "hasRightIcon",
+      "onLeftIconClick",
+      "onRightIconClick",
+    ].includes(prop),
+})<BaseTextFieldProps>(
+  ({
+    theme: {
+      typography,
+      palette: { token },
+    },
+    multiline,
+    textFieldSize,
+    hasLeftIcon,
+    hasRightIcon,
+  }) => ({
+    ...commonStyle({ token }),
+    ...sizeStyle({
+      token,
+      textFieldSize,
+      hasLeftIcon,
+      hasRightIcon,
+      typography,
+      multiline,
+    }),
+  })
+);
+
+const IconWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  minWidth: "28px",
+  minHeight: "28px",
+  margin: "-4px 0",
+
+  "& svg": {
+    width: "20px",
+    height: "20px",
+    color: theme.palette.token.core.text_normal,
+  },
+}));
+
+export { BaseTextField, IconWrapper };

package/src/components/TextField/TextField.tsx

@@ -1,8 +1,80 @@
 import React from "react";
-import { Box } from "@mui/material";
 
-const TextField = () => {
-  return <Box>TextField</Box>;
+import TextFieldIcon from "./TextFieldIcon";
+import { BaseTextField } from "./TextField.style";
+
+import type {
+  TextFieldProps,
+  MultiTextFieldProps,
+  SingleTextFieldProps,
+} from "./TextField.types";
+
+const SingleTextField = (props: SingleTextFieldProps) => {
+  const {
+    size,
+    leftIcon,
+    rightIcon,
+    leftIconSx,
+    rightIconSx,
+    onLeftIconClick,
+    onRightIconClick,
+    ...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}
+          />
+        ),
+      }}
+    />
+  );
+};
+
+const MultiTextField = ({
+  size,
+  onChange,
+  ...restProps
+}: MultiTextFieldProps) => {
+  return <BaseTextField {...restProps} textFieldSize={size} multiline />;
+};
+
+const TextField = (props: TextFieldProps) => {
+  const {
+    rows,
+    size = "small",
+    multiline = false,
+    variant = "outlined",
+    ...restProps
+  } = props;
+
+  return multiline ? (
+    <MultiTextField
+      {...restProps}
+      maxRows={Infinity}
+      size={size}
+      variant={variant}
+      rows={rows}
+    />
+  ) : (
+    <SingleTextField {...restProps} size={size} variant={variant} />
+  );
 };
 
 export default TextField;

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

@@ -0,0 +1,38 @@
+import type { SxProps } from "@mui/material";
+import type { OutlinedTextFieldProps } from "@mui/material/TextField";
+
+export type TextFieldSize = "small" | "medium" | "large";
+export interface BaseTextFieldProps
+  extends Omit<
+    OutlinedTextFieldProps,
+    "size" | "value" | "helperText" | "variant"
+  > {
+  /**
+   * The design system TextField variable is outlined fixed.
+   */
+  variant: "outlined";
+  value?: string;
+  helperText?: string;
+
+  /**
+   * @default "small"
+   */
+  size?: TextFieldSize;
+}
+
+export interface SingleTextFieldProps extends BaseTextFieldProps {
+  size: TextFieldSize;
+  leftIcon?: JSX.Element;
+  rightIcon?: JSX.Element;
+  leftIconSx?: SxProps;
+  rightIconSx?: SxProps;
+  onLeftIconClick?: () => void;
+  onRightIconClick?: () => void;
+}
+
+export interface MultiTextFieldProps extends BaseTextFieldProps {
+  rows?: number | string;
+  size: TextFieldSize;
+}
+
+export type TextFieldProps = SingleTextFieldProps | MultiTextFieldProps;

package/src/components/TextField/TextFieldIcon.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { IconWrapper } from "./TextField.style";
+
+import type { SxProps } from "@mui/material";
+
+interface TextFieldProps {
+  sx?: SxProps;
+  icon: JSX.Element;
+  onIconClick?: () => void;
+}
+
+const TextFieldIcon = ({ sx, icon, onIconClick }: TextFieldProps) => {
+  return (
+    <IconWrapper
+      sx={{ cursor: onIconClick ? "pointer" : "auto", ...sx }}
+      onClick={onIconClick}
+    >
+      {icon}
+    </IconWrapper>
+  );
+};
+
+export default TextFieldIcon;

package/src/components/TextField/index.ts

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

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

@@ -0,0 +1,49 @@
+import { Alert, styled } from "@mui/material";
+import { getIconColor } from "./Toast.utils";
+
+export const StyledToast = styled(Alert)(({ theme, severity }) => {
+  return {
+    'div[class*="MuiAlert"]': {
+      display: "flex",
+      alignItems: "center",
+    },
+    "&.MuiAlert-root": {
+      padding: "8px 16px 8px 16px",
+      margin: 0,
+      color: theme.palette.token.core.text_normal,
+      backgroundColor: theme.palette.token.core.bg_03,
+      borderRadius: "8px",
+    },
+    "& .MuiAlert-icon": {
+      height: "36px",
+      marginRight: "16px",
+      fontSize: 20,
+      color: `${getIconColor(theme, severity)}`,
+      "& .MuiSvgIcon-root": {
+        height: "16px",
+        width: "16px",
+      },
+    },
+    "& .MuiAlert-message": {
+      // max length of toast message is 400px
+      maxWidth: "400px",
+      minHeight: "28px",
+      padding: "8px 0 8px 0",
+      fontWeight: 400,
+      fontSize: "14px",
+      lineHeight: "20px",
+      "& .Toast-message": {
+        display: "block",
+      },
+    },
+    "& .MuiAlert-action": {
+      alignSelf: "flex-start",
+      minHeight: "36px",
+      marginRight: "0px",
+      padding: 0,
+      "& .MuiSvgIcon-root": {
+        color: theme.palette.token.core.text_normal,
+      },
+    },
+  };
+});

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,66 @@
+import Success from "@lunit/design-system-icons/Success16";
+import Error from "@lunit/design-system-icons/Error16";
+import Warning from "@lunit/design-system-icons/Warning16";
+import Information from "@lunit/design-system-icons/Information16";
+import Close from "@lunit/design-system-icons/Close";
+
+import { Typography } from "@mui/material";
+import React, { forwardRef } from "react";
+
+import Button from "../Button";
+import { StyledToast } from "./Toast.styled";
+import type { ToastProps } from "./Toast.types";
+
+const MAPPED_ICON = {
+  success: <Success variant="filled" />,
+  info: <Information variant="filled" />,
+  warning: <Warning variant="filled" />,
+  error: <Error variant="filled" />,
+};
+
+const Toast = forwardRef<HTMLDivElement, ToastProps>((props, ref) => {
+  const {
+    severity = "normal",
+    icon,
+    children,
+    action,
+    onClose,
+    ...rest
+  } = props;
+  const iconConfig = severity === "normal" ? { icon: false } : { severity };
+
+  return (
+    <StyledToast
+      ref={ref}
+      iconMapping={MAPPED_ICON}
+      action={
+        <>
+          {action}
+          {onClose && (
+            <Button
+              icon={<Close />}
+              kind="ghost"
+              size="medium"
+              onClick={onClose}
+            />
+          )}
+        </>
+      }
+      {...iconConfig}
+      {...rest}
+    >
+      <Typography
+        className="Toast-message"
+        variant="body2_14_regular"
+        sx={{
+          whiteSpace: "pre-line",
+        }}
+      >
+        {children}
+      </Typography>
+    </StyledToast>
+  );
+});
+
+// this forwardRef is required for using with Snackbar component
+export default Toast;

package/src/components/Toast/Toast.types.ts

@@ -0,0 +1,14 @@
+import { AlertProps as BaseAlertProps } from "@mui/material";
+
+export interface ToastProps
+  extends Omit<
+    BaseAlertProps,
+    | "variant"
+    | "slots"
+    | "slotProps"
+    | "components"
+    | "componentsProps"
+    | "severity"
+  > {
+  severity?: "success" | "info" | "warning" | "error" | "normal";
+}

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

@@ -0,0 +1,17 @@
+import type { AlertColor, Theme } from "@mui/material";
+
+export const getIconColor = (
+  theme: Theme,
+  severity: AlertColor | undefined
+) => {
+  switch (severity) {
+    case "info":
+      return theme.palette.token.core.icon_info_02;
+    case "warning":
+      return theme.palette.token.core.icon_warning_02;
+    case "error":
+      return theme.palette.token.core.icon_error_02;
+    default:
+      return theme.palette.token.core.icon_success_02;
+  }
+};

package/src/components/Toast/index.tsx

@@ -0,0 +1 @@
+export { default as Toast } from './Toast'

package/src/components/ToggleButton/ToggleButton.types.ts

@@ -1,23 +1,20 @@
 import type { ToggleButtonProps as MuiToggleButtonProps } from "@mui/material";
 
-interface ToggleButtonBaseProps extends MuiToggleButtonProps {
+interface ToggleButtonBaseProps extends Omit<MuiToggleButtonProps, "variant"> {
   selectedColor?: "primary" | "secondary";
   icon?: React.ReactNode;
 }
-interface ContainedToggleButtonProps
-  extends Omit<ToggleButtonBaseProps, "variant"> {
+interface ContainedToggleButtonProps extends ToggleButtonBaseProps {
   kind?: "contained";
   color?: "primary" | "secondary";
 }
 
-interface GhostToggleButtonProps
-  extends Omit<ToggleButtonBaseProps, "variant"> {
+interface GhostToggleButtonProps extends ToggleButtonBaseProps {
   kind?: "ghost";
   color?: "primary" | "secondary";
 }
 
-interface OutlinedToggleButtonProps
-  extends Omit<ToggleButtonBaseProps, "variant"> {
+interface OutlinedToggleButtonProps extends ToggleButtonBaseProps {
   kind?: "outlined";
   color?: "primary";
 }

package/src/foundation/colors/base/grey.ts

@@ -34,3 +34,20 @@ export const greyText = {
   95: grey[5],
   100: grey[5],
 };
+
+export const greyForMUI = {
+  50: grey[5],
+  100: grey[10],
+  200: grey[20],
+  300: grey[30],
+  400: grey[40],
+  500: grey[50],
+  600: grey[60],
+  700: grey[70],
+  800: grey[80],
+  900: grey[90],
+  A100: "#F3F3F3",
+  A200: "#C7C7C7",
+  A400: "#9A9A9A",
+  A700: "#4F4F4F",
+};

package/src/foundation/colors/base/lunitGreen.ts

@@ -1,6 +1,6 @@
 import { grey } from "./grey";
 
-export const lunitGreen = {
+export const lunit_green = {
   5: "#F5FBE7",
   10: "#EFF8BC",
   20: "#E5F39E",
@@ -13,7 +13,7 @@ export const lunitGreen = {
   90: "#B1C953",
 };
 
-export const lunitGreenText = {
+export const lunit_greenText = {
   5: grey[95],
   10: grey[95],
   20: grey[95],