feat: split conditions and rules into separate tabs, refactor schema component #1121
Conversation
…i-react into refactor-messages
…ad, split stuff into seperate components
catosaurusrex2003
requested review from
asyncapi-bot-eve and
AceTheCreator
as code owners
playground/app/page.tsx
Outdated
| // const defaultSchema = specs.overcomplicatedStreetlights; | ||
| // const defaultSchema = specs.complexSchema; |
There was a problem hiding this comment.
Don't forget to remove this commented lines
There was a problem hiding this comment.
Should I remove the newly added specs from playground/specs?
These specs were created purely for stress-testing the library and don’t reflect real-world use cases.
I can remove them to keep the repo clean or leave them for future reference in case someone needs it.
There was a problem hiding this comment.
Yea, you can leave till the PR is finalized 👍🏾
|
@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. |
catosaurusrex2003
force-pushed
the
refactor-messages
branch
from
6728f64 to
bbee4d9
Compare
…yncapi-react into refactor-messages
catosaurusrex2003
changed the title
catosaurusrex2003
changed the title
|
|
|
@AceTheCreator |
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
Rulessection are:format,pattern,constraints,contentEncoding,enum,default,constThe properties which come under the
Conditionssection are:oneOf,anyOf,allOf,not,propertyNames,contains,if,then,else,dependentSchemasAll 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:.
Without sidebar 👇 :
With sidebar 👇 : (you can notice how the empty spaces in red which is very unoptimal)
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.tsxhas been refactored into smaller, modular components under a newlibrary/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 as1 <= value <= 1000for better readability.Updated the
startandbuild:styles:devscript 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