chore(design-system): add story about how to build the autoresize inp…

…ut (#947)

Because

- auto-resize input is good for our UX

This commit

- add story about how to build the autoresize input

packages/design-system/src/new-ui/Input/Input.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryFn } from "@storybook/react";
+import * as React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { Input } from "./Input";
 import { Icons } from "../Icons";
 
@@ -7,42 +8,70 @@ const meta: Meta = {
 };
 
 export default meta;
+type Story = StoryObj<typeof Input>;
 
-const TextWithIconTemplate: StoryFn = () => {
-  return (
-    <Input.Root>
-      {/* <Input.LeftIcon>
-          <Icons.Box className="w-5 h-5 my-auto stroke-slate-800" />
-        </Input.LeftIcon> */}
-      <Input.Core disabled={false} type="text" placeholder="Hello world" />
-      <Input.LeftIcon
-        onClick={() => {
-          alert("hi");
-        }}
-      >
-        <Icons.Box className="w-5 h-5 my-auto stroke-slate-800 cursor-pointer" />
-      </Input.LeftIcon>
-    </Input.Root>
-  );
+export const TextWithIcon: Story = {
+  render: () => {
+    return (
+      <Input.Root>
+        <Input.Core disabled={false} type="text" placeholder="Hello world" />
+        <Input.LeftIcon
+          onClick={() => {
+            alert("hi");
+          }}
+        >
+          <Icons.Box className="my-auto h-5 w-5 cursor-pointer stroke-slate-800" />
+        </Input.LeftIcon>
+      </Input.Root>
+    );
+  },
 };
 
-export const TextWithIcon: StoryFn<typeof Input> = TextWithIconTemplate.bind(
-  {}
-);
+export const FileInput: Story = {
+  render: () => {
+    return (
+      <Input.Root>
+        <Input.LeftIcon>
+          <Icons.Chip01 className="my-auto h-5 w-5 stroke-slate-800" />
+        </Input.LeftIcon>
+        <Input.Core
+          disabled={false}
+          type="file"
+          placeholder="Upload your chip"
+        />
+      </Input.Root>
+    );
+  },
+};
 
-TextWithIcon.args = {};
+const AutoresizeInputComp = () => {
+  const [value, setValue] = React.useState("");
 
-const FileTemplate: StoryFn = () => {
   return (
-    <Input.Root>
-      <Input.LeftIcon>
-        <Icons.Chip01 className="w-5 h-5 my-auto stroke-slate-800" />
-      </Input.LeftIcon>
-      <Input.Core disabled={false} type="file" placeholder="Upload your chip" />
-    </Input.Root>
+    <div className="flex">
+      <div className="relative h-10 min-w-[200px] max-w-[400px]">
+        <div
+          className="invisible !m-0 box-border h-full border-none"
+          contentEditable={true}
+          suppressContentEditableWarning={true}
+        >
+          {value}
+        </div>
+        <Input.Root className="!absolute !bottom-0 !left-0 !right-0 !top-0">
+          <Input.Core
+            onChange={(e) => {
+              setValue(e.target.value);
+            }}
+            disabled={false}
+            type="text"
+            placeholder="Hello world"
+          />
+        </Input.Root>
+      </div>
+    </div>
   );
 };
 
-export const File: StoryFn<typeof Input> = FileTemplate.bind({});
-
-File.args = {};
+export const AutoresizeInput: Story = {
+  render: () => <AutoresizeInputComp />,
+};