Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: rewrite Schema component #269

Conversation

magicmatatjahu
Copy link
Member

@magicmatatjahu magicmatatjahu commented Mar 22, 2021

Description

Changes proposed in this pull request:

Rewrite Schema component:

  • Add new NewSchema component which will replace in next PRs old Schema component - I don't want to rewrite everything in one PR
    • support for combined schemas like oneOf, anyOf, allOf
    • handle additionalProperties and additionalItems
    • handle circular properties
  • Start rewriting styles to TailwindCSS - at the moment only used in NewSchema component.
  • Add dummy spec to Playground.

New look:

image

I know that some styles don't look nice, but this PR is only to "switch" to new way of rendering, styling will be done as part asyncapi/shape-up-process#86 in next PR.

Related issue(s)
Part of asyncapi/shape-up-process#87
Part of asyncapi/shape-up-process#86

@magicmatatjahu magicmatatjahu added enhancement New feature or request area/library Related to all activities around Library package labels Mar 22, 2021
Copy link
Member

@fmvilas fmvilas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking great in general. I'll help you with the styles 😄

schema?: Schema;
required?: boolean;
isCircular?: boolean;
odd?: boolean;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

odd looks weird to me. What does it mean that a prop is odd? (I know what it means, just want you to think about it from a different perspective).

Should this be called something like darkBackground or lightBackground or something like this? Something that refers more to what it actually does.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe this light/dark background thingy can be handled outside this component? For instance, the NewSchema component is transparent and the color of the background is handled in the parent component.

Copy link
Member Author

@magicmatatjahu magicmatatjahu Mar 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The odd I "copied" from HTML template and you probably understood what it is - it "checks" that another schema renders in another nested schema like oneOf or object as prop in another object. Of course we can call this nested or something like that, but HTML template do it in proper way - odd indicated also how nested schema is. darkBackground or lightBackground is good, but we should choose only one.

Maybe this light/dark background thingy can be handled outside this component? For instance, the NewSchema component is transparent and the color of the background is handled in the parent component.

The main problem with it are very nested schemas and style "wrappers" for them. Transparent of schema should works only for 'root' schema, not for nested. I will try to check something like:

.schema .schema {
 // light styles
}

.schema .schema .schema {
 // dark styles
}

Copy link
Member Author

@magicmatatjahu magicmatatjahu Mar 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I removed odd prop and made "odd" styles using pure css combinators.

@sonarqubecloud
Copy link

Kudos, SonarCloud Quality Gate passed!

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
No Duplication information No Duplication information

@magicmatatjahu
Copy link
Member Author

@fmvilas I think that you haven't problem with logic, but you had one, which i corrected. Let me merge, because PR itself blocks the rest of the things - channels and messages parts :) As if there are any bugs, we will fix them in next PRs.

@magicmatatjahu magicmatatjahu merged commit a3d9ebf into asyncapi:unify-component Mar 23, 2021
@magicmatatjahu magicmatatjahu deleted the rewrite-schema-component branch March 23, 2021 11:56
@fmvilas
Copy link
Member

fmvilas commented Mar 23, 2021

No, I have no other problems than the odd stuff. I'll jump on fixing what you did "the Tailwind way" instead of this hacky CSS 😄

@asyncapi-bot
Copy link
Contributor

🎉 This PR is included in version 0.21.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/library Related to all activities around Library package enhancement New feature or request released on @next
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants