Skip to content

Commit

Permalink
chore: only generate breakpoint mapping on breakpoint variants
Browse files Browse the repository at this point in the history
  • Loading branch information
felipechiave committed Aug 4, 2022
1 parent 2882730 commit aee4584
Show file tree
Hide file tree
Showing 10 changed files with 131 additions and 120 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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> & {
Expand All @@ -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: {
Expand Down Expand Up @@ -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 (
Expand Down Expand Up @@ -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> & {
Expand All @@ -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\\",
Expand Down Expand Up @@ -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 (
Expand Down Expand Up @@ -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> & {
Expand All @@ -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\\" },
Expand All @@ -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 (
Expand Down Expand Up @@ -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> & {
Expand All @@ -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\\" },
Expand Down Expand Up @@ -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 (
Expand All @@ -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> & {
Expand All @@ -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\\" },
Expand All @@ -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 (
Expand All @@ -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> & {
Expand All @@ -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\\" },
Expand All @@ -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 (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
Expand Down
46 changes: 31 additions & 15 deletions packages/codegen-ui-react/lib/react-studio-template-renderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
isEventPropertyBinding,
isStudioComponentWithCollectionProperties,
isStudioComponentWithVariants,
isStudioComponentWithBreakpoints,
StudioComponent,
StudioComponentChild,
StudioComponentPredicate,
Expand Down Expand Up @@ -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,
Expand All @@ -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,
),
);
Expand All @@ -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();
Expand Down Expand Up @@ -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);

Expand All @@ -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'),
Expand Down
33 changes: 33 additions & 0 deletions packages/codegen-ui/example-schemas/componentWithBreakpoint.json
Original file line number Diff line number Diff line change
@@ -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"
}
Loading

0 comments on commit aee4584

Please sign in to comment.