Skip to content

Commit

Permalink
chore: add parameter section in migration (#2293)
Browse files Browse the repository at this point in the history 
Co-authored-by: Alejandra Quetzalli <[email protected]>
  • Loading branch information
@jonaslagoni @quetzalliwrites
jonaslagoni and quetzalliwrites authored Nov 29, 2023
1 parent cad95b9 commit c77af4d
Show file tree
Hide file tree
Showing 2 changed files with 164 additions and 177 deletions.
283 changes: 111 additions & 172 deletions components/Asyncapi3Comparison.js
View file
Original file line number Diff line number Diff line change
@@ -1,174 +1,5 @@
import React, { useState } from 'react';

/**
* Main comparison that shows the full picture between v2 and v3
*/
export function Asyncapi3Comparison({ className = '' }) {
const [hoverState, setHoverState] = useState({
Info: false,
Servers: false,
Paths: false,
PathItem: true,
Summary: false,
Operation: false,
Message: false,
Tags: false,
External: false,
Components: false,
Id: false,
Path: false,
Host: false
});

return (
<div className={`${className} flex flex-col md:flex-row gap-1 flex-wrap text-center`}>
<div className="flex-1 border border-black p-2 ml-1">
<h3 className="text-lg font-sans font-medium mb-4 ml-2">AsyncAPI 2.x</h3>

<div>
<div className={(hoverState.Info ? `bg-blue-100 ` : ' ') + 'border border-blue-300 p-2 m-2'} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Info: true }))} onMouseLeave={() => setHoverState({ Info: false })}>
Info
</div>
<div className="flex flex-wrap flex-1">
<div className={(hoverState.Tags ? `bg-pink-300` : ' ') + ` flex items-center justify-center flex-1 border border-black p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Tags: true }))} onMouseLeave={() => setHoverState({ Tags: false })}>
<p>Tags</p>
</div>
<div className={(hoverState.External ? `bg-green-500` : ' ') + ` flex items-center justify-center flex-1 border border-black p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, External: true }))} onMouseLeave={() => setHoverState({ External: false })}>
<p>External Docs</p>
</div>
</div>
<div className="border border-blue-300 p-2 m-2">
Servers
<div className="flex flex-col flex-wrap flex-1">
<div className="border border-blue-600 p-2 m-2">
Server
<div className="flex flex-wrap flex-1">
<div className={(hoverState.Host || hoverState.Path ? `bg-pink-300` : ' ') + ` flex items-center justify-center flex-1 border border-black p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Host: true, Path: true }))} onMouseLeave={() => setHoverState({ Host: false, Path: false })}>
<p>Url</p>
</div>
</div>
</div>
</div>
</div>
<div className={(hoverState.Paths ? `bg-yellow-100` : ' ') + ` border border-yellow-300 p-2 m-2`} onMouseEnter={() => setHoverState(prevState => ({ ...prevState, Paths: true }))} onMouseLeave={() => setHoverState({ Paths: false })}>
Channels

<div className="flex flex-wrap flex-1">
<div className={(hoverState.PathItem ? `bg-yellow-300` : 'bg-white') + ` border border-yellow-600 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, PathItem: true }))} onMouseLeave={() => setHoverState({ PathItem: false })}>
Channel Item

