feat: rewrite text field

daangn · Jan 4, 2025 · 9cdc8f3 · 9cdc8f3
1 parent c97ab18
commit 9cdc8f3
Show file tree

Hide file tree

Showing 65 changed files with 2,168 additions and 1,400 deletions.
diff --git a/docs/components/example/index.json b/docs/components/example/index.json
diff --git a/docs/components/example/multiline-text-field-constraints.tsx b/docs/components/example/multiline-text-field-constraints.tsx
@@ -1,12 +1,12 @@
-import { FormControl, MultilineTextField } from "seed-design/ui/text-field";
+import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";
 
 export default function MultilineTextFieldConstraints() {
   return (
-    <FormControl label="라벨" description="설명을 써주세요">
-      <MultilineTextField
+    <TextField label="라벨" description="설명을 써주세요">
+      <TextFieldTextarea
         placeholder="플레이스홀더"
         style={{ minHeight: "200px", maxHeight: "300px" }}
       />
-    </FormControl>
+    </TextField>
   );
 }
diff --git a/docs/components/example/multiline-text-field-disabled.tsx b/docs/components/example/multiline-text-field-disabled.tsx
@@ -1,33 +1,33 @@
-import { FormControl, MultilineTextField } from "seed-design/ui/text-field";
+import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";
 
 export default function MultilineTextFieldDisabled() {
   return (
     <div className="grid grid-cols-2 gap-4 w-full">
-      <FormControl label="라벨" description="설명을 써주세요" disabled>
-        <MultilineTextField placeholder="플레이스홀더" />
-      </FormControl>
-      <FormControl label="라벨" description="설명을 써주세요" disabled defaultValue="값">
-        <MultilineTextField placeholder="플레이스홀더" />
-      </FormControl>
-      <FormControl
+      <TextField label="라벨" description="설명을 써주세요" disabled>
+        <TextFieldTextarea placeholder="플레이스홀더" />
+      </TextField>
+      <TextField label="라벨" description="설명을 써주세요" disabled defaultValue="값">
+        <TextFieldTextarea placeholder="플레이스홀더" />
+      </TextField>
+      <TextField
         label="라벨"
         description="설명을 써주세요"
         disabled
         invalid
         errorMessage="오류가 발생한 이유를 써주세요"
       >
-        <MultilineTextField placeholder="플레이스홀더" />
-      </FormControl>
-      <FormControl
+        <TextFieldTextarea placeholder="플레이스홀더" />
+      </TextField>
+      <TextField
         label="라벨"
         description="설명을 써주세요"
         disabled
         invalid
         errorMessage="오류가 발생한 이유를 써주세요"
         defaultValue="값"
       >
-        <MultilineTextField placeholder="플레이스홀더" />
-      </FormControl>
+        <TextFieldTextarea placeholder="플레이스홀더" />
+      </TextField>
     </div>
   );
 }
diff --git a/docs/components/example/multiline-text-field-enabled.tsx b/docs/components/example/multiline-text-field-enabled.tsx
@@ -1,31 +1,31 @@
-import { FormControl, MultilineTextField } from "seed-design/ui/text-field";
+import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";
 
 export default function MultilineTextFieldEnabled() {
   return (
     <div className="grid grid-cols-2 gap-4 w-full">
-      <FormControl label="라벨" description="설명을 써주세요">
-        <MultilineTextField placeholder="플레이스홀더" />
-      </FormControl>
-      <FormControl label="라벨" description="설명을 써주세요" defaultValue="값">
-        <MultilineTextField placeholder="플레이스홀더" />
-      </FormControl>
-      <FormControl
+      <TextField label="라벨" description="설명을 써주세요">
+        <TextFieldTextarea placeholder="플레이스홀더" />
+      </TextField>
+      <TextField label="라벨" description="설명을 써주세요" defaultValue="값">
+        <TextFieldTextarea placeholder="플레이스홀더" />
+      </TextField>
+      <TextField
         label="라벨"
         description="설명을 써주세요"
         invalid
         errorMessage="오류가 발생한 이유를 써주세요"
       >
-        <MultilineTextField placeholder="플레이스홀더" />
-      </FormControl>
-      <FormControl
+        <TextFieldTextarea placeholder="플레이스홀더" />
+      </TextField>
+      <TextField
         label="라벨"
         description="설명을 써주세요"
         invalid
         errorMessage="오류가 발생한 이유를 써주세요"
         defaultValue="값"
       >
-        <MultilineTextField placeholder="플레이스홀더" />
-      </FormControl>
+        <TextFieldTextarea placeholder="플레이스홀더" />
+      </TextField>
     </div>
   );
 }
