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

package/src/components/Toggle/Toggle.styled.ts

@@ -0,0 +1,162 @@
+import { styled, Switch as MuiSwitch, SwitchProps } from "@mui/material";
+interface ToggleProps extends SwitchProps {
+  toggleSize: 'medium' | 'large'
+}
+
+const toggleStyles = {
+  medium: {
+    root: {
+      width: 28,
+      height: 18,
+      borderRadius: 9,
+    },
+    focus: {
+      width: 34,
+      height: 24,
+      borderRadius: 12,
+    },
+    switch: {
+      transition: "all 100ms ease-in-out",
+    },
+    switchChecked: {
+      transform: 'translateX(10px)',
+    },
+    thumb: {
+        width: 14,
+        height: 14,
+    }
+  },
+  large: {
+    root:{
+      width: 44,
+      height: 24,
+      borderRadius: 12,
+    },
+    focus: {
+      width: 50,
+      height: 30,
+      borderRadius: 14,
+    },
+    switch: {
+      transition: "all 150ms ease-in-out",
+    },
+    switchChecked: {
+      transform: 'translateX(20px)',
+    },
+    thumb: {
+      width: 20,
+      height: 20,
+    },
+  },
+}
+
+const indeterminateStyles = {
+  large: {
+    switchChecked: {
+        top: 8,
+        left: -8,
+    },
+    track: {
+      borderRadius: 12,
+    },
+    thumb: {
+      height: 4,
+      width: 16,
+      borderRadius: 2,
+    },
+  },
+  medium: {
+    switchChecked: {
+        top: 6,
+        left: -4,
+    },
+    track: {
+      borderRadius: 12,
+    },
+    thumb: {
+      height: 2,
+      width: 12,
+      borderRadius: 2,
+    },
+  }
+}
+
+export const CommonToggle = styled(MuiSwitch, {
+  shouldForwardProp: (props) => props !== 'toggleSize',
+})<ToggleProps>(({ theme, toggleSize, disabled }) => {
+  const checkedColor = theme.palette.token.component.selectcontrol_on;
+  const uncheckedColor = theme.palette.token.component.selectcontrol_off;
+  const handlerColor = theme.palette.token.component.selectcontrol_handler;
+
+  const toggleStyle = toggleStyles[toggleSize];
+  const toggleOpacity = disabled ? 0.38 : 1;
+
+  return {
+    ...toggleStyle.root,
+    display: 'flex',
+    padding: 0,
+    overflow: "visible",
+    backgroundColor: "transparent",
+    opacity: toggleOpacity,
+    "& .Mui-focusVisible": {
+       // clear default focus style
+      boxShadow: "none",
+      background: "transparent",
+      borderColor: "transparent",
+      outline: "none",
+      "& + .MuiSwitch-track::after": {
+        ...toggleStyle.focus,
+        content: '""',
+        position: "absolute",
+        border: `1px solid ${checkedColor}`,
+        boxSizing: "border-box",
+        top: -3, // border 1px + offset 2px
+        left: -3, // border 1px + offset 2px
+      }
+    },
+    '& .MuiSwitch-track': {
+      opacity: 1,
+      borderRadius: 12,
+      backgroundColor: uncheckedColor,
+    },
+    '& .MuiSwitch-thumb': {
+      ...toggleStyle.thumb,
+      boxShadow: "0px 0px 1px rgba(0, 0, 0, 0.4)",
+    },
+    '& .MuiSwitch-switchBase': {
+      ...toggleStyle.switch,
+      padding: 2,
+      opacity: 1,
+      '&.Mui-checked': {
+        ...toggleStyle.switchChecked,
+        color: handlerColor,
+        '& + .MuiSwitch-track': {
+          opacity: 1,
+          backgroundColor: checkedColor,
+        },
+      },
+    },
+    '& .Mui-disabled + .MuiSwitch-track': {
+      opacity: 1,
+    },
+  }});
+
+export const CommonIndeterminateToggle = styled(CommonToggle, {
+  shouldForwardProp: (props) => props !== 'toggleSize',
+})(({ toggleSize }) => {
+  const indeterminateStyle = indeterminateStyles[toggleSize];
+
+  return {
+  padding: 0,
+  cursor: "pointer",
+  '& .MuiSwitch-switchBase.Mui-checked': {
+      ...indeterminateStyle.switchChecked,
+      '& + .MuiSwitch-track': {
+        ...indeterminateStyle.track,
+    },
+  },
+  '& .MuiSwitch-thumb': {
+    ...indeterminateStyle.thumb,
+    boxShadow: "none",
+  },
+}});

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { CommonToggle, CommonIndeterminateToggle } from './Toggle.styled'
+import type { ToggleProps } from './Toggle.types'
+
+
+const Toggle = (props: ToggleProps) => {
+  const { size = "medium", indeterminate = false, disableRipple, ...switchProps } = props
+
+  if (indeterminate) {
+    const { checked: _, ...restProps } = switchProps;
+    // can't use checked props with indeterminate
+      return <CommonIndeterminateToggle toggleSize={size} checked focusRipple={false} disableRipple={disableRipple} {...restProps} />
+  }
+
+  return  <CommonToggle toggleSize={size} focusRipple={false} disableRipple={disableRipple} {...switchProps}/>
+}
+
+export default Toggle

