From 425f1325c9dcc05f75be902f141323296556d0e3 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sun, 2 Jun 2024 08:40:43 +0900
Subject: [PATCH] feat: use separated file for examples

---
 packages/react/src/docs/components/Button.mdx | 76 +++++--------------
 .../ButtonBlocks/Examples/Danger.tsx          |  5 ++
 .../ButtonBlocks/Examples/Default.tsx         |  5 ++
 .../ButtonBlocks/Examples/Ghost.tsx           |  5 ++
 .../components/ButtonBlocks/Examples/Link.tsx |  5 ++
 .../ButtonBlocks/Examples/Success.tsx         |  5 ++
 .../ButtonBlocks/Examples/Warning.tsx         |  5 ++
 .../components/ButtonBlocks/Examples/index.ts | 16 ++++
 .../docs/components/ButtonBlocks/Preview.tsx  |  5 ++
 9 files changed, 69 insertions(+), 58 deletions(-)
 create mode 100644 packages/react/src/docs/components/ButtonBlocks/Examples/Danger.tsx
 create mode 100644 packages/react/src/docs/components/ButtonBlocks/Examples/Default.tsx
 create mode 100644 packages/react/src/docs/components/ButtonBlocks/Examples/Ghost.tsx
 create mode 100644 packages/react/src/docs/components/ButtonBlocks/Examples/Link.tsx
 create mode 100644 packages/react/src/docs/components/ButtonBlocks/Examples/Success.tsx
 create mode 100644 packages/react/src/docs/components/ButtonBlocks/Examples/Warning.tsx
 create mode 100644 packages/react/src/docs/components/ButtonBlocks/Examples/index.ts
 create mode 100644 packages/react/src/docs/components/ButtonBlocks/Preview.tsx

diff --git a/packages/react/src/docs/components/Button.mdx b/packages/react/src/docs/components/Button.mdx
index 6fad52f..e200afa 100644
--- a/packages/react/src/docs/components/Button.mdx
+++ b/packages/react/src/docs/components/Button.mdx
@@ -1,7 +1,9 @@
 import { Button } from "@components/Button";
 import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
 import { Story } from "@/components/Story";
-import { LoadedCode } from "@/components/LoadedCode";
+import { LoadedCode, GITHUB } from "@/components/LoadedCode";
+import { ButtonDemo } from "./ButtonBlocks/Preview";
+import Examples from "./ButtonBlocks/Examples";
 
 # Button
 Displays a button or a component that looks like a button.
@@ -13,17 +15,11 @@ Displays a button or a component that looks like a button.
     </TabList>
     <TabContent name="preview">
         <Story layout="centered">
-            <Button>Button</Button>
+            <ButtonDemo />
         </Story>
     </TabContent>
     <TabContent name="code">
-        ```tsx
-        import { Button } from "@components/Button";
-
-        export function ButtonDemo() {
-            return <Button>Button</Button>
-        }
-        ```
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Preview.tsx`} />
     </TabContent>
 </TabProvider>
 
@@ -32,7 +28,7 @@ Displays a button or a component that looks like a button.
 1. Create a new file `Button.tsx` in your component folder.
 2. Copy and paste the following code into the file.
 
-<LoadedCode from="https://raw.githubusercontent.com/p-sw/ui/main/packages/react/components/Button.tsx" />
+<LoadedCode from={`${GITHUB}/packages/react/components/Button.tsx`} />
 
 ## Usage
 
@@ -73,17 +69,11 @@ import { Button } from "@components/Button";
     </TabList>
     <TabContent name="preview">
         <Story layout="centered">
-            <Button>Button</Button>
+            <Examples.Default />
         </Story>
     </TabContent>
     <TabContent name="code">
-```tsx
-import { Button } from "@components/Button";
-
-export function ButtonDemo() {
-    return <Button preset="default">Button</Button>
-}
-```
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Default.tsx`} />
     </TabContent>
 </TabProvider>
 
@@ -96,17 +86,11 @@ export function ButtonDemo() {
     </TabList>
     <TabContent name="preview">
         <Story layout="centered">
-            <Button preset="ghost">Button</Button>
+            <Examples.Ghost />
         </Story>
     </TabContent>
     <TabContent name="code">
-```tsx
-import { Button } from "@components/Button";
-
-export function ButtonDemo() {
-    return <Button preset="ghost">Button</Button>
-}
-```
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Ghost.tsx`} />
     </TabContent>
 </TabProvider>
 
@@ -119,17 +103,11 @@ export function ButtonDemo() {
     </TabList>
     <TabContent name="preview">
         <Story layout="centered">
-            <Button preset="link">Button</Button>
+            <Examples.Link />
         </Story>
     </TabContent>
     <TabContent name="code">
-```tsx
-import { Button } from "@components/Button";
-
-export function ButtonDemo() {
-    return <Button preset="link">Button</Button>
-}
-```
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Link.tsx`} />
     </TabContent>
 </TabProvider>
 
