From d5c82fd0da0b8686677e1a1bcf8063c11eeb30a7 Mon Sep 17 00:00:00 2001 From: Dane Pilcher Date: Mon, 3 Jan 2022 19:02:05 +0000 Subject: [PATCH] feat: add Menu primitive --- .../studio-ui-codegen-react.test.ts.snap | 63 +++++++++++++++++++ .../__snapshots__/primitives.test.ts.snap | 6 ++ .../__tests__/studio-ui-codegen-react.test.ts | 8 +++ .../primitives/MenuButtonPrimitive.json | 10 +++ .../primitives/MenuPrimitive.json | 16 +++++ .../amplify-ui-renderers/amplify-renderer.ts | 23 +++++++ packages/codegen-ui-react/lib/primitive.ts | 7 ++- .../lib/react-studio-template-renderer.ts | 4 ++ .../cypress/integration/generate-spec.ts | 2 + .../cypress/integration/primitives-spec.ts | 19 ++++++ .../src/PrimitivesTests.tsx | 10 +++ .../primitives/MenuButtonPrimitive.json | 10 +++ .../components/primitives/MenuPrimitive.json | 16 +++++ .../lib/components/primitives/index.ts | 2 + 14 files changed, 194 insertions(+), 2 deletions(-) create mode 100644 packages/codegen-ui-react/lib/__tests__/studio-ui-json/primitives/MenuButtonPrimitive.json create mode 100644 packages/codegen-ui-react/lib/__tests__/studio-ui-json/primitives/MenuPrimitive.json create mode 100644 packages/test-generator/lib/components/primitives/MenuButtonPrimitive.json create mode 100644 packages/test-generator/lib/components/primitives/MenuPrimitive.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 04723af12..11b54a5ee 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 @@ -5298,6 +5298,69 @@ export default function unknown_component_name( " `; +exports[`amplify render tests primitives Menu 1`] = ` +"/* eslint-disable */ +import React from \\"react\\"; +import { + EscapeHatchProps, + getOverrideProps, +} from \\"@aws-amplify/ui-react/internal\\"; +import { Menu, MenuItem, MenuProps } from \\"@aws-amplify/ui-react\\"; + +export type MenuPrimitiveProps = React.PropsWithChildren< + Partial & { + overrides?: EscapeHatchProps | undefined | null; + } +>; +export default function MenuPrimitive( + props: MenuPrimitiveProps +): React.ReactElement { + const { overrides: overridesProp, ...rest } = props; + const overrides = { ...overridesProp }; + return ( + /* @ts-ignore: TS2322 */ + + + + ); +} +" +`; + +exports[`amplify render tests primitives MenuButton 1`] = ` +"/* eslint-disable */ +import React from \\"react\\"; +import { + EscapeHatchProps, + getOverrideProps, +} from \\"@aws-amplify/ui-react/internal\\"; +import { ButtonProps, MenuButton } from \\"@aws-amplify/ui-react\\"; + +export type MenuButtonPrimitiveProps = React.PropsWithChildren< + Partial & { + overrides?: EscapeHatchProps | undefined | null; + } +>; +export default function MenuButtonPrimitive( + props: MenuButtonPrimitiveProps +): React.ReactElement { + const { overrides: overridesProp, ...rest } = props; + const overrides = { ...overridesProp }; + return ( + /* @ts-ignore: TS2322 */ + + ); +} +" +`; + exports[`amplify render tests primitives SliderField 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 5b86fab0c..b38836451 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 @@ -34,6 +34,12 @@ exports[`Primitives Link 1`] = `""`; +exports[`Primitives Menu 1`] = `""`; + +exports[`Primitives MenuButton 1`] = `""`; + +exports[`Primitives MenuItem 1`] = `""`; + exports[`Primitives Pagination 1`] = `""`; exports[`Primitives PasswordField 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 17d039b66..6c9b2ce2a 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 @@ -447,6 +447,14 @@ describe('amplify render tests', () => { test('Table', () => { expect(generateWithAmplifyRenderer('primitives/TablePrimitive').componentText).toMatchSnapshot(); }); + + test('Menu', () => { + expect(generateWithAmplifyRenderer('primitives/MenuPrimitive').componentText).toMatchSnapshot(); + }); + + test('MenuButton', () => { + expect(generateWithAmplifyRenderer('primitives/MenuButtonPrimitive').componentText).toMatchSnapshot(); + }); }); describe('icon-indices', () => { diff --git a/packages/codegen-ui-react/lib/__tests__/studio-ui-json/primitives/MenuButtonPrimitive.json b/packages/codegen-ui-react/lib/__tests__/studio-ui-json/primitives/MenuButtonPrimitive.json new file mode 100644 index 000000000..8bc03e9ee --- /dev/null +++ b/packages/codegen-ui-react/lib/__tests__/studio-ui-json/primitives/MenuButtonPrimitive.json @@ -0,0 +1,10 @@ +{ + "id": "1234-5678-9010", + "componentType": "MenuButton", + "name": "MenuButtonPrimitive", + "properties": { + "label": { + "value": "Menu Button" + } + } +} diff --git a/packages/codegen-ui-react/lib/__tests__/studio-ui-json/primitives/MenuPrimitive.json b/packages/codegen-ui-react/lib/__tests__/studio-ui-json/primitives/MenuPrimitive.json new file mode 100644 index 000000000..ce2d27f66 --- /dev/null +++ b/packages/codegen-ui-react/lib/__tests__/studio-ui-json/primitives/MenuPrimitive.json @@ -0,0 +1,16 @@ +{ + "id": "1234-5678-9010", + "componentType": "Menu", + "name": "MenuPrimitive", + "properties": {}, + "children": [ + { + "componentType": "MenuItem", + "properties": { + "label": { + "value": "Item" + } + } + } + ] +} 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 31abeea64..b3d2d1b81 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 @@ -33,6 +33,8 @@ import { ImageProps, LinkProps, LoaderProps, + MenuItemProps, + MenuProps, PaginationProps, PasswordFieldProps, PhoneNumberFieldProps, @@ -206,6 +208,27 @@ export class AmplifyRenderer extends ReactStudioTemplateRenderer { parent, ).renderElement(renderChildren); + case Primitive.MenuButton: + return new ReactComponentWithChildrenRenderer( + component, + this.importCollection, + parent, + ).renderElement(renderChildren); + + case Primitive.MenuItem: + return new ReactComponentWithChildrenRenderer( + component, + this.importCollection, + parent, + ).renderElement(renderChildren); + + case Primitive.Menu: + return new ReactComponentWithChildrenRenderer( + component, + this.importCollection, + parent, + ).renderElement(renderChildren); + case Primitive.Pagination: return new ReactComponentWithChildrenRenderer( component, diff --git a/packages/codegen-ui-react/lib/primitive.ts b/packages/codegen-ui-react/lib/primitive.ts index 8985b76a9..b0e407a6a 100644 --- a/packages/codegen-ui-react/lib/primitive.ts +++ b/packages/codegen-ui-react/lib/primitive.ts @@ -34,6 +34,9 @@ enum Primitive { Image = 'Image', Link = 'Link', Loader = 'Loader', + Menu = 'Menu', + MenuButton = 'MenuButton', + MenuItem = 'MenuItem', Pagination = 'Pagination', PasswordField = 'PasswordField', PhoneNumberField = 'PhoneNumberField', @@ -75,8 +78,8 @@ export const PrimitiveChildrenPropMapping: Partial> = [Primitive.Button]: 'label', [Primitive.Heading]: 'label', [Primitive.Link]: 'label', - // [Primitive.MenuButton]: 'label', - // [Primitive.MenuItem]: 'label', + [Primitive.MenuButton]: 'label', + [Primitive.MenuItem]: 'label', [Primitive.Radio]: 'label', [Primitive.TableCell]: 'label', [Primitive.Text]: 'label', diff --git a/packages/codegen-ui-react/lib/react-studio-template-renderer.ts b/packages/codegen-ui-react/lib/react-studio-template-renderer.ts index cd026404f..26416a4ce 100644 --- a/packages/codegen-ui-react/lib/react-studio-template-renderer.ts +++ b/packages/codegen-ui-react/lib/react-studio-template-renderer.ts @@ -1073,6 +1073,10 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer if (isBuiltInIcon(component.componentType)) { return 'IconProps'; } + // MenuButton primitive uses ButtonProps + if (component.componentType === Primitive.MenuButton) { + return 'ButtonProps'; + } return `${component.componentType}Props`; } 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 828053cf7..8bf82f113 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 @@ -80,6 +80,8 @@ const EXPECTED_SUCCESSFUL_CASES = new Set([ 'ImagePrimitive', 'LinkPrimitive', 'LoaderPrimitive', + 'MenuButtonPrimitive', + 'MenuPrimitive', 'PaginationPrimitive', 'PasswordFieldPrimitive', 'PhoneNumberFieldPrimitive', 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 417f2e419..34446ce43 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 @@ -165,6 +165,25 @@ describe('Primitives', () => { }); }); + describe('Menu', () => { + it('Basic', () => { + cy.get('#menu') + .find('.amplify-menu-trigger') + .find('path') + .should('have.attr', 'd', 'M3 18H21V16H3V18ZM3 13H21V11H3V13ZM3 6V8H21V6H3Z'); + + cy.get('.amplify-menu-content__item').should('not.exist'); + cy.get('#menu').find('.amplify-menu-trigger').click(); + cy.get('.amplify-menu-content__item').should('have.text', 'Item'); + }); + }); + + describe('MenuButton', () => { + it('Basic', () => { + cy.get('#menu-button').find('.amplify-button').should('have.text', 'Menu Button'); + }); + }); + describe('Pagination', () => { it('Basic', () => { cy.get('#pagination') diff --git a/packages/test-generator/integration-test-templates/src/PrimitivesTests.tsx b/packages/test-generator/integration-test-templates/src/PrimitivesTests.tsx index 77aa419c5..890a2b53e 100644 --- a/packages/test-generator/integration-test-templates/src/PrimitivesTests.tsx +++ b/packages/test-generator/integration-test-templates/src/PrimitivesTests.tsx @@ -33,6 +33,8 @@ import { ImagePrimitive, LinkPrimitive, LoaderPrimitive, + MenuButtonPrimitive, + MenuPrimitive, PaginationPrimitive, PasswordFieldPrimitive, PhoneNumberFieldPrimitive, @@ -123,6 +125,14 @@ export default function PrimitivesTests() { Loader + + Menu + + + + Menu Button + + Pagination diff --git a/packages/test-generator/lib/components/primitives/MenuButtonPrimitive.json b/packages/test-generator/lib/components/primitives/MenuButtonPrimitive.json new file mode 100644 index 000000000..8bc03e9ee --- /dev/null +++ b/packages/test-generator/lib/components/primitives/MenuButtonPrimitive.json @@ -0,0 +1,10 @@ +{ + "id": "1234-5678-9010", + "componentType": "MenuButton", + "name": "MenuButtonPrimitive", + "properties": { + "label": { + "value": "Menu Button" + } + } +} diff --git a/packages/test-generator/lib/components/primitives/MenuPrimitive.json b/packages/test-generator/lib/components/primitives/MenuPrimitive.json new file mode 100644 index 000000000..ce2d27f66 --- /dev/null +++ b/packages/test-generator/lib/components/primitives/MenuPrimitive.json @@ -0,0 +1,16 @@ +{ + "id": "1234-5678-9010", + "componentType": "Menu", + "name": "MenuPrimitive", + "properties": {}, + "children": [ + { + "componentType": "MenuItem", + "properties": { + "label": { + "value": "Item" + } + } + } + ] +} diff --git a/packages/test-generator/lib/components/primitives/index.ts b/packages/test-generator/lib/components/primitives/index.ts index caf74e033..28656b17a 100644 --- a/packages/test-generator/lib/components/primitives/index.ts +++ b/packages/test-generator/lib/components/primitives/index.ts @@ -29,6 +29,8 @@ export { default as IconPrimitive } from './IconPrimitive.json'; export { default as ImagePrimitive } from './ImagePrimitive.json'; export { default as LinkPrimitive } from './LinkPrimitive.json'; export { default as LoaderPrimitive } from './LoaderPrimitive.json'; +export { default as MenuButtonPrimitive } from './MenuButtonPrimitive.json'; +export { default as MenuPrimitive } from './MenuPrimitive.json'; export { default as PaginationPrimitive } from './PaginationPrimitive.json'; export { default as PasswordFieldPrimitive } from './PasswordFieldPrimitive.json'; export { default as PhoneNumberFieldPrimitive } from './PhoneNumberFieldPrimitive.json';