refactor: text field props (#72)

* docs: separate TextField basic docs * @Hanna922 Merge branch 'develop' into feat/#70-TextField-props * docs: add Controls in base TextField
yourssu · Apr 29, 2024 · 34b2d82 · 34b2d82
1 parent 8a3c63e
commit 34b2d82
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 53 deletions.
diff --git a/src/components/TextField/SimpleTextField/SimpleTextField.stories.tsx b/src/components/TextField/SimpleTextField/SimpleTextField.stories.tsx
@@ -1,6 +1,5 @@
 import { useState } from 'react';
 
-import { Stories, Primary as PrimaryBlock, Controls, Title } from '@storybook/blocks';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { SimpleTextField } from './SimpleTextField';
@@ -10,58 +9,6 @@ const meta: Meta<typeof SimpleTextField> = {
   component: SimpleTextField,
   parameters: {
     layout: 'centered',
-    docs: {
-      page: () => (
-        <>
-          <Title />
-          <PrimaryBlock />
-          <Controls />
-          <h2> 주의사항 </h2>
-          <ol>
-            <li>
-              TextField의 종류에 따라 suffix, searchPrefix 속성 값이 일부 정해져 있습니다.
-              <br />
-              <br />
-              <table>
-                <tr>
-                  <th>종류</th>
-                  <th>suffix</th>
-                  <th>searchPrefix</th>
-                </tr>
-                <tr>
-                  <td>SimpleTextField</td>
-                  <td>IcXLine</td>
-                  <td>설정 불가</td>
-                </tr>
-                <tr>
-                  <td>SuffixTextField</td>
-                  <td>사용자가 설정한 값</td>
-                  <td>설정 불가</td>
-                </tr>
-                <tr>
-                  <td>SearchTextField</td>
-                  <td>IcXLine</td>
-                  <td>IcSearchLine</td>
-                </tr>
-                <tr>
-                  <td>PasswordTextField</td>
-                  <td>IcEyeclosedLine 또는 IcEyeopenLine</td>
-                  <td>설정 불가</td>
-                </tr>
-              </table>
-            </li>
-            <br />
-            <li>
-              boolean 타입 속성의 우선순위는 아래와 같습니다.
-              <br />
-              disabled &gt; isNegative &gt; isPositive
-            </li>
-          </ol>
-          <br />
-          <Stories />
-        </>
-      ),
-    },
   },
 };
 export default meta;

diff --git a/src/components/TextField/TextField.stories.tsx b/src/components/TextField/TextField.stories.tsx
@@ -0,0 +1,72 @@
+import { Controls, Title } from '@storybook/blocks';
+import { Meta } from '@storybook/react';
+
+import { TextField } from './TextField';
+
+const meta: Meta = {
+  title: 'Atoms/TextField',
+  component: TextField,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <h2>주의사항</h2>
+          <ol>
+            <li>
+              TextField의 종류에 따라 suffix, searchPrefix 속성 값이 일부 정해져 있습니다.
+              <br />
+              <br />
+              <table>
+                <tbody>
+                  <tr>
+                    <th>종류</th>
+                    <th>suffix</th>
+                    <th>searchPrefix</th>
+                  </tr>
+                  <tr>
+                    <td>SimpleTextField</td>
+                    <td>IcXLine</td>
+                    <td>설정 불가</td>
+                  </tr>
+                  <tr>
+                    <td>SuffixTextField</td>
+                    <td>사용자가 설정한 값</td>
+                    <td>설정 불가</td>
+                  </tr>
+                  <tr>
+                    <td>SearchTextField</td>
+                    <td>IcXLine</td>
+                    <td>IcSearchLine</td>
+                  </tr>
+                  <tr>
+                    <td>PasswordTextField</td>
+                    <td>IcEyeclosedLine 또는 IcEyeopenLine</td>
+                    <td>설정 불가</td>
+                  </tr>
+                </tbody>
+              </table>
+            </li>
+            <br />
+            <li>
+              boolean 타입 속성의 우선순위는 아래와 같습니다.
+              <br />
+              disabled &gt; isNegative &gt; isPositive
+            </li>
+          </ol>
+          <br />
+          <h2>TextField 속성</h2>
+          <Controls />
+        </>
+      ),
+    },
+  },
+};
+export default meta;
+
+const TextFieldStory = () => {};
+
+export const Primary = {
+  render: TextFieldStory,
+};