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

feat: update playground components to support number prop

Browse Source
This commit is contained in:
p-sw 2024-08-04 14:58:42 +09:00
parent cf77c6908b
commit da1a53ba29
3 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/LoadedCode.tsx
View File

@ -31,7 +31,7 @@ export const GITHUB_STORY = (componentName: string, storyName: string) =>
export type TEMPLATE = Record< export type TEMPLATE = Record<
string, string,
Record<string, string | boolean | undefined> Record<string, string | boolean | number | undefined>
>; >;
const TEMPLATE_REMOVE_REGEX = /\/\*\s*remove\s*\*\/(.|\n)*?\/\*\s*end\s*\*\//g; const TEMPLATE_REMOVE_REGEX = /\/\*\s*remove\s*\*\/(.|\n)*?\/\*\s*end\s*\*\//g;

2
src/components/PgHooks.tsx
View File

@ -19,7 +19,7 @@ export function usePgProps<T extends TEMPLATE>(
for (const [propKey, propMeta] of Object.entries(prop)) { for (const [propKey, propMeta] of Object.entries(prop)) {
pre[propKey] = { pre[propKey] = {
...propMeta, ...propMeta,
onChange(value: string | boolean) { onChange(value: string | number | boolean) {
console.log(`mutating ${componentName}/${propKey}`); console.log(`mutating ${componentName}/${propKey}`);
mutate((state) => { mutate((state) => {
state[componentName][propKey].value = value; state[componentName][propKey].value = value;

3
src/components/Playground.tsx
View File

@ -15,6 +15,7 @@ export type Template = Record<
| { type: "boolean"; value: boolean; disabled?: boolean } | { type: "boolean"; value: boolean; disabled?: boolean }
| { type: "select"; options: string[]; value: string; disabled?: boolean } | { type: "select"; options: string[]; value: string; disabled?: boolean }
| { type: "string"; value: string; disabled?: boolean } | { type: "string"; value: string; disabled?: boolean }
| { type: "number"; value: number; disabled?: boolean }
> >
>; >;
@ -76,7 +77,7 @@ export function PlaygroundControl<T extends ControlTemplate>(props: {
{Object.entries(propEntries).map(([propName, propMeta]) => ( {Object.entries(propEntries).map(([propName, propMeta]) => (
<div <div
key={componentName + propName} key={componentName + propName}
className="flex flex-row justify-between items-center w-full gap-2" className="flex flex-col md:flex-row justify-between md:items-center w-full *:w-full md:*:w-auto gap-2"
> >
<Label <Label
direction="horizontal" direction="horizontal"