chore: only generate breakpoint mapping on breakpoint variants

aws-amplify · Aug 4, 2022 · aee4584 · aee4584
1 parent 2882730
commit aee4584
Show file tree

Hide file tree

Showing 10 changed files with 131 additions and 120 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
@@ -1431,12 +1431,7 @@ import {
   getOverridesFromVariants,
   mergeVariantsAndOverrides,
 } from \\"@aws-amplify/ui-react/internal\\";
-import {
-  Flex,
-  FlexProps,
-  View,
-  useBreakpointValue,
-} from \\"@aws-amplify/ui-react\\";
+import { Flex, FlexProps, View } from \\"@aws-amplify/ui-react\\";
 
 export type ComplexTest4Props = React.PropsWithChildren<
   Partial<FlexProps> & {
@@ -1448,7 +1443,7 @@ export type ComplexTest4Props = React.PropsWithChildren<
 export default function ComplexTest4(
   props: ComplexTest4Props
 ): React.ReactElement {
-  const { overrides: overridesProp, ...restProp } = props;
+  const { overrides: overridesProp, ...rest } = props;
   const variants: Variant[] = [
     {
       overrides: {
@@ -1491,20 +1486,8 @@ export default function ComplexTest4(
       variantValues: { colors: \\"Red/Orange\\" },
     },
   ];
-  const breakpointHook = useBreakpointValue({
-    base: \\"base\\",
-    large: \\"large\\",
-    medium: \\"medium\\",
-    small: \\"small\\",
-    xl: \\"xl\\",
-    xxl: \\"xxl\\",
-  });
-  const rest = { style: { transition: \\"all 0.25s\\" }, ...restProp };
   const overrides = mergeVariantsAndOverrides(
-    getOverridesFromVariants(variants, {
-      breakpoint: breakpointHook,
-      ...props,
-    }),
+    getOverridesFromVariants(variants, props),
     overridesProp || {}
   );
   return (
@@ -1839,13 +1822,7 @@ import {
   getOverridesFromVariants,
   mergeVariantsAndOverrides,
 } from \\"@aws-amplify/ui-react/internal\\";
-import {
-  Button,
-  Flex,
-  FlexProps,
-  Text,
-  useBreakpointValue,
-} from \\"@aws-amplify/ui-react\\";
+import { Button, Flex, FlexProps, Text } from \\"@aws-amplify/ui-react\\";
 
 export type ComplexTest9Props = React.PropsWithChildren<
   Partial<FlexProps> & {
@@ -1857,7 +1834,7 @@ export type ComplexTest9Props = React.PropsWithChildren<
 export default function ComplexTest9(
   props: ComplexTest9Props
 ): React.ReactElement {
-  const { overrides: overridesProp, ...restProp } = props;
+  const { overrides: overridesProp, ...rest } = props;
   const variants: Variant[] = [
     {
       nodeId: \\"2878:3221\\",
@@ -2091,20 +2068,8 @@ export default function ComplexTest9(
       },
     },
   ];
-  const breakpointHook = useBreakpointValue({
-    base: \\"base\\",
-    large: \\"large\\",
-    medium: \\"medium\\",
-    small: \\"small\\",
-    xl: \\"xl\\",
-    xxl: \\"xxl\\",
-  });
-  const rest = { style: { transition: \\"all 0.25s\\" }, ...restProp };
   const overrides = mergeVariantsAndOverrides(
-    getOverridesFromVariants(variants, {
-      breakpoint: breakpointHook,
-      ...props,
-    }),
+    getOverridesFromVariants(variants, props),
     overridesProp || {}
   );
   return (
@@ -4249,7 +4214,7 @@ import {
   getOverridesFromVariants,
   mergeVariantsAndOverrides,
 } from \\"@aws-amplify/ui-react/internal\\";
-import { View, ViewProps, useBreakpointValue } from \\"@aws-amplify/ui-react\\";
+import { View, ViewProps } from \\"@aws-amplify/ui-react\\";
 
 export type ViewPrimitiveProps = React.PropsWithChildren<
   Partial<ViewProps> & {
@@ -4261,7 +4226,7 @@ export type ViewPrimitiveProps = React.PropsWithChildren<
 export default function ViewPrimitive(
   props: ViewPrimitiveProps
 ): React.ReactElement {
-  const { overrides: overridesProp, ...restProp } = props;
+  const { overrides: overridesProp, ...rest } = props;
   const variants: Variant[] = [
     {
       variantValues: { variant: \\"primary\\" },
@@ -4270,20 +4235,8 @@ export default function ViewPrimitive(
       },
     },
   ];
-  const breakpointHook = useBreakpointValue({
-    base: \\"base\\",
-    large: \\"large\\",
-    medium: \\"medium\\",
-    small: \\"small\\",
-    xl: \\"xl\\",
-    xxl: \\"xxl\\",
-  });
-  const rest = { style: { transition: \\"all 0.25s\\" }, ...restProp };
   const overrides = mergeVariantsAndOverrides(
-    getOverridesFromVariants(variants, {
-      breakpoint: breakpointHook,
-      ...props,
-    }),
+    getOverridesFromVariants(variants, props),
     overridesProp || {}
   );
   return (
@@ -4312,7 +4265,7 @@ import {
   getOverridesFromVariants,
   mergeVariantsAndOverrides,
 } from \\"@aws-amplify/ui-react/internal\\";
-import { Icon, IconProps, useBreakpointValue } from \\"@aws-amplify/ui-react\\";
+import { Icon, IconProps } from \\"@aws-amplify/ui-react\\";
 
 export type IconVariantsProps = React.PropsWithChildren<
   Partial<IconProps> & {
@@ -4324,7 +4277,7 @@ export type IconVariantsProps = React.PropsWithChildren<
 export default function IconVariants(
   props: IconVariantsProps
 ): React.ReactElement {
-  const { overrides: overridesProp, ...restProp } = props;
+  const { overrides: overridesProp, ...rest } = props;
   const variants: Variant[] = [
     {
       variantValues: { variant: \\"primary\\" },
@@ -4357,20 +4310,8 @@ export default function IconVariants(
       },
     },
   ];
-  const breakpointHook = useBreakpointValue({
-    base: \\"base\\",
-    large: \\"large\\",
-    medium: \\"medium\\",
-    small: \\"small\\",
-    xl: \\"xl\\",
-    xxl: \\"xxl\\",
-  });
-  const rest = { style: { transition: \\"all 0.25s\\" }, ...restProp };
   const overrides = mergeVariantsAndOverrides(
-    getOverridesFromVariants(variants, {
-      breakpoint: breakpointHook,
-      ...props,
-    }),
+    getOverridesFromVariants(variants, props),
     overridesProp || {}
   );
   return (
@@ -4395,7 +4336,7 @@ import {
   getOverridesFromVariants,
   mergeVariantsAndOverrides,
 } from \\"@aws-amplify/ui-react/internal\\";
-import { Button, ButtonProps, useBreakpointValue } from \\"@aws-amplify/ui-react\\";
+import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";
 
 export type CustomButtonProps = React.PropsWithChildren<
   Partial<ButtonProps> & {
@@ -4408,7 +4349,7 @@ export type CustomButtonProps = React.PropsWithChildren<
 export default function CustomButton(
   props: CustomButtonProps
 ): React.ReactElement {
-  const { overrides: overridesProp, ...restProp } = props;
+  const { overrides: overridesProp, ...rest } = props;
   const variants: Variant[] = [
     {
       variantValues: { variant: \\"primary\\" },
@@ -4423,20 +4364,8 @@ export default function CustomButton(
       overrides: { CustomButton: { width: \\"500\\" } },
     },
   ];
-  const breakpointHook = useBreakpointValue({
-    base: \\"base\\",
-    large: \\"large\\",
-    medium: \\"medium\\",
-    small: \\"small\\",
-    xl: \\"xl\\",
-    xxl: \\"xxl\\",
-  });
-  const rest = { style: { transition: \\"all 0.25s\\" }, ...restProp };
   const overrides = mergeVariantsAndOverrides(
-    getOverridesFromVariants(variants, {
-      breakpoint: breakpointHook,
-      ...props,
-    }),
+    getOverridesFromVariants(variants, props),
     overridesProp || {}
   );
   return (
@@ -4461,7 +4390,7 @@ import {
   getOverridesFromVariants,
   mergeVariantsAndOverrides,
 } from \\"@aws-amplify/ui-react/internal\\";
-import { Button, ButtonProps, useBreakpointValue } from \\"@aws-amplify/ui-react\\";
+import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";
 
 export type CustomButtonProps = React.PropsWithChildren<
   Partial<ButtonProps> & {
@@ -4474,7 +4403,7 @@ export type CustomButtonProps = React.PropsWithChildren<
 export default function CustomButton(
   props: CustomButtonProps
 ): React.ReactElement {
-  const { overrides: overridesProp, ...restProp } = props;
+  const { overrides: overridesProp, ...rest } = props;
   const variants: Variant[] = [
     {
       variantValues: { variant: \\"primary\\" },
@@ -4500,20 +4429,8 @@ export default function CustomButton(
       },
     },
   ];
-  const breakpointHook = useBreakpointValue({
-    base: \\"base\\",
-    large: \\"large\\",
-    medium: \\"medium\\",
-    small: \\"small\\",
-    xl: \\"xl\\",
-    xxl: \\"xxl\\",
-  });
-  const rest = { style: { transition: \\"all 0.25s\\" }, ...restProp };
   const overrides = mergeVariantsAndOverrides(
-    getOverridesFromVariants(variants, {
-      breakpoint: breakpointHook,
-      ...props,
-    }),
+    getOverridesFromVariants(variants, props),
     overridesProp || {}
   );
   return (

diff --git a/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react.test.ts b/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react.test.ts
@@ -239,8 +239,8 @@ describe('amplify render tests', () => {
       expect(generatedCode).toMatchSnapshot();
     });
 
-    it('should have variant specific generation', () => {
-      const generatedCode = generateWithAmplifyRenderer('componentWithVariants');
+    it('should have breakpoint specific generation', () => {
+      const generatedCode = generateWithAmplifyRenderer('componentWithBreakpoint');
       expect(generatedCode.componentText.includes('restProp')).toBe(true);
       expect(generatedCode.componentText.includes('breakpointHook')).toBe(true);
     });

diff --git a/packages/codegen-ui-react/lib/react-studio-template-renderer.ts b/packages/codegen-ui-react/lib/react-studio-template-renderer.ts
@@ -21,6 +21,7 @@ import {
   isEventPropertyBinding,
   isStudioComponentWithCollectionProperties,
   isStudioComponentWithVariants,
+  isStudioComponentWithBreakpoints,
   StudioComponent,
   StudioComponentChild,
   StudioComponentPredicate,
@@ -581,6 +582,7 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
 
     // remove overrides from rest of props
     const hasVariant = isStudioComponentWithVariants(component);
+    const hasBreakpoint = isStudioComponentWithBreakpoints(component);
     elements.push(
       factory.createBindingElement(
         undefined,
@@ -595,7 +597,7 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
       factory.createBindingElement(
         factory.createToken(ts.SyntaxKind.DotDotDotToken),
         undefined,
-        factory.createIdentifier(hasVariant ? 'restProp' : 'rest'),
+        factory.createIdentifier(hasBreakpoint ? 'restProp' : 'rest'),
         undefined,
       ),
     );
@@ -619,9 +621,12 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
     if (isStudioComponentWithVariants(component)) {
       this.importCollection.addMappedImport(ImportValue.MERGE_VARIANTS_OVERRIDES);
       statements.push(this.buildVariantDeclaration(component.variants));
-      statements.push(this.buildDefaultBreakpointMap());
-      statements.push(this.buildRestWithStyle());
-      statements.push(this.buildOverridesFromVariantsAndProp());
+      if (hasBreakpoint) {
+        statements.push(this.buildDefaultBreakpointMap());
+        statements.push(this.buildRestWithStyle());
+      } else {
+        statements.push(this.buildOverridesFromVariantsAndProp(hasBreakpoint));
+      }
     }
 
     const authStatement = this.buildUseAuthenticatedUserStatement();
@@ -790,15 +795,24 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
   }
 
   /**
+   * If component hasBreakpoint:
+   *
    * const overrides = mergeVariantsAndOverrides(
    *  getOverridesFromVariants(variants, {
    *   breakpoint: breakpointHook,
    *   ...props,
    *  }),
    *  overridesProp || {}
    * );
+   *
+   * Else:
+   *
+   * const overrides = mergeVariantsAndOverrides(
+   *  getOverridesFromVariants(variants, props),
+   *  overridesProp || {}
+   * );
    */
-  private buildOverridesFromVariantsAndProp() {
+  private buildOverridesFromVariantsAndProp(hasBreakpoint: boolean) {
     this.importCollection.addMappedImport(ImportValue.GET_OVERRIDES_FROM_VARIANTS);
     this.importCollection.addMappedImport(ImportValue.VARIANT);
 
@@ -813,16 +827,18 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
             factory.createCallExpression(factory.createIdentifier('mergeVariantsAndOverrides'), undefined, [
               factory.createCallExpression(factory.createIdentifier('getOverridesFromVariants'), undefined, [
                 factory.createIdentifier('variants'),
-                factory.createObjectLiteralExpression(
-                  [
-                    factory.createPropertyAssignment(
-                      factory.createIdentifier('breakpoint'),
-                      factory.createIdentifier('breakpointHook'),
-                    ),
-                    factory.createSpreadAssignment(factory.createIdentifier('props')),
-                  ],
-                  false,
-                ),
+                hasBreakpoint
+                  ? factory.createObjectLiteralExpression(
+                      [
+                        factory.createPropertyAssignment(
+                          factory.createIdentifier('breakpoint'),
+                          factory.createIdentifier('breakpointHook'),
+                        ),
+                        factory.createSpreadAssignment(factory.createIdentifier('props')),
+                      ],
+                      false,
+                    )
+                  : factory.createIdentifier('props'),
               ]),
               factory.createBinaryExpression(
                 factory.createIdentifier('overridesProp'),

diff --git a/packages/codegen-ui/example-schemas/componentWithBreakpoint.json b/packages/codegen-ui/example-schemas/componentWithBreakpoint.json
@@ -0,0 +1,33 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "Button",
+  "name": "ComponentWithBreakpoint",
+  "properties": {
+    "children": {
+      "value": "ComponentWithBreakpoint"
+    }
+  },
+  "variants": [
+    {
+      "variantValues": {
+        "breakpoint": "small"
+      },
+      "overrides": {
+        "ComponentWithVariant": {
+          "fontSize": "12px"
+        }
+      }
+    },
+    {
+      "variantValues": {
+        "breakpoint": "medium"
+      },
+      "overrides": {
+        "ComponentWithVariant": {
+          "fontSize": "40px"
+        }
+      }
+    }
+  ],
+  "schemaVersion": "1.0"
+}