@lunit/design-system 2.1.0 → 2.2.3

package/src/components/ToggleButton/ToggleButton.tsx

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

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

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

package/src/components/ToggleButton/index.ts

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

package/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx

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

package/src/components/ToggleButtonGroup/index.tsx

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

package/src/components/Tooltip/Tooltip.tsx

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

package/src/components/Tooltip/index.ts

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

package/src/components/Typography/Typography.tsx

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

package/src/components/Typography/index.ts

@@ -1 +1 @@
-export { default } from "./Typography";
+export { default } from './Typography';

package/src/components/index.ts

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

package/src/foundation/Elevation/index.ts

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

package/src/foundation/Elevation/utils.ts

@@ -1,11 +1,17 @@
 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>);
+  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>);
+  Object.entries(tokens).reduce(
+    (vars, [name]) => {
+      vars[name as keyof T] = `var(--${name})`;
+      return vars;
+    },
+    {} as Record<keyof T, string>,
+  );

package/src/foundation/Typography/index.ts

@@ -1,30 +1,31 @@
-import type { TypographyOptions } from "@mui/material/styles/createTypography";
-import { fontVariants, cssVariables } from "./tokens";
+import type React from 'react';
+import type { TypographyVariantsOptions } from '@mui/material/styles';
+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"
-  | "body_m2"
-  | "body_reg6"
-  | "body_reg8"
-  | "small_body_sb1"
-  | "small_body_m2"
-  | "button1"
-  | "button2";
+  | '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'
+  | 'body_m2'
+  | 'body_reg6'
+  | 'body_reg8'
+  | 'small_body_sb1'
+  | 'small_body_m2'
+  | 'button1'
+  | 'button2';
 
 type DSVariantsType = Record<DSVariants, React.CSSProperties>;
 
-declare module "@mui/material/styles" {
+declare module '@mui/material/styles' {
   interface TypographyVariants extends DSVariantsType {}
   interface TypographyVariantsOptions extends Partial<DSVariantsType> {}
 }
@@ -32,11 +33,11 @@ declare module "@mui/material/styles" {
 export type TypographyPropsVariantOverridesType = Record<DSVariants, true>;
 
 const fontFamily = [
-  "Pretendard",
-  "-apple-system",
-  "BlinkMacSystemFont",
-  "system-ui",
-  "Roboto",
+  'Pretendard',
+  '-apple-system',
+  'BlinkMacSystemFont',
+  'system-ui',
+  'Roboto',
   '"Helvetica Neue"',
   '"Segoe UI"',
   '"Apple SD Gothic Neo"',
@@ -45,10 +46,10 @@ const fontFamily = [
   '"Apple Color Emoji"',
   '"Segoe UI Emoji"',
   '"Segoe UI Symbol"',
-  "sans-serif",
-].join(",");
+  'sans-serif',
+].join(',');
 
-const typographyOptions: TypographyOptions = {
+const typographyOptions: TypographyVariantsOptions = {
   fontFamily,
   ...{
     ...fontVariants,
@@ -67,46 +68,46 @@ const typographyOptions: TypographyOptions = {
 
 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",
-    body_m2: "p",
-    body_reg6: "p",
-    body_reg8: "p",
-    small_body_sb1: "p",
-    small_body_m2: "p",
+    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',
+    body_m2: 'p',
+    body_reg6: 'p',
+    body_reg8: 'p',
+    small_body_sb1: 'p',
+    small_body_m2: 'p',
   },
 };
 
 export const createTypographyCssBaseline = () => {
   return {
-    "*, *:before, *:after": {
+    '*, *:before, *:after': {
       // @font-face: font-feature-settings로 대체 가능하나, 브라우저 지원이 부족함 https://caniuse.com/mdn-css_at-rules_font-face_font-feature-settings
       fontFeatureSettings: `'tnum', 'ss01', 'ss02', 'ss08'`,
     },
-    ":root": {
+    ':root': {
       ...cssVariables,
     },
-    ".light1": {
-      color: "var(--text_normal)",
+    '.light1': {
+      color: 'var(--text_normal)',
     },
-    ".light2": {
-      color: "var(--text_normal)",
+    '.light2': {
+      color: 'var(--text_normal)',
     },
-    ".dark1": {
-      color: "var(--text_normal)",
+    '.dark1': {
+      color: 'var(--text_normal)',
     },
-    ".dark2": {
-      color: "var(--text_normal)",
+    '.dark2': {
+      color: 'var(--text_normal)',
     },
   };
 };