Visual Designer - UI components

[Amzani]

Problem

We want to Let people quickly start authoring AsyncAPI documents without having to learn the AsyncAPI syntax and nuances, we're adding a visual designer. Essentially, this is just a UI to help you edit your AsyncAPI file. It takes the AsyncAPI document as input and outputs a new one with the changes you make on the UI. That's it. No more, no less.

Play with the interactive Figma prototype here: https://www.figma.com/proto/bPMB3lkMTOOMuKk0oGLuNm/Studio?type=design&node-id=96-2392&scaling=contain&page-id=0%3A1&starting-point-node-id=2%3A2.

To achieve that we would like to first create UI components in the design system, once the new architecture with NextJS app is ready by @Shurtu-gal we start iterating on that in the next cycles.

Solution

Add Visual designer UI components in the design system (location apps/design-system)

Rabbit holes

Nothing identified as Rabbit holes

Scope

• Visual Designer: Card component #749
• Visual Designer: Form component #752
• Visual Designer: ChipInput component #753
• Visual Designer: Card interactions #754
• Visual Designer: Message schema #755
• Improve JSON Schema Editor #1105

Out of bounds

No response

Success criteria

No response

[shapeit-bot]

Thanks for creating a new pitch 🥳. You can now create or link existing scopes.
You can create new scopes in two different ways:

Option 1

1. Edit the Pitch or Bet issue
2. Add your scope under the scope section

See this example

Option 2

1. Create a new issue
2. Add this keywork in the description related to #ISSUE_BET_NUMBER

See this example

[VivekJaiswal18]

@Amzani I am interested in taking this issue can I work on the remaining 3 issues - #752, #754, #755.

[princerajpoot20]

@VivekJaiswal18 752 and 755 are already in progress. You can go ahead with #754 .

[VivekJaiswal18]

@princerajpoot20 Okay thanks!