docs: tooltip, text 컴포넌트 mdx 마이그레이션 (#89)

ui-kit/src/stories/Components/Text/index.stories.mdx

@@ -0,0 +1,57 @@
+import { Text } from 'src';
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+
+<Meta title="components/Text" components={Text} />
+
+# Text
+
+## Preview
+
+<Canvas>
+  <Story name="Preview">
+    <Text>텍스트 컴포넌트 입니다</Text>
+  </Story>
+</Canvas>
+
+## Block
+
+<Canvas>
+  <Story name="Block">
+    <Text as="p">이 텍스트는 p태그로 렌더되며, display: block이 적용됩니다</Text>
+    <Text as="p">이 텍스트는 p태그로 렌더되며, display: block이 적용됩니다</Text>
+  </Story>
+</Canvas>
+
+## Font Weight
+
+<Canvas>
+  <Story name="Font Weight">
+    <Text as="p">폰트 굵기 보통</Text>
+    <Text as="p" fontWeight="bold">
+      폰트 굵기 굵게
+    </Text>
+  </Story>
+</Canvas>
+
+## Typography
+
+<Canvas>
+  <Story name="Typography">
+    <Text as="p">Lubycon UI Kit의 타이포그래피를 사용해보세요</Text>
+    <Text typography="h1" as="p">
+      타이포그래피는 h1이지만, 실제로는 p태그로 렌더됩니다{' '}
+    </Text>
+  </Story>
+</Canvas>
+
+## As
+
+<Canvas>
+  <Story name="As">
+    <Text as="a" href="https://github.com" target="blank">
+      앵커 태그를 사용해보자
+    </Text>
+    <Text as="h1">h1으로 렌더해도 기본적으로는 Typography: p1이 적용됩니다</Text>
+    <Text as="button">버튼도 가능하기는 함</Text>
+  </Story>
+</Canvas>

ui-kit/src/stories/Components/Tooltip.stories.tsx → ui-kit/src/stories/Components/Tooltip/Components.tsx

@@ -1,33 +1,7 @@
 import React, { useState } from 'react';
-import { Meta } from '@storybook/react/types-6-0';
 import { Tooltip, Button } from 'src';
 import { TooltipPosition } from 'src/components/Tooltip/types';
-
-export default {
-  title: 'Components/Tooltip',
-  component: Tooltip,
-} as Meta;
-
-const positions: TooltipPosition[] = [
-  'top-left',
-  'top-center',
-  'top-right',
-  'left',
-  'right',
-  'bottom-left',
-  'bottom-center',
-  'bottom-right',
-];
-
-export const Default = () => {
-  return (
-    <div style={{ paddingTop: 40 }}>
-      <Tooltip show={true} message="툴팁입니다.">
-        <Button type="informative">버튼입니다</Button>
-      </Tooltip>
-    </div>
-  );
-};
+import { positions } from './data';
 
 const TooltipButton = ({ children }: { children: TooltipPosition }) => {
   const [show, setShow] = useState(false);
@@ -44,7 +18,17 @@ const TooltipButton = ({ children }: { children: TooltipPosition }) => {
   );
 };
 
-export const Position = () => {
+export const Preview = () => {
+  return (
+    <div style={{ paddingTop: 40 }}>
+      <Tooltip show={true} message="툴팁입니다.">
+        <Button type="informative">버튼입니다</Button>
+      </Tooltip>
+    </div>
+  );
+};
+
+export const Positions = () => {
   return (
     <ul style={{ padding: 100, margin: 0 }}>
       {positions.map((p) => (

ui-kit/src/stories/Components/Tooltip/data.ts

@@ -0,0 +1,12 @@
+import { TooltipPosition } from 'src/components/Tooltip/types';
+
+export const positions: TooltipPosition[] = [
+  'top-left',
+  'top-center',
+  'top-right',
+  'left',
+  'right',
+  'bottom-left',
+  'bottom-center',
+  'bottom-right',
+];

ui-kit/src/stories/Components/Tooltip/index.stories.mdx

@@ -0,0 +1,31 @@
+import { Tooltip } from 'src';
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { Preview, Positions, AbsolutePositionTest } from './Components';
+
+<Meta title="Components/Tooltip" />
+
+# Tooltip
+
+## Preview
+
+<Canvas>
+  <Story name="Preview">
+    <Preview />
+  </Story>
+</Canvas>
+
+## Positions
+
+<Canvas>
+  <Story name="Positions">
+    <Positions />
+  </Story>
+</Canvas>
+
+## Position with Absolute
+
+<Canvas>
+  <Story name="Position with Absolute">
+    <AbsolutePositionTest />
+  </Story>
+</Canvas>