From 9c61fdac6d78e03b5be5ca8a116523bdf66b5a6a Mon Sep 17 00:00:00 2001 From: chakAs3 Date: Wed, 21 Jun 2023 14:42:22 +0400 Subject: [PATCH 01/10] add union type ArgControl --- .../src/components/ArgsTable/ArgControl.tsx | 38 ++++++++++++++++++- code/ui/blocks/src/controls/Number.tsx | 2 +- 2 files changed, 37 insertions(+), 3 deletions(-) diff --git a/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx b/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx index eb548636159f..dcd7a88cfccd 100644 --- a/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx +++ b/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx @@ -68,6 +68,40 @@ export const ArgControl: FC = ({ row, arg, updateArgs }) => { // row.name is a display name and not a suitable DOM input id or name - i might contain whitespace etc. // row.key is a hash key and therefore a much safer choice const props = { name: key, argType: row, value: boxedValue.value, onChange, onBlur, onFocus }; - const Control = Controls[control.type] || NoControl; - return ; + + const controls = getControlTypesFromArgType(props.argType); + + const tsTypes: string[] = row.table.type.summary.split('|').map((t: string) => t.trim()); + + return ( +
+ {controls + .filter((controlType: string) => + ['boolean', 'text', 'number', 'range', 'object', 'radio', 'select'].includes(controlType) + ) + .map((controlType: string) => { + const UninonControl = Controls[controlType] || NoControl; + const argValueType = typeof boxedValue.value; + const controlValue = [tsTypes.shift(), controlType].includes(argValueType) + ? boxedValue.value + : undefined; + + const controlKey = controls.length > 1 ? `${controlType}-${key}` : key; + + return ( + + ); + })} +
+ ); }; +function getControlTypesFromArgType(argType: ArgType) { + return argType.control.types.length === 0 ? [argType.control.type] : argType.control.types; +} diff --git a/code/ui/blocks/src/controls/Number.tsx b/code/ui/blocks/src/controls/Number.tsx index 551d5fb7417e..bfa177950cd6 100644 --- a/code/ui/blocks/src/controls/Number.tsx +++ b/code/ui/blocks/src/controls/Number.tsx @@ -66,7 +66,7 @@ export const NumberControl: FC = ({ } }, [value]); - if (!forceVisible && value === undefined) { + if (value === undefined) { return ( Set number From cac554de9f0dd6c2debebc2b7f8d6bfa9d2dc61e Mon Sep 17 00:00:00 2001 From: chakAs3 Date: Wed, 21 Jun 2023 20:55:57 +0400 Subject: [PATCH 02/10] handle undefined control.types --- code/ui/blocks/src/components/ArgsTable/ArgControl.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx b/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx index dcd7a88cfccd..754b59457326 100644 --- a/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx +++ b/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx @@ -103,5 +103,7 @@ export const ArgControl: FC = ({ row, arg, updateArgs }) => { ); }; function getControlTypesFromArgType(argType: ArgType) { - return argType.control.types.length === 0 ? [argType.control.type] : argType.control.types; + return !argType.control.types || argType.control.types.length === 0 + ? [argType.control.type] + : argType.control.types; } From a4d060b9f3e8155b13c7e12aab84e7dac27b79ea Mon Sep 17 00:00:00 2001 From: chakAs3 Date: Fri, 23 Jun 2023 16:46:24 +0400 Subject: [PATCH 03/10] update to new api that uses type {name,value} --- .../src/components/ArgsTable/ArgControl.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx b/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx index 754b59457326..79747189129d 100644 --- a/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx +++ b/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx @@ -69,9 +69,10 @@ export const ArgControl: FC = ({ row, arg, updateArgs }) => { // row.key is a hash key and therefore a much safer choice const props = { name: key, argType: row, value: boxedValue.value, onChange, onBlur, onFocus }; - const controls = getControlTypesFromArgType(props.argType); + const controls = getControlTypesFromArgType(row); - const tsTypes: string[] = row.table.type.summary.split('|').map((t: string) => t.trim()); + const tsTypes: string[] = + row.type.name === 'union' ? row.type.value.map((t: { name: any }) => t.name) : []; return (
@@ -103,7 +104,15 @@ export const ArgControl: FC = ({ row, arg, updateArgs }) => { ); }; function getControlTypesFromArgType(argType: ArgType) { - return !argType.control.types || argType.control.types.length === 0 - ? [argType.control.type] - : argType.control.types; + return argType.type.value && argType.type.name === 'union' + ? argType.type.value.map((t: { name: any }) => { + switch (t.name) { + case 'string': + return 'text'; + + default: + return t.name; + } + }) + : [argType.type.name]; } From 8497af575f926b2737f7b7a90d56fb6d76321092 Mon Sep 17 00:00:00 2001 From: chakAs3 Date: Fri, 23 Jun 2023 17:05:11 +0400 Subject: [PATCH 04/10] handle undefined value for argType.type --- code/ui/blocks/src/components/ArgsTable/ArgControl.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx b/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx index 79747189129d..ef5021ef1c07 100644 --- a/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx +++ b/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx @@ -72,7 +72,7 @@ export const ArgControl: FC = ({ row, arg, updateArgs }) => { const controls = getControlTypesFromArgType(row); const tsTypes: string[] = - row.type.name === 'union' ? row.type.value.map((t: { name: any }) => t.name) : []; + row.type?.name === 'union' ? row.type.value.map((t: { name: any }) => t.name) : []; return (
@@ -104,7 +104,7 @@ export const ArgControl: FC = ({ row, arg, updateArgs }) => { ); }; function getControlTypesFromArgType(argType: ArgType) { - return argType.type.value && argType.type.name === 'union' + return argType.type?.value && argType.type?.name === 'union' ? argType.type.value.map((t: { name: any }) => { switch (t.name) { case 'string': From 4e2c14b75f0019bdf6baf6720d2d9e78449d6719 Mon Sep 17 00:00:00 2001 From: chakAs3 Date: Fri, 23 Jun 2023 17:13:14 +0400 Subject: [PATCH 05/10] add some comments --- code/ui/blocks/src/components/ArgsTable/ArgControl.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx b/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx index ef5021ef1c07..f36c861eb577 100644 --- a/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx +++ b/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx @@ -103,6 +103,12 @@ export const ArgControl: FC = ({ row, arg, updateArgs }) => {
); }; +/** + * function to get control types from union arg type + * example : argType = { name: 'union', value: [{ name: 'string' }, { name: 'number' }] } + * @param argType + * @returns + */ function getControlTypesFromArgType(argType: ArgType) { return argType.type?.value && argType.type?.name === 'union' ? argType.type.value.map((t: { name: any }) => { From 1df8b5cf484ad1a9d003b8354d6e321fc4fd49fb Mon Sep 17 00:00:00 2001 From: chakAs3 Date: Fri, 23 Jun 2023 19:22:07 +0400 Subject: [PATCH 06/10] ui adjustment and cleanup --- .../src/components/ArgsTable/ArgControl.tsx | 48 +++++++++---------- code/ui/blocks/src/controls/Number.tsx | 6 ++- code/ui/components/src/form/input/input.tsx | 5 ++ 3 files changed, 32 insertions(+), 27 deletions(-) diff --git a/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx b/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx index f36c861eb577..65ee1ede576a 100644 --- a/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx +++ b/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx @@ -76,30 +76,26 @@ export const ArgControl: FC = ({ row, arg, updateArgs }) => { return (
- {controls - .filter((controlType: string) => - ['boolean', 'text', 'number', 'range', 'object', 'radio', 'select'].includes(controlType) - ) - .map((controlType: string) => { - const UninonControl = Controls[controlType] || NoControl; - const argValueType = typeof boxedValue.value; - const controlValue = [tsTypes.shift(), controlType].includes(argValueType) - ? boxedValue.value - : undefined; - - const controlKey = controls.length > 1 ? `${controlType}-${key}` : key; - - return ( - - ); - })} + {controls.map((controlType: string) => { + const UninonControl = Controls[controlType] || NoControl; + const argValueType = typeof boxedValue.value; + const controlValue = [tsTypes.shift(), controlType].includes(argValueType) + ? boxedValue.value + : undefined; + + const controlKey = controls.length > 1 ? `${controlType}-${key}` : key; + + return ( + + ); + })}
); }; @@ -110,7 +106,7 @@ export const ArgControl: FC = ({ row, arg, updateArgs }) => { * @returns */ function getControlTypesFromArgType(argType: ArgType) { - return argType.type?.value && argType.type?.name === 'union' + return argType.type?.value && argType.type?.name === 'union' && !argType.options ? argType.type.value.map((t: { name: any }) => { switch (t.name) { case 'string': @@ -120,5 +116,5 @@ function getControlTypesFromArgType(argType: ArgType) { return t.name; } }) - : [argType.type.name]; + : [argType.control.type]; } diff --git a/code/ui/blocks/src/controls/Number.tsx b/code/ui/blocks/src/controls/Number.tsx index bfa177950cd6..a0b0007a3ba2 100644 --- a/code/ui/blocks/src/controls/Number.tsx +++ b/code/ui/blocks/src/controls/Number.tsx @@ -64,9 +64,13 @@ export const NumberControl: FC = ({ if (inputValue !== newInputValue) { setInputValue(value); } + console.log('useEffect', value, newInputValue, inputValue); + if (!value && newInputValue === '') { + setForceVisible(false); + } }, [value]); - if (value === undefined) { + if (!forceVisible && value === undefined) { return ( Set number diff --git a/code/ui/components/src/form/input/input.tsx b/code/ui/components/src/form/input/input.tsx index cc21c5447ad3..4f769e360439 100644 --- a/code/ui/components/src/form/input/input.tsx +++ b/code/ui/components/src/form/input/input.tsx @@ -33,6 +33,11 @@ const styles = ({ theme }: { theme: Theme }): CSSObject => ({ lineHeight: '20px', padding: '6px 10px', // 32 + '&[type="number"]': { + /* without this we will have inconsistant height */ + padding: '0px 10px', + }, + '&:focus': { boxShadow: `${theme.color.secondary} 0 0 0 1px inset`, outline: 'none', From 1d06af85b54132479ca41c3d1fa24d5b92ccc0c9 Mon Sep 17 00:00:00 2001 From: chakAs3 Date: Fri, 23 Jun 2023 20:15:38 +0400 Subject: [PATCH 07/10] add tsType to if there no union --- code/ui/blocks/src/components/ArgsTable/ArgControl.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx b/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx index 65ee1ede576a..90368c92f6b1 100644 --- a/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx +++ b/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx @@ -72,7 +72,9 @@ export const ArgControl: FC = ({ row, arg, updateArgs }) => { const controls = getControlTypesFromArgType(row); const tsTypes: string[] = - row.type?.name === 'union' ? row.type.value.map((t: { name: any }) => t.name) : []; + row.type?.name === 'union' + ? row.type.value.map((t: { name: any }) => t.name) + : [row.type?.name]; return (
From 4d1c148850af516ed3249d52d8504d24f4fd7e1b Mon Sep 17 00:00:00 2001 From: chakAs3 Date: Fri, 1 Sep 2023 11:33:25 +0400 Subject: [PATCH 08/10] remove console logs --- code/ui/blocks/src/controls/Number.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/blocks/src/controls/Number.tsx b/code/ui/blocks/src/controls/Number.tsx index a0b0007a3ba2..c1531b7d48c4 100644 --- a/code/ui/blocks/src/controls/Number.tsx +++ b/code/ui/blocks/src/controls/Number.tsx @@ -64,7 +64,7 @@ export const NumberControl: FC = ({ if (inputValue !== newInputValue) { setInputValue(value); } - console.log('useEffect', value, newInputValue, inputValue); + if (!value && newInputValue === '') { setForceVisible(false); } From 4296a414db44cc8114b1f4357cbb565b9486311a Mon Sep 17 00:00:00 2001 From: chakAs3 Date: Mon, 11 Sep 2023 01:33:39 +0400 Subject: [PATCH 09/10] add test story to vue3 renderer --- .../UnionTypeProp.stories.ts | 20 +++++++++++++++++++ .../UnionTypeProp.vue | 9 +++++++++ 2 files changed, 29 insertions(+) create mode 100644 code/renderers/vue3/template/stories_vue3-vite-default-ts/UnionTypeProp.stories.ts create mode 100644 code/renderers/vue3/template/stories_vue3-vite-default-ts/UnionTypeProp.vue diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/UnionTypeProp.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/UnionTypeProp.stories.ts new file mode 100644 index 000000000000..f022cf6bb456 --- /dev/null +++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/UnionTypeProp.stories.ts @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/vue3'; + +import MyComponent from './UnionTypeProp.vue'; + +const meta: Meta = { + component: MyComponent, + argTypes: {}, + tags: ['autodocs'], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const UnionType: Story = { + args: { + label: 'UnionType', + stringOrNumber: 12, + booleanOrNumber: true, + }, +}; diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/UnionTypeProp.vue b/code/renderers/vue3/template/stories_vue3-vite-default-ts/UnionTypeProp.vue new file mode 100644 index 000000000000..1e1499842f2e --- /dev/null +++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/UnionTypeProp.vue @@ -0,0 +1,9 @@ + + + From 9f3a444a9cec1d5255effefe5b207de9a8ee3159 Mon Sep 17 00:00:00 2001 From: chakAs3 Date: Mon, 11 Sep 2023 01:46:56 +0400 Subject: [PATCH 10/10] flex column --- code/renderers/vue3/src/docs/sourceDecorator.ts | 2 +- code/ui/blocks/src/components/ArgsTable/ArgControl.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/code/renderers/vue3/src/docs/sourceDecorator.ts b/code/renderers/vue3/src/docs/sourceDecorator.ts index fc04b6defbdb..8d1ff58fc1e3 100644 --- a/code/renderers/vue3/src/docs/sourceDecorator.ts +++ b/code/renderers/vue3/src/docs/sourceDecorator.ts @@ -247,7 +247,7 @@ export function generateTemplateSource( .map((child) => child.content) .join('') : ''; - console.log(' vnode ', vnode, ' childSources ', childSources, ' attributes ', attributes); + const name = typeof type === 'string' ? type diff --git a/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx b/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx index 90368c92f6b1..c5235bd8f5c1 100644 --- a/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx +++ b/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx @@ -77,7 +77,7 @@ export const ArgControl: FC = ({ row, arg, updateArgs }) => { : [row.type?.name]; return ( -
+
{controls.map((controlType: string) => { const UninonControl = Controls[controlType] || NoControl; const argValueType = typeof boxedValue.value;