From 5b2b838769fe42db46a2b8b27b73258a8c54e2ec Mon Sep 17 00:00:00 2001 From: Saravana Dhandapani <78109667+dhandsar-aws@users.noreply.github.com> Date: Mon, 20 Dec 2021 09:46:54 -0800 Subject: [PATCH] feat: import buildMergeOverrides from amplify-ui (#316) Importing buildMergeOverrides from amplify-ui package --- .../studio-ui-codegen-react.test.ts.snap | 105 +-------- .../lib/imports/import-mapping.ts | 2 + .../lib/react-required-dependency-provider.ts | 2 +- .../lib/react-studio-template-renderer.ts | 207 +----------------- 4 files changed, 9 insertions(+), 307 deletions(-) diff --git a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap index 8547d6544..d1c8c9fc8 100644 --- a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap +++ b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap @@ -866,6 +866,7 @@ import { Variant, getOverrideProps, getOverridesFromVariants, + mergeVariantsAndOverrides, } from \\"@aws-amplify/ui-react/internal\\"; import { Flex, FlexProps, View } from \\"@aws-amplify/ui-react\\"; @@ -922,26 +923,6 @@ export default function ComplexTest4( variantValues: { colors: \\"Red/Orange\\" }, }, ]; - const mergeVariantsAndOverrides = ( - variants: EscapeHatchProps, - overrides: EscapeHatchProps - ): EscapeHatchProps => { - const overrideKeys = new Set(Object.keys(overrides)); - const sharedKeys = Object.keys(variants).filter((variantKey) => - overrideKeys.has(variantKey) - ); - const merged = Object.fromEntries( - sharedKeys.map((sharedKey) => [ - sharedKey, - { ...variants[sharedKey], ...overrides[sharedKey] }, - ]) - ); - return { - ...variants, - ...overrides, - ...merged, - }; - }; const overrides = mergeVariantsAndOverrides( getOverridesFromVariants(variants, props), overridesProp || {} @@ -1280,6 +1261,7 @@ import { Variant, getOverrideProps, getOverridesFromVariants, + mergeVariantsAndOverrides, } from \\"@aws-amplify/ui-react/internal\\"; import { Button, Flex, FlexProps, Text } from \\"@aws-amplify/ui-react\\"; @@ -1525,26 +1507,6 @@ export default function ComplexTest9( }, }, ]; - const mergeVariantsAndOverrides = ( - variants: EscapeHatchProps, - overrides: EscapeHatchProps - ): EscapeHatchProps => { - const overrideKeys = new Set(Object.keys(overrides)); - const sharedKeys = Object.keys(variants).filter((variantKey) => - overrideKeys.has(variantKey) - ); - const merged = Object.fromEntries( - sharedKeys.map((sharedKey) => [ - sharedKey, - { ...variants[sharedKey], ...overrides[sharedKey] }, - ]) - ); - return { - ...variants, - ...overrides, - ...merged, - }; - }; const overrides = mergeVariantsAndOverrides( getOverridesFromVariants(variants, props), overridesProp || {} @@ -3813,6 +3775,7 @@ import { Variant, getOverrideProps, getOverridesFromVariants, + mergeVariantsAndOverrides, } from \\"@aws-amplify/ui-react/internal\\"; import { View, ViewProps } from \\"@aws-amplify/ui-react\\"; @@ -3833,26 +3796,6 @@ export default function ViewPrimitive( overrides: { View: { label: \\"componentWithVariantsWithLabelProp\\" } }, }, ]; - const mergeVariantsAndOverrides = ( - variants: EscapeHatchProps, - overrides: EscapeHatchProps - ): EscapeHatchProps => { - const overrideKeys = new Set(Object.keys(overrides)); - const sharedKeys = Object.keys(variants).filter((variantKey) => - overrideKeys.has(variantKey) - ); - const merged = Object.fromEntries( - sharedKeys.map((sharedKey) => [ - sharedKey, - { ...variants[sharedKey], ...overrides[sharedKey] }, - ]) - ); - return { - ...variants, - ...overrides, - ...merged, - }; - }; const overrides = mergeVariantsAndOverrides( getOverridesFromVariants(variants, props), overridesProp || {} @@ -3881,6 +3824,7 @@ import { Variant, getOverrideProps, getOverridesFromVariants, + mergeVariantsAndOverrides, } from \\"@aws-amplify/ui-react/internal\\"; import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\"; @@ -3913,26 +3857,6 @@ export default function CustomButton( overrides: { Button: { width: \\"500\\" } }, }, ]; - const mergeVariantsAndOverrides = ( - variants: EscapeHatchProps, - overrides: EscapeHatchProps - ): EscapeHatchProps => { - const overrideKeys = new Set(Object.keys(overrides)); - const sharedKeys = Object.keys(variants).filter((variantKey) => - overrideKeys.has(variantKey) - ); - const merged = Object.fromEntries( - sharedKeys.map((sharedKey) => [ - sharedKey, - { ...variants[sharedKey], ...overrides[sharedKey] }, - ]) - ); - return { - ...variants, - ...overrides, - ...merged, - }; - }; const overrides = mergeVariantsAndOverrides( getOverridesFromVariants(variants, props), overridesProp || {} @@ -3957,6 +3881,7 @@ import { Variant, getOverrideProps, getOverridesFromVariants, + mergeVariantsAndOverrides, } from \\"@aws-amplify/ui-react/internal\\"; import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\"; @@ -4004,26 +3929,6 @@ export default function CustomButton( }, }, ]; - const mergeVariantsAndOverrides = ( - variants: EscapeHatchProps, - overrides: EscapeHatchProps - ): EscapeHatchProps => { - const overrideKeys = new Set(Object.keys(overrides)); - const sharedKeys = Object.keys(variants).filter((variantKey) => - overrideKeys.has(variantKey) - ); - const merged = Object.fromEntries( - sharedKeys.map((sharedKey) => [ - sharedKey, - { ...variants[sharedKey], ...overrides[sharedKey] }, - ]) - ); - return { - ...variants, - ...overrides, - ...merged, - }; - }; const overrides = mergeVariantsAndOverrides( getOverridesFromVariants(variants, props), overridesProp || {} diff --git a/packages/codegen-ui-react/lib/imports/import-mapping.ts b/packages/codegen-ui-react/lib/imports/import-mapping.ts index 274404a6f..474ff4a61 100644 --- a/packages/codegen-ui-react/lib/imports/import-mapping.ts +++ b/packages/codegen-ui-react/lib/imports/import-mapping.ts @@ -31,6 +31,7 @@ export enum ImportValue { CREATE_DATA_STORE_PREDICATE = 'createDataStorePredicate', USE_DATA_STORE_BINDING = 'useDataStoreBinding', CREATE_THEME = 'createTheme', + MERGE_VARIANTS_OVERRIDES = 'mergeVariantsAndOverrides', } export const ImportMapping: Record = { @@ -44,4 +45,5 @@ export const ImportMapping: Record = { [ImportValue.USE_DATA_STORE_BINDING]: ImportSource.UI_REACT_INTERNAL, [ImportValue.SORT_DIRECTION]: ImportSource.AMPLIFY_DATASTORE, [ImportValue.SORT_PREDICATE]: ImportSource.AMPLIFY_DATASTORE, + [ImportValue.MERGE_VARIANTS_OVERRIDES]: ImportSource.UI_REACT_INTERNAL, }; diff --git a/packages/codegen-ui-react/lib/react-required-dependency-provider.ts b/packages/codegen-ui-react/lib/react-required-dependency-provider.ts index 8d4d45627..f9a3b9a0e 100644 --- a/packages/codegen-ui-react/lib/react-required-dependency-provider.ts +++ b/packages/codegen-ui-react/lib/react-required-dependency-provider.ts @@ -24,7 +24,7 @@ export class ReactRequiredDependencyProvider extends RequiredDependencyProvider< return [ { dependencyName: '@aws-amplify/ui-react', - supportedSemVerPattern: '^2.1.4', + supportedSemVerPattern: '^2.1.5', reason: 'Required to leverage amplify ui primitives, and studio component helper functions.', }, ]; diff --git a/packages/codegen-ui-react/lib/react-studio-template-renderer.ts b/packages/codegen-ui-react/lib/react-studio-template-renderer.ts index d0f5d5b41..cd026404f 100644 --- a/packages/codegen-ui-react/lib/react-studio-template-renderer.ts +++ b/packages/codegen-ui-react/lib/react-studio-template-renderer.ts @@ -514,7 +514,7 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer } if (isStudioComponentWithVariants(component)) { - statements.push(this.buildMergeOverridesFunction()); + this.importCollection.addMappedImport(ImportValue.MERGE_VARIANTS_OVERRIDES); } statements.push(this.buildOverridesDeclaration(isStudioComponentWithVariants(component))); @@ -630,211 +630,6 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer ); } - private buildMergeOverridesFunction(): VariableStatement { - return factory.createVariableStatement( - undefined, - factory.createVariableDeclarationList( - [ - factory.createVariableDeclaration( - factory.createIdentifier('mergeVariantsAndOverrides'), - undefined, - undefined, - factory.createArrowFunction( - undefined, - undefined, - [ - factory.createParameterDeclaration( - undefined, - undefined, - undefined, - factory.createIdentifier('variants'), - undefined, - factory.createTypeReferenceNode(factory.createIdentifier('EscapeHatchProps'), undefined), - undefined, - ), - factory.createParameterDeclaration( - undefined, - undefined, - undefined, - factory.createIdentifier('overrides'), - undefined, - factory.createTypeReferenceNode(factory.createIdentifier('EscapeHatchProps'), undefined), - undefined, - ), - ], - factory.createTypeReferenceNode(factory.createIdentifier('EscapeHatchProps'), undefined), - factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken), - factory.createBlock( - [ - factory.createVariableStatement( - undefined, - factory.createVariableDeclarationList( - [ - factory.createVariableDeclaration( - factory.createIdentifier('overrideKeys'), - undefined, - undefined, - factory.createNewExpression(factory.createIdentifier('Set'), undefined, [ - factory.createCallExpression( - factory.createPropertyAccessExpression( - factory.createIdentifier('Object'), - factory.createIdentifier('keys'), - ), - undefined, - [factory.createIdentifier('overrides')], - ), - ]), - ), - ], - ts.NodeFlags.Const, - ), - ), - factory.createVariableStatement( - undefined, - factory.createVariableDeclarationList( - [ - factory.createVariableDeclaration( - factory.createIdentifier('sharedKeys'), - undefined, - undefined, - factory.createCallExpression( - factory.createPropertyAccessExpression( - factory.createCallExpression( - factory.createPropertyAccessExpression( - factory.createIdentifier('Object'), - factory.createIdentifier('keys'), - ), - undefined, - [factory.createIdentifier('variants')], - ), - factory.createIdentifier('filter'), - ), - undefined, - [ - factory.createArrowFunction( - undefined, - undefined, - [ - factory.createParameterDeclaration( - undefined, - undefined, - undefined, - factory.createIdentifier('variantKey'), - undefined, - undefined, - undefined, - ), - ], - undefined, - factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken), - factory.createCallExpression( - factory.createPropertyAccessExpression( - factory.createIdentifier('overrideKeys'), - factory.createIdentifier('has'), - ), - undefined, - [factory.createIdentifier('variantKey')], - ), - ), - ], - ), - ), - ], - ts.NodeFlags.Const, - ), - ), - factory.createVariableStatement( - undefined, - factory.createVariableDeclarationList( - [ - factory.createVariableDeclaration( - factory.createIdentifier('merged'), - undefined, - undefined, - factory.createCallExpression( - factory.createPropertyAccessExpression( - factory.createIdentifier('Object'), - factory.createIdentifier('fromEntries'), - ), - undefined, - [ - factory.createCallExpression( - factory.createPropertyAccessExpression( - factory.createIdentifier('sharedKeys'), - factory.createIdentifier('map'), - ), - undefined, - [ - factory.createArrowFunction( - undefined, - undefined, - [ - factory.createParameterDeclaration( - undefined, - undefined, - undefined, - factory.createIdentifier('sharedKey'), - undefined, - undefined, - undefined, - ), - ], - undefined, - factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken), - factory.createArrayLiteralExpression( - [ - factory.createIdentifier('sharedKey'), - factory.createObjectLiteralExpression( - [ - factory.createSpreadAssignment( - factory.createElementAccessExpression( - factory.createIdentifier('variants'), - factory.createIdentifier('sharedKey'), - ), - ), - factory.createSpreadAssignment( - factory.createElementAccessExpression( - factory.createIdentifier('overrides'), - factory.createIdentifier('sharedKey'), - ), - ), - ], - false, - ), - ], - false, - ), - ), - ], - ), - ], - ), - ), - ], - ts.NodeFlags.Const, - ), - ), - factory.createReturnStatement( - factory.createObjectLiteralExpression( - [ - factory.createSpreadAssignment(factory.createIdentifier('variants')), - factory.createSpreadAssignment(factory.createIdentifier('overrides')), - factory.createSpreadAssignment(factory.createIdentifier('merged')), - ], - true, - ), - ), - ], - true, - ), - ), - ), - ], - ts.NodeFlags.Const, - ), - ); - } - /** * case: hasVariants = true => const overrides = { ...getOverridesFromVariants(variants, props) }; * case: hasVariants = false => const overrides = { ...overridesProp };