From 605284fdbe9f09b7440ad949cb8dbab1f936f995 Mon Sep 17 00:00:00 2001 From: Dane Pilcher Date: Tue, 4 Jan 2022 13:02:36 -0700 Subject: [PATCH] feat: add Table primitive (#323) --- .../studio-ui-codegen-react.test.ts.snap | 180 +++++++++++++++ .../__snapshots__/primitives.test.ts.snap | 12 + .../__tests__/studio-ui-codegen-react.test.ts | 4 + .../primitives/TablePrimitive.json | 207 ++++++++++++++++++ .../amplify-ui-renderers/amplify-renderer.ts | 48 ++++ packages/codegen-ui-react/lib/primitive.ts | 8 +- .../cypress/integration/generate-spec.ts | 1 + .../cypress/integration/primitives-spec.ts | 43 ++++ .../src/PrimitivesTests.tsx | 5 + .../components/primitives/TablePrimitive.json | 207 ++++++++++++++++++ .../lib/components/primitives/index.ts | 1 + 11 files changed, 715 insertions(+), 1 deletion(-) create mode 100644 packages/codegen-ui-react/lib/__tests__/studio-ui-json/primitives/TablePrimitive.json create mode 100644 packages/test-generator/lib/components/primitives/TablePrimitive.json 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 index 722d3a919..04723af12 100644 --- 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 @@ -5334,6 +5334,186 @@ export default function SliderFieldPrimitive( " `; +exports[`amplify render tests primitives Table 1`] = ` +"/* eslint-disable */ +import React from \\"react\\"; +import { + EscapeHatchProps, + getOverrideProps, +} from \\"@aws-amplify/ui-react/internal\\"; +import { + Table, + TableBody, + TableCell, + TableFoot, + TableHead, + TableProps, + TableRow, +} from \\"@aws-amplify/ui-react\\"; + +export type TablePrimitiveProps = React.PropsWithChildren< + Partial & { + overrides?: EscapeHatchProps | undefined | null; + } +>; +export default function TablePrimitive( + props: TablePrimitiveProps +): React.ReactElement { + const { overrides: overridesProp, ...rest } = props; + const overrides = { ...overridesProp }; + return ( + /* @ts-ignore: TS2322 */ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +} +" +`; + exports[`amplify render tests primitives TextField 1`] = ` "/* eslint-disable */ import React from \\"react\\"; diff --git a/packages/codegen-ui-react/lib/__tests__/amplify-ui-renderers/__snapshots__/primitives.test.ts.snap b/packages/codegen-ui-react/lib/__tests__/amplify-ui-renderers/__snapshots__/primitives.test.ts.snap index 9ed2b02d3..5b86fab0c 100644 --- a/packages/codegen-ui-react/lib/__tests__/amplify-ui-renderers/__snapshots__/primitives.test.ts.snap +++ b/packages/codegen-ui-react/lib/__tests__/amplify-ui-renderers/__snapshots__/primitives.test.ts.snap @@ -62,6 +62,18 @@ exports[`Primitives SwitchField 1`] = `""`; +exports[`Primitives Table 1`] = `"
"`; + +exports[`Primitives TableBody 1`] = `""`; + +exports[`Primitives TableCell 1`] = `""`; + +exports[`Primitives TableFoot 1`] = `""`; + +exports[`Primitives TableHead 1`] = `""`; + +exports[`Primitives TableRow 1`] = `""`; + exports[`Primitives Tabs 1`] = `""`; exports[`Primitives Text 1`] = `""`; 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 index dd2f2dd4d..17d039b66 100644 --- 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 @@ -443,6 +443,10 @@ describe('amplify render tests', () => { test('Built-in Iconset', () => { expect(generateWithAmplifyRenderer('builtInIconset').componentText).toMatchSnapshot(); }); + + test('Table', () => { + expect(generateWithAmplifyRenderer('primitives/TablePrimitive').componentText).toMatchSnapshot(); + }); }); describe('icon-indices', () => { diff --git a/packages/codegen-ui-react/lib/__tests__/studio-ui-json/primitives/TablePrimitive.json b/packages/codegen-ui-react/lib/__tests__/studio-ui-json/primitives/TablePrimitive.json new file mode 100644 index 000000000..2ba5e925f --- /dev/null +++ b/packages/codegen-ui-react/lib/__tests__/studio-ui-json/primitives/TablePrimitive.json @@ -0,0 +1,207 @@ +{ + "componentType": "Table", + "name": "TablePrimitive", + "properties": { + "caption": { + "value": "Some fruits" + }, + "highlightOnHover": { + "value": "true", + "type": "boolean" + }, + "size": { + "value": "small" + }, + "variation": { + "value": "striped" + } + }, + "children": [ + { + "componentType": "TableHead", + "properties": {}, + "children": [ + { + "componentType": "TableRow", + "properties": {}, + "children": [ + { + "componentType": "TableCell", + "properties": { + "as": { + "value": "th" + }, + "label": { + "value": "Citrus" + } + } + }, + { + "componentType": "TableCell", + "properties": { + "as": { + "value": "th" + }, + "label": { + "value": "Stone Fruit" + } + } + }, + { + "componentType": "TableCell", + "properties": { + "as": { + "value": "th" + }, + "label": { + "value": "Berry" + } + } + } + ] + } + ] + }, + { + "componentType": "TableBody", + "properties": {}, + "children": [ + { + "componentType": "TableRow", + "properties": {}, + "children": [ + { + "componentType": "TableCell", + "properties": { + "label": { + "value": "Orange" + } + } + }, + { + "componentType": "TableCell", + "properties": { + "label": { + "value": "Nectarine" + } + } + }, + { + "componentType": "TableCell", + "properties": { + "label": { + "value": "Raspberry" + } + } + } + ] + }, + { + "componentType": "TableRow", + "properties": {}, + "children": [ + { + "componentType": "TableCell", + "properties": { + "label": { + "value": "Grapefruit" + } + } + }, + { + "componentType": "TableCell", + "properties": { + "label": { + "value": "Apricot" + } + } + }, + { + "componentType": "TableCell", + "properties": { + "label": { + "value": "Blueberry" + } + } + } + ] + }, + { + "componentType": "TableRow", + "properties": {}, + "children": [ + { + "componentType": "TableCell", + "properties": { + "label": { + "value": "Lime" + } + } + }, + { + "componentType": "TableCell", + "properties": { + "label": { + "value": "Peach" + } + } + }, + { + "componentType": "TableCell", + "properties": { + "label": { + "value": "Strawberry" + } + } + } + ] + } + ] + }, + { + "componentType": "TableFoot", + "properties": {}, + "children": [ + { + "componentType": "TableRow", + "properties": {}, + "children": [ + { + "componentType": "TableCell", + "properties": { + "as": { + "value": "th" + }, + "label": { + "value": "Citrus" + } + } + }, + { + "componentType": "TableCell", + "properties": { + "as": { + "value": "th" + }, + "label": { + "value": "Stone Fruit" + } + } + }, + { + "componentType": "TableCell", + "properties": { + "as": { + "value": "th" + }, + "label": { + "value": "Berry" + } + } + } + ] + } + ] + } + ] +} 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 index 2048aeca1..31abeea64 100644 --- a/packages/codegen-ui-react/lib/amplify-ui-renderers/amplify-renderer.ts +++ b/packages/codegen-ui-react/lib/amplify-ui-renderers/amplify-renderer.ts @@ -48,6 +48,12 @@ import { SwitchFieldProps, TabItemProps, TabsProps, + TableCellProps, + TableBodyProps, + TableFootProps, + TableHeadProps, + TableProps, + TableRowProps, TextFieldProps, ToggleButtonProps, ToggleButtonGroupProps, @@ -301,6 +307,48 @@ export class AmplifyRenderer extends ReactStudioTemplateRenderer { parent, ).renderElement(renderChildren); + case Primitive.Table: + return new ReactComponentWithChildrenRenderer( + component, + this.importCollection, + parent, + ).renderElement(renderChildren); + + case Primitive.TableBody: + return new ReactComponentWithChildrenRenderer( + component, + this.importCollection, + parent, + ).renderElement(renderChildren); + + case Primitive.TableCell: + return new ReactComponentWithChildrenRenderer( + component, + this.importCollection, + parent, + ).renderElement(renderChildren); + + case Primitive.TableFoot: + return new ReactComponentWithChildrenRenderer( + component, + this.importCollection, + parent, + ).renderElement(renderChildren); + + case Primitive.TableHead: + return new ReactComponentWithChildrenRenderer( + component, + this.importCollection, + parent, + ).renderElement(renderChildren); + + case Primitive.TableRow: + return new ReactComponentWithChildrenRenderer( + component, + this.importCollection, + parent, + ).renderElement(renderChildren); + case Primitive.Text: return new ReactComponentWithChildrenRenderer( component, diff --git a/packages/codegen-ui-react/lib/primitive.ts b/packages/codegen-ui-react/lib/primitive.ts index e8a21d4fc..8985b76a9 100644 --- a/packages/codegen-ui-react/lib/primitive.ts +++ b/packages/codegen-ui-react/lib/primitive.ts @@ -47,6 +47,12 @@ enum Primitive { SliderField = 'SliderField', StepperField = 'StepperField', SwitchField = 'SwitchField', + Table = 'Table', + TableBody = 'TableBody', + TableCell = 'TableCell', + TableFoot = 'TableFoot', + TableHead = 'TableHead', + TableRow = 'TableRow', Tabs = 'Tabs', TabItem = 'TabItem', Text = 'Text', @@ -72,7 +78,7 @@ export const PrimitiveChildrenPropMapping: Partial> = // [Primitive.MenuButton]: 'label', // [Primitive.MenuItem]: 'label', [Primitive.Radio]: 'label', - // [Primitive.TableCell]: 'label', + [Primitive.TableCell]: 'label', [Primitive.Text]: 'label', [Primitive.ToggleButton]: 'label', }; 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 index 913cd9adc..828053cf7 100644 --- a/packages/test-generator/integration-test-templates/cypress/integration/generate-spec.ts +++ b/packages/test-generator/integration-test-templates/cypress/integration/generate-spec.ts @@ -94,6 +94,7 @@ const EXPECTED_SUCCESSFUL_CASES = new Set([ 'StepperFieldPrimitive', 'SwitchFieldPrimitive', 'TabsPrimitive', + 'TablePrimitive', 'TextPrimitive', 'TextFieldPrimitive', 'ToggleButtonPrimitive', 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 index 5c026d801..417f2e419 100644 --- a/packages/test-generator/integration-test-templates/cypress/integration/primitives-spec.ts +++ b/packages/test-generator/integration-test-templates/cypress/integration/primitives-spec.ts @@ -295,6 +295,49 @@ describe('Primitives', () => { }); }); + describe('Table', () => { + it('Basic', () => { + cy.get('#table') + .find('.amplify-table') + .within(() => { + cy.get('.amplify-table__caption').should('have.text', 'Some fruits'); + cy.get('.amplify-table__head').within(() => { + cy.get('.amplify-table__th').eq(0).should('have.text', 'Citrus'); + cy.get('.amplify-table__th').eq(1).should('have.text', 'Stone Fruit'); + cy.get('.amplify-table__th').eq(2).should('have.text', 'Berry'); + }); + cy.get('.amplify-table__body').within(() => { + cy.get('.amplify-table__row') + .eq(0) + .within(() => { + cy.get('.amplify-table__td').eq(0).should('have.text', 'Orange'); + cy.get('.amplify-table__td').eq(1).should('have.text', 'Nectarine'); + cy.get('.amplify-table__td').eq(2).should('have.text', 'Raspberry'); + }); + cy.get('.amplify-table__row') + .eq(1) + .within(() => { + cy.get('.amplify-table__td').eq(0).should('have.text', 'Grapefruit'); + cy.get('.amplify-table__td').eq(1).should('have.text', 'Apricot'); + cy.get('.amplify-table__td').eq(2).should('have.text', 'Blueberry'); + }); + cy.get('.amplify-table__row') + .eq(2) + .within(() => { + cy.get('.amplify-table__td').eq(0).should('have.text', 'Lime'); + cy.get('.amplify-table__td').eq(1).should('have.text', 'Peach'); + cy.get('.amplify-table__td').eq(2).should('have.text', 'Strawberry'); + }); + }); + cy.get('.amplify-table__foot').within(() => { + cy.get('.amplify-table__th').eq(0).should('have.text', 'Citrus'); + cy.get('.amplify-table__th').eq(1).should('have.text', 'Stone Fruit'); + cy.get('.amplify-table__th').eq(2).should('have.text', 'Berry'); + }); + }); + }); + }); + describe('Text', () => { it('Basic', () => { cy.get('#text').find('.amplify-text').should('have.text', 'Hello world'); diff --git a/packages/test-generator/integration-test-templates/src/PrimitivesTests.tsx b/packages/test-generator/integration-test-templates/src/PrimitivesTests.tsx index 9f3532ff0..77aa419c5 100644 --- a/packages/test-generator/integration-test-templates/src/PrimitivesTests.tsx +++ b/packages/test-generator/integration-test-templates/src/PrimitivesTests.tsx @@ -47,6 +47,7 @@ import { StepperFieldPrimitive, SwitchFieldPrimitive, TabsPrimitive, + TablePrimitive, TextPrimitive, TextFieldPrimitive, ToggleButtonPrimitive, @@ -178,6 +179,10 @@ export default function PrimitivesTests() { Tabs + + Table + + Text diff --git a/packages/test-generator/lib/components/primitives/TablePrimitive.json b/packages/test-generator/lib/components/primitives/TablePrimitive.json new file mode 100644 index 000000000..2ba5e925f --- /dev/null +++ b/packages/test-generator/lib/components/primitives/TablePrimitive.json @@ -0,0 +1,207 @@ +{ + "componentType": "Table", + "name": "TablePrimitive", + "properties": { + "caption": { + "value": "Some fruits" + }, + "highlightOnHover": { + "value": "true", + "type": "boolean" + }, + "size": { + "value": "small" + }, + "variation": { + "value": "striped" + } + }, + "children": [ + { + "componentType": "TableHead", + "properties": {}, + "children": [ + { + "componentType": "TableRow", + "properties": {}, + "children": [ + { + "componentType": "TableCell", + "properties": { + "as": { + "value": "th" + }, + "label": { + "value": "Citrus" + } + } + }, + { + "componentType": "TableCell", + "properties": { + "as": { + "value": "th" + }, + "label": { + "value": "Stone Fruit" + } + } + }, + { + "componentType": "TableCell", + "properties": { + "as": { + "value": "th" + }, + "label": { + "value": "Berry" + } + } + } + ] + } + ] + }, + { + "componentType": "TableBody", + "properties": {}, + "children": [ + { + "componentType": "TableRow", + "properties": {}, + "children": [ + { + "componentType": "TableCell", + "properties": { + "label": { + "value": "Orange" + } + } + }, + { + "componentType": "TableCell", + "properties": { + "label": { + "value": "Nectarine" + } + } + }, + { + "componentType": "TableCell", + "properties": { + "label": { + "value": "Raspberry" + } + } + } + ] + }, + { + "componentType": "TableRow", + "properties": {}, + "children": [ + { + "componentType": "TableCell", + "properties": { + "label": { + "value": "Grapefruit" + } + } + }, + { + "componentType": "TableCell", + "properties": { + "label": { + "value": "Apricot" + } + } + }, + { + "componentType": "TableCell", + "properties": { + "label": { + "value": "Blueberry" + } + } + } + ] + }, + { + "componentType": "TableRow", + "properties": {}, + "children": [ + { + "componentType": "TableCell", + "properties": { + "label": { + "value": "Lime" + } + } + }, + { + "componentType": "TableCell", + "properties": { + "label": { + "value": "Peach" + } + } + }, + { + "componentType": "TableCell", + "properties": { + "label": { + "value": "Strawberry" + } + } + } + ] + } + ] + }, + { + "componentType": "TableFoot", + "properties": {}, + "children": [ + { + "componentType": "TableRow", + "properties": {}, + "children": [ + { + "componentType": "TableCell", + "properties": { + "as": { + "value": "th" + }, + "label": { + "value": "Citrus" + } + } + }, + { + "componentType": "TableCell", + "properties": { + "as": { + "value": "th" + }, + "label": { + "value": "Stone Fruit" + } + } + }, + { + "componentType": "TableCell", + "properties": { + "as": { + "value": "th" + }, + "label": { + "value": "Berry" + } + } + } + ] + } + ] + } + ] +} diff --git a/packages/test-generator/lib/components/primitives/index.ts b/packages/test-generator/lib/components/primitives/index.ts index ccd7c3351..caf74e033 100644 --- a/packages/test-generator/lib/components/primitives/index.ts +++ b/packages/test-generator/lib/components/primitives/index.ts @@ -43,6 +43,7 @@ export { default as SliderFieldPrimitive } from './SliderFieldPrimitive.json'; export { default as StepperFieldPrimitive } from './StepperFieldPrimitive.json'; 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 TextFieldPrimitive } from './TextFieldPrimitive.json'; export { default as ToggleButtonPrimitive } from './ToggleButtonPrimitive.json';