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

feat(docs/popover-playground): apply playground features

Browse Source
This commit is contained in:
p-sw 2024-07-12 04:10:55 +09:00
parent 9a3ea58d1c
commit 9070bc3424
1 changed files with 48 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

347
src/docs/components/PopoverBlocks/Playground.tsx
View File

@ -1,25 +1,54 @@
import { GITHUB_COMP_PREVIEW, LoadedCode } from "@/components/LoadedCode.tsx";
import {
GITHUB_COMP_PREVIEW,
LoadedCode,
type TEMPLATE,
} from "@/components/LoadedCode.tsx";
import { usePgProps } from "@/components/PgHooks.tsx";
import { PlaygroundControl } from "@/components/Playground.tsx";
import { Story } from "@/components/Story";
import useMutable from "@/utils/useMutable.ts";
import { Button } from "@pswui/Button.tsx";
import { Checkbox } from "@pswui/Checkbox.tsx";
import { Label } from "@pswui/Label.tsx";
import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover.tsx";
import { TabContent, TabList, TabProvider, TabTrigger } from "@pswui/Tabs";
import { type ControlledPopoverDemoProps, PopoverDemo } from "./Preview.tsx";
interface TemplateProps extends TEMPLATE, ControlledPopoverDemoProps {}
export default function PopoverPlayground() {
const [props, mutate] = useMutable<ControlledPopoverDemoProps>({
const [props, control] = usePgProps<TemplateProps>({
PopoverProps: {
opened: false,
opened: {
type: "boolean",
value: false,
},
},
PopoverContentProps: {
direction: "col",
position: "end",
anchor: "middle",
align: "middle",
offset: "md",
className: "",
direction: {
type: "select",
options: ["col", "row"],
value: "col",
},
position: {
type: "select",
options: ["start", "end"],
value: "end",
},
anchor: {
type: "select",
options: ["start", "middle", "end"],
value: "middle",
},
align: {
type: "select",
options: ["start", "middle", "end"],
value: "middle",
},
offset: {
type: "select",
options: ["sm", "md", "lg"],
value: "md",
},
className: {
type: "string",
value: "",
},
},
});
@ -36,293 +65,13 @@ export default function PopoverPlayground() {
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={GITHUB_COMP_PREVIEW("Popover")} />
<LoadedCode
from={GITHUB_COMP_PREVIEW("Popover")}
template={props}
/>
</TabContent>
</TabProvider>
<h3>Controls</h3>
<div
className={
"rounded-lg p-4 border border-neutral-300 dark:border-neutral-700 flex flex-col justify-center items-start gap-2"
}
>
<Label direction={"horizontal"}>
<span>opened </span>
<Checkbox
checked={props.PopoverProps.opened}
onChange={(e) => {
const v = e.currentTarget.checked;
mutate((p) => {
p.PopoverProps.opened = v;
});
}}
/>
</Label>
<Label direction={"horizontal"}>
<span>direction = </span>
<Popover>
<PopoverTrigger>
<Button className={"gap-2"}>
{props.PopoverContentProps.direction}
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<title>Expand</title>
<path
fill="currentColor"
d="M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z"
/>
</svg>
</Button>
</PopoverTrigger>
<PopoverContent
anchor={"start"}
align={"start"}
>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.direction = "col";
})
}
>
Column
</Button>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.direction = "row";
})
}
>
Row
</Button>
</PopoverContent>
</Popover>
</Label>
<Label direction={"horizontal"}>
<span>position = </span>
<Popover>
<PopoverTrigger>
<Button className={"gap-2"}>
{props.PopoverContentProps.position}
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<title>Expand</title>
<path
fill="currentColor"
d="M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z"
/>
</svg>
</Button>
</PopoverTrigger>
<PopoverContent
anchor={"start"}
align={"start"}
>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.position = "start";
})
}
>
Start
</Button>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.position = "end";
})
}
>
End
</Button>
</PopoverContent>
</Popover>
</Label>
<Label direction={"horizontal"}>
<span>anchor = </span>
<Popover>
<PopoverTrigger>
<Button className={"gap-2"}>
{props.PopoverContentProps.anchor}
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<title>Expand</title>
<path
fill="currentColor"
d="M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z"
/>
</svg>
</Button>
</PopoverTrigger>
<PopoverContent
anchor={"start"}
align={"start"}
>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.anchor = "start";
})
}
>
Start
</Button>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.anchor = "middle";
})
}
>
Middle
</Button>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.anchor = "end";
})
}
>
End
</Button>
</PopoverContent>
</Popover>
</Label>
<Label direction={"horizontal"}>
<span>align = </span>
<Popover>
<PopoverTrigger>
<Button className={"gap-2"}>
{props.PopoverContentProps.align}
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<title>Expand</title>
<path
fill="currentColor"
d="M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z"
/>
</svg>
</Button>
</PopoverTrigger>
<PopoverContent
anchor={"start"}
align={"start"}
>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.align = "start";
})
}
>
Start
</Button>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.align = "middle";
})
}
>
Middle
</Button>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.align = "end";
})
}
>
End
</Button>
</PopoverContent>
</Popover>
</Label>
<Label direction={"horizontal"}>
<span>offset = </span>
<Popover>
<PopoverTrigger>
<Button className={"gap-2"}>
{props.PopoverContentProps.offset}
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<title>Expand</title>
<path
fill="currentColor"
d="M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z"
/>
</svg>
</Button>
</PopoverTrigger>
<PopoverContent
anchor={"start"}
align={"start"}
>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.offset = "sm";
})
}
>
Small
</Button>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.offset = "md";
})
}
>
Middle
</Button>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.offset = "lg";
})
}
>
Large
</Button>
</PopoverContent>
</Popover>
</Label>
</div>
<PlaygroundControl props={control} />
</>
);
}