@lunit/design-system 2.2.0 → 2.2.3

package/src/stories/foundation/colors/ColorSystem.tsx

@@ -1,81 +1,83 @@
-import React from "react";
-import { Box, Grid, styled } from "@mui/material";
-import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import React from 'react';
+import { Box, Grid, styled } from '@mui/material';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 
-const ColorBox = styled(Box)(({ theme }) => ({
-  textAlign: "center",
-  padding: "4px 0",
-  fontSize: "14px !important",
-  marginTop: "5px !important",
+const ColorBox = styled('div')(() => ({
+  textAlign: 'center',
+  padding: '4px 0',
+  fontSize: '14px !important',
+  marginTop: '5px !important',
 }));
 
-const BlockBox = styled(Box)(({ theme }) => ({
-  backgroundColor: "#d7d3d3",
-  textAlign: "center",
-  display: "flex",
-  flexDirection: "column",
-  flex: "auto",
-  padding: "10px",
+const BlockBox = styled('div')(() => ({
+  backgroundColor: '#d7d3d3',
+  textAlign: 'center',
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 'auto',
+  padding: '10px',
 }));
 
 const ColorSystem = () => {
   return (
-    <Box pb={10}>
+    <Box
+      sx={{
+        pb: 10,
+      }}
+    >
       <Grid container spacing={2}>
         <Grid
-          item
-          xs={4}
+          size={4}
           sx={{
-            display: "flex",
-            flexDirection: "row",
+            display: 'flex',
+            flexDirection: 'row',
           }}
         >
           <BlockBox>
             <Box>Color Hex Value</Box>
-            <ColorBox bgcolor="#FFFFFF">#FFFFFF</ColorBox>
-            <ColorBox bgcolor="#00C9EA">#00C9EA</ColorBox>
-            <ColorBox bgcolor="#FFB3B8">#FFB3B8</ColorBox>
+            <ColorBox sx={{ bgcolor: '#FFFFFF' }}>#FFFFFF</ColorBox>
+            <ColorBox sx={{ bgcolor: '#00C9EA' }}>#00C9EA</ColorBox>
+            <ColorBox sx={{ bgcolor: '#FFB3B8' }}>#FFB3B8</ColorBox>
           </BlockBox>
           <Box
             sx={{
-              width: "20px",
-              display: "flex",
-              alignItems: "center",
+              width: '20px',
+              display: 'flex',
+              alignItems: 'center',
             }}
           >
             <ArrowForwardIcon />
           </Box>
         </Grid>
         <Grid
-          item
-          xs={4}
+          size={4}
           sx={{
-            display: "flex",
-            flexDirection: "row",
+            display: 'flex',
+            flexDirection: 'row',
           }}
         >
           <BlockBox>
             <Box>Global Palette</Box>
-            <ColorBox bgcolor="#FFFFFF">grey_0</ColorBox>
-            <ColorBox bgcolor="#00C9EA">lunit_teal_40</ColorBox>
-            <ColorBox bgcolor="#FFB3B8">red_20</ColorBox>
+            <ColorBox sx={{ bgcolor: '#FFFFFF' }}>grey_0</ColorBox>
+            <ColorBox sx={{ bgcolor: '#00C9EA' }}>lunit_teal_40</ColorBox>
+            <ColorBox sx={{ bgcolor: '#FFB3B8' }}>red_20</ColorBox>
           </BlockBox>
           <Box
             sx={{
-              width: "20px",
-              display: "flex",
-              alignItems: "center",
+              width: '20px',
+              display: 'flex',
+              alignItems: 'center',
             }}
           >
             <ArrowForwardIcon />
           </Box>
         </Grid>
-        <Grid item xs={4}>
+        <Grid size={4}>
           <BlockBox>
             <Box>Color Token</Box>
-            <ColorBox bgcolor="#FFFFFF">bg_01</ColorBox>
-            <ColorBox bgcolor="#00C9EA">btn_primary_border</ColorBox>
-            <ColorBox bgcolor="#FFB3B8">chip_error_bg</ColorBox>
+            <ColorBox sx={{ bgcolor: '#FFFFFF' }}>bg_01</ColorBox>
+            <ColorBox sx={{ bgcolor: '#00C9EA' }}>btn_primary_border</ColorBox>
+            <ColorBox sx={{ bgcolor: '#FFB3B8' }}>chip_error_bg</ColorBox>
           </BlockBox>
         </Grid>
       </Grid>

package/src/stories/foundation/colors/Colors.stories.tsx

@@ -1,51 +1,50 @@
-import React from "react";
-import { StoryFn, Meta } from "@storybook/react-webpack5";
-import { Typography, useTheme } from "@mui/material";
-import { Color, ColorContainer, Container, PaletteContainer } from "./styled";
-import map from "lodash/map";
-import lowerCase from "lodash/lowerCase";
-import capitalize from "lodash/capitalize";
-import { BaseColor, GreyColor } from "@/foundation/colors";
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react-webpack5';
+import { Typography, useTheme } from '@mui/material';
+import { Color, ColorContainer, Container, PaletteContainer } from './styled';
+import map from 'lodash/map';
+import lowerCase from 'lodash/lowerCase';
+import capitalize from 'lodash/capitalize';
+import { BaseColor, GreyColor } from '@/foundation/colors';
 
 const convertColorPaletteKeyToDisplay = (key: string): string =>
   lowerCase(key)
-    .split(" ")
+    .split(' ')
     .map((str) => capitalize(str))
-    .join(" ");
+    .join(' ');
 
 const BaseColors = () => {
   const theme = useTheme();
   return (
     <Container>
-      {map(
-        theme.palette.lunit_global,
-        (colors: BaseColor | GreyColor, paletteKey: string) => (
-          <div key={paletteKey}>
-            <Typography
-              variant="h4"
-              sx={{
-                marginBottom: 11,
-                "&:not(:first-of-type)": { marginTop: 11 },
-              }}
-            >
-              {convertColorPaletteKeyToDisplay(paletteKey)}
-            </Typography>
-            <PaletteContainer>
-              {map(colors, (_: string, colorKey: string) => (
-                <ColorContainer key={colorKey}>
-                  <Color
-                    color={`lunit_global.${paletteKey}.${colorKey}.contrastText`}
-                    bgcolor={`lunit_global.${paletteKey}.${colorKey}.main`}
-                  >
-                    <Typography variant="h4">T</Typography>
-                  </Color>
-                  <Typography variant="body2">{`${paletteKey}_${colorKey}`}</Typography>
-                </ColorContainer>
-              ))}
-            </PaletteContainer>
-          </div>
-        ),
-      )}
+      {map(theme.palette.lunit_global, (colors: BaseColor | GreyColor, paletteKey: string) => (
+        <div key={paletteKey}>
+          <Typography
+            variant="h4"
+            sx={{
+              marginBottom: 11,
+              '&:not(:first-of-type)': { marginTop: 11 },
+            }}
+          >
+            {convertColorPaletteKeyToDisplay(paletteKey)}
+          </Typography>
+          <PaletteContainer>
+            {map(colors, (_: string, colorKey: string) => (
+              <ColorContainer key={colorKey}>
+                <Color
+                  sx={{
+                    color: `lunit_global.${paletteKey}.${colorKey}.contrastText`,
+                    bgcolor: `lunit_global.${paletteKey}.${colorKey}.main`,
+                  }}
+                >
+                  <Typography variant="h4">T</Typography>
+                </Color>
+                <Typography variant="body2">{`${paletteKey}_${colorKey}`}</Typography>
+              </ColorContainer>
+            ))}
+          </PaletteContainer>
+        </div>
+      ))}
     </Container>
   );
 };
@@ -53,7 +52,7 @@ const BaseColors = () => {
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  title: "Foundation/Colors",
+  title: 'Foundation/Colors',
   component: BaseColors,
 } as Meta<typeof BaseColors>;
 
@@ -62,5 +61,5 @@ const BaseTemplate: StoryFn<typeof BaseColors> = () => <BaseColors />;
 
 export const GlobalColors = {
   render: BaseTemplate,
-  name: "Palette: Global Colors",
+  name: 'Palette: Global Colors',
 };

package/src/stories/foundation/colors/Docs.mdx

@@ -1,15 +1,16 @@
-import { Canvas, Meta } from "@storybook/addon-docs/blocks";
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import ColorSystem from './ColorSystem';
 
-import * as ColorsStories from "./Colors.stories";
-import * as TokenInComponentStories from "./Token.inComponent.stories";
+import * as ColorsStories from './Colors.stories';
+import * as TokenInComponentStories from './Token.inComponent.stories';
 
 <Meta of={ColorsStories} />
 
 # Color System & Token
+
 > _For the color documents, we provide both Korean and English to ensure understanding of our unique color system and tokens._  
 > _시스템의 이해를 돕기 위해 Color System 문서만 한국어와 영어를 병기하여 설명합니다._
 
@@ -18,114 +19,113 @@ Pre-configured palettes are provided in token form, allowing for easy applicatio
 _루닛 디자인 시스템은 명시적이고 일관된 색상 사용을 보장하기 위해 색상 팔레트를 정의한다.  
 사전 구성된 팔레트는 토큰 형태로 제공되므로 컴포넌트나 페이지 단에서 쉽게 적용 가능하다._
 
-
 ## Structure of Color system
-The color system in Lunit is structured as follows.    
-_루닛의 색상 시스템은 다음과 같은 구조로 이루어져 있다._  
+
+The color system in Lunit is structured as follows.  
+_루닛의 색상 시스템은 다음과 같은 구조로 이루어져 있다._
 
 <ColorSystem />
 
 ### Global Palette Color
 
 > [Browse all the Global Palette Colors(link)](?path=/story/foundation-colors--global-colors)
+
 - A collection of colors organized by type and shade to be used within the AK design system.  
-  _루닛 디자인 시스템 안에서 사용할 색상을 종류와 밝기로 분류해 구성한 색상의 모음._  
+  _루닛 디자인 시스템 안에서 사용할 색상을 종류와 밝기로 분류해 구성한 색상의 모음._
 - The components and foundations provided by the lunit design system only utilize colors from this palette.  
-  _루닛 디자인 시스템에서 제공하는 컴포넌트와 파운데이션은 이 팔레트의 색상만을 이용하고 있다._  
+  _루닛 디자인 시스템에서 제공하는 컴포넌트와 파운데이션은 이 팔레트의 색상만을 이용하고 있다._
 - Each item in the Global Palette corresponds 1:1 with a color code (hex value).  
-  _Global Palette의 각 항목은 색상 코드(hex값)와 1:1 대응한다._  
+  _Global Palette의 각 항목은 색상 코드(hex값)와 1:1 대응한다._
 - Color Tokens are linked to these values in the Global Palette.  
-  _Color Token은 이 Global Paltte 값과 연결된다._  
+  _Color Token은 이 Global Paltte 값과 연결된다._
 
 ### Color Token
 
-> [Browse all the Core tokens(link)](?path=/story/foundation-colors--core-tokens) <br />
-> [Browse all the Component tokens(link)](?path=/story/foundation-colors--component-tokens)
+> [Browse all the Core tokens(link)](?path=/story/foundation-colors--core-tokens) <br /> > [Browse all the Component tokens(link)](?path=/story/foundation-colors--component-tokens)
 
 - **Core Token**: These are color tokens universally used in UI elements, including background and text colors.  
-  _**Core Token** : background, text 색상과 같이 범용적으로 적용되는 UI 에서 사용하는 컬러 토큰_  
+  _**Core Token** : background, text 색상과 같이 범용적으로 적용되는 UI 에서 사용하는 컬러 토큰_
 - **Component Token**: These are color tokens specifically utilized for certain components, such as buttons and chips.  
- _**Component Token** : button, chip 등과 같이 특정 컴포넌트 안에서만 사용하는 컬러 토큰_  
+  _**Component Token** : button, chip 등과 같이 특정 컴포넌트 안에서만 사용하는 컬러 토큰_
 - It is recommended to use **Color Tokens** instead of color codes or Global Colors.  
-  _색상 코드나 Global Color 대신 **Color Token** 을 이용하는 것 을 권장한다._  
+  _색상 코드나 Global Color 대신 **Color Token** 을 이용하는 것 을 권장한다._
 - Color Tokens have colors for four themes (Light1, 2, Dark1, 2). Themes can be set using the className of the component itself or the parent element surrounding it.  
-  _Color Token은 4가지 테마(Light1,2, Dark1,2) 별 색상을 가지고 있다. 테마는 해당 컴포넌트, 혹은 컴포넌트를 둘러싸고 있는 부모 엘리먼트의 className을 이용해 설정할 수 있다._  
+  _Color Token은 4가지 테마(Light1,2, Dark1,2) 별 색상을 가지고 있다. 테마는 해당 컴포넌트, 혹은 컴포넌트를 둘러싸고 있는 부모 엘리먼트의 className을 이용해 설정할 수 있다._
 
 ## How to set themes
+
 - Types of themes: light1, light2, dark1, dark2  
-  _테마의 종류 : light1, light2, dark1, dark2_  
+  _테마의 종류 : light1, light2, dark1, dark2_
 - The method to set themes : To assign a theme, add the theme name to the className of either the component you want to style or its surrounding parent element.  
-  _테마를 설정하는 방법 : 테마를 부여하고 싶은 컴포넌트나 해당 컴포넌트를 둘러싸고 있는 부모 엘리먼트의 className에 테마 이름을 추가한다._  
-  - ex)        
+  _테마를 설정하는 방법 : 테마를 부여하고 싶은 컴포넌트나 해당 컴포넌트를 둘러싸고 있는 부모 엘리먼트의 className에 테마 이름을 추가한다._
+  - ex)
   ```jsx
     <div className='light1'>
-      <Button 
+      <Button
         sx={{
-          backgroundColor: (theme) => 
+          backgroundColor: (theme) =>
             theme.palette.lunit_token.component.btn_primary_bg // light1 theme color
         }}
-      /> 
-    </div>  
+      />
+    </div>
     <div className='dark2'>
-      <Button 
+      <Button
         sx={{
-          backgroundColor: (theme) => 
+          backgroundColor: (theme) =>
             theme.palette.lunit_token.component.btn_primary_bg // dark2 theme color
         }}
-      /> 
-    </div>  
-  ```  
+      />
+    </div>
+  ```
 - If no theme is set, Color Tokens default to the Dark1 theme.  
-  _테마를 설정하지 않으면, Color Token은 기본적으로 Dark1 테마가 적용된다._  
+  _테마를 설정하지 않으면, Color Token은 기본적으로 Dark1 테마가 적용된다._
 - When themes are nested, Color Tokens follow the theme set at the closest level.  
-  _테마 설정이 중첩되었을 때 Color Token은 가장 가까운 위치에서 설정한 테마를 따른다._  
-  - ex)        
+  _테마 설정이 중첩되었을 때 Color Token은 가장 가까운 위치에서 설정한 테마를 따른다._
+  - ex)
   ```jsx
-    <div className='light1'>
-      <div className='dark1'>
-        <Button 
-          sx={{
-            backgroundColor: (theme) => 
-              theme.palette.lunit_token.component.btn_primary_bg
-              // Since the closest theme set is dark1, 
-              // the color of btn_primary_bg here will be applied as the dark1 theme color.
-              // 가장 가까운 곳에서 설정된 테마가 dark1이기 때문에, 이 곳의 btn_primary_bg 색상은 dark1 테마 색상이 적용됨
-          }}
-        /> 
-      </div>
-    </div>  
-  ```  
-
-
+  <div className="light1">
+    <div className="dark1">
+      <Button
+        sx={{
+          backgroundColor: (theme) => theme.palette.lunit_token.component.btn_primary_bg,
+          // Since the closest theme set is dark1,
+          // the color of btn_primary_bg here will be applied as the dark1 theme color.
+          // 가장 가까운 곳에서 설정된 테마가 dark1이기 때문에, 이 곳의 btn_primary_bg 색상은 dark1 테마 색상이 적용됨
+        }}
+      />
+    </div>
+  </div>
+  ```
 
 ## Usage
+
 The components in the Lunit design system are already developed using Color Tokens. If no custom styling is needed, simply set the theme to be used in the component.
 Color Tokens are implemented based on the MUI theme, so the usage is similar to utilizing the MUI theme.  
 _루닛 디자인 시스템의 컴포넌트는 이미 Color Token을 이용해 개발되어 있다. 따로 스타일 커스텀이 필요없다면 컴포넌트에서 사용할 테마만 설정하면 된다._  
-_Color Token은 MUI theme 기반으로 구현되어, 사용법도 MUI theme를 이용하는 방식과 비슷하다._  
+_Color Token은 MUI theme 기반으로 구현되어, 사용법도 MUI theme를 이용하는 방식과 비슷하다._
 
 ### With Styled Components
 
 <Canvas of={TokenInComponentStories.InComponentWithStyled} sourceState="none" />
 
 ```jsx
-  const StyledTextField = styled(TextField)(({ theme }) => ({
-    "& .MuiInputBase-root": {
-      backgroundColor: theme.palette.lunit_token.component.textfield_bg,
-      color: theme.palette.lunit_token.core.text_normal,
-      "& .MuiInputBase-input": {
-        padding: "8px 16px",
-      },
-      "&.Mui-focused fieldset": {
-        borderColor: theme.palette.lunit_token.core.focused,
-      },
+const StyledTextField = styled(TextField)(({ theme }) => ({
+  '& .MuiInputBase-root': {
+    backgroundColor: theme.palette.lunit_token.component.textfield_bg,
+    color: theme.palette.lunit_token.core.text_normal,
+    '& .MuiInputBase-input': {
+      padding: '8px 16px',
     },
-  }));
+    '&.Mui-focused fieldset': {
+      borderColor: theme.palette.lunit_token.core.status_focused,
+    },
+  },
+}));
 
 const InComponentWithStyled = () => {
   return (
     <>
-      <div className='light1'>
+      <div className="light1">
         <StyledTextField placeholder="Styled Text Field" />
       </div>
       <div className="dark1">
@@ -144,33 +144,29 @@ const InComponentWithStyled = () => {
 const InComponentWithSx = () => {
   return (
     <>
-      <div className='light1'>
+      <div className="light1">
         <TextField
           placeholder="Text Field with SX"
           sx={{
-            "& .MuiInputBase-root": {
-              backgroundColor: (theme) =>
-                theme.palette.lunit_token.component.textfield_bg,
+            '& .MuiInputBase-root': {
+              backgroundColor: (theme) => theme.palette.lunit_token.component.textfield_bg,
               color: (theme) => theme.palette.lunit_token.core.text_normal,
-              "& .MuiInputBase-input": {
-                padding: "8px 16px",
+              '& .MuiInputBase-input': {
+                padding: '8px 16px',
               },
-              "&.Mui-focused fieldset": {
-                borderColor: (theme) => theme.palette.lunit_token.core.focused,
+              '&.Mui-focused fieldset': {
+                borderColor: (theme) => theme.palette.lunit_token.core.status_focused,
               },
             },
           }}
         />
-        <Box width={150} height={50} bgcolor="#DFDFE2" mt={3}>
+        <Box sx={{ width: 150, height: 50, bgcolor: '#DFDFE2', mt: 3 }}>
           Hello!
           <Box
             sx={{
-              backgroundColor: (theme) =>
-                theme.palette.lunit_token.component.alert_info_bg,
-              color: (theme) =>
-                theme.palette.lunit_token.component.alert_info_border,
-              boxShadow: (theme) =>
-                `20px -10px 5px ${theme.palette.lunit_token.core.shadow_01}`,
+              backgroundColor: (theme) => theme.palette.lunit_token.component.alert_info_bg,
+              color: (theme) => theme.palette.lunit_token.component.alert_info_border,
+              boxShadow: (theme) => `20px -10px 5px ${theme.palette.lunit_token.core.shadow_01}`,
               width: 300,
               height: 80,
             }}
@@ -194,7 +190,7 @@ const InComponentWithInlineStyle = () => {
 
   return (
     <>
-      <div className='light1'>
+      <div className="light1">
         <TextField
           placeholder="Inline Styled Text Field"
           style={{
@@ -202,7 +198,7 @@ const InComponentWithInlineStyle = () => {
           }}
         />
       </div>
-      <div className='dark1'>
+      <div className="dark1">
         <TextField
           placeholder="Inline Styled Text Field"
           style={{

package/src/stories/foundation/colors/Mui.stories.tsx

@@ -1,11 +1,11 @@
-import React from "react";
-import { StoryFn, Meta } from "@storybook/react-webpack5";
-import Pagination from "@mui/material/Pagination";
-import DeleteIcon from "@mui/icons-material/Delete";
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react-webpack5';
+import Pagination from '@mui/material/Pagination';
+import DeleteIcon from '@mui/icons-material/Delete';
 
 export default {
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  title: "Foundation/Colors/Mui",
+  title: 'Foundation/Colors/Mui',
   component: Pagination,
 } as Meta<typeof Pagination>;
 
@@ -13,6 +13,4 @@ export const MuiPagenation: StoryFn<typeof Pagination> = () => (
   <Pagination count={10} color="primary" />
 );
 
-export const MuiIcon: StoryFn<typeof DeleteIcon> = () => (
-  <DeleteIcon color="primary" />
-);
+export const MuiIcon: StoryFn<typeof DeleteIcon> = () => <DeleteIcon color="primary" />;