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 I left some review :) Let's get this PR merged.

[AceTheCreator]

I think that'll be all from my end... I'm happy to chat about how best to represent these rules constraints especially in number types 😄

[AceTheCreator]

Hey @catosaurusrex2003 do you wanna look at the issues introduced by this PR from SonarCloud before we merge this PR? https://sonarcloud.io/project/issues?id=asyncapi_asyncapi-react&pullRequest=1121&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true

[catosaurusrex2003]

yeah ill fix these too 👍

[sonarqubecloud]

Quality Gate passed

Issues
0 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 done

[AceTheCreator]

LGTM! 🚀

Good job @catosaurusrex2003 🙌🏾

[AceTheCreator]

/rtm

[asyncapi-bot]

🎉 This PR is included in version 3.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