package/src/components/Toggle/Toggle.types.ts

@@ -0,0 +1,14 @@
+import type { SwitchProps } from "@mui/material"
+
+export interface ToggleProps extends Omit<SwitchProps, "size" > {
+  /**
+   * The size of the component.
+   * @default medium
+   */
+  size?: 'medium' | 'large'
+  /**
+  * If `true`, the component has consistent 'checked' value and change shape.
+  * @default false
+  */
+  indeterminate?: boolean
+}

package/src/components/Toggle/index.ts

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

package/src/components/ToggleButton/ToggleButton.styled.ts

@@ -0,0 +1,58 @@
+import { styled } from "@mui/material/styles";
+import { ToggleButton as MuiToggleButton } from "@mui/material";
+
+import type { ToggleButtonProps } from "../ToggleButton/ToggleButton.types";
+import {
+  commonStyle,
+  sizeStyle,
+  kindStyle,
+  iconStyle,
+} from "../Button/Button.styled";
+
+type CustomToggleButtonProps = ToggleButtonProps & { hasIconOnly: boolean };
+
+export const CustomToggleButton = styled(MuiToggleButton, {
+  shouldForwardProp: (prop: string) => {
+    return !["icon", "kind", "selectedColor", "hasIconOnly"].includes(prop);
+  },
+})<CustomToggleButtonProps>(
+  ({
+    theme: {
+      typography,
+      palette: { token },
+    },
+    kind,
+    size,
+    color,
+    selectedColor,
+    hasIconOnly,
+    selected,
+  }) => {
+    return {
+      border: "none",
+      ...commonStyle({ token }),
+      ...iconStyle({ size, hasIconOnly }),
+      ...sizeStyle({ size, kind, hasIconOnly, selected, typography }),
+      ...kindStyle({ kind, color, token }),
+      ...(selectedColor === "primary" && {
+        "&.Mui-selected, &.Mui-selected:hover": {
+          border: "none",
+          backgroundColor: token.component.btn_selected_primary_bg,
+          color: token.component.btn_selected_primary_text,
+        },
+      }),
+      ...(selectedColor === "secondary" && {
+        "&.Mui-selected, &.Mui-selected:hover": {
+          border: "none",
+          backgroundColor: token.component.btn_selected_secondary_bg,
+          color: token.component.btn_selected_secondary_text,
+        },
+      }),
+    };
+  }
+);
+
+export const IconAndChildrenWrapper = styled("div")({
+  display: "flex",
+  alignItems: "center",
+});

package/src/components/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import {
+  CustomToggleButton,
+  IconAndChildrenWrapper,
+} from "./ToggleButton.styled";
+import type { ToggleButtonProps } from "./ToggleButton.types";
+
+const ToggleButton = (props: ToggleButtonProps) => {
+  const {
+    kind = "contained",
+    size = "small",
+    color = "primary",
+    selectedColor = "primary",
+    className = "",
+    icon,
+    selected,
+    children,
+    ...buttonProps
+  } = props;
+
+  const hasIconOnly = Boolean(icon && !children);
+  const excludeToggleGroupClass = className
+    .replace("MuiToggleButtonGroup-grouped", "")
+    .replace("MuiToggleButtonGroup-groupedHorizontal", "");
+
+  return (
+    <>
+      {kind === "contained" || kind === "ghost" ? (
+        <CustomToggleButton
+          className={`${kind} ${excludeToggleGroupClass}`}
+          selected={selected}
+          kind={kind}
+          color={color}
+          size={size}
+          hasIconOnly={hasIconOnly}
+          selectedColor={selectedColor}
+          disableRipple
+          disableFocusRipple
+          {...buttonProps}
+        >
+          {!hasIconOnly ? (
+            <>
+              {icon ? (
+                <IconAndChildrenWrapper>
+                  {icon}
+                  {children}
+                </IconAndChildrenWrapper>
+              ) : (
+                children
+              )}
+            </>
+          ) : (
+            icon
+          )}
+        </CustomToggleButton>
+      ) : (
+        <CustomToggleButton
+          className={`outlined ${excludeToggleGroupClass}`}
+          selected={selected}
+          kind="outlined"
+          color="primary"
+          size={size}
+          hasIconOnly={hasIconOnly}
+          selectedColor={selectedColor}
+          disableRipple
+          disableFocusRipple
+          {...buttonProps}
+        >
+          {!hasIconOnly ? (
+            <>
+              {icon ? (
+                <IconAndChildrenWrapper>
+                  {icon}
+                  {children}
+                </IconAndChildrenWrapper>
+              ) : (
+                children
+              )}
+            </>
+          ) : (
+            icon
+          )}
+        </CustomToggleButton>
+      )}
+    </>
+  );
+};
+
+export default ToggleButton;

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

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

