From f1319779bf0d2e790aee9c65d0b7d593c05f7b7d Mon Sep 17 00:00:00 2001 From: Prince Rajpoot Date: Sat, 16 Sep 2023 21:00:32 +0530 Subject: [PATCH 1/4] feat: add client and server icon and rename ProtocolBadge to ServiceInfoBadge --- ...tories.tsx => ServiceInfoBadge.stories.tsx} | 16 ++++++++++++++-- ...{ProtocolBadge.tsx => ServiceInfoBadge.tsx} | 18 ++++++++++++++---- packages/ui/components/icons/ClientIcon.tsx | 16 ++++++++++++++++ packages/ui/components/icons/ServerIcon.tsx | 16 ++++++++++++++++ packages/ui/components/icons/index.tsx | 2 ++ packages/ui/components/index.tsx | 2 +- 6 files changed, 63 insertions(+), 7 deletions(-) rename apps/design-system/src/components/{ProtocolBadge.stories.tsx => ServiceInfoBadge.stories.tsx} (82%) rename packages/ui/components/{ProtocolBadge.tsx => ServiceInfoBadge.tsx} (76%) create mode 100644 packages/ui/components/icons/ClientIcon.tsx create mode 100644 packages/ui/components/icons/ServerIcon.tsx diff --git a/apps/design-system/src/components/ProtocolBadge.stories.tsx b/apps/design-system/src/components/ServiceInfoBadge.stories.tsx similarity index 82% rename from apps/design-system/src/components/ProtocolBadge.stories.tsx rename to apps/design-system/src/components/ServiceInfoBadge.stories.tsx index 85f65a085..86005cf48 100644 --- a/apps/design-system/src/components/ProtocolBadge.stories.tsx +++ b/apps/design-system/src/components/ServiceInfoBadge.stories.tsx @@ -1,8 +1,8 @@ /* eslint-disable import/no-anonymous-default-export */ -import { ProtocolBadge } from '@asyncapi/studio-ui' +import { ServiceInfoBadge } from '@asyncapi/studio-ui' export default { - component: ProtocolBadge, + component: ServiceInfoBadge, parameters: { backgrounds: { default: 'dark' @@ -16,6 +16,18 @@ export const HTTP = { } } +export const Server = { + args: { + protocol: 'server' + } +} + +export const Client = { + args: { + protocol: 'client' + } +} + export const Kafka = { args: { protocol: 'kafka' diff --git a/packages/ui/components/ProtocolBadge.tsx b/packages/ui/components/ServiceInfoBadge.tsx similarity index 76% rename from packages/ui/components/ProtocolBadge.tsx rename to packages/ui/components/ServiceInfoBadge.tsx index 0272cb746..bd1e2bb2f 100644 --- a/packages/ui/components/ProtocolBadge.tsx +++ b/packages/ui/components/ServiceInfoBadge.tsx @@ -1,12 +1,12 @@ import type { FunctionComponent } from 'react' -import { AMQPIcon, AWSSNSIcon, AWSSQSIcon, GooglePubSubIcon, IBMMQIcon, KafkaIcon, MQTTIcon, NATSIcon, PulsarIcon, RedisIcon, SolaceIcon, StompIcon, WebSocketIcon } from './icons' +import { AMQPIcon, AWSSNSIcon, AWSSQSIcon, ClientIcon, GooglePubSubIcon, IBMMQIcon, KafkaIcon, MQTTIcon, NATSIcon, PulsarIcon, RedisIcon, ServerIcon, SolaceIcon, StompIcon, WebSocketIcon } from './icons' -interface ProtocolBadgeProps { +interface ServiceInfoBadgeProps { className?: string - protocol: 'http' | 'kafka' | 'websocket' | 'amqp' | 'mqtt' | 'googlepubsub' | 'ibmmq' | 'nats' | 'pulsar' | 'redis' | 'sns' | 'sqs' | 'solace' | 'stomp' + protocol: 'http' | 'client' | 'server' | 'kafka' | 'websocket' | 'amqp' | 'mqtt' | 'googlepubsub' | 'ibmmq' | 'nats' | 'pulsar' | 'redis' | 'sns' | 'sqs' | 'solace' | 'stomp' } -export const ProtocolBadge: FunctionComponent = ({ +export const ServiceInfoBadge: FunctionComponent = ({ className = '', protocol, ...props @@ -21,6 +21,16 @@ export const ProtocolBadge: FunctionComponent = ({ colorName = 'cyan' // bg-cyan-100 text-cyan-900 content = HTTP break; + case 'client': + ariaLabel = 'Client' + colorName = 'orange' // bg-orange-100 text-orange-900 + content = + break; + case 'server': + ariaLabel = 'Server' + colorName = 'blue' // bg-blue-100 text-blue-900 + content = + break; case 'kafka': ariaLabel = 'Kafka' colorName = 'indigo' // bg-indigo-100 text-indigo-900 diff --git a/packages/ui/components/icons/ClientIcon.tsx b/packages/ui/components/icons/ClientIcon.tsx new file mode 100644 index 000000000..35d69dcaa --- /dev/null +++ b/packages/ui/components/icons/ClientIcon.tsx @@ -0,0 +1,16 @@ +const ClientIcon = (props: any) => ( + + + +); + +ClientIcon.displayName = 'ClientIcon'; + +export default ClientIcon; diff --git a/packages/ui/components/icons/ServerIcon.tsx b/packages/ui/components/icons/ServerIcon.tsx new file mode 100644 index 000000000..d7e78cd56 --- /dev/null +++ b/packages/ui/components/icons/ServerIcon.tsx @@ -0,0 +1,16 @@ +const ServerIcon = (props: any) => ( + + + +); + +ServerIcon.displayName = 'ServerIcon'; + +export default ServerIcon \ No newline at end of file diff --git a/packages/ui/components/icons/index.tsx b/packages/ui/components/icons/index.tsx index 4f9e673e3..9bbd645ba 100644 --- a/packages/ui/components/icons/index.tsx +++ b/packages/ui/components/icons/index.tsx @@ -24,6 +24,7 @@ export { export { default as AMQPIcon } from './AMQPIcon' export { default as AWSSNSIcon } from './AWSSNSIcon' export { default as AWSSQSIcon } from './AWSSQSIcon' +export { default as ClientIcon } from './ClientIcon' export { default as GooglePubSubIcon } from './GooglePubSubIcon' export { default as IBMMQIcon } from './IBMMQIcon' export { default as KafkaIcon } from './KafkaIcon' @@ -32,6 +33,7 @@ export { default as NATSIcon } from './NATSIcon' export { default as PulsarIcon } from './PulsarIcon' export { default as RedisIcon } from './RedisIcon' export { default as SealIcon } from './SealIcon' +export { default as ServerIcon } from './ServerIcon' export { default as SolaceIcon } from './SolaceIcon' export { default as StompIcon } from './StompIcon' export { default as WebSocketIcon } from './WebSocketIcon' diff --git a/packages/ui/components/index.tsx b/packages/ui/components/index.tsx index a0b5ab612..50e048646 100644 --- a/packages/ui/components/index.tsx +++ b/packages/ui/components/index.tsx @@ -7,7 +7,7 @@ export * from './DropdownMenu' export * from './Logo' export * from './Modal' export * from './OperationIcon' -export * from './ProtocolBadge' +export * from './ServiceInfoBadge' export * from './Sidebar' export * from './SlideOver' export * from './Toolbar' From f52f46ed099cb69d5b5523505e4bae8c1a5f7325 Mon Sep 17 00:00:00 2001 From: Prince Rajpoot Date: Sat, 16 Sep 2023 21:22:53 +0530 Subject: [PATCH 2/4] minor changes --- packages/ui/components/icons/ClientIcon.tsx | 2 +- packages/ui/components/icons/ServerIcon.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui/components/icons/ClientIcon.tsx b/packages/ui/components/icons/ClientIcon.tsx index 35d69dcaa..e698c95d0 100644 --- a/packages/ui/components/icons/ClientIcon.tsx +++ b/packages/ui/components/icons/ClientIcon.tsx @@ -7,7 +7,7 @@ const ClientIcon = (props: any) => ( xmlns="http://www.w3.org/2000/svg" {...props} > - + ); diff --git a/packages/ui/components/icons/ServerIcon.tsx b/packages/ui/components/icons/ServerIcon.tsx index d7e78cd56..466582e3b 100644 --- a/packages/ui/components/icons/ServerIcon.tsx +++ b/packages/ui/components/icons/ServerIcon.tsx @@ -7,7 +7,7 @@ const ServerIcon = (props: any) => ( xmlns="http://www.w3.org/2000/svg" {...props} > - + ); From 1ff291c415976f5ce9200a6cabde5a10f7db485d Mon Sep 17 00:00:00 2001 From: Prince Rajpoot Date: Sat, 16 Sep 2023 21:34:14 +0530 Subject: [PATCH 3/4] minor changes --- packages/ui/components/icons/ClientIcon.tsx | 4 ++-- packages/ui/components/icons/ServerIcon.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/ui/components/icons/ClientIcon.tsx b/packages/ui/components/icons/ClientIcon.tsx index e698c95d0..da630f771 100644 --- a/packages/ui/components/icons/ClientIcon.tsx +++ b/packages/ui/components/icons/ClientIcon.tsx @@ -1,10 +1,10 @@ const ClientIcon = (props: any) => ( @@ -13,4 +13,4 @@ const ClientIcon = (props: any) => ( ClientIcon.displayName = 'ClientIcon'; -export default ClientIcon; +export default ClientIcon diff --git a/packages/ui/components/icons/ServerIcon.tsx b/packages/ui/components/icons/ServerIcon.tsx index 466582e3b..14bb75225 100644 --- a/packages/ui/components/icons/ServerIcon.tsx +++ b/packages/ui/components/icons/ServerIcon.tsx @@ -1,10 +1,10 @@ const ServerIcon = (props: any) => ( From 508ccad3a569a4329acf135ae44694a64c181b37 Mon Sep 17 00:00:00 2001 From: Prince Rajpoot Date: Mon, 18 Sep 2023 15:07:37 +0530 Subject: [PATCH 4/4] rename protocol to info --- .../components/ServiceInfoBadge.stories.tsx | 32 +++++++++---------- packages/ui/components/ServiceInfoBadge.tsx | 6 ++-- 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/apps/design-system/src/components/ServiceInfoBadge.stories.tsx b/apps/design-system/src/components/ServiceInfoBadge.stories.tsx index 86005cf48..03d943fec 100644 --- a/apps/design-system/src/components/ServiceInfoBadge.stories.tsx +++ b/apps/design-system/src/components/ServiceInfoBadge.stories.tsx @@ -12,96 +12,96 @@ export default { export const HTTP = { args: { - protocol: 'http' + info: 'http' } } export const Server = { args: { - protocol: 'server' + info: 'server' } } export const Client = { args: { - protocol: 'client' + info: 'client' } } export const Kafka = { args: { - protocol: 'kafka' + info: 'kafka' } } export const Websocket = { args: { - protocol: 'websocket' + info: 'websocket' } } export const AMQP = { args: { - protocol: 'amqp' + info: 'amqp' } } export const MQTT = { args: { - protocol: 'mqtt' + info: 'mqtt' } } export const GooglePubSub = { args: { - protocol: 'googlepubsub' + info: 'googlepubsub' } } export const IBMMQ = { args: { - protocol: 'ibmmq' + info: 'ibmmq' } } export const NATS = { args: { - protocol: 'nats' + info: 'nats' } } export const Pulsar = { args: { - protocol: 'pulsar' + info: 'pulsar' } } export const Redis = { args: { - protocol: 'redis' + info: 'redis' } } export const SNS = { args: { - protocol: 'sns' + info: 'sns' } } export const SQS = { args: { - protocol: 'sqs' + info: 'sqs' } } export const Solace = { args: { - protocol: 'solace' + info: 'solace' } } export const STOMP = { args: { - protocol: 'stomp' + info: 'stomp' } } diff --git a/packages/ui/components/ServiceInfoBadge.tsx b/packages/ui/components/ServiceInfoBadge.tsx index bd1e2bb2f..5519d7aad 100644 --- a/packages/ui/components/ServiceInfoBadge.tsx +++ b/packages/ui/components/ServiceInfoBadge.tsx @@ -3,19 +3,19 @@ import { AMQPIcon, AWSSNSIcon, AWSSQSIcon, ClientIcon, GooglePubSubIcon, IBMMQIc interface ServiceInfoBadgeProps { className?: string - protocol: 'http' | 'client' | 'server' | 'kafka' | 'websocket' | 'amqp' | 'mqtt' | 'googlepubsub' | 'ibmmq' | 'nats' | 'pulsar' | 'redis' | 'sns' | 'sqs' | 'solace' | 'stomp' + info: 'http' | 'client' | 'server' | 'kafka' | 'websocket' | 'amqp' | 'mqtt' | 'googlepubsub' | 'ibmmq' | 'nats' | 'pulsar' | 'redis' | 'sns' | 'sqs' | 'solace' | 'stomp' } export const ServiceInfoBadge: FunctionComponent = ({ className = '', - protocol, + info, ...props }) => { let colorName let content let ariaLabel - switch (protocol) { + switch (info) { case 'http': ariaLabel = 'HTTP' colorName = 'cyan' // bg-cyan-100 text-cyan-900