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

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

@@ -0,0 +1,101 @@
+import React from "react";
+
+import { StoryFn } 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: StoryFn<typeof Typography> = (args) => {
+  const { variant, children } = args;
+  return (
+    <Typography variant={variant} sx={{ whiteSpace: "pre-line" }}>
+      {children}
+    </Typography>
+  );
+};
+
+export const TypographyComponent = {
+  render: TypographyTemplate,
+
+  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: StoryFn<typeof Typography> = (args) => {
+  const { variant, children } = args;
+  return (
+    <Box sx={{ typography: variant, whiteSpace: "pre-line" }}>{children}</Box>
+  );
+};
+
+export const SXProps = {
+  render: SXTemplate,
+
+  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: StoryFn<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 = {
+  render: StyledTemplate,
+
+  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.",
+  },
+
+  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/TypographyExamples.stories.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { Typography } from "@mui/material";
+
+import { variants } from "./const";
+
+import TypographyGroup from "./TypographyGroup";
+
+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/All Variants",
+  component: Typography,
+};
+
+export const AllVariants_ = {
+  render: () => <AllVariants />,
+  name: "all variants",
+};

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,66 @@
+import React from "react";
+import { StoryFn, Meta } 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 Meta<typeof BaseColors>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const BaseTemplate: StoryFn<typeof BaseColors> = () => <BaseColors />;
+
+export const GlobalColors = {
+  render: BaseTemplate,
+  name: "Palette: Global Colors",
+};

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { StoryFn, Meta } from "@storybook/react";
+import Pagination from "@mui/material/Pagination";
+import DeleteIcon from "@mui/icons-material/Delete";
+
+export default {
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  title: "Foundation/Colors/Mui",
+  component: Pagination,
+} as Meta<typeof Pagination>;
+
+export const MuiPagenation: StoryFn<typeof Pagination> = () => (
+  <Pagination count={10} color="primary" />
+);
+
+export const MuiIcon: StoryFn<typeof DeleteIcon> = () => (
+  <DeleteIcon color="primary" />
+);

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

@@ -0,0 +1,167 @@
+import React, { ReactNode } from "react";
+import { Meta } 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 Meta<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/TokenPaletteTable.stories.tsx

@@ -0,0 +1,28 @@
+import { Meta } from "@storybook/react";
+import TokenPaletteTable from "./TokenPaletteTable";
+
+export default {
+  title: "Foundation/Colors",
+  component: TokenPaletteTable,
+  parameters: {
+    controls: {
+      exclude: /.*/g,
+    },
+  },
+} as Meta<typeof TokenPaletteTable>;
+
+export const CoreTokens = {
+  args: {
+    kind: "core",
+  },
+
+  name: "Palette: Core Tokens",
+};
+
+export const ComponentTokens = {
+  args: {
+    kind: "component",
+  },
+
+  name: "Palette: Component Tokens",
+};

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

@@ -0,0 +1,127 @@
+import React from "react";
+import {
+  Box,
+  Table,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableContainer,
+  TableCell,
+  useTheme,
+  SxProps,
+} 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";
+
+interface TokenPaletteTableProps {
+  kind: keyof ColorToken;
+}
+
+const TokenPaletteTable = ({ kind }: TokenPaletteTableProps) => {
+  const theme = useTheme();
+
+  const colorTokenMap = Object.entries(
+    kind === "core" ? theme.palette.token.core : theme.palette.token.component
+  );
+
+  const TokenPaletteCell = (props: {
+    surface: keyof ColorTokenValueBySurface;
+    paletteKey: string;
+    sx?: SxProps;
+  }) => {
+    const { surface, paletteKey, sx } = props;
+
+    const tokenComponentColorFlatten = Object.values(
+      tokenComponentColor
+    ).reduce((acc, cur) => {
+      return { ...acc, ...cur };
+    }, {});
+
+    const boxColorByToken =
+      kind === "core"
+        ? theme.palette.token.core[paletteKey as keyof ColorToken["core"]]
+        : theme.palette.token.component[
+            paletteKey as keyof ColorToken["component"]
+          ];
+
+    const globalColorByToken =
+      kind === "core"
+        ? tokenCoreColor[paletteKey]
+        : tokenComponentColorFlatten[paletteKey];
+
+    return (
+      <TableCell
+        className={surface}
+        sx={{
+          background: theme.palette.token.core.bg_01,
+          padding: 0,
+        }}
+      >
+        <Box
+          sx={{
+            background: boxColorByToken,
+            borderTop: "1px solid",
+            borderBottom: "1px solid",
+            borderColor: "rgba(0, 0, 0, 0.12)",
+            height: "12px",
+            ...sx,
+          }}
+        ></Box>
+        <StyledTypography>{globalColorByToken[surface]}</StyledTypography>
+      </TableCell>
+    );
+  };
+
+  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>
+          {colorTokenMap.map(([paletteKey, _colorVariable]) => (
+            <TableRow key={paletteKey}>
+              <TableCell sx={{ height: "72px" }}>
+                <StyledTypography>
+                  {kind}.{paletteKey}
+                </StyledTypography>
+              </TableCell>
+              <TokenPaletteCell
+                surface="light1"
+                paletteKey={paletteKey}
+                sx={{
+                  borderLeft: "1px solid",
+                  borderLeftColor: "rgba(0, 0, 0, 0.12)",
+                }}
+              />
+              <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>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default TokenPaletteTable;

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",
+}));