@lunit/design-system 1.0.0 → 2.0.0

package/src/stories/components/Chip/Chip.stories.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { Meta } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
+import { Box } from "@mui/system";
+
 import Chip from "@/components/Chip";
 import {
   Logo16,
@@ -17,6 +19,10 @@ export default {
   argTypes: {
     kind: {
       description: `Default status of Contained or Outlined Chip is readOnly. You can pass onClick, onDelete or thumbnail to Contained Chip only.`,
+      control: {
+        type: "select",
+      },
+      options: ["contained", "outlined"],
     },
     variant: {
       description: `The variant is alias of kind. It is Filled or Outlined.`,
@@ -102,6 +108,8 @@ export default {
   },
 } as Meta<typeof Chip>;
 
+export const Basic = {};
+
 export const Outlined = {
   parameters: {
     docs: {
@@ -153,6 +161,41 @@ export const Contained = {
   name: "Kind(Variant): Contained / Read Only",
 };
 
+export const Kind = {
+  chromatic: { disableSnapshot: true },
+  render: () => (
+    <Box sx={{ display: "flex", flexDirection: "row", gap: 4 }}>
+      <Chip kind="outlined" label="label@lunit.io" />
+      <Chip kind="contained" label="label@lunit.io" />
+    </Box>
+  ),
+};
+
+export const Color = {
+  chromatic: { disableSnapshot: true },
+  render: () => (
+    <Box sx={{ display: "flex", flexDirection: "row", gap: 4 }}>
+      <Chip color="primary" label="label@lunit.io" />
+      <Chip color="secondary" label="label@lunit.io" />
+      <Chip color="warning" label="label@lunit.io" />
+      <Chip color="error" label="label@lunit.io" />
+      <Chip color="success" label="label@lunit.io" />
+    </Box>
+  ),
+};
+
+export const Thumbnail = {
+  chromatic: { disableSnapshot: true },
+  render: () => (
+    <Box sx={{ display: "flex", flexDirection: "row", gap: 4 }}>
+      <Chip thumbnail={<Logo16 />} label="label@lunit.io" />
+      <Chip thumbnail={<Avatar16 />} label="label@lunit.io" />
+      <Chip thumbnail={<Success16 />} label="label@lunit.io" />
+      <Chip thumbnail="W as initial" label="label@lunit.io" />
+    </Box>
+  ),
+};
+
 export const ContainedWithClick = {
   args: {
     ...Contained.args,
@@ -216,3 +259,25 @@ export const ContainedWithThumbnail = {
 
   name: "Kind(Variant): Contained with Thumbnail",
 };
+
+export const ContainedWithDeleteAndThumbnail = {
+  args: {
+    ...Contained.args,
+    thumbnail: "Initial",
+    onClick: undefined,
+    onDelete: action("onDelete"),
+  },
+
+  parameters: {
+    docs: {
+      description: {
+        story: `Contained chip can have thumbnail and delete button.`,
+      },
+    },
+    controls: {
+      exclude: ["onClick"],
+    },
+  },
+
+  name: "Kind(Variant): Contained with Thumbnail and Deletable",
+};

package/src/stories/components/Chip/ChipDocs.mdx

@@ -0,0 +1,132 @@
+import { Canvas, Stories, Controls, Meta, Story } from "@storybook/blocks";
+import { Error } from "@lunit/design-system-icons";
+
+import Chip from "@/components/Chip";
+import * as ChipStories from "./Chip.stories";
+
+<Meta name="Chip Docs" of={ChipStories} />
+
+# Chip
+
+Chips are compact elements that represent an input, attribute, or action.
+
+## Usage
+
+### Basic Chip
+
+```tsx
+import { Chip } from "@lunit/design-system";
+// or
+import Chip from "@lunit/design-system/Chip";
+
+<Chip />;
+```
+
+### Demo
+
+<Canvas of={ChipStories.Basic} />
+
+<Controls />
+
+### Label
+
+The label is the text that will be displayed in the Chip.
+If the label is not provided, the Chip will be rendered as a circle.
+
+<Canvas of={ChipStories.Contained} meta={ChipStories.Contained.meta} />
+```tsx
+<Chip label="label@lunit.io" />
+````
+
+### Kind(variant)
+
+The Chip has 2 kinds of variants: outlined and contained. <br />
+(In the Lunit Design System, the variant and kind are used interchangeably. The variant is a fallback prop of the kind.) <br />
+You can change the kind of the Chip by using the kind or variant prop, and the outcome will be the same.
+The `contained` kind corresponds to the `filled` and `contained` variants of the MUI system. <br />
+The default kind(variant) is contained. <br />
+
+<Canvas of={ChipStories.Kind} meta={ChipStories.Contained.meta} />
+```tsx
+<Chip variant="contained" label="label@lunit.io" />
+<Chip variant="outlined" label="label@lunit.io" />
+// or (kind is a fallback prop of the variant)
+<Chip kind="contained" label="label@lunit.io" />
+<Chip kind="outlined" label="label@lunit.io" />
+````
+
+### Color
+
+The Chip has 5 kinds of colors: `primary`, `secondary`, `warning`, `error`, and `success`. <br />
+By using the color prop, you can change the color of the Chip. <br />
+The default color is `primary`.
+
+<Canvas of={ChipStories.Color} meta={ChipStories.Contained.meta} />
+
+```tsx
+<Chip color="primary" label="label@lunit.io" />
+<Chip color="secondary" label="label@lunit.io" />
+<Chip color="warning" label="label@lunit.io" />
+<Chip color="error" label="label@lunit.io" />
+<Chip color="success" label="label@lunit.io" />
+```
+
+### Clickable
+
+Chips with the `onClick` are clickable. <br />
+You cannot pass the `onClick` prop to the Chip when its variant is `outlined`. <br />
+
+<Canvas of={ChipStories.ContainedWithClick} />
+```tsx
+<Chip label="label@lunit.io" onClick={() => console.log("onClick")} />
+
+````
+
+### Deletable
+
+Chips with the `onDelete` are deletable. <br />
+You cannot pass the `onDelete` prop to the Chip when its variant is `outlined`. <br />
+The hover/pressed effects are only applied to the delete icon. <br />
+
+<Canvas of={ChipStories.ContainedWithDelete} />
+
+```tsx
+<Chip label="label@lunit.io" onDelete={() => console.log("onDelete")} />
+
+````
+
+### Thumbnail(logo, avatar, icon, first letter)
+
+Chips with the thumbnail prop can display a logo, avatar, icon, or the first letter of a string.<br />
+The thumbnail replaces all the left side icons of MUI, so you cannot use the icon or avatar prop of the MUI system. <br />
+The thumbnail prop cannot be used when the kind (variant) is outlined.
+
+<Canvas of={ChipStories.Thumbnail} />
+```tsx
+<Chip thumbnail={<Logo16 />} label="label@lunit.io" />
+<Chip thumbnail={<Avatar16 />} label="label@lunit.io" />
+<Chip thumbnail={<Success16 />} label="label@lunit.io" />
+<Chip thumbnail="W as initial" label="label@lunit.io" />
+
+````
+
+### Thumbnail and Deletable
+
+The Chip can have a thumbnail and be deletable. <br />
+The hover/pressed effects are only applied to the delete icon. <br />
+
+<Canvas of={ChipStories.ContainedWithDeleteAndThumbnail} />
+```tsx
+<Chip label="label@lunit.io" onDelete={() => console.log("onDelete")} thumbnail="W as initial" />
+````
+
+## Reference
+
+- [Material-UI Chip](https://mui.com/material-ui/react-chip/)
+- [Material-UI Chip API](https://mui.com/material-ui/api/chip/)
+- [Lunit Design System Chip Figma](https://www.figma.com/file/oh2WsSLBuX30Yp589gyliB/Design-System_1.0.7_Latest?type=design&node-id=1887-7970&mode=design)
+
+## Support
+
+- Github: [Create a new issue](https://github.com/lunit-io/design-system/issues/new)
+- Slack: #tf_design_system

package/src/stories/components/Dialog/Dialog.stories.tsx

@@ -0,0 +1,320 @@
+import React, { useState } from "react";
+import { Box } from "@mui/material";
+import Error from "@lunit/design-system-icons/Error";
+
+import Button from "@/components/Button";
+import Dialog from "@/components/Dialog";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Dialog> = {
+  title: "components/Dialog",
+  component: Dialog,
+  tags: ["autodocs"],
+  parameters: {
+    docs: { disable: true, hidden: true },
+  },
+  argTypes: {
+    onClose: { action: "onClose" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Dialog>;
+
+export const PassiveModal: Story = {
+  name: "Type: passive modal",
+  render: function PassiveModalRender(_Story, context) {
+    const classNameFromGlobal = context.globals.theme;
+    const [target, setTarget] = useState<HTMLDivElement | null>(null);
+
+    return (
+      <div style={{ width: "100vw", height: "100vh" }}>
+        <div ref={(ref) => setTarget(ref)} />
+        <Dialog
+          className={classNameFromGlobal}
+          isOpen={Boolean(target)}
+          onClose={close}
+          type="passive"
+          title="Title area"
+        >
+          Lorem Ipsum is simply dummy text of the a printing and typesetting
+          industry
+        </Dialog>
+      </div>
+    );
+  },
+};
+
+export const ActionModal: Story = {
+  name: "Type: action modal",
+  render: function ActionModalRender(_Story, context) {
+    const classNameFromGlobal = context.globals.theme;
+    const [target, setTarget] = useState<HTMLDivElement | null>(null);
+
+    return (
+      <div style={{ width: "100vw", height: "100vh" }}>
+        <div ref={(ref) => setTarget(ref)} />
+        <Dialog
+          className={classNameFromGlobal}
+          isOpen={Boolean(target)}
+          onClose={close}
+          type="action"
+          title="Title area"
+          actions={
+            <>
+              <Button
+                kind="ghost"
+                color="secondary"
+                size="medium"
+                onClick={close}
+              >
+                Cancel
+              </Button>
+              <Button kind="contained" size="medium" onClick={close}>
+                Save
+              </Button>
+            </>
+          }
+        >
+          Lorem Ipsum is simply dummy text of the a printing and typesetting
+          industry
+        </Dialog>
+      </div>
+    );
+  },
+};
+
+export const NonModal: Story = {
+  name: "Type: non modal",
+  render: function NonModalRender(_Story, context) {
+    const classNameFromGlobal = context.globals.theme;
+    const [isOpen, setIsOpen] = useState(false);
+    function open() {
+      setIsOpen(true);
+    }
+
+    function close() {
+      setIsOpen(false);
+    }
+
+    return (
+      <>
+        <Box sx={{ display: "flex", gap: "8px" }}>
+          <Button kind="contained" size="medium" onClick={open}>
+            Open to see Dialog
+          </Button>
+          <Button kind="contained" size="medium" onClick={close}>
+            click to close Dialog
+          </Button>
+        </Box>
+
+        <Dialog
+          className={classNameFromGlobal}
+          isOpen={isOpen}
+          nonModal
+          type="action"
+          onClose={close}
+          title="Title area"
+          actions={
+            <>
+              <Button
+                kind="ghost"
+                color="secondary"
+                size="medium"
+                onClick={close}
+              >
+                Cancel
+              </Button>
+              <Button kind="contained" size="medium" onClick={close}>
+                Save
+              </Button>
+            </>
+          }
+        >
+          Lorem Ipsum is simply dummy text of the a printing and typesetting
+          industry
+        </Dialog>
+      </>
+    );
+  },
+};
+
+export const SmallFalse: Story = {
+  name: "Option: small false",
+  render: function SmallFalseRender(_Story, context) {
+    const classNameFromGlobal = context.globals.theme;
+    const [target, setTarget] = useState<HTMLDivElement | null>(null);
+
+    return (
+      <div style={{ width: "100vw", height: "100vh" }}>
+        <div ref={(ref) => setTarget(ref)} />
+        <Dialog
+          className={classNameFromGlobal}
+          isOpen={Boolean(target)}
+          type="passive"
+          onClose={close}
+          title="Title area"
+          size="medium"
+        >
+          Lorem Ipsum is simply dummy text of the a printing and typesetting
+          industry
+        </Dialog>
+      </div>
+    );
+  },
+};
+
+export const WithTitleIcon: Story = {
+  name: "Option: title icon",
+  render: function WithTitleIconRender(_Story, context) {
+    const classNameFromGlobal = context.globals.theme;
+    const [target, setTarget] = useState<HTMLDivElement | null>(null);
+
+    return (
+      <div style={{ width: "100vw", height: "100vh" }}>
+        <div ref={(ref) => setTarget(ref)} />
+        <Dialog
+          className={classNameFromGlobal}
+          isOpen={Boolean(target)}
+          type="action"
+          onClose={close}
+          title="Title area"
+          titleIcon={<Error color="error" variant="filled" />}
+          actions={
+            <>
+              <Button
+                kind="ghost"
+                color="secondary"
+                size="medium"
+                onClick={close}
+              >
+                Cancel
+              </Button>
+              <Button
+                kind="contained"
+                color="error"
+                size="medium"
+                onClick={close}
+              >
+                Confirm
+              </Button>
+            </>
+          }
+        >
+          Lorem Ipsum is simply dummy text of the a printing and typesetting
+          industry
+        </Dialog>
+      </div>
+    );
+  },
+};
+
+export const WithCustomStyle: Story = {
+  name: "Option: custom style",
+  render: function WithCustomStyleRender(_Story, context) {
+    const classNameFromGlobal = context.globals.theme;
+    const [target, setTarget] = useState<HTMLDivElement | null>(null);
+
+    return (
+      <div style={{ width: "100vw", height: "100vh" }}>
+        <div ref={(ref) => setTarget(ref)} />
+        <Dialog
+          className={classNameFromGlobal}
+          isOpen={Boolean(target)}
+          type="passive"
+          onClose={close}
+          title="Title area"
+          sx={{
+            "& .dialog-title-wrapper": {
+              border: "4px dashed red",
+              borderRadius: "10px",
+              backgroundColor: "green",
+            },
+          }}
+        >
+          Lorem Ipsum is simply dummy text of the a printing and typesetting
+          industry
+        </Dialog>
+      </div>
+    );
+  },
+};
+
+export const WithScroll: Story = {
+  name: "Option: with scroll",
+  render: function WithScrollRender(_Story, context) {
+    const classNameFromGlobal = context.globals.theme;
+    const [target, setTarget] = useState<HTMLDivElement | null>(null);
+
+    return (
+      <div style={{ width: "100vw", height: "100vh" }}>
+        <div ref={(ref) => setTarget(ref)} />
+        <Dialog
+          className={classNameFromGlobal}
+          isOpen={Boolean(target)}
+          type="action"
+          onClose={close}
+          title="Title area"
+          actions={
+            <>
+              <Button
+                kind="ghost"
+                color="secondary"
+                size="medium"
+                onClick={close}
+              >
+                Cancel
+              </Button>
+              <Button
+                kind="contained"
+                color="error"
+                size="medium"
+                onClick={close}
+              >
+                Confirm
+              </Button>
+            </>
+          }
+        >
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis,
+          suscipit at. Atque enim, hic architecto sequi libero deserunt dolores
+          omnis, cumque dignissimos ab animi. Recusandae saepe facere error
+          tempore quasi. Lorem ipsum dolor sit amet consectetur adipisicing
+          elit. Consectetur eius commodi deserunt reiciendis. Officia veniam
+          consequuntur doloribus debitis numquam ipsum autem, eos repellendus
+          eligendi esse voluptatum natus, cum optio? Unde! Lorem ipsum dolor sit
+          amet consectetur adipisicing elit. Quibusdam praesentium incidunt
+          tempora quam aut nulla corrupti ipsa voluptatem vitae soluta ex
+          officia, explicabo, voluptate porro. Eius mollitia veritatis corporis
+          neque. Lorem Ipsum is simply dummy text of the a printing and
+          typesetting industry Lorem ipsum dolor sit amet consectetur Lorem
+          ipsum dolor sit amet consectetur, adipisicing elit. Quis, suscipit at.
+          Atque enim, hic architecto sequi libero deserunt dolores omnis, cumque
+          dignissimos ab animi. Recusandae saepe facere error tempore quasi.
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
+          eius commodi deserunt reiciendis. Officia veniam consequuntur
+          doloribus debitis numquam ipsum autem, eos repellendus eligendi esse
+          voluptatum natus, cum optio? Unde! Lorem ipsum dolor sit amet
+          consectetur adipisicing elit. Quibusdam praesentium incidunt tempora
+          quam aut nulla corrupti ipsa voluptatem vitae soluta ex officia,
+          explicabo, voluptate porro. Eius mollitia veritatis corporis neque.
+          Lorem Ipsum is simply dummy text of the a printing and typesetting
+          industry Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit
+          amet consectetur, adipisicing elit. Quis, suscipit at. Atque enim, hic
+          architecto sequi libero deserunt dolores omnis, cumque dignissimos ab
+          animi. Recusandae saepe facere error tempore quasi. Lorem ipsum dolor
+          sit amet consectetur adipisicing elit. Consectetur eius commodi
+          deserunt reiciendis. Officia veniam consequuntur doloribus debitis
+          numquam ipsum autem, eos repellendus eligendi esse voluptatum natus,
+          cum optio? Unde! Lorem ipsum dolor sit amet consectetur adipisicing
+          elit. Quibusdam praesentium incidunt tempora quam aut nulla corrupti
+          ipsa voluptatem vitae soluta ex officia, explicabo, voluptate porro.
+          Eius mollitia veritatis corporis neque. Lorem Ipsum is simply dummy
+          text of the a printing and typesetting industry Lorem ipsum dolor sit
+          amet consectetur
+        </Dialog>
+      </div>
+    );
+  },
+};