feat: split conditions and rules into separate tabs, refactor schema component

[catosaurusrex2003]

The problem

The current schema UI assumes a deep understanding of the AsyncAPI specification, making it difficult for many users to interpret. Since schemas can be recursive and heavily nested with various properties, the complexity often becomes overwhelming and unintuitive.

The solution

This PR introduces a new UI structure that splits schema properties into two logical sections: Rules and Conditions, making the documentation easier to understand and navigate.

Reference: AsyncAPI Schema Object (v3.0.0)

The properties which come under the Rules section are:
format, pattern, constraints, contentEncoding, enum, default, const

The properties which come under the Conditions section are:
oneOf, anyOf, allOf, not, propertyNames, contains, if, then, else, dependentSchemas

All other properties remain in their original positions.

A tabbed interface now allows users to toggle between Rules and Conditions. This design reduces visual clutter and helps users digest smaller, relevant portions of the schema at a time.

Visual Comparison

Old schema UI 👇

New implementation - Rules tab 👇

New implementation - Conditions tab 👇

New implementation - Conditions tab and expand all 👇

Alternative approaches explored
We initially considered a sidebar-based layout as demonstrated here that separated Rules and Conditions spatially. However, it introduced several issues:.

• Significant empty space when one section had more items than the other.

Without sidebar 👇 :

With sidebar 👇 : (you can notice how the empty spaces in red which is very unoptimal)

• Reduced horizontal space for nested schemas
• Poor responsiveness on smaller screens

After discussions with @AceTheCreator we opted for the tabbed layout, which offers better responsiveness, clarity, and overall user experience.

Other changes

• The existing library/src/components/Schema.tsx has been refactored into smaller, modular components under a new library/src/components/Schema/ directory for better maintainability and readability.

• Updated the way constraints are displayed: ranges like [0..1000] are now represented in a more intuitive format as 1 <= value <= 1000 for better readability.

• Updated the start and build:styles:dev script to include all the available tailwind styles during development. This ensures that when you add a new Tailwind class (even one not yet used anywhere else in the project), you don’t need to rebuild the styles manually. The new styles are already available in default.min.css, so changes take effect instantly through hot reloading — speeding up the development workflow.

Source/Inspiration

#618
https://www.asmitbm.me/projects/asyncapi-docsux

This PR is part of https://github.com/orgs/asyncapi/discussions/1361#discussioncomment-10811342

[AceTheCreator]

@catosaurusrex2003 one test is failing

[catosaurusrex2003]

@catosaurusrex2003 one test is failing

@AceTheCreator yeah the test are failing due to the new changes and it requires for the test to be modified.
I was waiting for my changes to be finalized then I can modify the tests according to it.

[sonarqubecloud]

Quality Gate passed

Issues
18 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[sonarqubecloud]

Quality Gate passed

Issues
18 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[catosaurusrex2003]

@AceTheCreator
I updated the scripts and added description for it.

[github-actions]

This pull request has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this pull request, add a comment with detailed explanation.

There can be many reasons why some specific pull request has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this pull request forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[catosaurusrex2003]

still relevant