@@ -142,17 +120,11 @@ export function ButtonDemo() {
     </TabList>
     <TabContent name="preview">
         <Story layout="centered">
-            <Button preset="success">Button</Button>
+            <Examples.Success />
         </Story>
     </TabContent>
     <TabContent name="code">
-```tsx
-import { Button } from "@components/Button";
-
-export function ButtonDemo() {
-    return <Button preset="success">Button</Button>
-}
-```
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Success.tsx`} />
     </TabContent>
 </TabProvider>
 
@@ -165,17 +137,11 @@ export function ButtonDemo() {
     </TabList>
     <TabContent name="preview">
         <Story layout="centered">
-            <Button preset="warning">Button</Button>
+            <Examples.Warning />
         </Story>
     </TabContent>
     <TabContent name="code">
-```tsx
-import { Button } from "@components/Button";
-
-export function ButtonDemo() {
-    return <Button preset="warning">Button</Button>
-}
-```
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Warning.tsx`} />
     </TabContent>
 </TabProvider>
 
@@ -188,16 +154,10 @@ export function ButtonDemo() {
     </TabList>
     <TabContent name="preview">
         <Story layout="centered">
-            <Button preset="danger">Button</Button>
+            <Examples.Danger />
         </Story>
     </TabContent>
     <TabContent name="code">
-```tsx
-import { Button } from "@components/Button";
-
-export function ButtonDemo() {
-    return <Button preset="danger">Button</Button>
-}
-```
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ButtonBlocks/Examples/Danger.tsx`} />
     </TabContent>
 </TabProvider>
diff --git a/packages/react/src/docs/components/ButtonBlocks/Examples/Danger.tsx b/packages/react/src/docs/components/ButtonBlocks/Examples/Danger.tsx
new file mode 100644
index 0000000..ca271ba
--- /dev/null
+++ b/packages/react/src/docs/components/ButtonBlocks/Examples/Danger.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@components/Button";
+
+export const Danger = () => {
+  return <Button preset="danger">Danger</Button>;
+};
diff --git a/packages/react/src/docs/components/ButtonBlocks/Examples/Default.tsx b/packages/react/src/docs/components/ButtonBlocks/Examples/Default.tsx
new file mode 100644
index 0000000..6a5e111
--- /dev/null
+++ b/packages/react/src/docs/components/ButtonBlocks/Examples/Default.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@components/Button";
+
+export const Default = () => {
+  return <Button preset="default">Default</Button>;
+};
diff --git a/packages/react/src/docs/components/ButtonBlocks/Examples/Ghost.tsx b/packages/react/src/docs/components/ButtonBlocks/Examples/Ghost.tsx
new file mode 100644
index 0000000..a6ad3ba
--- /dev/null
+++ b/packages/react/src/docs/components/ButtonBlocks/Examples/Ghost.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@components/Button";
+
+export const Ghost = () => {
+  return <Button preset="ghost">Ghost</Button>;
+};
diff --git a/packages/react/src/docs/components/ButtonBlocks/Examples/Link.tsx b/packages/react/src/docs/components/ButtonBlocks/Examples/Link.tsx
new file mode 100644
index 0000000..d922088
--- /dev/null
+++ b/packages/react/src/docs/components/ButtonBlocks/Examples/Link.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@components/Button";
+
+export const Link = () => {
+  return <Button preset="link">Link</Button>;
+};
diff --git a/packages/react/src/docs/components/ButtonBlocks/Examples/Success.tsx b/packages/react/src/docs/components/ButtonBlocks/Examples/Success.tsx
new file mode 100644
index 0000000..534a40c
--- /dev/null
+++ b/packages/react/src/docs/components/ButtonBlocks/Examples/Success.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@components/Button";
+
+export const Success = () => {
+  return <Button preset="success">Success</Button>;
+};
diff --git a/packages/react/src/docs/components/ButtonBlocks/Examples/Warning.tsx b/packages/react/src/docs/components/ButtonBlocks/Examples/Warning.tsx
new file mode 100644
index 0000000..90dea91
--- /dev/null
+++ b/packages/react/src/docs/components/ButtonBlocks/Examples/Warning.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@components/Button";
+
+export const Warning = () => {
+  return <Button preset="warning">Warning</Button>;
+};
diff --git a/packages/react/src/docs/components/ButtonBlocks/Examples/index.ts b/packages/react/src/docs/components/ButtonBlocks/Examples/index.ts
new file mode 100644
index 0000000..0b7aaac
--- /dev/null
+++ b/packages/react/src/docs/components/ButtonBlocks/Examples/index.ts
@@ -0,0 +1,16 @@
+import { Danger } from "./Danger";
+import { Warning } from "./Warning";
+import { Success } from "./Success";
+import { Link } from "./Link";
+import { Ghost } from "./Ghost";
+import { Default } from "./Default";
+
+export default {
+  Danger,
+  Warning,
+  Success,
+  Link,
+  Ghost,
+  Default,
+};
+
diff --git a/packages/react/src/docs/components/ButtonBlocks/Preview.tsx b/packages/react/src/docs/components/ButtonBlocks/Preview.tsx
new file mode 100644
index 0000000..3f3a5b1
--- /dev/null
+++ b/packages/react/src/docs/components/ButtonBlocks/Preview.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@components/Button";
+
+export function ButtonDemo() {
+  return <Button>Button</Button>;
+}