<div className="flex flex-wrap flex-1">
<div className={(hoverState.Operation ? `bg-orange-100` : 'bg-white ') + ` flex-1 border border-orange-300 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Operation: true }))} onMouseLeave={() => setHoverState({ Operation: false })}>
Operation (Publish and Subscribe)

<div className="flex flex-col flex-wrap flex-1">
<div className="flex flex-wrap flex-1">
<div className={(hoverState.Message ? `bg-red-400` : 'bg-white') + ` flex-1 border border-red-600 p-2 m-2`} onMouseEnter={() => setHoverState(prevState => ({ ...prevState, Message: true }))} onMouseLeave={() => setHoverState({ Message: false })}>
Messages
<div className="flex-1 border border-black box-border mr-1 p-2 m-2">
Message

<div className="flex-1 border border-black box-border mr-1 p-2 m-2">
Headers
</div>
<div className="flex-1 border border-black box-border mr-1 p-2 m-2">
Payload
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="flex-1 border border-black p-2 ml-1">
<h3 className="text-lg font-sans font-medium mb-4 ml-2">AsyncAPI 3.0</h3>

<div>
<div className={(hoverState.Info ? `bg-blue-100 ` : ' ') + 'border border-blue-300 p-2 m-2'} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Info: true }))} onMouseLeave={() => setHoverState({ Info: false })}>
Info
<div className="flex flex-wrap flex-1">
<div className={(hoverState.Tags ? `bg-pink-300` : ' ') + ` flex items-center justify-center flex-1 border border-black p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Tags: true }))} onMouseLeave={() => setHoverState({ Tags: false })}>
<p>Tags</p>
</div>
<div className={(hoverState.External ? `bg-green-500` : ' ') + ` flex items-center justify-center flex-1 border border-black p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, External: true }))} onMouseLeave={() => setHoverState({ External: false })}>
<p>External Docs</p>
</div>
</div>
</div>
<div className="border border-blue-300 p-2 m-2">
Servers
<div className="flex flex-col flex-wrap flex-1">
<div className="border border-blue-600 p-2 m-2">
Server
<div className="flex flex-wrap flex-1">
<div className={(hoverState.Host ? `bg-pink-300` : ' ') + ` flex-1 border border-black box-border mr-1 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Host: true }))} onMouseLeave={() => setHoverState({ Host: false })}>
<p>Host</p>
</div>
<div className={(hoverState.Path ? `bg-pink-300` : ' ') + ` flex-1 border border-black box-border mr-1 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Path: true }))} onMouseLeave={() => setHoverState({ Path: false })}>
<p>Pathname</p>
</div>
</div>
</div>
</div>
</div>
<div className={(hoverState.Paths ? `bg-yellow-100` : ' ') + ` border border-yellow-300 p-2 m-2`} onMouseEnter={() => setHoverState(prevState => ({ ...prevState, Paths: true }))} onMouseLeave={() => setHoverState({ Paths: false })}>
Channels

<div className={(hoverState.PathItem ? `bg-yellow-300` : 'bg-white') + ` border border-yellow-600 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, PathItem: true }))} onMouseLeave={() => setHoverState({ PathItem: false })}>
Channel
<div className="flex flex-col flex-wrap flex-1">
<div className="border border-blue-500 bg-white hover:bg-blue-200 p-2 m-2">
address
</div>
<div className="flex flex-wrap flex-1">
<div className={(hoverState.Message ? `bg-red-400` : 'bg-white') + ` flex-1 border border-red-600 p-2 m-2`} onMouseEnter={() => setHoverState(prevState => ({ ...prevState, Message: true }))} onMouseLeave={() => setHoverState({ Message: false })}>
Messages
<div className="flex-1 border border-black box-border mr-1 p-2 m-2">
Message

<div className="flex-1 border border-black box-border mr-1 p-2 m-2">
Headers
</div>
<div className="flex-1 border border-black box-border mr-1 p-2 m-2">
Payload
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className={(hoverState.Operation ? `bg-yellow-100` : ' ') + ` border border-yellow-300 p-2 m-2`} onMouseEnter={() => setHoverState(prevState => ({ ...prevState, Operation: true }))} onMouseLeave={() => setHoverState({ Operation: false })}>
Operations
<div className="flex flex-wrap flex-1">
<div className="flex-1 border border-orange-300 p-2 m-2">
Operation

<div className="flex flex-col flex-wrap flex-1">
<div className="border border-blue-500 bg-white hover:bg-blue-200 p-2 m-2">
action (send or receive)
</div>
<div className="border border-blue-500 bg-white hover:bg-blue-200 p-2 m-2">
channel
</div>
<div className="border border-blue-500 bg-white hover:bg-blue-200 p-2 m-2">
messages
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div >
)
}

/**
* Used to compare how channels, operations and messages have changed
*/
Expand Down Expand Up @@ -482,7 +313,8 @@ export function Asyncapi3OperationComparison({ className = '' }) {
export function Asyncapi3SchemaFormatComparison({ className = '' }) {
const [hoverState, setHoverState] = useState({
SchemaFormat: false,
Payload: false
Payload: false,
Schema: false
});

return (
Expand All @@ -509,7 +341,7 @@ export function Asyncapi3SchemaFormatComparison({ className = '' }) {
<div className={(hoverState.Payload ? `bg-yellow-300` : 'bg-white') + ` flex-1 border border-yellow-600 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Payload: true }))} onMouseLeave={() => setHoverState({ Payload: false })}>
payload
<div className="flex flex-wrap flex-1">
<div className={'bg-white flex-1 border border-orange-300 p-2 m-2'}>
<div className={(hoverState.Schema ? `bg-blue-300` : 'bg-white') + ' flex-1 border border-orange-300 p-2 m-2'} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Schema: true }))} onMouseLeave={() => setHoverState({ Schema: false })}>
schema
</div>
</div>
Expand Down Expand Up @@ -544,7 +376,7 @@ export function Asyncapi3SchemaFormatComparison({ className = '' }) {
<div className={(hoverState.SchemaFormat ? `bg-orange-100` : 'bg-white ') + ` flex-1 border border-orange-300 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, SchemaFormat: true }))} onMouseLeave={() => setHoverState({ SchemaFormat: false })}>
schemaFormat
</div>
<div className={'bg-white flex-1 border border-orange-300 p-2 m-2'}>
<div className={(hoverState.Schema ? `bg-blue-300` : 'bg-white') + ' flex-1 border border-orange-300 p-2 m-2'} onMouseOver={() => setHoverState(prevState => ({ ...prevState, Schema: true }))} onMouseLeave={() => setHoverState({ Schema: false })}>
schema
</div>
</div>
Expand All @@ -560,3 +392,110 @@ export function Asyncapi3SchemaFormatComparison({ className = '' }) {
</div >
)
}