package/src/components/ToggleButton/index.ts

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

package/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import MuiToggleButtonGroup, {
+  ToggleButtonGroupProps,
+} from "@mui/material/ToggleButtonGroup";
+
+const ToggleButtonGroup = ({
+  size = "small",
+  ...props
+}: ToggleButtonGroupProps) => {
+  return <MuiToggleButtonGroup size={size} {...props} />;
+};
+
+export default ToggleButtonGroup;

package/src/components/ToggleButtonGroup/index.tsx

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

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+import { Box } from "@mui/material";
+
+const Tooltip = () => {
+  return <Box>Tooltip</Box>;
+};
+
+export default Tooltip;

package/src/components/Tooltip/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,9 @@
+// re-export any MUI styleOverrides for components
+
+import { Components, Theme } from "@mui/material";
+
+export const componentsCssBaseline: Components<Theme>["MuiCssBaseline"] = {
+  styleOverrides: {
+    // @todo add any css baseline necessary for components
+  },
+};

package/src/foundation/Elevation/index.ts

@@ -0,0 +1,72 @@
+import paletteOptions from "../colors";
+import { createCSSVarNames, createCSSVars } from "./utils";
+
+export const shadows = {
+  shadow1: `0px 4px 8px ${paletteOptions.token.core.shadow_01}`,
+  shadow2: `0px 3px 12px ${paletteOptions.token.core.shadow_02}`,
+  shadow3: `0px 12px 24px ${paletteOptions.token.core.shadow_03}`,
+  shadow4: `0px 12px 44px ${paletteOptions.token.core.shadow_04}`,
+};
+
+const shadowVars = createCSSVarNames(shadows);
+
+export const elevations = {
+  elevation_00: "none",
+  elevation_01: `${shadowVars.shadow1}, ${shadowVars.shadow2}`,
+  elevation_02: `${shadowVars.shadow3}, ${shadowVars.shadow4}`,
+};
+
+export const elevationOptions = {
+  ...shadows,
+  ...elevations,
+};
+
+export const createElevationCssBaseline = () => {
+  return {
+    // :root에 모든 theme이 정의되어 있지 않으므로 surface*에서 찾아야 함
+    ".light1, .light2, .dark1, .dark2, .dark3, .dark4": {
+      ...createCSSVars(shadows),
+      ...createCSSVars(elevations),
+      // `--elevation-shadow`가 정의되지 않아도 `box-shadow: var(--elevation-shadow)` 구문을 해석하려면 필요함
+      "--elevation-shadow": "none",
+    },
+    // Default component styles
+    ".MuiPaper-root": {
+      "--elevation-shadow": elevationOptions.elevation_02,
+    },
+    ".MuiDialog-paper": {
+      "--elevation-shadow": elevationOptions.elevation_02,
+    },
+    ".MuiPopover-paper": {
+      "--elevation-shadow": elevationOptions.elevation_02,
+    },
+    // Date Range Picker, Select 등의 Menu element는 MuiMenu-paper에서 상속
+    ".MuiMenu-paper": {
+      "--elevation-shadow": elevationOptions.elevation_01,
+    },
+    ".MuiTooltip-tooltip": {
+      "--elevation-shadow": elevationOptions.elevation_01,
+    },
+    ".MuiAlert-root": {
+      "--elevation-shadow": elevationOptions.elevation_02,
+    },
+
+    // Alternative to Paper `elevation` prop
+    ".elevation0, .elevation1, .elevation2": {
+      boxShadow: "var(--elevation-shadow)",
+    },
+    ".elevation3, .elevation4, .elevation5, .elevation6, .elevation7, .elevation8, .elevation9, .elevation10, .elevation11, .elevation12, .elevation13, .elevation14, .elevation15, .elevation16, .elevation17, .elevation18, .elevation19, .elevation20, .elevation21, .elevation22, .elevation23, .elevation24":
+      {
+        boxShadow: "none",
+      },
+    ".elevation0": {
+      "--elevation-shadow": elevationOptions.elevation_00,
+    },
+    ".elevation1": {
+      "--elevation-shadow": elevationOptions.elevation_01,
+    },
+    ".elevation2": {
+      "--elevation-shadow": elevationOptions.elevation_02,
+    },
+  };
+};

