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 { 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>

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 { 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>
);