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

feat(playground): add disabled prop system on playground

Browse Source
This commit is contained in:
p-sw 2024-07-12 13:59:50 +09:00
parent a7e2f7ac42
commit 09aa5e0d78
3 changed files with 49 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/LoadedCode.tsx
View File

@ -16,7 +16,10 @@ 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<string, Record<string, string | boolean>>;
export type TEMPLATE = Record<
string,
Record<string, string | boolean | undefined>
>;
const TEMPLATE_REMOVE_REGEX = /\/\*\s*remove\s*\*\/(.|\n)*?\/\*\s*end\s*\*\//g;
const TEMPLATE_REPLACE_REGEX =
@ -54,13 +57,15 @@ export const LoadedCode = forwardRef<
componentTemplateProps,
)) {
const regex = new RegExp(
`(<${componentName.slice(0, componentName.length - 5)}\\b[^>]*)\\s${propName}={${componentName}.${propName}}`,
`(<${componentName.slice(0, componentName.length - 5)}\\b[^>]*?)(\n?\\s+)${propName}={${componentName}.${propName}}`,
);
templatedCode = templatedCode.replace(
regex,
typeof propValue === "string"
? `\$1 ${propName}="${propValue}"`
: `$1 ${propName}={${propValue}}`,
typeof propValue === "undefined"
? "$1"
: typeof propValue === "string"
? `\$1$2 ${propName}="${propValue}"`
: `$1$2 ${propName}={${propValue}}`,
);
}
}

8
src/components/PgHooks.tsx
View File

@ -25,8 +25,14 @@ export function usePgProps<T extends TEMPLATE>(
state[componentName][propKey].value = value;
});
},
onToggle(v: boolean) {
console.log(`toggling ${componentName}/${propKey}`);
mutate((state) => {
state[componentName][propKey].disabled = v;
});
},
};
vals[propKey] = propMeta.value;
vals[propKey] = propMeta.disabled ? undefined : propMeta.value;
}
controlTemplate[componentName] = pre;

40
src/components/Playground.tsx
View File

@ -9,9 +9,9 @@ export type Template = Record<
string,
Record<
string,
| { type: "boolean"; value: boolean }
| { type: "select"; options: string[]; value: string }
| { type: "string"; value: string }
| { type: "boolean"; value: boolean; disabled?: boolean }
| { type: "select"; options: string[]; value: string; disabled?: boolean }
| { type: "string"; value: string; disabled?: boolean }
>
>;
@ -22,15 +22,25 @@ export type ControlTemplate = Record<
| {
type: "boolean";
value: boolean;
disabled?: boolean;
onChange: (value: boolean) => void;
onToggle: (v: boolean) => void;
}
| {
type: "select";
options: string[];
value: string;
disabled?: boolean;
onChange: (value: string) => void;
onToggle: (v: boolean) => void;
}
| {
type: "string";
value: string;
disabled?: boolean;
onChange: (value: string) => void;
onToggle: (v: boolean) => void;
}
| { type: "string"; value: string; onChange: (value: string) => void }
>
>;
@ -52,12 +62,26 @@ export function PlaygroundControl<T extends ControlTemplate>(props: {
>
<b>&lt;{componentName.slice(0, componentName.length - 5)}&gt;</b>
{Object.entries(propEntries).map(([propName, propMeta]) => (
<Label
<div
key={componentName + propName}
direction="horizontal"
className="flex flex-row justify-between items-center w-full gap-2"
>
<span>{propName}</span>
<Label
direction="horizontal"
className="flex flex-row items-center gap-2"
>
<Checkbox
onChange={(e) => {
propMeta.onToggle(e.currentTarget.checked);
}}
checked={propMeta.disabled}
/>
{propMeta.disabled ? (
<s className="opacity-50">{propName}</s>
) : (
<span>{propName}</span>
)}
</Label>
{propMeta.type === "boolean" ? (
<Checkbox
checked={propMeta.value}
@ -87,7 +111,7 @@ export function PlaygroundControl<T extends ControlTemplate>(props: {
</PopoverContent>
</Popover>
) : null}
</Label>
</div>
))}
</div>
))}