Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: add inputType for form hook functions #642

Merged
merged 1 commit into from
Sep 14, 2022
Merged

fix: add inputType for form hook functions #642

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 63 additions & 57 deletions ...s/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,11 +252,12 @@ export declare type ValidationResponse = {
errorMessage?: string;
};
export declare type ValidationFunction<T> = (value: T, validationResponse: ValidationResponse) => ValidationResponse | Promise<ValidationResponse>;
export declare type CustomDataFormInputValues = {
name?: ValidationFunction<string>;
email?: ValidationFunction<string>;
city?: ValidationFunction<string>;
category?: ValidationFunction<string>;
export declare type UseBaseOrValidationType<Flag, T> = Flag extends true ? T : ValidationFunction<T>;
export declare type CustomDataFormInputValues<useBase extends boolean = true> = {
name?: UseBaseOrValidationType<useBase, string>;
email?: UseBaseOrValidationType<useBase, string>;
city?: UseBaseOrValidationType<useBase, string>;
category?: UseBaseOrValidationType<useBase, string>;
};
export declare type FormProps<T> = Partial<T> & React.DOMAttributes<HTMLDivElement>;
export declare type CustomDataFormOverridesProps = {
Expand All @@ -269,10 +270,10 @@ export declare type CustomDataFormOverridesProps = {
export declare type CustomDataFormProps = React.PropsWithChildren<{
overrides?: CustomDataFormOverridesProps | undefined | null;
} & {
onSubmit: (fields: Record<string, unknown>) => void;
onSubmit: (fields: CustomDataFormInputValues) => void;
onCancel?: () => void;
onChange?: (fields: Record<string, unknown>) => Record<string, unknown>;
onValidate?: CustomDataFormInputValues;
onChange?: (fields: CustomDataFormInputValues) => CustomDataFormInputValues;
onValidate?: CustomDataFormInputValues<false>;
}>;
export default function CustomDataForm(props: CustomDataFormProps): React.ReactElement;
"
Expand Down Expand Up @@ -486,12 +487,13 @@ export declare type ValidationResponse = {
errorMessage?: string;
};
export declare type ValidationFunction<T> = (value: T, validationResponse: ValidationResponse) => ValidationResponse | Promise<ValidationResponse>;
export declare type NestedJsonInputValues = {
firstName?: ValidationFunction<string>;
lastName?: ValidationFunction<string>;
export declare type UseBaseOrValidationType<Flag, T> = Flag extends true ? T : ValidationFunction<T>;
export declare type NestedJsonInputValues<useBase extends boolean = true> = {
firstName?: UseBaseOrValidationType<useBase, string>;
lastName?: UseBaseOrValidationType<useBase, string>;
bio?: {
favoriteQuote?: ValidationFunction<string>;
favoriteAnimal?: ValidationFunction<string>;
favoriteQuote?: UseBaseOrValidationType<useBase, string>;
favoriteAnimal?: UseBaseOrValidationType<useBase, string>;
};
};
export declare type FormProps<T> = Partial<T> & React.DOMAttributes<HTMLDivElement>;
Expand All @@ -506,10 +508,10 @@ export declare type NestedJsonOverridesProps = {
export declare type NestedJsonProps = React.PropsWithChildren<{
overrides?: NestedJsonOverridesProps | undefined | null;
} & {
onSubmit: (fields: Record<string, unknown>) => void;
onSubmit: (fields: NestedJsonInputValues) => void;
onCancel?: () => void;
onChange?: (fields: Record<string, unknown>) => Record<string, unknown>;
onValidate?: NestedJsonInputValues;
onChange?: (fields: NestedJsonInputValues) => NestedJsonInputValues;
onValidate?: NestedJsonInputValues<false>;
}>;
export default function NestedJson(props: NestedJsonProps): React.ReactElement;
"
Expand Down Expand Up @@ -657,8 +659,9 @@ export declare type ValidationResponse = {
errorMessage?: string;
};
export declare type ValidationFunction<T> = (value: T, validationResponse: ValidationResponse) => ValidationResponse | Promise<ValidationResponse>;
export declare type CustomWithSectionalElementsInputValues = {
name?: ValidationFunction<string>;
export declare type UseBaseOrValidationType<Flag, T> = Flag extends true ? T : ValidationFunction<T>;
export declare type CustomWithSectionalElementsInputValues<useBase extends boolean = true> = {
name?: UseBaseOrValidationType<useBase, string>;
};
export declare type FormProps<T> = Partial<T> & React.DOMAttributes<HTMLDivElement>;
export declare type CustomWithSectionalElementsOverridesProps = {
Expand All @@ -671,10 +674,10 @@ export declare type CustomWithSectionalElementsOverridesProps = {
export declare type CustomWithSectionalElementsProps = React.PropsWithChildren<{
overrides?: CustomWithSectionalElementsOverridesProps | undefined | null;
} & {
onSubmit: (fields: Record<string, unknown>) => void;
onSubmit: (fields: CustomWithSectionalElementsInputValues) => void;
onCancel?: () => void;
onChange?: (fields: Record<string, unknown>) => Record<string, unknown>;
onValidate?: CustomWithSectionalElementsInputValues;
onChange?: (fields: CustomWithSectionalElementsInputValues) => CustomWithSectionalElementsInputValues;
onValidate?: CustomWithSectionalElementsInputValues<false>;
}>;
export default function CustomWithSectionalElements(props: CustomWithSectionalElementsProps): React.ReactElement;
"
Expand Down Expand Up @@ -917,11 +920,12 @@ export declare type ValidationResponse = {
errorMessage?: string;
};
export declare type ValidationFunction<T> = (value: T, validationResponse: ValidationResponse) => ValidationResponse | Promise<ValidationResponse>;
export declare type MyPostFormInputValues = {
caption?: ValidationFunction<string>;
username?: ValidationFunction<string>;
post_url?: ValidationFunction<string>;
profile_url?: ValidationFunction<string>;
export declare type UseBaseOrValidationType<Flag, T> = Flag extends true ? T : ValidationFunction<T>;
export declare type MyPostFormInputValues<useBase extends boolean = true> = {
caption?: UseBaseOrValidationType<useBase, string>;
username?: UseBaseOrValidationType<useBase, string>;
post_url?: UseBaseOrValidationType<useBase, string>;
profile_url?: UseBaseOrValidationType<useBase, string>;
};
export declare type FormProps<T> = Partial<T> & React.DOMAttributes<HTMLDivElement>;
export declare type MyPostFormOverridesProps = {
Expand All @@ -934,12 +938,12 @@ export declare type MyPostFormOverridesProps = {
export declare type MyPostFormProps = React.PropsWithChildren<{
overrides?: MyPostFormOverridesProps | undefined | null;
} & {
onSubmit?: (fields: Record<string, unknown>) => Record<string, unknown>;
onSuccess?: (fields: Record<string, unknown>) => void;
onError?: (fields: Record<string, unknown>, errorMessage: string) => void;
onSubmit?: (fields: MyPostFormInputValues) => MyPostFormInputValues;
onSuccess?: (fields: MyPostFormInputValues) => void;
onError?: (fields: MyPostFormInputValues, errorMessage: string) => void;
onCancel?: () => void;
onChange?: (fields: Record<string, unknown>) => Record<string, unknown>;
onValidate?: MyPostFormInputValues;
onChange?: (fields: MyPostFormInputValues) => MyPostFormInputValues;
onValidate?: MyPostFormInputValues<false>;
}>;
export default function MyPostForm(props: MyPostFormProps): React.ReactElement;
"
Expand Down Expand Up @@ -1280,12 +1284,13 @@ export declare type ValidationResponse = {
errorMessage?: string;
};
export declare type ValidationFunction<T> = (value: T, validationResponse: ValidationResponse) => ValidationResponse | Promise<ValidationResponse>;
export declare type MyPostFormInputValues = {
TextAreaFieldbbd63464?: ValidationFunction<string>;
caption?: ValidationFunction<string>;
username?: ValidationFunction<string>;
profile_url?: ValidationFunction<string>;
post_url?: ValidationFunction<string>;
export declare type UseBaseOrValidationType<Flag, T> = Flag extends true ? T : ValidationFunction<T>;
export declare type MyPostFormInputValues<useBase extends boolean = true> = {
TextAreaFieldbbd63464?: UseBaseOrValidationType<useBase, string>;
caption?: UseBaseOrValidationType<useBase, string>;
username?: UseBaseOrValidationType<useBase, string>;
profile_url?: UseBaseOrValidationType<useBase, string>;
post_url?: UseBaseOrValidationType<useBase, string>;
};
export declare type FormProps<T> = Partial<T> & React.DOMAttributes<HTMLDivElement>;
export declare type MyPostFormOverridesProps = {
Expand All @@ -1301,12 +1306,12 @@ export declare type MyPostFormProps = React.PropsWithChildren<{
} & {
id?: string;
post?: Post;
onSubmit?: (fields: Record<string, unknown>) => Record<string, unknown>;
onSuccess?: (fields: Record<string, unknown>) => void;
onError?: (fields: Record<string, unknown>, errorMessage: string) => void;
onSubmit?: (fields: MyPostFormInputValues) => MyPostFormInputValues;
onSuccess?: (fields: MyPostFormInputValues) => void;
onError?: (fields: MyPostFormInputValues, errorMessage: string) => void;
onCancel?: () => void;
onChange?: (fields: Record<string, unknown>) => Record<string, unknown>;
onValidate?: MyPostFormInputValues;
onChange?: (fields: MyPostFormInputValues) => MyPostFormInputValues;
onValidate?: MyPostFormInputValues<false>;
}>;
export default function MyPostForm(props: MyPostFormProps): React.ReactElement;
"
Expand Down Expand Up @@ -1885,16 +1890,17 @@ export declare type ValidationResponse = {
errorMessage?: string;
};
export declare type ValidationFunction<T> = (value: T, validationResponse: ValidationResponse) => ValidationResponse | Promise<ValidationResponse>;
export declare type InputGalleryCreateFormInputValues = {
num?: ValidationFunction<number>;
rootbeer?: ValidationFunction<number>;
attend?: ValidationFunction<boolean>;
maybeSlide?: ValidationFunction<boolean>;
maybeCheck?: ValidationFunction<boolean>;
arrayTypeField?: ValidationFunction<string>;
timestamp?: ValidationFunction<number>;
ippy?: ValidationFunction<string>;
timeisnow?: ValidationFunction<string>;
export declare type UseBaseOrValidationType<Flag, T> = Flag extends true ? T : ValidationFunction<T>;
export declare type InputGalleryCreateFormInputValues<useBase extends boolean = true> = {
num?: UseBaseOrValidationType<useBase, number>;
rootbeer?: UseBaseOrValidationType<useBase, number>;
attend?: UseBaseOrValidationType<useBase, boolean>;
maybeSlide?: UseBaseOrValidationType<useBase, boolean>;
maybeCheck?: UseBaseOrValidationType<useBase, boolean>;
arrayTypeField?: UseBaseOrValidationType<useBase, string>;
timestamp?: UseBaseOrValidationType<useBase, number>;
ippy?: UseBaseOrValidationType<useBase, string>;
timeisnow?: UseBaseOrValidationType<useBase, string>;
};
export declare type FormProps<T> = Partial<T> & React.DOMAttributes<HTMLDivElement>;
export declare type InputGalleryCreateFormOverridesProps = {
Expand All @@ -1912,12 +1918,12 @@ export declare type InputGalleryCreateFormOverridesProps = {
export declare type InputGalleryCreateFormProps = React.PropsWithChildren<{
overrides?: InputGalleryCreateFormOverridesProps | undefined | null;
} & {
onSubmit?: (fields: Record<string, unknown>) => Record<string, unknown>;
onSuccess?: (fields: Record<string, unknown>) => void;
onError?: (fields: Record<string, unknown>, errorMessage: string) => void;
onSubmit?: (fields: InputGalleryCreateFormInputValues) => InputGalleryCreateFormInputValues;
onSuccess?: (fields: InputGalleryCreateFormInputValues) => void;
onError?: (fields: InputGalleryCreateFormInputValues, errorMessage: string) => void;
onCancel?: () => void;
onChange?: (fields: Record<string, unknown>) => Record<string, unknown>;
onValidate?: InputGalleryCreateFormInputValues;
onChange?: (fields: InputGalleryCreateFormInputValues) => InputGalleryCreateFormInputValues;
onValidate?: InputGalleryCreateFormInputValues<false>;
}>;
export default function InputGalleryCreateForm(props: InputGalleryCreateFormProps): React.ReactElement;
"
Expand Down
16 changes: 8 additions & 8 deletions packages/codegen-ui-react/lib/__tests__/forms/__snapshots__/type-helper.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`should generate nested object should generate type for nested object 1`] = `
"export declare type myCreateFormInputValues = {
firstName?: ValidationFunction<string>;
isExplorer?: ValidationFunction<boolean>;
"export declare type myCreateFormInputValues<useBase extends boolean = true> = {
firstName?: UseBaseOrValidationType<useBase, string>;
isExplorer?: UseBaseOrValidationType<useBase, boolean>;
bio?: {
favoriteAnimal?: {
animalMeta?: {
family?: {
genus?: ValidationFunction<string>;
genus?: UseBaseOrValidationType<useBase, string>;
};
earliestRecord?: ValidationFunction<number>;
earliestRecord?: UseBaseOrValidationType<useBase, number>;
};
};
};
};"
`;

exports[`should generate nested object should generate type for non nested object 1`] = `
"export declare type myCreateFormInputValues = {
firstName?: ValidationFunction<string>;
isExplorer?: ValidationFunction<boolean>;
"export declare type myCreateFormInputValues<useBase extends boolean = true> = {
firstName?: UseBaseOrValidationType<useBase, string>;
isExplorer?: UseBaseOrValidationType<useBase, boolean>;
};"
`;
6 changes: 3 additions & 3 deletions packages/codegen-ui-react/lib/__tests__/forms/type-helper.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
*/

import { FieldConfigMetadata } from '@aws-amplify/codegen-ui';
import { generateOnValidationType } from '../../forms/type-helper';
import { generateInputTypes } from '../../forms/type-helper';
import { genericPrinter } from '../__utils__';

describe('should generate nested object', () => {
Expand All @@ -38,7 +38,7 @@ describe('should generate nested object', () => {
validationRules: [],
},
};
const types = generateOnValidationType('myCreateForm', fieldConfigs);
const types = generateInputTypes('myCreateForm', fieldConfigs);
const response = genericPrinter(types);
expect(response).toMatchSnapshot();
});
Expand All @@ -54,7 +54,7 @@ describe('should generate nested object', () => {
validationRules: [],
},
};
const types = generateOnValidationType('myCreateForm', fieldConfigs);
const types = generateInputTypes('myCreateForm', fieldConfigs);
const response = genericPrinter(types);
expect(response).toMatchSnapshot();
});
Expand Down
16 changes: 8 additions & 8 deletions ...odegen-ui-react/lib/__tests__/react-forms/__snapshots__/form-renderer-helper.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,20 @@

exports[`form-render utils should generate before & complete types if datastore config is set 1`] = `
"{
onSubmit?: (fields: Record<string, unknown>) => Record<string, unknown>;
onSuccess?: (fields: Record<string, unknown>) => void;
onError?: (fields: Record<string, unknown>, errorMessage: string) => void;
onSubmit?: (fields: mySampleFormInputValues) => mySampleFormInputValues;
onSuccess?: (fields: mySampleFormInputValues) => void;
onError?: (fields: mySampleFormInputValues, errorMessage: string) => void;
onCancel?: () => void;
onChange?: (fields: Record<string, unknown>) => Record<string, unknown>;
onValidate?: mySampleFormInputValues;
onChange?: (fields: mySampleFormInputValues) => mySampleFormInputValues;
onValidate?: mySampleFormInputValues<false>;
}"
`;

exports[`form-render utils should generate regular onsubmit if dataSourceType is custom 1`] = `
"{
onSubmit: (fields: Record<string, unknown>) => void;
onSubmit: (fields: myCustomFormInputValues) => void;
onCancel?: () => void;
onChange?: (fields: Record<string, unknown>) => Record<string, unknown>;
onValidate?: myCustomFormInputValues;
onChange?: (fields: myCustomFormInputValues) => myCustomFormInputValues;
onValidate?: myCustomFormInputValues<false>;
}"
`;
38 changes: 9 additions & 29 deletions packages/codegen-ui-react/lib/forms/form-renderer-helper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ import {
import { lowerCaseFirst } from '../helpers';
import { ImportCollection, ImportSource } from '../imports';
import { buildTargetVariable } from './event-targets';
import { buildOnValidateType } from './type-helper';
import { buildOnValidateType, getInputValuesTypeName } from './type-helper';
import { buildAccessChain, capitalizeFirstLetter, setFieldState } from './form-state';

export const buildMutationBindings = (form: StudioForm) => {
Expand Down Expand Up @@ -79,6 +79,7 @@ export const buildMutationBindings = (form: StudioForm) => {
*/
export const buildFormPropNode = (form: StudioForm) => {
const {
name: formName,
dataType: { dataSourceType },
formActionType,
} = form;
Expand Down Expand Up @@ -114,17 +115,11 @@ export const buildFormPropNode = (form: StudioForm) => {
undefined,
'fields',
undefined,
factory.createTypeReferenceNode(factory.createIdentifier('Record'), [
factory.createKeywordTypeNode(SyntaxKind.StringKeyword),
factory.createKeywordTypeNode(SyntaxKind.UnknownKeyword),
]),
factory.createTypeReferenceNode(factory.createIdentifier(getInputValuesTypeName(formName)), undefined),
undefined,
),
],
factory.createTypeReferenceNode(factory.createIdentifier('Record'), [
factory.createKeywordTypeNode(SyntaxKind.StringKeyword),
factory.createKeywordTypeNode(SyntaxKind.UnknownKeyword),
]),
factory.createTypeReferenceNode(factory.createIdentifier(getInputValuesTypeName(formName)), undefined),
),
),
factory.createPropertySignature(
Expand All @@ -140,10 +135,7 @@ export const buildFormPropNode = (form: StudioForm) => {
undefined,
factory.createIdentifier('fields'),
undefined,
factory.createTypeReferenceNode(factory.createIdentifier('Record'), [
factory.createKeywordTypeNode(SyntaxKind.StringKeyword),
factory.createKeywordTypeNode(SyntaxKind.UnknownKeyword),
]),
factory.createTypeReferenceNode(factory.createIdentifier(getInputValuesTypeName(formName)), undefined),
undefined,
),
],
Expand All @@ -163,10 +155,7 @@ export const buildFormPropNode = (form: StudioForm) => {
undefined,
factory.createIdentifier('fields'),
undefined,
factory.createTypeReferenceNode(factory.createIdentifier('Record'), [
factory.createKeywordTypeNode(SyntaxKind.StringKeyword),
factory.createKeywordTypeNode(SyntaxKind.UnknownKeyword),
]),
factory.createTypeReferenceNode(factory.createIdentifier(getInputValuesTypeName(formName)), undefined),
undefined,
),
factory.createParameterDeclaration(
Expand Down Expand Up @@ -199,10 +188,7 @@ export const buildFormPropNode = (form: StudioForm) => {
undefined,
'fields',
undefined,
factory.createTypeReferenceNode(factory.createIdentifier('Record'), [
factory.createKeywordTypeNode(SyntaxKind.StringKeyword),
factory.createKeywordTypeNode(SyntaxKind.UnknownKeyword),
]),
factory.createTypeReferenceNode(factory.createIdentifier(getInputValuesTypeName(formName)), undefined),
undefined,
),
],
Expand Down Expand Up @@ -233,17 +219,11 @@ export const buildFormPropNode = (form: StudioForm) => {
undefined,
factory.createIdentifier('fields'),
undefined,
factory.createTypeReferenceNode(factory.createIdentifier('Record'), [
factory.createKeywordTypeNode(SyntaxKind.StringKeyword),
factory.createKeywordTypeNode(SyntaxKind.UnknownKeyword),
]),
factory.createTypeReferenceNode(factory.createIdentifier(getInputValuesTypeName(formName)), undefined),
undefined,
),
],
factory.createTypeReferenceNode(factory.createIdentifier('Record'), [
factory.createKeywordTypeNode(SyntaxKind.StringKeyword),
factory.createKeywordTypeNode(SyntaxKind.UnknownKeyword),
]),
factory.createTypeReferenceNode(factory.createIdentifier(getInputValuesTypeName(formName)), undefined),
),
),
buildOnValidateType(form.name),
Expand Down
Loading