From 37bdfa0d287eb5a3a62645a404e558970854968b Mon Sep 17 00:00:00 2001 From: Khuda Dad Nomani <32505158+KhudaDad414@users.noreply.github.com> Date: Thu, 30 Nov 2023 11:03:01 +0000 Subject: [PATCH] add AppCard component (#784) Co-authored-by: samz --- .changeset/fluffy-plums-mix.md | 7 +++ apps/design-system/.storybook/preview.js | 6 +++ .../src/components/AppCard.stories.tsx | 26 ++++++++++ packages/ui/components/AppCard.tsx | 52 +++++++++++++++++++ packages/ui/components/ServiceInfoBadge.tsx | 3 +- packages/ui/components/index.tsx | 1 + packages/ui/tailwind.config.js | 9 +++- 7 files changed, 102 insertions(+), 2 deletions(-) create mode 100644 .changeset/fluffy-plums-mix.md create mode 100644 apps/design-system/src/components/AppCard.stories.tsx create mode 100644 packages/ui/components/AppCard.tsx diff --git a/.changeset/fluffy-plums-mix.md b/.changeset/fluffy-plums-mix.md new file mode 100644 index 000000000..7610c5f25 --- /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 InfoBadges so it exports Info type. 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: { 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..ab6f36046 --- /dev/null +++ b/apps/design-system/src/components/AppCard.stories.tsx @@ -0,0 +1,26 @@ +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", + badges: ['http', 'kafka', 'websocket'], + isServer: true, + isClient: false + }, +} \ 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..998dc6b14 --- /dev/null +++ b/packages/ui/components/AppCard.tsx @@ -0,0 +1,52 @@ +import { Info, ServiceInfoBadge } from './ServiceInfoBadge'; + +interface AppCardProps { + isActive?: boolean; + name: string; + description: string; + badges: Info[]; + isClient: boolean; + isServer: boolean; + className?: string; +} + +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 following protocols: ${protocols}`); + + const ariaDescription = `This application, named ${name}, is ${ariaDescriptionParts.join(' and ')}.`; + + return ( + <> +
+
+

{name}

+
+ { (isClient || isServer) && +
+ {isClient && } + {isServer && } +
+ } + {dedupedListOfBadges} +
+
+
+
+

{description} +

+
+
+ + ) +} \ No newline at end of file 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 = ({ 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..e86e23c97 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: { + active: '0px 0px 29px 0px rgba(190, 24, 93, 0.50)', + }, + }, + } }; \ No newline at end of file