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

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

@@ -7,33 +7,32 @@ import {
   TableCell,
 } from "@mui/material";
 import { action } from "@storybook/addon-actions";
-import { Bell } from "@lunit/design-system-icons";
+import Bell from "@lunit/design-system-icons/Bell";
 
 import ToggleButton from "@/components/ToggleButton";
 
-import type { ComponentStory, ComponentMeta } from "@storybook/react";
+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,
-        \n and only Icon can be checked when used with hasIconOnly.`,
+        \n It is added to the left of the text criteria`,
       table: {
         defaultValue: { summary: "undefined" },
         type: { summary: "React.ReactNode" },
       },
     },
-    hasIconOnly: {
-      description: `Option to handle so that only icons can be inserted
-          \n If set to false, you can add Text.`,
-      table: {
-        defaultValue: { summary: "false" },
-      },
-    },
     value: {
       control: false,
       table: { type: { summary: "any" } },
@@ -58,7 +57,6 @@ export default {
         type: "radio",
       },
       options: ["primary", "secondary"],
-      defaultValue: "primary",
       description: "Button has three Kinds Contained, Ghost",
       table: {
         defaultValue: { summary: "primary" },
@@ -69,7 +67,6 @@ export default {
         type: "radio",
       },
       options: ["contained", "outlined", "ghost"],
-      defaultValue: "contained",
       table: {
         defaultValue: { summary: "contained" },
       },
@@ -81,7 +78,6 @@ export default {
       control: {
         type: "boolean",
       },
-      defaultValue: false,
       table: {
         defaultValue: { summary: "false" },
       },
@@ -91,7 +87,6 @@ export default {
         type: "radio",
       },
       options: ["small", "medium", "large"],
-      defaultValue: "small",
       table: {
         defaultValue: { summary: "small" },
       },
@@ -106,7 +101,6 @@ export default {
         function: action("onClick"),
         undefined: undefined,
       },
-      defaultValue: "function",
       description:
         "It is a callback function that is called when the button is clicked.",
     },
@@ -118,13 +112,8 @@ export default {
         function: action("onChange"),
         undefined: undefined,
       },
-      defaultValue: "function",
     },
   },