diff --git a/docs/components/example/multiline-text-field-fixed-height.tsx b/docs/components/example/multiline-text-field-fixed-height.tsx
@@ -1,9 +1,9 @@
-import { FormControl, MultilineTextField } from "seed-design/ui/text-field";
+import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";
 
 export default function MultilineTextFieldSpecifiedHeight() {
   return (
-    <FormControl label="라벨" description="설명을 써주세요">
-      <MultilineTextField placeholder="플레이스홀더" style={{ height: "250px" }} />
-    </FormControl>
+    <TextField label="라벨" description="설명을 써주세요">
+      <TextFieldTextarea placeholder="플레이스홀더" style={{ height: "250px" }} />
+    </TextField>
   );
 }
diff --git a/docs/components/example/multiline-text-field-formatting.tsx b/docs/components/example/multiline-text-field-formatting.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useMemo, useState } from "react";
-import { FormControl, MultilineTextField } from "seed-design/ui/text-field";
+import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";
 
 export default function MultilineTextFieldFormatting() {
   const [value, setValue] = useState("");
@@ -16,13 +16,13 @@ export default function MultilineTextFieldFormatting() {
   );
 
   return (
-    <FormControl
+    <TextField
       label="레이블"
       description="공백을 입력할 수 없어요"
       value={formattedValue}
       onValueChange={({ value }) => setValue(value)}
     >
-      <MultilineTextField placeholder="공백을 입력해보세요" />
-    </FormControl>
+      <TextFieldTextarea placeholder="공백을 입력해보세요" />
+    </TextField>
   );
 }
diff --git a/docs/components/example/multiline-text-field-grapheme-count.tsx b/docs/components/example/multiline-text-field-grapheme-count.tsx
@@ -1,9 +1,9 @@
-import { FormControl, MultilineTextField } from "seed-design/ui/text-field";
+import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";
 
 export default function MultilineTextFieldGraphemeCount() {
   return (
-    <FormControl label="라벨" description="설명을 써주세요" maxGraphemeCount={8}>
-      <MultilineTextField placeholder="플레이스홀더" />
-    </FormControl>
+    <TextField label="라벨" description="설명을 써주세요" maxGraphemeCount={8}>
+      <TextFieldTextarea placeholder="플레이스홀더" />
+    </TextField>
   );
 }
diff --git a/docs/components/example/multiline-text-field-large.tsx b/docs/components/example/multiline-text-field-large.tsx
@@ -1,9 +1,9 @@
-import { FormControl, MultilineTextField } from "seed-design/ui/text-field";
+import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";
 
 export default function MultilineTextFieldLarge() {
   return (
-    <FormControl label="라벨" description="설명을 써주세요" size="large">
-      <MultilineTextField placeholder="플레이스홀더" />
-    </FormControl>
+    <TextField label="라벨" description="설명을 써주세요" size="large">
+      <TextFieldTextarea placeholder="플레이스홀더" />
+    </TextField>
   );
 }
