@lunit/design-system 2.1.0 → 2.2.3

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

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { StoryFn, Meta } from "@storybook/react";
+import React, { useState } from 'react';
+import { StoryFn, Meta } from '@storybook/react-webpack5';
 import {
   Alert,
   Box,
@@ -10,13 +10,9 @@ import {
   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";
+} from '@mui/material';
+import { Container, Title } from './styled';
 
 interface ElevationProps {
   surface: string;
@@ -34,8 +30,6 @@ const Elevation = ({ surface, isBase = false }: ElevationProps) => {
     setOpen(true);
   };
 
-  const [value, setValue] = React.useState<Dayjs | null>(null);
-
   if (isBase) {
     return (
       <Box
@@ -47,9 +41,9 @@ const Elevation = ({ surface, isBase = false }: ElevationProps) => {
         <Container>
           <Box
             sx={{
-              width: "300px",
-              height: "100px",
-              overflow: "hidden",
+              width: '300px',
+              height: '100px',
+              overflow: 'hidden',
               p: 3,
             }}
             className="elevation1"
@@ -58,9 +52,9 @@ const Elevation = ({ surface, isBase = false }: ElevationProps) => {
           </Box>
           <Box
             sx={{
-              width: "300px",
-              height: "100px",
-              overflow: "hidden",
+              width: '300px',
+              height: '100px',
+              overflow: 'hidden',
               p: 3,
             }}
             className="elevation2"
@@ -68,19 +62,17 @@ const Elevation = ({ surface, isBase = false }: ElevationProps) => {
             Level 2
           </Box>
         </Container>
-
         <Title>Paper</Title>
         <Container>
           <Paper
             sx={{
-              width: "300px",
-              height: "100px",
-              overflow: "hidden",
+              width: '300px',
+              height: '100px',
+              overflow: 'hidden',
               p: 3,
             }}
           />
         </Container>
-
         <Title>Dropdown</Title>
         <Container>
           <Select
@@ -95,58 +87,41 @@ const Elevation = ({ surface, isBase = false }: ElevationProps) => {
             <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.{" "}
+            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}
+            slotProps={{
+              paper: {
+                className: surface,
+              },
+            }}
           >
             <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.
+              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"
+            slotProps={{
+              popper: { className: surface },
+            }}
           >
             <Button variant="contained">Open Tooltip</Button>
           </Tooltip>
@@ -155,22 +130,24 @@ const Elevation = ({ surface, isBase = false }: ElevationProps) => {
     );
   }
   return (
-    <Box sx={{ height: "100vh" }}>
+    <Box sx={{ height: '100vh' }}>
       <Button onClick={handleClickOpen}>Open Dialog</Button>
       <Dialog
         sx={{
-          overflow: "hidden",
+          overflow: 'hidden',
           p: 3,
         }}
-        PaperProps={{
-          className: surface,
-        }}
         onClose={handleClose}
         open={open}
+        slotProps={{
+          paper: {
+            className: surface,
+          },
+        }}
       >
         <DialogTitle>Title area</DialogTitle>
         <DialogContent>
-          {" "}
+          {' '}
           <Select
             label="Select option"
             value="option1"
@@ -189,12 +166,12 @@ const Elevation = ({ surface, isBase = false }: ElevationProps) => {
 };
 
 export default {
-  title: "Foundation/Elevation",
+  title: 'Foundation/Elevation',
   component: Elevation,
   argTypes: {
     Paper: {
       table: {
-        defaultValue: { summary: "Elevation 2" },
+        defaultValue: { summary: 'Elevation 2' },
       },
       control: {
         type: null,
@@ -202,7 +179,7 @@ export default {
     },
     Dropdown: {
       table: {
-        defaultValue: { summary: "Elevation 1" },
+        defaultValue: { summary: 'Elevation 1' },
       },
       control: {
         type: null,
@@ -210,7 +187,7 @@ export default {
     },
     DatePicker: {
       table: {
-        defaultValue: { summary: "Elevation 2" },
+        defaultValue: { summary: 'Elevation 2' },
       },
       control: {
         type: null,
@@ -218,7 +195,7 @@ export default {
     },
     Alert: {
       table: {
-        defaultValue: { summary: "Elevation 2" },
+        defaultValue: { summary: 'Elevation 2' },
       },
       control: {
         type: null,
@@ -226,7 +203,7 @@ export default {
     },
     Dialog: {
       table: {
-        defaultValue: { summary: "Elevation 2" },
+        defaultValue: { summary: 'Elevation 2' },
       },
       control: {
         type: null,
@@ -234,7 +211,7 @@ export default {
     },
     Tooltip: {
       table: {
-        defaultValue: { summary: "Elevation 1" },
+        defaultValue: { summary: 'Elevation 1' },
       },
       control: {
         type: null,
@@ -250,15 +227,13 @@ export default {
   },
 } as Meta<typeof Elevation>;
 
-const ElevationBase: StoryFn<typeof Elevation> = (
-  args,
-  { globals: { theme } }
-) => <Elevation {...args} surface={theme} isBase />;
+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} />;
+const ElevationNesed: StoryFn<typeof Elevation> = (args, { globals: { theme } }) => (
+  <Elevation {...args} surface={theme} />
+);
 
 export const Base = {
   render: ElevationBase,

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

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

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

@@ -1,11 +1,11 @@
-import { Meta, Canvas, Story } from "@storybook/blocks";
-import * as TypographyStories from "./Typography.stories";
+import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks';
+import * as TypographyStories from './Typography.stories';
 
-import Typography from "@/components/Typography";
+import Typography from '@/components/Typography';
 
-import { variants } from "./const";
+import { variants } from './const';
 
-import TypographyGroup from "./TypographyGroup";
+import TypographyGroup from './TypographyGroup';
 
 <Meta name="Typography Docs" of={TypographyStories} />
 
@@ -15,25 +15,23 @@ export const Template = (args) => <Typography {...args} />;
 
 Use typography to present your design and content as clearly and efficiently as possible.
 
-
 ## Usage
 
 ### Basic Typography
 
 ```tsx
-import { Typography } from "@lunit/design-system";
+import { Typography } from '@lunit/design-system';
 // or
-import Typography from "@lunit/design-system/Typography";
+import Typography from '@lunit/design-system/Typography';
 
 <Typography>AI will be the new standard of care. 123456789</Typography>;
 ```
+
 ### Variant
 
 The typography component comes with variants below:
 
-<Canvas
-  of={TypographyStories.AllVariants}
-  sourceState="none" />
+<Canvas of={TypographyStories.AllVariants} sourceState="none" />
 
 ### With styled utility
 
@@ -41,14 +39,12 @@ In some situations you might not be able to use the Typography component. Hopefu
 
 <Canvas of={TypographyStories.Styled} />
 
-
 ### 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 of={TypographyStories.SXProps} />
 
-
 ## Reference
 
 - [Material-UI Typography](https://mui.com/material-ui/react-typography/)

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

@@ -1,21 +1,17 @@
-import React from "react";
+import React from 'react';
 
-import { StoryFn } from "@storybook/react";
-import { Box } from "@mui/material";
-import { styled } from "@mui/material/styles";
+import { StoryFn } from '@storybook/react-webpack5';
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
 
-import Typography from "@/components/Typography";
+import Typography from '@/components/Typography';
 
-import { variantArray, variants } from "./const";
-import TypographyGroup from "./TypographyGroup";
+import { variantArray, variants } from './const';
+import TypographyGroup from './TypographyGroup';
 
 export const AllVariants = () => (
   <>
-    <TypographyGroup
-      heading="Headline"
-      dummy="Headline 123456789"
-      variants={variants.headline}
-    />
+    <TypographyGroup heading="Headline" dummy="Headline 123456789" variants={variants.headline} />
     <TypographyGroup
       heading="Body"
       dummy={
@@ -42,20 +38,16 @@ export const AllVariants = () => (
       }
       variants={variants.smallBody}
     />
-    <TypographyGroup
-      heading="etc"
-      dummy="NEWS & UPDATE 71456"
-      variants={variants.etc}
-    />
+    <TypographyGroup heading="etc" dummy="NEWS & UPDATE 71456" variants={variants.etc} />
   </>
 );
 
 export default {
-  title: "Foundation/Typography",
+  title: 'Foundation/Typography',
   component: Typography,
   argTypes: {
     variant: {
-      control: "select",
+      control: 'select',
       options: variantArray,
     },
   },
@@ -64,7 +56,7 @@ export default {
 const TypographyTemplate: StoryFn<typeof Typography> = (args) => {
   const { variant, children } = args;
   return (
-    <Typography variant={variant} sx={{ whiteSpace: "pre-line" }}>
+    <Typography variant={variant} sx={{ whiteSpace: 'pre-line' }}>
       {children}
     </Typography>
   );
@@ -74,43 +66,35 @@ export const TypographyComponent = {
   render: TypographyTemplate,
 
   args: {
-    variant: "body1_16_regular",
+    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.",
+      '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>
-  );
+  return <Box sx={{ typography: variant, whiteSpace: 'pre-line' }}>{children}</Box>;
 };
 
 export const SXProps = {
   render: SXTemplate,
 
   args: {
-    variant: "body1_16_regular",
+    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.",
+      '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()),
+const StyledBox = styled('div', {
+  shouldForwardProp: (prop) => !['variant'].includes(prop.toString()),
 })<{ variant: (typeof variantArray)[number] }>(({ theme, variant }) => ({
   ...theme.typography[variant],
-  whiteSpace: "pre-line",
+  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>;
 };
@@ -119,16 +103,16 @@ export const Styled = {
   render: StyledTemplate,
 
   args: {
-    variant: "body1_16_regular",
+    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.",
+      '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 }) => ({
+  const StyledBox = styled("div")(({ theme }) => ({
     ...theme.typography.body1_16_regular,
     whiteSpace: "pre-line",
   }));
@@ -137,8 +121,8 @@ export const Styled = {
     <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",
+        language: 'tsx',
+        type: 'code',
       },
     },
   },

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

@@ -1,19 +1,19 @@
-import React from "react";
+import React from 'react';
 
-import { Box, styled, useTheme, TypographyProps } from "@mui/material";
+import { styled, TypographyProps } from '@mui/material';
 
-import Typography from "@/components/Typography";
+import Typography from '@/components/Typography';
 
-export const TypographyContent = styled(Box)({
-  display: "flex",
-  flexDirection: "column",
-  width: "100%",
+export const TypographyContent = styled('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
 });
 
-export const TypographyItem = styled(Box)({
-  display: "flex",
-  flexWrap: "wrap",
-  marginBottom: "24px",
+export const TypographyItem = styled('div')({
+  display: 'flex',
+  flexWrap: 'wrap',
+  marginBottom: '24px',
 });
 
 export const TypographyTitle = styled(Typography)(({ theme }) => ({
@@ -30,17 +30,10 @@ type ReadableArray<T> = Array<T> | ReadonlyArray<T>;
 interface TypographyGroupProps {
   heading: React.ReactNode;
   dummy: React.ReactNode;
-  variants: ReadableArray<
-    Exclude<TypographyProps["variant"], "inherit" | undefined>
-  >;
+  variants: ReadableArray<Exclude<TypographyProps['variant'], 'inherit' | undefined>>;
 }
 
-const TypographyGroup = ({
-  heading,
-  dummy,
-  variants,
-}: TypographyGroupProps) => {
-  const theme = useTheme();
+const TypographyGroup = ({ heading, dummy, variants }: TypographyGroupProps) => {
   return (
     <>
       <Typography variant="h4" component="h2" sx={{ mb: 5 }}>
@@ -48,13 +41,9 @@ const TypographyGroup = ({
       </Typography>
       <TypographyContent>
         {variants.map((variant) => {
-          const { fontWeight, fontSize, lineHeight } =
-            theme.typography[variant] ?? {};
           return (
             <TypographyItem key={variant}>
-              <TypographyTitle variant="body1_16_semibold">
-                {variant}
-              </TypographyTitle>
+              <TypographyTitle variant="body1_16_semibold">{variant}</TypographyTitle>
               <TypographyDummy variant={variant}>{dummy}</TypographyDummy>
             </TypographyItem>
           );

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

@@ -1,24 +1,18 @@
-const headline = [
-  "headline1",
-  "headline2",
-  "headline3",
-  "headline4",
-  "headline5",
-] as const;
+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",
-  "body_m2",
-  "body_reg6",
-  "body_reg8",
+  'body1_16_semibold',
+  'body1_16_regular',
+  'body2_14_bold',
+  'body2_14_medium',
+  'body2_14_regular',
+  'body3_12_semibold',
+  'body3_12_regular',
+  'body_m2',
+  'body_reg6',
+  'body_reg8',
 ] as const;
-const smallBody = ["small_body_sb1", "small_body_m2"] as const;
-const etc = ["button1", "button2", "caption", "overline"] as const;
+const smallBody = ['small_body_sb1', 'small_body_m2'] as const;
+const etc = ['button1', 'button2', 'caption', 'overline'] as const;
 
 export const variants = {
   headline,