@lunit/design-system 2.0.2 → 2.2.0

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { StoryFn, Meta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react-webpack5";
 import {
   Alert,
   Box,
@@ -13,8 +13,6 @@ import {
   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";
 
@@ -96,23 +94,6 @@ const Elevation = ({ surface, isBase = false }: ElevationProps) => {
           </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 }}>

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

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Story } from "@storybook/blocks";
+import { Meta, Canvas, Story } from "@storybook/addon-docs/blocks";
 import * as TypographyStories from "./Typography.stories";
 
 import Typography from "@/components/Typography";

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

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { StoryFn } from "@storybook/react";
+import { StoryFn } from "@storybook/react-webpack5";
 import { Box } from "@mui/material";
 import { styled } from "@mui/material/styles";
 
@@ -29,6 +29,19 @@ export const AllVariants = () => (
       }
       variants={variants.body}
     />
+    <TypographyGroup
+      heading="Small Body Variation"
+      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.smallBody}
+    />
     <TypographyGroup
       heading="etc"
       dummy="NEWS & UPDATE 71456"

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

@@ -13,13 +13,18 @@ const body = [
   "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;
 
 export const variants = {
   headline,
   body,
+  smallBody,
   etc,
 };
 
-export const variantArray = [...headline, ...body, ...etc];
+export const variantArray = [...headline, ...body, ...smallBody, ...etc];

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { StoryFn, Meta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react-webpack5";
 import { Typography, useTheme } from "@mui/material";
 import { Color, ColorContainer, Container, PaletteContainer } from "./styled";
 import map from "lodash/map";
@@ -44,7 +44,7 @@ const BaseColors = () => {
               ))}
             </PaletteContainer>
           </div>
-        )
+        ),
       )}
     </Container>
   );

