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

package/package.json

@@ -1,24 +1,30 @@
 {
   "name": "@lunit/design-system",
-  "version": "1.0.0-a.1",
+  "version": "1.0.0-a.3",
   "description": "Lunit Design System",
-  "main": "dist/index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/index.js",
+  "sideEffects": false,
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/cjs/index.js"
     },
     "./*": {
-      "types": "./dist/components/*/index.d.ts",
-      "default": "./dist/components/*/index.js"
+      "types": "./dist/types/components/*/index.d.ts",
+      "import": "./dist/components/*/index.js",
+      "require": "./dist/cjs/components/*/index.js",
+      "default": "./dist/cjs/components/*/index.js"
     }
   },
-  "types": "dist/index.d.ts",
+  "types": "dist/types/index.d.ts",
   "typesVersions": {
     "*": {
       "*": [
-        "dist/components/*/index.d.ts",
-        "dist/index.d.ts"
+        "dist/types/components/*/index.d.ts",
+        "dist/types/index.d.ts"
       ]
     }
   },
@@ -29,9 +35,11 @@
     "directory": "packages/design-system"
   },
   "scripts": {
-    "build": "webpack",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "build:transpile": "tsc -p tsconfig.build.json",
+    "build:cjs": "webpack -c webpack/cjs.config.js",
+    "build": "yarn build:transpile && yarn build:cjs",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "chromatic": "chromatic"
   },
   "nx": {
@@ -45,20 +53,25 @@
   },
   "devDependencies": {
     "@babel/core": "^7.17.10",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.4",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.11.3",
     "@mui/material": "^5.11.3",
+    "@mui/utils": "^5.11.3",
     "@mui/x-date-pickers": "^5.0.16",
-    "@storybook/addon-actions": "^6.4.22",
-    "@storybook/addon-essentials": "^6.4.22",
-    "@storybook/addon-interactions": "^6.4.22",
-    "@storybook/addon-links": "^6.4.22",
-    "@storybook/addon-storysource": "^6.4.22",
-    "@storybook/builder-webpack5": "^6.4.22",
-    "@storybook/manager-webpack5": "^6.4.22",
-    "@storybook/react": "^6.4.22",
-    "@storybook/testing-library": "^0.0.11",
-    "@storybook/theming": "^6.4.22",
+    "@storybook/addon-actions": "^7.0.6",
+    "@storybook/addon-essentials": "^7.0.6",
+    "@storybook/addon-interactions": "^7.0.6",
+    "@storybook/addon-links": "^7.0.6",
+    "@storybook/addon-storysource": "^7.0.6",
+    "@storybook/blocks": "^7.0.6",
+    "@storybook/react": "^7.0.6",
+    "@storybook/react-webpack5": "^7.0.6",
+    "@storybook/testing-library": "^0.1.0",
+    "@storybook/theming": "^7.0.6",
     "@types/lodash": "^4.14.182",
     "babel-loader": "^8.2.5",
     "chromatic": "^6.7.0",
@@ -67,7 +80,8 @@
     "mustache": "^4.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "storybook-addon-pseudo-states": "^1.15.1",
+    "storybook": "^7.0.6",
+    "storybook-addon-pseudo-states": "^2.0.0",
     "ts-loader": "^9.3.0",
     "typescript": "^4.6.4",
     "webpack": "^5.72.0",

package/src/components/Alert/Alert.styled.ts

@@ -0,0 +1,60 @@
+import {
+  Alert as MuiAlert,
+  AlertTitle as MuiAlertTitle,
+  styled,
+} from "@mui/material";
+import type { AlertProps } from "./Alert.types";
+import {
+  getBorderColor,
+  getBackgroundColor,
+  getIconColor,
+} from "./Alert.utils.";
+
+export const StyledAlert = styled(MuiAlert)<AlertProps>(({ severity }) => ({
+  "&.MuiAlert-root": {
+    display: "flex",
+    padding: "15px",
+    borderRadius: "8px",
+    border: `1px solid ${getBorderColor(severity)}`,
+    backgroundColor: getBackgroundColor(severity),
+    boxShadow: "none",
+  },
+  "& .MuiAlert-icon": {
+    padding: "4px",
+    fontSize: "20px",
+    marginRight: "16px",
+    color: `${getIconColor(severity)} !important`,
+  },
+  "& .MuiAlert-message": {
+    padding: "4px 0",
+    width: "100%",
+    minHeight: "28px",
+  },
+  "& .MuiAlert-action": {
+    margin: 0,
+    padding: 0,
+  },
+  "& .MuiSvgIcon-root": {
+    height: "20px",
+    width: "20px",
+  },
+}));
+
+export const StyledAlertTitle = styled(MuiAlertTitle)(({ theme }) => ({
+  "&.MuiAlertTitle-root": {
+    marginTop: 0,
+    marginBottom: 8,
+    fontWeight: 700,
+    fontSize: "14px",
+    lineHeight: "20px",
+    color: theme.palette.token.core.text_normal,
+  },
+}));
+
+export const StyledAlertChildren = styled("div")(({ theme }) => ({
+  color: theme.palette.token.core.text_normal,
+}));
+
+export const StyledBottomAction = styled("div")({
+  marginTop: "12px",
+});

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,53 @@
+import React, { forwardRef } from "react";
+import {
+  StyledAlert,
+  StyledAlertTitle,
+  StyledAlertChildren,
+  StyledBottomAction,
+} from "./Alert.styled";
+import { AlertProps } from "./Alert.types";
+import {
+  Close,
+  Success,
+  Error,
+  Warning,
+  Information,
+} from "@lunit/design-system-icons";
+import Button from "../Button";
+
+const MAPPED_ICON = {
+  success: <Success variant="filled" />,
+  info: <Information variant="filled" />,
+  warning: <Warning variant="filled" />,
+  error: <Error variant="filled" />,
+};
+
+const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
+  const { title, severity, children, bottomAction, onClose, ...rest } = props;
+  return (
+    <StyledAlert
+      ref={ref}
+      severity={severity}
+      iconMapping={MAPPED_ICON}
+      slots={{
+        closeButton: () => (
+          <Button
+            kind="ghost"
+            size="small"
+            color="secondary"
+            icon={<Close />}
+            onClick={onClose}
+          />
+        ),
+      }}
+      onClose={onClose}
+      {...rest}
+    >
+      {title && <StyledAlertTitle>{title}</StyledAlertTitle>}
+      <StyledAlertChildren>{children}</StyledAlertChildren>
+      {bottomAction && <StyledBottomAction>{bottomAction}</StyledBottomAction>}
+    </StyledAlert>
+  );
+});
+
+export default Alert;