package/src/foundation/Elevation/utils.ts

@@ -0,0 +1,11 @@
+export const createCSSVars = <T extends Record<string, string>>(tokens: T) =>
+  Object.entries(tokens).reduce((vars, [name, value]) => {
+    vars[`--${name}` as keyof T] = value;
+    return vars;
+  }, {} as Record<keyof T, string>);
+
+export const createCSSVarNames = <T extends Record<string, string>>(tokens: T) =>
+  Object.entries(tokens).reduce((vars, [name, value]) => {
+    vars[name as keyof T] = `var(--${name})`;
+    return vars;
+  }, {} as Record<keyof T, string>);

package/src/foundation/Typography/index.ts

@@ -0,0 +1,96 @@
+import type { TypographyOptions } from "@mui/material/styles/createTypography";
+import { fontVariants, cssVariables } from "./tokens";
+
+type DSVariants =
+  | "headline1"
+  | "headline2"
+  | "headline3"
+  | "headline4"
+  | "headline5"
+  | "body1_16_semibold"
+  | "body1_16_regular"
+  | "body2_14_bold"
+  | "body2_14_medium"
+  | "body2_14_regular"
+  | "body3_12_semibold"
+  | "body3_12_regular"
+  | "button1"
+  | "button2";
+
+type DSVariantsType = Record<DSVariants, React.CSSProperties>;
+
+declare module "@mui/material/styles" {
+  interface TypographyVariants extends DSVariantsType {}
+  interface TypographyVariantsOptions extends Partial<DSVariantsType> {}
+}
+
+type TypographyPropsVariantOverridesType = Record<DSVariants, true>;
+declare module "@mui/material/Typography" {
+  interface TypographyPropsVariantOverrides
+    extends TypographyPropsVariantOverridesType {}
+}
+
+const fontFamily = [
+  "Pretendard",
+  "-apple-system",
+  "BlinkMacSystemFont",
+  "system-ui",
+  "Roboto",
+  '"Helvetica Neue"',
+  '"Segoe UI"',
+  '"Apple SD Gothic Neo"',
+  '"Noto Sans KR"',
+  '"Malgun Gothic"',
+  '"Apple Color Emoji"',
+  '"Segoe UI Emoji"',
+  '"Segoe UI Symbol"',
+  "sans-serif",
+].join(",");
+
+const typographyOptions: TypographyOptions = {
+  fontFamily,
+  ...{
+    ...fontVariants,
+    // alias Mui Typography variants
+    h1: fontVariants.headline1,
+    h2: fontVariants.headline2,
+    h3: fontVariants.headline3,
+    h4: fontVariants.headline4,
+    h5: fontVariants.headline5,
+    h6: fontVariants.headline5,
+    body1: fontVariants.body1_16_regular,
+    body2: fontVariants.body2_14_regular,
+    button: fontVariants.button2,
+  },
+};
+
+export const typographyDefaultProps = {
+  variantMapping: {
+    headline1: "h1",
+    headline2: "h2",
+    headline3: "h3",
+    headline4: "h4",
+    headline5: "h6",
+    body1_16_semibold: "p",
+    body1_16_regular: "p",
+    body2_14_bold: "p",
+    body2_14_medium: "p",
+    body2_14_regular: "p",
+    body3_12_semibold: "p",
+    body3_12_regular: "p",
+  },
+};
+
+export const createTypographyCssBaseline = () => {
+  return {
+    html: {
+      fontFamily,
+      fontFeatureSettings: `'tnum', 'ss01', 'ss02', 'ss08'`,
+    },
+    ":root": {
+      ...cssVariables,
+    },
+  };
+};
+
+export default typographyOptions;