From e4d9c8bae47ca8ca5e7f975390895ea1f501cc94 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Fri, 12 Jul 2024 14:18:23 +0900
Subject: [PATCH] feat(playground): apply playground on Checkbox

---
 src/docs/components/Checkbox.mdx              | 161 +++++++++---------
 .../components/CheckboxBlocks/Playground.tsx  |  28 +++
 .../components/CheckboxBlocks/Preview.tsx     |  12 +-
 3 files changed, 116 insertions(+), 85 deletions(-)
 create mode 100644 src/docs/components/CheckboxBlocks/Playground.tsx

diff --git a/src/docs/components/Checkbox.mdx b/src/docs/components/Checkbox.mdx
index a257c60..c38618c 100644
--- a/src/docs/components/Checkbox.mdx
+++ b/src/docs/components/Checkbox.mdx
@@ -1,84 +1,77 @@
-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 { CheckboxDemo } from "./CheckboxBlocks/Preview";
-import Examples from "./CheckboxBlocks/Examples";
-
-# Checkbox
-A control that allows the user to toggle between checked and not checked.
-
-<TabProvider defaultName="preview">
-    <TabList>
-        <TabTrigger name="preview">Preview</TabTrigger>
-        <TabTrigger name="code">Code</TabTrigger>
-    </TabList>
-    <TabContent name="preview">
-        <Story layout="centered">
-            <CheckboxDemo />
-        </Story>
-    </TabContent>
-    <TabContent name="code">
-        <LoadedCode from={GITHUB_COMP_PREVIEW("Checkbox")} />
-    </TabContent>
-</TabProvider>
-
-## Installation
-
-1. Create a new file `Checkbox.mdx` in your component folder.
-2. Copy and paste the following code into the file.
-
-<LoadedCode from={GITHUB_COMP("Checkbox")} />
-
-## Usage
-
-```tsx
-import { Checkbox } from "@components/Checkbox";
-```
-
-```html
-<Checkbox />
-```
-
-## Props
-
-### Variants
-
-| Prop   | Type                     | Default | Description              |
-|:-------|:-------------------------|:--------|:-------------------------|
-| `size` | `"base" \| "md" \| "lg"` | `"md"`  | The size of the checkbox |
-
-## Examples
-
-### Text
-
-<TabProvider defaultName="preview">
-    <TabList>
-        <TabTrigger name="preview">Preview</TabTrigger>
-        <TabTrigger name="code">Code</TabTrigger>
-    </TabList>
-    <TabContent name="preview">
-        <Story layout="centered">
-            <Examples.Text />
-        </Story>
-    </TabContent>
-    <TabContent name="code">
-        <LoadedCode from={GITHUB_STORY("Checkbox", "Text")} />
-    </TabContent>
-</TabProvider>
-
-### Disabled
-
-<TabProvider defaultName="preview">
-    <TabList>
-        <TabTrigger name="preview">Preview</TabTrigger>
-        <TabTrigger name="code">Code</TabTrigger>
-    </TabList>
-    <TabContent name="preview">
-        <Story layout="centered">
-            <Examples.Disabled />
-        </Story>
-    </TabContent>
-    <TabContent name="code">
-        <LoadedCode from={GITHUB_STORY("Checkbox", "Disabled")} />
-    </TabContent>
-</TabProvider>
+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 Examples from "./CheckboxBlocks/Examples";
+import Playground from "./CheckboxBlocks/Playground";
+
+# Checkbox
+
+A control that allows the user to toggle between checked and not checked.
+
+<Playground />
+
+## Installation
+
+1. Create a new file `Checkbox.mdx` in your component folder.
+2. Copy and paste the following code into the file.
+
+<LoadedCode from={GITHUB_COMP("Checkbox")} />
+
+## Usage
+
+```tsx
+import { Checkbox } from "@components/Checkbox";
+```
+
+```html
+<Checkbox />
+```
+
+## Props
+
+### Variants
+
+| Prop   | Type                     | Default | Description              |
+| :----- | :----------------------- | :------ | :----------------------- |
+| `size` | `"base" \| "md" \| "lg"` | `"md"`  | The size of the checkbox |
+
+## Examples
+
+### Text
+
+<TabProvider defaultName="preview">
+  <TabList>
+    <TabTrigger name="preview">Preview</TabTrigger>
+    <TabTrigger name="code">Code</TabTrigger>
+  </TabList>
+  <TabContent name="preview">
+    <Story layout="centered">
+      <Examples.Text />
+    </Story>
+  </TabContent>
+  <TabContent name="code">
+    <LoadedCode from={GITHUB_STORY("Checkbox", "Text")} />
+  </TabContent>
+</TabProvider>
+
+### Disabled
+
+<TabProvider defaultName="preview">
+  <TabList>
+    <TabTrigger name="preview">Preview</TabTrigger>
+    <TabTrigger name="code">Code</TabTrigger>
+  </TabList>
+  <TabContent name="preview">
+    <Story layout="centered">
+      <Examples.Disabled />
+    </Story>
+  </TabContent>
+  <TabContent name="code">
+    <LoadedCode from={GITHUB_STORY("Checkbox", "Disabled")} />
+  </TabContent>
+</TabProvider>
diff --git a/src/docs/components/CheckboxBlocks/Playground.tsx b/src/docs/components/CheckboxBlocks/Playground.tsx
new file mode 100644
index 0000000..bd6b332
--- /dev/null
+++ b/src/docs/components/CheckboxBlocks/Playground.tsx
@@ -0,0 +1,28 @@
+import type { TEMPLATE } from "@/components/LoadedCode";
+import { usePgProps } from "@/components/PgHooks";
+import { PlaygroundLayout } from "@/components/Playground";
+import { CheckboxDemo, type CheckboxDemoPlaygroundProps } from "./Preview";
+
+interface TemplateProps extends TEMPLATE, CheckboxDemoPlaygroundProps {}
+
+export default function CheckboxPlayground() {
+  const [props, control] = usePgProps<TemplateProps>({
+    CheckboxProps: {
+      size: {
+        type: "select",
+        options: ["base", "md", "lg"],
+        value: "md",
+      },
+    },
+  });
+
+  return (
+    <PlaygroundLayout
+      compName="Checkbox"
+      props={props}
+      control={control}
+    >
+      <CheckboxDemo {...props} />
+    </PlaygroundLayout>
+  );
+}
diff --git a/src/docs/components/CheckboxBlocks/Preview.tsx b/src/docs/components/CheckboxBlocks/Preview.tsx
index d877750..373f8a4 100644
--- a/src/docs/components/CheckboxBlocks/Preview.tsx
+++ b/src/docs/components/CheckboxBlocks/Preview.tsx
@@ -1,10 +1,20 @@
 import { Checkbox } from "@pswui/Checkbox";
 import { Label } from "@pswui/Label";
+/* remove */
+export interface CheckboxDemoPlaygroundProps {
+  CheckboxProps: {
+    size: "base" | "md" | "lg";
+  };
+}
 
+/* replace */
+export function CheckboxDemo({ CheckboxProps }: CheckboxDemoPlaygroundProps) {
+  /* with
 export function CheckboxDemo() {
+  */
   return (
     <Label direction="horizontal">
-      <Checkbox />
+      <Checkbox size={CheckboxProps.size} />
       <span>Checkbox</span>
     </Label>
   );