@lunit/design-system 1.0.0-b.4 → 2.0.0

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>
+    );
+  },
+};

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

@@ -0,0 +1,214 @@
+import React from "react";
+import { Box } from "@mui/material";
+import { Bell } from "@lunit/design-system-icons";
+
+import TextField from "@/components/TextField/TextField";
+
+import type { StoryObj, Meta, StoryFn } from "@storybook/react";
+
+export default {
+  title: "Components/TextField",
+  component: TextField,
+  args: {
+    multiline: false,
+    size: "small",
+    disabled: false,
+    error: false,
+    placeholder: "Please typing...",
+    helperText: "",
+  },
+  argTypes: {
+    multiline: {
+      control: {
+        type: "radio",
+      },
+      options: [true, false],
+      description:
+        "The multiline prop transforms the text field into a TextareaAutosize element.",
+    },
+    error: {
+      control: {
+        type: "radio",
+      },
+      options: [true, false],
+      description:
+        "The error prop toggles the error state. The helperText prop can then be used to provide feedback to the user about the error.",
+    },
+    disabled: {
+      control: {
+        type: "radio",
+      },
+      options: [true, false],
+      description: "If true, the text field will be disabled.",
+      table: {
+        defaultValue: { summary: false },
+        type: { summary: [true, false] },
+      },
+    },
+    size: {
+      control: {
+        type: "radio",
+      },
+      description: "The size of the text field.",
+      table: {
+        defaultValue: { summary: "small" },
+        type: { summary: ["small", "medium", "large"] },
+      },
+    },
+    placeholder: {
+      type: "string",
+      description: "The placeholder content.",
+      table: {
+        defaultValue: { summary: "undefined" },
+        type: { summary: "string" },
+      },
+    },
+    helperText: {
+      type: "string",
+      description:
+        'The helper text content, use "error " or "sub text " to display helper text.',
+      table: {
+        defaultValue: { summary: "undefined" },
+        type: { summary: "string" },
+      },
+    },
+  },
+  parameters: {
+    controls: {
+      include: [
+        "size",
+        "disabled",
+        "helperText",
+        "placeholder",
+        "multiline",
+        "error",
+      ],
+    },
+    docs: {
+      description: {
+        component: `It is a text field that allows users to enter and edit text.
+          \n It is usually used in forms. It can be used as a single line or multi-line text field.
+          \n It can be used with an icon on the left or right side.`,
+      },
+    },
+  },
+  decorators: [(Story) => <Box>{Story()}</Box>],
+} as Meta<typeof TextField>;
+
+export const BasicTextField: StoryObj<typeof TextField> = {
+  render: (args) => <TextField {...args}>{args.children}</TextField>,
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+const MultiAndSingleTemplate: StoryFn<typeof TextField> = (args) => {
+  return (
+    <Box sx={{ display: "flex", gap: 2 }}>
+      <TextField {...args} />
+      <TextField {...args} multiline={true} />
+    </Box>
+  );
+};
+
+export const MultiAndSingle: StoryObj<typeof TextField> = {
+  render: MultiAndSingleTemplate,
+  parameters: {
+    controls: {
+      include: ["size", "disabled", "helperText", "placeholder", "error"],
+    },
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+const DisabledTemplate: StoryFn<typeof TextField> = (args) => {
+  return (
+    <Box sx={{ display: "flex", gap: 2 }}>
+      <TextField {...args} disabled />
+      <TextField {...args} multiline={true} disabled />
+    </Box>
+  );
+};
+
+export const Disabled: StoryObj<typeof TextField> = {
+  render: DisabledTemplate,
+  parameters: {
+    controls: {
+      include: ["size", "helperText", "placeholder", "error", "disabled"],
+    },
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+const ErrorTemplate: StoryFn<typeof TextField> = (args) => {
+  return (
+    <Box sx={{ display: "flex", gap: 2 }}>
+      <TextField {...args} error />
+      <TextField {...args} multiline={true} error />
+    </Box>
+  );
+};
+
+export const Error: StoryObj<typeof TextField> = {
+  render: ErrorTemplate,
+  parameters: {
+    controls: {
+      include: ["size", "helperText", "placeholder", "disabled"],
+    },
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+const PlaceholderTemplate: StoryFn<typeof TextField> = (args) => {
+  return (
+    <Box sx={{ display: "flex", gap: 2 }}>
+      <TextField {...args} placeholder="Please typing..." />
+      <TextField {...args} multiline={true} placeholder="Please typing..." />
+    </Box>
+  );
+};
+
+export const Placeholder: StoryObj<typeof TextField> = {
+  render: PlaceholderTemplate,
+  parameters: {
+    controls: {
+      include: ["size", "helperText", "disabled", "error"],
+    },
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+const HelperTextTemplate: StoryFn<typeof TextField> = (args) => {
+  return (
+    <Box sx={{ display: "flex", gap: 2 }}>
+      <TextField {...args} helperText="helper text" />
+      <TextField {...args} multiline={true} helperText="helper text" />
+    </Box>
+  );
+};
+
+export const HelperText: StoryObj<typeof TextField> = {
+  render: HelperTextTemplate,
+  parameters: {
+    controls: {
+      include: ["size", "disabled", "error", "placeholder"],
+    },
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+const IconTemplate: StoryFn<typeof TextField> = (args) => {
+  return (
+    <Box sx={{ display: "flex", gap: 2 }}>
+      <TextField {...args} leftIcon={<Bell />} />
+      <TextField {...args} rightIcon={<Bell />} />
+    </Box>
+  );
+};
+
+export const Icon: StoryObj<typeof TextField> = {
+  render: IconTemplate,
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};

package/src/stories/components/TextField/TextFieldDocs.mdx

@@ -0,0 +1,140 @@
+import { Canvas, Stories, Controls, Meta, Story } from "@storybook/blocks";
+import Box from "@mui/material/Box";
+
+import TextField from "@/components/TextField";
+import * as TextFieldStories from "./BasicTextField.stories";
+import * as TextFieldSizeStories from "./TextFieldSize.stories";
+
+<Meta name="TextField Docs" of={TextFieldStories} />
+
+# TextField
+
+Text Fields let users enter and edit text.
+
+## Usage
+
+### Basic TextField
+
+```tsx
+import { TextField } from "@lunit/design-system";
+// or
+import TextField from "@lunit/design-system/TextField";
+
+<TextField />;
+```
+
+### Demo
+
+<Canvas of={TextFieldStories.BasicTextField} sourceState="none" />
+
+<Controls />
+
+### MultiLine
+
+The multiline prop transforms the text field into a [TextareaAutosize](https://mui.com/material-ui/react-textarea-autosize/) element.<br />
+If multiline is undefined, it behaves the same as false.<br />
+Default multiline is `false`.
+
+<Canvas of={TextFieldStories.MultiAndSingle} sourceState="none" />
+
+```tsx
+<TextField />
+<TextField multiline />
+```
+
+### Size
+
+The TextField have three sizes: `small`, `medium` and `large`.<br />
+Using the `size` prop, you can change the size of the TextField.<br />
+Default size is `small`.
+
+<Canvas
+  of={TextFieldSizeStories.TextFieldSize}
+  meta={TextFieldSizeStories}
+  sourceState="none"
+/>
+
+```tsx
+// multiline is false or undefined
+<TextField size="small" />
+<TextField size="medium" />
+<TextField size="large" />
+
+// multiline is true
+<TextField multiline size="small" />
+<TextField multiline size="medium" />
+<TextField multiline size="large" />
+```
+
+### Disabled
+
+If you want to disable the TextField, you can use the `disabled` prop.<br />
+Default disabled is `false`.
+
+<Canvas of={TextFieldStories.Disabled} sourceState="none" />
+
+```tsx
+<TextField disabled />
+<TextField multiline disabled />
+```
+
+### Error
+
+The error prop toggles the error state.<br />
+The helperText prop can then be used to provide feedback to the user about the error.<br />
+Default error is `false`.
+
+<Canvas of={TextFieldStories.Error} sourceState="none" />
+
+```tsx
+<TextField {...args} error />
+<TextField {...args} error multiline={true} />
+```
+
+### Placeholder
+
+The placeholder attribute defines the text displayed in a form control when the control has no value.<br />
+The placeholder text should provide a brief hint to the user as to the expected type of data<br />
+that should be entered into the control.
+
+<Canvas of={TextFieldStories.Placeholder} sourceState="none" />
+
+```tsx
+<TextField placeholder="Please typing..." />
+<TextField multiline placeholder="Please typing..." />
+```
+
+### helperText
+
+The helper text content, use "error " or "sub text " to display helper text.
+
+<Canvas of={TextFieldStories.HelperText} sourceState="none" />
+
+```tsx
+<TextField helperText="helper text" />
+<TextField multiline helperText="helper text" />
+```
+
+### Icon
+
+TextField icons can be added to the left and right sides.<br />
+Use the leftIcon prop for the left side and the rightIcon prop for the right side. <br />
+Icon can only be used with a single TextField.
+
+<Canvas of={TextFieldStories.Icon} sourceState="none" />
+
+```tsx
+<TextField leftIcon={<Bell />} />
+<TextField rightIcon={<Bell />} />
+```
+
+## Reference
+
+- [Material-UI TextField](https://mui.com/material-ui/react-text-field/)
+- [Material-UI TextField API](https://mui.com/material-ui/api/text-field/)
+- [Lunit Design System TextField Figma](https://www.figma.com/file/BSdRUpEPp7XiJ9YnEqpf6F/1.0.0_Components?node-id=284%3A151&mode=dev)
+
+## Support
+
+- Github: [Create a new issue](https://github.com/lunit-io/design-system/issues/new)
+- Slack: #tf_design_system