Skip to content

Commit

Permalink
feat: output type declaration
Browse files Browse the repository at this point in the history
  • Loading branch information
@dpilch
dpilch committed Oct 12, 2021
1 parent 4ac3d79 commit a8db227
Show file tree
Hide file tree
Showing 8 changed files with 232 additions and 91 deletions.
68 changes: 46 additions & 22 deletions .../studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
export type TestProps = {
overrides?: EscapeHatchProps | undefined | null,
};
export default function Test(props: TestProps): JSX.Element {
export default function Test(props: TestProps): React.Element {
const overrides = { ...props.overrides };
return (
<View
Expand All @@ -38,7 +38,7 @@ import {
export type CustomButtonProps = {
overrides?: EscapeHatchProps | undefined | null,
};
export default function CustomButton(props: CustomButtonProps): JSX.Element {
export default function CustomButton(props: CustomButtonProps): React.Element {
const overrides = { ...props.overrides };
return (
<Button
Expand All @@ -64,7 +64,7 @@ import {
export type CustomTextProps = {
overrides?: EscapeHatchProps | undefined | null,
};
export default function CustomText(props: CustomTextProps): JSX.Element {
export default function CustomText(props: CustomTextProps): React.Element {
const overrides = { ...props.overrides };
return (
<Text
Expand Down Expand Up @@ -102,7 +102,7 @@ export type CollectionOfCustomButtonsProps = {
};
export default function CollectionOfCustomButtons(
props: CollectionOfCustomButtonsProps
): JSX.Element {
): React.Element {
const { width, backgroundColor, buttonColor, items } = props;
const overrides = { ...props.overrides };
const buttonUserFilter = {
Expand Down Expand Up @@ -157,7 +157,8 @@ export default function CollectionOfCustomButtons(
`;

exports[`amplify render tests collection should render collection with data binding and sort 1`] = `
"/* eslint-disable */
Object {
"componentText": "/* eslint-disable */
import React from \\"react\\";
import { User, UserPreferences } from \\"../models\\";
import {
Expand All @@ -179,7 +180,7 @@ export type CollectionOfCustomButtonsProps = {
};
export default function CollectionOfCustomButtons(
props: CollectionOfCustomButtonsProps
): JSX.Element {
): React.Element {
const { width, backgroundColor, buttonColor, items } = props;
const overrides = { ...props.overrides };
const buttonUserFilter = {
Expand Down Expand Up @@ -235,7 +236,10 @@ export default function CollectionOfCustomButtons(
</Collection>
);
}
"
",
"declaration": undefined,
"renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests collection should render collection with data binding with no predicate 1`] = `
Expand All @@ -257,7 +261,7 @@ export type ListingCardCollectionProps = {
};
export default function ListingCardCollection(
props: ListingCardCollectionProps
): JSX.Element {
): React.Element {
const { items } = props;
const overrides = { ...props.overrides };
const bananas =
Expand Down Expand Up @@ -311,7 +315,7 @@ export type ListingCardCollectionProps = {
};
export default function ListingCardCollection(
props: ListingCardCollectionProps
): JSX.Element {
): React.Element {
const { items } = props;
const overrides = { ...props.overrides };
return (
Expand Down Expand Up @@ -346,7 +350,9 @@ import {
export type BoxWithButtonProps = {
overrides?: EscapeHatchProps | undefined | null,
};
export default function BoxWithButton(props: BoxWithButtonProps): JSX.Element {
export default function BoxWithButton(
props: BoxWithButtonProps
): React.Element {
const overrides = { ...props.overrides };
return (
<View {...props} {...getOverrideProps(overrides, \\"Box\\")}>
Expand Down Expand Up @@ -377,7 +383,7 @@ export type BoxWithCustomButtonProps = {
};
export default function BoxWithCustomButton(
props: BoxWithCustomButtonProps
): JSX.Element {
): React.Element {
const overrides = { ...props.overrides };
return (
<View {...props} {...getOverrideProps(overrides, \\"Box\\")}>
Expand Down Expand Up @@ -405,7 +411,9 @@ import {
export type BoxWithButtonProps = {
overrides?: EscapeHatchProps | undefined | null,
};
export default function BoxWithButton(props: BoxWithButtonProps): JSX.Element {
export default function BoxWithButton(
props: BoxWithButtonProps
): React.Element {
const overrides = { ...props.overrides };
return (
<View {...props} {...getOverrideProps(overrides, \\"Box\\")}>
Expand Down Expand Up @@ -436,7 +444,7 @@ export type TextWithDataBindingProps = {
};
export default function TextWithDataBinding(
props: TextWithDataBindingProps
): JSX.Element {
): React.Element {
const { textValue } = props;
const overrides = { ...props.overrides };
return (
Expand Down Expand Up @@ -473,7 +481,7 @@ export type ComponentWithDataBindingProps = {
};
export default function ComponentWithDataBinding(
props: ComponentWithDataBindingProps
): JSX.Element {
): React.Element {
const { width, isDisabled, buttonUser, buttonColor } = props;
const overrides = { ...props.overrides };
return (
Expand Down Expand Up @@ -507,7 +515,7 @@ export type SectionHeadingProps = {
};
export default function SectionHeading(
props: SectionHeadingProps
): JSX.Element {
): React.Element {
const { newProp6fd1 } = props;
const overrides = { ...props.overrides };
return (
Expand Down Expand Up @@ -552,7 +560,8 @@ export default function SectionHeading(
`;

exports[`amplify render tests component with variants should render variants with options provided 1`] = `
"/* eslint-disable */
Object {
"componentText": "/* eslint-disable */
import React from \\"react\\";
import {
Button,
Expand All @@ -567,7 +576,7 @@ export type CustomButtonProps = {
} & {
overrides?: EscapeHatchProps | undefined | null,
};
export default function CustomButton(props: CustomButtonProps): JSX.Element {
export default function CustomButton(props: CustomButtonProps): React.Element {
const {} = props;
const variants = [
{
Expand Down Expand Up @@ -610,7 +619,10 @@ export default function CustomButton(props: CustomButtonProps): JSX.Element {
<Button {...props} {...getOverrideProps(overrides, \\"Button\\")}></Button>
);
}
"
",
"declaration": undefined,
"renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests concat and conditional transform should render component with concatenation prop 1`] = `
Expand All @@ -630,7 +642,7 @@ export type CustomButtonProps = {
} & {
overrides?: EscapeHatchProps | undefined | null,
};
export default function CustomButton(props: CustomButtonProps): JSX.Element {
export default function CustomButton(props: CustomButtonProps): React.Element {
const { width, buttonUser, buttonColor } = props;
const overrides = { ...props.overrides };
return (
Expand Down Expand Up @@ -664,7 +676,7 @@ export type CustomButtonProps = {
} & {
overrides?: EscapeHatchProps | undefined | null,
};
export default function CustomButton(props: CustomButtonProps): JSX.Element {
export default function CustomButton(props: CustomButtonProps): React.Element {
const { width, buttonUser, buttonColor } = props;
const overrides = { ...props.overrides };
return (
Expand Down Expand Up @@ -776,6 +788,16 @@ exports.default = BoxWithButton;
"
`;
exports[`amplify render tests declarations should render declarations 1`] = `
"import React from \\"react\\";
import { EscapeHatchProps } from \\"@aws-amplify/ui-react\\";
export declare type ProfileProps = {
overrides?: EscapeHatchProps | undefined | null;
};
export default function Profile(props: ProfileProps): React.Element;
"
`;
exports[`amplify render tests sample code snippet tests should generate a sample code snippet for components 1`] = `
"/* eslint-disable */
import React from \\"react\\";
Expand All @@ -790,7 +812,9 @@ import {
export type BoxWithButtonProps = {
overrides?: EscapeHatchProps | undefined | null,
};
export default function BoxWithButton(props: BoxWithButtonProps): JSX.Element {
export default function BoxWithButton(
props: BoxWithButtonProps
): React.Element {
const overrides = { ...props.overrides };
return (
<View padding-left {...props} {...getOverrideProps(overrides, \\"Box\\")}>
Expand Down Expand Up @@ -1007,7 +1031,7 @@ import {
export type ProfileProps = {
overrides?: EscapeHatchProps | undefined | null,
};
export default function Profile(props: ProfileProps): JSX.Element {
export default function Profile(props: ProfileProps): React.Element {
const {} = props;
const overrides = { ...props.overrides };
const {
Expand Down
55 changes: 33 additions & 22 deletions packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@ function generateWithAmplifyRenderer(
jsonSchemaFile: string,
renderConfig: ReactRenderConfig = {},
isSampleCodeSnippet = false,
): string {
): { componentText: string; declaration?: string } {
const schema = loadSchemaFromJSONFile(jsonSchemaFile);
const rendererFactory = new StudioTemplateRendererFactory(
(component: StudioComponent) => new AmplifyRenderer(component, renderConfig),
);
if (isSampleCodeSnippet) {
return rendererFactory.buildRenderer(schema).renderSampleCodeSnippet().compText;
return { componentText: rendererFactory.buildRenderer(schema).renderSampleCodeSnippet().compText };
}
return rendererFactory.buildRenderer(schema).renderComponent().componentText;
return rendererFactory.buildRenderer(schema).renderComponent();
}

function generateWithThemeRenderer(jsonFile: string, renderConfig: ReactRenderConfig = {}): string {
Expand All @@ -45,17 +45,17 @@ describe('amplify render tests', () => {
describe('basic component tests', () => {
it('should generate a simple box component', () => {
const generatedCode = generateWithAmplifyRenderer('boxTest');
expect(generatedCode).toMatchSnapshot();
expect(generatedCode.componentText).toMatchSnapshot();
});

it('should generate a simple button component', () => {
const generatedCode = generateWithAmplifyRenderer('buttonGolden');
expect(generatedCode).toMatchSnapshot();
expect(generatedCode.componentText).toMatchSnapshot();
});

it('should generate a simple text component', () => {
const generatedCode = generateWithAmplifyRenderer('textGolden');
expect(generatedCode).toMatchSnapshot();
expect(generatedCode.componentText).toMatchSnapshot();
});

it('should generate a simple badge component', () => {});
Expand All @@ -74,53 +74,53 @@ describe('amplify render tests', () => {
describe('complex component tests', () => {
it('should generate a button within a box component', () => {
const generatedCode = generateWithAmplifyRenderer('boxGolden');
expect(generatedCode).toMatchSnapshot();
expect(generatedCode.componentText).toMatchSnapshot();
});

it('should generate a component with custom child', () => {
const generatedCode = generateWithAmplifyRenderer('customChild');
expect(generatedCode).toMatchSnapshot();
expect(generatedCode.componentText).toMatchSnapshot();
});

it('should generate a component with exposeAs prop', () => {
const generatedCode = generateWithAmplifyRenderer('exposedAsTest');
expect(generatedCode).toMatchSnapshot();
expect(generatedCode.componentText).toMatchSnapshot();
});
});

describe('sample code snippet tests', () => {
it('should generate a sample code snippet for components', () => {
const generatedCode = generateWithAmplifyRenderer('sampleCodeSnippet');
expect(generatedCode).toMatchSnapshot();
expect(generatedCode.componentText).toMatchSnapshot();
});
});

describe('component with data binding', () => {
it('should add model imports', () => {
const generatedCode = generateWithAmplifyRenderer('componentWithDataBinding');
expect(generatedCode).toMatchSnapshot();
expect(generatedCode.componentText).toMatchSnapshot();
});

it('should not have useDataStoreBinding when there is no predicate', () => {
const generatedCode = generateWithAmplifyRenderer('dataBindingWithoutPredicate');
expect(generatedCode).toMatchSnapshot();
expect(generatedCode.componentText).toMatchSnapshot();
});
});

describe('collection', () => {
it('should render collection with data binding', () => {
const generatedCode = generateWithAmplifyRenderer('collectionWithBinding');
expect(generatedCode).toMatchSnapshot();
expect(generatedCode.componentText).toMatchSnapshot();
});

it('should render collection without data binding', () => {
const generatedCode = generateWithAmplifyRenderer('collectionWithoutBinding');
expect(generatedCode).toMatchSnapshot();
expect(generatedCode.componentText).toMatchSnapshot();
});

it('should render collection with data binding with no predicate', () => {
const generatedCode = generateWithAmplifyRenderer('collectionWithBindingWithoutPredicate');
expect(generatedCode).toMatchSnapshot();
expect(generatedCode.componentText).toMatchSnapshot();
});

it('should render collection with data binding and sort', () => {
Expand All @@ -132,19 +132,19 @@ describe('amplify render tests', () => {
describe('concat and conditional transform', () => {
it('should render component with concatenation prop', () => {
const generatedCode = generateWithAmplifyRenderer('concatTest');
expect(generatedCode).toMatchSnapshot();
expect(generatedCode.componentText).toMatchSnapshot();
});

it('should render component with conditional prop', () => {
const generatedCode = generateWithAmplifyRenderer('conditionalTest');
expect(generatedCode).toMatchSnapshot();
expect(generatedCode.componentText).toMatchSnapshot();
});
});

describe('component with binding', () => {
it('should render build property on Text', () => {
const generatedCode = generateWithAmplifyRenderer('textWithDataBinding');
expect(generatedCode).toMatchSnapshot();
expect(generatedCode.componentText).toMatchSnapshot();
});
});

Expand All @@ -158,24 +158,35 @@ describe('amplify render tests', () => {
describe('custom render config', () => {
it('should render ES5', () => {
expect(
generateWithAmplifyRenderer('boxGolden', { target: ScriptTarget.ES5, script: ScriptKind.JS }),
generateWithAmplifyRenderer('boxGolden', { target: ScriptTarget.ES5, script: ScriptKind.JS }).componentText,
).toMatchSnapshot();
});

it('should render JSX', () => {
expect(generateWithAmplifyRenderer('boxGolden', { script: ScriptKind.JSX })).toMatchSnapshot();
expect(generateWithAmplifyRenderer('boxGolden', { script: ScriptKind.JSX }).componentText).toMatchSnapshot();
});

it('should render common JS', () => {
expect(
generateWithAmplifyRenderer('boxGolden', { module: ModuleKind.CommonJS, script: ScriptKind.JS }),
generateWithAmplifyRenderer('boxGolden', { module: ModuleKind.CommonJS, script: ScriptKind.JS }).componentText,
).toMatchSnapshot();
});
});

describe('user specific attributes', () => {
it('should render user specific attributes', () => {
expect(generateWithAmplifyRenderer('componentWithUserSpecificAttributes')).toMatchSnapshot();
expect(generateWithAmplifyRenderer('componentWithUserSpecificAttributes').componentText).toMatchSnapshot();
});
});

describe('declarations', () => {
it('should render declarations', () => {
expect(
generateWithAmplifyRenderer('componentWithUserSpecificAttributes', {
script: ScriptKind.JS,
renderTypeDeclarations: true,
}).declaration,
).toMatchSnapshot();
});
});

Expand Down
Loading

0 comments on commit a8db227

Please sign in to comment.