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

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

@@ -0,0 +1,91 @@
+import React from "react";
+
+import { ComponentStory } from "@storybook/react";
+import { Box, Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
+
+import { variantArray } from "./const";
+
+export default {
+  title: "Foundation/Typography",
+  component: Typography,
+  argTypes: {
+    variant: {
+      control: "select",
+      options: variantArray,
+    },
+  },
+};
+
+const TypographyTemplate: ComponentStory<typeof Typography> = (args) => {
+  const { variant, children } = args;
+  return (
+    <Typography variant={variant} sx={{ whiteSpace: "pre-line" }}>
+      {children}
+    </Typography>
+  );
+};
+
+export const TypographyComponent = TypographyTemplate.bind({});
+TypographyComponent.args = {
+  variant: "body1_16_regular",
+  children:
+    "AI will be the new standard of care. 123456789\nBy Lunit. With AI, we aim to make data-driven medicine\nthe new standard of care.",
+};
+
+const SXTemplate: ComponentStory<typeof Typography> = (args) => {
+  const { variant, children } = args;
+  return (
+    <Box sx={{ typography: variant, whiteSpace: "pre-line" }}>{children}</Box>
+  );
+};
+
+export const SXProps = SXTemplate.bind({});
+SXProps.args = {
+  variant: "body1_16_regular",
+  children:
+    "AI will be the new standard of care. 123456789\nBy Lunit. With AI, we aim to make data-driven medicine\nthe new standard of care.",
+};
+
+const StyledBox = styled(Box, {
+  shouldForwardProp: (prop) => !["variant"].includes(prop.toString()),
+})<{ variant: typeof variantArray[number] }>(({ theme, variant }) => ({
+  ...theme.typography[variant],
+  whiteSpace: "pre-line",
+}));
+
+const StyledTemplate: ComponentStory<typeof StyledBox> = (args) => {
+  /**
+const StyledBox = styled(Box)(({ theme }) => ({
+  ...theme.typography.body1_16_regular,
+  whiteSpace: "pre-line",
+}));
+  */
+  const { variant, children } = args;
+  return <StyledBox variant={variant}>{children}</StyledBox>;
+};
+
+export const Styled = StyledTemplate.bind({});
+Styled.args = {
+  variant: "body1_16_regular",
+  children:
+    "AI will be the new standard of care. 123456789\nBy Lunit. With AI, we aim to make data-driven medicine\nthe new standard of care.",
+};
+Styled.parameters = {
+  docs: {
+    source: {
+      code: `
+const StyledBox = styled(Box)(({ theme }) => ({
+  ...theme.typography.body1_16_regular,
+  whiteSpace: "pre-line",
+}));
+...
+return (
+  <StyledBox>AI will be the new standard of care. 123456789\nBy Lunit. With AI, we aim to make data-driven medicine\nthe new standard of care.</StyledBox>
+);
+      `,
+      language: "tsx",
+      type: "code",
+    },
+  },
+};

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

@@ -0,0 +1,71 @@
+import React from "react";
+
+import {
+  Box,
+  Typography,
+  styled,
+  useTheme,
+  TypographyProps,
+} from "@mui/material";
+
+export const TypographyContent = styled(Box)({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+});
+
+export const TypographyItem = styled(Box)({
+  display: "flex",
+  flexWrap: "wrap",
+  marginBottom: "24px",
+});
+
+export const TypographyTitle = styled(Typography)(({ theme }) => ({
+  width: 200,
+  color: theme.palette.token.core.text_light,
+}));
+
+export const TypographyDummy = styled(Typography)({
+  width: 560,
+});
+
+type ReadableArray<T> = Array<T> | ReadonlyArray<T>;
+
+interface TypographyGroupProps {
+  heading: React.ReactNode;
+  dummy: React.ReactNode;
+  variants: ReadableArray<
+    Exclude<TypographyProps["variant"], "inherit" | undefined>
+  >;
+}
+
+const TypographyGroup = ({
+  heading,
+  dummy,
+  variants,
+}: TypographyGroupProps) => {
+  const theme = useTheme();
+  return (
+    <>
+      <Typography variant="h4" component="h2" sx={{ mb: 5 }}>
+        {heading}
+      </Typography>
+      <TypographyContent>
+        {variants.map((variant) => {
+          const { fontWeight, fontSize, lineHeight } =
+            theme.typography[variant] ?? {};
+          return (
+            <TypographyItem key={variant}>
+              <TypographyTitle variant="body1_16_semibold">
+                {variant}
+              </TypographyTitle>
+              <TypographyDummy variant={variant}>{dummy}</TypographyDummy>
+            </TypographyItem>
+          );
+        })}
+      </TypographyContent>
+    </>
+  );
+};
+
+export default TypographyGroup;

package/src/stories/foundation/Typography/const.ts

@@ -0,0 +1,25 @@
+const headline = [
+  "headline1",
+  "headline2",
+  "headline3",
+  "headline4",
+  "headline5",
+] as const;
+const body = [
+  "body1_16_semibold",
+  "body1_16_regular",
+  "body2_14_bold",
+  "body2_14_medium",
+  "body2_14_regular",
+  "body3_12_semibold",
+  "body3_12_regular",
+] as const;
+const etc = ["button1", "button2", "caption", "overline"] as const;
+
+export const variants = {
+  headline,
+  body,
+  etc,
+};
+
+export const variantArray = [...headline, ...body, ...etc];

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

@@ -0,0 +1,64 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+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(" ")
+    .map((str) => capitalize(str))
+    .join(" ");
+
+const BaseColors = () => {
+  const theme = useTheme();
+  return (
+    <Container>
+      {map(
+        theme.palette.lunit,
+        (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.${paletteKey}.${colorKey}.contrastText`}
+                    bgcolor={`lunit.${paletteKey}.${colorKey}.main`}
+                  >
+                    <Typography variant="h4">T</Typography>
+                  </Color>
+                  <Typography variant="body2">{`${paletteKey}_${colorKey}`}</Typography>
+                </ColorContainer>
+              ))}
+            </PaletteContainer>
+          </div>
+        )
+      )}
+    </Container>
+  );
+};
+
+// 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",
+  component: BaseColors,
+} as ComponentMeta<typeof BaseColors>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const BaseTemplate: ComponentStory<typeof BaseColors> = () => <BaseColors />;
+
+export const Base = BaseTemplate.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args

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

@@ -0,0 +1,167 @@
+import React, { ReactNode } from "react";
+import { ComponentMeta } from "@storybook/react";
+import { Box, styled, TextField, Typography, useTheme } from "@mui/material";
+
+export const InComponentWithStyled = () => {
+  const StyledTextField = styled(TextField)(({ theme }) => ({
+    "& .MuiInputBase-root": {
+      backgroundColor: theme.palette.token.component.textfield_bg,
+      color: theme.palette.token.core.text_normal,
+      "& .MuiInputBase-input": {
+        padding: "8px 16px",
+      },
+      "&.Mui-focused fieldset": {
+        borderColor: theme.palette.token.core.focused,
+      },
+    },
+  }));
+
+  return (
+    <>
+      <BaseBox theme="light">
+        <StyledTextField placeholder="Styled Text Field" />
+      </BaseBox>
+      <BaseBox theme="dark">
+        <StyledTextField placeholder="Styled Text Field" />
+      </BaseBox>
+    </>
+  );
+};
+
+export default {
+  title: "Foundation/Colors/ColorToken",
+  component: InComponentWithStyled,
+  decorators: [
+    (Story) => (
+      <div style={{ display: "flex", flexDirection: "column", width: "100%" }}>
+        <Story />
+      </div>
+    ),
+  ],
+} as ComponentMeta<typeof InComponentWithStyled>;
+
+export const InComponentWithSx = () => {
+  return (
+    <>
+      <BaseBox theme="light">
+        <TextField
+          placeholder="Text Field with SX"
+          sx={{
+            "& .MuiInputBase-root": {
+              backgroundColor: (theme) =>
+                theme.palette.token.component.textfield_bg,
+              color: (theme) => theme.palette.token.core.text_normal,
+              "& .MuiInputBase-input": {
+                padding: "8px 16px",
+              },
+              "&.Mui-focused fieldset": {
+                borderColor: (theme) => theme.palette.token.core.focused,
+              },
+            },
+          }}
+        />
+        <Box width={150} height={50} bgcolor="#DFDFE2" mt={3}>
+          Hello!
+          <Box
+            sx={{
+              backgroundColor: (theme) =>
+                theme.palette.token.component.alert_info_bg,
+              color: (theme) => theme.palette.token.component.alert_info_border,
+              boxShadow: (theme) =>
+                `20px -10px 5px ${theme.palette.token.core.shadow_01}`,
+              width: 300,
+              height: 80,
+            }}
+          >
+            - with alpha value
+          </Box>
+        </Box>
+      </BaseBox>
+      <BaseBox theme="dark">
+        <TextField
+          placeholder="Text Field with SX"
+          sx={{
+            "& .MuiInputBase-root": {
+              backgroundColor: (theme) =>
+                theme.palette.token.component.textfield_bg,
+              color: (theme) => theme.palette.token.core.text_normal,
+              "& .MuiInputBase-input": {
+                padding: "8px 16px",
+              },
+              "&.Mui-focused fieldset": {
+                borderColor: (theme) => theme.palette.token.core.focused,
+              },
+            },
+          }}
+        />
+        <Box width={150} height={50} bgcolor="#DFDFE2" mt={3}>
+          Hello!
+          <Box
+            sx={{
+              backgroundColor: (theme) =>
+                theme.palette.token.component.alert_info_bg,
+              color: (theme) => theme.palette.token.component.alert_info_border,
+              boxShadow: (theme) =>
+                `20px -10px 5px ${theme.palette.token.core.shadow_01}`,
+              width: 300,
+              height: 80,
+            }}
+          >
+            - with alpha value
+          </Box>
+        </Box>
+      </BaseBox>
+    </>
+  );
+};
+
+export const InComponentWithInlineStyle = () => {
+  const theme = useTheme();
+
+  return (
+    <>
+      <BaseBox theme="light">
+        <TextField
+          placeholder="Inline Styled Text Field"
+          style={{
+            backgroundColor: theme.palette.token.component.textfield_bg,
+          }}
+        />
+      </BaseBox>
+      <BaseBox theme="dark">
+        <TextField
+          placeholder="Inline Styled Text Field"
+          style={{
+            backgroundColor: theme.palette.token.component.textfield_bg,
+          }}
+        />
+      </BaseBox>
+    </>
+  );
+};
+
+interface BaseBoxProps {
+  theme: "light" | "dark";
+  children: ReactNode;
+}
+
+const BaseBox = ({ theme, children }: BaseBoxProps) => {
+  return (
+    <Box
+      className={theme === "light" ? "light1" : "dark1"}
+      width={500}
+      height={200}
+      bgcolor={theme === "light" ? `lunit.grey.0.main` : `lunit.grey.80.main`}
+      border="1px solid"
+      p={2}
+    >
+      <Typography
+        variant="body1_16_semibold"
+        color={(theme) => theme.palette.token.core.text_normal}
+      >
+        {theme === "light" ? "= light1 =" : "= dark1 ="}
+      </Typography>
+      {children}
+    </Box>
+  );
+};

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

@@ -0,0 +1,190 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import {
+  useTheme,
+  Box,
+  Table,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableContainer,
+  TableCell,
+} from "@mui/material";
+import { StyledTypography } from "./styled";
+import { tokenCoreColor } from "@/foundation/colors/token/core";
+import type { ColorToken } from "@/foundation/colors/types";
+
+const CoreTokenColors = () => {
+  const theme = useTheme();
+
+  const colorBoxStyle = {
+    borderTop: "1px solid",
+    borderBottom: "1px solid",
+    borderColor: "rgba(0, 0, 0, 0.12)",
+    height: "12px",
+  };
+
+  return (
+    <TableContainer>
+      <Table stickyHeader>
+        <TableHead>
+          <TableRow>
+            <TableCell colSpan={2}> </TableCell>
+            <TableCell colSpan={2}>Light</TableCell>
+            <TableCell colSpan={4}>Dark</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Token name</TableCell>
+            <TableCell>Light 1</TableCell>
+            <TableCell>Light 2</TableCell>
+            <TableCell>Dark 1</TableCell>
+            <TableCell>Dark 2</TableCell>
+            <TableCell>Dark 3</TableCell>
+            <TableCell>Dark 4</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {Object.entries(theme.palette.token.core).map(
+            ([paletteKey, _colorVariable]) => (
+              <TableRow key={paletteKey}>
+                <TableCell sx={{ height: "72px" }}>
+                  <StyledTypography>core.{paletteKey}</StyledTypography>
+                </TableCell>
+                <TableCell
+                  className="light1"
+                  sx={{
+                    background: "var(--grey-0)",
+                    padding: 0,
+                  }}
+                >
+                  <Box
+                    sx={{
+                      background:
+                        theme.palette.token.core[
+                          paletteKey as keyof ColorToken["core"]
+                        ],
+                      borderLeft: "1px solid",
+                      ...colorBoxStyle,
+                    }}
+                  ></Box>
+                  <StyledTypography>
+                    {tokenCoreColor[paletteKey]["light1"]}
+                  </StyledTypography>
+                </TableCell>
+                <TableCell
+                  className="light2"
+                  sx={{ background: "var(--grey-10)", padding: 0 }}
+                >
+                  <Box
+                    sx={{
+                      background:
+                        theme.palette.token.core[
+                          paletteKey as keyof ColorToken["core"]
+                        ],
+                      ...colorBoxStyle,
+                    }}
+                  ></Box>
+                  <StyledTypography>
+                    {tokenCoreColor[paletteKey]["light2"]}
+                  </StyledTypography>
+                </TableCell>
+                <TableCell
+                  className="dark1"
+                  sx={{
+                    background: "var(--grey-90)",
+                    padding: 0,
+                  }}
+                >
+                  <Box
+                    sx={{
+                      background:
+                        theme.palette.token.core[
+                          paletteKey as keyof ColorToken["core"]
+                        ],
+                      ...colorBoxStyle,
+                    }}
+                  ></Box>
+                  <StyledTypography>
+                    {tokenCoreColor[paletteKey]["dark1"]}
+                  </StyledTypography>
+                </TableCell>
+                <TableCell
+                  className="dark2"
+                  sx={{
+                    background: "var(--grey-85)",
+                    padding: 0,
+                  }}
+                >
+                  <Box
+                    sx={{
+                      background:
+                        theme.palette.token.core[
+                          paletteKey as keyof ColorToken["core"]
+                        ],
+                      ...colorBoxStyle,
+                    }}
+                  ></Box>
+
+                  <StyledTypography>
+                    {tokenCoreColor[paletteKey]["dark2"]}
+                  </StyledTypography>
+                </TableCell>
+                <TableCell
+                  className="dark3"
+                  sx={{
+                    background: "var(--grey-80)",
+                    padding: 0,
+                  }}
+                >
+                  <Box
+                    sx={{
+                      background:
+                        theme.palette.token.core[
+                          paletteKey as keyof ColorToken["core"]
+                        ],
+                      ...colorBoxStyle,
+                    }}
+                  ></Box>
+                  <StyledTypography>
+                    {tokenCoreColor[paletteKey]["dark3"]}
+                  </StyledTypography>
+                </TableCell>
+                <TableCell
+                  className="dark4"
+                  sx={{
+                    background: "var(--grey-70)",
+                    padding: 0,
+                  }}
+                >
+                  <Box
+                    sx={{
+                      background:
+                        theme.palette.token.core[
+                          paletteKey as keyof ColorToken["core"]
+                        ],
+                      ...colorBoxStyle,
+                    }}
+                  ></Box>
+                  <StyledTypography>
+                    {tokenCoreColor[paletteKey]["dark4"]}
+                  </StyledTypography>
+                </TableCell>
+              </TableRow>
+            )
+          )}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default {
+  title: "Foundation/Colors/ColorToken",
+  component: CoreTokenColors,
+} as ComponentMeta<typeof CoreTokenColors>;
+
+const Template: ComponentStory<typeof CoreTokenColors> = () => (
+  <CoreTokenColors />
+);
+
+export const CoreTokens = Template.bind({});

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

@@ -0,0 +1,39 @@
+import { Box, styled, Typography } from "@mui/material";
+
+export const Container = styled(Box)({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+});
+
+export const PaletteContainer = styled(Box)({
+  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 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 StyledTypography = styled(Typography)(({ theme }) => ({
+  color: theme.palette.token.core.text_normal,
+  marginLeft: 8,
+  fontSize: "12px",
+}));

package/src/theme.ts

@@ -0,0 +1,41 @@
+import { deepmerge } from "@mui/utils";
+import { ComponentsOverrides, createTheme } from "@mui/material";
+import {
+  foundationCssBaseline,
+  palette,
+  typography,
+  typographyDefaultProps,
+  spacing,
+} from "./foundation";
+import { componentsCssBaseline } from "./components";
+
+const theme = createTheme({
+  typography,
+  palette,
+  spacing,
+  components: {
+    MuiCssBaseline: deepmerge(foundationCssBaseline, componentsCssBaseline),
+    MuiPaper: {
+      styleOverrides: {
+        // css-in-js이기 때문에 MuiPaper-root class에만 추가해도
+        // Paper 컴포넌트를 쓰는 모든 스타일에서 명시도 역전이 발생하지 않음
+        root: {
+          boxShadow: "var(--elevation-shadow)",
+        },
+      },
+    },
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          boxShadow: "var(--elevation-shadow)",
+        },
+      },
+    },
+    MuiTypography: {
+      defaultProps: typographyDefaultProps,
+    },
+    // @todo add any MUI components theme exported from ./components/index.ts
+  },
+});
+
+export default theme;

package/src/types.d.ts

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