package/src/components/Alert/Alert.types.ts

@@ -0,0 +1,10 @@
+import { AlertProps as MuiAlertProps } from "@mui/material";
+import { ReactNode } from "react";
+
+export interface AlertProps extends MuiAlertProps {
+  title?: string;
+  action?: ReactNode;
+  children: ReactNode;
+  bottomAction?: ReactNode;
+  onClose?: () => void;
+}

package/src/components/Alert/Alert.utils..ts

@@ -0,0 +1,41 @@
+import theme from "@/theme";
+import { AlertColor } from "@mui/material";
+
+export const getBackgroundColor = (severity: AlertColor | undefined) => {
+  switch (severity) {
+    case "info":
+      return theme.palette.token.component.alert_info_bg;
+    case "warning":
+      return theme.palette.token.component.alert_warning_bg;
+    case "error":
+      return theme.palette.token.component.alert_error_bg;
+    default:
+      return theme.palette.token.component.alert_success_bg;
+  }
+};
+
+export const getBorderColor = (severity: AlertColor | undefined) => {
+  switch (severity) {
+    case "info":
+      return theme.palette.token.component.alert_info_border;
+    case "warning":
+      return theme.palette.token.component.alert_warning_border;
+    case "error":
+      return theme.palette.token.component.alert_error_border;
+    default:
+      return theme.palette.token.component.alert_success_border;
+  }
+};
+
+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/Alert/index.ts

@@ -0,0 +1 @@
+export { default } from "./Alert";

package/src/components/Button/Button.styled.ts

