feat: expander init

packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-views.test.ts.snap

@@ -1,5 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`amplify expander renderer tests should generate expander with an expander item that has a component as a child 1`] = `
+"<Expander type=\\"multiple\\">
+  {items.map((item) => (
+    <ExpanderItem title={item.questionTitle} value={item.id} key={item.id}>
+      <Ampligram
+        title={item.answerTitle}
+        description={item.answerDescription}
+      />
+    </ExpanderItem>
+  ))}
+</Expander>;
+"
+`;
+
+exports[`amplify expander renderer tests should generate expander with an expander item that has a data binding as a child 1`] = `
+"<Expander type=\\"multiple\\">
+  {items.map((item) => (
+    <ExpanderItem title={item.questionTitle} value={item.id} key={item.id}>
+      {item.questionAnswer}
+    </ExpanderItem>
+  ))}
+</Expander>;
+"
+`;
+
 exports[`amplify table renderer tests should generate a non-datastore table element 1`] = `
 "<Table>
   {!disableHeaders && (
@@ -90,6 +115,7 @@ exports[`amplify view renderer tests should call util file if rendered 1`] = `
 "/* eslint-disable */
 import * as React from \\"react\\";
 import { formatter } from \\"./utils\\";
+import { Post } from \\"../models\\";
 import {
   createDataStorePredicate,
   useDataStoreBinding,
@@ -104,7 +130,7 @@ import {
 } from \\"@aws-amplify/ui-react\\";
 export default function MyPostTable(props) {
   const {
-    items: itemsProps,
+    items: itemsProp,
     predicateOverride,
     formatOverride,
     highlightOnHover,
@@ -120,13 +146,13 @@ export default function MyPostTable(props) {
   };
   const postPredicate = createDataStorePredicate(postFilter);
   const postPagination = { sort: (s) => s.username(SortDirection.ASCENDING) };
-  const MyPostTableDataStore = useDataStoreBinding({
+  const postDataStore = useDataStoreBinding({
     type: \\"collection\\",
     model: Post,
     criteria: predicateOverride || postPredicate,
     pagination: postPagination,
   }).items;
-  const items = itemsProp !== undefined ? itemsProp : MyPostTableDataStore;
+  const items = itemsProp !== undefined ? itemsProp : postDataStore;
   return (
     <Table>
       {!disableHeaders && (
@@ -192,9 +218,10 @@ export default function MyPostTable(props) {
 
 exports[`amplify view renderer tests should call util file if rendered 2`] = `
 "import * as React from \\"react\\";
-import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
+import { EscapeHatchProps, createDataStorePredicate } from \\"@aws-amplify/ui-react/internal\\";
 export declare type MyPostTableProps = React.PropsWithChildren<{
     overrides?: EscapeHatchProps | undefined | null;
+    predicateOverride?: ReturnType<typeof createDataStorePredicate> | undefined | null;
 }>;
 export default function MyPostTable(props: MyPostTableProps): React.ReactElement;
 "
@@ -259,9 +286,10 @@ export default function CustomTable(props) {
 
 exports[`amplify view renderer tests should render view with custom datastore 2`] = `
 "import * as React from \\"react\\";
-import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
+import { EscapeHatchProps, createDataStorePredicate } from \\"@aws-amplify/ui-react/internal\\";
 export declare type CustomTableProps = React.PropsWithChildren<{
     overrides?: EscapeHatchProps | undefined | null;
+    predicateOverride?: ReturnType<typeof createDataStorePredicate> | undefined | null;
 }>;
 export default function CustomTable(props: CustomTableProps): React.ReactElement;
 "
@@ -270,6 +298,7 @@ export default function CustomTable(props: CustomTableProps): React.ReactElement
 exports[`amplify view renderer tests should render view with passed in predicate and sort 1`] = `
 "/* eslint-disable */
 import * as React from \\"react\\";
+import { Post } from \\"../models\\";
 import {
   createDataStorePredicate,
   useDataStoreBinding,
@@ -284,7 +313,7 @@ import {
 } from \\"@aws-amplify/ui-react\\";
 export default function MyPostTable(props) {
   const {
-    items: itemsProps,
+    items: itemsProp,
     predicateOverride,
     formatOverride,
     highlightOnHover,
@@ -300,13 +329,13 @@ export default function MyPostTable(props) {
   };
   const postPredicate = createDataStorePredicate(postFilter);
   const postPagination = { sort: (s) => s.username(SortDirection.ASCENDING) };
-  const MyPostTableDataStore = useDataStoreBinding({
+  const postDataStore = useDataStoreBinding({
     type: \\"collection\\",
     model: Post,
     criteria: predicateOverride || postPredicate,
     pagination: postPagination,
   }).items;
-  const items = itemsProp !== undefined ? itemsProp : MyPostTableDataStore;
+  const items = itemsProp !== undefined ? itemsProp : postDataStore;
   return (
     <Table>
       {!disableHeaders && (
@@ -369,9 +398,10 @@ export default function MyPostTable(props) {
 
 exports[`amplify view renderer tests should render view with passed in predicate and sort 2`] = `
 "import * as React from \\"react\\";
-import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
+import { EscapeHatchProps, createDataStorePredicate } from \\"@aws-amplify/ui-react/internal\\";
 export declare type MyPostTableProps = React.PropsWithChildren<{
     overrides?: EscapeHatchProps | undefined | null;
+    predicateOverride?: ReturnType<typeof createDataStorePredicate> | undefined | null;
 }>;
 export default function MyPostTable(props: MyPostTableProps): React.ReactElement;
 "

packages/codegen-ui-react/lib/__tests__/__utils__/amplify-renderer-generator.ts

@@ -118,3 +118,20 @@ export const genericPrinter = (node: Node): string => {
   });
   return printer.printNode(EmitHint.Unspecified, node, file);
 };
+
+export const renderExpanderJsxElement = (
+  filePath: string,
+  dataSchemaFilePath: string | undefined,
+  snapshotFileName: string,
+  renderConfig: ReactRenderConfig = defaultCLIRenderConfig,
+): string => {
+  const expander = loadSchemaFromJSONFile<StudioView>(filePath);
+  const dataSchema = dataSchemaFilePath ? loadSchemaFromJSONFile<GenericDataSchema>(dataSchemaFilePath) : undefined;
+  const expanderJsx = new AmplifyViewRenderer(expander, dataSchema, renderConfig).renderJsx();
+
+  const file = createSourceFile(snapshotFileName, '', ScriptTarget.ES2015, true, ScriptKind.TS);
+  const printer = createPrinter();
+  const expanderNode = printer.printNode(EmitHint.Unspecified, expanderJsx, file);
+
+  return transpile(expanderNode, {}).componentText;
+};

packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react-views.test.ts

@@ -13,7 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  */
-import { renderTableJsxElement, renderWithAmplifyViewRenderer } from './__utils__';
+import { renderExpanderJsxElement, renderTableJsxElement, renderWithAmplifyViewRenderer } from './__utils__';
 
 describe('amplify table renderer tests', () => {
   test('should generate a table element', () => {
@@ -27,6 +27,26 @@ describe('amplify table renderer tests', () => {
   });
 });
 
+describe('amplify expander renderer tests', () => {
+  test('should generate expander with an expander item that has a component as a child', () => {
+    const expander = renderExpanderJsxElement(
+      'views/expander-with-component-slot',
+      undefined,
+      'test-expander-component-slot.ts',
+    );
+    expect(expander).toMatchSnapshot();
+  });
+
+  test('should generate expander with an expander item that has a data binding as a child', () => {
+    const expander = renderExpanderJsxElement(
+      'views/expander-with-binding-prop',
+      undefined,
+      'test-expander-binding-prop.ts',
+    );
+    expect(expander).toMatchSnapshot();
+  });
+});
+
 describe('amplify view renderer tests', () => {
   test('should render view with passed in predicate and sort', () => {
     const { componentText, declaration } = renderWithAmplifyViewRenderer(

packages/codegen-ui-react/lib/amplify-ui-renderers/amplify-view-renderer.ts

@@ -18,6 +18,7 @@ import { JsxElement, factory, JsxFragment } from 'typescript';
 import { ReactViewTemplateRenderer } from '../views/react-view-renderer';
 import { Primitive } from '../primitive';
 import { ReactTableRenderer } from '../react-table-renderer';
+import { ReactExpanderRenderer } from '../react-expander-renderer';
 
 export class AmplifyViewRenderer extends ReactViewTemplateRenderer {
   renderJsx(): JsxElement | JsxFragment {
@@ -29,6 +30,15 @@ export class AmplifyViewRenderer extends ReactViewTemplateRenderer {
           this.viewMetadata,
           this.importCollection,
         ).renderElement();
+      case 'Collection':
+        switch (this.viewComponent.viewConfiguration.collection.collectionType) {
+          case 'expander':
+            return new ReactExpanderRenderer(this.viewComponent, this.importCollection).renderElement();
+          default:
+            throw new Error(
+              `Collection type ${this.viewComponent.viewConfiguration.collection.collectionType} is not supported`,
+            );
+        }
       default:
         return factory.createJsxFragment(factory.createJsxOpeningFragment(), [], factory.createJsxJsxClosingFragment());
     }

packages/codegen-ui-react/lib/index.ts

@@ -14,6 +14,7 @@
   limitations under the License.
  */
 export * from './react-component-renderer';
+export * from './react-expander-renderer';
 export * from './react-table-renderer';
 export * from './imports';
 export * from './react-studio-template-renderer';