Generated studio components are broken by default

[johnpc]

I ran this script:

const rendererFactory = new StudioTemplateRendererFactory(
    (component) => new AmplifyRenderer(component)
  );

  const outputPathDir = path.resolve(path.join('.', 'src', 'ui-components'));
  const outputConfig = {
    outputPathDir,
    module: JSModuleEnum.CommonJS,
    compileTarget: CompileTargetEnum.ES6,
    outputFormat: JSOutputFormatEnum.tsx
  };

  const rendererManager = new StudioTemplateRendererManager(rendererFactory, outputConfig);
  rendererManager.renderSchemaToTemplate(schema);

The schema passed in was:

{
  appId: 'd37nrm8rzt3oek',
  bindingProperties: {},
  componentType: 'Box',
  environmentName: 'staging',
  id: 's-s4mU579Ycf6JGHwhqT',
  name: 'aawwdd',
  overrides: {},
  properties: {},
  variants: []
}

Which generated this component:

/* eslint-disable */
import React from "react";
import { View } from "@aws-amplify/ui-react";

export type aawwddProps = {} & CommonProps;
export default function aawwdd(props: aawwddProps): JSX.Element {
    return (<View {...props} {...getOverrideProps(props.overrides, "View")}></View>);
}

As you can see, the component code itself depends on calls to getOverrideProps, JSX.Element and CommonProps which are not imported. This means the component is not usable.

[frimfram]

getOOverrideProps and findChildOverrides functions can be imported from amplify-ui

https://github.com/aws-amplify/amplify-ui/blob/035e7b7791ba99ab6f83949b22432402ef2d4cb0/packages/react/src/primitives/shared/utils.ts#L73

https://github.com/aws-amplify/amplify-ui/blob/035e7b7791ba99ab6f83949b22432402ef2d4cb0/packages/react/src/primitives/shared/utils.ts#L100