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

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

@ -1,84 +1,77 @@
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,
import Examples from "./CheckboxBlocks/Examples"; GITHUB_COMP,
GITHUB_COMP_PREVIEW,
# Checkbox GITHUB_STORY,
A control that allows the user to toggle between checked and not checked. } from "@/components/LoadedCode";
import Examples from "./CheckboxBlocks/Examples";
<TabProvider defaultName="preview"> import Playground from "./CheckboxBlocks/Playground";
<TabList>
<TabTrigger name="preview">Preview</TabTrigger> # Checkbox
<TabTrigger name="code">Code</TabTrigger>
</TabList> A control that allows the user to toggle between checked and not checked.
<TabContent name="preview">
<Story layout="centered"> <Playground />
<CheckboxDemo />
</Story> ## Installation
</TabContent>
<TabContent name="code"> 1. Create a new file `Checkbox.mdx` in your component folder.
<LoadedCode from={GITHUB_COMP_PREVIEW("Checkbox")} /> 2. Copy and paste the following code into the file.
</TabContent>
</TabProvider> <LoadedCode from={GITHUB_COMP("Checkbox")} />
## Installation ## Usage
1. Create a new file `Checkbox.mdx` in your component folder. ```tsx
2. Copy and paste the following code into the file. import { Checkbox } from "@components/Checkbox";
```
<LoadedCode from={GITHUB_COMP("Checkbox")} />
```html
## Usage <Checkbox />
```
```tsx
import { Checkbox } from "@components/Checkbox"; ## Props
```
### Variants
```html
<Checkbox /> | Prop | Type | Default | Description |
``` | :----- | :----------------------- | :------ | :----------------------- |
| `size` | `"base" \| "md" \| "lg"` | `"md"` | The size of the checkbox |
## Props
## Examples
### Variants
### Text
| Prop | Type | Default | Description |
|:-------|:-------------------------|:--------|:-------------------------| <TabProvider defaultName="preview">
| `size` | `"base" \| "md" \| "lg"` | `"md"` | The size of the checkbox | <TabList>
<TabTrigger name="preview">Preview</TabTrigger>
## Examples <TabTrigger name="code">Code</TabTrigger>
</TabList>
### Text <TabContent name="preview">
<Story layout="centered">
<TabProvider defaultName="preview"> <Examples.Text />
<TabList> </Story>
<TabTrigger name="preview">Preview</TabTrigger> </TabContent>
<TabTrigger name="code">Code</TabTrigger> <TabContent name="code">
</TabList> <LoadedCode from={GITHUB_STORY("Checkbox", "Text")} />
<TabContent name="preview"> </TabContent>
<Story layout="centered"> </TabProvider>
<Examples.Text />
</Story> ### Disabled
</TabContent>
<TabContent name="code"> <TabProvider defaultName="preview">
<LoadedCode from={GITHUB_STORY("Checkbox", "Text")} /> <TabList>
</TabContent> <TabTrigger name="preview">Preview</TabTrigger>
</TabProvider> <TabTrigger name="code">Code</TabTrigger>
</TabList>
### Disabled <TabContent name="preview">
<Story layout="centered">
<TabProvider defaultName="preview"> <Examples.Disabled />
<TabList> </Story>
<TabTrigger name="preview">Preview</TabTrigger> </TabContent>
<TabTrigger name="code">Code</TabTrigger> <TabContent name="code">
</TabList> <LoadedCode from={GITHUB_STORY("Checkbox", "Disabled")} />
<TabContent name="preview"> </TabContent>
<Story layout="centered"> </TabProvider>
<Examples.Disabled />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={GITHUB_STORY("Checkbox", "Disabled")} />
</TabContent>
</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>
); );