@lunit/design-system 1.0.0-a.1 → 1.0.0-a.3

package/src/foundation/colors/token/core.ts

@@ -0,0 +1,211 @@
+import { ColorTokenValueBySurface } from "./types";
+
+export interface TokenCoreColorValue {
+  [token: string]: ColorTokenValueBySurface;
+}
+
+export const tokenCoreColor: TokenCoreColorValue = {
+  bg_01: {
+    light1: "--grey_0",
+    light2: "--grey_10",
+    dark1: "--grey_90",
+    dark2: "--grey_85",
+    dark3: "--grey_80",
+    dark4: "--grey_70",
+  },
+  bg_02: {
+    light1: "--grey_0",
+    light2: "--grey_0",
+    dark1: "--grey_70",
+    dark2: "--grey_70",
+    dark3: "--grey_70",
+    dark4: "--grey_70",
+  },
+  bg_03: {
+    light1: "--grey_0",
+    light2: "--grey_0",
+    dark1: "--grey_85",
+    dark2: "--grey_85",
+    dark3: "--grey_85",
+    dark4: "--grey_85",
+  },
+  text_primary: {
+    light1: "--lunit_teal_50",
+    light2: "--lunit_teal_50",
+    dark1: "--lunit_teal_40",
+    dark2: "--lunit_teal_40",
+    dark3: "--lunit_teal_40",
+    dark4: "--lunit_teal_40",
+  },
+  text_normal: {
+    light1: "--grey_95",
+    light2: "--grey_95",
+    dark1: "--grey_5",
+    dark2: "--grey_5",
+    dark3: "--grey_5",
+    dark4: "--grey_5",
+  },
+  text_medium: {
+    light1: "--grey_60",
+    light2: "--grey_60",
+    dark1: "--grey_40",
+    dark2: "--grey_40",
+    dark3: "--grey_40",
+    dark4: "--grey_30",
+  },
+  text_light: {
+    light1: "--grey_40",
+    light2: "--grey_40",
+    dark1: "--grey_50",
+    dark2: "--grey_50",
+    dark3: "--grey_50",
+    dark4: "--grey_40",
+  },
+  text_error: {
+    light1: "--red_40",
+    light2: "--red_40",
+    dark1: "--red_40",
+    dark2: "--red_40",
+    dark3: "--red_30",
+    dark4: "--red_30",
+  },
+  text_success: {
+    // TODO: sucess -> success 로 바뀌었으니 코드 내 사용되는 부분 확인해서 업데이트. 개발자들에게도 공지할것.
+    light1: "--green_40",
+    light2: "--green_40",
+    dark1: "--green_40",
+    dark2: "--green_40",
+    dark3: "--green_30",
+    dark4: "--green_30",
+  },
+  text_warning: {
+    light1: "--orange_40",
+    light2: "--orange_40",
+    dark1: "--orange_40",
+    dark2: "--orange_40",
+    dark3: "--orange_30",
+    dark4: "--orange_30",
+  },
+  text_info: {
+    light1: "--blue_40",
+    light2: "--blue_40",
+    dark1: "--blue_40",
+    dark2: "--blue_40",
+    dark3: "--blue_30",
+    dark4: "--blue_30",
+  },
+  link_primary: {
+    light1: "--blue_40",
+    light2: "--blue_40",
+    dark1: "--blue_40",
+    dark2: "--blue_40",
+    dark3: "--blue_30",
+    dark4: "--blue_30",
+  },
+  link_hover: {
+    light1: "--blue_50",
+    light2: "--blue_50",
+    dark1: "--blue_50",
+    dark2: "--blue_50",
+    dark3: "--blue_40",
+    dark4: "--blue_40",
+  },
+  link_visited: {
+    light1: "--purple_50",
+    light2: "--purple_50",
+    dark1: "--purple_50",
+    dark2: "--purple_50",
+    dark3: "--purple_40",
+    dark4: "--purple_40",
+  },
+  icon_error_02: {
+    light1: "--red_40",
+    light2: "--red_40",
+    dark1: "--red_30",
+    dark2: "--red_30",
+    dark3: "--red_30",
+    dark4: "--red_30",
+  },
+  icon_success_02: {
+    // TODO: sucess -> success 로 바뀌었으니 코드 내 사용되는 부분 확인해서 업데이트. 개발자들에게도 공지할것.
+    light1: "--green_40",
+    light2: "--green_40",
+    dark1: "--green_30",
+    dark2: "--green_30",
+    dark3: "--green_30",
+    dark4: "--green_30",
+  },
+  icon_warning_02: {
+    light1: "--orange_40",
+    light2: "--orange_40",
+    dark1: "--orange_30",
+    dark2: "--orange_30",
+    dark3: "--orange_30",
+    dark4: "--orange_30",
+  },
+  icon_info_02: {
+    light1: "--blue_40",
+    light2: "--blue_40",
+    dark1: "--blue_30",
+    dark2: "--blue_30",
+    dark3: "--blue_30",
+    dark4: "--blue_30",
+  },
+  hover: {
+    // TODO: 알파값 적용 코드는 일단 하드코딩. 나중에 수정할것
+    light1: "rgba(0, 0, 0, 0.1)", // grey_100 10%
+    light2: "rgba(0, 0, 0, 0.1)", // grey_100 10%
+    dark1: "rgba(0, 0, 0, 0.1)", // grey_100 10%
+    dark2: "rgba(0, 0, 0, 0.1)", // grey_100 10%
+    dark3: "rgba(0, 0, 0, 0.1)", // grey_100 10%
+    dark4: "rgba(0, 0, 0, 0.1)", // grey_100 10%
+  },
+  focused: {
+    light1: "--lunit_teal_40",
+    light2: "--lunit_teal_40",
+    dark1: "--lunit_teal_40",
+    dark2: "--lunit_teal_40",
+    dark3: "--lunit_teal_40",
+    dark4: "--lunit_teal_40",
+  },
+  selected: {
+    light1: "--lunit_teal_10",
+    light2: "--lunit_teal_10",
+    dark1: "--lunit_teal_80",
+    dark2: "--lunit_teal_80",
+    dark3: "--lunit_teal_80",
+    dark4: "--lunit_teal_80",
+  },
+  shadow_01: {
+    light1: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
+    light2: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
+    dark4: "rgba(0, 0, 0, 0.32)", // "--grey_100 32%",
+    dark3: "rgba(0, 0, 0, 0.32)", // "--grey_100 32%",
+    dark2: "rgba(0, 0, 0, 0.32)", // "--grey_100 32%",
+    dark1: "rgba(0, 0, 0, 0.32)", // "--grey_100 32%",
+  },
+  shadow_02: {
+    light1: "rgba(0, 0, 0, 0.18)", // "--grey_100 18%",
+    light2: "rgba(0, 0, 0, 0.18)", // "--grey_100 18%",
+    dark4: "rgba(0, 0, 0, 0.4)", // "--grey_100 40%",
+    dark3: "rgba(0, 0, 0, 0.4)", // "--grey_100 40%",
+    dark2: "rgba(0, 0, 0, 0.4)", // "--grey_100 40%",
+    dark1: "rgba(0, 0, 0, 0.4)", // "--grey_100 40%",
+  },
+  shadow_03: {
+    light1: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
+    light2: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
+    dark4: "rgba(0, 0, 0, 0.36)", // "--grey_100 36%",
+    dark3: "rgba(0, 0, 0, 0.36)", // "--grey_100 36%",
+    dark2: "rgba(0, 0, 0, 0.36)", // "--grey_100 36%",
+    dark1: "rgba(0, 0, 0, 0.36)", // "--grey_100 36%",
+  },
+  shadow_04: {
+    light1: "rgba(0, 0, 0, 0.18)", // "--grey_100 18%",
+    light2: "rgba(0, 0, 0, 0.18)", // "--grey_100 18%",
+    dark4: "rgba(0, 0, 0, 0.48)", // "--grey_100 48%",
+    dark3: "rgba(0, 0, 0, 0.48)", // "--grey_100 48%",
+    dark2: "rgba(0, 0, 0, 0.48)", // "--grey_100 48%",
+    dark1: "rgba(0, 0, 0, 0.48)", // "--grey_100 48%",
+  },
+};

