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

package/src/foundation/colors/types.ts

@@ -1,81 +1,84 @@
-type CSSPropertyColor = React.CSSProperties["color"];
-
 export interface ColorToken {
   core: {
-    bg_01: CSSPropertyColor;
-    bg_02: CSSPropertyColor;
-    bg_03: CSSPropertyColor;
-    text_primary: CSSPropertyColor;
-    text_normal: CSSPropertyColor;
-    text_medium: CSSPropertyColor;
-    text_light: CSSPropertyColor;
-    text_error: CSSPropertyColor;
-    text_success: CSSPropertyColor;
-    text_warning: CSSPropertyColor;
-    text_info: CSSPropertyColor;
-    link_primary: CSSPropertyColor;
-    link_hover: CSSPropertyColor;
-    link_visited: CSSPropertyColor;
-    icon_error_02: CSSPropertyColor;
-    icon_success_02: CSSPropertyColor;
-    icon_warning_02: CSSPropertyColor;
-    icon_info_02: CSSPropertyColor;
-    hover: CSSPropertyColor;
-    focused: CSSPropertyColor;
-    selected: CSSPropertyColor;
-    shadow_01: CSSPropertyColor;
-    shadow_02: CSSPropertyColor;
-    shadow_03: CSSPropertyColor;
-    shadow_04: CSSPropertyColor;
+    bg_01: string;
+    bg_02: string;
+    bg_03: string;
+    layer_01: string;
+    text_primary: string;
+    text_normal: string;
+    text_medium: string;
+    text_light: string;
+    text_error: string;
+    text_success: string;
+    text_warning: string;
+    text_info: string;
+    link_primary: string;
+    link_hover: string;
+    link_visited: string;
+    icon_error_02: string;
+    icon_success_02: string;
+    icon_warning_02: string;
+    icon_info_02: string;
+    hover: string;
+    focused: string;
+    selected: string;
+    shadow_01: string;
+    shadow_02: string;
+    shadow_03: string;
+    shadow_04: string;
+    border_light: string;
+    border_medium: string;
   };
   component: {
-    btn_primary_bg: CSSPropertyColor;
-    btn_secondary_bg: CSSPropertyColor;
-    btn_error_bg: CSSPropertyColor;
-    btn_primary_border: CSSPropertyColor;
-    btn_secondary_border: CSSPropertyColor;
-    btn_primary_text_1: CSSPropertyColor;
-    btn_primary_text_2: CSSPropertyColor;
-    btn_secondary_text: CSSPropertyColor;
-    btn_error_text: CSSPropertyColor;
-    btn_selected_primary_bg: CSSPropertyColor;
-    btn_selected_primary_text: CSSPropertyColor;
-    btn_selected_secondary_bg: CSSPropertyColor;
-    btn_selected_secondary_text: CSSPropertyColor;
-    selectcontrol_on: CSSPropertyColor;
-    selectcontrol_off: CSSPropertyColor;
-    selectcontrol_handler: CSSPropertyColor;
-    selectcontrol_handler_shadow: CSSPropertyColor;
-    textfield_bg: CSSPropertyColor;
-    textfield_border_error: CSSPropertyColor;
-    dropdown_divider_border: CSSPropertyColor;
-    datatable_border_01: CSSPropertyColor;
-    datatable_border_02: CSSPropertyColor;
-    datatable_zebra: CSSPropertyColor;
-    scrollbars_bg: CSSPropertyColor;
-    scrollbars_hover: CSSPropertyColor;
-    scrollbars_pressed: CSSPropertyColor;
-    modal_overlay: CSSPropertyColor;
-    tooltip_bg: CSSPropertyColor;
-    tooltip_text_normal: CSSPropertyColor;
-    tooltip_text_medium: CSSPropertyColor;
-    alert_error_bg: CSSPropertyColor;
-    alert_error_border: CSSPropertyColor;
-    alert_success_bg: CSSPropertyColor;
-    alert_success_border: CSSPropertyColor;
-    alert_info_bg: CSSPropertyColor;
-    alert_info_border: CSSPropertyColor;
-    alert_warning_bg: CSSPropertyColor;
-    alert_warning_border: CSSPropertyColor;
-    chip_primary_bg: CSSPropertyColor;
-    chip_primary_text: CSSPropertyColor;
-    chip_secondary_bg: CSSPropertyColor;
-    chip_secondary_text: CSSPropertyColor;
-    chip_error_bg: CSSPropertyColor;
-    chip_error_text: CSSPropertyColor;
-    chip_warning_bg: CSSPropertyColor;
-    chip_warning_text: CSSPropertyColor;
-    chip_success_bg: CSSPropertyColor;
-    chip_success_text: CSSPropertyColor;
+    btn_primary_bg: string;
+    btn_secondary_bg: string;
+    btn_error_bg: string;
+    btn_primary_border: string;
+    btn_secondary_border: string;
+    btn_primary_text_1: string;
+    btn_primary_text_2: string;
+    btn_secondary_text: string;
+    btn_error_text: string;
+    btn_selected_primary_bg: string;
+    btn_selected_primary_text: string;
+    btn_selected_secondary_bg: string;
+    btn_selected_secondary_text: string;
+    btn_selected_tertiary_bg: string;
+    btn_selected_tertiary_text: string;
+    selectcontrol_on: string;
+    selectcontrol_off: string;
+    selectcontrol_handler: string;
+    selectcontrol_handler_shadow: string;
+    textfield_bg: string;
+    textfield_border_error: string;
+    dropdown_divider_border: string;
+    datatable_border_01: string;
+    datatable_border_02: string;
+    datatable_zebra: string;
+    scrollbars_bg: string;
+    scrollbars_hover: string;
+    scrollbars_pressed: string;
+    modal_overlay: string;
+    tooltip_bg: string;
+    tooltip_text_normal: string;
+    tooltip_text_medium: string;
+    alert_error_bg: string;
+    alert_error_border: string;
+    alert_success_bg: string;
+    alert_success_border: string;
+    alert_info_bg: string;
+    alert_info_border: string;
+    alert_warning_bg: string;
+    alert_warning_border: string;
+    chip_primary_bg: string;
+    chip_primary_text: string;
+    chip_secondary_bg: string;
+    chip_secondary_text: string;
+    chip_error_bg: string;
+    chip_error_text: string;
+    chip_warning_bg: string;
+    chip_warning_text: string;
+    chip_success_bg: string;
+    chip_success_text: string;
   };
 }

