From 994ddcbded52a1b0429d0c46af1995edc43ca831 Mon Sep 17 00:00:00 2001 From: Khuda Dad Nomani Date: Wed, 6 Sep 2023 15:55:08 +0100 Subject: [PATCH 01/13] change default dark color to our backgournd --- apps/design-system/.storybook/preview.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/apps/design-system/.storybook/preview.js b/apps/design-system/.storybook/preview.js index 5db08d667..767b40510 100644 --- a/apps/design-system/.storybook/preview.js +++ b/apps/design-system/.storybook/preview.js @@ -1,6 +1,12 @@ import '@asyncapi/studio-ui/styles.css' export const parameters = { + backgrounds: { + values: [ + { name: 'light', value: '#ffffff' }, + { name: 'dark', value: '#0F172A' }, + ], + }, actions: { argTypesRegex: "^on[A-Z].*" }, controls: { matchers: { From dd909f329e452abe2ed8caffe4e5b39b007aba5e Mon Sep 17 00:00:00 2001 From: Khuda Dad Nomani Date: Wed, 6 Sep 2023 15:55:51 +0100 Subject: [PATCH 02/13] modify ProtocolBadge so the protocol can be used by other components. --- packages/ui/components/ServiceInfoBadge.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/ui/components/ServiceInfoBadge.tsx b/packages/ui/components/ServiceInfoBadge.tsx index 5519d7aad..81e0bc69f 100644 --- a/packages/ui/components/ServiceInfoBadge.tsx +++ b/packages/ui/components/ServiceInfoBadge.tsx @@ -1,9 +1,10 @@ import type { FunctionComponent } from 'react' import { AMQPIcon, AWSSNSIcon, AWSSQSIcon, ClientIcon, GooglePubSubIcon, IBMMQIcon, KafkaIcon, MQTTIcon, NATSIcon, PulsarIcon, RedisIcon, ServerIcon, SolaceIcon, StompIcon, WebSocketIcon } from './icons' +export type Info = 'http' | 'kafka' | 'websocket' | 'amqp' | 'mqtt' | 'googlepubsub' | 'ibmmq' | 'nats' | 'pulsar' | 'redis' | 'sns' | 'sqs' | 'solace' | 'stomp' | 'client' | 'server' interface ServiceInfoBadgeProps { className?: string - info: 'http' | 'client' | 'server' | 'kafka' | 'websocket' | 'amqp' | 'mqtt' | 'googlepubsub' | 'ibmmq' | 'nats' | 'pulsar' | 'redis' | 'sns' | 'sqs' | 'solace' | 'stomp' + info: Info } export const ServiceInfoBadge: FunctionComponent = ({ From 4acfea5079ae89cb4ae27d53ed7d03e4cabd53dd Mon Sep 17 00:00:00 2001 From: Khuda Dad Nomani Date: Wed, 6 Sep 2023 15:56:05 +0100 Subject: [PATCH 03/13] add AppCard component --- .../src/components/AppCard.stories.tsx | 24 ++++++++++++++ packages/ui/components/AppCard.tsx | 33 +++++++++++++++++++ packages/ui/components/index.tsx | 1 + packages/ui/tailwind.config.js | 9 ++++- 4 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 apps/design-system/src/components/AppCard.stories.tsx create mode 100644 packages/ui/components/AppCard.tsx diff --git a/apps/design-system/src/components/AppCard.stories.tsx b/apps/design-system/src/components/AppCard.stories.tsx new file mode 100644 index 000000000..19bcdc4a9 --- /dev/null +++ b/apps/design-system/src/components/AppCard.stories.tsx @@ -0,0 +1,24 @@ +import { StoryObj, Meta } from '@storybook/react' + +import { AppCard } from '@asyncapi/studio-ui' + +const meta: Meta = { + component: AppCard, + parameters: { + layout: 'centered', + backgrounds: { + default: 'dark' + } + }, +} + +export default meta +type Story = StoryObj +export const CodeEditor: Story = { + args: { + isActive: true, + name: 'User Registration', + description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eucondimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentumurna, eu condimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuerefermentum urna, eu condimentum maur", + protocols: ['http', 'kafka', 'websocket'], + }, +} \ No newline at end of file diff --git a/packages/ui/components/AppCard.tsx b/packages/ui/components/AppCard.tsx new file mode 100644 index 000000000..b1af73f3c --- /dev/null +++ b/packages/ui/components/AppCard.tsx @@ -0,0 +1,33 @@ +import { Protocol, ProtocolBadge } from './ProtocolBadge'; + +interface AppCardProps { + isActive?: boolean; + name: string; + description: string; + protocols: Protocol[] + className?: string; +} + +export const AppCard = ({isActive = false, name, description, protocols, className}:AppCardProps) => { + return ( + <> +
+
+

{name}

+
+ {protocols.map((protocol, index) => ())} +
+
+
+
+

{description} +

+
+
+ + ) +} \ No newline at end of file diff --git a/packages/ui/components/index.tsx b/packages/ui/components/index.tsx index a1058b7ad..8f58846ed 100644 --- a/packages/ui/components/index.tsx +++ b/packages/ui/components/index.tsx @@ -12,4 +12,5 @@ export * from './ServiceInfoBadge' export * from './Sidebar' export * from './SlideOver' export * from './Toolbar' +export * from './AppCard' export { default as Tooltip } from './Tooltip' diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js index 3e555714a..d51dc3361 100644 --- a/packages/ui/tailwind.config.js +++ b/packages/ui/tailwind.config.js @@ -1,6 +1,13 @@ -const sharedConfig = require('tailwind-config/tailwind.config.js'); +import sharedConfig from 'tailwind-config/tailwind.config.js'; module.exports = { content: ['./components/**/*.tsx'], presets: [sharedConfig], + theme: { + extend: { + boxShadow: { + 'service-card': '0px 0px 29px 0px rgba(190, 24, 93, 0.50)', + }, + }, + } }; \ No newline at end of file From d08a00e21236725d5c05b7eb0ebb07f9a7526794 Mon Sep 17 00:00:00 2001 From: Khuda Dad Nomani Date: Wed, 6 Sep 2023 15:58:09 +0100 Subject: [PATCH 04/13] add changeset --- .changeset/fluffy-plums-mix.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/fluffy-plums-mix.md diff --git a/.changeset/fluffy-plums-mix.md b/.changeset/fluffy-plums-mix.md new file mode 100644 index 000000000..7a481c1d5 --- /dev/null +++ b/.changeset/fluffy-plums-mix.md @@ -0,0 +1,7 @@ +--- +"@asyncapi/studio-ui": minor +--- + +- Added AppCard component. +- change the dark background color of the design system. +- Modified ProtocolBadge so it exports Protocol type. From 19c88d279947a69b398fa40a67c90114fcccbe0d Mon Sep 17 00:00:00 2001 From: Khuda Dad Nomani Date: Thu, 5 Oct 2023 15:20:21 +0100 Subject: [PATCH 05/13] rename protocols to badges --- .../src/components/AppCard.stories.tsx | 3 ++- packages/ui/components/AppCard.tsx | 14 +++++++++----- packages/ui/tailwind.config.js | 2 +- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/apps/design-system/src/components/AppCard.stories.tsx b/apps/design-system/src/components/AppCard.stories.tsx index 19bcdc4a9..9053ce34a 100644 --- a/apps/design-system/src/components/AppCard.stories.tsx +++ b/apps/design-system/src/components/AppCard.stories.tsx @@ -19,6 +19,7 @@ export const CodeEditor: Story = { isActive: true, name: 'User Registration', description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eucondimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentumurna, eu condimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuerefermentum urna, eu condimentum maur", - protocols: ['http', 'kafka', 'websocket'], + badges: ['http', 'kafka', 'websocket'], + isServer: true }, } \ No newline at end of file diff --git a/packages/ui/components/AppCard.tsx b/packages/ui/components/AppCard.tsx index b1af73f3c..837be3297 100644 --- a/packages/ui/components/AppCard.tsx +++ b/packages/ui/components/AppCard.tsx @@ -1,25 +1,29 @@ -import { Protocol, ProtocolBadge } from './ProtocolBadge'; +import { Info, ServiceInfoBadge } from './ServiceInfoBadge'; interface AppCardProps { isActive?: boolean; name: string; description: string; - protocols: Protocol[] + badges: Info[]; + isClient: boolean; + isServer: boolean; className?: string; } -export const AppCard = ({isActive = false, name, description, protocols, className}:AppCardProps) => { +export const AppCard = ({isActive = false, name, description, badges, className, isClient, isServer}:AppCardProps) => { return ( <>

{name}

- {protocols.map((protocol, index) => ())} + {isClient && } + {isServer && } + {badges.map((badge, index) => ())}
diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js index d51dc3361..e86e23c97 100644 --- a/packages/ui/tailwind.config.js +++ b/packages/ui/tailwind.config.js @@ -6,7 +6,7 @@ module.exports = { theme: { extend: { boxShadow: { - 'service-card': '0px 0px 29px 0px rgba(190, 24, 93, 0.50)', + active: '0px 0px 29px 0px rgba(190, 24, 93, 0.50)', }, }, } From a1a09faa771af4a149a77358a2e1fe1a4305d69d Mon Sep 17 00:00:00 2001 From: Khuda Dad Nomani <32505158+KhudaDad414@users.noreply.github.com> Date: Thu, 5 Oct 2023 15:21:30 +0100 Subject: [PATCH 06/13] Update fluffy-plums-mix.md --- .changeset/fluffy-plums-mix.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/fluffy-plums-mix.md b/.changeset/fluffy-plums-mix.md index 7a481c1d5..7610c5f25 100644 --- a/.changeset/fluffy-plums-mix.md +++ b/.changeset/fluffy-plums-mix.md @@ -4,4 +4,4 @@ - Added AppCard component. - change the dark background color of the design system. -- Modified ProtocolBadge so it exports Protocol type. +- Modified InfoBadges so it exports Info type. From 92bce22ae728e6500a09ec27676e850d6c97754c Mon Sep 17 00:00:00 2001 From: Khuda Dad Nomani Date: Thu, 5 Oct 2023 16:31:13 +0100 Subject: [PATCH 07/13] add isClient --- apps/design-system/src/components/AppCard.stories.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/design-system/src/components/AppCard.stories.tsx b/apps/design-system/src/components/AppCard.stories.tsx index 9053ce34a..ab6f36046 100644 --- a/apps/design-system/src/components/AppCard.stories.tsx +++ b/apps/design-system/src/components/AppCard.stories.tsx @@ -20,6 +20,7 @@ export const CodeEditor: Story = { name: 'User Registration', description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eucondimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentumurna, eu condimentum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuerefermentum urna, eu condimentum maur", badges: ['http', 'kafka', 'websocket'], - isServer: true + isServer: true, + isClient: false }, } \ No newline at end of file From a590b21d3f26760b4aabd22f35170728bc1e3ee2 Mon Sep 17 00:00:00 2001 From: Khuda Dad Nomani Date: Tue, 10 Oct 2023 14:16:00 +0100 Subject: [PATCH 08/13] remove space --- packages/ui/components/AppCard.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/ui/components/AppCard.tsx b/packages/ui/components/AppCard.tsx index 837be3297..cefb35a5c 100644 --- a/packages/ui/components/AppCard.tsx +++ b/packages/ui/components/AppCard.tsx @@ -21,8 +21,12 @@ export const AppCard = ({isActive = false, name, description, badges, className,

{name}

- {isClient && } - {isServer && } + { (isClient || isServer) && +
+ {isClient && } + {isServer && } +
+ } {badges.map((badge, index) => ())}
From 3c35237455b4c566d21b65a30c6e2d4cccab7f44 Mon Sep 17 00:00:00 2001 From: Khuda Dad Nomani <32505158+KhudaDad414@users.noreply.github.com> Date: Thu, 23 Nov 2023 16:28:52 +0000 Subject: [PATCH 09/13] Update packages/ui/components/AppCard.tsx Co-authored-by: Prince Rajpoot <44585452+princerajpoot20@users.noreply.github.com> --- packages/ui/components/AppCard.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ui/components/AppCard.tsx b/packages/ui/components/AppCard.tsx index cefb35a5c..2620bb6a0 100644 --- a/packages/ui/components/AppCard.tsx +++ b/packages/ui/components/AppCard.tsx @@ -14,6 +14,7 @@ export const AppCard = ({isActive = false, name, description, badges, className, return ( <>
Date: Thu, 23 Nov 2023 16:29:16 +0000 Subject: [PATCH 10/13] Update packages/ui/components/AppCard.tsx Co-authored-by: Prince Rajpoot <44585452+princerajpoot20@users.noreply.github.com> --- packages/ui/components/AppCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/components/AppCard.tsx b/packages/ui/components/AppCard.tsx index 2620bb6a0..4c9e761fc 100644 --- a/packages/ui/components/AppCard.tsx +++ b/packages/ui/components/AppCard.tsx @@ -15,7 +15,7 @@ export const AppCard = ({isActive = false, name, description, badges, className, <>
From 7fbc518d2d8b738dfbff9c70e7b10c6f575b6f3d Mon Sep 17 00:00:00 2001 From: Khuda Dad Nomani <32505158+KhudaDad414@users.noreply.github.com> Date: Thu, 23 Nov 2023 16:29:54 +0000 Subject: [PATCH 11/13] Update packages/ui/components/AppCard.tsx Co-authored-by: Prince Rajpoot <44585452+princerajpoot20@users.noreply.github.com> --- packages/ui/components/AppCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/components/AppCard.tsx b/packages/ui/components/AppCard.tsx index 4c9e761fc..1967eae43 100644 --- a/packages/ui/components/AppCard.tsx +++ b/packages/ui/components/AppCard.tsx @@ -28,7 +28,7 @@ export const AppCard = ({isActive = false, name, description, badges, className, {isServer && }
} - {badges.map((badge, index) => ())} + {Array.from(new Set(badges)).map((badge, index) => ())}
From 2d6278309596d5a409bf369c0335bb83c26268b9 Mon Sep 17 00:00:00 2001 From: Khuda Dad Nomani Date: Mon, 27 Nov 2023 13:07:07 +0000 Subject: [PATCH 12/13] fix aria label --- packages/ui/components/AppCard.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/ui/components/AppCard.tsx b/packages/ui/components/AppCard.tsx index 1967eae43..202a83c41 100644 --- a/packages/ui/components/AppCard.tsx +++ b/packages/ui/components/AppCard.tsx @@ -11,10 +11,20 @@ interface AppCardProps { } export const AppCard = ({isActive = false, name, description, badges, className, isClient, isServer}:AppCardProps) => { + const dedupedListOfBadges = Array.from(new Set(badges)).map((badge, index) => ()) + + const ariaDescriptionParts = []; + if (isClient) ariaDescriptionParts.push('client'); + if (isServer) ariaDescriptionParts.push('server'); + const protocols = badges.map(badge => badge.toLowerCase()).join(', '); + if (protocols) ariaDescriptionParts.push(`uses the ${protocols} protocols`); + + const ariaDescription = `This application, named ${name}, is ${ariaDescriptionParts.join(' and ')}.`; + return ( <>
}
} - {Array.from(new Set(badges)).map((badge, index) => ())} + {dedupedListOfBadges}
From 6e17d586348f12f218ed53ec41fe92731ee499ef Mon Sep 17 00:00:00 2001 From: Khuda Dad Nomani <32505158+KhudaDad414@users.noreply.github.com> Date: Thu, 30 Nov 2023 10:36:47 +0000 Subject: [PATCH 13/13] Update packages/ui/components/AppCard.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fran Méndez --- packages/ui/components/AppCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/components/AppCard.tsx b/packages/ui/components/AppCard.tsx index 202a83c41..998dc6b14 100644 --- a/packages/ui/components/AppCard.tsx +++ b/packages/ui/components/AppCard.tsx @@ -17,7 +17,7 @@ export const AppCard = ({isActive = false, name, description, badges, className, if (isClient) ariaDescriptionParts.push('client'); if (isServer) ariaDescriptionParts.push('server'); const protocols = badges.map(badge => badge.toLowerCase()).join(', '); - if (protocols) ariaDescriptionParts.push(`uses the ${protocols} protocols`); + if (protocols) ariaDescriptionParts.push(`uses the following protocols: ${protocols}`); const ariaDescription = `This application, named ${name}, is ${ariaDescriptionParts.join(' and ')}.`;