Create a Studio design system and UI kit

[Amzani]

Problem

What's the story exposing the problem the users are facing

To ease the development of Studio, we should create a UI kit and its corresponding design system. The idea is to facilitate developers to create new interfaces without having to reinvent the wheel (UI kit) and having to think too much about design decisions (design system).

Solution

Proposed solution with mockups, views...

• Both the design system and the UI kit should be provided as code instead of just Figma files. Figma files are encouraged tho, especially for early designs and feedback.
• They should contain the designs and components for typography, buttons, navigation, menus, modals, and all sort of things we do need in the UI.
• We should not add any components that we do not use. The idea is to provide a framework for us to speed things up not build yet another UI library.

Figma designs: https://www.figma.com/file/bPMB3lkMTOOMuKk0oGLuNm/Studio?type=design&node-id=0%3A1&t=5t1QnTliI6risXyA-1

Worth having a look at:

• https://www.radix-ui.com/
• https://ui.shadcn.com/docs/components/accordion (based on Radix above)
• https://headlessui.com/

Rabbit holes

Potential technical, design ... challenges

1. Integrating the design system into Studio (mono-repo) might be challenging, as we have to adapt the release process.

Scope

Describe a list of tasks or issues that needs to be done ( you don't need to have an exhaustive list of all the tasks in the beginning)

• chore: make it a monorepo with the design system #638
• Adapt Github Actions to make it work with monorepos #651
• Configure the design system to be deployed on the AsyncAPI Netlify account #665
• Define the basic design tokens #666
• Toolbar component #667
• Dropdown Menu component #668
• Protocol Icon component #669
• Operation Icon component #670
• Sidebar component #671
• Logo component #672
• Visual Editor / Code Editor Switch component #673
• SlideOver component #674

Other components that you see on the design are welcome but the ones above are the minimum components we're gonna need for the redesign of the Code Editor View (i.e., the current Studio).

Out of bounds

What won't be part of the scope

• It won't be needed to publish the UI kit as an npm package. We might explore this option down the track but let's keep it simple for now.
• The design system doesn't have to be ready to be demoed, i.e., it doesn't have to be beautiful or well explained yet. We're just getting started, let's focus on making it useful for the small group of people working on the project, for what's coming with the next Studio.
• It's ok if you want to start using the components in Studio already to see them in action but bear in mind Start using a React framework #661 is going to create a lot of git conflicts with your PR. Unless Start using a React framework #661 is merged, I'd not spend time doing it now because this can be a huge time and energy sucker.

Success criteria

How do we know we made a good bet

• https://github.com/orgs/asyncapi/projects/16/views/5?pane=issue&itemId=24118270

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.