From c5bf58b558592b821682e821659444062e49aaec Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sun, 4 Aug 2024 14:59:36 +0900
Subject: [PATCH] feat: add drawer playground

---
 src/docs/components/Drawer.mdx                | 21 +++---------
 .../components/DrawerBlocks/Playground.tsx    | 34 +++++++++++++++++++
 src/docs/components/DrawerBlocks/Preview.tsx  | 29 +++++++++++++---
 3 files changed, 62 insertions(+), 22 deletions(-)
 create mode 100644 src/docs/components/DrawerBlocks/Playground.tsx

diff --git a/src/docs/components/Drawer.mdx b/src/docs/components/Drawer.mdx
index fde379f..62e70a4 100644
--- a/src/docs/components/Drawer.mdx
+++ b/src/docs/components/Drawer.mdx
@@ -1,26 +1,13 @@
 import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
 import { Story } from "@/components/Story";
 import { LoadedCode, GITHUB_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } from '@/components/LoadedCode';
-import { DrawerDemo } from "./DrawerBlocks/Preview";
 import Examples from "./DrawerBlocks/Examples";
+import Playground from "./DrawerBlocks/Playground";
 
 # Drawer
 Displays a panel that slides out from the edge of the screen, typically used for navigation or additional content.
 
-<TabProvider defaultName="preview">
-    <TabList>
-        <TabTrigger name="preview">Preview</TabTrigger>
-        <TabTrigger name="code">Code</TabTrigger>
-    </TabList>
-  <TabContent name="preview">
-    <Story layout="centered">
-        <DrawerDemo />
-    </Story>
-  </TabContent>
-  <TabContent name="code">
-    <LoadedCode from={GITHUB_COMP_PREVIEW("Drawer")} />
-  </TabContent>
-</TabProvider>
+<Playground />
 
 ## Installation
 
@@ -41,7 +28,7 @@ import {
     DrawerHeader,
     DrawerBody,
     DrawerFooter,
-} from "@components/Drawer"; 
+} from "@components/Drawer";
 ```
 
 ```html
@@ -68,7 +55,7 @@ import {
 ```
 
 > Note:
-> 
+>
 > DrawerTrigger and DrawerClose will merge its onClick event handler to its children.
 > Also, there is no default element for those.
 > So you always have to provide the clickable children for DialogTrigger and DialogClose.
diff --git a/src/docs/components/DrawerBlocks/Playground.tsx b/src/docs/components/DrawerBlocks/Playground.tsx
new file mode 100644
index 0000000..09a34d3
--- /dev/null
+++ b/src/docs/components/DrawerBlocks/Playground.tsx
@@ -0,0 +1,34 @@
+import type { TEMPLATE } from "@/components/LoadedCode";
+import { usePgProps } from "@/components/PgHooks";
+import { PlaygroundLayout } from "@/components/Playground";
+import { DrawerDemo, type DrawerDemoPlaygroundProps } from "./Preview";
+
+interface TemplateProps extends TEMPLATE, DrawerDemoPlaygroundProps {}
+
+export default function DrawerPlayground() {
+  const [props, control] = usePgProps<TemplateProps>({
+    DrawerRootProps: {
+      closeThreshold: {
+        type: "number",
+        value: 0.3,
+      },
+    },
+    DrawerContentProps: {
+      position: {
+        type: "select",
+        options: ["top", "bottom", "left", "right"],
+        value: "left",
+      },
+    },
+  });
+
+  return (
+    <PlaygroundLayout
+      compName="Drawer"
+      control={control}
+      props={props}
+    >
+      <DrawerDemo {...props} />
+    </PlaygroundLayout>
+  );
+}
diff --git a/src/docs/components/DrawerBlocks/Preview.tsx b/src/docs/components/DrawerBlocks/Preview.tsx
index 4f03292..1d3be45 100644
--- a/src/docs/components/DrawerBlocks/Preview.tsx
+++ b/src/docs/components/DrawerBlocks/Preview.tsx
@@ -9,15 +9,34 @@ import {
   DrawerRoot,
   DrawerTrigger,
 } from "@pswui/Drawer";
-
-export const DrawerDemo = () => {
+/* remove */
+export interface DrawerDemoPlaygroundProps {
+  DrawerRootProps: {
+    closeThreshold: number;
+  };
+  DrawerContentProps: {
+    position: "top" | "bottom" | "left" | "right";
+  };
+}
+/* end */
+/* replace */
+export function DrawerDemo({
+  DrawerRootProps,
+  DrawerContentProps,
+}: DrawerDemoPlaygroundProps) {
+  /* with
+export function DrawerDemo() {
+  */
   return (
-    <DrawerRoot>
+    <DrawerRoot closeThreshold={DrawerRootProps.closeThreshold}>
       <DrawerTrigger>
         <Button>Open Drawer</Button>
       </DrawerTrigger>
       <DrawerOverlay className="z-[99]">
-        <DrawerContent className="max-w-[320px]">
+        <DrawerContent
+          className="max-w-[320px]"
+          position={DrawerContentProps.position}
+        >
           <DrawerHeader>
             <h1 className="text-2xl font-bold">Drawer</h1>
           </DrawerHeader>
@@ -37,4 +56,4 @@ export const DrawerDemo = () => {
       </DrawerOverlay>
     </DrawerRoot>
   );
-};
+}