feat: add TextAreaField primitive

aws-amplify · Feb 25, 2022 · 1573489 · 1573489
1 parent 221e3d3
commit 1573489
Show file tree

Hide file tree

Showing 17 changed files with 298 additions and 2 deletions.
diff --git a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
@@ -6638,6 +6638,7 @@ import {
   StepperField,
   SwitchField,
   Text,
+  TextAreaField,
   TextField,
 } from \\"@aws-amplify/ui-react\\";
 import option from \\"./option\\";
@@ -6671,6 +6672,8 @@ export default function TwoWayBindings(
     useStateMutationAction(false);
   const [textFieldInputValue, setTextFieldInputValue] =
     useStateMutationAction(\\"\\");
+  const [textAreaFieldInputValue, setTextAreaFieldInputValue] =
+    useStateMutationAction(\\"\\");
   const setCheckboxFieldValueClick = () => {
     setCheckboxFieldInputChecked(false);
   };
@@ -6701,6 +6704,9 @@ export default function TwoWayBindings(
   const setTextFieldValueClick = () => {
     setTextFieldInputValue(\\"Hardcoded Value\\");
   };
+  const setTextAreaFieldValueClick = () => {
+    setTextAreaFieldInputValue(\\"Hardcoded Value\\");
+  };
   return (
     /* @ts-ignore: TS2322 */
     <Flex
@@ -7050,6 +7056,36 @@ export default function TwoWayBindings(
           {...getOverrideProps(overrides, \\"SetTextFieldValue\\")}
         ></Button>
       </Flex>
+      <Flex
+        direction=\\"row\\"
+        {...getOverrideProps(overrides, \\"TextAreaFieldSection\\")}
+      >
+        <Heading
+          level={5}
+          children=\\"TextAreaField\\"
+          {...getOverrideProps(overrides, \\"TextAreaFieldHeader\\")}
+        ></Heading>
+        <TextAreaField
+          label=\\"Name\\"
+          placeholder=\\"Galadriel\\"
+          value={textAreaFieldInputValue}
+          onChange={(event: SyntheticEvent) => {
+            setTextAreaFieldInputValue(event.target.value);
+          }}
+          {...getOverrideProps(overrides, \\"TextAreaFieldInput\\")}
+        ></TextAreaField>
+        <Text
+          children={textAreaFieldInputValue}
+          {...getOverrideProps(overrides, \\"TextAreaFieldValue\\")}
+        ></Text>
+        <Button
+          children=\\"Set TextAreaFieldValue\\"
+          onClick={() => {
+            setTextAreaFieldValueClick();
+          }}
+          {...getOverrideProps(overrides, \\"SetTextAreaFieldValue\\")}
+        ></Button>
+      </Flex>
     </Flex>
   );
 }
@@ -7424,6 +7460,38 @@ export default function TablePrimitive(
 "
 `;
 
+exports[`amplify render tests primitives TextAreaField 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import {
+  EscapeHatchProps,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react/internal\\";
+import { TextAreaField, TextAreaFieldProps } from \\"@aws-amplify/ui-react\\";
+
+export type TextAreaFieldPrimitiveProps = React.PropsWithChildren<
+  Partial<TextAreaFieldProps> & {
+    overrides?: EscapeHatchProps | undefined | null;
+  }
+>;
+export default function TextAreaFieldPrimitive(
+  props: TextAreaFieldPrimitiveProps
+): React.ReactElement {
+  const { overrides, ...rest } = props;
+  return (
+    /* @ts-ignore: TS2322 */
+    <TextAreaField
+      label=\\"Name\\"
+      placeholder=\\"Holden\\"
+      descriptiveText=\\"Please enter valid name\\"
+      {...rest}
+      {...getOverrideProps(overrides, \\"TextAreaFieldPrimitive\\")}
+    ></TextAreaField>
+  );
+}
+"
+`;
+
 exports[`amplify render tests primitives TextField 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";

diff --git a/...codegen-ui-react/lib/__tests__/amplify-ui-renderers/__snapshots__/primitives.test.ts.snap b/...codegen-ui-react/lib/__tests__/amplify-ui-renderers/__snapshots__/primitives.test.ts.snap
@@ -84,6 +84,8 @@ exports[`Primitives Tabs 1`] = `"<Tabs {...rest} {...getOverrideProps(overrides,
 
 exports[`Primitives Text 1`] = `"<Text {...rest} {...getOverrideProps(overrides, \\"MyText\\")}></Text>"`;
 
+exports[`Primitives TextAreaField 1`] = `"<TextAreaField {...rest} {...getOverrideProps(overrides, \\"MyTextAreaField\\")}></TextAreaField>"`;
+
 exports[`Primitives TextField 1`] = `"<TextField {...rest} {...getOverrideProps(overrides, \\"MyTextField\\")}></TextField>"`;
 
 exports[`Primitives ToggleButton 1`] = `"<ToggleButton {...rest} {...getOverrideProps(overrides, \\"MyToggleButton\\")}></ToggleButton>"`;

diff --git a/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react.test.ts b/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react.test.ts
@@ -520,6 +520,10 @@ describe('amplify render tests', () => {
       expect(generateWithAmplifyRenderer('primitives/ExpanderItemPrimitive').componentText).toMatchSnapshot();
     });
 
+    test('TextAreaField', () => {
+      expect(generateWithAmplifyRenderer('primitives/TextAreaFieldPrimitive').componentText).toMatchSnapshot();
+    });
+
     test('TextField', () => {
       expect(generateWithAmplifyRenderer('primitives/TextFieldPrimitive').componentText).toMatchSnapshot();
     });

diff --git a/packages/codegen-ui-react/lib/amplify-ui-renderers/amplify-renderer.ts b/packages/codegen-ui-react/lib/amplify-ui-renderers/amplify-renderer.ts
@@ -56,6 +56,7 @@ import {
   TableHeadProps,
   TableProps,
   TableRowProps,
+  TextAreaFieldProps,
   TextFieldProps,
   ToggleButtonProps,
   ToggleButtonGroupProps,
@@ -413,6 +414,14 @@ export class AmplifyRenderer extends ReactStudioTemplateRenderer {
           parent,
         ).renderElement(renderChildren);
 
+      case Primitive.TextAreaField:
+        return new ReactComponentWithChildrenRenderer<TextAreaFieldProps>(
+          component,
+          this.componentMetadata,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
       case Primitive.TextField:
         return new ReactComponentWithChildrenRenderer<TextFieldProps<boolean>>(
           component,

diff --git a/packages/codegen-ui-react/lib/primitive.ts b/packages/codegen-ui-react/lib/primitive.ts
@@ -63,6 +63,7 @@ export enum Primitive {
   Tabs = 'Tabs',
   TabItem = 'TabItem',
   Text = 'Text',
+  TextAreaField = 'TextAreaField',
   TextField = 'TextField',
   ToggleButton = 'ToggleButton',
   ToggleButtonGroup = 'ToggleButtonGroup',
@@ -83,6 +84,7 @@ export const PrimitivesWithChangeEvent: Set<Primitive> = new Set([
   Primitive.SliderField,
   Primitive.StepperField,
   Primitive.SwitchField,
+  Primitive.TextAreaField,
   Primitive.TextField,
 ]);
 
@@ -119,6 +121,9 @@ export const PrimitiveDefaultPropertyValue: PrimitiveLevelPropConfiguration<Fixe
   [Primitive.SwitchField]: {
     isChecked: { value: false, type: 'boolean' },
   },
+  [Primitive.TextAreaField]: {
+    value: { value: '', type: 'string' },
+  },
   [Primitive.TextField]: {
     value: { value: '', type: 'string' },
   },

diff --git a/packages/codegen-ui/example-schemas/primitives/TextAreaFieldPrimitive.json b/packages/codegen-ui/example-schemas/primitives/TextAreaFieldPrimitive.json
@@ -0,0 +1,17 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "TextAreaField",
+  "name": "TextAreaFieldPrimitive",
+  "properties": {
+    "label": {
+      "value": "Name"
+    },
+    "placeholder": {
+      "value": "Holden"
+    },
+    "descriptiveText": {
+      "value": "Please enter valid name"
+    }
+  },
+  "schemaVersion": "1.0"
+}
diff --git a/packages/codegen-ui/example-schemas/workflow/twoWayBindings.json b/packages/codegen-ui/example-schemas/workflow/twoWayBindings.json
@@ -811,6 +811,74 @@
           }
         }
       ]
+    },
+    {
+      "componentType": "Flex",
+      "name": "TextAreaFieldSection",
+      "properties": {
+        "direction": {
+          "value": "row"
+        }
+      },
+      "children": [
+        {
+          "componentType": "Heading",
+          "name": "TextAreaFieldHeader",
+          "properties": {
+            "label": {
+              "value": "TextAreaField"
+            },
+            "level": {
+              "value": 5
+            }
+          }
+        },
+        {
+          "componentType": "TextAreaField",
+          "name": "TextAreaFieldInput",
+          "properties": {
+            "label": {
+              "value": "Name"
+            },
+            "placeholder": {
+              "value": "Galadriel"
+            }
+          }
+        },
+        {
+          "componentType": "Text",
+          "name": "TextAreaFieldValue",
+          "properties": {
+            "label": {
+              "componentName": "TextAreaFieldInput",
+              "property": "value"
+            }
+          }
+        },
+        {
+          "componentType": "Button",
+          "name": "SetTextAreaFieldValue",
+          "properties": {
+            "label": {
+              "value": "Set TextAreaFieldValue"
+            }
+          },
+          "events": {
+            "click": {
+              "action": "Amplify.Mutation",
+              "parameters": {
+                "state": {
+                  "componentName": "TextAreaFieldInput",
+                  "property": "value",
+                  "set": {
+                    "value": "Hardcoded Value"
+                  }
+                }
+              }
+            }
+          }
+        }
+      ]
     }
   ],
   "schemaVersion": "1.0"

diff --git a/packages/test-generator/integration-test-templates/cypress/integration/generate-spec.ts b/packages/test-generator/integration-test-templates/cypress/integration/generate-spec.ts
@@ -95,6 +95,7 @@ const EXPECTED_SUCCESSFUL_CASES = new Set([
   'TabsPrimitive',
   'TablePrimitive',
   'TextPrimitive',
+  'TextAreaFieldPrimitive',
   'TextFieldPrimitive',
   'ToggleButtonPrimitive',
   'ToggleButtonGroupPrimitive',

diff --git a/packages/test-generator/integration-test-templates/cypress/integration/primitives-spec.ts b/packages/test-generator/integration-test-templates/cypress/integration/primitives-spec.ts
@@ -363,6 +363,18 @@ describe('Primitives', () => {
     });
   });
 
+  describe('TextAreaField', () => {
+    it('Basic', () => {
+      cy.get('#text-area-field')
+        .find('.amplify-textareafield')
+        .within(() => {
+          cy.get('.amplify-label').contains('Name');
+          cy.get('.amplify-text').contains('Please enter valid name');
+          cy.get('.amplify-textarea').should('have.attr', 'placeholder', 'Holden');
+        });
+    });
+  });
+
   describe('TextField', () => {
     it('Basic', () => {
       cy.get('#text-field')

diff --git a/...ges/test-generator/integration-test-templates/cypress/integration/two-way-binding-spec.ts b/...ges/test-generator/integration-test-templates/cypress/integration/two-way-binding-spec.ts
@@ -203,4 +203,22 @@ describe('Workflow', () => {
       });
     });
   });
+
+  describe('TextAreaField', () => {
+    it('updates on ui interaction', () => {
+      cy.get('#text-area-field-section').within(() => {
+        cy.contains('Entered Value').should('not.exist');
+        cy.get('textarea').type('Entered Value');
+        cy.contains('Entered Value');
+      });
+    });
+
+    it('updates on state mutation', () => {
+      cy.get('#text-area-field-section').within(() => {
+        cy.contains('Hardcoded Value').should('not.exist');
+        cy.contains('Set TextAreaFieldValue').click();
+        cy.contains('Hardcoded Value');
+      });
+    });
+  });
 });
diff --git a/packages/test-generator/integration-test-templates/src/PrimitivesTests.tsx b/packages/test-generator/integration-test-templates/src/PrimitivesTests.tsx
@@ -51,6 +51,7 @@ import {
   TabsPrimitive,
   TablePrimitive,
   TextPrimitive,
+  TextAreaFieldPrimitive,
   TextFieldPrimitive,
   ToggleButtonPrimitive,
   ToggleButtonGroupPrimitive,
@@ -197,6 +198,10 @@ export default function PrimitivesTests() {
         <Heading>Text</Heading>
         <TextPrimitive />
       </View>
+      <View id="text-area-field">
+        <Heading>Text Area Field</Heading>
+        <TextAreaFieldPrimitive />
+      </View>
       <View id="text-field">
         <Heading>Text Field</Heading>
         <TextFieldPrimitive />

diff --git a/packages/test-generator/integration-test-templates/src/TwoWayBindingTests.tsx b/packages/test-generator/integration-test-templates/src/TwoWayBindingTests.tsx
@@ -33,6 +33,7 @@ export default function TwoWayBindingTests() {
           StepperFieldSection: { id: 'stepper-field-section' },
           SwitchFieldSection: { id: 'switch-field-section' },
           TextFieldSection: { id: 'text-field-section' },
+          TextAreaFieldSection: { id: 'text-area-field-section' },
         }}
       />
     </AmplifyProvider>

diff --git a/packages/test-generator/lib/components/primitives/TextAreaFieldPrimitive.json b/packages/test-generator/lib/components/primitives/TextAreaFieldPrimitive.json
@@ -0,0 +1,17 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "TextAreaField",
+  "name": "TextAreaFieldPrimitive",
+  "properties": {
+    "label": {
+      "value": "Name"
+    },
+    "placeholder": {
+      "value": "Holden"
+    },
+    "descriptiveText": {
+      "value": "Please enter valid name"
+    }
+  },
+  "schemaVersion": "1.0"
+}
diff --git a/packages/test-generator/lib/components/primitives/index.ts b/packages/test-generator/lib/components/primitives/index.ts
@@ -47,6 +47,7 @@ export { default as SwitchFieldPrimitive } from './SwitchFieldPrimitive.json';
 export { default as TabsPrimitive } from './TabsPrimitive.json';
 export { default as TablePrimitive } from './TablePrimitive.json';
 export { default as TextPrimitive } from './TextPrimitive.json';
+export { default as TextAreaFieldPrimitive } from './TextAreaFieldPrimitive.json';
 export { default as TextFieldPrimitive } from './TextFieldPrimitive.json';
 export { default as ToggleButtonPrimitive } from './ToggleButtonPrimitive.json';
 export { default as ToggleButtonGroupPrimitive } from './ToggleButtonGroupPrimitive.json';