From fb69f288a1a54205d80158c39f0b73fe094b5f71 Mon Sep 17 00:00:00 2001 From: p-sw Date: Sun, 30 Jun 2024 22:57:10 +0900 Subject: [PATCH] feat: apply new playground in Popover documentation --- src/components/LoadedCode.tsx | 35 +- src/docs/components/Popover.mdx | 31 +- .../components/PopoverBlocks/Playground.tsx | 328 ++++++++++++++++++ src/docs/components/PopoverBlocks/Preview.tsx | 23 +- src/utils/useMutable.ts | 12 + 5 files changed, 404 insertions(+), 25 deletions(-) create mode 100644 src/docs/components/PopoverBlocks/Playground.tsx create mode 100644 src/utils/useMutable.ts diff --git a/src/components/LoadedCode.tsx b/src/components/LoadedCode.tsx index a936e3b..45cd3da 100644 --- a/src/components/LoadedCode.tsx +++ b/src/components/LoadedCode.tsx @@ -1,6 +1,6 @@ import { Button } from "@pswui/Button"; import { useToast } from "@pswui/Toast"; -import { forwardRef, useEffect, useState } from "react"; +import { forwardRef, useEffect, useMemo, useState } from "react"; import SyntaxHighlighter from "react-syntax-highlighter"; import { gruvboxDark } from "react-syntax-highlighter/dist/cjs/styles/hljs"; import { twMerge } from "tailwind-merge"; @@ -16,12 +16,16 @@ export const GITHUB_COMP_PREVIEW = (componentName: string) => export const GITHUB_STORY = (componentName: string, storyName: string) => `${GITHUB_DOCS}/src/docs/components/${componentName}Blocks/Examples/${storyName}.tsx`; +export type TEMPLATE = Record>; + export const LoadedCode = ({ from, className, + template, }: { from: string; className?: string; + template?: TEMPLATE; }) => { const [state, setState] = useState(); const { toast } = useToast(); @@ -34,6 +38,33 @@ export const LoadedCode = ({ })(); }, [from]); + const postProcessedCode = useMemo(() => { + if (!state) return ""; + if (!template) return state; + + let templatedCode = state; + + for (const [componentName, componentTemplateProps] of Object.entries( + template, + )) { + for (const [propName, propValue] of Object.entries( + componentTemplateProps, + )) { + const regex = new RegExp( + `(<${componentName}\s[^]*)\s${propName}=(\{(true|false|"[^"\n]*"|'[^'\n]*'|\`[^\`\n]*\`)\}|"[^"\n]*"|'[^'\n]*')`, + ); + templatedCode = templatedCode.replace( + regex, + typeof propValue === "string" + ? `\$1 ${propName}="${propValue}"` + : `$1 ${propName}={${propValue}}`, + ); + } + } + + return templatedCode; + }, [state, template]); + return (
); diff --git a/src/docs/components/Popover.mdx b/src/docs/components/Popover.mdx index 5ff55ef..091555f 100644 --- a/src/docs/components/Popover.mdx +++ b/src/docs/components/Popover.mdx @@ -1,26 +1,15 @@ import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs"; import { Story } from "@/components/Story"; -import { LoadedCode, GITHUB_STORY, GITHUB_COMP, GITHUB_COMP_PREVIEW } from "@/components/LoadedCode"; -import { PopoverDemo } from "./PopoverBlocks/Preview"; +import { LoadedCode, GITHUB_STORY, GITHUB_COMP } from "@/components/LoadedCode"; import Examples from "./PopoverBlocks/Examples"; +import PopoverPlayground from "./PopoverBlocks/Playground"; # Popover Displays rich content in a portal, triggered by a button. - - - Preview - Code - - - - - - - - - - +## Playground + + ## Installation @@ -60,10 +49,12 @@ import { Popover, PopoverTrigger, PopoverContent } from "@components/popover" #### Special -| Prop | Type | Default | Description | -|:----------|:----------|:--------|:------------------------------------------------------------------| -| `opened` | `boolean` | `false` | Initial open state | -| `asChild` | `boolean` | `false` | Whether the root of popover is rendered as a child of a component | +| Prop | Type | Default | Description | +|:----------|:------------------------|:------------|:------------------------------------------------------------------| +| `opened` | `boolean \| undefined` | `undefined` | Opened state | +| `asChild` | `boolean` | `false` | Whether the root of popover is rendered as a child of a component | + +Note that giving `opened` prop not undefined will also sets the internal state `controlled` which disables internal popover open/close handling, like close on outside click. ### PopoverContent diff --git a/src/docs/components/PopoverBlocks/Playground.tsx b/src/docs/components/PopoverBlocks/Playground.tsx new file mode 100644 index 0000000..dd299cd --- /dev/null +++ b/src/docs/components/PopoverBlocks/Playground.tsx @@ -0,0 +1,328 @@ +import { GITHUB_COMP_PREVIEW, LoadedCode } from "@/components/LoadedCode.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"; + +export default function PopoverPlayground() { + const [props, mutate] = useMutable({ + PopoverProps: { + opened: false, + }, + PopoverContentProps: { + direction: "col", + position: "end", + anchor: "middle", + align: "middle", + offset: "md", + className: "", + }, + }); + + return ( + <> + + + Preview + Code + + + + + + + + + + +

Controls

+
+ + + + + + +
+ + ); +} diff --git a/src/docs/components/PopoverBlocks/Preview.tsx b/src/docs/components/PopoverBlocks/Preview.tsx index f01797c..735812d 100644 --- a/src/docs/components/PopoverBlocks/Preview.tsx +++ b/src/docs/components/PopoverBlocks/Preview.tsx @@ -1,9 +1,26 @@ import { Button } from "@pswui/Button"; import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover"; -export function PopoverDemo() { +export interface ControlledPopoverDemoProps { + PopoverProps: { + opened: boolean; + }; + PopoverContentProps: { + direction: "row" | "col"; + position: "start" | "end"; + anchor: "start" | "middle" | "end"; + align: "start" | "middle" | "end"; + offset: "sm" | "md" | "lg"; + className?: string; + }; +} + +export function PopoverDemo({ + PopoverProps, + PopoverContentProps, +}: ControlledPopoverDemoProps) { return ( - + - +