diff --git a/docs/components/example/multiline-text-field-medium.tsx b/docs/components/example/multiline-text-field-medium.tsx
@@ -1,9 +1,9 @@
-import { FormControl, MultilineTextField } from "seed-design/ui/text-field";
+import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";
 
 export default function MultilineTextFieldMedium() {
   return (
-    <FormControl label="라벨" description="설명을 써주세요" size="medium">
-      <MultilineTextField placeholder="플레이스홀더" />
-    </FormControl>
+    <TextField label="라벨" description="설명을 써주세요" size="medium">
+      <TextFieldTextarea placeholder="플레이스홀더" />
+    </TextField>
   );
 }
diff --git a/docs/components/example/multiline-text-field-optional.tsx b/docs/components/example/multiline-text-field-optional.tsx
@@ -1,9 +1,9 @@
-import { FormControl, MultilineTextField } from "seed-design/ui/text-field";
+import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";
 
 export default function MultilineTextFieldOptional() {
   return (
-    <FormControl label="라벨" description="설명을 써주세요" optionalIndicator="(선택)">
-      <MultilineTextField placeholder="플레이스홀더" />
-    </FormControl>
+    <TextField label="라벨" description="설명을 써주세요" indicator="(선택)">
+      <TextFieldTextarea placeholder="플레이스홀더" />
+    </TextField>
   );
 }
diff --git a/docs/components/example/multiline-text-field-preview.tsx b/docs/components/example/multiline-text-field-preview.tsx
@@ -1,16 +1,16 @@
 "use client";
 
 import { useState } from "react";