@@ -0,0 +1,232 @@
+import { styled } from "@mui/material/styles";
+import { Button as MuiButton } from "@mui/material";
+
+import { ColorToken } from "@/foundation/colors/types";
+import { PADDING_OF_FOCUS, OUTLINED_BORDER_WIDTH } from "./const";
+import { getButtonPaddingBySizeAndKind } from "./utils/getButtonPaddingBySizeAndKind";
+import { getIconButtonPaddingBySizeAndKind } from "./utils/getIconButtonPaddingBySizeAndKind";
+import getHoverStyle from "./utils/getHoverStyle";
+
+import type { ButtonProps } from "./Button.types";
+import type { ToggleButtonProps } from "../ToggleButton/ToggleButton.types";
+import type { Typography } from "@mui/material/styles/createTypography";
+
+type KindStyleParams = Pick<ButtonProps, "kind" | "color"> & {
+  token: ColorToken;
+};
+
+type CustomButtonProps = ButtonProps & { hasIconOnly: boolean };
+
+type sizeStyleParams = Pick<
+  CustomButtonProps,
+  "size" | "hasIconOnly" | "kind"
+> &
+  Pick<ToggleButtonProps, "selected"> & { typography: Typography };
+
+const borderRadius = "8px";
+
+export const sizeStyle = ({
+  size,
+  kind,
+  hasIconOnly,
+  typography,
+  selected = false,
+}: sizeStyleParams) => ({
+  ...(size === "small" && {
+    ...typography.button2,
+    padding: `${
+      hasIconOnly
+        ? getIconButtonPaddingBySizeAndKind({ kind, size, selected })
+        : getButtonPaddingBySizeAndKind({ kind, size, selected })
+    }`,
+    minWidth: "28px",
+    minHeight: "28px",
+  }),
+  ...(size === "medium" && {
+    ...typography.button2,
+    padding: `${
+      hasIconOnly
+        ? getIconButtonPaddingBySizeAndKind({ kind, size, selected })
+        : getButtonPaddingBySizeAndKind({ kind, size, selected })
+    }`,
+    minWidth: "36px",
+    minHeight: "36px",
+  }),
+  ...(size === "large" && {
+    ...typography.button1,
+    padding: `${
+      hasIconOnly
+        ? getIconButtonPaddingBySizeAndKind({ kind, size, selected })
+        : getButtonPaddingBySizeAndKind({ kind, size, selected })
+    }`,
+    minWidth: "44px",
+    minHeight: "44px",
+  }),
+});
+
+export const kindStyle = ({ kind, color, token }: KindStyleParams) => ({
+  // kind: container
+  ...(kind === "contained" &&
+    color === "primary" && {
+      color: token.component.btn_contained_primary_text,
+      backgroundColor: token.component.btn_contained_primary_bg,
+      "&:hover": getHoverStyle(token.component.btn_contained_primary_bg),
+      "&.Mui-disabled": {
+        opacity: 0.38,
+        border: "none",
+        color: token.component.btn_contained_primary_text,
+      },
+    }),
+  ...(kind === "contained" &&
+    color === "secondary" && {
+      color: token.component.btn_contained_secondary_text,
+
+      backgroundColor: token.component.btn_contained_secondary_bg,
+      "&:hover": getHoverStyle(token.component.btn_contained_secondary_bg),
+      "&.Mui-disabled": {
+        opacity: 0.38,
+        border: "none",
+        color: token.component.btn_contained_secondary_text,
+      },
+    }),
+  ...(kind === "contained" &&
+    color === "error" && {
+      color: token.component.btn_contained_error_text,
+      backgroundColor: token.component.btn_contained_error_bg,
+      "&:hover": getHoverStyle(token.component.btn_contained_error_bg),
+      "&.Mui-disabled": {
+        opacity: 0.38,
+        border: "none",
+        color: token.component.btn_contained_error_text,
+      },
+    }),
+  // kind: ghost
+  ...(kind === "ghost" &&
+    color === "primary" && {
+      color: token.component.btn_ghost_primary_text,
+      border: "none",
+      "&:hover": getHoverStyle("none"),
+      "&.Mui-disabled": {
+        opacity: 0.38,
+        border: "none",
+        color: token.component.btn_ghost_primary_text,
+      },
+    }),
+  ...(kind === "ghost" &&
+    color === "secondary" && {
+      color: token.component.btn_ghost_secondary_text,
+      border: "none",
+      "&:hover": getHoverStyle("none"),
+      "&.Mui-disabled": {
+        opacity: 0.38,
+        border: "none",
+        color: token.component.btn_ghost_secondary_text,
+      },
+    }),
+  ...(kind === "ghost" &&
+    color === "error" && {
+      color: token.component.btn_ghost_error_text,
+      "&:hover": getHoverStyle("none"),
+      "&.Mui-disabled": {
+        opacity: 0.38,
+        border: "none",
+        color: token.component.btn_ghost_error_text,
+      },
+    }),
+  // kind: outlined
+  ...(kind === "outlined" &&
+    color === "primary" && {
+      color: token.component.btn_outlined_primary_text,
+      border: `${OUTLINED_BORDER_WIDTH}px solid ${token.component.btn_outlined_primary_border}`,
+      "&:hover": getHoverStyle("none"),
+      "&:hover:before": {
+        content: "''",
+        position: "absolute",
+        left: "-1px",
+        top: "-1px",
+        width: "calc(100% + 2px)",
+        height: "calc(100% + 2px)",
+        zIndex: -1,
+        backgroundColor: token.core.hover,
+        borderRadius,
+      },
+      "&.Mui-disabled": {
+        opacity: 0.38,
+        color: token.component.btn_outlined_primary_text,
+      },
+    }),
+});
+
+export const commonStyle = ({ token }: { token: ColorToken }) =>
+  ({
+    fontWeight: "500",
+    borderRadius,
+    textTransform: "initial",
+    "&.Mui-focusVisible": {
+      "&::after": {
+        position: "absolute",
+        width: `calc(100% + ${PADDING_OF_FOCUS}px)`,
+        height: `calc(100% + ${PADDING_OF_FOCUS}px)`,
+        content: '""',
+        borderRadius: "11px",
+        border: `1px solid ${token.core.focused}`,
+        boxSizing: "border-box",
+      },
+    },
+    "&:hover:before": {
+      content: "''",
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: "100%",
+      height: "100%",
+      zIndex: -1,
+      backgroundColor: token.core.hover,
+      borderRadius,
+    },
+  } as const);
+
+export const iconStyle = ({
+  size,
+  hasIconOnly,
+}: Pick<CustomButtonProps, "size" | "hasIconOnly">) => ({
+  "& .MuiButton-startIcon": {
+    width: "20px",
+    height: "20px",
+    margin: 0,
+    marginRight: hasIconOnly ? "0px" : size === "large" ? "8px" : "4px",
+
+    // This style was added for Mui Button Svg Icon handling
+    "*:nth-of-type(1)": {
+      fontSize: "20px",
+    },
+  },
+  svg: {
+    width: "20px",
+    height: "20px",
+    margin: 0,
+    marginRight: hasIconOnly ? "0px" : size === "large" ? "8px" : "4px",
+  },
+});
+
+export const CustomButton = styled(MuiButton, {
+  shouldForwardProp: (prop: string) => {
+    return !["kind", "hasIconOnly"].includes(prop);
+  },
+})<CustomButtonProps>(
+  ({
+    theme: {
+      typography,
+      palette: { token },
+    },
+    kind,
+    size,
+    color,
+    hasIconOnly,
+  }) => ({
+    ...commonStyle({ token }),
+    ...iconStyle({ size, hasIconOnly }),
+    ...sizeStyle({ size, kind, hasIconOnly, typography }),
+    ...kindStyle({ kind, color, token }),
+  })
+);

