@lunit/design-system 1.0.0-b.4 → 2.0.0

package/src/stories/components/ToggleButton/WithIcon.stories.tsx

@@ -5,6 +5,7 @@ import {
   TableRow,
   TableBody,
   TableCell,
+  Box,
 } from "@mui/material";
 import { action } from "@storybook/addon-actions";
 import Bell from "@lunit/design-system-icons/Bell";
@@ -217,6 +218,76 @@ export const IconStory = {
   },
 };
 
+const IconDocsTemplate: StoryFn<typeof ToggleButton> = (arg) => {
+  const [values, setValues] = useState({
+    contained: false,
+    outlined: false,
+    ghost: false,
+  });
+
+  const handleChange = (value: keyof typeof values) => {
+    setValues({
+      ...values,
+      [value]: !values[value],
+    });
+  };
+
+  return (
+    <Box sx={{ "& button": { marginRight: 2 } }}>
+      <ToggleButton
+        {...arg}
+        icon={<Bell />}
+        value="contained"
+        onChange={() => handleChange("contained")}
+        selected={values.contained}
+      >
+        Contained
+      </ToggleButton>
+      <ToggleButton
+        {...arg}
+        icon={<Bell />}
+        kind="outlined"
+        color="primary"
+        value="outlined"
+        onChange={() => handleChange("outlined")}
+        selected={values.outlined}
+      >
+        Outlined
+      </ToggleButton>
+      <ToggleButton
+        {...arg}
+        icon={<Bell />}
+        kind="ghost"
+        value="ghost"
+        onChange={() => handleChange("ghost")}
+        selected={values.ghost}
+      >
+        Ghost
+      </ToggleButton>
+    </Box>
+  );
+};
+
+export const IconDocs = {
+  render: IconDocsTemplate,
+  name: "Icon Docs",
+  args: {
+    children: "Text",
+  },
+  argTypes: {
+    children: {
+      type: "string",
+      defaultValue: "text",
+    },
+  },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+    controls: {
+      include: ["color", "size", "disabled", "children"],
+    },
+  },
+};
+
 const IconOnlyTemplate: StoryFn<typeof ToggleButton> = (arg) => {
   const [values, setValues] = useState({
     primary: true,
@@ -290,3 +361,70 @@ export const WithIconOnlyStory = {
     },
   },
 };
+
+const IconOnlyDocsTemplate: StoryFn<typeof ToggleButton> = (arg) => {
+  const { children, ...restArg } = arg;
+
+  const [values, setValues] = useState({
+    contained: false,
+    outlined: false,
+    ghost: false,
+  });
+
+  const handleChange = (value: keyof typeof values) => {
+    setValues({
+      ...values,
+      [value]: !values[value],
+    });
+  };
+
+  return (
+    <Box sx={{ "& button": { marginRight: 2 } }}>
+      <ToggleButton
+        {...restArg}
+        icon={<Bell />}
+        value="contained"
+        onChange={() => handleChange("contained")}
+        selected={values.contained}
+      />
+      <ToggleButton
+        {...restArg}
+        icon={<Bell />}
+        kind="outlined"
+        color="primary"
+        value="outlined"
+        onChange={() => handleChange("outlined")}
+        selected={values.outlined}
+      />
+
+      <ToggleButton
+        {...restArg}
+        icon={<Bell />}
+        kind="ghost"
+        value="ghost"
+        onChange={() => handleChange("ghost")}
+        selected={values.ghost}
+      />
+    </Box>
+  );
+};
+
+export const IconOnlyDocs = {
+  render: IconOnlyDocsTemplate,
+  name: "Icon Only Docs",
+  args: {
+    children: "Text",
+  },
+  argTypes: {
+    children: {
+      type: "string",
+      defaultValue: "text",
+    },
+  },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+    controls: {
+      include: ["color", "size", "disabled", "children"],
+    },
+  },
+};

package/src/stories/foundation/Typography/Typography.mdx