-import { FormControl, MultilineTextField } from "seed-design/ui/text-field";
+import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";
 
 export default function MultilineTextFieldPreview() {
   const [value, setValue] = useState("");
 
   return (
     <div className="flex flex-col items-center w-full">
-      <FormControl value={value} onValueChange={({ value }) => setValue(value)}>
-        <MultilineTextField autoFocus />
-      </FormControl>
+      <TextField value={value} onValueChange={({ value }) => setValue(value)}>
+        <TextFieldTextarea autoFocus />
+      </TextField>
       <p className="text-center">현재 값: {value}</p>
     </div>
   );

diff --git a/docs/components/example/multiline-text-field-react-hook-form.tsx b/docs/components/example/multiline-text-field-react-hook-form.tsx
@@ -3,7 +3,7 @@
 import { ActionButton } from "seed-design/ui/action-button";
 import { IconHouseLine } from "@daangn/react-monochrome-icon";
 import { useForm } from "react-hook-form";
-import { FormControl, MultilineTextField } from "seed-design/ui/text-field";
+import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";
 
 interface FormValues {
   bio: string;
@@ -24,18 +24,18 @@ export default function MultilineTextFieldReactHookForm() {
 
   return (
     <form className="grid grid-cols-2 gap-3 w-full" onSubmit={handleSubmit(onValid)}>
-      <FormControl
+      <TextField
         {...register("bio", { required: "필수 입력 항목입니다" })}
         label="자기소개"
         description="자기소개를 써주세요"
         invalid={!!errors.bio}
         errorMessage={errors.bio?.message}
-        requiredIndicator="(필수)"
+        indicator="(필수)"
         required
       >
-        <MultilineTextField placeholder="저는…" />
-      </FormControl>
-      <FormControl
+        <TextFieldTextarea placeholder="저는…" />
+      </TextField>
+      <TextField
         {...register("address", {
           required: "필수 입력 항목입니다",
           pattern: {
@@ -47,11 +47,11 @@ export default function MultilineTextFieldReactHookForm() {
         description="주소를 써주세요"
         invalid={!!errors.address}
         errorMessage={errors.address?.message}
-        requiredIndicator="(필수)"
+        indicator="(필수)"
         required
       >
-        <MultilineTextField placeholder="대한민국 서울특별시 은평구" />
-      </FormControl>
+        <TextFieldTextarea placeholder="대한민국 서울특별시 은평구" />
+      </TextField>
       <div className="col-span-2 flex gap-2">
         <ActionButton type="submit" className="grow">
           제출

diff --git a/docs/components/example/multiline-text-field-read-only.tsx b/docs/components/example/multiline-text-field-read-only.tsx
@@ -1,33 +1,33 @@
-import { FormControl, MultilineTextField } from "seed-design/ui/text-field";
+import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";
 
 export default function MultilineTextFieldReadOnly() {
   return (
     <div className="grid grid-cols-2 gap-4 w-full">
-      <FormControl label="라벨" description="설명을 써주세요" readOnly>
-        <MultilineTextField placeholder="플레이스홀더" />
-      </FormControl>
-      <FormControl label="라벨" description="설명을 써주세요" readOnly defaultValue="값">
-        <MultilineTextField placeholder="플레이스홀더" />
-      </FormControl>
-      <FormControl
+      <TextField label="라벨" description="설명을 써주세요" readOnly>
+        <TextFieldTextarea placeholder="플레이스홀더" />
+      </TextField>
+      <TextField label="라벨" description="설명을 써주세요" readOnly defaultValue="값">
+        <TextFieldTextarea placeholder="플레이스홀더" />
+      </TextField>
+      <TextField
         label="라벨"
         description="설명을 써주세요"
         readOnly
         invalid
         errorMessage="오류가 발생한 이유를 써주세요"
       >
-        <MultilineTextField placeholder="플레이스홀더" />
-      </FormControl>
-      <FormControl
+        <TextFieldTextarea placeholder="플레이스홀더" />
+      </TextField>
+      <TextField
         label="라벨"
         description="설명을 써주세요"
         readOnly
         invalid
         errorMessage="오류가 발생한 이유를 써주세요"
         defaultValue="값"
       >
-        <MultilineTextField placeholder="플레이스홀더" />
-      </FormControl>
+        <TextFieldTextarea placeholder="플레이스홀더" />
+      </TextField>
     </div>
   );
 }
diff --git a/docs/components/example/multiline-text-field-required.tsx b/docs/components/example/multiline-text-field-required.tsx
@@ -1,9 +1,9 @@
-import { FormControl, MultilineTextField } from "seed-design/ui/text-field";
+import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";
 
 export default function MultilineTextFieldRequired() {
   return (
-    <FormControl label="라벨" description="설명을 써주세요" required requiredIndicator="(필수)">
-      <MultilineTextField placeholder="플레이스홀더" />
-    </FormControl>
+    <TextField label="라벨" description="설명을 써주세요" required indicator="(필수)">
+      <TextFieldTextarea placeholder="플레이스홀더" />
+    </TextField>
   );
 }
diff --git a/docs/components/example/multiline-text-field-slicing.tsx b/docs/components/example/multiline-text-field-slicing.tsx
@@ -1,20 +1,20 @@
 "use client";
 
 import { useState } from "react";
-import { FormControl, MultilineTextField } from "seed-design/ui/text-field";
+import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";
 
 export default function MultilineTextFieldSlicing() {
   const [value, setValue] = useState("");
 
   return (
-    <FormControl
+    <TextField
       label="라벨"
       description="6글자까지 입력 가능합니다"
       maxGraphemeCount={6}
       value={value}
       onValueChange={({ slicedValue }) => setValue(slicedValue)}
     >
-      <MultilineTextField placeholder="플레이스홀더" />
-    </FormControl>
+      <TextFieldTextarea placeholder="플레이스홀더" />
+    </TextField>
   );
 }
diff --git a/docs/components/example/multiline-text-field-xlarge.tsx b/docs/components/example/multiline-text-field-xlarge.tsx
@@ -1,9 +1,9 @@
-import { FormControl, MultilineTextField } from "seed-design/ui/text-field";
+import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";
 
 export default function MultilineTextFieldXlarge() {
   return (
-    <FormControl label="라벨" description="설명을 써주세요" size="xlarge">
-      <MultilineTextField placeholder="플레이스홀더" />
-    </FormControl>
+    <TextField label="라벨" description="설명을 써주세요" size="xlarge">
+      <TextFieldTextarea placeholder="플레이스홀더" />
+    </TextField>
   );
 }