-
-
Notifications
You must be signed in to change notification settings - Fork 637
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: migrate asyncapi3comparison and tabs (#2769)
Co-authored-by: Akshat Nema <[email protected]>
- Loading branch information
1 parent
4c71bef
commit 39a73bb
Showing
8 changed files
with
727 additions
and
0 deletions.
There are no files selected for viewing
136 changes: 136 additions & 0 deletions
136
components/Asyncapi3Comparison/Asyncapi3ChannelComparison.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| import React, { useState } from 'react'; | ||
|
|
||
| export interface HoverState { | ||
| Paths: boolean; | ||
| PathItem: boolean; | ||
| Operation: boolean; | ||
| Message: boolean; | ||
| } | ||
|
|
||
| export interface AsyncAPI3ChannelComparisonProps { | ||
| className?: string; | ||
| } | ||
|
|
||
| /** | ||
| * @description Component to compare AsyncAPI 2.x and AsyncAPI 3.0 channels. | ||
| * @param {string} [props.className=''] - Additional CSS classes for styling. | ||
| */ | ||
| export default function Asyncapi3ChannelComparison({ className = '' }: AsyncAPI3ChannelComparisonProps) { | ||
| const [hoverState, setHoverState] = useState<HoverState>({ | ||
| Paths: false, | ||
| PathItem: false, | ||
| Operation: false, | ||
| Message: false | ||
| }); | ||
|
|
||
| const handleMouseEnter = (key: keyof HoverState) => { | ||
| setHoverState((prevState) => ({ ...prevState, [key]: true })); | ||
| }; | ||
|
|
||
| const handleMouseLeave = (key: keyof HoverState) => { | ||
| setHoverState((prevState) => ({ ...prevState, [key]: false })); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className={`${className} flex flex-col flex-wrap gap-1 text-center md:flex-row`}> | ||
| <div className='ml-1 flex-1 border border-black p-2'> | ||
| <h3 className='mb-4 ml-2 font-sans text-lg font-medium'>AsyncAPI 2.x</h3> | ||
| <div> | ||
| <div | ||
| className={`${hoverState.Paths ? 'bg-yellow-100' : ' '} m-2 border border-yellow-300 p-2`} | ||
| onMouseEnter={() => handleMouseEnter('Paths')} | ||
| onMouseLeave={() => handleMouseLeave('Paths')} | ||
| > | ||
| Channels | ||
| <div className='flex flex-1 flex-wrap'> | ||
| <div | ||
| className={`${hoverState.PathItem ? 'bg-yellow-300' : 'bg-white'} m-2 border border-yellow-600 p-2`} | ||
| onMouseOver={() => handleMouseEnter('PathItem')} | ||
| onMouseLeave={() => handleMouseLeave('PathItem')} | ||
| > | ||
| Channel Item | ||
| <div className='flex flex-1 flex-wrap'> | ||
| <div | ||
| className={`${hoverState.Operation ? 'bg-orange-100' : 'bg-white '} m-2 flex-1 border border-orange-300 p-2`} | ||
| onMouseOver={() => handleMouseEnter('Operation')} | ||
| onMouseLeave={() => handleMouseLeave('Operation')} | ||
| > | ||
| Operation (Publish and Subscribe) | ||
| <div className='flex flex-1 flex-col flex-wrap'> | ||
| <div className='flex flex-1 flex-wrap'> | ||
| <div | ||
| className={`${hoverState.Message ? 'bg-red-400' : 'bg-white'} m-2 flex-1 border border-red-600 p-2`} | ||
| onMouseEnter={() => handleMouseEnter('Message')} | ||
| onMouseLeave={() => handleMouseLeave('Message')} | ||
| > | ||
| Messages | ||
| <div className='m-2 mr-1 box-border flex-1 border border-black p-2'> | ||
| Message | ||
| <div className='m-2 mr-1 box-border flex-1 border border-black p-2'>Headers</div> | ||
| <div className='m-2 mr-1 box-border flex-1 border border-black p-2'>Payload</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className='ml-1 flex-1 border border-black p-2'> | ||
| <h3 className='mb-4 ml-2 font-sans text-lg font-medium'>AsyncAPI 3.0</h3> | ||
| <div> | ||
| <div | ||
| className={`${hoverState.Paths ? 'bg-yellow-100' : ' '} m-2 border border-yellow-300 p-2`} | ||
| onMouseEnter={() => handleMouseEnter('Paths')} | ||
| onMouseLeave={() => handleMouseLeave('Paths')} | ||
| > | ||
| Channels | ||
| <div | ||
| className={`${hoverState.PathItem ? 'bg-yellow-300' : 'bg-white'} m-2 border border-yellow-600 p-2`} | ||
| onMouseOver={() => handleMouseEnter('PathItem')} | ||
| onMouseLeave={() => handleMouseLeave('PathItem')} | ||
| > | ||
| Channel | ||
| <div className='flex flex-1 flex-col flex-wrap'> | ||
| <div | ||
| className={`${hoverState.Message ? 'bg-red-400' : 'bg-white'} m-2 flex-1 border border-red-600 p-2`} | ||
| onMouseEnter={() => handleMouseEnter('Message')} | ||
| onMouseLeave={() => handleMouseLeave('Message')} | ||
| > | ||
| Messages | ||
| <div className='m-2 mr-1 box-border flex-1 border border-black p-2'> | ||
| Message | ||
| <div className='m-2 mr-1 box-border flex-1 border border-black p-2'>Headers</div> | ||
| <div className='m-2 mr-1 box-border flex-1 border border-black p-2'>Payload</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div | ||
| className={`${hoverState.Operation ? 'bg-yellow-100' : ' '} m-2 border border-yellow-300 p-2`} | ||
| onMouseEnter={() => handleMouseEnter('Operation')} | ||
| onMouseLeave={() => handleMouseLeave('Operation')} | ||
| > | ||
| Operations | ||
| <div className='flex flex-1 flex-wrap'> | ||
| <div className='m-2 flex-1 border border-orange-300 p-2'> | ||
| Operation | ||
| <div className='flex flex-1 flex-col flex-wrap'> | ||
| <div className='m-2 border border-blue-500 bg-white p-2 hover:bg-blue-200'> | ||
| action (send or receive) | ||
| </div> | ||
| <div className='m-2 border border-blue-500 bg-white p-2 hover:bg-blue-200'>channel</div> | ||
| <div className='m-2 border border-blue-500 bg-white p-2 hover:bg-blue-200'>messages</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
75 changes: 75 additions & 0 deletions
75
components/Asyncapi3Comparison/Asyncapi3IdAndAddressComparison.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import React, { useState } from 'react'; | ||
|
|
||
| export interface HoverState { | ||
| Paths: boolean; | ||
| PathItem: boolean; | ||
| } | ||
|
|
||
| export interface AsyncAPI3IdAndAddressComparisonProps { | ||
| className?: string; | ||
| } | ||
|
|
||
| /** | ||
| * @description Component for comparing AsyncAPI versions based on ID and address. | ||
| * @param {string} [props.className=''] - Additional CSS classes for styling. | ||
| */ | ||
| export default function Asyncapi3IdAndAddressComparison({ className = '' }: AsyncAPI3IdAndAddressComparisonProps) { | ||
| const [hoverState, setHoverState] = useState<HoverState>({ | ||
| Paths: false, | ||
| PathItem: false | ||
| }); | ||
|
|
||
| const handleMouseEnter = (key: keyof HoverState) => { | ||
| setHoverState((prevState) => ({ ...prevState, [key]: true })); | ||
| }; | ||
|
|
||
| const handleMouseLeave = (key: keyof HoverState) => { | ||
| setHoverState((prevState) => ({ ...prevState, [key]: false })); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className={`${className} flex flex-col flex-wrap gap-1 text-center md:flex-row`}> | ||
| <div className='ml-1 flex-1 border border-black p-2'> | ||
| <h3 className='mb-4 ml-2 font-sans text-lg font-medium'>AsyncAPI 2.x</h3> | ||
| <div> | ||
| <div | ||
| className={`${hoverState.Paths ? 'bg-yellow-100' : ' '}m-2 border border-yellow-300 p-2`} | ||
| onMouseEnter={() => handleMouseEnter('Paths')} | ||
| onMouseLeave={() => handleMouseLeave('Paths')} | ||
| > | ||
| Channels | ||
| <div | ||
| className={`${hoverState.PathItem ? 'bg-yellow-300' : 'bg-white'}m-2 border border-yellow-600 p-2`} | ||
| onMouseOver={() => handleMouseEnter('PathItem')} | ||
| onMouseLeave={() => handleMouseLeave('PathItem')} | ||
| > | ||
| Channel Item | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className='ml-1 flex-1 border border-black p-2'> | ||
| <h3 className='mb-4 ml-2 font-sans text-lg font-medium'>AsyncAPI 3.0</h3> | ||
| <div> | ||
| <div | ||
| className={`${hoverState.Paths ? 'bg-yellow-100' : ' '}m-2 border border-yellow-300 p-2`} | ||
| onMouseEnter={() => handleMouseEnter('Paths')} | ||
| onMouseLeave={() => handleMouseLeave('Paths')} | ||
| > | ||
| Channels | ||
| <div | ||
| className={`${hoverState.PathItem ? 'bg-yellow-300' : 'bg-white'}m-2 border border-yellow-600 p-2`} | ||
| onMouseOver={() => handleMouseEnter('PathItem')} | ||
| onMouseLeave={() => handleMouseLeave('PathItem')} | ||
| > | ||
| Channel | ||
| <div className='flex flex-1 flex-col flex-wrap'> | ||
| <div className='m-2 border border-blue-500 bg-white p-2 hover:bg-blue-200'>address</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
84 changes: 84 additions & 0 deletions
84
components/Asyncapi3Comparison/Asyncapi3MetaComparison.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import React, { useState } from 'react'; | ||
|
|
||
| export interface Asyncapi3MetaComparisonProps { | ||
| className?: string; | ||
| } | ||
|
|
||
| export interface HoverState { | ||
| Info: boolean; | ||
| Tags: boolean; | ||
| External: boolean; | ||
| } | ||
|
|
||
| /** | ||
| * @description React component for comparing AsyncAPI metadata between versions 2.x and 3.0. | ||
| * @param {string} [props.className=''] - Additional CSS classes for styling. | ||
| */ | ||
| export default function Asyncapi3MetaComparison({ className = '' }: Asyncapi3MetaComparisonProps) { | ||
| const [hoverState, setHoverState] = useState<HoverState>({ | ||
| Info: false, | ||
| Tags: false, | ||
| External: false | ||
| }); | ||
|
|
||
| return ( | ||
| <div className={`${className} flex flex-col flex-wrap gap-1 text-center md:flex-row`}> | ||
| <div className='ml-1 flex-1 border border-black p-2'> | ||
| <h3 className='mb-4 ml-2 font-sans text-lg font-medium'>AsyncAPI 2.x</h3> | ||
| <div> | ||
| <div | ||
| className={`${hoverState.Info ? 'bg-blue-100 ' : ' '}m-2 border border-blue-300 p-2`} | ||
| onMouseOver={() => setHoverState((prevState) => ({ ...prevState, Info: true }))} | ||
| onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, Info: false }))} | ||
| > | ||
| Info | ||
| </div> | ||
| <div className='flex flex-1 flex-wrap'> | ||
| <div | ||
| className={`${hoverState.Tags ? 'bg-pink-300' : ' '} m-2 flex flex-1 items-center justify-center border border-black p-2`} | ||
| onMouseOver={() => setHoverState((prevState) => ({ ...prevState, Tags: true }))} | ||
| onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, Tags: false }))} | ||
| > | ||
| <p>Tags</p> | ||
| </div> | ||
| <div | ||
| className={`${hoverState.External ? 'bg-green-500' : ' '} m-2 flex flex-1 items-center justify-center border border-black p-2`} | ||
| onMouseOver={() => setHoverState((prevState) => ({ ...prevState, External: true }))} | ||
| onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, External: false }))} | ||
| > | ||
| <p>External Docs</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className='ml-1 flex-1 border border-black p-2'> | ||
| <h3 className='mb-4 ml-2 font-sans text-lg font-medium'>AsyncAPI 3.0</h3> | ||
| <div> | ||
| <div | ||
| className={`${hoverState.Info ? 'bg-blue-100 ' : ' '}m-2 border border-blue-300 p-2`} | ||
| onMouseOver={() => setHoverState((prevState) => ({ ...prevState, Info: true }))} | ||
| onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, Info: false }))} | ||
| > | ||
| Info | ||
| <div className='flex flex-1 flex-wrap'> | ||
| <div | ||
| className={`${hoverState.Tags ? 'bg-pink-300' : ' '} m-2 flex flex-1 items-center justify-center border border-black p-2`} | ||
| onMouseOver={() => setHoverState((prevState) => ({ ...prevState, Tags: true }))} | ||
| onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, Tags: false }))} | ||
| > | ||
| <p>Tags</p> | ||
| </div> | ||
| <div | ||
| className={`${hoverState.External ? 'bg-green-500' : ' '} m-2 flex flex-1 items-center justify-center border border-black p-2`} | ||
| onMouseOver={() => setHoverState((prevState) => ({ ...prevState, External: true }))} | ||
| onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, External: false }))} | ||
| > | ||
| <p>External Docs</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
48 changes: 48 additions & 0 deletions
48
components/Asyncapi3Comparison/Asyncapi3OperationComparison.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import React from 'react'; | ||
|
|
||
| export interface Asyncapi3OperationComparisonProps { | ||
| className?: string; | ||
| } | ||
|
|
||
| /** | ||
| * @description React component for comparing AsyncAPI operations between versions 2.x and 3.0. | ||
| * @param {string} [props.className=''] - Additional CSS classes for styling. | ||
| */ | ||
| export default function Asyncapi3OperationComparison({ className = '' }: Asyncapi3OperationComparisonProps) { | ||
| return ( | ||
| <div className={`${className} flex flex-col flex-wrap gap-1 text-center md:flex-row`}> | ||
| <div className='ml-1 flex-1 border border-black p-2'> | ||
| <h3 className='mb-4 ml-2 font-sans text-lg font-medium'>AsyncAPI 2.x</h3> | ||
| <div> | ||
| <div className='m-2 border border-yellow-300 p-2'> | ||
| Channels | ||
| <div className='flex flex-1 flex-wrap'> | ||
| <div className='m-2 border border-yellow-600 p-2'> | ||
| Channel Item | ||
| <div className='flex flex-1 flex-wrap'> | ||
| <div className='m-2 flex-1 border border-orange-300 p-2'>Operation (Publish and Subscribe)</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className='ml-1 flex-1 border border-black p-2'> | ||
| <h3 className='mb-4 ml-2 font-sans text-lg font-medium'>AsyncAPI 3.0</h3> | ||
| <div> | ||
| <div className='m-2 border border-yellow-300 p-2'> | ||
| Operations | ||
| <div className='flex flex-1 flex-wrap'> | ||
| <div className='m-2 flex-1 border border-orange-300 p-2'> | ||
| Operation | ||
| <div className='flex flex-1 flex-col flex-wrap'> | ||
| <div className='m-2 border border-blue-500 bg-white p-2'>action (send or receive)</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.