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

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

@@ -0,0 +1,292 @@
+import React, { useState } from "react";
+import {
+  Table,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableCell,
+} from "@mui/material";
+import { action } from "@storybook/addon-actions";
+import Bell from "@lunit/design-system-icons/Bell";
+
+import ToggleButton from "@/components/ToggleButton";
+
+import type { StoryFn, Meta } from "@storybook/react";
+
+export default {
+  title: "Components/ToggleButton",
+  component: ToggleButton,
+  args: {
+    kind: "contained",
+    color: "primary",
+    selectedColor: "primary",
+    size: "small",
+    disabled: false,
+  },
+  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" },
+      },
+    },
+    value: {
+      control: false,
+      table: { type: { summary: "any" } },
+    },
+    selected: {
+      control: false,
+      table: {
+        defaultValue: { summary: "false" },
+      },
+    },
+    selectedColor: {
+      control: false,
+      options: ["primary", "secondary"],
+      description:
+        "The color of the button when it is in an select state. It has nothing to do with active button",
+      table: {
+        defaultValue: { summary: "primary" },
+      },
+    },
+    color: {
+      control: {
+        type: "radio",
+      },
+      options: ["primary", "secondary"],
+      description: "Button has three Kinds Contained, Ghost",
+      table: {
+        defaultValue: { summary: "primary" },
+      },
+    },
+    kind: {
+      control: {
+        type: "radio",
+      },
+      options: ["contained", "outlined", "ghost"],
+      table: {
+        defaultValue: { summary: "contained" },
+      },
+    },
+    children: {
+      type: "string",
+    },
+    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: "select",
+      },
+      options: ["function", undefined],
+      mapping: {
+        function: action("onClick"),
+        undefined: undefined,
+      },
+      description:
+        "It is a callback function that is called when the button is clicked.",
+    },
+    onChange: {
+      type: "function",
+      control: false,
+      options: ["function", undefined],
+      mapping: {
+        function: action("onChange"),
+        undefined: undefined,
+      },
+    },
+  },
+  parameters: {
+    controls: {
+      include: [
+        "icon",
+        "value",
+        "kind",
+        "selectedColor",
+        "onClick",
+        "children",
+        "disabled",
+        "size",
+        "selected",
+        "color",
+        "onChange",
+      ],
+    },
+    docs: {
+      description: {
+        component: `A Toggle Button can be used to group related options. please
+				see [Material-UI Toggle Button](https://mui.com/material-ui/react-toggle-button/).`,
+      },
+    },
+  },
+} as Meta<typeof ToggleButton>;
+
+const Template: StoryFn<typeof ToggleButton> = (arg) => {
+  const [values, setValues] = useState({
+    primary: true,
+    secondary: true,
+  });
+
+  const handleChange = (value: keyof typeof values) => {
+    setValues({
+      ...values,
+      [value]: !values[value],
+    });
+  };
+
+  return (
+    <Table sx={{ width: 330 }}>
+      <TableHead>
+        <TableRow>
+          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            Selected color
+          </TableCell>
+          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            Primary
+          </TableCell>
+          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            Secondary
+          </TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            Selected
+          </TableCell>
+          <TableCell>
+            <ToggleButton
+              {...arg}
+              icon={<Bell />}
+              value="primary"
+              onChange={() => handleChange("primary")}
+              selected={values.primary}
+            >
+              {arg.children}
+            </ToggleButton>
+          </TableCell>
+          <TableCell>
+            <ToggleButton
+              {...arg}
+              icon={<Bell />}
+              selectedColor="secondary"
+              value="secondary"
+              onChange={() => handleChange("secondary")}
+              selected={values.secondary}
+            >
+              {arg.children}
+            </ToggleButton>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+};
+
+export const IconStory = {
+  render: Template,
+  name: "Icon",
+
+  args: {
+    children: "Text",
+  },
+
+  argTypes: {
+    children: {
+      type: "string",
+      defaultValue: "text",
+    },
+  },
+};
+
+const IconOnlyTemplate: StoryFn<typeof ToggleButton> = (arg) => {
+  const [values, setValues] = useState({
+    primary: true,
+    secondary: true,
+  });
+
+  const handleChange = (value: keyof typeof values) => {
+    setValues({
+      ...values,
+      [value]: !values[value],
+    });
+  };
+
+  return (
+    <Table sx={{ width: 330 }}>
+      <TableHead>
+        <TableRow>
+          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            Selected color
+          </TableCell>
+          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            Primary
+          </TableCell>
+          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            Secondary
+          </TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            Selected
+          </TableCell>
+          <TableCell>
+            <ToggleButton
+              {...arg}
+              icon={<Bell />}
+              value="primary"
+              onChange={() => handleChange("primary")}
+              selected={values.primary}
+            >
+              {arg.children}
+            </ToggleButton>
+          </TableCell>
+          <TableCell>
+            <ToggleButton
+              {...arg}
+              icon={<Bell />}
+              selectedColor="secondary"
+              value="secondary"
+              onChange={() => handleChange("secondary")}
+              selected={values.secondary}
+            >
+              {arg.children}
+            </ToggleButton>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+};
+
+export const WithIconOnlyStory = {
+  render: IconOnlyTemplate,
+  name: "Icon only",
+
+  argTypes: {
+    children: {
+      type: "string",
+      controls: false,
+    },
+  },
+};

package/src/stories/components/Tooltip/Tooltip.stories.tsx

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

package/src/stories/foundation/Elevation/Elevation.stories.tsx

@@ -0,0 +1,268 @@
+import React, { useState } from "react";
+import { StoryFn, Meta } from "@storybook/react";
+import {
+  Alert,
+  Box,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  MenuItem,
+  Paper,
+  Select,
+  TextField,
+  Tooltip,
+} from "@mui/material";
+import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { Dayjs } from "dayjs";
+import { Container, Title } from "./styled";
+
+interface ElevationProps {
+  surface: string;
+  isBase: boolean;
+}
+
+const Elevation = ({ surface, isBase = false }: ElevationProps) => {
+  const [open, setOpen] = useState<boolean>(false);
+
+  const handleClose = () => {
+    setOpen((prev: boolean) => !prev);
+  };
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const [value, setValue] = React.useState<Dayjs | null>(null);
+
+  if (isBase) {
+    return (
+      <Box
+        sx={{
+          p: 4,
+        }}
+      >
+        <Title>Base Elevation</Title>
+        <Container>
+          <Box
+            sx={{
+              width: "300px",
+              height: "100px",
+              overflow: "hidden",
+              p: 3,
+            }}
+            className="elevation1"
+          >
+            Level 1
+          </Box>
+          <Box
+            sx={{
+              width: "300px",
+              height: "100px",
+              overflow: "hidden",
+              p: 3,
+            }}
+            className="elevation2"
+          >
+            Level 2
+          </Box>
+        </Container>
+
+        <Title>Paper</Title>
+        <Container>
+          <Paper
+            sx={{
+              width: "300px",
+              height: "100px",
+              overflow: "hidden",
+              p: 3,
+            }}
+          />
+        </Container>
+
+        <Title>Dropdown</Title>
+        <Container>
+          <Select
+            label="Select option"
+            value="option1"
+            MenuProps={{
+              className: surface,
+            }}
+          >
+            <MenuItem value="option1">Option 1</MenuItem>
+            <MenuItem value="option2">Option 2</MenuItem>
+            <MenuItem value="option3">Option 3</MenuItem>
+          </Select>
+        </Container>
+
+        <Title>Date Picker</Title>
+        <Container>
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <DatePicker
+              label="Basic example"
+              value={value}
+              onChange={(newValue) => {
+                setValue(newValue);
+              }}
+              renderInput={(params) => <TextField {...params} />}
+              PaperProps={{
+                className: surface,
+              }}
+            />
+          </LocalizationProvider>
+        </Container>
+
+        <Title>Alert</Title>
+        <Container>
+          <Alert sx={{ flex: 1 }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. A diam
+            sollicitudin tempor id eu nisl nunc mi. Auctor augue mauris augue
+            neque gravida in fermentum.{" "}
+          </Alert>
+        </Container>
+
+        <Title>Modal & Popper</Title>
+        <Container>
+          <Button variant="contained" onClick={handleClickOpen}>
+            Open Dialog
+          </Button>
+          <Dialog
+            PaperProps={{
+              className: surface,
+            }}
+            onClose={handleClose}
+            open={open}
+          >
+            <DialogTitle>Title area</DialogTitle>
+            <DialogContent>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. A diam
+              sollicitudin tempor id eu nisl nunc mi. Auctor augue mauris augue
+              neque gravida in fermentum.
+            </DialogContent>
+          </Dialog>
+          <Tooltip
+            title="Tooltip"
+            PopperProps={{ className: surface }}
+            placement="right"
+          >
+            <Button variant="contained">Open Tooltip</Button>
+          </Tooltip>
+        </Container>
+      </Box>
+    );
+  }
+  return (
+    <Box sx={{ height: "100vh" }}>
+      <Button onClick={handleClickOpen}>Open Dialog</Button>
+      <Dialog
+        sx={{
+          overflow: "hidden",
+          p: 3,
+        }}
+        PaperProps={{
+          className: surface,
+        }}
+        onClose={handleClose}
+        open={open}
+      >
+        <DialogTitle>Title area</DialogTitle>
+        <DialogContent>
+          {" "}
+          <Select
+            label="Select option"
+            value="option1"
+            MenuProps={{
+              className: surface,
+            }}
+          >
+            <MenuItem value="option1">Option 1</MenuItem>
+            <MenuItem value="option2">Option 2</MenuItem>
+            <MenuItem value="option3">Option 3</MenuItem>
+          </Select>
+        </DialogContent>
+      </Dialog>
+    </Box>
+  );
+};
+
+export default {
+  title: "Foundation/Elevation",
+  component: Elevation,
+  argTypes: {
+    Paper: {
+      table: {
+        defaultValue: { summary: "Elevation 2" },
+      },
+      control: {
+        type: null,
+      },
+    },
+    Dropdown: {
+      table: {
+        defaultValue: { summary: "Elevation 1" },
+      },
+      control: {
+        type: null,
+      },
+    },
+    DatePicker: {
+      table: {
+        defaultValue: { summary: "Elevation 2" },
+      },
+      control: {
+        type: null,
+      },
+    },
+    Alert: {
+      table: {
+        defaultValue: { summary: "Elevation 2" },
+      },
+      control: {
+        type: null,
+      },
+    },
+    Dialog: {
+      table: {
+        defaultValue: { summary: "Elevation 2" },
+      },
+      control: {
+        type: null,
+      },
+    },
+    Tooltip: {
+      table: {
+        defaultValue: { summary: "Elevation 1" },
+      },
+      control: {
+        type: null,
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `The design system has Elevation 1 and Elevation 2. And components using elevation include Paper, Dropdown, DatePicker, Alert, Dialog, and Tooltip.\nEach component has a default value and if it is necessary to implement a component without elevation, you can add 'elevation0' to the class name.`,
+      },
+    },
+  },
+} as Meta<typeof Elevation>;
+
+const ElevationBase: StoryFn<typeof Elevation> = (
+  args,
+  { globals: { theme } }
+) => <Elevation {...args} surface={theme} isBase />;
+
+const ElevationNesed: StoryFn<typeof Elevation> = (
+  args,
+  { globals: { theme } }
+) => <Elevation {...args} surface={theme} />;
+
+export const Base = {
+  render: ElevationBase,
+};
+export const Nested = {
+  render: ElevationNesed,
+};

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

@@ -0,0 +1,12 @@
+import { Box, styled, Typography } from "@mui/material";
+
+export const Container = styled(Box)(({ theme }) => ({
+  marginBottom: theme.spacing(10),
+  display: "flex",
+  gap: theme.spacing(8),
+}));
+
+export const Title = styled(Typography)(({ theme }) => ({
+  ...theme.typography.h4,
+  marginBottom: theme.spacing(3),
+}));

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

@@ -0,0 +1,76 @@
+import { Meta, Canvas, Story } from "@storybook/blocks";
+import * as TypographyStories from "./TypographyExamples.stories";
+
+import { Typography } from "@mui/material";
+
+import { variants } from "./const";
+
+import TypographyGroup from "./TypographyGroup";
+
+<Meta of={TypographyStories} />
+
+export const Template = (args) => <Typography {...args} />;
+
+## Types
+
+The typography component comes with variants below:
+
+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
+
+<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 */}
+
+  <Story id="foundation-typography--typography-component" />
+</Canvas>
+
+### 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 */}
+
+  <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 */}
+
+  <Story id="foundation-typography--sx-props" />
+</Canvas>