Tagged release/forms and views (#580)

* feat: add override types to form elements (#576) Co-authored-by: Justin Shih <jushih@amazon.com> * feat: table renderer * feat: render options for SelectField and RadioGroupField (#577) Co-authored-by: Hein Jeong <heinje@amazon.com> Co-authored-by: Justin Shih <36183898+Jshhhh@users.noreply.github.com> Co-authored-by: Justin Shih <jushih@amazon.com> Co-authored-by: Kevin Pranoto <kpranoto@amazon.com> Co-authored-by: Hein Jeong <73264629+hein-j@users.noreply.github.com> Co-authored-by: Hein Jeong <heinje@amazon.com>
aws-amplify · Aug 11, 2022 · 0658f93 · 0658f93
1 parent 52bcff1
commit 0658f93
Show file tree

Hide file tree

Showing 19 changed files with 912 additions and 26 deletions.
diff --git a/...s/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap b/...s/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
@@ -8,7 +8,15 @@ import {
   getOverrideProps,
   useStateMutationAction,
 } from \\"@aws-amplify/ui-react/internal\\";
-import { Button, Flex, Grid, TextField } from \\"@aws-amplify/ui-react\\";
+import {
+  Button,
+  Flex,
+  Grid,
+  Radio,
+  RadioGroupField,
+  SelectField,
+  TextField,
+} from \\"@aws-amplify/ui-react\\";
 export default function customDataForm(props) {
   const {
     onSubmit: customDataFormOnSubmit,
@@ -19,6 +27,10 @@ export default function customDataForm(props) {
   } = props;
   const [nameFieldError, setNameFieldError] = useStateMutationAction({});
   const [emailFieldError, setEmailFieldError] = useStateMutationAction({});
+  const [cityFieldError, setCityFieldError] = useStateMutationAction({});
+  const [categoryFieldError, setCategoryFieldError] = useStateMutationAction(
+    {}
+  );
   const [modelFields, setModelFields] = useStateMutationAction({});
   const [formValid, setFormValid] = useStateMutationAction(true);
   return (
@@ -83,6 +95,88 @@ export default function customDataForm(props) {
             {...getOverrideProps(overrides, \\"email\\")}
           ></TextField>
         </Grid>
+        <Grid
+          columnGap=\\"inherit\\"
+          rowGap=\\"inherit\\"
+          templateColumns=\\"repeat(1, auto)\\"
+          {...getOverrideProps(overrides, \\"RowGrid2\\")}
+        >
+          <SelectField
+            label=\\"Label\\"
+            onChange={async (e) => {
+              const { value } = e.target;
+              const isValidResult = onValidate?.[\\"city\\"]
+                ? await onValidate[\\"city\\"](value)
+                : validateField(value, []);
+              setCityFieldError({ ...cityFieldError, ...isValidResult });
+              setFormValid(!cityFieldError.hasError);
+              setModelFields({ ...modelFields, city: value });
+            }}
+            errorMessage={cityFieldError.errorMessage}
+            hasError={cityFieldError.hasError}
+            {...getOverrideProps(overrides, \\"city\\")}
+          >
+            <option
+              children=\\"Los Angeles\\"
+              value=\\"Los Angeles\\"
+              {...getOverrideProps(overrides, \\"cityoption0\\")}
+            ></option>
+            <option
+              children=\\"Houston\\"
+              value=\\"Houston\\"
+              {...getOverrideProps(overrides, \\"cityoption1\\")}
+            ></option>
+            <option
+              children=\\"New York\\"
+              value=\\"New York\\"
+              selected={true}
+              {...getOverrideProps(overrides, \\"cityoption2\\")}
+            ></option>
+          </SelectField>
+        </Grid>
+        <Grid
+          columnGap=\\"inherit\\"
+          rowGap=\\"inherit\\"
+          templateColumns=\\"repeat(1, auto)\\"
+          {...getOverrideProps(overrides, \\"RowGrid3\\")}
+        >
+          <RadioGroupField
+            label=\\"Label\\"
+            name=\\"fieldName\\"
+            defaultValue=\\"Hobbies\\"
+            onChange={async (e) => {
+              const { value } = e.target;
+              const isValidResult = onValidate?.[\\"category\\"]
+                ? await onValidate[\\"category\\"](value)
+                : validateField(value, []);
+              setCategoryFieldError({
+                ...categoryFieldError,
+                ...isValidResult,
+              });
+              setFormValid(!categoryFieldError.hasError);
+              setModelFields({ ...modelFields, category: value });
+            }}
+            errorMessage={categoryFieldError.errorMessage}
+            hasError={categoryFieldError.hasError}
+            {...getOverrideProps(overrides, \\"category\\")}
+          >
+            <Radio
+              children=\\"Hobbies\\"
+              value=\\"Hobbies\\"
+              {...getOverrideProps(overrides, \\"categoryRadio0\\")}
+            ></Radio>
+            <Radio
+              children=\\"Travel\\"
+              value=\\"Travel\\"
+              {...getOverrideProps(overrides, \\"categoryRadio1\\")}
+            ></Radio>
+            <Radio
+              children=\\"Health\\"
+              value=\\"Health\\"
+              {...getOverrideProps(overrides, \\"categoryRadio2\\")}
+            ></Radio>
+          </RadioGroupField>
+        </Grid>
       </Grid>
       <Flex
         justifyContent=\\"space-between\\"
@@ -121,8 +215,16 @@ export default function customDataForm(props) {
 exports[`amplify form renderer tests custom form tests should render a custom backed form 2`] = `
 "import * as React from \\"react\\";
 import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
+import { GridProps, TextFieldProps } from \\"@aws-amplify/ui-react\\";
+export declare type customDataFormOverridesProps = {
+    customDataFormGrid: GridProps;
+    RowGrid0: GridProps;
+    name: TextFieldProps;
+    RowGrid1: GridProps;
+    email: TextFieldProps;
+} & EscapeHatchProps;
 export declare type customDataFormProps = React.PropsWithChildren<{
-    overrides?: EscapeHatchProps | undefined | null;
+    overrides?: customDataFormOverridesProps | undefined | null;
 } & {
     onSubmit: (fields: Record<string, string>) => void;
     onCancel?: () => void;
@@ -334,8 +436,20 @@ export default function myPostForm(props) {
 exports[`amplify form renderer tests datastore form tests should generate a create form 2`] = `
 "import * as React from \\"react\\";
 import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
+import { GridProps, TextFieldProps } from \\"@aws-amplify/ui-react\\";
+export declare type myPostFormOverridesProps = {
+    myPostFormGrid: GridProps;
+    RowGrid0: GridProps;
+    caption: TextFieldProps;
+    RowGrid1: GridProps;
+    username: TextFieldProps;
+    RowGrid2: GridProps;
+    post_url: TextFieldProps;
+    RowGrid3: GridProps;
+    profile_url: TextFieldProps;
+} & EscapeHatchProps;
 export declare type myPostFormProps = React.PropsWithChildren<{
-    overrides?: EscapeHatchProps | undefined | null;
+    overrides?: myPostFormOverridesProps | undefined | null;
 } & {
     onSubmitBefore?: (fields: Record<string, string>) => Record<string, string>;
     onSubmitComplete?: ({ saveSuccessful, errorMessage }: {
@@ -590,8 +704,22 @@ export default function myPostForm(props) {
 exports[`amplify form renderer tests datastore form tests should generate a update form 2`] = `
 "import * as React from \\"react\\";
 import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
+import { GridProps, TextAreaFieldProps, TextFieldProps } from \\"@aws-amplify/ui-react\\";
+export declare type myPostFormOverridesProps = {
+    myPostFormGrid: GridProps;
+    RowGrid0: GridProps;
+    TextAreaFieldbbd63464: TextAreaFieldProps;
+    RowGrid1: GridProps;
+    caption: TextFieldProps;
+    RowGrid2: GridProps;
+    username: TextFieldProps;
+    RowGrid3: GridProps;
+    profile_url: TextFieldProps;
+    RowGrid4: GridProps;
+    post_url: TextFieldProps;
+} & EscapeHatchProps;
 export declare type myPostFormProps = React.PropsWithChildren<{
-    overrides?: EscapeHatchProps | undefined | null;
+    overrides?: myPostFormOverridesProps | undefined | null;
 } & {
     id: string;
     onSubmitBefore?: (fields: Record<string, string>) => Record<string, string>;

diff --git a/...s/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-views.test.ts.snap b/...s/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-views.test.ts.snap
@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`amplify view renderer tests should generate a table element 1`] = `
+"<Table>
+  {!disableHeaders && (
+    <TableHead>
+      <TableRow>
+        <TableCell as=\\"th\\">hireDate</TableCell>
+        <TableCell as=\\"th\\">comments</TableCell>
+        <TableCell as=\\"th\\">createdAt</TableCell>
+        <TableCell as=\\"th\\">updatedAt</TableCell>
+      </TableRow>
+    </TableHead>
+  )}
+  <TableBody>
+    {items.map((item, index) => (
+      <TableRow
+        onClick={
+          highlightOnHover && onRowClick ? () => onRowClick(item, index) : null
+        }
+      >
+        <TableCell>
+          {format[\\"hireDate\\"]
+            ? format[\\"hireDate\\"](item.hireDate)
+            : item.hireDate}
+        </TableCell>
+        <TableCell>
+          {format[\\"comments\\"]
+            ? format[\\"comments\\"](item.comments)
+            : item.comments}
+        </TableCell>
+        <TableCell>
+          {format[\\"createdAt\\"]
+            ? format[\\"createdAt\\"](item.createdAt)
+            : item.createdAt}
+        </TableCell>
+        <TableCell>
+          {format[\\"updatedAt\\"]
+            ? format[\\"updatedAt\\"](item.updatedAt)
+            : item.updatedAt}
+        </TableCell>
+      </TableRow>
+    ))}
+  </TableBody>
+</Table>;
+"
+`;
diff --git a/packages/codegen-ui-react/lib/__tests__/__utils__/amplify-renderer-generator.ts b/packages/codegen-ui-react/lib/__tests__/__utils__/amplify-renderer-generator.ts
@@ -20,11 +20,15 @@ import {
   getGenericFromDataStore,
   Schema,
   StudioForm,
+  StudioView,
 } from '@aws-amplify/codegen-ui';
+import { createPrinter, createSourceFile, EmitHint } from 'typescript';
 import { AmplifyFormRenderer } from '../../amplify-ui-renderers/amplify-form-renderer';
 import { AmplifyRenderer } from '../../amplify-ui-renderers/amplify-renderer';
+import { AmplifyViewRenderer } from '../../amplify-ui-renderers/amplify-view-renderer';
 import { ModuleKind, ReactRenderConfig, ScriptKind, ScriptTarget } from '../../react-render-config';
 import { loadSchemaFromJSONFile } from './example-schema';
+import { transpile } from '../../react-studio-template-renderer-helper';
 
 export const defaultCLIRenderConfig: ReactRenderConfig = {
   module: ModuleKind.ES2020,
@@ -65,3 +69,20 @@ export const generateWithAmplifyFormRenderer = (
   const renderer = rendererFactory.buildRenderer(loadSchemaFromJSONFile<StudioForm>(formJsonFile));
   return renderer.renderComponent();
 };
+
+export const renderTableJsxElement = (
+  tableFilePath: string,
+  dataSchemaFilePath: string,
+  snapshotFileName: string,
+  renderConfig: ReactRenderConfig = defaultCLIRenderConfig,
+): string => {
+  const table = loadSchemaFromJSONFile<StudioView>(tableFilePath);
+  const dataSchema = loadSchemaFromJSONFile<GenericDataSchema>(dataSchemaFilePath);
+  const tableJsx = new AmplifyViewRenderer(table, dataSchema, renderConfig).renderJsx();
+
+  const file = createSourceFile(snapshotFileName, '', ScriptTarget.ES2015, true, ScriptKind.TS);
+  const printer = createPrinter();
+  const tableNode = printer.printNode(EmitHint.Unspecified, tableJsx, file);
+
+  return transpile(tableNode, {}).componentText;
+};
diff --git a/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react-views.test.ts b/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react-views.test.ts
@@ -0,0 +1,23 @@
+/*
+  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License").
+  You may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ */
+import { renderTableJsxElement } from './__utils__';
+
+describe('amplify view renderer tests', () => {
+  test('should generate a table element', () => {
+    const tableElement = renderTableJsxElement('views/datastore-table', 'datastore/person', 'test-table.ts');
+    expect(tableElement).toMatchSnapshot();
+  });
+});
diff --git a/packages/codegen-ui-react/lib/amplify-ui-renderers/amplify-form-renderer.ts b/packages/codegen-ui-react/lib/amplify-ui-renderers/amplify-form-renderer.ts
@@ -65,6 +65,7 @@ import {
   VisuallyHiddenProps,
   TextProps,
 } from '@aws-amplify/ui-react';
+import { HTMLProps } from 'react';
 import { Primitive } from '../primitive';
 import CustomComponentRenderer from './customComponent';
 import FormRenderer from './form';
@@ -139,6 +140,14 @@ export class AmplifyFormRenderer extends ReactFormTemplateRenderer {
           parent,
         ).renderElement(renderChildren);
 
+      case 'option':
+        return new ReactComponentRenderer<HTMLProps<HTMLOptionElement>>(
+          formComponent,
+          this.componentMetadata,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
       case Primitive.Divider:
         return new ReactComponentRenderer<DividerProps>(
           formComponent,

diff --git a/packages/codegen-ui-react/lib/amplify-ui-renderers/amplify-view-renderer.ts b/packages/codegen-ui-react/lib/amplify-ui-renderers/amplify-view-renderer.ts
@@ -13,14 +13,24 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  */
-import { StudioNode } from '@aws-amplify/codegen-ui/lib/studio-node';
-import { StudioView } from '@aws-amplify/codegen-ui/lib/types';
-import { JsxElement, JsxFragment, JsxSelfClosingElement } from 'typescript';
+
+import { JsxElement, factory, JsxFragment } from 'typescript';
 import { ReactViewTemplateRenderer } from '../views/react-view-renderer';
+import { Primitive } from '../primitive';
+import { ReactTableRenderer } from '../react-table-renderer';
 
 export class AmplifyViewRenderer extends ReactViewTemplateRenderer {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  renderJsx(view: StudioView, parent?: StudioNode | undefined): JsxElement | JsxFragment | JsxSelfClosingElement {
-    throw new Error('Method not implemented.');
+  renderJsx(): JsxElement | JsxFragment {
+    switch (this.viewComponent.viewConfiguration.type) {
+      case Primitive.Table:
+        return new ReactTableRenderer(
+          this.viewComponent,
+          this.viewDefinition!,
+          this.viewMetadata,
+          this.importCollection,
+        ).renderElement();
+      default:
+        return factory.createJsxFragment(factory.createJsxOpeningFragment(), [], factory.createJsxJsxClosingFragment());
+    }
   }
 }