package/src/components/Button/Button.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+import { CustomButton } from "./Button.styled";
+
+import type { ButtonProps } from "./Button.types";
+
+const Button = (props: ButtonProps) => {
+  const {
+    kind = "contained",
+    size = "small",
+    color = "primary",
+    icon,
+    className,
+    children,
+    ...buttonProps
+  } = props;
+  const hasIconOnly = Boolean(icon && !children);
+
+  return (
+    <>
+      {kind === "contained" || kind === "ghost" ? (
+        <CustomButton
+          className={`${kind} ${className ? className : ""}`}
+          kind={kind}
+          color={color}
+          size={size}
+          startIcon={icon}
+          hasIconOnly={hasIconOnly}
+          {...buttonProps}
+        >
+          {!hasIconOnly && <>{children}</>}
+        </CustomButton>
+      ) : (
+        <CustomButton
+          className={`outlined ${className ? className : ""}`}
+          kind="outlined"
+          color="primary"
+          size={size}
+          startIcon={icon}
+          hasIconOnly={hasIconOnly}
+          {...buttonProps}
+        >
+          {!hasIconOnly && <>{children}</>}
+        </CustomButton>
+      )}
+    </>
+  );
+};
+
+export default Button;

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

@@ -0,0 +1,25 @@
+import type { ButtonProps as MuiButtonProps } from "@mui/material";
+
+interface BaseButtonProps extends Omit<MuiButtonProps, "variant"> {
+  icon?: React.ReactNode;
+}
+
+interface ContainedButtonProps extends BaseButtonProps {
+  kind?: "contained";
+  color?: "primary" | "secondary" | "error";
+}
+
+interface GhostButtonProps extends BaseButtonProps {
+  kind?: "ghost";
+  color?: "primary" | "secondary" | "error";
+}
+
+interface OutlinedButtonProps extends BaseButtonProps {
+  kind?: "outlined";
+  color?: "primary";
+}
+
+export type ButtonProps =
+  | ContainedButtonProps
+  | GhostButtonProps
+  | OutlinedButtonProps;

