@lunit/design-system 2.2.0 → 2.2.3

package/src/stories/foundation/colors/Token.inComponent.stories.tsx

@@ -1,21 +1,51 @@
-import React, { ReactNode } from "react";
-import { Meta } from "@storybook/react-webpack5";
-import { Box, styled, TextField, Typography, useTheme } from "@mui/material";
+import React, { ReactNode } from 'react';
+import { Meta } from '@storybook/react-webpack5';
+import { Box, styled, TextField, Typography, useTheme } from '@mui/material';
 
-export const InComponentWithStyled = () => {
-  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,
-      },
+interface BaseBoxProps {
+  theme: 'light' | 'dark';
+  children: ReactNode;
+}
+
+const BaseBox = ({ theme, children }: BaseBoxProps) => {
+  return (
+    <Box
+      className={theme === 'light' ? 'light1' : 'dark1'}
+      sx={{
+        width: 500,
+        height: 200,
+        bgcolor: (sxTheme) => sxTheme.palette.lunit_token.core.bg_01,
+        border: '1px solid',
+        p: 2,
+      }}
+    >
+      <Typography
+        variant="body1_16_semibold"
+        sx={{
+          color: (sxTheme) => sxTheme.palette.lunit_token.core.text_normal,
+        }}
+      >
+        {theme === 'light' ? '= light1 =' : '= dark1 ='}
+      </Typography>
+      {children}
+    </Box>
+  );
+};
+
+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,
     },
-  }));
+  },
+}));
 
