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

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(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,15 @@
+import theme from "@/theme";
+import type { AlertColor } from "@mui/material";
+
+export const getIconColor = (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],

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

@@ -1,6 +1,6 @@
 import { grey } from "./grey";
 
-export const lunitTeal = {
+export const lunit_teal = {
   5: "#EAFAFF",
   10: "#D1F7FF",
   20: "#96EDFF",
@@ -13,9 +13,9 @@ export const lunitTeal = {
   90: "#002930",
 };
 
-export const lunitTealText = {
-  5: lunitTeal[90],
-  10: lunitTeal[90],
+export const lunit_tealText = {
+  5: lunit_teal[90],
+  10: lunit_teal[90],
   20: grey[95],
   30: grey[95],
   40: grey[95],
@@ -23,5 +23,5 @@ export const lunitTealText = {
   60: grey[5],
   70: grey[5],
   80: grey[5],
-  90: lunitTeal[5],
+  90: lunit_teal[5],
 };

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

@@ -4,8 +4,8 @@ export const red = {
   5: "#FFF1F1",
   10: "#FFD7D9",
   20: "#FFB3B8",
-  30: "#FF8389",
-  40: "#FA4D56",
+  30: "#FF7077",
+  40: "#FA464F",
   50: "#DA1E28",
   60: "#A2191F",
   70: "#750E13",

package/src/foundation/colors/index.ts

@@ -15,8 +15,8 @@ declare module "@mui/material/styles/createPalette" {
       grey: GreyColor;
       blue: BaseColor;
       green: BaseColor;
-      lunitGreen: BaseColor;
-      lunitTeal: BaseColor;
+      lunit_green: BaseColor;
+      lunit_teal: BaseColor;
       magenta: BaseColor;
       orange: BaseColor;
       red: BaseColor;
@@ -30,8 +30,8 @@ declare module "@mui/material/styles/createPalette" {
       grey: GreyColor;
       blue: BaseColor;
       green: BaseColor;
-      lunitGreen: BaseColor;
-      lunitTeal: BaseColor;
+      lunit_green: BaseColor;
+      lunit_teal: BaseColor;
       magenta: BaseColor;
       orange: BaseColor;
       red: BaseColor;
@@ -49,7 +49,7 @@ const createCSSVariables = () => {
     const baseColors = base[color as ColorKey];
     for (let key in baseColors) {
       if (baseColors.hasOwnProperty(key)) {
-        const varName = `--${color}-${key}`;
+        const varName = `--${color}_${key}`;
         cssVars[varName] = baseColors[Number(key) as keyof typeof baseColors];
       }
     }
@@ -99,6 +99,7 @@ export const createColorCssBaseline = () => {
   return {
     ":root": {
       ...createCSSVariables(),
+      ...createTokenColorVariables("dark1"),
     },
     ".light1": {
       ...createTokenColorVariables("light1"),
@@ -121,6 +122,7 @@ export const createColorCssBaseline = () => {
   };
 };
 
+// TODO: TextColors 삭제하고 관련된 설정 수정하기
 const lunitColors: PaletteOptions["lunit"] = ((): PaletteOptions["lunit"] => {
   const ret: any = {};
   for (const colorKey in base) {
@@ -146,6 +148,25 @@ const lunitColors: PaletteOptions["lunit"] = ((): PaletteOptions["lunit"] => {
 })();
 
 const paletteOptions = {
+  primary: {
+    main: base.lunit_teal[40], // core.text_primary.dark1
+  },
+  secondary: {
+    main: base.grey[50], // core.text_light.dark1
+  },
+  error: {
+    main: base.red[40], // core.text_error.dark1
+  },
+  warning: {
+    main: base.orange[40], // core.text_warning.dark1
+  },
+  info: {
+    main: base.blue[40], // core.text_info.dark1
+  },
+  success: {
+    main: base.green[40], // core.text_success.dark1
+  },
+  grey: base.greyForMUI,
   lunit: lunitColors,
   token: {
     core: {
@@ -169,6 +190,7 @@ const paletteOptions = {
       icon_info_02: "var(--icon_info_02)",
       hover: "var(--hover)",
       focused: "var(--focused)",
+      selected: "var(--selected)",
       shadow_01: "var(--shadow_01)",
       shadow_02: "var(--shadow_02)",
       shadow_03: "var(--shadow_03)",
@@ -196,10 +218,7 @@ const paletteOptions = {
       selectcontrol_handler_shadow: "var(--selectcontrol_handler_shadow)",
       textfield_bg: "var(--textfield_bg)",
       textfield_border_error: "var(--textfield_border_error)",
-      dropdown_option_selected: "var(--dropdown_option_selected)",
       dropdown_divider_border: "var(--dropdown_divider_border)",
-      dropdown_option_activatied: "var(--dropdown_option_activatied)",
-      datatable_cell_selected: "var(--datatable_cell_selected)",
       datatable_border_01: "var(--datatable_border_01)",
       datatable_border_02: "var(--datatable_border_02)",
       datatable_zebra: "var(--datatable_zebra)",
@@ -232,4 +251,6 @@ const paletteOptions = {
   },
 };
 
+export { base };
+
 export default paletteOptions;