add AppCard component (#784)

Co-authored-by: samz <samir.amzani@gmail.com>

.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.

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: {

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<typeof AppCard> = {
+  component: AppCard,
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark'
+    }
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof AppCard>
+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
+  },
+}

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) => (<ServiceInfoBadge info={badge} key={badge + index} aria-hidden={true} />))
+
+  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 (
+    <>
+      <div
+        aria-label={`${ariaDescription} ${isActive ? 'It is currently active.' : 'It is currently inactive.'}`}
+        className={`bg-gray-800 border-gray-800 rounded-lg max-w-[523px] w-full border-2 ${className} ${
+          isActive ? ' border-pink-800/30 shadow-active' : ''
+        }`}
+      >
+        <div className="flex flex-col gap-2 px-5 py-3">
+          <h3 className="text-base font-medium text-gray-100">{name}</h3>
+          <div className='flex gap-1'>
+            { (isClient || isServer) && 
+            <div className='mr-2 flex gap-1'>
+              {isClient && <ServiceInfoBadge info='client'/>}
+              {isServer && <ServiceInfoBadge info='server'/>}
+            </div>
+            }
+            {dedupedListOfBadges}
+          </div>
+        </div>
+        <div className="w-full h-px bg-gray-700"></div>
+        <div className="px-5 py-[14px]">
+          <p className="text-sm text-gray-400 line-clamp-6">{description}
+          </p>
+        </div>
+      </div>
+    </>
+  )
+}

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<ServiceInfoBadgeProps> = ({

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'

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)',
+      },
+    },
+  }
 };