p-sw/pswui-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(playground): apply playground on Checkbox

Browse Source
This commit is contained in:
p-sw 2024-07-12 14:18:23 +09:00
parent 4add04ab7e
commit e4d9c8bae4
3 changed files with 116 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/docs/components/Checkbox.mdx
View File

@ -1,26 +1,19 @@
import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs"; import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
import { Story } from "@/components/Story"; import { Story } from "@/components/Story";
import { LoadedCode, GITHUB_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } from "@/components/LoadedCode"; import {
import { CheckboxDemo } from "./CheckboxBlocks/Preview"; LoadedCode,
GITHUB_COMP,
GITHUB_COMP_PREVIEW,
GITHUB_STORY,
} from "@/components/LoadedCode";
import Examples from "./CheckboxBlocks/Examples"; import Examples from "./CheckboxBlocks/Examples";
import Playground from "./CheckboxBlocks/Playground";
# Checkbox # Checkbox
A control that allows the user to toggle between checked and not checked. A control that allows the user to toggle between checked and not checked.
<TabProvider defaultName="preview"> <Playground />
<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 ## Installation
@ -44,7 +37,7 @@ import { Checkbox } from "@components/Checkbox";
### Variants ### Variants
| Prop | Type | Default | Description | | Prop | Type | Default | Description |
|:-------|:-------------------------|:--------|:-------------------------| | :----- | :----------------------- | :------ | :----------------------- |
| `size` | `"base" \| "md" \| "lg"` | `"md"` | The size of the checkbox | | `size` | `"base" \| "md" \| "lg"` | `"md"` | The size of the checkbox |
## Examples ## Examples
@ -52,33 +45,33 @@ import { Checkbox } from "@components/Checkbox";
### Text ### Text
<TabProvider defaultName="preview"> <TabProvider defaultName="preview">
<TabList> <TabList>
<TabTrigger name="preview">Preview</TabTrigger> <TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger> <TabTrigger name="code">Code</TabTrigger>
</TabList> </TabList>
<TabContent name="preview"> <TabContent name="preview">
<Story layout="centered"> <Story layout="centered">
<Examples.Text /> <Examples.Text />
</Story> </Story>
</TabContent> </TabContent>
<TabContent name="code"> <TabContent name="code">
<LoadedCode from={GITHUB_STORY("Checkbox", "Text")} /> <LoadedCode from={GITHUB_STORY("Checkbox", "Text")} />
</TabContent> </TabContent>
</TabProvider> </TabProvider>
### Disabled ### Disabled
<TabProvider defaultName="preview"> <TabProvider defaultName="preview">
<TabList> <TabList>
<TabTrigger name="preview">Preview</TabTrigger> <TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger> <TabTrigger name="code">Code</TabTrigger>
</TabList> </TabList>
<TabContent name="preview"> <TabContent name="preview">
<Story layout="centered"> <Story layout="centered">
<Examples.Disabled /> <Examples.Disabled />
</Story> </Story>
</TabContent> </TabContent>
<TabContent name="code"> <TabContent name="code">
<LoadedCode from={GITHUB_STORY("Checkbox", "Disabled")} /> <LoadedCode from={GITHUB_STORY("Checkbox", "Disabled")} />
</TabContent> </TabContent>
</TabProvider> </TabProvider>

28
src/docs/components/CheckboxBlocks/Playground.tsx Normal file
View File

@ -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>
);
}

12
src/docs/components/CheckboxBlocks/Preview.tsx
View File

@ -1,10 +1,20 @@
import { Checkbox } from "@pswui/Checkbox"; import { Checkbox } from "@pswui/Checkbox";
import { Label } from "@pswui/Label"; import { Label } from "@pswui/Label";
/* remove */
export interface CheckboxDemoPlaygroundProps {
CheckboxProps: {
size: "base" | "md" | "lg";
};
}
/* replace */
export function CheckboxDemo({ CheckboxProps }: CheckboxDemoPlaygroundProps) {
/* with
export function CheckboxDemo() { export function CheckboxDemo() {
*/
return ( return (
<Label direction="horizontal"> <Label direction="horizontal">
<Checkbox /> <Checkbox size={CheckboxProps.size} />
<span>Checkbox</span> <span>Checkbox</span>
</Label> </Label>
); );