package/src/foundation/colors/token/index.ts

@@ -0,0 +1,2 @@
+export * from "./component";
+export * from "./core";

package/src/foundation/colors/token/types.ts

@@ -0,0 +1,8 @@
+export interface ColorTokenValueBySurface {
+  light1: string;
+  light2: string;
+  dark1: string;
+  dark2: string;
+  dark3: string;
+  dark4: string;
+}

package/src/foundation/colors/types.ts

@@ -0,0 +1,83 @@
+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;
+  };
+  component: {
+    btn_contained_primary_bg: CSSPropertyColor;
+    btn_contained_primary_text: CSSPropertyColor;
+    btn_contained_secondary_bg: CSSPropertyColor;
+    btn_contained_secondary_text: CSSPropertyColor;
+    btn_contained_error_bg: CSSPropertyColor;
+    btn_contained_error_text: CSSPropertyColor;
+    btn_outlined_primary_border: CSSPropertyColor;
+    btn_outlined_primary_text: CSSPropertyColor;
+    btn_ghost_primary_text: CSSPropertyColor;
+    btn_ghost_secondary_text: CSSPropertyColor;
+    btn_ghost_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;
+  };
+}

package/src/foundation/index.ts

@@ -0,0 +1,25 @@
+import { Components, Theme } from "@mui/material";
+import { deepmerge } from "@mui/utils";
+import paletteOptions, { createColorCssBaseline } from "./colors";
+import typographyOptions, {
+  createTypographyCssBaseline,
+  typographyDefaultProps,
+} from "./Typography";
+import { createElevationCssBaseline, elevationOptions } from "./Elevation";
+
+export const foundationCssBaseline: Components<Theme>["MuiCssBaseline"] = {
+  styleOverrides: deepmerge(
+    deepmerge(createTypographyCssBaseline(), createColorCssBaseline()),
+    createElevationCssBaseline()
+  ),
+};
+
+export const typography = typographyOptions;
+
+export { typographyDefaultProps };
+
+export const palette = paletteOptions;
+
+export const elevation = elevationOptions;
+
+export { spacing } from "./spacing";