package/src/components/Button/const.ts

@@ -0,0 +1,2 @@
+export const PADDING_OF_FOCUS = 6; // TODO: focus 시 padding 고정값, size 별 차이 여부 확인 필요
+export const OUTLINED_BORDER_WIDTH = 1;

package/src/components/Button/index.ts

@@ -0,0 +1 @@
+export { default } from "./Button";

package/src/components/Button/utils/getButtonPaddingBySizeAndKind.ts

@@ -0,0 +1,35 @@
+import { OUTLINED_BORDER_WIDTH } from "../const";
+
+import type { ButtonProps } from "../Button.types";
+import { ToggleButtonProps } from "@/components/ToggleButton/ToggleButton.types";
+
+type GetButtonPaddingBySizeAndKindParams = Pick<ButtonProps, "kind" | "size"> &
+  Pick<ToggleButtonProps, "selected">;
+
+/**
+ * When kind is outlined,
+ * the padding value must include the border width of outlined.
+ * This function takes care of this.
+ */
+export const getButtonPaddingBySizeAndKind = ({
+  kind,
+  size,
+  selected = false,
+}: GetButtonPaddingBySizeAndKindParams) => {
+  if (size === "small") {
+    return kind === "outlined" && !selected
+      ? `${4 - OUTLINED_BORDER_WIDTH}px ${8 - OUTLINED_BORDER_WIDTH}px`
+      : "4px 8px";
+  }
+
+  if (size === "medium") {
+    return kind === "outlined" && !selected
+      ? `${8 - OUTLINED_BORDER_WIDTH}px ${12 - OUTLINED_BORDER_WIDTH}px`
+      : "8px 12px";
+  }
+
+  // size === "large"
+  return kind === "outlined" && !selected
+    ? `${10 - OUTLINED_BORDER_WIDTH}px ${12 - OUTLINED_BORDER_WIDTH}px`
+    : "10px 12px";
+};

package/src/components/Button/utils/getHoverStyle.ts

@@ -0,0 +1,7 @@
+const getHoverStyle = (backgroundColor: React.CSSProperties["color"]) => ({
+  position: "relative",
+  zIndex: 0,
+  backgroundColor,
+});
+
+export default getHoverStyle;

package/src/components/Button/utils/getIconButtonPaddingBySizeAndKind.ts

@@ -0,0 +1,38 @@
+import { OUTLINED_BORDER_WIDTH } from "../const";
+
+import type { ButtonProps } from "../Button.types";
+import { ToggleButtonProps } from "@/components/ToggleButton/ToggleButton.types";
+
+type GetIconButtonPaddingBySizeAndKindProps = Pick<
+  ButtonProps,
+  "kind" | "size"
+> &
+  Pick<ToggleButtonProps, "selected">;
+
+/**
+ * When kind is outlined,
+ * the padding value must include the border width of outlined.
+ * This function takes care of this.
+ */
+export const getIconButtonPaddingBySizeAndKind = ({
+  kind,
+  size,
+  selected = false,
+}: GetIconButtonPaddingBySizeAndKindProps) => {
+  if (size === "small") {
+    return kind === "outlined" && !selected
+      ? `${4 - OUTLINED_BORDER_WIDTH}px`
+      : "4px";
+  }
+
+  if (size === "medium") {
+    return kind === "outlined" && !selected
+      ? `${8 - OUTLINED_BORDER_WIDTH}px`
+      : "8px";
+  }
+
+  // size === "large"
+  return kind === "outlined" && !selected
+    ? `${12 - OUTLINED_BORDER_WIDTH}px`
+    : "12px";
+};