package/src/foundation/index.ts

@@ -9,7 +9,7 @@ import { createElevationCssBaseline, elevationOptions } from "./Elevation";
 
 export const foundationCssBaseline: Components<Theme>["MuiCssBaseline"] = {
   styleOverrides: deepmerge(
-    deepmerge(createTypographyCssBaseline(), createColorCssBaseline()),
+    deepmerge(createColorCssBaseline(), createTypographyCssBaseline()),
     createElevationCssBaseline()
   ),
 };

package/src/index.ts

@@ -5,11 +5,11 @@ export { default as Alert } from "./components/Alert";
 export { default as Button } from "./components/Button";
 export { default as Chip } from "./components/Chip";
 export { default as Checkbox } from "./components/Checkbox";
+export { default as Dialog } from "./components/Dialog";
 export { default as DataTable } from "./components/DataTable";
 export { default as DatePicker } from "./components/DatePicker";
 export { default as Dropdown } from "./components/Dropdown";
 export { default as FormLabel } from "./components/FormLabel";
-export { default as Modal } from "./components/Modal";
 export { default as Radio } from "./components/Radio";
 export { default as RadioGroup } from "./components/RadioGroup";
 export { default as TextField } from "./components/TextField";

package/src/stories/GettingStarted.mdx

@@ -0,0 +1,88 @@
+import {  Meta } from '@storybook/blocks';
+
+<Meta title="Getting Started/Overview" />
+
+# Lunit Design System Library
+
+Lunit Design System Library is a collection of reusable components and styles that are used to build Lunit's products. It is built on top of [Material UI](https://mui.com/material-ui/getting-started/), a popular React UI framework.
+
+## Installation
+
+```bash
+npm install @lunit/design-system
+```
+
+Material UI is peer dependency of Lunit Design System Library. You need to install Material UI first.
+
+```json
+"peerDependencies": {
+  "@mui/material": "^5.0.0",
+  "@types/react": "^17.0.0 || ^18.0.0",
+  "react": "^17.0.0 || ^18.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0"
+}
+```
+
+## Usage
+
+### Theme
+
+This library is based on Material UI's themes feature, so it imports themes and puts them into the provider. We also recommend using the `CssBaseline` component.
+
+```tsx
+import {
+  createTheme,
+  ThemeProvider,
+} from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { themeOptions } from '@lunit/design-system';
+
+const theme = createTheme(themeOptions);
+
+const App = () => {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <YourApp />
+    </ThemeProvider>
+  );
+};
+```
+
+If you want to customize the theme, use the `deepmerge` utility.
+
+[https://mui.com/material-ui/customization/theming/#createtheme-options-args-theme](https://mui.com/material-ui/customization/theming/#createtheme-options-args-theme)
+
+### Fonts
+
+This library uses the `Pretendard` font-family by default. The [Pretendard font](https://github.com/orioncactus/pretendard) does not come with this library, so you will need to provide it yourself via Webfonts. You can change the font by setting the `fontFamily` property in the theme.
+
+```tsx
+const theme = createTheme(
+  deepmerge(themeOptions, {
+    typography: {
+      fontFamily: [
+        'Pretendard Variable',
+        'sans-serif',
+      ]
+    }
+  })
+);
+```
+
+## Foundation
+
+This library provides a set of foundational styles that are used in Lunit's products. Please refer Colors, Typography, and Elevation in the sidebar.
+
+## Components
+
+This library provides a variety of components that are used in Lunit's products. Please refer Components in the sidebar.
+
+## Reference
+
+- [Lunit Design System Figma](https://www.figma.com/file/oh2WsSLBuX30Yp589gyliB/Design-System_1.0.7_Latest?node-id=0%3A1&mode=dev)
+
+## Support
+
+- Github: [Create a new issue](https://github.com/lunit-io/design-system/issues/new)
+- Slack: #tf_design_system

package/src/stories/components/Button/BasicButton.stories.tsx

@@ -1,21 +1,11 @@
 import React from "react";
 import { action } from "@storybook/addon-actions";
-import {
-  Table,
-  TableHead,
-  TableRow,
-  TableBody,
-  TableCell,
-} from "@mui/material";
-import Bell from "@lunit/design-system-icons/Bell";
+import { Box } from "@mui/material";
 
 import Button from "@/components/Button";
 
 import type { StoryObj, StoryFn, Meta } from "@storybook/react";
 
-type SizeValues = "small" | "medium" | "large";
-const sizeList: SizeValues[] = ["small", "medium", "large"];
-
 export default {
   title: "Components/Button",
   component: Button,
@@ -38,6 +28,7 @@ export default {
       },
     },
     children: {
+      description: "The content of the component.",
       type: "string",
     },
     kind: {
@@ -50,10 +41,22 @@ export default {
         defaultValue: { summary: "contained" },
       },
     },
+    variant: {
+      control: {
+        type: "radio",
+      },
+      options: ["contained", "outlined", "text", "ghost"],
+      description: "The variant is alias of kind.",
+      table: {
+        defaultValue: { summary: "contained" },
+      },
+    },
     color: {
       control: {
         type: "radio",
       },
+      description: `The color of the component. It supports both default and custom theme colors,
+        \nwhich can be added as shown in the palette customization guide.`,
       options: ["primary", "secondary", "error"],
       table: {
         defaultValue: { summary: "primary" },
@@ -63,6 +66,7 @@ export default {
       control: {
         type: "boolean",
       },
+      description: "If true, the button will be disabled.",
       table: {
         defaultValue: { summary: "false" },
       },
@@ -71,6 +75,7 @@ export default {
       control: {
         type: "radio",
       },
+      description: "The size of the button.",
       options: ["small", "medium", "large"],
       table: {
         defaultValue: { summary: "small" },
@@ -98,6 +103,7 @@ export default {
         "disabled",
         "size",
         "kind",
+        "variant",
         "color",
         "icon",
       ],
@@ -115,52 +121,85 @@ export const BasicButton: StoryObj<typeof Button> = {
   render: (args) => <Button {...args}>{args.children}</Button>,
 };
 
+const DisabledButtonTemplate: StoryFn<typeof Button> = (args) => {
+  const { children, kind, variant, ...restArgs } = args;
+
+  return (
+    <Box sx={{ display: "flex", gap: 2 }}>
+      <Button {...restArgs} disabled kind="contained">
+        {children}
+      </Button>
+      <Button
+        {...restArgs}
+        disabled
+        color={args.color === "error" ? "primary" : args.color}
+        kind="outlined"
+      >
+        {children}
+      </Button>
+      <Button {...restArgs} disabled kind="ghost">
+        {children}
+      </Button>
+    </Box>
+  );
+};
+
+export const Disabled: StoryObj<typeof Button> = {
+  render: DisabledButtonTemplate,
+  parameters: {
+    controls: {
+      include: ["onClick", "children", "size", "color"],
+    },
+  },
+};
+
 const SizeButtonTemplate: StoryFn<typeof Button> = (args) => {
+  const { children, kind, variant, color, ...restArgs } = args;
+
   return (
-    <Table sx={{ width: 900 }}>
-      <TableHead>
-        <TableRow>
-          <TableCell
-            colSpan={3}
-            sx={{
-              typography: "body1_16_semibold",
-              color: "inherit",
-            }}
-          >
-            Size
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
-            Small
-          </TableCell>
-          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
-            Medium
-          </TableCell>
-          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
-            Large
-          </TableCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        <TableRow>
-          {sizeList.map((size) => (
-            <TableCell key={size} sx={{ "& button": { marginRight: "10px" } }}>
-              <Button {...args} icon={<Bell />} size={size} />
-              <Button {...args} size={size}>
-                {args.children}
-              </Button>
-              <Button {...args} icon={<Bell />} size={size}>
-                {args.children}
-              </Button>
-            </TableCell>
-          ))}
-        </TableRow>
-      </TableBody>
-    </Table>
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 4 }}>
+      <Box>
+        <Button sx={{ mr: 2 }} {...restArgs} variant="contained" size="small">
+          Small
+        </Button>
+        <Button sx={{ mr: 2 }} {...restArgs} variant="contained" size="medium">
+          Medium
+        </Button>
+        <Button {...restArgs} variant="contained" size="large">
+          Large
+        </Button>
+      </Box>
+      <Box>
+        <Button sx={{ mr: 2 }} {...restArgs} variant="outlined" size="small">
+          Small
+        </Button>
+        <Button sx={{ mr: 2 }} {...restArgs} variant="outlined" size="medium">
+          Medium
+        </Button>
+        <Button {...restArgs} variant="outlined" size="large">
+          Large
+        </Button>
+      </Box>
+      <Box>
+        <Button sx={{ mr: 2 }} {...restArgs} variant="text" size="small">
+          Small
+        </Button>
+        <Button sx={{ mr: 2 }} {...restArgs} variant="text" size="medium">
+          Medium
+        </Button>
+        <Button {...restArgs} variant="text" size="large">
+          Large
+        </Button>
+      </Box>
+    </Box>
   );
 };
 
 export const Size = {
   render: SizeButtonTemplate,
+  parameters: {
+    controls: {
+      include: ["onClick", "disabled", "icon"],
+    },
+  },
 };

package/src/stories/components/Button/ButtonDocs.mdx

@@ -0,0 +1,187 @@
+import { Canvas, Stories, Controls, Meta, Story } from "@storybook/blocks";
+import Box from "@mui/material/Box";
+import Bell from "@lunit/design-system-icons/Bell";
+
+import Button from "@/components/Button";
+import * as ButtonStories from "./BasicButton.stories";
+import * as ButtonKindStories from "./Kind.stories";
+import * as ButtonColorStories from "./Color.stories";
+import * as ButtonIconStories from "./IconButton.stories";
+
+<Meta name="Button Docs" of={ButtonStories} />
+
+# Button
+
+Buttons allow users to take actions, and make choices, with a single tap.
+
+## Usage
+
+### Basic Button
+
+```tsx
+import { Button } from "@lunit/design-system";
+// or
+import Button from "@lunit/design-system/Button";
+
+<Button>Button</Button>;
+```
+
+### Demo
+
+<Canvas of={ButtonStories.BasicButton} sourceState="none" />
+
+<Controls />
+
+### Variant (kind)
+
+The Button have three variants: `contained`, `outlined`, and `ghost`.<br />
+In our design system Figma, we use `variant` and `kind` together, They are the **same concept**, and they work the **same way**.<br />
+Using the `variant` or `kind` prop, you can change the variant of the Button.<br />
+Default variant(kind) is `contained`.
+
+<Canvas
+  of={ButtonKindStories.Kind}
+  meta={ButtonKindStories}
+  sourceState="none"
+/>
+
+```tsx
+<Button variant="contained">Text</Button>
+<Button variant="outlined">Text</Button>
+<Button variant="ghost">Text</Button>
+
+// or (kind is the same as variant)
+
+<Button kind="contained">Text</Button>
+<Button kind="outlined">Text</Button>
+<Button kind="ghost">Text</Button>
+```
+
+### Color
+
+The Button have three colors: `primary`, `secondary` and `error`.<br />
+Using the `color` prop, you can change the color of the Button.<br />
+Outline vairant does not have error color state.<br />
+Default color is `primary`.
+
+<Canvas
+  of={ButtonColorStories.Color}
+  meta={ButtonColorStories}
+  sourceState="none"
+/>
+
+```tsx
+// Contained
+<Button variant="contained" color="primary">Text</Button>
+<Button variant="contained" color="secondary">Text</Button>
+<Button variant="contained" color="error">Text</Button>
+
+// Outlined
+<Button variant="outlined" color="primary">Text</Button>
+<Button variant="outlined" color="secondary">Text</Button>
+
+// Ghost
+<Button variant="ghost" color="primary">Text</Button>
+<Button variant="ghost" color="secondary">Text</Button>
+<Button variant="ghost" color="error">Text</Button>
+```
+
+### Size
+
+The Button have three sizes: `small`, `medium` and `large`.<br />
+Using the `size` prop, you can change the size of the Button.<br />
+Default size is `small`.
+
+<Canvas of={ButtonStories.Size} sourceState="none" />
+
+```tsx
+// Contained
+<Button variant="contained" size="small">Small</Button>
+<Button variant="contained" size="medium">Medium</Button>
+<Button variant="contained" size="large">Large</Button>
+
+// Outlined
+<Button variant="outlined" size="small">Small</Button>
+<Button variant="outlined" size="medium">Medium</Button>
+<Button variant="outlined" size="large">Large</Button>
+
+// Ghost
+<Button variant="ghost" size="small">Small</Button>
+<Button variant="ghost" size="medium">Medium</Button>
+<Button variant="ghost" size="large">Large</Button>
+
+```
+
+### With Icon and Text
+
+If you want to use an icon and text together, you can use the `icon` prop and `children` prop.
+
+<Canvas
+  of={ButtonIconStories.IconWithTextButton}
+  meta={ButtonIconStories}
+  sourceState="none"
+/>
+
+```tsx
+<Button variant="contained" icon={<Bell />}>Contained</Button>
+<Button variant="outlined" icon={<Bell />}>Outlined</Button>
+<Button variant="ghost" icon={<Bell />}>Ghost</Button>
+```
+
+### With Icon only
+
+If you want to use only an icon, you can use the `icon` prop.
+
+<Canvas
+  of={ButtonIconStories.IconOnlyButton}
+  meta={ButtonIconStories}
+  sourceState="none"
+/>
+
+```tsx
+<Button variant="contained" icon={<Bell />} />
+<Button variant="outlined" icon={<Bell />} />
+<Button variant="ghost" icon={<Bell />} />
+```
+
+### Disabled
+
+If you want to disable the button, you can use the `disabled` prop.<br />
+Default disabled is `false`.
+
+<Canvas
+  of={ButtonStories.Disabled}
+  meta={ButtonIconStories}
+  sourceState="none"
+/>
+
+```tsx
+<Button variant="contained" disabled>Text</Button>
+<Button variant="outlined" disabled>Text</Button>
+<Button variant="ghost" disabled>Text</Button>
+```
+
+### OnClick
+
+If you want to add an event to the button, you can use the `onClick` prop.
+
+<Canvas
+  of={ButtonKindStories.Kind}
+  meta={ButtonKindStories}
+  sourceState="none"
+/>
+
+```tsx
+<Button onClick={() => console.log("onClick")}>Text</Button>
+```
+
+## Reference
+
+- [Material-UI Button](https://mui.com/material-ui/react-button/)
+- [Material-UI Button API](https://mui.com/api/button/)
+- [Lunit Design System Button Figma](https://www.figma.com/file/BSdRUpEPp7XiJ9YnEqpf6F/1.0.0_Components?type=design&node-id=284-3&mode=design&t=dM6Vnv02YvTzQ8vH-0)
+
+## Support
+
+- Github: [Create a new issue](https://github.com/lunit-io/design-system/issues/new)
+- Slack: #tf_design_system