package/src/foundation/spacing.ts

@@ -0,0 +1,3 @@
+import { SpacingOptions } from "@mui/system";
+
+export const spacing: SpacingOptions = 4;

package/src/index.ts

@@ -0,0 +1,18 @@
+export { default as theme } from "./theme";
+export { base as baseColors } from "./foundation/colors";
+
+export { default as Alert } from "./components/Alert";
+export { default as Button } from "./components/Button";
+export { default as Chip } from "./components/Chip";
+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";
+export { default as Toggle } from "./components/Toggle";
+export { default as ToggleButton } from "./components/ToggleButton";
+export { default as ToggleButtonGroup } from "./components/ToggleButtonGroup";
+export { default as Tooltip } from "./components/Tooltip";

package/src/stories/components/Alert/Alert.stories.tsx

@@ -0,0 +1,157 @@
+import React from "react";
+import { Box, Typography } from "@mui/material";
+import { StoryFn, Meta } from "@storybook/react";
+
+import Alert from "@/components/Alert";
+import Button from "@/components/Button";
+import theme from "@/theme";
+import { action } from "@storybook/addon-actions";
+
+export default {
+  title: "Components/Alert",
+  component: Alert,
+  argTypes: {
+    title: {
+      control: "text",
+      description: "Used to represent the title of the alert.",
+    },
+    severity: {
+      control: "radio",
+      table: {
+        defaultValue: { summary: "success" },
+      },
+      options: ["success", "info", "warning", "error", undefined],
+      description: `\`success\`, \`info\`, \`warning\`, \`error\`, \`undefined\``,
+    },
+    onClose: {
+      control: "function",
+      description: `Callback fired when the component requests to be closed.
+        When provided, a close icon button is displayed that triggers the callback when clicked.`,
+    },
+  },
+  parameters: {
+    controls: {
+      include: ["title", "severity", "onClose"],
+    },
+    docs: {
+      description: {
+        component: `An alert displays a short, important message in a way that attracts the
+        user's attention without interrupting the user's task.
+        see [Material-UI Alert](https://mui.com/components/alert/)`,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          padding: "3em",
+          gap: "1em",
+        }}
+      >
+        {Story()}
+      </Box>
+    ),
+  ],
+} as Meta<typeof Alert>;
+
+const AlertChildrenContentLong = () => {
+  return (
+    <Typography variant="body2_14_regular">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut{" "}
+      <u style={{ color: theme.palette.token.core.link_primary }}>
+        labore et dolore
+      </u>{" "}
+      magna aliqua. A diam sollicitudin tempor id eu nisl nunc mi. Auctor augue
+      mauris augue neque gravida in fermentum.
+    </Typography>
+  );
+};
+
+const AlertChildrenContentShort = () => {
+  return (
+    <Typography variant="body2_14_regular">
+      Lorem ipsum dolor sit amet, consectetur adipiscin
+    </Typography>
+  );
+};
+
+const AlertBottomAction = () => {
+  return (
+    <Box sx={{ display: "flex", columnGap: "8px" }}>
+      <Button color="primary" kind="contained">
+        Button
+      </Button>
+      <Button color="secondary" kind="ghost">
+        Button
+      </Button>
+    </Box>
+  );
+};
+
+const Template: StoryFn<typeof Alert> = (args) => (
+  <Alert sx={{ width: "620px" }} {...args}>
+    <AlertChildrenContentLong />
+  </Alert>
+);
+
+const Template2: StoryFn<typeof Alert> = (args) => (
+  <>
+    <Alert sx={{ width: "504px" }} {...args}>
+      <AlertChildrenContentLong />
+    </Alert>
+    <Alert sx={{ width: "620px" }} severity={args.severity} onClose={() => {}}>
+      <AlertChildrenContentLong />
+    </Alert>
+    <Alert sx={{ width: "620px" }} severity={args.severity} onClose={() => {}}>
+      <AlertChildrenContentShort />
+    </Alert>
+    <Alert sx={{ width: "620px" }} severity={args.severity}>
+      <AlertChildrenContentShort />
+    </Alert>
+  </>
+);
+const Template3: StoryFn<typeof Alert> = (args) => (
+  <>
+    <Alert
+      sx={{ width: "504px" }}
+      bottomAction={<AlertBottomAction />}
+      {...args}
+    >
+      <AlertChildrenContentLong />
+    </Alert>
+  </>
+);
+
+export const AlertBase = {
+  render: Template,
+
+  args: {
+    title: "Alert title",
+    severity: "success",
+    onClose: action("Close Button is clicked"),
+  },
+};
+
+export const AlertVariant = {
+  render: Template2,
+
+  args: {
+    title: "Alert title",
+    severity: "success",
+    onClose: action("Close Button is clicked"),
+  },
+};
+
+export const AlertWithBottomAction = {
+  render: Template3,
+
+  args: {
+    title: "Alert title",
+    severity: "success",
+    onClose: action("Close Button is clicked"),
+  },
+};

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