/**
* Compares how the parameter object changed location from v2 to v3
*/
export function Asyncapi3ParameterComparison({ className = '' }) {
const [hoverState, setHoverState] = useState({
location: false,
description: false,
enum: false,
examples: false,
default: false
});

return (
<div className={`${className} flex flex-col md:flex-row gap-1 flex-wrap text-center`}>
<div className="flex-1 border border-black p-2 ml-1">
<h3 className="text-lg font-sans font-medium mb-4 ml-2">AsyncAPI 2.x</h3>

<div>
<div className={'border border-yellow-300 p-2 m-2'}>
components | channels

<div className="flex flex-wrap flex-1">
<div className={'bg-white border border-yellow-600 p-2 m-2'}>
parameters

<div className="flex flex-wrap flex-1">
<div className={'bg-white border border-yellow-600 p-2 m-2'}>
parameter
<div className="flex flex-wrap flex-1">
<div className={(hoverState.location ? `bg-orange-300` : 'bg-white ') + ` flex-1 border border-orange-300 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, location: true }))} onMouseLeave={() => setHoverState({ location: false })}>
location
</div>
<div className={(hoverState.description ? `bg-orange-300` : 'bg-white ') + ` flex-1 border border-orange-300 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, description: true }))} onMouseLeave={() => setHoverState({ description: false })}>
description
</div>

<div className="flex-1 bg-white border border-yellow-600 p-2 m-2">
schema
<div className="flex flex-wrap flex-1">
<div className={'bg-white flex-1 bg-red-300 p-2 m-2'}>type</div>
<div className={(hoverState.enum ? `bg-orange-300` : 'bg-white ') + ` flex-1 border border-orange-300 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, enum: true }))} onMouseLeave={() => setHoverState({ enum: false })}>
enum
</div>
<div className={(hoverState.examples ? `bg-orange-300` : 'bg-white ') + ` flex-1 border border-orange-300 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, examples: true }))} onMouseLeave={() => setHoverState({ examples: false })}>
examples
</div>
<div className={(hoverState.default ? `bg-orange-300` : 'bg-white ') + ` flex-1 border border-orange-300 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, default: true }))} onMouseLeave={() => setHoverState({ default: false })}>
default
</div>
<div className={(hoverState.description ? `bg-orange-300` : 'bg-white ') + ` flex-1 border border-orange-300 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, description: true }))} onMouseLeave={() => setHoverState({ description: false })}>
description
</div>
<div className={'bg-white flex-1 bg-red-300 p-2 m-2'}>pattern</div>
<div className={'bg-white flex-1 bg-red-300 p-2 m-2'}>multipleOf</div>
<div className={'bg-white flex-1 bg-red-300 p-2 m-2'}>And all other properties</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="flex-1 border border-black p-2 ml-1">
<h3 className="text-lg font-sans font-medium mb-4 ml-2">AsyncAPI 3.0</h3>

<div>
<div className={'border border-yellow-300 p-2 m-2'}>
components | channels

<div className="flex flex-wrap flex-1">
<div className={'bg-white border border-yellow-600 p-2 m-2'}>
parameters

<div className="flex flex-wrap flex-1">
<div className={'bg-white border border-yellow-600 p-2 m-2'}>
parameter
<div className="flex flex-wrap flex-1">
<div className={(hoverState.location ? `bg-orange-300` : 'bg-white ') + ` flex-1 border border-orange-300 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, location: true }))} onMouseLeave={() => setHoverState({ location: false })}>
location
</div>
<div className={(hoverState.description ? `bg-orange-300` : 'bg-white ') + ` flex-1 border border-orange-300 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, description: true }))} onMouseLeave={() => setHoverState({ description: false })}>
description
</div>
<div className={(hoverState.enum ? `bg-orange-300` : 'bg-white ') + ` flex-1 border border-orange-300 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, enum: true }))} onMouseLeave={() => setHoverState({ enum: false })}>
enum
</div>
<div className={(hoverState.examples ? `bg-orange-300` : 'bg-white ') + ` flex-1 border border-orange-300 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, examples: true }))} onMouseLeave={() => setHoverState({ examples: false })}>
examples
</div>
<div className={(hoverState.default ? `bg-orange-300` : 'bg-white ') + ` flex-1 border border-orange-300 p-2 m-2`} onMouseOver={() => setHoverState(prevState => ({ ...prevState, default: true }))} onMouseLeave={() => setHoverState({ default: false })}>
default
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div >
)
}
Loading

0 comments on commit c77af4d

Please sign in to comment.