@@ -1,5 +1,5 @@
 import { Meta, Canvas, Story } from "@storybook/blocks";
-import * as TypographyStories from "./TypographyExamples.stories";
+import * as TypographyStories from "./Typography.stories";
 
 import Typography from "@/components/Typography";
 
@@ -7,70 +7,55 @@ import { variants } from "./const";
 
 import TypographyGroup from "./TypographyGroup";
 
-<Meta of={TypographyStories} />
+<Meta name="Typography Docs" of={TypographyStories} />
 
 export const Template = (args) => <Typography {...args} />;
 
-## Types
+# Typography
 
-The typography component comes with variants below:
+Use typography to present your design and content as clearly and efficiently as possible.
 
-export const AllVariants = () => (
-  <>
-    <TypographyGroup
-      heading="Headline"
-      dummy="Headline 123456789"
-      variants={variants.headline}
-    />
-    <TypographyGroup
-      heading="Body"
-      dummy={
-        <>
-          AI will be the new standard of care. 123456789
-          <br />
-          By Lunit. With AI, we aim to make data-driven medicine
-          <br />
-          the new standard of care.
-        </>
-      }
-      variants={variants.body}
-    />
-    <TypographyGroup
-      heading="etc"
-      dummy="NEWS & UPDATE 71456"
-      variants={variants.etc}
-    />
-  </>
-);
-
-<Story of={TypographyStories.AllVariants_} />
 
 ## Usage
 
-### Typography component
+### Basic Typography
+
+```tsx
+import { Typography } from "@lunit/design-system";
+// or
+import Typography from "@lunit/design-system/Typography";
 
-<Canvas>
-  {/* <Story id="foundation-typography--typography-component" /> is deprecated, please migrate it to <Story of={referenceToStory} /> see: https://storybook.js.org/migration-guides/7.0 */}
+<Typography>AI will be the new standard of care. 123456789</Typography>;
+```
+### Variant
+
+The typography component comes with variants below:
 
-  <Story id="foundation-typography--typography-component" />
-</Canvas>
+<Canvas
+  of={TypographyStories.AllVariants}
+  sourceState="none" />
 
 ### With styled utility
 
 In some situations you might not be able to use the Typography component. Hopefully, you might be able to take advantage of the [typography](https://mui.com/material-ui/react-typography/#theme) keys of the theme.
 
-<Canvas>
-  {/* <Story id="foundation-typography--styled" /> is deprecated, please migrate it to <Story of={referenceToStory} /> see: https://storybook.js.org/migration-guides/7.0 */}
+<Canvas of={TypographyStories.Styled} />
 
-  <Story id="foundation-typography--styled" />
-</Canvas>
 
 ### With the sx props
 
 You can use all the variants with [the `sx` props](https://mui.com/system/getting-started/the-sx-prop/#typography).
 
-<Canvas>
-  {/* <Story id="foundation-typography--sx-props" /> is deprecated, please migrate it to <Story of={referenceToStory} /> see: https://storybook.js.org/migration-guides/7.0 */}
+<Canvas of={TypographyStories.SXProps} />
+
+
+## Reference
+
+- [Material-UI Typography](https://mui.com/material-ui/react-typography/)
+- [Material-UI Typography API](https://mui.com/material-ui/api/typography/)
+- [Lunit Design System Typography Figma](https://www.figma.com/design/oh2WsSLBuX30Yp589gyliB/Design-System_1.0.7?node-id=14801-193458&m=dev)
+
+## Support
 
-  <Story id="foundation-typography--sx-props" />
-</Canvas>
+- Github: [Create a new issue](https://github.com/lunit-io/design-system/issues/new)
+- Slack: #tf_design_system

package/src/stories/foundation/Typography/Typography.stories.tsx

@@ -6,7 +6,36 @@ import { styled } from "@mui/material/styles";
 
 import Typography from "@/components/Typography";
 
-import { variantArray } from "./const";
+import { variantArray, variants } from "./const";
+import TypographyGroup from "./TypographyGroup";
+
+export const AllVariants = () => (
+  <>
+    <TypographyGroup
+      heading="Headline"
+      dummy="Headline 123456789"
+      variants={variants.headline}
+    />
+    <TypographyGroup
+      heading="Body"
+      dummy={
+        <>
+          AI will be the new standard of care. 123456789
+          <br />
+          By Lunit. With AI, we aim to make data-driven medicine
+          <br />
+          the new standard of care.
+        </>
+      }
+      variants={variants.body}
+    />
+    <TypographyGroup
+      heading="etc"
+      dummy="NEWS & UPDATE 71456"
+      variants={variants.etc}
+    />
+  </>
+);
 
 export default {
   title: "Foundation/Typography",

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

@@ -0,0 +1,86 @@
+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 BlockBox = styled(Box)(({ theme }) => ({
+  backgroundColor: "#d7d3d3",
+  textAlign: "center",
+  display: "flex",
+  flexDirection: "column",
+  flex: "auto",
+  padding: "10px",
+}));
+
+const ColorSystem = () => {
+  return (
+    <Box pb={10}>
+      <Grid container spacing={2}>
+        <Grid
+          item
+          xs={4}
+          sx={{
+            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>
+          </BlockBox>
+          <Box
+            sx={{
+              width: "20px",
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            <ArrowForwardIcon />
+          </Box>
+        </Grid>
+        <Grid
+          item
+          xs={4}
+          sx={{
+            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>
+          </BlockBox>
+          <Box
+            sx={{
+              width: "20px",
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            <ArrowForwardIcon />
+          </Box>
+        </Grid>
+        <Grid item xs={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>
+          </BlockBox>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default ColorSystem;

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

@@ -0,0 +1,225 @@
+import { Canvas, Meta } from "@storybook/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";
+
+<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 문서만 한국어와 영어를 병기하여 설명합니다._
+
+The Lunit Design System defines a color palette to ensure explicit and consistent color usage.  
+Pre-configured palettes are provided in token form, allowing for easy application within components or pages.  
+_루닛 디자인 시스템은 명시적이고 일관된 색상 사용을 보장하기 위해 색상 팔레트를 정의한다.  
+사전 구성된 팔레트는 토큰 형태로 제공되므로 컴포넌트나 페이지 단에서 쉽게 적용 가능하다._
+
+
+## Structure of Color system
+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 대응한다._  
+- Color Tokens are linked to these values in the Global Palette.  
+  _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)
+
+- **Core Token**: These are color tokens universally used in UI elements, including background and text colors.  
+  _**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 등과 같이 특정 컴포넌트 안에서만 사용하는 컬러 토큰_  
+- It is recommended to use **Color Tokens** instead of color codes or Global Colors.  
+  _색상 코드나 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을 이용해 설정할 수 있다._  
+
+## How to set themes
+- Types of themes: 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)        
+  ```jsx
+    <div className='light1'>
+      <Button 
+        sx={{
+          backgroundColor: (theme) => 
+            theme.palette.lunit_token.component.btn_primary_bg // light1 theme color
+        }}
+      /> 
+    </div>  
+    <div className='dark2'>
+      <Button 
+        sx={{
+          backgroundColor: (theme) => 
+            theme.palette.lunit_token.component.btn_primary_bg // dark2 theme color
+        }}
+      /> 
+    </div>  
+  ```  
+- If no theme is set, Color Tokens default to the Dark1 theme.  
+  _테마를 설정하지 않으면, Color Token은 기본적으로 Dark1 테마가 적용된다._  
+- When themes are nested, Color Tokens follow the theme set at the closest level.  
+  _테마 설정이 중첩되었을 때 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>  
+  ```  
+
+
+
+## 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를 이용하는 방식과 비슷하다._  
+
+### 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 InComponentWithStyled = () => {
+  return (
+    <>
+      <div className='light1'>
+        <StyledTextField placeholder="Styled Text Field" />
+      </div>
+      <div className="dark1">
+        <StyledTextField placeholder="Styled Text Field" />
+      </div>
+    </>
+  );
+};
+```
+
+### With sx prop
+
+<Canvas of={TokenInComponentStories.InComponentWithSx} sourceState="none" />
+
+```jsx
+const InComponentWithSx = () => {
+  return (
+    <>
+      <div className='light1'>
+        <TextField
+          placeholder="Text Field with SX"
+          sx={{
+            "& .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",
+              },
+              "&.Mui-focused fieldset": {
+                borderColor: (theme) => theme.palette.lunit_token.core.focused,
+              },
+            },
+          }}
+        />
+        <Box 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}`,
+              width: 300,
+              height: 80,
+            }}
+          >
+            - with alpha value
+          </Box>
+        </Box>
+      </div>
+    </>
+  );
+};
+```
+
+### With useTheme for inline styling
+
+<Canvas of={TokenInComponentStories.InComponentWithInlineStyle} sourceState="none" />
+
+```jsx
+const InComponentWithInlineStyle = () => {
+  const theme = useTheme();
+
+  return (
+    <>
+      <div className='light1'>
+        <TextField
+          placeholder="Inline Styled Text Field"
+          style={{
+            backgroundColor: theme.palette.lunit_token.component.textfield_bg,
+          }}
+        />
+      </div>
+      <div className='dark1'>
+        <TextField
+          placeholder="Inline Styled Text Field"
+          style={{
+            backgroundColor: theme.palette.lunit_token.component.textfield_bg,
+          }}
+        />
+      </div>
+    </>
+  );
+};
+```
+
+## Reference
+
+- [Lunit Design System Color Figma](https://www.figma.com/file/oh2WsSLBuX30Yp589gyliB/Design-System_1.0.7_Latest?type=design&node-id=14801-186914&mode=design&t=unSsZRlRhL3LrTRm-0)
+
+## Support
+
+- Github: [Create a new issue](https://github.com/lunit-io/design-system/issues/new)
+- Slack: #tf_design_system

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

@@ -85,7 +85,7 @@ const TokenPaletteTable = ({ kind }: TokenPaletteTableProps) => {
           <TableRow>
             <TableCell colSpan={2}> </TableCell>
             <TableCell colSpan={2}>Light</TableCell>
-            <TableCell colSpan={4}>Dark</TableCell>
+            <TableCell colSpan={2}>Dark</TableCell>
           </TableRow>
           <TableRow>
             <TableCell>Token name</TableCell>
@@ -93,8 +93,6 @@ const TokenPaletteTable = ({ kind }: TokenPaletteTableProps) => {
             <TableCell>Light 2</TableCell>
             <TableCell>Dark 1</TableCell>
             <TableCell>Dark 2</TableCell>
-            <TableCell>Dark 3</TableCell>
-            <TableCell>Dark 4</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -116,8 +114,6 @@ const TokenPaletteTable = ({ kind }: TokenPaletteTableProps) => {
               <TokenPaletteCell surface="light2" paletteKey={paletteKey} />
               <TokenPaletteCell surface="dark1" paletteKey={paletteKey} />
               <TokenPaletteCell surface="dark2" paletteKey={paletteKey} />
-              <TokenPaletteCell surface="dark3" paletteKey={paletteKey} />
-              <TokenPaletteCell surface="dark4" paletteKey={paletteKey} />
             </TableRow>
           ))}
         </TableBody>

package/src/components/Modal/Modal.tsx

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

package/src/components/Modal/index.ts

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

package/src/stories/components/Modal/Modal.stories.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { StoryFn, Meta } from "@storybook/react";
-
-import Modal from "@/components/Modal";
-
-export default {
-  title: "Components/Modal",
-  component: Modal,
-} as Meta<typeof Modal>;
-
-const Template: StoryFn<typeof Modal> = () => <Modal />;
-
-export const LunitModal = {
-  render: Template,
-};