@@ -0,0 +1,168 @@
+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 Button from "@/components/Button";
+
+import type { StoryObj, StoryFn, Meta } from "@storybook/react";
+import type { ButtonProps } from "@/components/Button/Button.types";
+
+type Size = Pick<ButtonProps, "size">;
+type SizeValues = Size[keyof Size];
+const sizeList: SizeValues[] = ["small", "medium", "large"];
+
+export default {
+  title: "Components/Button",
+  component: Button,
+  args: {
+    kind: "contained",
+    children: "Text",
+    color: "primary",
+    disabled: false,
+    size: "small",
+    onClick: action("onClick"),
+  },
+  argTypes: {
+    icon: {
+      control: false,
+      description: `Use this prop when you want to add icon.
+        \n It is added to the left of the text criteria`,
+      table: {
+        defaultValue: { summary: "undefined" },
+        type: { summary: "React.ReactNode" },
+      },
+    },
+    children: {
+      type: "string",
+    },
+    kind: {
+      control: {
+        type: "radio",
+      },
+      options: ["contained", "outlined", "ghost"],
+      description: "Button has three Kinds Contained, Outlined, Ghost",
+      table: {
+        defaultValue: { summary: "contained" },
+      },
+    },
+    color: {
+      control: {
+        type: "radio",
+      },
+      options: ["primary", "secondary", "error"],
+      table: {
+        defaultValue: { summary: "primary" },
+      },
+    },
+    disabled: {
+      control: {
+        type: "boolean",
+      },
+      table: {
+        defaultValue: { summary: "false" },
+      },
+    },
+    size: {
+      control: {
+        type: "radio",
+      },
+      options: ["small", "medium", "large"],
+      table: {
+        defaultValue: { summary: "small" },
+      },
+    },
+    onClick: {
+      type: "function",
+      control: {
+        type: "radio",
+      },
+      options: ["function", undefined],
+      mapping: {
+        function: action("onClick"),
+        undefined: undefined,
+      },
+      description:
+        "It is a callback function that is called when the button is clicked.",
+    },
+  },
+  parameters: {
+    controls: {
+      include: [
+        "onClick",
+        "children",
+        "disabled",
+        "size",
+        "kind",
+        "color",
+        "icon",
+      ],
+    },
+    docs: {
+      description: {
+        component: `It is a Clickable default Button. For more details, please
+				see [Material-UI Button](https://mui.com/material-ui/react-button/).`,
+      },
+    },
+  },
+} as Meta<typeof Button>;
+
+export const BasicButton: StoryObj<typeof Button> = {
+  render: (args) => <Button {...args}>{args.children}</Button>,
+};
+
+const SizeButtonTemplate: StoryFn<typeof Button> = (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>
+  );
+};
+
+export const Size = {
+  render: SizeButtonTemplate,
+};