package/src/stories/foundation/colors/Docs.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Canvas, Meta } from "@storybook/addon-docs/blocks";
 
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { StoryFn, Meta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react-webpack5";
 import Pagination from "@mui/material/Pagination";
 import DeleteIcon from "@mui/icons-material/Delete";
 

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

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import { Meta } from "@storybook/react";
+import { Meta } from "@storybook/react-webpack5";
 import { Box, styled, TextField, Typography, useTheme } from "@mui/material";
 
 export const InComponentWithStyled = () => {

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

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react";
+import { Meta } from "@storybook/react-webpack5";
 import TokenPaletteTable from "./TokenPaletteTable";
 
 export default {

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

@@ -78,6 +78,16 @@ const TokenPaletteTable = ({ kind }: TokenPaletteTableProps) => {
     );
   };
 
+  const deprecatedTokenList = [
+    "btn_secondary_border",
+    "btn_selected_secondary_bg",
+    "datatable_border_01",
+    "datatable_border_02",
+    "hover",
+    "focused",
+    "selected",
+  ];
+
   return (
     <TableContainer>
       <Table stickyHeader>
@@ -100,7 +110,15 @@ const TokenPaletteTable = ({ kind }: TokenPaletteTableProps) => {
             <TableRow key={paletteKey}>
               <TableCell sx={{ height: "72px" }}>
                 <StyledTypography>
-                  {kind}.{paletteKey}
+                  {kind}.{paletteKey}{" "}
+                  {deprecatedTokenList.includes(paletteKey) && (
+                    <Box
+                      component="span"
+                      sx={{ color: "red", fontWeight: "bold" }}
+                    >
+                      (Deprecated)
+                    </Box>
+                  )}
                 </StyledTypography>
               </TableCell>
               <TokenPaletteCell

package/tsconfig.json

@@ -5,7 +5,6 @@
     "jsx": "react",
     "strict": true,
     "allowSyntheticDefaultImports": true,
-    "lib": ["es6", "dom"],
     "noImplicitThis": true,
     "strictNullChecks": true,
     "baseUrl": "./",

package/dist/cjs/components/Modal/index.js

@@ -1,2 +0,0 @@
-(()=>{"use strict";var e={d:(r,t)=>{for(var o in t)e.o(t,o)&&!e.o(r,o)&&Object.defineProperty(r,o,{enumerable:!0,get:t[o]})},o:(e,r)=>Object.prototype.hasOwnProperty.call(e,r),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},r={};e.r(r),e.d(r,{default:()=>l});const t=require("react/jsx-runtime"),o=require("@mui/material"),l=()=>(0,t.jsx)(o.Box,{children:"Modal"});module.exports=r})();
-//# sourceMappingURL=index.js.map

package/dist/cjs/components/Modal/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"components/Modal/index.js","mappings":"mBACA,IAAIA,EAAsB,CCA1BA,EAAwB,CAACC,EAASC,KACjC,IAAI,IAAIC,KAAOD,EACXF,EAAoBI,EAAEF,EAAYC,KAASH,EAAoBI,EAAEH,EAASE,IAC5EE,OAAOC,eAAeL,EAASE,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDH,EAAwB,CAACS,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFV,EAAyBC,IACH,oBAAXa,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAeL,EAASa,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAeL,EAAS,aAAc,CAAEe,OAAO,GAAO,G,mCCL9D,MAAM,EAA+BC,QAAQ,qBCAvC,EAA+BA,QAAQ,iBCO7C,EAJc,KACL,SAAC,EAAAC,IAAG,oB","sources":["webpack://@lunit/design-system/webpack/bootstrap","webpack://@lunit/design-system/webpack/runtime/define property getters","webpack://@lunit/design-system/webpack/runtime/hasOwnProperty shorthand","webpack://@lunit/design-system/webpack/runtime/make namespace object","webpack://@lunit/design-system/external commonjs \"react/jsx-runtime\"","webpack://@lunit/design-system/external commonjs \"@mui/material\"","webpack://@lunit/design-system/./src/components/Modal/Modal.tsx"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"react/jsx-runtime\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@mui/material\");","import React from \"react\";\nimport { Box } from \"@mui/material\";\n\nconst Modal = () => {\n  return <Box>Modal</Box>;\n};\n\nexport default Modal;\n"],"names":["__webpack_require__","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","require","Box"],"sourceRoot":""}

package/dist/components/Modal/Modal.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from "@mui/material";
-const Modal = () => {
-    return _jsx(Box, { children: "Modal" });
-};
-export default Modal;
-//# sourceMappingURL=Modal.js.map

package/dist/components/Modal/Modal.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEpC,MAAM,KAAK,GAAG,GAAG,EAAE;IACjB,OAAO,KAAC,GAAG,wBAAY,CAAC;AAC1B,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Modal/index.js

@@ -1,2 +0,0 @@
-export { default } from "./Modal";
-//# sourceMappingURL=index.js.map

package/dist/components/Modal/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/dist/types/components/Modal/Modal.d.ts

@@ -1,2 +0,0 @@
-declare const Modal: () => import("react/jsx-runtime").JSX.Element;
-export default Modal;

package/dist/types/components/Modal/index.d.ts

@@ -1 +0,0 @@
-export { default } from "./Modal";

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

@@ -1,221 +0,0 @@
-import React from "react";
-import { action } from "@storybook/addon-actions";
-
-import ToggleButton from "@/components/ToggleButton";
-import ToggleButtonGroup from "@/components/ToggleButtonGroup";
-
-import type { StoryFn, Meta } from "@storybook/react";
-
-export default {
-  title: "Components/ToggleButton",
-  component: ToggleButton,
-  args: {
-    children: "Text",
-    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: {
-        type: "radio",
-      },
-      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" },
-      },
-    },
-    onChange: {
-      type: "function",
-      control: false,
-      options: ["function", undefined],
-      mapping: {
-        function: action("onChange"),
-        undefined: undefined,
-      },
-    },
-    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: [
-        "value",
-        "kind",
-        "selectedColor",
-        "onClick",
-        "children",
-        "disabled",
-        "size",
-        "selected",
-        "color",
-        "onChange",
-        "icon",
-      ],
-    },
-    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 GroupTemplate: StoryFn<typeof ToggleButton> = (arg) => {
-  const [alignment, setAlignment] = React.useState<string | null>("left");
-
-  const handleAlignment = (
-    event: React.MouseEvent<HTMLElement>,
-    newAlignment: string | null
-  ) => {
-    setAlignment(newAlignment);
-  };
-
-  return (
-    <ToggleButtonGroup
-      value={alignment}
-      exclusive
-      onChange={handleAlignment}
-      aria-label="text alignment"
-      sx={{
-        "& button": {
-          marginRight: "7px",
-        },
-      }}
-    >
-      <ToggleButton {...arg} value="left">
-        left
-      </ToggleButton>
-      <ToggleButton {...arg} value="center">
-        center
-      </ToggleButton>
-      <ToggleButton {...arg} value="right">
-        right
-      </ToggleButton>
-      <ToggleButton {...arg} value="justify" disabled>
-        justify
-      </ToggleButton>
-    </ToggleButtonGroup>
-  );
-};
-
-export const Group = {
-  render: GroupTemplate,
-  name: "Group",
-};
-
-const GroupMultipleTemplate: StoryFn<typeof ToggleButton> = (arg) => {
-  const [alignments, setAlignments] = React.useState(() => ["left", "center"]);
-
-  const handleAlignments = (
-    event: React.MouseEvent<HTMLElement>,
-    newAlignment: string[]
-  ) => {
-    setAlignments(newAlignment);
-  };
-
-  return (
-    <ToggleButtonGroup
-      value={alignments}
-      onChange={handleAlignments}
-      aria-label="text alignment"
-      sx={{
-        "& button": {
-          marginRight: "7px",
-        },
-      }}
-    >
-      <ToggleButton {...arg} value="left">
-        left
-      </ToggleButton>
-      <ToggleButton {...arg} value="center">
-        center
-      </ToggleButton>
-      <ToggleButton {...arg} value="right">
-        right
-      </ToggleButton>
-      <ToggleButton {...arg} value="justify" disabled>
-        justify
-      </ToggleButton>
-    </ToggleButtonGroup>
-  );
-};
-
-export const GroupMultiple = {
-  render: GroupMultipleTemplate,
-  name: "Group: Multiple selection",
-};