@lunit/design-system 1.0.0 → 2.0.0

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

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

@@ -2,8 +2,8 @@ import React from "react";
 import {
   Box,
   Table,
-  TableBody,
   TableCell,
+  TableBody,
   TableHead,
   TableRow,
 } from "@mui/material";
@@ -73,7 +73,7 @@ export default {
   decorators: [(Story) => <Box className="base00">{Story()}</Box>],
 } as Meta<typeof TextField>;
 
-const TextFieldSizeTemplate: StoryFn<typeof TextField> = (args) => (
+const TextFieldSizeWithTableTemplate: StoryFn<typeof TextField> = (args) => (
   <Table>
     <TableHead>
       <TableRow>
@@ -129,6 +129,29 @@ const TextFieldSizeTemplate: StoryFn<typeof TextField> = (args) => (
 );
 
 export const TextFieldSize = {
-  render: TextFieldSizeTemplate,
+  render: TextFieldSizeWithTableTemplate,
   name: "Size",
 };
+
+const TextFieldSizeTemplate: StoryFn<typeof TextField> = (args) => (
+  <Box sx={{ display: "flex", flexDirection: "column", gap: 4 }}>
+    <Box>
+      <TextField sx={{ mr: 4 }} {...args} />
+      <TextField sx={{ mr: 4 }} {...args} size="medium" />
+      <TextField {...args} size="large" />
+    </Box>
+    <Box>
+      <TextField sx={{ mr: 4 }} {...args} multiline />
+      <TextField sx={{ mr: 4 }} {...args} size="medium" multiline />
+      <TextField {...args} size="large" multiline />
+    </Box>
+  </Box>
+);
+
+export const TextFieldOnlySize = {
+  render: TextFieldSizeTemplate,
+  name: "Size Only",
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};