feat: remove input primitive (#212)

Input is only used in amplify-ui internally
aws-amplify · Nov 10, 2021 · fc92841 · fc92841
1 parent bc7de0f
commit fc92841
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 40 deletions.
diff --git a/.../studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap b/.../studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
@@ -2481,11 +2481,11 @@ Object {
 import React from \\"react\\";
 import {
   EscapeHatchProps,
-  Input,
   View,
   ViewProps,
   getOverrideProps,
 } from \\"@aws-amplify/ui-react\\";
+import Input from \\"./Input\\";
 
 export type ParsedFixedValuesProps = React.PropsWithChildren<
   Partial<ViewProps> & {

diff --git a/...ui-codegen-react/lib/__tests__/amplify-ui-renderers/__snapshots__/primitives.test.ts.snap b/...ui-codegen-react/lib/__tests__/amplify-ui-renderers/__snapshots__/primitives.test.ts.snap
@@ -26,8 +26,6 @@ exports[`Primitives Icon 1`] = `"<Icon {...rest} {...getOverrideProps(overrides,
 
 exports[`Primitives Image 1`] = `"<Image {...rest} {...getOverrideProps(overrides, \\"Image\\")}></Image>"`;
 
-exports[`Primitives Input 1`] = `"<Input {...rest} {...getOverrideProps(overrides, \\"Input\\")}></Input>"`;
-
 exports[`Primitives Label 1`] = `"<Label {...rest} {...getOverrideProps(overrides, \\"Label\\")}></Label>"`;
 
 exports[`Primitives Link 1`] = `"<Link {...rest} {...getOverrideProps(overrides, \\"Link\\")}></Link>"`;

diff --git a/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/amplify-renderer.ts b/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/amplify-renderer.ts
@@ -29,7 +29,6 @@ import {
   HeadingProps,
   IconProps,
   ImageProps,
-  InputProps,
   LabelProps,
   LinkProps,
   LoaderProps,
@@ -147,13 +146,6 @@ export class AmplifyRenderer extends ReactStudioTemplateRenderer {
       case Primitive.Image:
         return new ReactComponentRenderer<ImageProps>(component, this.importCollection, parent).renderElement();
 
-      case Primitive.Input:
-        return new ReactComponentWithChildrenRenderer<InputProps>(
-          component,
-          this.importCollection,
-          parent,
-        ).renderElement(renderChildren);
-
       case Primitive.Label:
         return new ReactComponentWithChildrenRenderer<LabelProps>(
           component,

diff --git a/packages/studio-ui-codegen-react/lib/primitive.ts b/packages/studio-ui-codegen-react/lib/primitive.ts
@@ -29,7 +29,6 @@ enum Primitive {
   Heading = 'Heading',
   Icon = 'Icon',
   Image = 'Image',
-  Input = 'Input',
   Label = 'Label',
   Link = 'Link',
   Loader = 'Loader',

diff --git a/...est-generator/integration-test-templates/cypress/integration/generated-components-spec.js b/...est-generator/integration-test-templates/cypress/integration/generated-components-spec.js
@@ -265,26 +265,24 @@ describe('Generated Components', () => {
         .should('equal', 'raw string value');
     });
 
-    // string and parsed number values are represented the same in HTML. Snapshot tests cover differences.
     it('String Number Value', () => {
       cy.visit('http://localhost:3000/component-tests');
       cy.get('#parsed-fixed-values').find('#string-number-value').should('have.attr', 'value').should('equal', '67548');
     });
 
     it('Parsed Number Value', () => {
       cy.visit('http://localhost:3000/component-tests');
-      cy.get('#parsed-fixed-values').find('#parsed-number-value').should('have.attr', 'value').should('equal', '67548');
+      cy.get('#parsed-fixed-values').find('#parsed-number-value').get('.amplify-visually-hidden').contains('0.4');
     });
 
-    // string and parsed boolean values are represented the same in HTML. Snapshot tests cover differences.
     it('String Boolean Value', () => {
       cy.visit('http://localhost:3000/component-tests');
       cy.get('#parsed-fixed-values').find('#string-boolean-value').should('have.attr', 'value').should('equal', 'true');
     });
 
     it('Parsed Boolean Value', () => {
       cy.visit('http://localhost:3000/component-tests');
-      cy.get('#parsed-fixed-values').find('#parsed-boolean-value').should('have.attr', 'value').should('equal', 'true');
+      cy.get('#parsed-fixed-values').find('#parsed-boolean-value').should('be.disabled');
     });
 
     it('String JSON Value', () => {
@@ -297,10 +295,7 @@ describe('Generated Components', () => {
 
     it('Parsed JSON Value', () => {
       cy.visit('http://localhost:3000/component-tests');
-      cy.get('#parsed-fixed-values')
-        .find('#parsed-json-value')
-        .should('have.attr', 'value')
-        .should('equal', '[object Object]'); // shows that object was parsed
+      cy.get('#parsed-fixed-values').find('#parsed-json-value').should('have.attr', 'viewBox', '0 0 24 24');
     });
 
     it('String Array Value', () => {
@@ -313,8 +308,7 @@ describe('Generated Components', () => {
 
     it('Parsed Array Value', () => {
       cy.visit('http://localhost:3000/component-tests');
-      // no brackets indicates array was parsed
-      cy.get('#parsed-fixed-values').find('#parsed-array-value').should('have.attr', 'value').should('equal', '1,2,3');
+      cy.get('#parsed-fixed-values').find('#parsed-array-value').contains('123');
     });
 
     it('String Null Value', () => {
@@ -324,7 +318,7 @@ describe('Generated Components', () => {
 
     it('Parsed Null Value', () => {
       cy.visit('http://localhost:3000/component-tests');
-      cy.get('#parsed-fixed-values').find('#parsed-null-value').should('have.attr', 'value').should('be.empty');
+      cy.get('#parsed-fixed-values').find('#parsed-null-value').should('have.text', '');
     });
   });
 

diff --git a/packages/test-generator/lib/components/parsedFixedValues.json b/packages/test-generator/lib/components/parsedFixedValues.json
@@ -9,126 +9,153 @@
   },
   "children": [
     {
-      "componentType": "Input",
+      "componentType": "TextField",
       "properties": {
         "id": {
           "value": "string-value"
         },
+        "label": {
+          "value": "String"
+        },
         "value": {
           "value": "raw string value"
         }
       }
     },
     {
-      "componentType": "Input",
+      "componentType": "TextField",
       "properties": {
         "id": {
           "value": "string-number-value"
         },
+        "label": {
+          "value": "String Number"
+        },
         "value": {
           "value": "67548"
         }
       }
     },
     {
-      "componentType": "Input",
+      "componentType": "Rating",
       "properties": {
         "id": {
           "value": "parsed-number-value"
         },
         "value": {
-          "value": "67548",
+          "value": "0.4",
           "type": "Number"
         }
       }
     },
     {
-      "componentType": "Input",
+      "componentType": "TextField",
       "properties": {
         "id": {
           "value": "string-boolean-value"
         },
+        "label": {
+          "value": "String Boolean"
+        },
         "value": {
           "value": "true"
         }
       }
     },
     {
-      "componentType": "Input",
+      "componentType": "TextField",
       "properties": {
         "id": {
           "value": "parsed-boolean-value"
         },
-        "value": {
+        "label": {
+          "value": "Parsed Boolean"
+        },
+        "isDisabled": {
           "value": "true",
           "type": "Boolean"
         }
       }
     },
     {
-      "componentType": "Input",
+      "componentType": "TextField",
       "properties": {
         "id": {
           "value": "string-json-value"
         },
+        "label": {
+          "value": "String JSON"
+        },
         "value": {
           "value": "{\"foo\": \"bar\"}"
         }
       }
     },
     {
-      "componentType": "Input",
+      "componentType": "Icon",
       "properties": {
         "id": {
           "value": "parsed-json-value"
         },
-        "value": {
-          "value": "{\"foo\": \"bar\"}",
+        "viewBox": {
+          "value": "{\"width\": 24, \"height\": 24}",
           "type": "Object"
+        },
+        "pathData": {
+          "value": "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
+        },
+        "ariaLabel": {
+          "value": "Favorite"
         }
       }
     },
     {
-      "componentType": "Input",
+      "componentType": "TextField",
       "properties": {
         "id": {
           "value": "string-array-value"
         },
+        "label": {
+          "value": "String Array"
+        },
         "value": {
           "value": "[1,2,3]"
         }
       }
     },
     {
-      "componentType": "Input",
+      "componentType": "Badge",
       "properties": {
         "id": {
           "value": "parsed-array-value"
         },
-        "value": {
+        "label": {
           "value": "[1,2,3]",
           "type": "Object"
         }
       }
     },
     {
-      "componentType": "Input",
+      "componentType": "TextField",
       "properties": {
         "id": {
           "value": "string-null-value"
         },
+        "label": {
+          "value": "String null"
+        },
         "value": {
           "value": "null"
         }
       }
     },
     {
-      "componentType": "Input",
+      "componentType": "Badge",
       "properties": {
         "id": {
           "value": "parsed-null-value"
         },
-        "value": {
+        "label": {
           "value": "null",
           "type": "Object"
         }