+export const InComponentWithStyled = () => {
   return (
     <>
       <BaseBox theme="light">
@@ -29,11 +59,11 @@ export const InComponentWithStyled = () => {
 };
 
 export default {
-  title: "Foundation/Colors/ColorToken",
+  title: 'Foundation/Colors/ColorToken',
   component: InComponentWithStyled,
   decorators: [
     (Story) => (
-      <div style={{ display: "flex", flexDirection: "column", width: "100%" }}>
+      <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
         <Story />
       </div>
     ),
@@ -47,29 +77,32 @@ export const InComponentWithSx = () => {
         <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,
             }}
@@ -82,29 +115,32 @@ export const InComponentWithSx = () => {
         <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,
             }}
@@ -141,29 +177,3 @@ export const InComponentWithInlineStyle = () => {
     </>
   );
 };
-
-interface BaseBoxProps {
-  theme: "light" | "dark";
-  children: ReactNode;
-}
-
-const BaseBox = ({ theme, children }: BaseBoxProps) => {
-  return (
-    <Box
-      className={theme === "light" ? "light1" : "dark1"}
-      width={500}
-      height={200}
-      bgcolor={(sxTheme) => sxTheme.palette.lunit_token.core.bg_01}
-      border="1px solid"
-      p={2}
-    >
-      <Typography
-        variant="body1_16_semibold"
-        color={(sxTheme) => sxTheme.palette.lunit_token.core.text_normal}
-      >
-        {theme === "light" ? "= light1 =" : "= dark1 ="}
-      </Typography>
-      {children}
-    </Box>
-  );
-};

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

@@ -1,8 +1,8 @@
-import { Meta } from "@storybook/react-webpack5";
-import TokenPaletteTable from "./TokenPaletteTable";
+import { Meta } from '@storybook/react-webpack5';
+import TokenPaletteTable from './TokenPaletteTable';
 
 export default {
-  title: "Foundation/Colors",
+  title: 'Foundation/Colors',
   component: TokenPaletteTable,
   parameters: {
     controls: {
@@ -13,16 +13,16 @@ export default {
 
 export const CoreTokens = {
   args: {
-    kind: "core",
+    kind: 'core',
   },
 
-  name: "Palette: Core Tokens",
+  name: 'Palette: Core Tokens',
 };
 
 export const ComponentTokens = {
   args: {
-    kind: "component",
+    kind: 'component',
   },
 
-  name: "Palette: Component Tokens",
+  name: 'Palette: Component Tokens',
 };

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 import {
   Box,
   Table,
@@ -9,13 +9,13 @@ import {
   TableCell,
   useTheme,
   SxProps,
-} from "@mui/material";
-import { StyledTypography } from "./styled";
-import { tokenCoreColor } from "@/foundation/colors/token/core";
-import { tokenComponentColor } from "@/foundation/colors/token/component";
+} from '@mui/material';
+import { StyledTypography } from './styled';
+import { tokenCoreColor } from '@/foundation/colors/token/core';
+import { tokenComponentColor } from '@/foundation/colors/token/component';
 
-import type { ColorToken } from "@/foundation/colors/types";
-import type { ColorTokenValueBySurface } from "@/foundation/colors/token/types";
+import type { ColorToken } from '@/foundation/colors/types';
+import type { ColorTokenValueBySurface } from '@/foundation/colors/token/types';
 
 interface TokenPaletteTableProps {
   kind: keyof ColorToken;
@@ -25,9 +25,7 @@ const TokenPaletteTable = ({ kind }: TokenPaletteTableProps) => {
   const theme = useTheme();
 
   const colorTokenMap = Object.entries(
-    kind === "core"
-      ? theme.palette.lunit_token.core
-      : theme.palette.lunit_token.component
+    kind === 'core' ? theme.palette.lunit_token.core : theme.palette.lunit_token.component,
   );
 
   const TokenPaletteCell = (props: {
@@ -37,23 +35,17 @@ const TokenPaletteTable = ({ kind }: TokenPaletteTableProps) => {
   }) => {
     const { surface, paletteKey, sx } = props;
 
-    const tokenComponentColorFlatten = Object.values(
-      tokenComponentColor
-    ).reduce((acc, cur) => {
+    const tokenComponentColorFlatten = Object.values(tokenComponentColor).reduce((acc, cur) => {
       return { ...acc, ...cur };
     }, {});
 
     const boxColorByToken =
-      kind === "core"
-        ? theme.palette.lunit_token.core[paletteKey as keyof ColorToken["core"]]
-        : theme.palette.lunit_token.component[
-            paletteKey as keyof ColorToken["component"]
-          ];
+      kind === 'core'
+        ? theme.palette.lunit_token.core[paletteKey as keyof ColorToken['core']]
+        : theme.palette.lunit_token.component[paletteKey as keyof ColorToken['component']];
 
     const globalColorByToken =
-      kind === "core"
-        ? tokenCoreColor[paletteKey]
-        : tokenComponentColorFlatten[paletteKey];
+      kind === 'core' ? tokenCoreColor[paletteKey] : tokenComponentColorFlatten[paletteKey];
 
     return (
       <TableCell
@@ -66,28 +58,18 @@ const TokenPaletteTable = ({ kind }: TokenPaletteTableProps) => {
         <Box
           sx={{
             background: boxColorByToken,
-            borderTop: "1px solid",
-            borderBottom: "1px solid",
-            borderColor: "rgba(0, 0, 0, 0.12)",
-            height: "12px",
+            borderTop: '1px solid',
+            borderBottom: '1px solid',
+            borderColor: 'rgba(0, 0, 0, 0.12)',
+            height: '12px',
             ...sx,
           }}
-        ></Box>
+        />
         <StyledTypography>{globalColorByToken[surface]}</StyledTypography>
       </TableCell>
     );
   };
 
-  const deprecatedTokenList = [
-    "btn_secondary_border",
-    "btn_selected_secondary_bg",
-    "datatable_border_01",
-    "datatable_border_02",
-    "hover",
-    "focused",
-    "selected",
-  ];
-
   return (
     <TableContainer>
       <Table stickyHeader>
@@ -106,27 +88,19 @@ const TokenPaletteTable = ({ kind }: TokenPaletteTableProps) => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {colorTokenMap.map(([paletteKey, _colorVariable]) => (
+          {colorTokenMap.map(([paletteKey]) => (
             <TableRow key={paletteKey}>
-              <TableCell sx={{ height: "72px" }}>
+              <TableCell sx={{ height: '72px' }}>
                 <StyledTypography>
-                  {kind}.{paletteKey}{" "}
-                  {deprecatedTokenList.includes(paletteKey) && (
-                    <Box
-                      component="span"
-                      sx={{ color: "red", fontWeight: "bold" }}
-                    >
-                      (Deprecated)
-                    </Box>
-                  )}
+                  {kind}.{paletteKey}
                 </StyledTypography>
               </TableCell>
               <TokenPaletteCell
                 surface="light1"
                 paletteKey={paletteKey}
                 sx={{
-                  borderLeft: "1px solid",
-                  borderLeftColor: "rgba(0, 0, 0, 0.12)",
+                  borderLeft: '1px solid',
+                  borderLeftColor: 'rgba(0, 0, 0, 0.12)',
                 }}
               />
               <TokenPaletteCell surface="light2" paletteKey={paletteKey} />

package/src/stories/foundation/colors/styled.ts

@@ -1,39 +1,39 @@
-import { Box, styled, Typography } from "@mui/material";
+import { styled, Typography } from '@mui/material';
 
-export const Container = styled(Box)({
-  display: "flex",
-  flexDirection: "column",
-  width: "100%",
+export const Container = styled('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
 });
 
-export const PaletteContainer = styled(Box)({
-  display: "flex",
-  width: "100%",
-  flexWrap: "wrap",
+export const PaletteContainer = styled('div')({
+  display: 'flex',
+  width: '100%',
+  flexWrap: 'wrap',
 });
 
-export const ColorContainer = styled(Box)({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  width: "84px",
-  marginRight: "20px",
-  marginBottom: "20px",
+export const ColorContainer = styled('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  width: '84px',
+  marginRight: '20px',
+  marginBottom: '20px',
 });
 
-export const Color = styled(Box)({
-  width: "84px",
-  height: "84px",
-  borderRadius: "16px",
-  marginBottom: "4px",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  border: "1px solid rgba(0, 0, 0, 0.03)",
+export const Color = styled('div')({
+  width: '84px',
+  height: '84px',
+  borderRadius: '16px',
+  marginBottom: '4px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  border: '1px solid rgba(0, 0, 0, 0.03)',
 });
 
 export const StyledTypography = styled(Typography)(({ theme }) => ({
   color: theme.palette.lunit_token.core.text_normal,
   marginLeft: 8,
-  fontSize: "12px",
+  fontSize: '12px',
 }));

package/src/theme.ts

@@ -1,13 +1,13 @@
-import { deepmerge } from "@mui/utils";
-import { createTheme, ThemeOptions } from "@mui/material";
+import { deepmerge } from '@mui/utils';
+import { createTheme, ThemeOptions } from '@mui/material';
 import {
   foundationCssBaseline,
   palette,
   typography,
   typographyDefaultProps,
   spacing,
-} from "./foundation";
-import { componentsCssBaseline } from "./components";
+} from './foundation';
+import { componentsCssBaseline } from './components';
 
 export const themeOptions: ThemeOptions = {
   typography,
@@ -20,14 +20,14 @@ export const themeOptions: ThemeOptions = {
         // css-in-js이기 때문에 MuiPaper-root class에만 추가해도
         // Paper 컴포넌트를 쓰는 모든 스타일에서 명시도 역전이 발생하지 않음
         root: {
-          boxShadow: "var(--elevation-shadow)",
+          boxShadow: 'var(--elevation-shadow)',
         },
       },
     },
     MuiTooltip: {
       styleOverrides: {
         tooltip: {
-          boxShadow: "var(--elevation-shadow)",
+          boxShadow: 'var(--elevation-shadow)',
         },
       },
     },

package/src/types.d.ts

@@ -1,4 +1,4 @@
-declare module "*.mdx" {
+declare module '*.mdx' {
   const docs: any; // Add better type definitions here if desired.
   export default docs;
 }

package/tsconfig.build.json

@@ -12,9 +12,5 @@
     }
   },
   "include": ["src/**/*"],
-  "exclude": [
-    "src/stories/**",
-    "src/**/__tests__/**/*.ts",
-    "src/**/__tests__/**/*.tsx"
-  ]
+  "exclude": ["src/stories/**", "src/**/__tests__/**/*.ts", "src/**/__tests__/**/*.tsx"]
 }