-  args: {
-    selected: true,
-    kind: "contained",
-  },
   parameters: {
     controls: {
       include: [
@@ -148,9 +137,9 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof ToggleButton>;
+} as Meta<typeof ToggleButton>;
 
-const Template: ComponentStory<typeof ToggleButton> = (arg) => {
+const Template: StoryFn<typeof ToggleButton> = (arg) => {
   const [values, setValues] = useState({
     primary: true,
     secondary: true,
@@ -212,16 +201,23 @@ const Template: ComponentStory<typeof ToggleButton> = (arg) => {
   );
 };
 
-export const IconStory = Template.bind({});
-IconStory.storyName = "Icon";
-IconStory.argTypes = {
-  children: {
-    type: "string",
-    defaultValue: "text",
+export const IconStory = {
+  render: Template,
+  name: "Icon",
+
+  args: {
+    children: "Text",
+  },
+
+  argTypes: {
+    children: {
+      type: "string",
+      defaultValue: "text",
+    },
   },
 };
 
-const IconOnlyTemplate: ComponentStory<typeof ToggleButton> = (arg) => {
+const IconOnlyTemplate: StoryFn<typeof ToggleButton> = (arg) => {
   const [values, setValues] = useState({
     primary: true,
     secondary: true,
@@ -283,11 +279,14 @@ const IconOnlyTemplate: ComponentStory<typeof ToggleButton> = (arg) => {
   );
 };
 
-export const WithIconOnlyStory = IconOnlyTemplate.bind({});
-WithIconOnlyStory.storyName = "Icon only";
-WithIconOnlyStory.argTypes = {
-  children: {
-    type: "string",
-    controls: false,
+export const WithIconOnlyStory = {
+  render: IconOnlyTemplate,
+  name: "Icon only",
+
+  argTypes: {
+    children: {
+      type: "string",
+      controls: false,
+    },
   },
 };

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

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

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react";
 import {
   Alert,
   Box,
@@ -248,17 +248,21 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof Elevation>;
+} as Meta<typeof Elevation>;
 
-const ElevationBase: ComponentStory<typeof Elevation> = (
+const ElevationBase: StoryFn<typeof Elevation> = (
   args,
   { globals: { theme } }
 ) => <Elevation {...args} surface={theme} isBase />;
 
-const ElevationNesed: ComponentStory<typeof Elevation> = (
+const ElevationNesed: StoryFn<typeof Elevation> = (
   args,
   { globals: { theme } }
 ) => <Elevation {...args} surface={theme} />;
 
-export const Base = ElevationBase.bind({});
-export const Nested = ElevationNesed.bind({});
+export const Base = {
+  render: ElevationBase,
+};
+export const Nested = {
+  render: ElevationNesed,
+};

package/src/stories/foundation/Typography/{Typography.stories.mdx → Typography.mdx}

@@ -1,4 +1,5 @@
-import { Meta, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, Canvas, Story } from "@storybook/blocks";
+import * as TypographyStories from "./TypographyExamples.stories";
 
 import { Typography } from "@mui/material";
 
@@ -6,7 +7,7 @@ import { variants } from "./const";
 
 import TypographyGroup from "./TypographyGroup";
 
-<Meta title="Foundation/Typography/All Variants" component={Typography} />
+<Meta of={TypographyStories} />
 
 export const Template = (args) => <Typography {...args} />;
 
@@ -42,15 +43,15 @@ export const AllVariants = () => (
   </>
 );
 
-<Story name="all variants">
-  <AllVariants />
-</Story>
+<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>
 
@@ -59,6 +60,8 @@ export const AllVariants = () => (
 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>
 
@@ -67,5 +70,7 @@ In some situations you might not be able to use the Typography component. Hopefu
 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>

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

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ComponentStory } from "@storybook/react";
+import { StoryFn } from "@storybook/react";
 import { Box, Typography } from "@mui/material";
 import { styled } from "@mui/material/styles";
 
@@ -17,7 +17,7 @@ export default {
   },
 };
 
-const TypographyTemplate: ComponentStory<typeof Typography> = (args) => {
+const TypographyTemplate: StoryFn<typeof Typography> = (args) => {
   const { variant, children } = args;
   return (
     <Typography variant={variant} sx={{ whiteSpace: "pre-line" }}>
@@ -26,35 +26,41 @@ const TypographyTemplate: ComponentStory<typeof Typography> = (args) => {
   );
 };
 
-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.",
+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: ComponentStory<typeof Typography> = (args) => {
+const SXTemplate: StoryFn<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.",
+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 }) => ({
+})<{ variant: (typeof variantArray)[number] }>(({ theme, variant }) => ({
   ...theme.typography[variant],
   whiteSpace: "pre-line",
 }));
 
-const StyledTemplate: ComponentStory<typeof StyledBox> = (args) => {
+const StyledTemplate: StoryFn<typeof StyledBox> = (args) => {
   /**
 const StyledBox = styled(Box)(({ theme }) => ({
   ...theme.typography.body1_16_regular,
@@ -65,27 +71,31 @@ const StyledBox = styled(Box)(({ theme }) => ({
   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",
+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/colors/Colors.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/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";
@@ -55,10 +55,12 @@ export default {
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   title: "Foundation/Colors",
   component: BaseColors,
-} as ComponentMeta<typeof BaseColors>;
+} as Meta<typeof BaseColors>;
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const BaseTemplate: ComponentStory<typeof BaseColors> = () => <BaseColors />;
+const BaseTemplate: StoryFn<typeof BaseColors> = () => <BaseColors />;
 
-export const Base = BaseTemplate.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
+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

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import { ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import { Box, styled, TextField, Typography, useTheme } from "@mui/material";
 
 export const InComponentWithStyled = () => {
@@ -38,7 +38,7 @@ export default {
       </div>
     ),
   ],
-} as ComponentMeta<typeof InComponentWithStyled>;
+} as Meta<typeof InComponentWithStyled>;
 
 export const InComponentWithSx = () => {
   return (

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/theme.ts

@@ -34,6 +34,11 @@ const theme = createTheme({
     MuiTypography: {
       defaultProps: typographyDefaultProps,
     },
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true, // No more ripple, on the whole application 💣!
+      },
+    },
     // @todo add any MUI components theme exported from ./components/index.ts
   },
 });

package/src/stories/components/TextField/TextField.stories.tsx

@@ -1,13 +0,0 @@
-import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-
-import TextField from "@/components/TextField";
-
-export default {
-  title: "Components/TextField",
-  component: TextField,
-} as ComponentMeta<typeof TextField>;
-
-const Template: ComponentStory<typeof TextField> = () => <TextField />;
-
-export const LunitTextField = Template.bind({});